JS原生管理系统介绍模板

JS原生管理系统介绍模板

一、需求分析

1.1 需要动态化加载页面，实现页面的跳转

1.2 需要拥有实现增删改查的后台，并实现后台的数据传到web用户端

​

1.3 用户端需要美观的页面和能够查询到相关的新闻并实现页面的动态跳转

二、核心功能

2.1 增删改查

• 创建新闻

• 管理新闻

• 预览新闻

2.2 门户入口

• 新闻搜索
• 新闻列表
• 新闻分类
• 新闻详情

2.3 后台的登录与管理入口

• 添加用户

• 删除用户

• admin的特权管理

• 不同员工的文章页面渲染

​

三、实现技术

3.1 引用了前端的著名框架bootstrap快速构建页面样式

3.2 通过jsonserver模拟实现前后端的数据交互，通过json文件用文本传输前端数据，并将其保存，创建快速动态网页

3.3 ES6模块化，使得页面的样式写法更易创建并管理

3.4 通过ajax的json文件中的id值与自定义属性值dataset-id来定位每一次后端请求的数据为哪一个值，保证了数据传输的唯一性，同时ajax支持？=xxx的写法与\xx\xx\？id=xx的写法使得渲染也可以使用后端中存储的数据一次性进行渲染

四、项目总结

4.1 面对困难

1. ajax的运行
2. 业务逻辑困难复杂
3. 第一次写不知道如何写ajax的数据存储
4. 因为用的json，所以图片的存储需要进行编码的转换，否则会出现问题
5. 大型项目的文件夹排版需要注意

4.2 后续规划

需要更加熟练地掌握框架的使用，后续希望进行学习vue，希望能够对node.js有一个更深入的了解，对ES6-13的更新的特性有一个更加深入的了解，对同步异步的请求有个更加深入的了解，通过框架的学习，也希望对网页端的页面布局有一个更高的提升，站在巨人的肩膀上完成项目更好的构建

4.3 整体总结

本次项目通过原生JS、jsonserver、ES6-13的知识融合，打造而出，分为权限的后台管理系统，普通的门户入口，通过本次项目的练习，使得本人对html+css+js的前端页面制作有了一个更深入的理解，对各个框架的使用、json-server的使用更加熟练，通过jsonserver的前后端交互，也使得对网页的本质有了更加深入的理解，为以后与后端交互铺垫基础