dotnetcore+vue+elementUI 前後端分離 三(前端篇)
說明:
本專案使用了 mysql employees資料庫,使用了vue + axois + element UI 2.0 ,演示了 單頁程式 架構 ,vue router 的使用,axois 使用,以及 element UI 控制元件的使用。通過這幾種技術的組合,實現了對 employee 的增,刪。查,改 ,分頁操作,展示了在實際專案中,Vue 結合 elementUI 如何在前端專案中使用。
路由
說白了就是,頁面的跳轉如何控制。
當用戶點選了部門資訊就需要展示部門資訊的;點選了員工資訊就需要展示員工的總體資訊,點選員工列表中明細資訊就需要跳轉到該員工的明細資訊。如下圖所示:
在傳統的web程式中,跳轉是由連線來控制的,不同的連線可以跳轉到具體的頁面,也可以在mvc 結構中 ,不同的路由地址,由controller返回不同的view。
在SPA單頁程式中,路由一般是由專門的Router 來控制,而且Router是前端的元件,而不是由後端來控制的。
在本專案中,Vue 路由元件 使用的是 Vue-Router,部門,員工列表資訊,員工明細資訊 ,都是一個個 活生生 vue 元件,是前端元件,而不是一個頁面。這種方式也是把web前端開發帶入了元件化開發模式,
相對傳統的web開發模式,進步可不是一點點。
專案結構:
核心元件介紹:
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響應攔截器
axios.interceptors.response.use(data => {// 響應成功關閉loading
loadinginstace.close()
return data
}, error => {
loadinginstace.close()
Message.error({
message: '服務端發生錯誤'
})
return Promise.reject(error)
})
export default axios
const router = new VueRouter({ routes: routerMap })
const app = new Vue({
router
}).$mount('#app');
axios 攔截器中新增的方法說明:
當http請求發出後,響應為返回前,前端頁面彈出遮罩層,顯示loading,避免使用者在請求未響應前誤操作。
當http請求發出後,發生異常後,前端提示使用者,後臺發生錯誤。
攔截一次處理了這兩種通用的操作,其它地方再也不用以上兩種操作。
router.js
/*!
//Router Map 檔案
*/
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:'員工詳細資訊',
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: "只允許字母或數字",
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('此操作將永久刪除該記錄, 是否繼續?', '提示', {
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>
執行效果:
ElementUI table 排序
分頁
設定分頁大小
提交驗證功能
非同步驗證功能
多表格資訊展示
日期選擇
時間段選擇
確認提示
github 地址 https://github.com/hbb0b0/Hbb0b0.CMS/tree/master/hbb0b0.CMS.Portal
相關文章:
原文地址:http://www.cnblogs.com/hbb0b0/p/8399996.html
.NET社群新聞,深度好文,歡迎訪問公眾號文章彙總 http://www.csharpkit.com
再分享一下我老師大神的人工智慧教程吧。零基礎!通俗易懂!風趣幽默!還帶黃段子!希望你也加入到我們人工智慧的隊伍中來!https://blog.csdn.net/jiangjunshow