【项目实战】基于前后端分离的WebApp“衣推”的设计与实现（Demo）

基于前后端分离的WebApp“衣推”的设计与实现（Demo）

前言

一、开发时间、技术栈

开发时间：2020.10.15–2020.11.1（时间赶，只做了个破产版）

技术栈：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（服务、数据查询的方法）

具体还可以看看我下面的文章，也是有关当前Demo的功能 👇

四、前端结构设计

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（路由守卫）

---

---

这里分享一些调查分析~~以及一些关于新媒体的营销策略

五、调查分析

---

六、营销策略

---

七、盈利模式