說明：

本項(xiàng)目使用了 mysql employees數(shù)據(jù)庫，使用了vue + axois + element UI 2.0 ,演示了 單頁程序 架構(gòu) ,vue router 的使用，axois 使用，以及 element UI 控件的使用。通過這幾種技術(shù)的組合，實(shí)現(xiàn)了對 employee 的增，刪。查，改 ，分頁操作，展示了在實(shí)際項(xiàng)目中，Vue 結(jié)合 elementUI 如何在前端項(xiàng)目中使用。

?

路由

說白了就是，頁面的跳轉(zhuǎn)如何控制。

當(dāng)用戶點(diǎn)擊了部門信息就需要展示部門信息的；點(diǎn)擊了員工信息就需要展示員工的總體信息，點(diǎn)擊員工列表中明細(xì)信息就需要跳轉(zhuǎn)到該員工的明細(xì)信息。如下圖所示：?

?

?

?

?

在傳統(tǒng)的web程序中，跳轉(zhuǎn)是由連接來控制的，不同的連接可以跳轉(zhuǎn)到具體的頁面，也可以在mvc 結(jié)構(gòu)中 ，不同的路由地址，由controller返回不同的view。

?

在SPA單頁程序中，路由一般是由專門的Router 來控制，而且Router是前端的組件，而不是由后端來控制的。

?

在本項(xiàng)目中，Vue 路由組件 使用的是 Vue-Router，部門，員工列表信息，員工明細(xì)信息 ，都是一個個 活生生 vue 組件，是前端組件，而不是一個頁面。這種方式也是把web前端開發(fā)帶入了組件化開發(fā)模式，

?

相對傳統(tǒng)的web開發(fā)模式，進(jìn)步可不是一點(diǎn)點(diǎn)。?

?

項(xiàng)目結(jié)構(gòu)：

?

??

?

核心組件介紹：

?

• main

import Vue from 'vue'

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

import App from './App.vue'

import VueRouter from 'vue-router'

import routerMap from './router.js'

// 引入axios以及element ui中的loading和message組件

import axios from 'axios';

import { Loading, Message } from 'element-ui'

?

Vue.use(VueRouter);

Vue.use(ElementUI);

Vue.prototype.$http = axios;

//axios 配置最好提出專門的頁面

//axios.defaults.baseURL = "http://localhost:5001/api";

axios.defaults.baseURL = "http://localhost/CMS.API/api";

?

/**

* http配置

*/

// 引入axios以及element ui中的loading和message組件

// 超時時間

axios.defaults.timeout = 5000;

// http請求攔截器

var loadinginstace

axios.interceptors.request.use(config => {

// element ui Loading方法

console.log(config);

loadinginstace = Loading.service({ fullscreen: true })

return config

}, error => {

loadinginstace.close()

Message.error({

message: '加載超時'

})

return Promise.reject(error)

})

// http響應(yīng)攔截器

axios.interceptors.response.use(data => {// 響應(yīng)成功關(guān)閉loading

loadinginstace.close()

return data

}, error => {

loadinginstace.close()

Message.error({

message: '服務(wù)端發(fā)生錯誤'

})

return Promise.reject(error)

})

export default axios

const router = new VueRouter({ routes: routerMap })

?

const app = new Vue({

router

}).$mount('#app');

axios 攔截器中添加的方法說明：

當(dāng)http請求發(fā)出后，響應(yīng)為返回前，前端頁面彈出遮罩層，顯示loading，避免用戶在請求未響應(yīng)前誤操作。

當(dāng)http請求發(fā)出后，發(fā)生異常后，前端提示用戶，后臺發(fā)生錯誤。

攔截一次處理了這兩種通用的操作，其它地方再也不用以上兩種操作。

?

?

• router.js

/*!

//Router Map　文件

//hbb0b0@163.com

*/

import Help from './components/help/Help.vue';

import Feedback from './components/feedback/Feedback.vue';

import UserInfo from './components/business/UserInfo.vue';

import DepartmentList from './components/business/DepartmentList.vue';

