项目架构
Vue,Vue-router,Vuex构建SPA
Element-plus组件库(Element-plus对于Vue3.0版本兼容性更好,Element-ui适合Vue2.0)
Webpack构建项目环境
Vue-router搭建项目路由,Vuex来实现单文件组件和数据的抽离
Express框架+MySQL构建后台服务器
部分任务
Axios拦截器实现登录拦截校验,对登录权限进行限制,避免无效请求
Vue-router实现系统角色权限控制,使不同权限的角色可以查看不同的模块
Webpack-bundle-analyzer插件于每次打包后,分析打包后模块的体积,再对其中比较大的模块进行优化
Preload/Prefetch优化资源加载的顺序和时机,提升页面性能(Preload的字体资源必须设置crossorigin属性,否则会导
致重复加载)
Dns-prefetch将解析后的IP缓存在系统中,缩短DNS解析时间,减少延迟
功能介绍
项目为响应政府文件制作,协助当地农产品(蔬菜,花生,瓜果,高粱等)与批发商对接
分角色模块登录,“我是农户”和 “我要批发” 两个角色
前端页面:首页,商品列表,评价列表,商品检索,地址管理,用户信息(包括角色)
商品列表按照规格SKU展示(商品SPU展示没办法进行促销)
后台管理系统本地部署在指定服务器,有用户管理,订单管理(OM),权限管理,数据统计,物流查询,还有最高权限者
模块
后台结算页面:结算单号、生成时间、结算时间段、结算金额、状态、操作(查看)
农户与平台按照结算单进行结算,农户可以设置自己的结算日,流程:生成结算单 - 店铺对账 - 平台付款 - 完成
前端对分类进行了缓存,半小时进行刷新,如果想立刻查看效果,手动删除缓存(位置:F12-Application-Storage:category/category_expiration_time)
前端规范基本引用阿里巴巴相关