水钰莱H5

简介

基于egg-vue-webpack-spa-boilerplate脚手架设计开发的一个简单分销管理H5

相关工具：easy-webpack

运行

项目需要Node.js环境，且版本大于v.8.9，数据库使用的MongoDB，且版本大于v3，最好为v4

安装依赖

先配置npm为国内的源: npm config set registry https://registry.npm.taobao.org 
使用npm安装依赖项: npm i 

本地

本地运行： npm run dev 

生产环境

先清除以前的资源： npm run clean 
构建前端资源： npm run build 
启动工程： npm run start 

技术架构

整体使用JavaScript全栈构建，并且使用了Vue-ssr做了部分页面的服务端渲染，前端开发使用Vue.js+Vue-router+Vuex+Vant，网络请求使用axios，后端开发使用Egg.js+Mongoose，数据库使用MongoDB

云服务相关：业务方的要求，图片上传使用了腾讯云的COS对象服务，短信发送使用了腾讯云的SMS短信服务。

文件组织

• app // 业务代码
  • controller // 后端路由控制器
  • middleware // 中间件
  • model // 数据表设计
  • service // 后端复杂业务抽象
  • web // 前端业务目录
  • ...
  • router.js // 后端路由配置文件
• config // 配置文件
  • config.default.js // 默认配置
  • config.prod.js // 生产环境配置
  • config.local.js // 本地开发环境配置
• ...
• package.json // 项目依赖等信息
• webpack.config.js // webpack全局配置
• ...

业务流程

• 用户扫描其他用户的二维码进入注册页面，完成注册，提交注册申请
• 后台对注册申请进行审批，审批通过，用户得到短信提醒可登录进入系统
• 用户可在主界面进行产品信息查看/团队信息查看/业绩查看/积分查看与提现/产品补货/推荐他人/身份升级
• 管理员可进行相关的信息查看与审核

模块设计

用户模块

相关数据表：users/apply/validate/upgrade

• 用户的相关信息存储在users
• 用户的注册申请存储在apply
• 用户的升级申请存储在upgrade
• 用户的登录与找回密码的验证码相关存储在validate

产品模块

相关数据表：product/combo/plan/level

• 产品的基本信息存储在product
• 产品组合的套餐信息存储在combo
• 产品进货计划信息存储在plan
• 不同用户对应的进货要求存储在level

积分模块

相关数据表：point/refund

• 用户的积分记录存储在point
• 用户的积分提现记录存储在refund

前端部分

前端相关的文件都在app/web目录下，app/view目录里为构建生成的文件，不用care

文件组织

• app/web
  • asset // 不用打包的静态资源
  • component // 服务端渲染使用的组件
  • framework // 框架相关，如Vue,request等
  • page/app // 前端路由/页面/组件相关，前端核心业务目录
  • view // 模板文件

Vue全局配置

配置的位置在app/web/framework/app.js文件里

...  
client() {
    Vue.prototype.$http = request;
    Vue.use(Vant);
    Vue.use(Lazyload);
    const options = this.create(window.__INITIAL_STATE__);
    const app = new Vue(options);
    app.$mount('#app');
    return app;
  }
...

前端路由

配置文件在page/app/router.index.js
动态加载组件，点击才会加载相应的组件

import Vue from 'vue';

import VueRouter from 'vue-router';

// import Container from './container.vue';
// import Home from '../container/Home.vue';

Vue.use(VueRouter);

export default function createRouter() {
  return new VueRouter({
    mode: 'history',
    base: '/',
    routes: [
      {
        path: '/login',
        component: () => import('./login.vue'),
      },
      // ...
      {
        path: '/',
        component: () => import('./container.vue'),
        // component: Container,
        children: [
          {
            path: '/', // 首页
            component: () => import('../container/Home.vue'),
            // component: Home,
          },
          // ...
        ]
      },
    ]
  });
}

前端页面

一个页面其实就是一个vue文件，登录态的页面都放在了page/app/container目录下，不需要登录态的页面在page/app/router目录下

前端请求

请求对象已经挂在Vue全局对象上，在vue组件里，使用 this.$http 即可访问，建议页面加载时的请求放在组件的mounted周期里

请求示例：

this.$http.get('/api/user/getGrouperList').then(res => {
  if (res && !res.error && Array.isArray(res.data)) {
    this.list = res.data;
  } else {
    this.$toast.fail('获取数据失败');
  }
});

请求的全局配置文件在app/web/framework/utils/request.js，即对axios的全局配置

Vuex Store

相关文件在page/app/store目录，因为各页面之间独立性较强，所以没有全部使用Vuex，只有首页服务端渲染预取数据和全局Loading使用了Vuex

后端部分