javascript 实验项目设计 js项目实战

小黑子的JS项目案例实战系列

• PC端原生JavaScript项目案例实战开发，高含金量web前端项目

• 1. 需求分析

• (1) 面向对象
• (2) 用户需求

• 2. 开发原因
• 3. 详细设计和主要功能

• 3.1 新闻内容查询
• 3.2 登录实现
• 3.3 后台模块

• 4. 采用的技术

• 一、页面呈现效果
• 二、Scss应用
• 三、jQuery 与bootstrap框架
• 四、echarts库和Lodash插件
• 五、调用本地数据接口

• 5. 项目练习总结

• 5.1 练习的困难
• 5.2 练习收获
• 5.3 后续规划

PC端原生JavaScript项目案例实战开发，高含金量web前端项目

1. 需求分析

(1) 面向对象

适用人群： 自媒体，学生，以及各类社会人士……
适用年龄： 16~60岁

(2) 用户需求

1. 需要在主页面显示新闻内容，并做到动态交互更新；
2. 需要在主页面能够查询到相关的新闻
3. 需要动态化加载页面，实现页面跳转
4. 需要正常的登录，并实现在后台进行增删改查，发布新闻
   （需要管理员能够看到时常更新的新闻类型比例饼图，做到添加用户、删除用户）

2. 开发原因

• 参考类似于学习管理系统的简单模型架构，进行简单地实战练习

3. 详细设计和主要功能

3.1 新闻内容查询

主页面模块：

3.2 登录实现

登录模块：

3.3 后台模块

管理员视图，并且要求普通用户无法看见

新闻编写和预览，实现快速更新

4. 采用的技术

一、页面呈现效果

web三剑客：html，css，JavaScript

二、Scss应用

利用css预编译的升级scss，可以做到优化css代码空间

三、jQuery 与bootstrap框架

减少自己手写原生html和js的开发时间，同时运用ES6模块化

四、echarts库和Lodash插件

echarts可以快速引入视图，简化js开发

lodash 提供了数十种的工具方法, 用来处理 JavaScript 各种类型的数据，可以 打包体积优化及原理

五、调用本地数据接口

主要用json-server来构建环境，实现本地环境接口进而实现后端账号信息的存储、提交数据和登录等功能

通过输入的账号密码与数据库进行比对来达到验证的效果

5. 项目练习总结

5.1 练习的困难

1. json-server环境编写
   路径问题引发后续bug的连锁反应
2. 第一次写不清楚如何写ajax和fetch，进行ajax的数据存储不能熟练运用
3. 项目的文件夹排版一开始没有慎重导致链接无法对应
4. es6语法不熟悉
5. js的接口交互听不太懂，只会照抄，说不出原理
6. 对业务逻辑分析不知所措，找不到方向
7. 对echarts库，Lodash不是特别明白如何引用，对bootstrap框架的代码具体实例掌握地一知半解

5.2 练习收获

1. 了解自己能够熟练运用html和css
2. 本次练习实战对我第一次来说，做地非常差，但是有很大意义，在模仿的条件下实现了模拟前后端交互的一个项目，我明白了一些原理案例的具体是如何运用的。

5.3 后续规划

1.目标:精通JS，再刷js
2.跟着学习vue和node.js，增加知识储备
3.运用新学习的技术echarts库，Lodash，进行改进学习
4.模块化的学习与分类
5.多学习别人项目开发的过程，目标：了解业务实现