dotnetcore+vue+elementUI 前后端分离三（前端篇）

墨蓝 2022-03-28 10:38 411阅读 0赞

说明：

本项目使用了 mysql employees数据库，使用了vue + axois + element UI 2.0 ,演示了 单页程序 架构 ,vue router 的使用，axois 使用，以及 element UI 控件的使用。通过这几种技术的组合，实现了对 employee 的增，删。查，改 ，分页操作，展示了在实际项目中，Vue 结合 elementUI 如何在前端项目中使用。

路由

说白了就是，页面的跳转如何控制。

当用户点击了部门信息就需要展示部门信息的；点击了员工信息就需要展示员工的总体信息，点击员工列表中明细信息就需要跳转到该员工的明细信息。如下图所示：

![640?wx\_fmt=png&wxfrom=5&wx\_lazy=1][640_wx_fmt_png_wxfrom_5_wx_lazy_1]

在传统的web程序中，跳转是由连接来控制的，不同的连接可以跳转到具体的页面，也可以在mvc 结构中 ，不同的路由地址，由controller返回不同的view。

在SPA单页程序中，路由一般是由专门的Router 来控制，而且Router是前端的组件，而不是由后端来控制的。

在本项目中，Vue 路由组件 使用的是 Vue-Router，部门，员工列表信息，员工明细信息 ，都是一个个 活生生 vue 组件，是前端组件，而不是一个页面。这种方式也是把web前端开发带入了组件化开发模式，

相对传统的web开发模式，进步可不是一点点。

项目结构：

![640?wx\_fmt=png][640_wx_fmt_png]

核心组件介绍：

*  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 拦截器中添加的方法说明：

1.  当http请求发出后，响应为返回前，前端页面弹出遮罩层，显示loading，避免用户在请求未响应前误操作。
2.  当http请求发出后，发生异常后，前端提示用户，后台发生错误。
3.  拦截一次处理了这两种通用的操作，其它地方再也不用以上两种操作。

*  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: \[

path: 'departmentList',

component: DepartmentList

\},

path: 'employee/list',

component: EmployeeList

\},

path: 'help',

component: Help

\},

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

<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>

<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="操作">

<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>

<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>

</template>

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>

@import '/static/default.css';

</style>

运行效果：

*  ElementUI table 排序

![640?wx\_fmt=png][640_wx_fmt_png 1]

*  分页

![640?wx\_fmt=png][640_wx_fmt_png 2]

*  设置分页大小

![640?wx\_fmt=png][640_wx_fmt_png 3]

*  提交验证功能

![640?wx\_fmt=png][640_wx_fmt_png 4]

*  异步验证功能

![640?wx\_fmt=png][640_wx_fmt_png 5]

*  多表格信息展示

![640?wx\_fmt=png][640_wx_fmt_png 6]

*  日期选择

![640?wx\_fmt=png][640_wx_fmt_png 7]

*  时间段选择

![640?wx\_fmt=png][640_wx_fmt_png 8]

*  确认提示

![640?wx\_fmt=png][640_wx_fmt_png 9]

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

*  [浅谈开发模式及架构发展][Link 1]
 *  [dotnet core webapi +vue 搭建前后端完全分离web架构(一)][dotnet core webapi _vue _web]
 *  [dotnetcore+vue+elementUI 前后端分离架 二（后端篇）][dotnetcore_vue_elementUI _]

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

--------------------

**.NET社区新闻，深度好文，欢迎访问公众号文章汇总 http://www.csharpkit.com**

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg]

再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！[https://blog.csdn.net/jiangjunshow][https_blog.csdn.net_jiangjunshow]

[640_wx_fmt_png_wxfrom_5_wx_lazy_1]: https://img-blog.csdnimg.cn/img_convert/4bd16f5d8ba650f8fb9a4574160aae3e.png;wxfrom=5&wx_lazy=1
[640_wx_fmt_png]: /images/20220328/b8d5d99c2b0246969186ee956b0807c2.png
[640_wx_fmt_png 1]: /images/20220328/c81669665aba41db8bd7d70c90f28230.png
[640_wx_fmt_png 2]: /images/20220328/6c17aa28b8dc4130ba85768b9cabad9b.png
[640_wx_fmt_png 3]: /images/20220328/b3a8892cffde4118977cea84d0cf320c.png
[640_wx_fmt_png 4]: /images/20220328/6c5625e95de0409e801e322feb92dba8.png
[640_wx_fmt_png 5]: /images/20220328/559b0a96c5e6445182f963cd1eb3f889.png
[640_wx_fmt_png 6]: /images/20220328/5f04ab6e6021491285f9223b8d175f7b.png
[640_wx_fmt_png 7]: /images/20220328/455ba6d5f8b947369964881c20f13f09.png
[640_wx_fmt_png 8]: /images/20220328/0b878f6af0524e3783fe15c9b97f9e65.png
[640_wx_fmt_png 9]: /images/20220328/4b625962bb104c848942e4bb2f9e4930.png
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzAwNTMxMzg1MA==&mid=2654069909&idx=3&sn=f5e5ba963de78cedec5d8bbb223be574&chksm=80dbc0c0b7ac49d6d65f4d3283ba2eb6febf203b38b39ca63f98276c17079b3f057a987a616a&scene=21#wechat_redirect
[dotnet core webapi _vue _web]: http://mp.weixin.qq.com/s?__biz=MzAwNTMxMzg1MA==&mid=2654069919&idx=1&sn=4e435e1601279cd37add5d904777a4a4&chksm=80dbc0cab7ac49dcca9d8f8d461973869ed20d1d69e2f24d002a5649fb379050713dcf2babd9&scene=21#wechat_redirect
[dotnetcore_vue_elementUI _]: http://mp.weixin.qq.com/s?__biz=MzAwNTMxMzg1MA==&mid=2654069924&idx=1&sn=01df8408ec5fa0138930ba26adc9da65&chksm=80dbc0f1b7ac49e783f9c89ccfeaa9154201e39f1dcb470dd885484d350b158508c60da346b1&scene=21#wechat_redirect
[640_wx_fmt_jpeg]: /images/20220328/464a61115b1043089abbe45407246e2c.png
[https_blog.csdn.net_jiangjunshow]: https://blog.csdn.net/jiangjunshow/article/details/77338485