数据库交互的本地项目:后台管理系统
目录
使用的应用
确定项目
初始化构建项目文件夹
页面内的引用顺序
使用的应用
Visual Studio Code | 项目编辑器 |
phpstudy_pro | 启动数据库 |
数据库文件 | 存储数据 |
确定项目
后台管理系统包括登录界面,主界面,个人主页,管理查找编辑系统,在进行项目前需要先对项目进行大致分类,例如基础的框架搭建,样式布局,典型的交互设置等。
初始化构建项目文件夹
在构建文件夹时,需确保所有的路径为英文,这在部署到服务器上时才不会出现莫名报错
├── CSS # 静态CSS文件
├──login.css # 登录CSS文件
├──index.css # 首页CSS文件
├── images # 静态图片资源
├──login # 登录图片文件夹
├──index # 首页图片文件夹
├── JS # 静态JS文件
├──login.js # 登录JS文件
├──index.js # 首页JS文件
├──login.html # 登录网页
├──index.html # 首页网页
页面内的引用顺序
在正式开始项目时,需注意路径的引用,文件的存放,各种声明,类名等的使用
//html:5进行快捷生成HTML文件初始框架<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title>//此处引用css文件来写入网页样式,需注意清空默认样式来保证不会被污染<link rel="stylesheet" href="./CSS/reset.css">//引入该网页的css文件<link rel="stylesheet" href="./CSS/index.css">
</head>//网页的主体部分
<body>
</body>//在主体部分后引入js文件
//最先引入JQuery的文件来方便我们使用JQuery样式
<script src="./JS/jquery.min.js"></script>
//引入js基础动画文件来调用动画操作
<script src="./JS/move.js"></script>
//引入该网页的js交互文件
<script src="./JS/index.js"></script></html>
由于项目文件的繁琐性和复杂性,我会将所有完成的HTML文件,CSS文件,JS文件进行展示,并在其中加入注解以方便观看。