springboot创建web项目

一、创建项目二、导入依赖pom.xml?xml version1.0 encodingUTF-8? project xmlnshttp://maven.apache.org/POM/4.0.0 xmlns:xsihttp://www.w3.org/2001/XMLSchema-instance xsi:schemaLocationhttp://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd modelVersion4.0.0/modelVersion parent groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-parent/artifactId version2.2.12.RELEASE/version /parent groupIdcom.cy/groupId artifactIdSpringboot-day01-re/artifactId version1.0-SNAPSHOT/version properties maven.compiler.source8/maven.compiler.source maven.compiler.target8/maven.compiler.target project.build.sourceEncodingUTF-8/project.build.sourceEncoding /properties dependencies !--②、引入依赖(起步依赖)-- dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-jdbc/artifactId /dependency !--mybatis提供依赖-- dependency groupIdorg.mybatis.spring.boot/groupId artifactIdmybatis-spring-boot-starter/artifactId version2.2.2/version /dependency dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId version5.1.49/version /dependency !--连接池-- dependency groupIdcom.alibaba/groupId artifactIddruid-spring-boot-starter/artifactId version1.2.16/version /dependency dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-test/artifactId /dependency dependency groupIdorg.projectlombok/groupId artifactIdlombok/artifactId /dependency /dependencies /project三、配置文件application.yml文件server: port: 8080 servlet: 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: info com.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 { Bean public 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 { Autowired private 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 (addnull){ return Result.builder().code(50000).message(新增失败).build(); } return Result.builder().code(20000).message(新增成功).build(); } RequestMapping(/listById) public Result getById(RequestParam(id) Integer id){ Employee employeeemployeeService.selectById(id); if (employeenull){ 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 updateemployeeService.updateByData(employee); if (updatenull){ return Result.builder().code(50000).message(修改失败).build(); } return Result.builder().code(20000).message(修改成功).build(); } DeleteMapping(/delete) public Result del(RequestParam Integer id){ Integer delemployeeService.delById(id); if (delnull){ return Result.builder().code(50000).message(删除失败).build(); } return Result.builder().code(20000).message(删除成功).build(); } RequestMapping(/batchDel) public Result batchDel(RequestBody ListInteger ids){ Integer dels employeeService.batchDel(ids); if (delsnull){ 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(ListInteger 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 { Resource private EmployeeMapper employeeMapper; Override public EmployeeDto PageByData(Integer pageNo, Integer pagesize,String username) { Integer totalemployeeMapper.sum(); int ceil (int) Math.ceil((total / (double) pagesize)); Integer cceil; Integer start; if (pageNoc){ start(pageNo-1)*pagesize; }else { start(ceil-1)*pagesize; } ListEmployee employeeListemployeeMapper.getPage(start,pagesize,username); EmployeeDto dto EmployeeDto.builder() .pageNo(pageNo) .pageSize(pagesize) .total(ceil) .dataList(employeeList) .build(); return dto; } Override public Integer addByData(Employee employee) { Integer addemployeeMapper.add(employee); return add; } Override public Integer updateByData(Employee employee) { Integer updateemployeeMapper.updateByData(employee); return update; } Override public Employee selectById(Integer id) { Employee employeeemployeeMapper.getById(id); return employee; } Override public Integer delById(Integer id) { Integer delemployeeMapper.del(id); return del; } Override public Integer batchDel(ListInteger 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 { ListEmployee 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(ListInteger ids); }mappers?xml version1.0 encodingUTF-8 ? !DOCTYPE mapper PUBLIC -//mybatis.org//DTD Mapper 3.0//EN http://mybatis.org/dtd/mybatis-3-mapper.dtd mapper namespacecom.cy.mapper.EmployeeMapper insert idadd insert into employee(username,name,password,email,age,admin,dept_id) values(#{username},#{name},#{password},#{email},#{age},#{admin},#{deptId}) /insert update idupdateByData update employee set if testusername!null username#{username}, /if if testname!null name#{name}, /if if testpassword!null password#{password}, /if if testemail!null email#{email}, /if if testage!null age#{age}, /if if testadmin!null admin#{admin}, /if if testdeptId!null dept_id#{deptId}, /if /set where id#{id} /update delete iddel delete from employee where id#{id} /delete delete idbatchDel delete from employee where id trim prefixin ( suffix) suffixOverrides, foreach collectionids itemitem separator, #{item} /foreach /trim /delete !--mapper namespace-- select idgetPage resultTypecom.cy.pojo.entity.Employee select * from employee where if testusername!null and username like concat(%,#{username},%) /if /where if teststart!null and pageSize!null limit #{start},#{pageSize} /if /select select idsum resultTypejava.lang.Integer select count(*) from employee /select select idgetById resultTypecom.cy.pojo.entity.Employee select * from employee where id#{id} /select /mapper还有一些简单的工具类EmployeeDtopackage 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 ListEmployee dataListnew 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 ListInteger 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 langen head meta charsetUTF-8 titleTitle/title !-- Bootstrap -- link relstylesheet href./css/bootstrap.css script src./js/vue.js/script script src./js/axios.min.js/script /head body div idapp table classtable form classform-inline label 产品名/概述/label input typetext v-modelusername placeholder请输入产品名/概述 button typesubmit clicksearch搜索/button button classfat-btn typebutton stylebackground-color: #269abc clickresBtn重置 /button /form div button classfat-btn typebutton stylebackground-color: #269abc clickasveBtn 新增 /button button classfat-btn typebutton stylebackground-color: tomato clickbatchDel 批量删除 /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 :keykey td input typecheckbox :valuevalue.id v-modelids /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 button typebutton stylebackground-color: tomato clickdelData(value.id) 删除 /button button classfat-btn typebutton stylebackground-color: darkcyan clickfindData(value.id) 编辑 /button /td /tr /tbody /table !--分页-- div stylepadding-right: 20px ul classpagination lia href#laquo;/a/li li v-forpage in totalPage :keypage a href# :class{active:pagepageNo} clickchange(page){{page}}/a/li lia href#raquo;/a/li /ul /div !--新增窗口-- div stylewidth: 50%;align-content: center v-ifnewBtn form div classform-group label 用户名/label input typetext classform-control v-modeladdem.username placeholder用户名 /div div classform-group label 用户/label input typetext classform-control v-modeladdem.name placeholder用户 /div div classform-group label 密码/label input typetext classform-control v-modeladdem.password placeholder密码 /div div classform-group label 邮件/label input typetext classform-control placeholder邮件 v-modeladdem.email /div div classform-group label 年龄/label input typetext classform-control placeholder年龄 v-modeladdem.age /div div classform-group label 管理员/label input typetext classform-control placeholder管理员 v-modeladdem.admin /div div classform-group label 所属部门/label input typetext classform-control placeholder所属部门 v-modeladdem.deptId /div button typesubmit classbtn btn-default clicksaveData确定/button button typesubmit classbtn btn-default clickcloseBtn取消/button /form /div !--编辑窗口-- div stylewidth: 50%;align-content: center v-ifupdateBtn form div classform-group label 用户名/label input typetext classform-control v-modelempol.username placeholder用户名 /div div classform-group label 用户/label input typetext classform-control v-modelempol.name placeholder用户 /div div classform-group label 密码/label input typetext classform-control v-modelempol.password placeholder密码 /div div classform-group label 邮件/label input typetext classform-control placeholder邮件 v-modelempol.email /div div classform-group label 年龄/label input typetext classform-control placeholder年龄 v-modelempol.age /div div classform-group label 管理员/label input typetext classform-control placeholder管理员 v-modelempol.admin /div div classform-group label 所属部门/label input typetext classform-control placeholder所属部门 v-modelempol.deptId /div button typesubmit classbtn btn-default clickupdateData确定/button button typesubmit classbtn btn-default clickcloseBtn取消/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.code20000){ this.dataListresp.data.data.dataList this.totalPageresp.data.data.total } }) }, change(page){ this.pageNopage this.getAll() } , /*新增*/ saveData(){ axios({ method: post, url: http://localhost:8080/suv/list/save, data: this.addem }).then(resp{ if (resp.data.code20000){ alert(resp.data.message) }else { alert(resp.data.message) } }) }, findData(id){ this.updateBtn true axios({ method:get, url:http://localhost:8080/suv/list/listById, params: { id:id } }).then(resp{ console.log(resp.data) if (resp.data.code20000){ this.empolresp.data.data } }) } , updateData() { axios({ method:put, url:http://localhost:8080/suv/list/update, data:this.empol }).then(resp{ if (resp.data.code20000){ alert(resp.data.message) this.updateBtnfalse this.getAll() } }) } , asveBtn(){ this.newBtntrue }, search(){ this.pageNo 1, this.getAll() } , resBtn(){ this.closeBtn() this.usernamenull this.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.code20000){ alert(resp.data.message) }else { alert(resp.data.message) } this.pageNo1 this.getAll() }) } }, /*批量删除*/ batchDel(){ axios({ method:post, url:http://localhost:8080/suv/list/batchDel, data:this.ids }).then(resp{ alert(resp.data.message) this.pageNo1 this.getAll() }) } }, created(){ this.getAll() } }) /script /body /html数据库数据设置效果展示