import EmployeeList from './components/business/Employee/EmployeeList.vue';

import EmployeeDetail from './components/business/Employee/EmployeeDetail.vue';

import EmployeeAdd from './components/business/Employee/EmployeeAdd.vue';

import EmployeeEdit from './components/business/Employee/EmployeeEdit.vue';

import App from './App.vue'

export default [{

path: '/index',

component: App,

children: [

{

name: '部門信息',

path: 'departmentList',

component: DepartmentList

},

{

name: '員工信息',

path: 'employee/list',

component: EmployeeList

},

?

{

name: '幫助中心',

path: 'help',

component: Help

},?

{

name: '意見反饋',

path: 'feedback',

component: Feedback

},

{

name:'員工詳細(xì)信息',

path:'employee/detail/:id',

component:EmployeeDetail

},

{

name:'員工信息編輯',

path:'employee/edit/:id',

component:EmployeeEdit

},

{

name:'員工信息增加',

path:'employee/add/',

component:EmployeeAdd

}

]

},

{

path: '*',

redirect: '/index/departmentList'

}

]

• EmployeeList.vue

<template>

<div class="testUser">

<div class="function">

<el-row>

<el-form :model="queryCondition" label-width="150px" class="common-margin common-form" ref="form" :rules="rules">

<el-form-item label="First Name" prop="param.first_Name">

<el-col :span="6">

<el-input placeholder="First Name" v-model="queryCondition.param.first_Name"></el-input>

</el-col>

</el-form-item>

<el-form-item label="Last Name" prop="param.last_Name">

<el-col :span="6">

<el-input placeholder="Last Name" v-model="queryCondition.param.last_Name"></el-input>

</el-col>

</el-form-item>

<el-form-item label="Gender">

<el-col :span="6">

<el-select placeholder="Gender" v-model="queryCondition.param.gender">

<el-option v-for="item in genderStatus" :key="item.value" :label="item.label" :value="item.value">

</el-option>

</el-select>

</el-col>

</el-form-item>

<el-form-item label="Hire Date">

<el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" :editable="false" v-model="queryCondition.param.hire_date_range" type="daterange" start-placeholder="start " end-placeholder="end" default-value="1980-01-01">

</el-date-picker>

?

</el-form-item>

<el-form-item label="Birth Date">

<el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" :editable="false" v-model="queryCondition.param.birth_date_range" type="daterange" start-placeholder="start" end-placeholder="end" default-value="1950-01-01"></el-date-picker>

?

</el-form-item>

<el-form-item label="">

<el-button type="primary" icon="el-icon-search" @click="getData()">查詢</el-button>

<el-button type="primary" @click="addEmployeeInfo()" icon="el-icon-circle-plus">增加</el-button>

</el-form-item>

</el-form>

</el-row>

</div>

<div style="height: 10px; background-color: rgb(242, 242, 242);"></div>

<div id="table">

<el-table :data="pageList.items" stripe style="width: 100%" border>

<el-table-column prop="emp_No" sortable label="No">

</el-table-column>

<el-table-column prop="first_Name" sortable label="First Name">

</el-table-column>

<el-table-column prop="last_Name" sortable label="Last Name">

</el-table-column>

<el-table-column prop="gender" sortable label="Gender">

</el-table-column>

<el-table-column prop="hire_Date_Display" sortable label="Hire Date">

</el-table-column>

<el-table-column prop="birth_Date_Display" sortable label="Birth Date">

</el-table-column>

?

<el-table-column label="操作">

<template slot-scope="scope">

<el-button

@click="getDetail(scope.row)"

type="primary"

size="small" icon="el-icon-info">

</el-button>

<el-button

@click="editEmployeeInfo(scope.row)"

type="primary"

size="small" icon="el-icon-edit">

</el-button>

<el-button

@click="deleteEmployeeInfo(scope.row)"

type="primary"

size="small" icon="el-icon-delete">

</el-button>

</template>

</el-table-column>

</el-table>

<div class="block">

<el-pagination :data="pageList" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryCondition.pageInfo.pageIndex" :page-sizes="[10,100, 200, 300, 400]" :page-size="queryCondition.pageInfo.pageSize" layout="total, sizes, prev, pager, next, jumper"

