Detailed tutorial on using vue. js2.0 + ElementUI to develop the background management system (II), vue. js2.0elementui

Detailed tutorial on using vue. js2.0 + ElementUI to develop the background management system (II), vue. js2.0elementui

In the previous article, I introduced a detailed tutorial on using vue. js2.0 + ElementUI to develop the background management system (I)

1. Introduce the routing tool vue-router to switch the view.

# Install vue-routercnpm install vue-router -- save-dev

2. Use vue-router

Main. jsimport Vue from 'vue 'import App from '. /App 'import VueRouter from 'vue-router 'import routeConfig from '. /router-config '// introduce the router-config.js file // load the routing middleware Vue. use (VueRouter) // define the route const router = new VueRouter ({routes: routeConfig}) new Vue ({router, store, el: "# app", render: h => h (App )})

3. Configure routes

Create a router-config.js under the src directory, configure routing in the router-cinfig.js

// Import activePublic from '. /page/activePublic/index. vue 'export default [{// configure the route. When the path is '/activePublic', use the component activePublic path: '/activePublic', component: activePublic,}]

4. Use Routing

App. vue <template> <div id = "app"> <! -- Navigation in the header -->... <main> <! -- Left navigation --> <div class = "main-left">... </div> <! -- Main content area on the right --> <div class = "main-right"> <! -- View --> <router-view class = "view"> </router-view> </div> </main> </div> </template>

5. Open the activePublic/index. vue file, write something on the page, and test whether the route is configured successfully.

<Template> <div class = "activePublic"> <! -- Element step component --> <el-steps: space = "200 ": active = "step" class = "step"> <el-step title = "activity information" description = ""> </el-step> <el-step title = "Register sign in "description =" "> </el-step> <el-step title =" Sharing Settings "description =" "> </el-step> <el-step title = "personalized settings" description = ""> </el-step> </el-steps> </template>

6. Start the project cnpm run dev. The following page is displayed, indicating that the route configuration is successful.

7. Next, in activePublic/index. vue, directly call the element-ui component to complete the homepage of the activity release. The completed Code is as follows:

ActivePublic/index. vue <template> <div class = "activePublic"> <! -- Step component --> <el-steps: space = "200 ": active = "step" class = "step"> <el-step title = "activity information" description = ""> </el-step> <el-step title = "Register sign in "description =" "> </el-step> <el-step title =" Sharing Settings "description =" "> </el-step> <el-step title = "personalized settings" description = ""> </el-step> </el-steps> <! -- View --> <router-view class = "view"> </router-view> <div class = "but-group"> <el-button> preview </el- button> <el-button> previous </el-button> <el-button type = "primary"> next </el-button> <el-button type = "primary"> Publish an activity </el-button> </div> </template>

There is another router-view on the above page. Why do you want to put it like this? Because step 1, step 2, step 3, and step 4 contain the "Step" component on the top, we put step 1, step 2/3, and step 4 separately on four pages.

8. Configure Level 2 routing in the router-config.js File

Router-config.jsimport activePublic from './page/activePublic/index. vue' <! -- Import subpage --> 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, // configure the sub-path from children: [// path to '/activePublic ', use step1 {path: '', component: step1}, // path to '/activePublic/step1', and use step1 {path: 'step1', component: step1 }, // The path is '/activePublic/step2'. Use the components step2 {path: 'step2', component: step2}, {path: 'step3', component: step3 }, {path: 'step4', component: step4}]

9. restart the project cnpm run dev. The default path in the browser is http: // localhost: 8080/#/activePublic. According to the routing rules we set, the content on the step1.vue page is displayed, complete step 1.vue. The Code is as follows. Refer to the element form component.

Step1.vue

