简述Vue.js + Egg.js开发Web App“衣推”(Demo)

642 阅读2分钟

一、开发时间、技术栈

开发时间:空闲时间编写(大概一个月)

技术栈:Vue.js + Egg.js

二、项目展示

三、后端结构设计(Egg.js + Mysql +Sequelize)

1. 插件的开启与配置:

plugin.js 中的每个配置项支持:(常用)

这里的话,使用了 egg-jwt + egg-cors 实现跨域/处理token、egg-sequelize 数据库查询、egg-validate 校验前端发送来的字段(通过get、post、put、delete方式)

2. config.default.js(配置)

这里使用了 Node.js 的 os模块(系统操作函数) + path(处理路径),通过 for 循环的遍历,获取到本机的 ip 地址,这样子在 配置端口信息 的时候用上 本机的 ip 地址

加载自定义中间件 authorization(验证token)、compress(用于图片压缩的);这里做了一个基础路由/base开头的match匹配,这样就可以实现一些例如登陆、注册页不要权限认证

自定义权限认证中间件,通过获取Authorization里面的信息,验证从前端返回的token,是否是当前用户,使用了jwt去解码,通过自定义secert

配置跨域

sequelize的配置

3.app.js启动项

这里使用了beforeStart生命周期,去做一些模拟数据,这样做项目的使用,每次sequelize都会以当前定义的数据去插入到数据库,这样比较方便开发

4.router.js

配置路由,可以使用router.resourcess 方法,去整合路由(避免写的太多了)

5.model

模型的定义,定义字段,这里的话,就是要了解关联关系,sequelize里面的一对一、一对多、多对多查询,外键和目标键

6.controller(操作)

7.service(服务、数据查询的方法)

四、前端结构设计

1.项目目录

2.main.js入口文件

这里是做一些插件的配置开启(具体看代码部分)、这里我使用了地图的定位功能,就是页面开启时,会自动获取当前位置,是利用百度地图插件(通过经纬度去辨别)

在 index.html(单页面应用) 配置百度地图、一些meta字段,控制页面不给用户缩放

3.App.vue(根组件)

这里使用了keep-Alive方法,页面缓存,当用户离开当前页面,再次回来时会使用初次进来时缓存的数据(v-show 切换DOM元素显示、隐藏)

4.components公共组件

5.api.js

这里封装了axios,实现跨域,在index.js里面统一导出上面不同模块的接口,用于功能的使用

6.router.js(路由守卫)

如果觉得还不错的掘友们,送个小爱心呗~~谢谢!!