狼山资源网

使用vue.js2.0 + ElementUI开发后台管理系统详细教程（二）
网络编程 2024/11/15 佚名
3 2

在上篇文章给大家介绍了使用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:'',    // 是否限制活动人数"_blank" href="https://github.com/WebCodeFarmer/houtai/blob/master/src/components/address.vue">地址选择器源码。


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




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


以上所述是小编给大家介绍的使用vue.js2.0 + ElementUI开发后台管理系统详细教程（二），希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
标签：
vue,elementui
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
www.pvsay.com 狼山资源网
29,905影音资源
44,626技术资源
11,817软件资源
578,645站长资源

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
狼山资源网 Copyright www.pvsay.com