:total="pageList.totalCount">

</el-pagination>

</div>

</div>

</div>

</template>

?

<script>

export default {

data() {

return {

input: "",

pageList: [],

genderStatus: [{

vale: "",

label: ""

},

{

value: "F",

label: "Female"

},

{

value: "M",

label: "Male"

}

],

queryCondition: {

?

param: {

first_Name: "",

last_Name: "",

gender: "",

hire_date_range: null,

birth_date_range: null,

?

},

pageInfo: {

pageIndex: 1,

pageSize: 10

}

?

},

rules: {

'param.first_Name': [{

required: false,

message: "只允許字母或數(shù)字",

pattern: /[a-zA-Z0-9]/

}]

}

}

},

mounted: function() {

//debugger;

this.getData();

},

methods: {

handleSizeChange(val) {

//debugger;

//console.log(`每頁 ${val} 條`);

this.queryCondition.pageInfo.pageSize = val;

this.getData();

},

handleCurrentChange(val) {

//debugger;

this.queryCondition.pageInfo.pageIndex = val;

this.getData();

},

getData() {

let _self = this;

_self.$refs["form"].validate(function(isValid) {

if (isValid) {

let url = "/Employee/query";

//debugger;

_self.$http

.post(url, _self.queryCondition)

.then(function(response) {

//debugger;

//console.log(response.data.data);

_self.pageList = response.data.data;

?

})

.catch(function(error) {

console.log(error);

});

} else {

return false;

}

})

?

},

hire_date_pick(maxDate, minDate) {

//debugger;

alert(maxDate);

},

getDetail(currentRow) {

?

this.$router.push({

path: '/index/employee/detail/' + currentRow.emp_No

});

?

},

editEmployeeInfo(currentRow) {

this.$router.push({

path: '/index/employee/edit/' + currentRow.emp_No

});

},

deleteEmployeeInfo(currentRow) {

this.$confirm('此操作將永久刪除該記錄, 是否繼續(xù)?', '提示', {

confirmButtonText: '確定',

cancelButtonText: '取消',

type: 'warning'

}).then(() => {

let _self = this;

let url = "/employee/delete/" + currentRow.emp_No;

//debugger;

_self.$http

.post(url)

.then(function(response) {

//debugger;

//console.log(response.data.data);

if (response.data.isSuccess) {

_self.$message({

type: 'success',

message: '刪除成功!'

});

?

_self.getData();

} else {

_self.$message.error("刪除失敗");

}

})

.catch(function(error) {

console.log(error);

});

?

?

}).catch(() => {

this.$message({

type: 'info',

message: '已取消刪除'

});

});

},

addEmployeeInfo() {?

this.$router.push({

path: '/index/employee/add'

});?

}

}

};

</script>?

<style scoped>

@import '/static/default.css';

</style>

運(yùn)行效果：

?

• ElementUI table 排序?

?

?

?

?

• 分頁?

?

?

?

• 設(shè)置分頁大小

?

?

?

• 提交驗(yàn)證功能

?

?

?

• 異步驗(yàn)證功能

?

?

• 多表格信息展示

?

?

?

• 日期選擇

?

?

?

• 時間段選擇

?

?

??

• 確認(rèn)提示?

?

?

github 地址?https://github.com/hbb0b0/Hbb0b0.CMS/tree/master/hbb0b0.CMS.Portal

相關(guān)文章：

• 淺談開發(fā)模式及架構(gòu)發(fā)展

• dotnet core webapi +vue 搭建前后端完全分離web架構(gòu)(一)

• dotnetcore+vue+elementUI 前后端分離架 二（后端篇）
  

原文地址:http://www.cnblogs.com/hbb0b0/p/8399996.html

---

.NET社區(qū)新聞，深度好文，歡迎訪問公眾號文章匯總 http://www.csharpkit.com

總結(jié)

以上是生活随笔為你收集整理的dotnetcore+vue+elementUI 前后端分离 三（前端篇）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。