基于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 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
相关数据表:product/combo/plan/level
相关数据表:point/refund
前端相关的文件都在app/web目录下,app/view目录里为构建生成的文件,不用care
- app/web
配置的位置在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的全局配置
相关文件在page/app/store目录,因为各页面之间独立性较强,所以没有全部使用Vuex,只有首页服务端渲染预取数据和全局Loading使用了Vuex