使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)


Posted in Javascript onJanuary 21, 2017

在上篇文章给大家介绍了使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)

1. 引入路由工具vue-router,切换视图

# 安装vue-router
cnpm install vue-router --save-dev

2. 使用vue-router

main.js
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import routeConfig from './router-config' // 引入router-config.js文件
//加载路由中间件
Vue.use(VueRouter)
//定义路由
const router = new VueRouter({
  routes: routeConfig
})
new Vue({
 router,
 store,
 el: "#app",
 render: h => h(App)
})

3. 配置路由

在src目录下新建router-config.js,在router-cinfig.js中里面配置路由

// 引入组件
import activePublic from './page/activePublic/index.vue'
export default [
 {
  // 配置路由,当路径为'/activePublic',使用组件activePublic
  path:'/activePublic',component:activePublic,
 }
]

4. 使用路由

app.vue
<template>
 <div id="app">
 <!-- 头部导航 -->
 ...
 <main>
   <!-- 左侧导航 -->
  <div class="main-left">
   ...
  </div>
   <!-- 右侧主内容区 -->
   <div class="main-right" >
    <!-- 视图 -->
    <router-view class="view"></router-view>
   </div>
 </main>
 </div>
</template>

5. 打开activePublic/index.vue文件,在页面随便写点东西,测试一下,路由是否配置成功

<template>
 <div class="activePublic ">
  <!-- element步骤组件 -->
  <el-steps :space="200" :active="step" class="step">
  <el-step title="活动信息" description=""></el-step>
  <el-step title="报名签到" description=""></el-step>
  <el-step title="分享设置" description=""></el-step>
  <el-step title="个性设置" description=""></el-step>
  </el-steps>
</template>

6. 启动项目cnpm run dev,看到如下页面,说明路由配置成功

使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)

7. 接下来,在activePublic/index.vue直接调用element-ui组件,完成活动发布的首页,完成好的代码如下

activePublic/index.vue
<template>
 <div class="activePublic ">
  <!-- 步骤组件 -->
  <el-steps :space="200" :active="step" class="step">
  <el-step title="活动信息" description=""></el-step>
  <el-step title="报名签到" description=""></el-step>
  <el-step title="分享设置" description=""></el-step>
  <el-step title="个性设置" description=""></el-step>
  </el-steps>
  <!-- 视图 -->
  <router-view class="view"></router-view>
  <div class="but-group">
  <el-button >预览</el-button>
  <el-button >上一步</el-button>
  <el-button type="primary">下一步</el-button>
  <el-button type="primary">发布活动</el-button>
  </div>
 </div>
</template>

上面这个页面又出现了一个router-view,为什么要这样放呢?因为step1、step2、step3、step4四个页面都含有顶部的"步骤"组件,所以这里把step1/2/3/4单独提出来放在4个页面中

8. 在router-config.js文件中配置二级路由

router-config.js
import activePublic from './page/activePublic/index.vue'
<!-- 引入子页面 -->
import step1 from './page/activePublic/step1.vue'
import step2 from './page/activePublic/step2.vue'
import step3 from './page/activePublic/step3.vue'
import step4 from './page/activePublic/step4.vue'
export default [
 {
 path:'/activePublic',component:activePublic,
 // 配置子路由
 children:[
  // 路径为'/activePublic',使用组件step1
  { path: ''  , component: step1 },
  // 路径为'/activePublic/step1',使用组件step1
  { path: 'step1', component: step1 },
  // 路径为'/activePublic/step2',使用组件step2
  { path: 'step2', component: step2 },
  { path: 'step3', component: step3 },
  { path: 'step4', component: step4 }
 ]
 }
]

9. 重新启动项目cnpm run dev,在浏览器中默认路径为http://localhost:8080/#/activePublic,根据我们设置的路由规则,就会显示step1.vue页面中的内容,接着完成step1.vue,代码如下,参考element表单组件

step1.vue

