数据库交互的本地项目：后台管理系统

时间：2024-11-08 10:08:42

使用的应用 

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文件进行展示，并在其中加入注解以方便观看。

相关文章