改造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的<template>标签中设置样式，可以实现页面背景颜色的渐变。这段代码也可以放在导航栏或者需要的区域。

<template>
  <div style="background: linear-gradient(0deg,#1deca4,#61b9dc);">
  </div>
</template>

效果

根据题目的要求，在导航栏上添加一个按钮，并展示对应的数据

这是模板提供的导航栏和展示信息，我们可以根据自己的功能更改

第一步——数据库建表

预先设计一张表，我们想要存储哪些信息，字段的名字、类型、大小、主键等

第二步——添加实体类

@RequestMapping("/detail")

@TableName是数据库中表的名字

 @TableId(type = IdType.AUTO)   配置自动增加

 @JsonFormat(pattern = "yyyy-MM-dd", timezone = "GMT+8") 处理日期格式的数据

@TableName("ElevatorDetail")//mybatis-plus
@Data
public class ElevatorDetail {
    @TableId(type = IdType.AUTO)
    private Integer id;
    private Integer num;
    private String maker;
    private String max;
    @JsonFormat(pattern = "yyyy-MM-dd", timezone = "GMT+8")
    private Date date;
    private String unit;
    private String location;
}

第三步——添加控制类

在src/main/java/com.wen/controller下新建一个Java文件，添加控制类，处理前端发送的请求

@RequestMapping("/detail")    value值需要与路由和页面的名称对应

@RestController
@RequestMapping("/detail")
public class ElevatorDetailController {
    @Resource
    ElevatorDetailMapper DetailMapper;

    @PostMapping
    public Result<?> save(@RequestBody ElevatorDetail detail) {
        DetailMapper.insert(detail);
        return Result.success();
    }

    @PutMapping
    public Result<?> update(@RequestBody ElevatorDetail detail) {
        DetailMapper.updateById(detail);
        return Result.success();
    }

    @DeleteMapping("/{id}")
    public Result<?> delete(@PathVariable Long id) {
        DetailMapper.deleteById(id);
        return Result.success();
    }

    @GetMapping
    public Result<?> findPage(@RequestParam(defaultValue = "1") Integer pageNum,
                              @RequestParam(defaultValue = "10") Integer pageSize,
                              @RequestParam(defaultValue = "") String search) {
        LambdaQueryWrapper<ElevatorDetail> wrapper = Wrappers.<ElevatorDetail>lambdaQuery();
        if (StrUtil.isNotBlank(search)) {
            wrapper.like(ElevatorDetail::getMaker, search);
        }
        Page<ElevatorDetail> DetailPage = DetailMapper.selectPage(new Page<>(pageNum, pageSize), wrapper);
        return Result.success(DetailPage);
    }
}

第四步——配置映射

在src/main/java/com.wen/controller下新建一个接口文件，继承了基本的映射类

BaseMapper< ? >  填写第二步中创建的实体类名

public interface ElevatorDetailMapper extends BaseMapper<ElevatorDetail> {

}

第五步——添加页面

在vue/src/views下新建一个vue文件

在<template>标签中写出要展示的数据，prop=" ? "  这里填写的名称与数据库字段名称一致，不想显示的字段可以不写

<el-table class="el-table"
              :data="tableData"
              border
              stripe>
      <el-table-column
          prop="num"
          label="电梯编号"
          sortable>
      </el-table-column>
      <el-table-column
          prop="maker"
          label="生产厂家">
      </el-table-column>
      <el-table-column
          prop="max"
          label="最大载人数">
      </el-table-column>
      <el-table-column
          prop="date"
          label="最新检测日期">
      </el-table-column>
      <el-table-column
          prop="unit"
          label="维保单位">
      </el-table-column>
      <el-table-column
          prop="location"
          label="电梯地址">
      </el-table-column>

    </el-table>

在<script>标签中，给这个vue设置一个名字，这里的名字需要和第三步控制类中填写的名字一致

export default {
  name: 'detail',

第六步——配置路由

在vue/src/router/index.js 添加第五步vue文件的路由信息，注意所有的名称保持一致

children: [
    {
        path: '/detail',
        name: 'Detail',
        component: ()=>import("@/views/ElevatorDetail")
      }
]

第七步——配置导航栏

在vue/src/components/Aside.vue中的<template>标签添加

<el-menu-item index="/detail">电梯登记信息 </el-menu-item>