在上篇文章給大家介紹了使用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 type="flex" align="middle">
<el-col :span="3" >
<div class="el-form-item__label" > 活動分類</div>
</el-col>
<el-col class="" :span="2">
<el-button type="text" @click.native="dialogFormFenLeiVisible = true" >設置</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" ></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 >
<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" >—</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 >
<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" >—</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" >
<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開發后臺管理系統詳細教程（二），希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
