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

目录

使用的应用

确定项目

初始化构建项目文件夹

页面内的引用顺序


使用的应用

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

相关推荐
data analyse 4565 分钟前
页面卸载时埋点上报总丢失?sendBeacon 上报与补偿方案
大数据·运维·服务器·前端·数据库·人工智能·数据分析
企查查数据服务6 分钟前
充电桩集采准入:用企业数据做供应商失信批量核验
大数据·数据库·人工智能
敲上瘾13 分钟前
分布式系统——Redis哨兵:自动故障转移与选举原理
linux·数据库·redis·分布式·缓存·微服务
2501_9339232538 分钟前
MySQL CRUD 详解:表数据插入、更新与删除,附生产避坑指南
数据库·mysql
爱喝水的鱼丶3 小时前
SAP-ABAP:S/4 HANA ABAP 新特性入门:与 ECC ABAP 的核心差异、架构优势与学习路径规划
运维·数据库·性能优化·sap·abap·hana·开发交流
余槐i10 小时前
PostgreSQL 函数索引报错 must be immutable:3种绕法与代价
数据库·后端·sql·postgresql·性能优化
数据库小学妹10 小时前
PostgreSQL表膨胀怎么办?autovacuum清不动的根因与排查命令
数据库·postgresql·表膨胀·mvcc·数据库运维
mister_guo10 小时前
MySQL-1267错误:排序规则冲突的原因与解决方案
数据库·mysql
骇客野人11 小时前
在麒麟操作系统上 分别安装 jdk1.8, 达梦数据库,redis ,memcache 的操作实施方案和步骤
数据库·redis·memcached
美狐美颜SDK开放平台12 小时前
直播APP如何实现美白滤镜功能?视频美颜SDK技术开发方案详解
前端·数据库·人工智能·音视频·美颜sdk·直播美颜sdk·视频美颜sdk