<template>
 // TODO:这个页面有一个不足之处,时间选择器组件,表单验证出错,这是element组件的问题,留给大家自己去完善
 <div class="step1">
  <!-- element表单组件 -->
  <el-form :model="ruleForm" class="demo-ruleForm" :rules="rules" ref="ruleForm" label-position="top">
   <!-- 表单项,prop属性表示要进行表单验证,验证规则对应为rules的属性name -->
   <el-form-item label="活动名称" prop="name">
   <el-input v-model="ruleForm.name" size="large"></el-input>
  </el-form-item>
  <el-form-item label="" prop="fenLei">
   <!-- 改装后的表单项,在标签栏添加了一个按钮 -->
   <el-row style="height: 35px;" type="flex" align="middle">
   <el-col :span="3" style="width: 90px;">
    <div class="el-form-item__label" style="padding-bottom: 0;"> 活动分类</div>
   </el-col>
   <el-col class="" :span="2">
    <el-button type="text" @click.native="dialogFormFenLeiVisible = true" style="margin: 0;padding: 0;">设置</el-button>
   </el-col>
   </el-row>
   <el-radio-group v-model="ruleForm.fenLei" >
   <el-radio v-for="item of ruleForm.fenLeis" :label="item.name"></el-radio>
   </el-radio-group>
  </el-form-item>
   <!-- 这里有一个坑,活动标签并不是一个表单元素,无法使用element自带的验证功能 -->
  <el-form-item label="活动标签" required>
   <el-tag
    v-for="tag in ruleForm.tags"
    :closable="true"
    type="primary"
    @close="handleClose(tag)"
    >
    {{tag.name}}
   </el-tag>
   <el-button icon="plus" size="large" @click.native="showDialog" style="vertical-align: middle;margin: 10px;"></el-button>
   <transition name="fade">
   <div class="el-form-item__error" v-show="tagsValid">{{ tagsError }}</div>
   </transition>
  </el-form-item>
  <el-form-item label="活动时间" required style="width: 750px;">
   <el-col :span="5">
   <!-- 时间选择器,表单验证时也有点坑,报错异常,建议不用element自带表单验证,自己写验证规则 -->
   <el-form-item prop="activeStartTimeDate">
    <el-date-picker
    v-model="ruleForm.activeStartTimeDate"
    type="date"
    placeholder="活动开始日期">
    </el-date-picker>
   </el-form-item>
   </el-col>
   <el-col :span="5">
   <el-form-item prop="activeStartTimeTime">
    <el-time-select
    placeholder="请选择时间点"
    v-model="ruleForm.activeStartTimeTime"
    :picker-options="{start: '00:00',step: '00:15',end: '23:45'}">
    </el-time-select>
   </el-form-item>
   </el-col>
   <el-col :span="1" style="text-align: center;">—</el-col>
   <el-col :span="5">
   <el-form-item prop="activeEndTimeDate">
    <el-date-picker
    v-model="ruleForm.activeEndTimeDate"
    type="date"
    placeholder="活动结束日期">
    </el-date-picker>
   </el-form-item>
   </el-col>
   <el-col :span="5">
   <el-form-item prop="activeEndTimeTime">
    <el-time-select
    placeholder="请选择时间点"
    v-model="ruleForm.activeEndTimeTime"
    :picker-options="{start: '00:00',step: '00:15',end: '23:45'}">
    </el-time-select>
   </el-form-item>
   </el-col>
  </el-form-item>
  <el-form-item label="报名时间" required style="width: 750px;">
   <el-col :span="5">
    <el-form-item prop="signStartTimeDate">
    <el-date-picker
     v-model="ruleForm.signStartTimeDate"
     type="date"
     placeholder="报名开始日期">
    </el-date-picker>
    </el-form-item>
   </el-col>
   <el-col :span="5">
   <el-form-item prop="signStartTimeTime">
    <el-time-select
    placeholder="请选择时间点"
    v-model="ruleForm.signStartTimeTime"
    :picker-options="{start: '00:00',step: '00:15', end: '23:45'}">
    </el-time-select>
   </el-form-item>
   </el-col>
   <el-col :span="1" style="text-align: center;">—</el-col>
   <el-col :span="5">
   <el-form-item prop="signEndTimeDate">
    <el-date-picker
    v-model="ruleForm.signEndTimeDate"
    type="date"
    placeholder="报名结束日期">
    </el-date-picker>
   </el-form-item>
   </el-col>
   <el-col :span="5">
   <el-form-item prop="signEndTimeTime">
    <el-time-select
    placeholder="请选择时间点"
    v-model="ruleForm.signEndTimeTime"
    :picker-options="{start: '00:00',step: '00:15',end: '23:45'}">
    </el-time-select>
   </el-form-item>
   </el-col>
  </el-form-item>
  <el-form-item label="活动地点" required >
   <!-- 自己封装的一个二级联动地址选择器 -->
   <address-select
    :province="ruleForm.province"
    :city="ruleForm.city"
    :detail="ruleForm.detail"
    :isAddressTrue="isAddressTrue"
    ></address-select>
  </el-form-item>
  <el-form-item label="活动人数">
   <el-row>
   <el-col :span="6" style="width: 187px;">
   <el-radio class="radio" v-model="ruleForm.activePerson" label="无限制">无限制</el-radio>
   <el-radio class="radio" v-model="ruleForm.activePerson" label="限制">限制</el-radio>
   </el-col>
   <el-col :span="6">
   <el-input placeholder="0" :number="true" size="large" v-model="ruleForm.activePersonNum" :disabled=" ruleForm.activePerson == '无限制' "><template slot="append">人</template></el-input>
   </el-col>
   </el-row>
  </el-form-item>
  <el-form-item label="活动封面">
   <el-upload action="http://jsonplaceholder.typicode.com/" type="drag" :multiple="true" :on-preview="handlePreview" :on-remove="handleRemove" :on-success="handleSuccess" :on-error="handleError">
   <i class="el-icon-upload"></i>
   <div class="el-dragger__text">将文件拖到此处,或<em>点击上传</em></div>
   <div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过2M</div>
   </el-upload>
  </el-form-item>
  <el-form-item label="活动简介">
   <el-input
    type="textarea"
    placeholder="请输入内容"
    :autosize="{minRows: 4, maxRows: 8}"
    v-model="ruleForm.activeDescribe">
   </el-input>
  </el-form-item>
  <el-form-item label="报名用户信息展示">
   <el-radio-group v-model="ruleForm.UseMsgShow">
   <el-radio label="不展示"></el-radio>
   <el-radio label="展示报名人数"></el-radio>
   <el-radio label="展示报名清单"></el-radio>
   <el-radio label="报名成功显示完整用户资料"></el-radio>
   </el-radio-group>
  </el-form-item>
  <el-form-item label="评价功能">
   <el-radio-group v-model="ruleForm.evaluate">
   <el-radio label="不开启"></el-radio>
   <el-radio label="实时评价"></el-radio>
   <el-radio label="审核后评论"></el-radio>
   </el-radio-group>
  </el-form-item>
  <el-form-item label="">
   <el-row>
   <div class="el-form-item__label"> 赞助广告</div>
   <el-col class="el-form-item__label is-active" :span="2">
    <el-button type="text" @click.native="openAd">开通赞助广告</el-button>
   </el-col>
   </el-row>
   <el-upload action="http://jsonplaceholder.typicode.com/" type="drag" :multiple="true" :on-preview="handlePreview" :on-remove="handleRemove" :on-success="handleSuccess" :on-error="handleError">
   <i class="el-icon-upload"></i>
   <div class="el-dragger__text">将文件拖到此处,或<em>点击上传</em></div>
   <div class="el-upload__tip" slot="tip">图片尺寸建议比例1;4.18,如160*666像素,且不超过2M</div>
   </el-upload>
  </el-form-item>
  <el-form-item>
   <el-input
   placeholder="请填写您的广告标题"
   size="large"
   v-model="ruleForm.adTitle">
   </el-input>
  </el-form-item>
  <el-form-item>
  <el-input
   placeholder="请填写您的广告内容"
   size="large"
   v-model="ruleForm.adContent">
   </el-input>
  </el-form-item>
  <el-form-item >
   <el-input
   placeholder="请填写您的赞助链接"
   size="large"
   v-model="ruleForm.adLink">
   </el-input>
  </el-form-item>
  </el-form>
  <!-- 弹框 -->
  <el-dialog title="添加活动标签" v-model="dialogFormVisible" top="35%">
  <el-form :model="dialogForm">
   <el-form-item>
   <el-input v-model="dialogForm.name" auto-complete="off" ></el-input>
   </el-form-item>
  </el-form>
    <span slot="footer" class="dialog-footer">
     <el-button @click.native="dialogFormVisible = false">取 消</el-button>
     <el-button type="primary" @click.native="handleAdd(dialogForm.name,dialogForm,ruleForm.tags)">添加</el-button>
    </span>
  </el-dialog>
  <!-- 设置活动分类 -->
  <el-dialog title="设置活动分类" v-model="dialogFormFenLeiVisible" >
  <el-form :model="dialogFormFenLei">
   <el-form-item>
   <el-tag
    v-for="feiLei of ruleForm.fenLeis"
    :closable="true"
    type="primary"
    @close="handleCloseFenLei(feiLei)"
    >
    {{ feiLei.name }}
   </el-tag>
   </el-form-item>
   <el-form-item>
   <el-input v-model="dialogFormFenLei.name" auto-complete="off" ></el-input>
   </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
   <el-button @click.native="dialogFormFenLeiVisible = false">取 消</el-button>
   <el-button type="primary" @click.native="handleAdd(dialogFormFenLei.name,dialogFormFenLei,ruleForm.fenLeis)">添加</el-button>
  </span>
  </el-dialog>
 </div>
