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

在上篇文章给大家介绍了使用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，看到如下页面，说明路由配置成功

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开发后台管理系统详细教程（二），希望对大家有所帮助