Vue2.0 开发后台管理系统

界面截图

界面

项目代码

Xin-Management

需求简介

行吧云购是一款面向西安地区汽车4S店的综合信息服务软件,该管理系统实现了对行吧云购全部数据的管理。

项目结构

├── README.md
├── index.html
├── package.json
├── src
│   ├── App.vue
│   ├── assets # 静态资源
│   ├── components # 项目组件
│   │   ├── Login.vue # 登录组件
│   │   └── Nav.vue # 导航组件
│   ├── main.js # webpack入口
│   ├── route.js # vue-router配置
│   ├── store # vuex全局状态管理
│   │   ├── actions.js
│   │   ├── getters.js
│   │   ├── index.js # vuex配置入口
│   │   └── mutations.js
│   └── views # 单个页面
│   ├── Container.vue # 页面容器
│   ├── PlatformSetting.vue # 平台设置页
│   ├── StoreManage # 平台管理
│   │   ├── CarList.vue # 车型管理组件
│   │   ├── CarModels.vue # 车系管理组件
│   │   └── StoreDetils.vue # 车店管理组件
│   └── StoreManage.vue # 平台管理页
└── webpack.config.js # webpack配置

项目依赖

"dependencies": {
"axios": "^0.15.3", # 数据请求
"js-cookie": "^2.1.3", # cookie操作
"qs": "^6.3.1", # 转码
"vue": "^2.2.1", # Vue
"vue-axios": "^1.2.2", # axios的vue插件
"vue-router": "^2.3.0", # 路由管理
"vuex": "^2.2.1" # 全局状态管理
},
"devDependencies": {
"babel-core": "^6.23.1", # 语法转换
"babel-loader": "^6.3.2",
"babel-plugin-component": "^0.9.0",
"babel-preset-es2015": "^6.22.0",
"cross-env": "^3.1.4",
"css-loader": "^0.26.2",
"element-ui": "^1.2.2", # UI组件
"file-loader": "^0.10.1",
"style-loader": "^0.13.2",
"vue-loader": "^11.1.3",
"vue-template-compiler": "^2.2.1",
"webpack": "^2.2.1", # 包管理工具
"webpack-dev-server": "^2.4.1" # 热加载
}

功能简介

管理系统分为4S店管理和平台管理两个部分

4S店管理

该部分主要实现了 4S店->车系->车型 的管理结构,在4S店管理页点击车系可进入该店的车系管理页,在车系管理页点击车型,可进入对应的车型管理页。

功能上实现了增删改查车店、车系、车型、文件上传等功能。

注:点击tooltip的加号实现新增数据,点击详情可实现对数据的详细查看和修改

平台管理

一些杂项的管理,详情见[在线地址

项目难点

数据请求

后台管理有大量的数据请求,如何保证数据正常请求是开发后台管理页必须考虑的问题。

Vue发布2.0版本后,官方不再维护vue-resource,推荐使用axios进行数据请求,配合vue-axios 就可以在vue项目中完美使用axios。

post请求

设置请求头

post请求需要设置请求头Content-Typeapplication/x-www-form-urlencoded,否在会在调试时显示跨域错误。

在axios.post()方法的配置项中添加

headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}

数据转码

发送数据需要转码,使用qs进行转码,在webpack入口文件main.js设置

Vue.axios.interceptors.request.use((request) => {
if (request.data && request.headers['Content-Type'] === 'application/x-www-form-urlencoded') {
request.data = qs.stringify(request.data);
}
return request;
});

页面刷新状态丢失

单页面应用在页面刷新后会重新渲染页面丢失状态,降低用户体验,如何保留页面状态是相对于传统页面开发要考虑的问题。

两步解决

设置路由

设置路由,当页面刷新后,会根据路由地址渲染不同的组件。

保存关键参数

将关键参数保存起来,具体的方式有很多,如Cookie、 LocalStorage、URL query,根据实际需求择优选择。

我的做法是将数据请求参数放在URL query中,使用vue-router的路由信息对象中的$route.query取到对应的参数。

判断登录状态

单页面应用相对于传统网站开发,路由的变化并没有请求新的页面,如何判断用户登录状态用传统的方式已经不能适应。

我的另一篇博客有介绍Vue单页面应用登录状态判断

交互细节

常见的后台管理页面看上去大同小异,只有在实际体验中才能感受到什么是好的交互。好的交互需要对开发者有很全面的要求,要对需求理解充分,考虑各种细节,同时还得有一定的技术能力,解决各种细小的问题。

项目总结

这个项目是我使用Vue2.0开发的第一个后台管理页面,是我使用Vue开发的第二个后台管理项目。作为商业项目,甲方的要求十分严格,没有妥协的余地,遇到技术难点不能妥协,整个团队都在等我。

项目依赖不要手贱去升级:)

加载评论框需要翻墙