微人事项目学习笔记（1）- 搭建 vue 3前端工程

文章目录微人事项目学习笔记1. 准备工作1.1 数据库准备1.2 Vue 准备1.3 Spring Boot 准备2. 前后端配置2.1 后端返回消息对象定义2.2 Spring Security 设置统一返回数据2.3 前端统一拦截响应请求内容2.4 前端登录接口数据处理2.4 跨域问题3. 接口调用3.1 请求接口封装3.2 关于动态路由菜单的实现3.2.1 **数据库设计**3.2.2 **后端查询**3.2.3 **前端渲染数据**3.3 后端权限控制3.3.1 数据库设计与查询3.3.2 Spr

本项目参考本文参考自江南一点雨的Spring Boot+Vue系列视频教程第 16 章，详情参加【Spring Boot+Vue系列视频教程】，本项目仓库地址：hr-web 前端技术点 Vue 本项目前端基于vue3.0构建，教程基于vue2.x构建，在vue3.0中某些地方与vue2.x存在差异，将在前端问题解决中呈现。本项目主要用了vue的基础功能，可参考官方文档Vue.js，也可参考b站尚硅谷教程。 ElementUI-Plus Element Plus配合Vue3.0使用，使用中的注意事项： 1、设

1 后端环境搭建 2 后端登录 首先根据表生成model和mapper SecurityConfig package com.tzb.vhr.config; import com.fasterxml.jackson.databind.ObjectMapper; import com.tzb.vhr.model.Hr; import com.tzb.vhr.model.RespBean; import com.tzb.vhr.service.HrService; import org.s

目录 Spring Boot 入门 .. .... .. ... .. .. …. ....... .. ....………......….. ... .. …..... ... .……… .... .. 1 1.1 Spring Boot 简介............... ...... .. .. …. ... .........………… .. .. ….. .... ......... ..… ...... .….. 1 1.2 开发第一个 Spring Boot 程序….. ... .. ... .

由于前端技术的快速迭代性，国内的高校基本上不会去专门开设前端开发这一门课程，与之相对应的是大数据和软件工程，围绕python和java等生态和开发路线较为稳定的语言去开设课程，这就导致大部分学生在校对前端的了解局限于前端三剑客直到现在，还有不少学生到了大三以为学了三剑客就能找到实习，所以笔者总结了一份如何学习前端的指南，希望能帮助到想入门或即将入门前端的同学如果想系统的学习一门课程，只凭一时兴趣是无法长久的学习的

进入21世纪网络和计算机得到了飞速发展,并和生活进行了紧密的结合。目前,网络的运行速度以达到了千兆,覆盖范围更是深入到生活中的角角落落。这就促使管理系统的发展。网上办公可以实现远程处理事务,远程提交工作和随时追踪工作的状态。网上管理系统给人们带来前所未有的体验,满足了新时代人们的办公需求,所以网上管理系统模式得到大力发展。 本系统为企业人事管理系统,是采用计算机和网络技术进行开发的在线人事管理平台,可以实现考勤管理、在线请假、薪资管理、基础数据管理、合同管理等。本系统采用JAVA语言SSM框架,

Spring 作为一个轻量级的容器，在JavaEE开发中得到了广泛的应用，但是Spring 的配置繁琐臃肿，在和各种第三方框架进行整合时代码量都非常大，并且整合的代码大多是重复的，为了使开发者能够快速上手Spring，利用Spring框架快速搭建JavaEE项目，Spring Boot应运而生。 Spring Boot 中对一些常用的第三方库提供了默认的自动化配置方案，使得开发者只需要很少的Spring 配置就能运行一个完整的Java EE应用。Spring Boot项目可以采用传统的方案打成war包,然

【web前端开发课程介绍】： 随着移动互联网的深入发展，多屏互动和多端兼容友好的界面成为目前系统重要的需求，让前端开发工程师一跃成为目前市场紧俏的人才。 本课程内容包含目前的Vue、React前端框架，把全栈工程师要掌握的前端技术、Node.js相关后台技术、HTML5移动方向开发技术做了系统整合， 致力于培养中高等前端工程师。 为什么选择前端开发？ 1、专业无限制：计算机专业、非计算机专业占比3：4 2、适合零基础：专业、性别不限，没有基础也能学习 3、技术上手快：4个月，快速学习、系统掌握 4、职业生涯

1

1 Home和Title页制作 布局参考 布局 右面的菜单 注销 2 左边导航菜单 实现在main的页面显示，而不是整个页面替换 根据index跳转 自动跳转 el-menu增加 router属性，不用写点击事件 ...

1 后端环境搭建 1.1 新建项目 <dependency> <groupId>com.alibaba</groupId> <artifactId>druid-spring-boot-starter</artifactId> <version>1.1.10</version> </dependency>

1 前后端接口对接 1.1 安装 axios 1.2 vue项目 api.js import axios from 'axios' import {Message} from 'element-ui' /*响应的拦截器*/ axios.interceptors.response.use(success=>{ if(success.status && success.status ==200 && success.data.status==500){

1 前后端分离权限管理 http://www.javaboy.org/2019/0523/springboot-vue-permission.html 2 后端接口权限设计 角色只分配给二级菜单 根据用户发送的url地址，提取出需要的角色。 查看当前用户是否具备需要的角色 ...

1 基础信息设置 https://element.eleme.cn/#/zh-CN/component/tabs tab 挨着上面太近，修改 Home.vue

1 完善权限管理 关闭服务端， 启动前端项目 没有登录，直接访问菜单，error 有 response 字段 启动服务端 前端直接去访问 http://localhost:8081/login 思路： 在没有登录时，访问某个接口，不要重定向，直接告诉其结果。 启动服务端 解决页面空白，不是很友好。 现在是如果没有登录，访问 sys/basic ，会跳转到登录页面。 改进，在登录后，在跳回到 sys/basic ...

1 导航菜单栏 import Vue from 'vue' import VueRouter from 'vue-router' import Login from '../views/Login.vue' import Home from '../views/Home.vue' import Test1 from '../views/Test1.vue' import Test2 from '../views/Test2.vue' Vue.use(VueRouter) const route

1 处理前端登录事件