springboot创建web项目

一、创建项目

二、导入依赖（pom.xml）

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.2.12.RELEASE</version></parent><groupId>com.cy</groupId><artifactId>Springboot-day01-re</artifactId><version>1.0-SNAPSHOT</version><properties><maven.compiler.source>8</maven.compiler.source><maven.compiler.target>8</maven.compiler.target><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding></properties><dependencies><!--②、引入依赖(起步依赖)--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-jdbc</artifactId></dependency><!--mybatis提供依赖--><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>2.2.2</version></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>5.1.49</version></dependency><!--连接池--><dependency><groupId>com.alibaba</groupId><artifactId>druid-spring-boot-starter</artifactId><version>1.2.16</version></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId></dependency></dependencies></project>

三、配置文件

application.yml文件

server:port: 8080servlet:context-path: /suv
#Spring配置
spring:#资源配置datasource:#数据源类型type: com.alibaba.druid.pool.DruidDataSource#地址url: jdbc:mysql://localhost:3306/rbac#用户名username: root#密码password: chenying#驱动名称driver-class-name: com.mysql.jdbc.Driver#持久层框架配置    
mybatis:#别名配置type-aliases-package: com.cy.pojo.entity#映射文件mapper-locations: classpath*:mappers/**/*mapper.xml# 配置日志
logging:level:root: infocom.cy: debug

四、XxxApplication内容

@SpringBootApplication
public class XxxApplication {public static void main(String[] args) {SpringApplication.run(XxxApplication.class,args);}
}

五、使用注解或config配置文件解决注解问题

package com.cy.config;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;@Configuration
public class CorsConfig {@Beanpublic CorsFilter corsFilter() {CorsConfiguration config = new CorsConfiguration();config.addAllowedOrigin("*");config.addAllowedMethod("*");config.addAllowedHeader("*");UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();source.registerCorsConfiguration("/**", config);return new CorsFilter(source);}
}

六、完成后端的增删查改操作

controller(控制器层)

package com.cy.controller;import com.cy.pojo.dto.EmployeeDto;import com.cy.pojo.entity.Employee;
import com.cy.pojo.vo.Result;
import com.cy.service.EmployeeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;import javax.annotation.Resource;
import java.util.List;@RestController
@RequestMapping("list")
//解决跨域问题
public class EmployeeController {@Autowiredprivate EmployeeService employeeService;@GetMapping("/{pageNo}/{pageSize}")public Result queryPage(@PathVariable("pageNo") Integer pageNo,@PathVariable("pageSize") Integer pagesize,@RequestParam(required = false) String  username ){EmployeeDto employees= employeeService.PageByData(pageNo,pagesize,username);Result result = Result.builder().code(20000).message("查询成功").data(employees).build();return result;}@PostMapping("/save")public Result save(@RequestBody Employee employee){Integer add= employeeService.addByData(employee);if (add==null){return Result.builder().code(50000).message("新增失败").build();}return  Result.builder().code(20000).message("新增成功").build();}@RequestMapping("/listById")public Result getById(@RequestParam("id") Integer id){Employee employee=employeeService.selectById(id);if (employee==null){return Result.builder().code(50000).message("查询失败").build();}return   Result.builder().code(20000).message("查询成功").data(employee).build();}@PutMapping("/update")public Result update(@RequestBody Employee employee){Integer update=employeeService.updateByData(employee);if (update==null){return Result.builder().code(50000).message("修改失败").build();}return  Result.builder().code(20000).message("修改成功").build();}@DeleteMapping("/delete")public Result del(@RequestParam Integer id){Integer del=employeeService.delById(id);if (del==null){return Result.builder().code(50000).message("删除失败").build();}return  Result.builder().code(20000).message("删除成功").build();}@RequestMapping("/batchDel")public Result batchDel(@RequestBody List<Integer> ids){Integer dels= employeeService.batchDel(ids);if (dels==null){return Result.builder().code(50000).message("批量删除失败").build();}return  Result.builder().code(20000).message("批量删除成功").build();}}

