设计开发建设网站,企业邮箱怎么开通注册,奔牛网络推广,动物网站建设策划书说明#xff1a;本项目使用了 mysql employees数据库#xff0c;使用了vue axois element UI 2.0 ,演示了 单页程序 架构 ,vue router 的使用#xff0c;axois 使用#xff0c;以及 element UI 控件的使用。通过这几种技术的组合#xff0c;实现了对 employee 的增… 说明本项目使用了 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开发模式进步可不是一点点。 项目结构 核心组件介绍 mainimport Vue from vueimport ElementUI from element-uiimport element-ui/lib/theme-chalk/index.cssimport App from ./App.vueimport VueRouter from vue-routerimport 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 loadinginstaceaxios.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 {// 响应成功关闭loadingloadinginstace.close()return data}, error {loadinginstace.close()Message.error({message: 服务端发生错误})return Promise.reject(error)})export default axiosconst router new VueRouter({ routes: routerMap }) const app new Vue({router}).$mount(#app);axios 拦截器中添加的方法说明当http请求发出后响应为返回前前端页面弹出遮罩层显示loading避免用户在请求未响应前误操作。当http请求发出后发生异常后前端提示用户后台发生错误。拦截一次处理了这两种通用的操作其它地方再也不用以上两种操作。 router.js/*!//Router Map 文件//hbb0b0163.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.vueexport 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.vuetemplatediv classtestUserdiv classfunctionel-rowel-form :modelqueryCondition label-width150px classcommon-margin common-form refform :rulesrulesel-form-item labelFirst Name propparam.first_Nameel-col :span6el-input placeholderFirst Name v-modelqueryCondition.param.first_Name/el-input/el-col/el-form-itemel-form-item labelLast Name propparam.last_Nameel-col :span6el-input placeholderLast Name v-modelqueryCondition.param.last_Name/el-input/el-col/el-form-itemel-form-item labelGenderel-col :span6el-select placeholderGender v-modelqueryCondition.param.genderel-option v-foritem in genderStatus :keyitem.value :labelitem.label :valueitem.value/el-option/el-select/el-col/el-form-itemel-form-item labelHire Dateel-date-picker formatyyyy-MM-dd value-formatyyyy-MM-dd :editablefalse v-modelqueryCondition.param.hire_date_range typedaterange start-placeholderstart end-placeholderend default-value1980-01-01/el-date-picker /el-form-itemel-form-item labelBirth Dateel-date-picker formatyyyy-MM-dd value-formatyyyy-MM-dd :editablefalse v-modelqueryCondition.param.birth_date_range typedaterange start-placeholderstart end-placeholderend default-value1950-01-01/el-date-picker /el-form-itemel-form-item labelel-button typeprimary iconel-icon-search clickgetData()查询/el-buttonel-button typeprimary clickaddEmployeeInfo() iconel-icon-circle-plus增加/el-button/el-form-item/el-form/el-row/divdiv styleheight: 10px; background-color: rgb(242, 242, 242);/divdiv idtableel-table :datapageList.items stripe stylewidth: 100% borderel-table-column propemp_No sortable labelNo/el-table-columnel-table-column propfirst_Name sortable labelFirst Name/el-table-columnel-table-column proplast_Name sortable labelLast Name/el-table-columnel-table-column propgender sortable labelGender/el-table-columnel-table-column prophire_Date_Display sortable labelHire Date/el-table-columnel-table-column propbirth_Date_Display sortable labelBirth Date/el-table-column el-table-column label操作template slot-scopescopeel-buttonclickgetDetail(scope.row)typeprimarysizesmall iconel-icon-info/el-buttonel-buttonclickeditEmployeeInfo(scope.row)typeprimarysizesmall iconel-icon-edit/el-buttonel-buttonclickdeleteEmployeeInfo(scope.row)typeprimarysizesmall iconel-icon-delete/el-button/template/el-table-column/el-tablediv classblockel-pagination :datapageList size-changehandleSizeChange current-changehandleCurrentChange :current-pagequeryCondition.pageInfo.pageIndex :page-sizes[10,100, 200, 300, 400] :page-sizequeryCondition.pageInfo.pageSize layouttotal, sizes, prev, pager, next, jumper:totalpageList.totalCount/el-pagination/div/div/div/template scriptexport 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 scopedimport /static/default.css;/style运行效果 ElementUI table 排序 分页 设置分页大小 提交验证功能 异步验证功能 多表格信息展示 日期选择 时间段选择 确认提示 github 地址 https://github.com/hbb0b0/Hbb0b0.CMS/tree/master/hbb0b0.CMS.Portal相关文章浅谈开发模式及架构发展dotnet core webapi vue 搭建前后端完全分离web架构(一)dotnetcorevueelementUI 前后端分离架 二后端篇原文地址:http://www.cnblogs.com/hbb0b0/p/8399996.html.NET社区新闻深度好文欢迎访问公众号文章汇总 http://www.csharpkit.com
