改造Springboot+vue项目

准备

搜索一个项目，并成功运行

毕设时，我们可以从网上搜索一个项目（包括前端的页面、后台的处理、数据库等有一下简单的模板样式）并能成功的将项目在自己的电脑上跑起来。毕设项目可以用搜索的模板（不用从头开始写，提高我们的开发效率），再根据自己的毕设题目具体要求更改。

在这里我搜索到了：springboot+vue前后端分离项目（后台管理系统）_springboot前后端分离项目_先养只猫的博客-CSDN博客

拷贝到本地之后，需要在idea中调整一下版本号、端口号、数据的连接等。最终能够成功运行，遇到的问题可以搜索，有很多这方面的回答。我主要介绍怎么根据自己的功能改造。

技术储备

• 能通过各种手段，解决后端控制台报错，会使用开发者模式调试/测试
• 了解maven  pom.xml的配置
• 了解服务器的端口
• 了解vue框架的配置，能看懂request拦截器，能看懂vue目录的含义
• 能使用Element-UI
• 了解springboot框架，了解DAO模式
• 了解常见注解的含义

不用慌张，改造中可以边练边学习，遇到的问题不懂就搜索。

改造系统首页

这是搜索到的模板中提供登录、注册表单，样式过于单一。

• 这里可以给整体的蓝色背景换成一张好看的背景图片
• 将毕设的系统名称写在表单上
• 给登录框添加圆角和背景虚化

实现

将背景图片挂载到最外层的容器上，这里的login_container是我取的名字

.login_container {
  width: 100%;
  height: 100%;
  background: url(../assets/images/bg.jpeg);
  position: fixed;
  background-size: 100% 100%;
}

设置圆角和背景虚化，box-shadow边框的阴影，box-radius圆角、 backdrop-filter: blur(3px)背景虚化3个像素

.login_box {
  width: 500px;
  height: 320px;
  background-color: rgba(225, 225, 225, 0);
  border: 1px solid rgba(225, 225, 225, 0);
  box-shadow: 2px 3px 3px #aaaaaa;
  border-radius: 15px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.login_box {
  backdrop-filter: blur(3px);
  box-shadow: 0 0 10px #fff;
}

效果

改造数据展示页面

实现

在APP.vue的