官方网站在哪里,wordpress添加js,软件开发赚钱多吗,临沂森拓网络科技有限公司目录
一、创建vue项目并运行
二、vue-cli中的路由使用
三、element-ui框架、实现页面布局以及vue-路由
四、前端登录页面
五、user登录后端接口完善【后端】
六、user登录前端-请求工具-请求发起【前端】
七、请求的跨域-访问策略
八、完善项目的页面布局、导航菜单以及…
目录
一、创建vue项目并运行
二、vue-cli中的路由使用
三、element-ui框架、实现页面布局以及vue-路由
四、前端登录页面
五、user登录后端接口完善【后端】
六、user登录前端-请求工具-请求发起【前端】
七、请求的跨域-访问策略
八、完善项目的页面布局、导航菜单以及权限划分
九、实现疫苗分类的查询及分析流程
十、疫苗分类--页面完善、以及添加、修改及删除实现 一、创建vue项目并运行
--使用管理员身份运行VSCode,然后在终端打开dos命令行界面 --设置国内的镜像
#经过下面的配置以后所有的 npm install 都会经过淘宝的镜像地址下载
npm config set registry https://registry.npm.taobao.org
--安装vue-cli的插件\全局安装
npm install vue-cli -gnpm install -g vue/cli-init 或者 npm install -g vue/cli-init
--安装webpack的插件\全局安装
npm install -g webpack
注意shell命令策略设置【当命令执行失败时操作、没有问题就不用管、继续下一步即可】 像这种都是策略问题用管理员打开vscode然后设置策略
get-ExecutionPolicy执行set-ExecutionPolicy RemoteSigned 然后 get-ExecutionPolicy显示RemoteSigned就是ok了set-ExecutionPolicy RemoteSigned
--通过vue-cli脚手架来创建一个项目
vue init webpack vaccinum-vue --切换到当前项目路径下、然后在启动vue项目测试【npm run dev】 cd vaccinum-vuenpm run dev 二、vue-cli中的路由使用
路由主要是实现页面跳转【实际上是请求地址映射vue页面】
--在components中创建两个vue页面文件 templatediv classhelloh2Demo1111 Links/h2/div
/template
templatediv classhelloh2Demo222 Links/h2/div
/template
--在router路由配置文件中配置页面的访问地址 import Vue from vue
import Router from vue-router
import HelloWorld from /components/HelloWorld
Vue.use(Router)
export default new Router({routes: [{path: /,name: HelloWorld,component: HelloWorld},{path: /demo1,name: demo1,component: ()import(/components/demo1)},{path: /demo2,name: demo2,component: ()import(/components/demo2)}]
})
--在App.vue中提供两个链接然后测试 !-- 两个链接 --router-link to/demo1demo1/router-linkrouter-link to/demo2demo2/router-link!-- 两个链接 -- 三、element-ui框架、实现页面布局以及vue-路由 --布局效果图 --element-ui网站【参考学习】
https://element.eleme.cn/#/zh-CN/component/installation
--ctrlc 结束程序然后执行命令下载element-ui依赖
--添加elementui依赖
--在vue项目目录下使用下面命令,添加ElementUI 依赖
npm i element-ui -S --在src中的main.js中配置、导入element-ui组件及样式文件 // 导入ElementUI
import ElementUI from element-ui;
import element-ui/lib/theme-chalk/index.css;
Vue.use(ElementUI);//在vue使用ElementUI--创建页面 --页面布局在components下创建Layout.vue
templatediv!-- 头部 --Header /!-- 主题 --div styledisplay: flex!-- 主题-左边 --Aside /!-- 主题-右边 flex: 1 自适应布局 --router-view styleflex: 1 //div/div
/template!-- js --script
// 导入组件
import Header from /components/Header;
import Aside from /components/Aside;export default {name: Layout,// 使用哪些组件components: {Aside,Header,},
};
/script--页面布局在components下创建Header.vue文件
templatedivstyleheight: 50px;line-height: 50px;border-bottom: 1px solid #ccc;display: flex;divstylewidth: 200px;padding-left: 30px;font-weight: bold;color: dodgerblue;管理系统/divdiv styleflex: 1/divdiv stylewidth: 150pxel-dropdown commandhandleCommandspan classel-dropdown-linkel-avatarsrchttps://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png/el-avataradmini classel-icon-arrow-down el-icon--right/i/spanel-dropdown-menu slotdropdownel-dropdown-item commanda个人信息/el-dropdown-itemel-dropdown-item commandb退出系统/el-dropdown-item/el-dropdown-menu/el-dropdown/div/div
/templatescript
import router from /router;export default {name: Header,data() {return {name: 未登录,};},created() {},methods: {handleCommand(command) {},},
};
/script
--页面布局在components下创建Aside.vue文件
templatedivel-menustylewidth: 250px; min-height: calc(100vh - 50px)default-active2classel-menu-vertical-demoopenhandleOpenclosehandleClose:default-openeds[path]routerel-submenu index1template slottitlei classel-icon-location/ispan导航一/span/templateel-menu-item-grouptemplate slottitle分组一/templateel-menu-item index/list选项1/el-menu-itemel-menu-item index1-2选项2/el-menu-item/el-menu-item-groupel-menu-item-group title分组2el-menu-item index1-3选项3/el-menu-item/el-menu-item-groupel-submenu index1-4template slottitle选项4/templateel-menu-item index1-4-1选项1/el-menu-item/el-submenu/el-submenuel-menu-item index2i classel-icon-menu/ispan slottitle导航二/span/el-menu-itemel-menu-item index3 disabledi classel-icon-document/ispan slottitle导航三/span/el-menu-itemel-menu-item index4i classel-icon-setting/ispan slottitle导航四/span/el-menu-item/el-menu/div
/templatescript
export default {data() {return {//path变量path: this.$route.path,};},methods: {handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);},},
};
/script --把App.vue的图标注释掉 --路由在router下index.js修改请求映射 import Vue from vue
import Router from vue-router
//导入局部的页面Layout
import Layout from /components/Layout
Vue.use(Router)
export default new Router({routes: [// 也就是-- / 映射到了 Layout的页面{path: /,name: Layout,component: Layout}]
})
--重新启动前端项目-访问即可 四、前端登录页面
--1、在components下创建Login.vue
templatediv classlogin!-- 登录表单 v-model --div classlogin-form!-- :gutter20 --el-row :gutter20el-col :span12divimgsrc../assets/logo.pngaltstyleposition: relative;left: -100px;width: 250px;height: 85px;//divdiv styleposition: relative; left: 50pximg src../assets/icon-big.png alt //div/el-colel-col :span2/el-colel-col :span10!-- 登录的form组件【提交的信息】 --el-formrefloginForm:modelloginFormstylemargin-left: 150px; margin-top: 150pxel-form-itemel-tabsv-modelroleTypetab-clickselectRole:stretchtrueel-tab-pane label用户登录 name用户/el-tab-paneel-tab-pane label医生登录 name医生/el-tab-paneel-tab-pane label管理员登录 name管理员/el-tab-pane/el-tabs/el-form-itemel-form-item propname v-ifroleType 管理员el-inputprefix-iconel-icon-userv-modelloginForm.nametypetextplaceholder账号/el-input/el-form-itemel-form-item propphone v-ifroleType ! 管理员el-inputprefix-iconel-icon-userv-modelloginForm.phonetypetextplaceholder账号/el-input/el-form-itemel-form-item proppasswordel-inputprefix-iconel-icon-lockv-modelloginForm.passwordautocompleteoffshow-passwordplaceholder密码/el-input/el-form-itemel-form-item propcode v-ifcaptchaEnabledel-inputv-modelloginForm.codeplaceholder请输入验证码stylewidth: 63%/el-inputdiv classlogin-codeel-avatarshapesquarestylewidth: 100px:srccodeUrl/el-avatar/div/el-form-itemel-form-item stylewidth: 100%el-buttonsizemediumtypeprimarystylewidth: 100%; background-color: rgb(77, 167, 252)clickdoLogin()span stylefont-size: 20px登 录/span/el-button/el-form-itemel-form-item stylewidth: 100%el-buttonsizemediumtypeprimarystylewidth: 100%; background-color: rgb(77, 167, 252)v-ifroleType 用户clickregisterFormVisible truespan stylefont-size: 20px注 册/span/el-button/el-form-item/el-form!-- 登录的form组件【提交的信息】 --/el-col/el-row/div!-- 用户注册表单 --el-dialogtitle用户注册:visible.syncregisterFormVisible:close-on-click-modalfalseel-formlabel-positiontop:modelregisterFormstatus-iconrefregisterFormlabel-width100pxclassdemo-registerForm!-- 头像 --el-form-item label头像 propimageel-uploadclassavatar-uploaderactionhttp://localhost:80/vaccinum/common/upload:show-file-listfalse:on-successhandleAvatarSuccess:before-uploadbeforeAvatarUploadimg v-ifimageUrl :srcimageUrl classavatar /i v-else classel-icon-plus avatar-uploader-icon/i/el-upload!-- 隐藏输入字段用来存储图片的文件名 --input typehidden nameavatar v-modelregisterForm.image //el-form-item!-- 用户名\性别 --el-row :gutter20el-col :span12el-form-item label用户名 propnameel-inputtypetextv-modelregisterForm.nameautocompleteoff/el-input/el-form-item/el-colel-col :span12el-form-item label性别 propsexel-inputtypetextv-modelregisterForm.sexautocompleteoff/el-input/el-form-item/el-col/el-row!-- 年龄\身份证号 --el-row :gutter20el-col :span12el-form-item label年龄 propageel-inputtypetextv-modelregisterForm.ageautocompleteoff/el-input/el-form-item/el-colel-col :span12el-form-item label身份证号 propcodeidel-inputtypetextv-modelregisterForm.codeidautocompleteoff/el-input/el-form-item/el-col/el-row!-- 密码\密码 --el-row :gutter20el-col :span12el-form-item label密 码 proppasswordel-inputtypepasswordv-modelregisterForm.passwordautocompleteoff/el-input/el-form-item/el-colel-col :span12el-form-item label确认密码 proppassword_checkel-inputtypepasswordv-modelregisterForm.password_checkautocompleteoff/el-input/el-form-item/el-col/el-row!-- 手机号\地址 --el-row :gutter20el-col :span12el-form-item label手机号 propphoneel-inputtypetextv-modelregisterForm.phoneautocompleteoff/el-input/el-form-item/el-colel-col :span12el-form-item label地址 propaddressel-inputtypetextv-modelregisterForm.addressautocompleteoff/el-input/el-form-item/el-col/el-rowel-form-itemel-button typeprimary clickregisterSumbit提交/el-buttonel-buttonclickregisterFormVisible false;this.registerForm {name: ,password: ,password_check: ,phone: ,};取消/el-button/el-form-item/el-form/el-dialog!-- 用户注册表单 --!-- 底部 --div classel-login-footerspanCopyright © 2018-2022 gec All Rights Reserved./span/div!-- 底部 --/div
/templatescript
import router from /router;
export default {name: Login,data() {return {password_type: password, //密码显示类型imageUrl: , //头像上传路径codeUrl: ,loginForm: {//登录的表单数据name: 12345678909,phone: 12345678909,password: 123,code: ,},registerForm: {//注册的表单数据name: ,sex: ,age: ,password: ,password_check: ,image: ,codeid: ,phone: ,address: ,},loading: false,captchaEnabled: true,register: true,registerFormVisible: false,roleType: 用户,};},created() {},methods: {//修改密码显示类型cho() {this.password_type this.password_type text ? password : text;}, //选择哪个用户类型就显示那个类型selectRole() {console.log(this.roleType); // this.roleType command;},//登录的处理函数doLogin() {if (this.loginForm.phone12345678909this.loginForm.password123) {this.$message.success(登录成功); //跳转到Layout页面【首页】router.push(/Layout);} else {//登录失败提示信息this.$message.error(登录失败);}}, //注册函数registerSumbit() {//发起了异步请求request.post(register, this.registerForm) //回调函数.then((res) {if (res.flag true) {this.$message.success(注册成功);this.registerFormVisible false;this.registerForm {name: ,sex: ,age: ,password: ,password_check: ,image: ,codeid: ,phone: ,address: ,};this.imageUrl ;} else {//注册失败提示信息this.$message.error(res.message);}});}, //在上传成功后处理函数中获取服务端返回的图片文件名或URLhandleAvatarSuccess(res, file) {this.registerForm.image res.fileName;this.imageUrl URL.createObjectURL(file.raw);}, // 在上传之前清空旧图片信息beforeAvatarUpload(file) {this.registerForm.image ;this.imageUrl ;const isJPG file.type image/jpeg;const isLt2M file.size / 1024 / 1024 2;if (!isJPG) {this.$message.error(上传头像图片只能是 JPG 格式!);}if (!isLt2M) {this.$message.error(上传头像图片大小不能超过 2MB!);}return isJPG isLt2M;},},
};
/scriptstyle
.el-dialog {border-radius: 45px;
}
.login {position: absolute;width: 100%;height: 100%;overflow: hidden;background-image: url(../assets/1.png);background-size: 100% 100%;background-repeat: no-repeat;
}
.title {margin: 0px auto 30px auto;text-align: center;color: #707070;
}
.login-form {margin: 150px auto;background-image: url(../assets/beijing.png);border-radius: 45px;background-position: -35px, -35px;width: 1240px;height: 657px;/* padding: 25px 25px 5px 25px; */
}
.el-input {height: 38px;
}
input {height: 38px;
}
.input-icon {height: 39px;width: 14px;margin-left: 2px;
}
.login-tip {font-size: 13px;text-align: center;color: #bfbfbf;
}
.login-code {width: 33%;height: 38px;float: right;
}
.el-login-footer {height: 40px;line-height: 40px;position: fixed;bottom: 0;width: 100%;text-align: center;/* color: #fff; */font-family: Arial;font-size: 12px;letter-spacing: 1px;
}
.login-code-img {height: 38px;
}
.avatar-uploader .el-upload {/* border: 1px dashed #d9d9d9; */border: 1px solid black;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;
}
.avatar-uploader .el-upload:hover {border-color: #409eff;
}
.avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 178px;height: 178px;line-height: 178px;text-align: center;
}
.avatar {width: 178px;height: 178px;display: block;
}
/style
--2、在路由index.js中配置根目录访问登录页面、然后修改首页的 import Vue from vue
import Router from vue-router
//导入局部的页面Layout
import Layout from /components/Layout
import Login from /components/Login
Vue.use(Router)
export default new Router({routes: [// 也就是-- / 映射到了 Login的页面{path: /,name: Login, component: Login},{path: /Layout,name: Layout, component: Layout}]
}) --3、替换src中的assets文件中的图片 五、user登录后端接口完善【后端】
--1、在UserController中提供登录的处理方法、接收数据响应json格式的数据 //json 的解析工具
ObjectMapper jsonTool new ObjectMapper();// http://localhost:8085/user/loginUser?phonesdfsdfpasswordxxxx
// 定义user的登录查询的请求接口【根据手机号码和密码进行登录】
RequestMapping(/loginUser)
public String loginUser(String phone,String password) throws JsonProcessingException {// map集合-结果集HashMap result new HashMap();//調用业务层的查询方法根据手机号码和密码进行查询QueryWrapperUser wrapper new QueryWrapper();wrapper.eq(phone,phone).eq(password,password);//条件查询获取一个对象User user userService.getOne(wrapper);//业务逻辑的判断if(user!null){//登录成功result.put(flag,true);result.put(user,user);result.put(role,user);}else{//登录失败result.put(flag,false);result.put(message,用戶名或密碼錯誤);}//返回json格式的数据return jsonTool.writeValueAsString(result);
}
--2、启动项目然后测试
http://localhost:8085/user/loginUser?phone123451645602password123sdfsdfsdfsd 六、user登录前端-请求工具-请求发起【前端】
--结束前端程序ctrlc
--执行命令、安装axios和cookie依赖
npm install axios --save
npm install --save js-cookie
--在src下创建utils文件夹、并创建request.js文件 import axios from axios
import router from /router;
import qs from qs
import Cookies from js-cookie;
axios.defaults.withCredentialstrue //让ajax请求携带cookie
//1、目的是封装请求对象 2、目的对请求和响应数据进行格式
// 创建对象
const request axios.create({baseURL: http://localhost:8085, // 注意 这里是全局统一加上了 baseURL 前缀timeout: 5000
})// request 拦截器
request.interceptors.request.use(config {//对请求的数据进行处理if (config.method ! get) {config.data qs.stringify(config.data);}// post请求方式的content格式config.headers[content-Type] application/x-www-form-urlencoded;//允许通过访问return config;},error {console.log(err error) // for debugreturn Promise.reject(error)}
)// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(response {let res response.data;// 如果是返回的文件if (response.config.responseType blob) {return res}// 兼容服务端返回的字符串数据if (typeof res string) {res res ? JSON.parse(res) : res}return res;},error {console.log(err error) // for debugreturn Promise.reject(error)}
)export default request--修改Login.vue中的登录请求处理函数、发起异步请求 //注意导入请求工具类和cookie
import Cookies from js-cookie;
import request from /utils/request.js; doLogin() {//通过请求对象发起一个异步请求操作【axios】request.post(/user/loginUser, this.loginForm) //第一个参数是请求地址、第二个参数提交的数据 //回调函数\获取服务器响应的结果.then((res) {//如果成功flagif (res.flag true) {this.$message.success(登录成功); //把user信息、角色信息存放在cookie中Cookies.set(user, JSON.stringify(res.user), { expires: 0.3 });Cookies.set(role, res.role, { expires: 0.3 }); //通过路由跳转、登录成功后跳转到首页router.push(/Layout);} else {//登录失败提示信息this.$message.error(res.message);}});},
--点击登录按钮进行测试、请求是成功发起的但是发现跨域拦截: 七、请求的跨域-访问策略
--后端项目中创建config包然后创建配置类提供跨域访问策略 import org.springframework.stereotype.Component;import javax.servlet.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;//定义拦截器允许跨域访问
Component
public class UrlCorsConfiguration implements Filter {public void doFilter(ServletRequest req, ServletResponse res,FilterChain chain) throws IOException, ServletException {HttpServletResponse response (HttpServletResponse) res;// 允许跨域访问的地址【前端项目部署的地址】response.setHeader(Access-Control-Allow-Origin, http://localhost:8080);//允许跨域的请求方法GET, POST, HEAD 等response.setHeader(Access-Control-Allow-Methods, POST, GET, PUT, OPTIONS, DELETE);//重新预检验跨域的缓存时间 (s)response.setHeader(Access-Control-Max-Age, 3600);//允许跨域的请求头response.setHeader(Access-Control-Allow-Headers, x-requested-with, Content-Type);//是否携带cookieresponse.setHeader(Access-Control-Allow-Credentials, true);// 设置响应的类型及字符集编码response.setContentType(text/json;charsetutf-8);//设置响应的中文编码chain.doFilter(req, res);}public void init(FilterConfig filterConfig) {}public void destroy() {}}
--重启后端项目然后发起请求查看 八、完善项目的页面布局、导航菜单以及权限划分
--替换Aside.vue后端项目
templatedivel-menustylewidth: 250px; min-height: calc(100vh - 50px);padding-top: 10px;default-active2classel-menu-vertical-demoopenhandleOpenclosehandleClose:default-openeds[path]routerel-submenu index1 v-ifrole managertemplate slottitlei classel-icon-s-management/i!-- font-family:Franklin Gothic Medium, Arial Narrow, Arial, sans-serif; --span stylefont-size: 17px; font-weight: bold;font-family:苹方管理员模块/span/templateel-menu-item-groupel-menu-item index/Layout/adminListi classel-icon-link/i管理员列表/el-menu-item/el-menu-item-group/el-submenuel-submenu index2template slottitlei classel-icon-first-aid-kit/ispan stylefont-size: 17px; font-weight: bold;font-family:苹方医生模块/span/templateel-menu-item-group!-- i classicon_line/i --el-menu-item index/Layout/doctorListi classel-icon-link/i 医生列表/el-menu-itemel-menu-itemindex/Layout/registrationv-ifrole manager || role doctor || role useri classel-icon-link/i挂号记录/el-menu-itemel-menu-item index/Layout/vaccineRecord v-ifrole ! doctori classel-icon-link/i接种记录/el-menu-item/el-menu-item-group/el-submenuel-submenu index3 v-ifrole manager || role usertemplate slottitlei classel-icon-user/ispan stylefont-size: 17px; font-weight: bold;font-family:苹方用户模块/span/templateel-menu-item-groupel-menu-item index/Layout/userList v-ifrole manageri classel-icon-link/i用户列表/el-menu-itemel-menu-item index/Layout/userRegis v-ifrole useri classel-icon-link/i预约挂号/el-menu-item/el-menu-item-group/el-submenuel-submenu index4template slottitlei classel-icon-office-building/ispan stylefont-size: 17px; font-weight: bold;font-family:苹方医院模块/span/templateel-menu-item-groupel-menu-item index/Layout/hosListi classel-icon-link/i医院列表/el-menu-itemel-menu-item index/Layout/deptListi classel-icon-link/i科室列表/el-menu-item/el-menu-item-group/el-submenuel-submenu index5template slottitlei classel-icon-office-building/ispan stylefont-size: 17px; font-weight: bold;font-family:苹方疫苗模块/span/templateel-menu-item-groupel-menu-item index/Layout/vaccineTypei classel-icon-link/i疫苗种类/el-menu-itemel-menu-item index/Layout/vaccinei classel-icon-link/i疫苗信息/el-menu-itemel-menu-item index/Layout/appVaccineListi classel-icon-link/i可预约疫苗/el-menu-item/el-menu-item-group/el-submenu/el-menu/div
/template
style
.icon1 {display: inline-block;width: 50px;height: 50px;background-image: url(../assets/BUTTON_NOOPEN.png);background-position: center center;background-repeat: no-repeat;
}
.icon_line {display: block;width: 20px;height: 20px;background-image: url(../assets/line1.png);position: relative;left: 75px;background-repeat: no-repeat;
}
/stylescript
import Cookies from js-cookie;
import request from /utils/request;
export default {data() {return {//path变量path: this.$route.path,role: ,userId: ,timer: null,};},//生命周期【当页面对象创建成功触发的函数】created() {//获取manager信息var userJson JSON.parse(Cookies.get(user));this.role Cookies.get(role);console.log(this.rolethis.role);this.userId userJson.id;// 启动定时器每5秒钟检查一次this.timer setInterval(this.checkDatabaseChanges, 5000);},methods: {//获取数据库最新数据持续更新cookiecheckDatabaseChanges() {//判断是哪种用户let url this.role manager? /manager/selectById: this.role doctor? /doctor/selectById: /user/selectById;// 通过请求获取最新的数据request.get(url, {params: {id: this.userId,},})//回调函数.then((res) {if (res.flag true) {//更新Cookie值Cookies.set(user, JSON.stringify(res.user), { expires: 0.3 });}});},handleOpen(key, keyPath) {console.log(key, keyPath);console.log(打开);},handleClose(key, keyPath) {console.log(key, keyPath);console.log(关闭);},},beforeDestroy() {// 销毁定时器clearInterval(this.timer);},
};
/script
--替换Header.vue
templatedivstyleheight: 65px;line-height: 65px;border-bottom: 1px solid #ccc;background-color: #254175;display: flex;divstylewidth: 200px;padding-left: 30px;font-weight: bold;color: dodgerblue;imgsrc../assets/logo-06.pngstylewidth: 200px; height: 50px; padding-top: 5pxalt//divdiv styleflex: 1/divdiv stylewidth: 250pxel-dropdown commandhandleCommandspan classel-dropdown-linkel-row :gutter5el-col :span12 stylepadding-top: 9px;el-avatar :srcimage shapesquare :size50/el-avatar/el-colel-col :span9 stylecolor:#fff;font-weight: bold;{{ name }}/el-colel-col :span3 stylecolor:#fff;font-weight: bold;i classel-icon-arrow-down el-icon--right/i/el-col/el-row/spanel-dropdown-menu slotdropdownel-dropdown-item commanda v-ifrole ! manager个人信息/el-dropdown-itemel-dropdown-item commandb退出系统/el-dropdown-item/el-dropdown-menu/el-dropdown/div/div
/templatescript
import router from /router;
import Cookies from js-cookie;
export default {name: Header,data() {return {name: 未登录,image: ,role: ,};},created() {//获取登录用户信息var userJson JSON.parse(Cookies.get(user));this.name userJson.name;this.image userJson.image;this.role Cookies.get(role);},methods: {handleCommand(command) {if (command b) {Cookies.remove(user);//跳转到登录router.push(/login);} else {//跳转到个人信息router.push(/Layout/personalInfo);}},},
};
/script
--修改后端UserController中-的登录请求要返回user的对象数据、用户的角色 // 在结果集中保存user对象以及角色信息
result.put(user, user);
result.put(role, user); --登录页面的登录函数中存储user和role角色信息 --重新登录测试即可 九、实现疫苗分类的查询及分析流程
--后端VaccineType实体类中添加主键变量 /*** 主键*/
TableId(type IdType.AUTO)
private Integer id;
--后端VaccineTypeController中定义查询请求接口
RestController
RequestMapping(/vaccinetype)
public class VaccineTypeController {//jsonObjectMapper json new ObjectMapper();//serviceAutowiredIVaccineTypeService typeService;// 测试 http://localhost:8085/vaccinetype/query//查询分类、响应json数据【键值对的数据】RequestMapping(/query)public String query() throws JsonProcessingException {//结果的存放集合HashMap result new HashMap();// 1\调用业务层方法执行查询操作ListVaccineType list typeService.list();// 2\在结果集中存放list集合result.put(list, list);// 返回json数据return json.writeValueAsString(result);}}
--前端在src下创建type文件夹然后创建TypeList.vue --前端从element-ui中获取组件代码、提供请求操作和修改table中的字段名
templateel-table :datatableData stripe stylewidth: 100%el-table-column propid label编号 /el-table-columnel-table-column propname label名称 /el-table-columnel-table-column propremark label描述 /el-table-column/el-table
/templatescript
import request from /utils/request.js;
export default {data() {return {tableData: [],};},// 页面中的vue对象创建成功后触发created() {//发起查询请求request.get(/vaccinetype/query) //第一个参数是请求地址、第二个参数提交的数据 //回调函数\获取服务器响应的结果.then((res) {this.tableData res.list;});},
};
/script
--前端修改路由、在Layout路径下配置子url的映射【router中的index.js文件】
import Vue from vue
import Router from vue-router
//导入局部的页面Layout
import Layout from /components/Layout
import Login from /components/Login
Vue.use(Router)
export default new Router({routes: [// 也就是-- / 映射到了 Login的页面{path: /,name: Login,component: Login},// 页面布局的映射{path: /Layout,name: Layout,component: Layout,children: [{path: vaccineType,// -- /Layout/vaccineTypename: vaccineType,component: ()import(/type/TypeList)},],}]
}) 十、疫苗分类--页面完善、以及添加、修改及删除实现
--后端在VaccineTypeController中提供删除、添加和修改的请求接口
RestController
RequestMapping(/vaccinetype)
public class VaccineTypeController {//依賴VaccineType业务层对象Autowired //自动注入IVaccineTypeService typeService;//json 的解析工具ObjectMapper jsonTool new ObjectMapper();// http://localhost:8085/vaccinetype/query// 定义查询的请求接口RequestMapping(/query)public String query(String phone,String password) throws JsonProcessingException {// map集合-结果集HashMap result new HashMap();//調用业务层的查询方法ListVaccineType list typeService.list();result.put(list,list);//返回json格式的数据return jsonTool.writeValueAsString(result);}// http://localhost:8085/vaccinetype/update// 定义修改的请求接口RequestMapping(/update)public String update(VaccineType type) throws JsonProcessingException {// map集合-结果集HashMap result new HashMap();//調用业务层的查询方法boolean update typeService.updateById(type);result.put(flag,update);//返回json格式的数据return jsonTool.writeValueAsString(result);}// http://localhost:8085/vaccinetype/insert// 定义添加的请求接口RequestMapping(/insert)public String insert(VaccineType type) throws JsonProcessingException {// map集合-结果集HashMap result new HashMap();//調用业务层的查询方法boolean insert typeService.save(type);result.put(flag,insert);//返回json格式的数据return jsonTool.writeValueAsString(result);}// http://localhost:8085/vaccinetype/insert// 定义刪除的请求接口RequestMapping(/delete)public String delete(Integer id) throws JsonProcessingException {// map集合-结果集HashMap result new HashMap();//調用业务层的查询方法boolean delete typeService.removeById(id);result.put(flag,delete);//返回json格式的数据return jsonTool.writeValueAsString(result);}}
--替换TypeList.vue页面即可、效果如下 templatediv stylewidth: 100%div classtop_div!-- 模糊查询表单 --el-form:inlinetrueclassdemo-form-inlinestylepadding-top: 22px!--批量删除、新增按钮--el-form-item v-ifrole manager || role nurseel-popconfirmtitle删除后无法恢复确定吗icon-colorredconfirmbatch_delete()el-button slotreference plain typedanger批量删除/el-button/el-popconfirm/el-form-itemel-form-itemel-inputv-modelnameplaceholder请输入疫苗种类名关键字/el-input/el-form-itemel-form-itemel-buttontypeprimarystylebackground-color: #254175clickselectPage查询/el-buttonel-buttontypeprimarystylebackground-color: #254175clickaddOperate新增/el-button/el-form-item/el-form/divdiv classbotoom_div!-- 疫苗种类信息展示表格 --el-table:datatableDatastylewidth: 100%selection-changehandleSelectionChange!-- 复选框 --el-table-columntypeselectionwidth55v-ifrole manager || role nurse/el-table-columnel-table-column propid label种类编号 /el-table-columnel-table-column propname label种类名称 sortable/el-table-columnel-table-column propremark label介绍template #defaultscopeel-popoverplacementtop-startwidth100triggerclick:contentscope.row.remarkel-button slotreference classellipsis-button{{scope.row.remark}}/el-button/el-popover/template/el-table-column!-- v-ifrole manager || role nurse --el-table-column propstatus label状态template #defaultscopeel-tag typesuccess v-ifscope.row.status 1正常/el-tagel-tag typedanger v-ifscope.row.status 0禁用/el-tag/template/el-table-column!-- v-ifrole manager || role nurse --el-table-column label管理template #defaultscopeel-buttonsizesmallv-ifscope.row.status 1typedangerclickupdateStatus(scope.row)禁用/el-buttonel-buttonsizesmallv-ifscope.row.status 0typesuccessclickupdateStatus(scope.row)启用/el-button/template/el-table-column!-- v-ifrole manager || role nurse --el-table-column label操作template #defaultscopeel-button sizesmall clickhandleEdit(scope.$index, scope.row)修改/el-buttonel-popconfirmtitle删除后无法恢复确定吗icon-colorredconfirmhandleDelete(scope.$index, scope.row)el-button slotreference sizesmall typedanger删除/el-button/el-popconfirm/template/el-table-column/el-table!-- 添加-修改表单 --el-dialog:title!vaccineType.id ? 疫苗种类-添加 : 疫苗种类-修改:visible.syncformVisible:close-on-click-modalfalseel-form:modelvaccineTypestatus-icon:rulesrulesrefaddTypelabel-width50pxclassdemo-vaccineTypeel-form-item label编号 propid v-ifvaccineType.idel-input v-modelvaccineType.id disabled/el-input/el-form-itemel-form-item label种类名 propnameel-inputtypetextv-modelvaccineType.nameautocompleteoff/el-input/el-form-itemel-form-item label介绍 propremarkel-inputtypetextareav-modelvaccineType.remarkautocompleteoff/el-input/el-form-itemel-form-itemel-button typeprimary clicksubmitForm(addType)提交/el-buttonel-button clickformVisible false取消/el-button/el-form-item/el-form/el-dialog/div/div
/templatescript
//导入request工具
import request from /utils/request;
import Cookies from js-cookie;
export default {data() {return {role: ,name: , //模糊查询数据 //表格数据tableData: [],ids: [], //根据id批量删除存放的容器vaccineType: {id: ,name: ,remark: ,},rules: {name: [{ required: true, message: 请输入疫苗种类名称, trigger: blur },],remark: [{ required: true, message: 请输入疫苗种类介绍, trigger: blur },],},formVisible: false,};}, //当vue创建后发起请求查询数据created() {if (Cookies.get(user)) {//获取登录用户角色var userJson JSON.parse(Cookies.get(user));this.role userJson.role;}this.selectPage();},methods: {//分页-模糊查询函数selectPage() {//发送请求request.get(/vaccinetype/query, {params: {name: this.name,},}).then((res) {//处理响应if (res.flag false) {//查询失败this.$message.error(res.message);} else {this.$message.success(查询成功); //将查询到的数据赋值到当前tableData中this.tableData res.list;}});}, //当复选框状态改变时自动调用该函数将复选框选中的行的数据id存入ids数组中handleSelectionChange(selection) {//遍历selection数组存储id值this.ids selection.map((item) item.id);}, //批量删除函数batch_delete(index, row) {if (this.ids ! ) {request.get(/vaccinetype/batchDelete, {params: {ids: this.ids.toString(),},}).then((res) {//处理响应if (res.flag false) {//删除失败this.$message.error(res.message);} else {this.$message.success(删除成功);this.selectPage();}});} else {this.$message.error(请先选择需要删除的数据);}}, //删除函数handleDelete(index, row) {request.get(/vaccinetype/delete, {params: {//参数id: row.id,},}).then((res) {//处理响应if (res.flag false) {//删除失败this.$message.error(res.message);} else {this.$message.success(删除成功);this.selectPage();}});}, //每页展示多少条handleSizeChange(val) {this.pageSize val;this.selectPage();}, //当前页为多少页handleCurrentChange(val) {this.currentPage val;this.selectPage();}, //打开添加表单addOperate() {this.formVisible true; //对该表单项进行移除校验结果this.$refs.addType.resetFields();this.vaccineType {id: ,name: ,remark: ,};}, //修改-添加表单提交函数submitForm(formName) {//validate校验代码this.$refs[formName].validate((valid) {// ok--通过校验if (valid) {if (this.vaccineType.id) {//id存在则是进行修改操作request.post(/vaccinetype/update, this.vaccineType).then((res) {if (res.flag false) {//修改失败this.$message.error(res.message);// 查询方法this.selectPage();} else {//修改成功this.formVisible false;this.$message.success(修改成功);this.vaccineType {id: ,name: ,remark: ,};this.selectPage();}});} else {//id不存在则是进行添加操作//发送请求request.post(/vaccinetype/insert, this.vaccineType).then((res) {//处理响应if (res.flag false) {//添加失败this.$message.error(res.message);} else {this.$message.success(添加成功); //关闭模态框this.formVisible false; //清空数据this.vaccineType {id: ,name: ,remark: ,}; //重新查询数据this.selectPage();}});}}});}, // 打开修改表单函数handleEdit(index, row) {//打开嵌套表单的修改对话框this.formVisible true; //将数据进行回显this.vaccineType.id row.id;this.vaccineType.name row.name;this.vaccineType.remark row.remark; //对该表单项进行移除校验结果 // this.$refs.addType.clearValidate();},},
};
/scriptstyle
.top_div {border-radius: 15px;box-shadow: rgba(0, 0, 0, 0.32) 0px 2px 5px;margin-bottom: 50px;background-color: #fff;
}
.botoom_div {border-radius: 15px;padding-top: 25px;padding-bottom: 25px;box-shadow: rgba(0, 0, 0, 0.32) 0px 2px 5px;margin-bottom: 50px;background-color: #fff;
}
.ellipsis-button {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;height: 50px;max-width: 200px;/* 假设按钮最大宽度为100px根据需要进行调整 */
}
/style
--重启后端服务进行测试、建议可以先新增一些数据然后再测试修改和删除的操作