</template>
<script>
 // 地址选择器组件
 import addressSelect from 'src/components/address.vue'
 export default {
 name:'step1',
 // 组件
 components: {
  'address-select' : addressSelect
 },
 data: function () {
  return {
  tagsValid:false,    // 活动标签是否合法
  tagsError:'请设置标签',   // 活动标签不合法的提示信息
  isAddressTrue:false,   // 地址是否正确
  dialogFormVisible: false,  // 添加活动标签的对话框可见?
  dialogFormFenLeiVisible:false, // 分类对话框可见?
  dialogForm:{name:''},   // 活动标签对话框表单
  dialogFormFenLei:{name:''},  // 活动分类对话框表单
  ruleFormChange:false,   // ruleForm表单是否改变?
  ruleFormValid:false,   // ruleForm是否合法?
  rules: {      // 表单验证规则
   name:[
   {required:true,message:'请输入活动名称',trigger:'change'}
   ],
   fenLei:[
   {required:true,message:'请选择活动分类',trigger:'change'}
   ],
   activeStartTimeDate: [{required:true,message:'请选择活动开始日期',trigger:'change'}],
   activeStartTimeTime: [{required:true,message:'请选择活动开始时间',trigger:'change'}],
   activeEndTimeDate: [{required:true,message:'请选择活动结束日期',trigger:'change'}],
   activeEndTimeTime: [{required:true,message:'请选择活动结束时间',trigger:'change'}],
   signStartTimeDate: [{required:true,message:'请选择报名开始日期',trigger:'change'}],
   signStartTimeTime: [{required:true,message:'请选择报名开始时间',trigger:'change'}],
   signEndTimeDate:  [{required:true,message:'请选择报名截止日期',trigger:'change'}],
   signEndTimeTime:  [{required:true,message:'请选择报名截止时间',trigger:'change'}],
  },
  ruleForm: {   // step1页面的表单,记录页面所有表单信息
   name: '',   // 活动名称
   fenLeis:[   // 活动分类选项
   {name: '未发布'},
   {name: '测试活动'},
   {name: '精彩活动'}
   ],
   fenLei: '',  // 当前选中的活动分类
   tags: [],   // 活动标签
   activeStartTimeDate: '', // 活动开始时间
   activeStartTimeTime: '', // 活动结束时间
   activeEndTimeDate: '',
   activeEndTimeTime: '',
   signStartTimeDate: '',
   signStartTimeTime: '',
   signEndTimeDate: '',
   signEndTimeTime: '',
   activePerson:'',    // 是否限制活动人数?
   activePersonNum:'',   // 限制多少人?
   activeDescribe:'',   // 活动简介
   UseMsgShow:'',    // 报名活动信息展示
   evaluate:'',     // 评价功能
   adTitle:'',     // 广告标题
   adContent:'',    // 广告内容
   adLink:'',     // 赞助链接
  }
  };
 },
 watch: { // 监控
  ruleForm: {
  handler: function (val,oldVal) {
   store.commit('setRuleForm',this.ruleForm);
   this.tagsValid = !this.ruleForm.tags.length ? '' :false ;
   this.ruleFormChange = true ;
  },
  deep: true // 深度监控,可以观察到ruleForm内任意属性的变化
  }
 },
 methods: {
  handleRemove: function (file, fileList) {
  console.log(file, fileList);
  },
  handlePreview: function (file) {
  console.log(file);
  },
  handleSuccess: function () {
  },
  handleError: function () {
  },
  // 显示添加活动标签对话框
  showDialog: function () {
  if(this.ruleForm.tags.length >=5 ){
   this.$message({
   message: '最多设置5个标签',
   type: 'warning'
   });
  }else{
   this.dialogFormVisible = true;
   this.dialogForm = {};
  }
  },
  // 删除活动标签
  handleClose: function (tag) {
  var index = this.ruleForm.tags.indexOf(tag);
  this.ruleForm.tags.splice(index,1);
  },
  // 删除活动分类的某一项
  handleCloseFenLei: function (fenLei){
  var index = this.ruleForm.fenLeis.indexOf(fenLei);
  this.ruleForm.fenLeis.splice(index,1);
  },
  // 添加标签
  handleAdd: function (tag,form,tags) {
  if(tag && tag.trim().length !== 0){
   var isExist = false ;
   tag = tag.trim();
   for(var i=0;i<tags.length; i++){
   if(tags[i].name == tag ){
    isExist = true;
    break
   }
   }
   if(isExist){
   this.$message({
    message: '该标签已存在',
    type: 'warning'
   });
   }else{
   this.dialogFormVisible = false;
   this.dialogFormFenLeiVisible = false;
   tags.push({
    name: tag
   });
   }
  }else{
   this.$message({
   message: '标签不能为空',
   type: 'warning'
   });
  }
  },
  openAd: function (){
  this.$message('该功能正在完善');
  },
 },
 // 页面初始化
 created: function(){
 }
 }
