项目名称:vue-admin-front
作者:雷婷婷
简介:
利用vue+iViewUI+vue-router+nodejs实现后台管理系统的搭建。
前端使用iViewUI框架进行架构,后台使用express框架进行架构。
技术栈:
1)使用iViewUI框架,配置webpack.config.js文件,下载相关模块
2)后台nodejs中的express框架
3)MongoDB作为数据库
4)vue-quill-editor编辑器插件
5)安装mongoose pagination、mongoose-materialized等相关插件
6)vuex状态管理器
7)crypto-js/md5 对用户密码进行加密显示
8)mixins代码混合,减少代码量,提高工作效率
疑难问题:
1)点击table中复选框无法获取当前id
2)进行添加删除等操作时,列表不会刷新
3)表单提交时不确定是添加操作还是编辑操作
4)tree控件,点击当前树时获取不到id
5)如何跨页面取数据
6)mongoose多条删除
7)http请求里的then方法中的this指向发生了改变
解决方案:
1)利用on-selection-change事件获取当前元素
2)添加删除等操作后,重新进行http请求刷新列表
3)在添加时传一个id,http请求前判断一下是否有id,有就是添加,没有就是编辑
4)利用on-select-change事件获取当前元素
5)利用cookie存储数据
6)用remove方法,传一个数组或对象,如{_id:{$in:ids}},注意要将ids转为数组
7)使用es6箭头函数
Build Setup
# install dependencies
npm install安装插件包
# serve with hot reload at localhost:8080
npm run dev 项目启动
package.json中配置了:
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
}
运行项目还能用
# build for production with minification
npm run build