vue开发后台管理系统小结
最近工作需要用vue开发了后台管理系统，由于是第一次开发后台管理系统，中间也遇到了一些坑，想在这里做个总结，也算是对于自己工作的一个肯定。我们金融性质的网站所以就不将代码贴出来哈
一、项目概述
首先工作需求是这样的，开发一个公司的总后台，包含各个不同的模块，总体难度一般，没有开发ui图，用的vue-cli 、elementui框架、webpack打包。
总需求的思维导图见链接 http://naotu.baidu.com/file/e8c31b43dfb2f18a3c523e0fa1393c02?token=945b226dc67040a4
总结了下后台管理系统主要的内容包括：1、各种列表的增删改查（其中表的增删改查是重点，其中结合分页和详情显示）2、权限的控制（权限的控制主要是后台的控制、前端的显示） 3、筛选功能（筛选数据在后台中几乎和表格一样多） 4、系统设置（菜单列表和个人界面、信息的设置）
二、项目的构建用的是vue-cli自动生成的，其中引入了vue-router、axios、element-ui等模块，生成header组件和分页组件来公用。
这是目录结构build用来放置webpack的配置，dist是发布在服务器上的文件，src下面是代码文件，文件入口时mian.js.
三、总结vue常用小的知识点
1、传值（子父组件之间、页面跳转之间）
（1）父组件通过props给子组件传递参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<my-component :my-message="value"></my-component>
</div>
<script>
//注册组件
Vue.component('my-component',{
//组件模板
template:'<div>我是全局组件/{{myMessage}}</div>',
//父组件通过props传递参数给子组件
props:['myMessage']
})
//实例化vue
new Vue({
el:'#app',
data () {
return {
value:'我是父组件传过来的'
}
}
})
</script>
</body>
</html>
（2）子组件通过props给父组件传递参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<child v-on:send-val="getVal"></child>
</div>
<script>
Vue.component('child',{
template:'<button v-on:click="handleClick">我是子组件</button>',
data () {
return {
value:1
}
},
methods:{
handleClick:function() {
this.value += 1;
//子组件通过$emit传递事件
this.$emit('send-val',this.value)
}
}
})
new Vue({
el:'#app',
methods:{
getVal(val){
console.info('val',val)
}
}
})
</script>
</body>
</html>
（3）页面跳转之间
1、路由传值
方法一（直接用路由路径）：
this.$router.push({
path:'/index' ,query:{"id":'传递的id值'}
}) 在index页面接收参数
this.$route.query.id 方法二（定义好路由名称）：
this.$router.push({
name:'index',
query/params:{
id:'传递的id值‘
}
) params刷新页面参数丢失，所以建议query传参
2、利用vue实例来传值
第一：先定义一个全局
var bus = new Vue();
第二：在需要传参的组件中定义$emit
bus.$emit('sendVal',id)
第三：在需要接收的组件中用$on来监听参数的改变
bus.$on('sendVal',function(val){console.info(val)});
第四:在钩子函数beforeDestroy()中关闭
bus.$off('sendVal')
3、<router-link :to="{ path: 'register', query: { id:'id' }}">Register</router-link>
2、路由钩子函数
router.beforeEach((to, from, next) => {
if (to.path == '/login') {
sessionStorage.removeItem('userInfo');
}
let userInfo = sessionStorage.getItem('userInfo');
if (!userInfo && to.path != '/login') {
next({ path: '/login' })
} else {
next()
}
if(to.path == '/'){
next({path:'login'})
}else{
next();
}
})
参数to from next可以理解成到哪个页面去 ，从哪个页面来，允许跳转，在判断是否跳转到登陆页面使用。
3、vue2.0过滤器
vue2.0去掉了1.0自带的过滤器，可以自己定义
//银行过滤器
Vue.filter('bankTran',function(value){
let bank_name = '';
switch(value){
case 'COMM':bank_name = '中国交通银行';break;
case 'SPDB':bank_name = '上海浦东发展银行';break;
case 'CMB' :bank_name = '招商银行';break;
case 'HXB' :bank_name = '华夏银行';break;
case 'CIB':bank_name = '兴业银行';break;
case 'CITIC':bank_name = '中信银行';break;
case 'GDB':bank_name = '广东发展银行';break;
case 'CEB':bank_name = '光大银行';break;
case 'CMBC':bank_name = '民生银行';break;
case 'SZPAB':bank_name = '平安银行';break;
case 'PSBC':bank_name = '中国邮政储蓄银行';break;
case 'CCB':bank_name = '中国建设银行';break;
case 'BOC':bank_name = '中国银行';break;
case 'ABC':bank_name = '中国农业银行';break;
case 'ICBC':bank_name = '中国工商银行';break;
}
return bank_name;
})
4、favcion webpack处理问题
在管理后台的开发中，当添加favcion时<link href="/favicon.ico" rel="icon" type="image/x-icon" />，却不能显示出来，最后将.ico文件放在了static下在本地终于成功的显示了出来，但在webpack打包的时候却遇到了问题，查了很多资料，最后在webpack的配置文件中增加了一行代码，favicon.ico文件放在根目录下面 终于成功。
5、查漏补缺：js数组梳理问题
判断数组a中是否有重复的值（1）
var a = [1,2,3,4];
var s = a.join(',')+',';
for(var i=0;i<a.length;i++){
if(s.replace(arr[i]+',','').indexOf(a[i]>-1)){
console.info('找到')
}else{
console.info('没有找到')
}
判断数组arr中是否有重复的值（2）
var arr = [1,2,3,4];
var arr1 = arr.sort();
for(var i=0;i<arr.length;i++){
if(arr[i]==arr1[i]){
console.info('有相等的值'，arr[i])
}
}
判断一个变量是否为一个数组
function isArray(obj){
return obj && typeof obj=='object' && obj.constructor == Array
}
四、其他
1、emement-ui框架地址 http://element.eleme.io/#/zh-CN/component/installation
2、期间用到的时间处理：moment
vue开发后台管理系统小结的更多相关文章
- vue开发后台管理系统有感
使用vue开发后台近一个月,今天终于完成得差不多了,期间也遇到很多的问题,所以利用现在的闲暇时间做个总结 使用element-ui基础,这次使用了vue-element-admin(github地址) ...
- xadmin开发后台管理系统常见问题
Xadmin开发后台管理系统 关注公众号"轻松学编程"了解更多. 添加小头像 https://blog.csdn.net/qq_34964399/article/details/8 ...
- vue+element-ui后台管理系统模板
vue+element-ui后台管理系统模板 前端:基于vue2.0+或3.0+加上element-ui组件框架 后端:springboot+mybatis-plus写接口 通过Axios调用接口完成 ...
- 完整开发vue后台管理系统小结
最近业余帮朋友做两个vue项目,一个是面向用户纯展示系列的(后统称A项目),一个是后端管理系统类的(后统称B项目).两者在技术上都没难度,这里对开发过程遇到的问题.取舍等做一个小节. 关于项目搭建 目 ...
- 从零开始搭建vue+element-ui后台管理系统项目到上线
前言 之前有些过移动端的项目搭建的文章,感觉不写个pc端管理系统老感觉少了点什么,最近公司项目比较多,恰巧要做一个申报系统的后台管理系统,鉴于对vue技术栈比较熟悉,所以考虑还是使用vue技术栈来做: ...
- 使用moy快速开发后台管理系统（一）
moy是什么? moy 是基于模型框架 kero 和 UI 框架 neoui 实现的应用框架,是前端集成解决方案,为企业级应用开发而生.github地址:iuap-design/tinper-moy ...
- vue重构后台管理系统调研
Q4要来了,我来这家公司已经一个季度了,通过对公司前端框架的整体认识,对业务的一些认识,发现,这些东西也都是可以重构,无论是v2,还是v3的代码. 首先就要那后台管理来开刀来,现有的技术框架就是php ...
- C#+Layui开发后台管理系统
我是笑林新记,分享一下我一套C#开发的后台管理系统,希望对大家有帮助!欢迎关注微信公众号:笑林新记 后台开发语言:C# 前端框架:layui 前天用毛笔笔画制作了一个毛笔字效果的Logo,主 ...
- vue-cli+vue 2.0+element-ui+vue-router+echarts.js开发后台管理系统项目教程
一.首先使用npm创建vue项目框架: 1.安装vue-cli: $ npm install --global vue-cli 2.初始化项目:$ npm init webpack 项目名 3 ...
随机推荐
- JMeter-Window10系统下设置环境变量
首先我们右击此电脑(我的电脑),点击属性 接下来我们就可以进入到控制面板主页,点击[高级系统设置] 在系统属性里面,点击[环境变量]按钮 在环境变量里面,点击[新建]按钮 接下来我们输 ...
- Python快速学习-函数
函数定义总结: 1.定义函数时,需要确定函数名和参数个数:2.如果有必要,先对参数的数据类型进行检查:3.函数体内部可以用return随时返回函数结果:4.函数执行完毕没有return语句时,自动re ...
- Struts2架构流程
[Struts2] Action实现. interceptor实现. Filter工作原理. 使用 拦截器来处理请求. 业务逻辑控制器与 Servlet API分离. ================ ...
- foobar2000下播放DSD音乐的插件
需要测试foobar下面DSD的播放插件,翻遍了度娘,找不到一个容易下载的地方,要不一大堆广告,要不就是需要账号,烦死了,总是设置了很多障碍.其实这东西是人家老外开发的,最原始的插件名字叫做foo_i ...
- CTR点击率简介
点击率 简介 在搜索引擎(百度.谷歌)中输入关键词后进行搜索,然后按竞价等因素把相关的网页按顺序进行排列出来,然后用户会选择自己感兴趣的网站点击进去:把一个网站所有搜索出来的次数作为总次数,把用户点击 ...
- 浪漫爱心--第三方开源--PeriscopeLayout
点此下载 使用很简单,首先在xml里面添加 <Button android:id="@+id/btn_start" android:layout_width="wr ...
- 基于zepto移动4*3九宫格转奖
最近根据公司需求,要把移动端的圆形转盘抽奖,改为九宫格的形式,查找资料搞定了,纪录下demo代码. 页面的展现样式,如下 比较简单,就是红色的背景图,在这10个格子里转动 具体代码如下 html &l ...
- mysql定时任务备份bat命令-记录一下待日后使用
最近有个任务,需要每日备份数据库到某个磁盘,使用window定时任务调用bat文件实现. %Date:~0,2%获取星期几,这个要根据系统进行尝试, 有 星期几 7/25/2018 有 2018/ ...
- Shell脚本备份Mongodb数据库
目录 环境还原 环境创建 编写shell脚本 准备文件 创建shell脚本 执行shell脚本 进阶版 感谢 诚邀访问我的个人博客:我在马路边 更好的阅读体验点击查看原文:Shell脚本备份Mongo ...
- JS计算字符串的长度
最近项目上经常要用到计算字符串的长度的问题,有时需要按照byte进行计算长度,所以我就想在页面上用js实现,于是就到网上查了相关的资料,发现确实有很多的版本,这里给出两个比较好用的. //方法一:逐个 ...