</script>
<style>
 .step{margin-bottom: 30px;}
 .step1 .demo-ruleForm .el-form-item{margin-bottom: 25px;margin-right: 50px;}
 .step1 .el-form-item.is-required .el-form-item__label:after {
  content: '*';
  color: #ff4949;
  margin-right: 4px;
 }
 .step1 .el-form-item.is-required .el-form-item__label:before { display: none; }
 /* 标签 */
 .step1 .el-tag{padding: 10px 15px;margin:10px;vertical-align: middle;}
 .step1 .el-tag:first-child{margin-left: 0;}
 /* 对话框 */
 .step1 .el-dialog--small{width: 564px;}
 .step1 .el-dialog__body{padding-bottom: 0;}
 .step1 .el-dialog__body .el-form-item{margin-bottom: 10px;}
 .step1 .el-dialog__wrapper .el-button{margin-left: 15px;}
 /* 时间选择器 */
 .step1 .el-date-editor{width:150px;}
 .step1 .el-form-item .router-link{color:#fff;}
 .el-form-item__error{white-space: nowrap;}
</style>

这个页面的大部分是使用的element组件,请自行对照官网实现。在这个页面中封装了一个二级地址选择插件,稍后会专门写一篇文章,详细介绍如何封装组件,先为大家奉上地址选择器源码。

10. 重新启动项目,cnpm run dev,检查页面上的功能是否都已经实现,是否有报错,如果有解决不了的错误,欢迎留言咨询,我会第一时间为您解答。

使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)

