梦学谷管理系统总结

团队协作/开发

规范/统一

开发规范

命名规范 (方法名,变量名 。。)

封装规范 (功能,参数,返回值,如何使用 。。。)

项目规范(主要模块,功能模块 ,组件,路劲,位置。。。)

开发项目

每日进度例会 / 检查

进度汇报

项目拆分

领取任务

时间预估

小结:梦学谷项目这里是团队开发的,我负责的模块是商品管理,首先就是API的封装,和拦截器的配置

API封装

import axios from 'axios'
axios.defaults.baseURL = "http://mengxuegu.com:9999/pro-api/"
export default {
	Member() {
		return axios({
			url: '/member/list',
			method: 'get'
		})
	}
}

拦截器的配置

//3. 设置请求拦截器配置
Server.interceptors.request.use(function(config) { //成功的时候
	console.log(config);
	config.headers.Authorization = sessionStorage.token;
	return config
}, function(error) { //失败
	return Promise.reject(error);
})

//4. 配置相应拦截器的信息
Server.interceptors.response.use(function(response) {
	if (response.status == 200) {
		return response.data;
	}
	return response;
}, function(error) { //失败
	return Promise.reject(error);
});

路由懒加载

	//* 商品管理路由
	{
		path: '/shop',
		name: 'Shop',
		component: () => import( /* webpackChunkName: "provider" */ '../components/shop/shop.vue'),
		meta: {
			bread: ['商品管理']
		}
	},

商品页面

梦学谷管理系统总结_第1张图片

就是传统的从接口获取数据,在进行布局 - 数据的渲染 - 样式的美化,

接下来的就是数据的增删改查,分页 搜索 ,

项目的过程中多层表单的嵌套比较难做,

就单说商品管理这个页面的 新增和编辑  里面都不太好做,我用了最笨的办法,写了好几个表单,在用两个变量控制着显示隐藏

梦学谷管理系统总结_第2张图片

 

 

 

你可能感兴趣的:(vue,vue.js)