service（业务逻辑层）

package com.cy.service;import com.cy.pojo.dto.EmployeeDto;
import com.cy.pojo.entity.Employee;import java.util.List;public interface EmployeeService {EmployeeDto PageByData(Integer pageNo, Integer pagesize, String username);Integer addByData(Employee employee);Integer updateByData(Employee employee);Employee selectById(Integer id);Integer delById(Integer id);Integer batchDel(List<Integer> ids);
}

package com.cy.service.impl;import com.cy.mapper.EmployeeMapper;
import com.cy.pojo.dto.EmployeeDto;
import com.cy.pojo.entity.Employee;
import com.cy.service.EmployeeService;
import org.springframework.stereotype.Service;import javax.annotation.Resource;
import java.util.List;@Service
public class EmployeeServiceImpl implements EmployeeService {@Resourceprivate EmployeeMapper employeeMapper;@Overridepublic EmployeeDto PageByData(Integer pageNo, Integer pagesize,String username) {Integer total=employeeMapper.sum();int ceil =(int) Math.ceil((total / (double) pagesize));Integer c=ceil;Integer start;if (pageNo<c){start=(pageNo-1)*pagesize;}else {start=(ceil-1)*pagesize;}List<Employee> employeeList=employeeMapper.getPage(start,pagesize,username);EmployeeDto dto = EmployeeDto.builder().pageNo(pageNo).pageSize(pagesize).total(ceil).dataList(employeeList).build();return dto;}@Overridepublic Integer addByData(Employee employee) {Integer add=employeeMapper.add(employee);return add;}@Overridepublic Integer updateByData(Employee employee) {Integer update=employeeMapper.updateByData(employee);return update;}@Overridepublic Employee selectById(Integer id) {Employee employee=employeeMapper.getById(id);return employee;}@Overridepublic Integer delById(Integer id) {Integer del=employeeMapper.del(id);return del;}@Overridepublic Integer batchDel(List<Integer> ids) {return employeeMapper.batchDel(ids);}
}

mapper（数据访问层）

package com.cy.mapper;import com.cy.pojo.entity.Employee;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;import java.util.List;@Mapper
public interface EmployeeMapper {List<Employee> getPage(@Param("start") Integer start,@Param("pageSize") Integer pagesize,@Param("username") String username);Integer sum();Integer add(Employee employee);Integer updateByData(Employee employee);Employee getById(Integer id);Integer del(Integer id);Integer batchDel(List<Integer> ids);
}

mappers

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.cy.mapper.EmployeeMapper"><insert id="add">insert into employee(username,name,password,email,age,admin,dept_id)values(#{username},#{name},#{password},#{email},#{age},#{admin},#{deptId})</insert><update id="updateByData">update employee<set><if test="username!=null">username=#{username},</if><if test="name!=null">name=#{name},</if><if test="password!=null">password=#{password},</if><if test="email!=null">email=#{email},</if><if test="age!=null">age=#{age},</if><if test="admin!=null">admin=#{admin},</if><if test="deptId!=null">dept_id=#{deptId},</if></set>where id=#{id}</update><delete id="del">delete from employee where id=#{id}</delete><delete id="batchDel">delete from employeewhere id<trim prefix="in (" suffix=")" suffixOverrides=","><foreach collection="ids" item="item" separator=",">#{item}</foreach></trim></delete><!--<mapper namespace="">--><select id="getPage" resultType="com.cy.pojo.entity.Employee">select * from employee<where><if test="username!=null">and username like concat("%",#{username},"%")</if></where><if test="start!=null and pageSize!=null">limit #{start},#{pageSize}</if></select><select id="sum" resultType="java.lang.Integer">select count(*) from employee</select><select id="getById" resultType="com.cy.pojo.entity.Employee">select * from employeewhere id=#{id}</select>
</mapper>