以上所述是小编给大家介绍的使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
让你的CSS像Jquery一样做筛选的实现方法
Jul 10 Javascript
formValidator3.3的ajaxValidator一些异常分析
Jul 12 Javascript
利用jquery包将字符串生成二维码图片
Sep 12 Javascript
Javascript中3个需要注意的运算符
Apr 02 Javascript
js获取元素的外链样式的简单实现方法
Jun 06 Javascript
js排序与重组的实例讲解
Aug 28 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
Jul 06 Javascript
微信小程序常用简易小函数总结
Feb 01 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
Feb 21 Javascript
详解vue项目中调用百度地图API使用方法
Apr 25 Javascript
Vue.directive 实现元素scroll逻辑复用
Nov 29 Javascript
详解如何使用Node.js实现热重载页面
May 06 Javascript
遍历json获得数据的几种方法小结
Jan 21 #Javascript
新闻上下滚动jquery 超简洁(必看篇)
Jan 21 #Javascript
vue2.0父子组件及非父子组件之间的通信方法
Jan 21 #Javascript
微信小程序 devtool隐藏的秘密
Jan 21 #Javascript
JS设置CSS样式的方式汇总
Jan 21 #Javascript
JS 实现 ajax 异步浏览器兼容问题
Jan 21 #Javascript
RequireJS 依赖关系的实例(推荐)
Jan 21 #Javascript
You might like
php_screw 1.5:php加密: 安装与使用详解
2013/06/20 PHP
PHP在网页中动态生成PDF文件详细教程
2014/07/05 PHP
PHP实现货币换算的方法
2014/11/29 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
PHP 面向对象程序设计之类属性与类常量实现方法分析
2020/04/13 PHP
使用正则替换变量
2007/05/05 Javascript
使用jquery读取html5 localstorage的值的方法
2013/01/04 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
2013/12/04 Javascript
jquery实现的下拉和收缩效果示例
2014/08/21 Javascript
对JavaScript中this指针的新理解分享
2015/01/31 Javascript
JavaScript正则表达式之multiline属性的应用
2015/06/16 Javascript
Bootstrap Paginator分页插件使用方法详解
2016/05/30 Javascript
AngularJS 整理一些优化的小技巧
2016/08/18 Javascript
jQuery给指定的table动态添加删除行的操作方法
2016/10/12 Javascript
详解nodejs 文本操作模块-fs模块(二)
2016/12/22 NodeJs
原生JS实现简单放大镜效果
2017/02/08 Javascript
javascript显示动态时间的方法汇总
2018/07/06 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
2019/02/28 Javascript
vue实现评价星星功能
2020/06/30 Javascript
python发送邮件实例分享
2017/07/28 Python
python os.path模块常用方法实例详解
2018/09/16 Python
Python生成一个迭代器的实操方法
2019/06/18 Python
python+logging+yaml实现日志分割
2019/07/22 Python
基于django传递数据到后端的例子
2019/08/16 Python
python实现低通滤波器代码
2020/02/26 Python
Jupyter Notebook折叠输出的内容实例
2020/04/22 Python
HTML5 WebSocket实现点对点聊天的示例代码
2018/01/31 HTML / CSS
Melissa鞋马来西亚官方网站:MDreams马来西亚
2018/04/05 全球购物
俄罗斯护发和专业化妆品购物网站:Hihair
2019/09/28 全球购物
道德演讲稿
2014/05/21 职场文书
延安红色之旅心得体会
2014/10/07 职场文书
乡镇党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
先进个人推荐材料
2014/12/29 职场文书
2015年学校德育工作总结
2015/04/22 职场文书
2015年学校心理健康教育工作总结
2015/05/11 职场文书
收入证明范本
2015/06/12 职场文书