<Template> // TODO: The time selector component has an error in Form Verification. This is a problem with the element component, leave it to everyone to complete <div class = "step1"> <! -- Element form component --> <el-form: model = "ruleForm" class = "demo-ruleForm ": rules = "rules" ref = "ruleForm" label-position = "top"> <! -- Form item. The prop attribute indicates form verification, the verification rule corresponds to the property name of rules --> <el-form-item label = "activity name" prop = "name"> <el-input v-model = "ruleForm. name "size =" large "> </el-input> </el-form-item> <el-form-item label =" "prop =" fenLei "> <! -- Adds a button in the label bar for the modified form item --> <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; "> activity category </div> </el-col> <el-col class = "": span = "2"> <el-button type = "text" @ click. native = "dialogFormFenLeiVisible = true" style = "margin: 0; padding: 0; "> Settings </el-button> </el-col> </el-row> <el-radio-group v-model =" ruleFo Rm. fenLei "> <el-radio v-for =" item of ruleForm. fenLeis ": label =" item. name "> </el-radio-group> </el-form-item> <! -- There is a pitfall. The activity tag is not a form element, you cannot use the built-in verification function of element --> <el-form-item label = "activity 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 = "activity time" required style = "width: 750px; "> <el-col: span =" 5 "> <! -- Time selector. It is also a bit pitfall during form verification. An error is reported. We recommend that you do not use the element built-in form verification, write verification rules by yourself --> <el-form-item prop = "activeStartTimeDate"> <el-date-picker v-model = "ruleForm. activeStartTimeDate "type =" date "placeholder =" Activity start date "> </el-date-picker> </el-form-item> </el-col> <el- col: span = "5"> <el-form-item prop = "activeStartTimeTime"> <el-time-select placeholder = "select a time point" v-model = "ruleForm. activeStartTimeTime ": picker-options =" {start: '00: 00', st Ep: '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 =" activity end date "> </el-date-picker> </el-form-item> </el-col> <el- col: span = "5"> <el-form-item prop = "activeEndTimeTime"> <el-time-select placeh Older = "select a time point" 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 = "registration time" required style = "width: 750px; "> <el-col: span =" 5 "> <el-form-item prop =" signStartTimeDate "> <el-date-picker v-model =" ruleForm. signStartTimeDate "type =" date "placeholder =" registration start date "> </el-date-picker> </ El-form-item> </el-col> <el-col: span = "5"> <el-form-item prop = "signStartTimeTime"> <el-time-select placeholder = "select a time point" 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-mod El = "ruleForm. signEndTimeDate "type =" date "placeholder =" registration end date "> </el-date-picker> </el-form-item> </el-col> <el- col: span = "5"> <el-form-item prop = "signEndTimeTime"> <el-time-select placeholder = "select a time point" 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 = "activity location" required> <! -- A self-encapsulated second-level linkage address selector --> <address-select: province = "ruleForm. province ": city =" ruleForm. city ": detail =" ruleForm. detail ": isAddressTrue = "isAddressTrue"> </address-select> </el-form-item> <el-form-item label = "Participants"> <el-row> <el -col: span = "6" style = "width: 187px;"> <el-radio class = "radio" v-model = "ruleForm. activePerson "label =" unlimited "> unlimited </el-radio> <el-radio class =" radio "v-model =" ruleForm. activePerson" Label = "restriction"> restriction </el-radio> </el-col> <el-col: span = "6"> <el-input placeholder = "0 ": number = "true" size = "large" v-model = "ruleForm. activePersonNum ": disabled =" ruleForm. activePerson = 'unrestricted '"> <template slot =" append "> person </template> </el-input> </el-col> </el-row> </el-form-item> <el-form-item label = "activity cover"> <el-upload action = "http://jsonplaceholder.typicode.com/" type = "drag ": multiple = "true": on-preview = "h AndlePreview ": on-remove =" handleRemove ": on-success =" handleSuccess ": on-error = "handleError"> <I class = "el-icon-upload"> </I> <div class = "el-dragger _ text"> drag the file here, or <em> click to upload </em> </div> <div class = "el-upload _ tip" slot = "tip"> only jpg/png files can be uploaded, and no more than 2 MB </div> </el-upload> </el-form-item> <el-form-item label = "activity Introduction"> <el-input type = "textarea" placeholder = "Enter the content ": autosize = "{minRows: 4, maxRows: 8}" v-model = "ru LeForm. activeDescribe "> </el-input> </el-form-item> <el-form-item label =" "> <el-radio-group v- model = "ruleForm. useMsgShow "> <el-radio label =" do not show "> </el-radio> <el-radio label =" show registrants "> </el-radio> <el -radio label = ""> </el-radio> <el-radio label = ""> </el-radio> </el -radio-group> </el-form-item> <el-form-item label = "rating function"> <el-radio-group v-model = "ruleForm. evaluate "> <el-radio l Abel = "disabled"> </el-radio> <el-radio label = "real-time rating"> </el-radio> <el-radio label = "post-review comment "> </el-radio-group> </el-form-item> <el-form-item label =" "> <el-row> <div class = "el-form-item _ label"> sponsored advertisement </div> <el-col class = "el-form-item _ label is-active": span = "2"> <el-button type = "text" @ click. native = "openAd"> open ad </el-button> </el-col> </el-row> <el-upload action = "http://jsonplaceholder.typicode.c Om/"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"> drag the file here, or <em> Click upload </em> </div> <div class = "el-upload _ tip" slot = "tip"> recommended image size ratio: 1; 4.18, for example, 160*666 pixels, and no more than 2 MB </div> </el-upload> </el-form-item> <el-input placeholder = "Please enter ad title "size =" large" V-model = "ruleForm. adTitle "> </el-input> </el-form-item> <el-input placeholder =" Enter your ad content "size = "large" v-model = "ruleForm. adContent "> </el-input> </el-form-item> <el-input placeholder =" Enter your sponsorship link "size = "large" v-model = "ruleForm. adLink "> </el-input> </el-form-item> </el-form> <! -- Dialog box --> <el-dialog title = "add activity tag" 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"> cancel </el-button> <el-button type = "primary" @ click. native = "handleAdd (dialogForm. name, dialog Form, ruleForm. tags) "> Add </el-button> </span> </el-dialog> <! -- Set activity category --> <el-dialog title = "set activity category" 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-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"> cancel </el-button> <el-button type = "primary" @ click. native = "handleAdd (dialogFormFenLei. name, dialogFormFenLei, ruleForm. fenLeis) "> Add </el-button> </span> </el-dialog> </div> </template> <script> // import addressSelect from 'src /components/address. vue 'export default {name: 'step1', // component S: {'address-select': addressSelect}, data: function () {return {tagsValid: false, // whether the activity tag is valid tagsError: 'set the tagtag ', // if the activity tag is invalid, the message isAddressTrue: false is displayed. // if the address is correct, the dialog box for adding the activity tag is displayed? DialogFormFenLeiVisible: false, // is displayed in the category dialog box? DialogForm: {name: ''}, // form of the activity tag dialog box dialogFormFenLei: {name:''}, // form of the activity category dialog box ruleFormChange: false, // does the ruleForm change? RuleFormValid: false, // is ruleForm legal? Rules: {// Form Verification rule name: [{required: true, message: 'Enter the activity name', trigger: 'change'}], fenLei: [{required: true, message: 'select activity category', trigger: 'change'}], activeStartTimeDate: [{required: true, message: 'select Activity start date', trigger: 'change'}], activeStartTimeTime: [{required: true, message: 'select Activity start time', trigger: 'change'}], activeEndTimeDate: [{required: true, message: 'select activity end date', trigger: 'change'}], activeEndTimeTime: [{require D: true, message: 'select activity End Time', trigger: 'change'}], signStartTimeDate: [{required: true, message: 'select registration start date ', trigger: 'change'}], signStartTimeTime: [{required: true, message: 'select registration start time ', trigger: 'change'}], signEndTimeDate: [{required: true, message: 'select the registration deadline ', trigger: 'change'}], signEndTimeTime: [{required: true, message: 'select the registration deadline', trigger: 'change'}] ,}, ruleForm: {// form on the step1 page, record all form information on the page name: '', // activity name FenLeis: [// activity category options {name: 'unpublished '}, {name: 'test activity'}, {name: 'Wonderful activity'}], fenLei: '', // the currently selected activity type tags: [], // activity tag activeStartTimeDate:'', // Activity start time activeStartTimeTime :'', // activity end time activeEndTimeDate: '', activeEndTimeTime:'', signStartTimeDate: '', signStartTimeTime:'', signEndTimeDate: '', signEndTimeTime:'', activePerson :'', // do you want to limit the number of participants? ActivePersonNum: '', // how many people are restricted? ActiveDescribe: '', // activity description UseMsgShow:'', // The registration activity information displays evaluate: '', // evaluation function adTitle:'', // adContent: '', // ad content adLink:'', // sponsorship link };}, watch: {// monitor ruleForm: {handler: function (val, oldVal) {store. commit ('setrule', this. ruleForm); this. tagsValid =! This. ruleForm. tags. length? '': False; this. ruleFormChange = true;}, deep: true // for deep monitoring, any attribute changes in ruleForm can be observed}, methods: {handleRemove: function (file, fileList) {console. log (file, fileList) ;}, handlePreview: function (file) {console. log (file) ;}, handleSuccess: function () {}, handleError: function () {}, // display the showDialog: function () {if (this. ruleForm. tags. length> = 5) {this. $ message ({message: 'up to 5 Tags ', type: 'warning'});} else {this. dialogFormVisible = true; this. dialogForm ={}}}, // Delete the activity tag handleClose: function (tag) {var index = this. ruleForm. tags. indexOf (tag); this. ruleForm. tags. splice (index, 1) ;}, // delete a handleCloseFenLei of the activity category: function (fenLei) {var index = this. ruleForm. fenLeis. indexOf (fenLei); this. ruleForm. fenLeis. splice (index, 1) ;}, // Add tag handleAdd: function (tag, form, ta Gs) {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: 'This tag already exists ', type: 'warning'});} else {this. dialogFormVisible = false; this. dialogFormFenLeiVisible = false; tags. push ({name: tag}) ;}} else {this. $ message ({message: 'tag cannot be blank ', type: 'warning'}) ;}}, openAd: function () {this. $ message ('this function is being completed ') ;},}, // page initialization created: function () {}}</script> <style>. step {margin-bottom: 30px ;}. step 1. demo-ruleForm. el-form-item {margin-bottom: 25px; margin-right: 50px ;}. step 1. el-form-item.is-required. el-form-item _ label: after {content: '*'; color: # ff4949; margin-right: 4px ;}. step 1. el-form-item.is-required. el-form-item _ label: before {display: none;}/* label */. step 1. el-tag {padding: 10px 15px; margin: 10px; vertical-align: middle ;}. step 1. el-tag: first-child {margin-left: 0;}/* dialog box */. step 1. el-dialog -- small {width: 564px ;}. step 1. el-dialog _ body {padding-bottom: 0 ;}. step 1. el-dialog _ body. el-form-item {margin-bottom: 10px ;}. step 1. el-dialog _ wrapper. el-button {margin-left: 15px;}/* time selector */. step 1. el-date-editor {width: 150px ;}. step 1. el-form-item. router-link {color: # fff ;}. el-form-item _ error {white-space: nowrap ;}</style>

Most of this page uses the element component. Please follow the instructions on the official website. This page encapsulates a second-level address selection plug-in. I will write an article later to describe how to encapsulate components. First, we will provide you with the address selector source code.

10. restart the project and run cnpm dev. check whether all the functions on the page have been implemented and whether any errors have been reported. If any errors cannot be solved, leave a message for consultation and I will answer your questions immediately.

The above section describes how to use vue. js2.0 + ElementUI detailed tutorial on the development background management system (2). I hope it will help you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!