还有一些简单的工具类

EmployeeDto

package com.cy.pojo.dto;import com.cy.pojo.entity.Employee;
import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;import java.util.ArrayList;
import java.util.List;/*** @Author chen* @Version 1.0* @Date 2024/12/24* @Description 返回前端的数据*/
@Data
@Builder
@AllArgsConstructor
@NoArgsConstructor
public class EmployeeDto {/***数据总数*/private Integer total;/***页面数*/private Integer pageNo;/***每页数据大小*/private Integer pageSize;/***数据集合*/private List<Employee> dataList=new ArrayList<>();
}

实体类

package com.cy.pojo.entity;import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;import java.util.ArrayList;
import java.util.List;@Data
@Builder
@NoArgsConstructor
@AllArgsConstructor
public class Employee {/***主键*/private Integer id;/***用户名*/private String username;/***名称*/private String name;/***密码*/private String password;/***邮箱*/private String email;/***年龄*/private Integer age;/***管理员*/private Integer admin;/***所属部门*/private Integer deptId;//角色id集//private List<Integer> roleIds = new ArrayList<>();
}

统一后端返回前端的格式

package com.cy.pojo.vo;import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;/*** @Author chen* @Version 1.0* @Date 2024/12/24* @Description 统一返回类型*/
@Data
@Builder
@NoArgsConstructor
@AllArgsConstructor
public class Result {/***状态码*/private Integer code;/***提示信息*/private String  message;/***返回数据*/private Object data;}

