中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

使用vue.js2.0+ElementUI開發(fā)后臺管理系統(tǒng)詳細教程（二）

在上篇文章給大家介紹了使用vue.js2.0 + ElementUI開發(fā)后臺管理系統(tǒng)詳細教程（一）

創(chuàng)新互聯(lián)建站專注于仁布網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供仁布營銷型網(wǎng)站建設(shè)，仁布網(wǎng)站制作、仁布網(wǎng)頁設(shè)計、仁布網(wǎng)站官網(wǎng)定制、微信小程序定制開發(fā)服務(wù)，打造仁布網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供仁布網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

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>
   <!-- 左側(cè)導航 -->
  <div class="main-left">
   ...
  </div>
   <!-- 右側(cè)主內(nèi)容區(qū) -->
   <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="分享設(shè)置" description=""></el-step>
  <el-step title="個性設(shè)置" description=""></el-step>
  </el-steps>
</template>

6. 啟動項目cnpm run dev，看到如下頁面，說明路由配置成功

使用vue.js2.0 + ElementUI開發(fā)后臺管理系統(tǒng)詳細教程（二）

7. 接下來，在activePublic/index.vue直接調(diào)用element-ui組件，完成活動發(fā)布的首頁，完成好的代碼如下

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="分享設(shè)置" description=""></el-step>
  <el-step title="個性設(shè)置" description=""></el-step>
  </el-steps>
  <!-- 視圖 -->
  <router-view class="view"></router-view>
  <div class="but-group">
  <el-button >預(yù)覽</el-button>
  <el-button >上一步</el-button>
  <el-button type="primary">下一步</el-button>
  <el-button type="primary">發(fā)布活動</el-button>
  </div>
 </div>
</template>

上面這個頁面又出現(xiàn)了一個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,根據(jù)我們設(shè)置的路由規(guī)則，就會顯示step1.vue頁面中的內(nèi)容,接著完成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屬性表示要進行表單驗證，驗證規(guī)則對應(yīng)為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" >設(shè)置</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自帶表單驗證，自己寫驗證規(guī)則 -->
   <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="活動結(jié)束日期">
    </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="報名結(jié)束日期">
    </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 >
   <!-- 自己封裝的一個二級聯(lián)動地址選擇器 -->
   <address-select
    :province="ruleForm.province"
    :city="ruleForm.city"
    :detail="ruleForm.detail"
    :isAddressTrue="isAddressTrue"
    ></address-select>
  </el-form-item>
  <el-form-item label="活動人數(shù)">
   <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="請輸入內(nèi)容"
    :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="展示報名人數(shù)"></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="請?zhí)顚懩膹V告標題"
   size="large"
   v-model="ruleForm.adTitle">
   </el-input>
  </el-form-item>
  <el-form-item>
  <el-input
   placeholder="請?zhí)顚懩膹V告內(nèi)容"
   size="large"
   v-model="ruleForm.adContent">
   </el-input>
  </el-form-item>
  <el-form-item >
   <el-input
   placeholder="請?zhí)顚懩馁澲溄?
   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>
  <!-- 設(shè)置活動分類 -->
  <el-dialog title="設(shè)置活動分類" 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:'請設(shè)置標簽',   // 活動標簽不合法的提示信息
  isAddressTrue:false,   // 地址是否正確
  dialogFormVisible: false,  // 添加活動標簽的對話框可見？
  dialogFormFenLeiVisible:false, // 分類對話框可見？
  dialogForm:{name:''},   // 活動標簽對話框表單
  dialogFormFenLei:{name:''},  // 活動分類對話框表單
  ruleFormChange:false,   // ruleForm表單是否改變？
  ruleFormValid:false,   // ruleForm是否合法？
  rules: {      // 表單驗證規(guī)則
   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:'請選擇活動結(jié)束日期',trigger:'change'}],
   activeEndTimeTime: [{required:true,message:'請選擇活動結(jié)束時間',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: '未發(fā)布'},
   {name: '測試活動'},
   {name: '精彩活動'}
   ],
   fenLei: '',  // 當前選中的活動分類
   tags: [],   // 活動標簽
   activeStartTimeDate: '', // 活動開始時間
   activeStartTimeTime: '', // 活動結(jié)束時間
   activeEndTimeDate: '',
   activeEndTimeTime: '',
   signStartTimeDate: '',
   signStartTimeTime: '',
   signEndTimeDate: '',
   signEndTimeTime: '',
   activePerson:'',    // 是否限制活動人數(shù)?
   activePersonNum:'',   // 限制多少人?
   activeDescribe:'',   // 活動簡介
   UseMsgShow:'',    // 報名活動信息展示
   evaluate:'',     // 評價功能
   adTitle:'',     // 廣告標題
   adContent:'',    // 廣告內(nèi)容
   adLink:'',     // 贊助鏈接
  }
  };
 },
 watch: { // 監(jiān)控
  ruleForm: {
  handler: function (val,oldVal) {
   store.commit('setRuleForm',this.ruleForm);
   this.tagsValid = !this.ruleForm.tags.length ? '' :false ;
   this.ruleFormChange = true ;
  },
  deep: true // 深度監(jiān)控，可以觀察到ruleForm內(nèi)任意屬性的變化
  }
 },
 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: '最多設(shè)置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組件，請自行對照官網(wǎng)實現(xiàn)。在這個頁面中封裝了一個二級地址選擇插件，稍后會專門寫一篇文章，詳細介紹如何封裝組件，先為大家奉上地址選擇器源碼。

10. 重新啟動項目,cnpm run dev,檢查頁面上的功能是否都已經(jīng)實現(xiàn)，是否有報錯，如果有解決不了的錯誤，歡迎留言咨詢，我會第一時間為您解答。

使用vue.js2.0 + ElementUI開發(fā)后臺管理系統(tǒng)詳細教程（二）

以上所述是小編給大家介紹的使用vue.js2.0 + ElementUI開發(fā)后臺管理系統(tǒng)詳細教程（二），希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！

網(wǎng)站題目：使用vue.js2.0+ElementUI開發(fā)后臺管理系統(tǒng)詳細教程（二）
標題來源：http://www.rwnh.cn/article14/gcgsde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、網(wǎng)頁設(shè)計公司、外貿(mào)網(wǎng)站建設(shè)、移動網(wǎng)站建設(shè)、App開發(fā)、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)
岳阳县| 永顺县| 潢川县| 易门县| 达尔| 准格尔旗| 安平县| 青岛市| 灌阳县| 三门县| 青铜峡市| 尉犁县| 临澧县| 河南省| 榆中县| 金阳县| 名山县| 加查县| 霍邱县| 乌兰浩特市| 塔城市| 思茅市| 墨脱县| 楚雄市| 德江县| 白朗县| 思茅市| 方城县| 石城县| 乡宁县| 蕉岭县| 济阳县| 沂源县| 蒙山县| 玛曲县| 淮阳县| 交城县| 乐昌市| 广水市| 高碑店市| 清丰县|