文章目录
项目sql文件——点击下载
项目搭建
这里的报错信息是因为我弄项目的时候 用了yarn
打算更新一下脚手架版本
按照视频运行一下试试
成功了
使用IDEA打开是因为后面还要用IDEA来写springboot
路由可以简单理解为 每个路由都是用来切换页面的 点击之后页面路径变了 页面内容也变了。
这里vue前端部分选择自己喜欢使用的编辑器 我准备使用VSCode
使用elementUI
安装 ElementUI
npm i element-ui -S
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
想到我的项目中是用的yarn的 于是
项目搭建完毕 把第一次的代码提交到了gitee
提交是遇到了一些问题 就是文件夹是灰色的：解决方法
但是还遇到了 就是无论如何就提交不上去，就是说我的代码没改动，所以无法提交 我删除了文件下的.git 然后再次git init然后再来提交就成功了。
主体布局
这部分没出错后台服务搭建
使用第二种方法解决
但是因为之前建立了springboot 所以这时出现
参考文章
善用搜索看有人说是要下载 shell script 然后我按步骤发现自己已经下载了
明白了记得要按照这个博客弄一下
Navicat中新建数据库
在springboot中配置数据库
改成yml格式
运行springboot
对于以上爆红的解决方法这里因为不影响运行 我就先不弄了。
以下结果告诉使用服务的人 这个后台是启动中的，是可以用的
这是一个健康检查的接口
接下来应该对数据库进行操作了
通过mybatis操作数据库了。
通过接口写注解来对数据库进行操作
必须有一个bean 跟数据库表有一个一一对应
此时User.java中的属性应该要跟数据库中user表中的数据一一对应
实体之后就应该有一个接口来操作这个实体 提供一些方法给外部调用
创建一个新的包mapper 这个包就是用来提供一些api 提供数据库的一些访问方法，给外部调用
通过注解的方式就可以实现数据库的查询
一般service 是通过接口+实现类的方式来实现的。
这是应该调用mapper UserService中调用mapper
把数据查出来 再通过IUserService 返回出去 最后给Controller接口用。
新建controller包 这一层实现数据传输给前端浏览器 对外暴露我们的api的。
这部分为了更加方便 我也是在IDEA中运行的vue
在前端代码中
运行
报错
在UserController中加一个注解@CrossOrigin
重启springboot
数据已经有了
以上都是通过注解的方式 来写的sql语句
但是还有一种方式 是通过xmL来写sql语句
打开mybatis官网
将注解注释掉 使用xml方式
重新运行
解决方法
再次刷新 运行 页面已经显示数据了！！！
这里安装了一个插件 但是没重启IDEA不影响 只是先装一下这个插件MybatisX
代码
主要看springboot 以及vue目录下的代码变化 上面.idea里面的不用看
实现分页模糊查询
要对返回的结果进行一个统一的包装
这里我决定安装一下 谷歌浏览器美化json格式的插件
参考博客：详细教程：Google Chrome谷歌浏览器中安装JsonView插件（含插件压缩包）
再来写几个比较复杂的接口——分页的模糊查询
后台要提供一个分页模糊查询的接口
之前写的listUsers接口 不够通用
接口大概可以分成：查询所有的、分页查询的、根据id查询的、新增、修改、删除。
尽量让名字通用 所以改为list
改完后莫名出现爆红 参考博客：SpringBoot中@Autowired爆红原理及解决方案（转载）
在UserMapper中添加关于分页查询的代码
然后里面要穿参数
在controller中新建request包 新建UserPageRequest类 和BaseRequest的基类
多条件的分页模糊查询就已经写出来了
接下来就是要修改一下前端的代码
接下来就是对axios的一个封装
在vue目录下创建request.js 还是要移动到src/util/request.js
没有util目录 自己创建。
import axios from 'axios'
const request = axios.create({
//baseURL: '/api', // 注意！！ 这里是全局统一加上了 '/api' 前缀，也就是说所有接口都会加上'/api'前缀在，页面里面写接口的时候就不要加 '/api'了，否则会出现2个'/api'，类似 '/api/api/user'这样的报错，切记！！！
baseURL: 'http://localhost:9090',
timeout: 5000
})
// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {
config.headers['Content-Type'] = 'application/json;charset=utf-8';
// config.headers['token'] = user.token; // 设置请求头
return config
}, error => {
return Promise.reject(error)
});
// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
response => {
let res = response.data;
// 兼容服务端返回的字符串数据
if (typeof res === 'string') {
res = res ? JSON.parse(res) : res
}
return res;
},
error => {
console.log('err' + error) // for debug
return Promise.reject(error)
}
)
export default request
实现分页模糊查询涉及到的知识：
统一结果的封装
数据库动态查询数据的方法
前端的调用
pageHelper分页插件的使用
后台CRUD
将后台服务的增删改先写好 然后前端再去调用
首页想做会员管理 所以之前的要更改一下
在vue/views下创建user目录也就是我们的会员
这里要对代码进行一个改动 将HomeView.vue的代码剪切到User.vue中
然后因为代码的格式 所以我决定安装一个插件
参考文章：效率提升-idea插件（save action）
没安装vue.js插件的也可以安装一下，我之前就安装过了。
idea 格式化vue代码，检查语法
当然了这些插件不想安装 也是不用安装 不影响开发。
新增
后台应该有支持新增的操作，所以要在后台创建一些新增的接口，来支持前端把数据发送给后台
前端如何把数据发送到后台：通过http的方式，通过post的请求，将json数据发给后台接口，后台接口接收到数据之后，转成java对象，把java对象存储到数据库里面。
逻辑代码敲完后 新增 发现数据库有的数据 再次新增 还是可以交上去，然后什么都不输入也是可以新增上去。
但是不应该允许有同样的用户名 改一下 自动生成一个卡号 不用用户名。
前端用用户名可能会重复 使用用户名不太合理
用时间戳或者uuid都行
这里使用uuid 在pom.xml中引用
<dependency>
<groupId>cn.hutool</groupId>
<artifactId>hutool-all</artifactId>
<version>5.8.0</version>
</dependency>
在userService中处理
前端不在输入用户名了 由后端自动设置，数据库表比较单薄 再加上一个创造时间。
新增用户这部分代码
新增用户 应该让id最大的在最前面 在User.xml中 增加order by id desc即可
修改
接下来开始弄修改功能：
编辑部分已完成 已经可以成功更新数据
代码
删除
接下来就是做删除部分
表单校验和克隆模块
优化一下之前的增删改查
然后编写表单校验的代码 可参考element-ui官网form表单检验部分
代码
现在该做管理员部分
克隆出管理员模块
这部分直接复制粘贴 一定要注意 一些地方很可能你没有改
还有Admin.xml中的sql如果单词写错了 也会在控制台报500的错
登录前后台
出现一点小问题
就是点击管理员管理 直接缩回去了 如下图
现在
但是二级菜单选中没有高亮
因为前面为了解决菜单同时折叠问题 从而将会员列表和管理员列表后面都加上了List
所以我们要把之前操作之后跳转到user和admin的地方都改成userList和adminList
接下来就开始完善登录功能
登录
在springboot中写好login接口的逻辑之后
可以通过postman来测试这个接口
全局异常处理
import com.example.springboot.common.Result;
import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.RestControllerAdvice;
@Slf4j
@RestControllerAdvice
public class ExceptionHandle {
@ExceptionHandler(value = ServiceException.class)
public Result serviceExceptionError(ServiceException e) {
log.error("业务异常", e);
return Result.error(e.getMessage());
}
@ExceptionHandler(value = Exception.class)
public Result exceptionError(Exception e) {
log.error("系统错误", e);
return Result.error("系统错误");
}
}
public class ServiceException extends RuntimeException{
public ServiceException(String message) {
super(message);
}
}
接下来就是登录前端部分
登录前端
所以要对路由进行改造了
先把原来App.vue中的内容移动出去
在vue目录下new一个Layout.vue
登录已实现
改动的代码
数据安全
此时，可以直接进到系统，应该强制登录后，才能进入系统内部。
密码现在是明文，不够安全，应该为暗纹，后面有个小眼睛，点开才能看到密码。密码框增加属性show-password即可
又做了一下退出功能。
在登录界面要设置一个未登录不能进主页的功能，当第一进主页时，要直接跳转到登录界面中。做法：跳到主页时，会请求数据，其实就是对数据进行保护，要先登录才能查询数据，在请求数据的地方进行一个数据保护，就可以实现数据 的安全性utils/request.js
(判断浏览器内是否有数据的缓存，如果有就不跳转，直接进行操作，没有就要登录）
可以把当前登录的用户数据存储到cookie中
使用js-cookie
npm i js-cookie -S
此外，密码在数据库打开，可以直接看到，不合理
可以通过md5的方式对密码进行保护，让开发人员不可以一眼就看出来密码。
在添加管理员的时候做保护。
这个时候发现，添加管理员时候也没插入密码，不合理，要给一个默认的密码。
md5加密 在AdminService设置 设置默认密码为123 加盐后到数据库是一串看不懂的密码
此时登录页面通过密码123无法登录，还需要在处理一下。
处理后可成功登录。
改动的代码
之后 通过后台的手段，实现数据安全，现在只是在界面上数据是安全的
localhost:9090/admin/1还是可以看到数据
我们在axios封装的工具下即src/utils/request.js中request拦截器中判断了用户cookie是否存在，不存在就跳转到登录界面，其实这部分功能是可以在路由守卫里面去做。
还有我们在前端页面上localhost:8080/下面乱输入路径abc会出现空白界面，对用户不够友好，应该显示404页面
🍺实现效果：
当主页没有任何请求，应该如何处理，
使用路由守卫解决
router.beforeEach((to, from, next) => {
if(to.path === '/login') next()
const admin = Cookies.get('admin')
if(!admin && to.path!=='/login') return next('/login')//强制退回到登录页面
//访问/home 时，并且cookie里面存在数据，此时放行
next()
})
以上代码添加到router/index.js中
此时将utils/request.js以及views/home/HomeView.vue一些代码注释
运行报错：
原因在Login.vuecookie数据没有存储，就发生了跳转，应该先存储数据，再跳转
此时删除浏览器存储的cookie会直接跳转到登录页面，但是如果自己伪造设置cookie后还是可以进入主页，数据时不安全，所以需要将数据放到后端保护，此时需要使用jwt，前端登录之后，后台会发给前端一个凭证，前端凭这个凭证再去访问后台的数据。