前端HTML页面效果显示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- Bootstrap --><link rel="stylesheet" href="./css/bootstrap.css" ><script src="./js/vue.js"></script><script src="./js/axios.min.js"></script>
</head>
<body>
<div id="app">
<table class="table"><form class="form-inline"><label >产品名/概述</label><input type="text" v-model="username" placeholder="请输入产品名/概述"><button type="submit" @click="search">搜索</button><button class="fat-btn"type="button" style="background-color: #269abc" @click="resBtn">重置</button></form><div><button class="fat-btn"type="button" style="background-color: #269abc" @click="asveBtn"> 新增</button><button class="fat-btn"type="button" style="background-color: tomato" @click="batchDel"> 批量删除</button></div><thead><tr><th>选择</th><th>用户名</th><th>用户</th><th>密码</th><th>邮件</th><th>年龄</th><th>管理员</th><th>操作</th></tr></thead><tbody><tr v-for="(value,key) in dataList" :key="key"><td><input type="checkbox" :value="value.id" v-model="ids"></td><td>{{value.username}}</td><td>{{value.name}}</td><td>{{value.password}}</td><td>{{value.email}}</td><td>{{value.age}}</td><td>{{value.admin}}</td><td><buttontype="button" style="background-color: tomato" @click="delData(value.id)"> 删除</button><button class="fat-btn"type="button" style="background-color: darkcyan" @click="findData(value.id)"> 编辑</button></td></tr></tbody>
</table><!--分页--><div style="padding-right: 20px"><ul class="pagination" ><li><a href="#">&laquo;</a></li><li v-for="page in totalPage" :key="page" ><a href="#" :class="{active:page==pageNo}" @click="change(page)">{{page}}</a></li><li><a href="#">&raquo;</a></li></ul></div>
<!--新增窗口--><div style="width: 50%;align-content: center" v-if="newBtn"><form><div class="form-group"><label >用户名</label><input type="text" class="form-control" v-model="addem.username"  placeholder="用户名"></div><div class="form-group"><label >用户</label><input type="text" class="form-control" v-model="addem.name"  placeholder="用户"></div><div class="form-group"><label >密码</label><input type="text" class="form-control" v-model="addem.password" placeholder="密码"></div><div class="form-group"><label >邮件</label><input type="text" class="form-control" placeholder="邮件" v-model="addem.email"></div><div class="form-group"><label >年龄</label><input type="text" class="form-control" placeholder="年龄" v-model="addem.age"></div><div class="form-group"><label >管理员</label><input type="text" class="form-control" placeholder="管理员" v-model="addem.admin"></div><div class="form-group"><label >所属部门</label><input type="text" class="form-control" placeholder="所属部门" v-model="addem.deptId"></div><button type="submit" class="btn btn-default" @click="saveData">确定</button><button type="submit" class="btn btn-default" @click="closeBtn">取消</button></form></div>
<!--编辑窗口--><div  style="width: 50%;align-content: center" v-if="updateBtn"><form><div class="form-group"><label >用户名</label><input type="text" class="form-control" v-model="empol.username"  placeholder="用户名"></div><div class="form-group"><label >用户</label><input type="text" class="form-control" v-model="empol.name"  placeholder="用户"></div><div class="form-group"><label >密码</label><input type="text" class="form-control" v-model="empol.password" placeholder="密码"></div><div class="form-group"><label >邮件</label><input type="text" class="form-control" placeholder="邮件" v-model="empol.email"></div><div class="form-group"><label >年龄</label><input type="text" class="form-control" placeholder="年龄" v-model="empol.age"></div><div class="form-group"><label >管理员</label><input type="text" class="form-control" placeholder="管理员" v-model="empol.admin"></div><div class="form-group"><label >所属部门</label><input type="text" class="form-control" placeholder="所属部门" v-model="empol.deptId"></div><button type="submit" class="btn btn-default" @click="updateData">确定</button><button type="submit" class="btn btn-default" @click="closeBtn">取消</button></form></div>
</div><script src="./js/bootstrap.js"></script>
<script>new Vue({el:'#app',data:{pageNo:1,pageSize:3,totalPage:1,dataList:[],ids:[],username:null,form:{username:null,name:null},addem:{},empol:{},newBtn:false,updateBtn:false},methods:{getAll(){console.log("username：",this.username)axios({method:'get',url:`http://localhost:8080/suv/list/${this.pageNo}/${this.pageSize}`,params:{username:this.username}}).then(resp=>{console.log("分页查询的数据：",resp.data)if (resp.data.code===20000){this.dataList=resp.data.data.dataListthis.totalPage=resp.data.data.total}})},change(page){this.pageNo=pagethis.getAll()},/*新增*/saveData(){axios({method: 'post',url: 'http://localhost:8080/suv/list/save',data: this.addem}).then(resp=>{if (resp.data.code===20000){alert(resp.data.message)}else {alert(resp.data.message)}})},findData(id){this.updateBtn = trueaxios({method:'get',url:'http://localhost:8080/suv/list/listById',params: {id:id}}).then(resp=>{console.log(resp.data)if (resp.data.code===20000){this.empol=resp.data.data}})},updateData() {axios({method:'put',url:'http://localhost:8080/suv/list/update',data:this.empol}).then(resp=>{if (resp.data.code===20000){alert(resp.data.message)this.updateBtn=falsethis.getAll()}})},asveBtn(){this.newBtn=true},search(){this.pageNo = 1,this.getAll()},resBtn(){this.closeBtn()this.username=nullthis.getAll()},closeBtn(){this.newBtn = false,this.updateBtn = false},/*删除*/delData(id){if (confirm("确定删除吗")){axios({method:'delete',url:'http://localhost:8080/suv/list/delete',params:{id:id}}).then(resp=>{if (resp.data.code===20000){alert(resp.data.message)}else {alert(resp.data.message)}this.pageNo=1this.getAll()})}},/*批量删除*/batchDel(){axios({method:'post',url:'http://localhost:8080/suv/list/batchDel',data:this.ids}).then(resp=>{alert(resp.data.message)this.pageNo=1this.getAll()})}},created(){this.getAll()}})</script>
</body>
</html>

数据库数据设置：