H5单页面应用(SPA)架构总结

2021-4-29 15:04:31 星期四

功能还在不断完善中， 点击预览

源码查看: Gitee

一: 前端

1. 原由

之前了解过vue, 但是前端现在太复杂了, 各种框架不太好入手, 看到了一篇介绍单页面框架核心思想(改变URL但不刷新页面)的原理实现,

想着写一个商城项目学习学习前端的知识. 经过了一年多的改版, 优化, 思考, 最终做成了现在这样,

 

2. 开发目标

以前开发小项目的过程一般是想到哪做到哪,  想到一个功能, 赶紧加上, 没有一个规划, 也没有一个有可衡量的标准, 做了很多了才发现一些模块可以复用, 然后开始重构, 浪费很多时间, 比较盲目

在这期间走过很多弯路, 做了很多无用功. 想着做一个总结, 加深一下记忆. 也希望能帮助到大家.

 

先确认开发目标, 定义标准, 然后再开始写代码.

目标: 比如, 我做的东西是为了方便传统商家展示自家商品用, 要能在微信中打开, 不用下载APP, 不支持交易, 想交易的话, 可以在自己的店铺中留下联系方式 ... 等等确定你的项目定位(本文出发点未纯技术探讨, 非商业化探讨, 因此产品设计不多展开)

标准: 比如, 做一个xx项目, 至少应该有xxx这些技术特点, 才能算的上是好东西. 

 

3. 设计

3.1 架构图

 

  

3.2 标准

一个项目, 在技术实现上, 有哪些特点, 才能算上是个好系统:

特点	说明	举例
代码量少/代码可复用	前端尽量通过js组件自动生成	1. 通过js插件+json数据生成完整的HTML代码, 2. 每个子页面模板中只写入占位标签, 加载后, 通过js替换占位标签 (但这样可能不利于SEO) 3. js插件尽可能自带模板和css, 并保证不重复加载css
前端请求也要有缓存	根据不同场景缓存后端返回的结果	1. 将请求参数与返回结果缓存下来 2. 可以自由指定缓存时间 (比如管理后台一些数据就不需要缓存, 需要立马看到编辑后的结果)
子页面要方便管理	每个子页面是一个单独的模板, 而不是一大堆塞到body标签中	1. 将子页面分开成一个个模板, 放在template标签中 2. 通过路由器,将模板内容加载到主显示区域
支持随时刷新	不管当前在哪个子页面, 如果用户刷新, 刷新后还是当前页面	1. 后端要做成单入口页面, 具体显示哪个子页面交由前端去控制 2. 前端路由根据当前的URL去加载子页面
按需加载js	页面中需要哪些插件, 就加载哪些	js插件可以单独引入
支持钩子	比如管理后台, 每次请求接口前都能够自动调用判断是否登录的方法
非侵入式动态渲染	HTML标签中尽量少的写入非标属性(例如: v-for, v-if)	1. 通过js工具(循环)渲染HTML模板, 2. 此js工具中有回调方法,支持对数据做二次加工  3. 此js工具可以渲染有嵌套的HTML模板 4. 模板中写入数据占位符即可
不同请求返回数据结构不同	如, 商品在 详情页/列表页/订单页面, 需要返回的字段并不同, 不能都返回	1. 比如, 请求参数中有一个是 model:'goods_info_base' 那么后端会返回一个商品的几个基本字段, 并不会把商品的所有字段多返回 2. 需要后端支持
接口尽量少, 可分类	请求的接口有尽量少, 而且有规律可循(方便管理)	1. 获取单条记录: /get_one_<模块名>_<模块ID> 2. 获取多条记录: /get_list_<模块名> 3. 更改一条记录: /update_one_<模块名>_<模块ID>_<字段> 4. 前端接口统一了, 对后端来说数据校验就稍微麻烦一些

 

未完待续。。。