基于spring cloud + nacos + gateway + ssm+的学生管理系统
- 前端：vue + spa + axios
- 后端：spring cloud + nacos + gateway + ssm+
1.环境搭建
1.0 数据库
#学生数据库
CREATE DATABASE nacos_ssm_student;
USE nacos_ssm_student;
CREATE TABLE tb_city(
c_id VARCHAR(32) PRIMARY KEY COMMENT '城市ID',
city_name VARCHAR(20) COMMENT '城市名称' ,
parent_id VARCHAR(32) COMMENT '父ID'
);
INSERT INTO tb_city(c_id,city_name,parent_id) VALUES('320000','江苏省','0');
INSERT INTO tb_city(c_id,city_name,parent_id) VALUES('140000','山西省','0');
INSERT INTO tb_city(c_id,city_name,parent_id) VALUES('130000','河北省','0');
INSERT INTO tb_city(c_id,city_name,parent_id) VALUES('320100','南京市','320000');
INSERT INTO tb_city(c_id,city_name,parent_id) VALUES('320102','玄武区','320100');
INSERT INTO tb_city(c_id,city_name,parent_id) VALUES('320103','白下区','320100');
INSERT INTO tb_city(c_id,city_name,parent_id) VALUES('321300','宿迁市','320000');
INSERT INTO tb_city(c_id,city_name,parent_id) VALUES('321322','沭阳县','321300');
INSERT INTO tb_city(c_id,city_name,parent_id) VALUES('321323','泗阳县','321300');
INSERT INTO tb_city(c_id,city_name,parent_id) VALUES('140100','太原市','140000');
INSERT INTO tb_city(c_id,city_name,parent_id) VALUES('140106','迎泽区','140100');
INSERT INTO tb_city(c_id,city_name,parent_id) VALUES('140108','尖草坪区','140100');
INSERT INTO tb_city(c_id,city_name,parent_id) VALUES('140800','运城市','140000');
INSERT INTO tb_city(c_id,city_name,parent_id) VALUES('140823','闻喜县','140800');
INSERT INTO tb_city(c_id,city_name,parent_id) VALUES('140828','夏 县','140800');
INSERT INTO tb_city(c_id,city_name,parent_id) VALUES('130100','石家庄市','130000');
INSERT INTO tb_city(c_id,city_name,parent_id) VALUES('130127','高邑县','130100');
INSERT INTO tb_city(c_id,city_name,parent_id) VALUES('130185','鹿泉市','130100');
INSERT INTO tb_city(c_id,city_name,parent_id) VALUES('131000','廊坊市','130000');
INSERT INTO tb_city(c_id,city_name,parent_id) VALUES('131003','广阳区','131000');
INSERT INTO tb_city(c_id,city_name,parent_id) VALUES('131022','固安县','131000');
CREATE TABLE `tb_student` (
`s_id` INT NOT NULL PRIMARY KEY AUTO_INCREMENT COMMENT '学生ID',
`sname` VARCHAR(50) DEFAULT NULL COMMENT '姓名',
`age` INT(11) DEFAULT NULL COMMENT '年龄',
`birthday` DATETIME DEFAULT NULL COMMENT '生日',
`gender` CHAR(1) DEFAULT NULL COMMENT '性别',
`c_id` INT DEFAULT NULL,
`city_ids` VARCHAR(32) DEFAULT NULL COMMENT '城市：320000,321300,321322'
);
INSERT INTO `tb_student`(`s_id`,`sname`,`age`,`birthday`,`gender`,`c_id`,`city_ids`) VALUES (1,'赵三33',21,'2001-01-17 00:00:00','1',1,'320000,321300,321322');
INSERT INTO `tb_student`(`s_id`,`sname`,`age`,`birthday`,`gender`,`c_id`,`city_ids`) VALUES (2,'钱四444',1900,'2001-05-16 00:00:00','1',2,'320000,321300,321322');
INSERT INTO `tb_student`(`s_id`,`sname`,`age`,`birthday`,`gender`,`c_id`,`city_ids`) VALUES (3,'孙五56',189,'2022-03-15 00:00:00','0',1,'320000,321300,321322');
INSERT INTO `tb_student`(`s_id`,`sname`,`age`,`birthday`,`gender`,`c_id`,`city_ids`) VALUES (4,'张三',20,'2020-12-21 00:00:00','0',2,'320000,321300,321322');
INSERT INTO `tb_student`(`s_id`,`sname`,`age`,`birthday`,`gender`,`c_id`,`city_ids`) VALUES (5,'xxx',18,'2020-12-21 00:00:00','0',2,'140000,140800,140823');
INSERT INTO `tb_student`(`s_id`,`sname`,`age`,`birthday`,`gender`,`c_id`,`city_ids`) VALUES (6,'123',18,'2020-11-01 00:00:00','0',3,'130000,130100,130127');
INSERT INTO `tb_student`(`s_id`,`sname`,`age`,`birthday`,`gender`,`c_id`,`city_ids`) VALUES (7,'xx',18,'2020-11-02 00:00:00','0',1,'130000,131000,131003');
1.1 后端环境
1.1.1 父项目
-
坐标
<parent> <groupId>org.springframework.bootgroupId> <artifactId>spring-boot-starter-parentartifactId> <version>2.2.5.RELEASEversion> parent> <properties> <project.build.sourceEncoding>UTF-8project.build.sourceEncoding> <java.version>1.8java.version> <spring-cloud-release.version>Hoxton.SR3spring-cloud-release.version> <nacos.version>1.1.0nacos.version> <alibaba.cloud.version>2.2.1.RELEASEalibaba.cloud.version> <mybatis.starter.version>1.3.2mybatis.starter.version> <mapper.starter.version>2.0.2mapper.starter.version> <mysql.version>5.1.32mysql.version> <pageHelper.starter.version>1.2.5pageHelper.starter.version> <durid.starter.version>1.1.10durid.starter.version> <swagger.version>2.7.0swagger.version> <jwt.jjwt.version>0.9.0jwt.jjwt.version> <jwt.joda.version>2.9.7jwt.joda.version> <beanutils.version>1.9.3beanutils.version> <student.version>1.0-SNAPSHOTstudent.version> properties> <dependencyManagement> <dependencies> <dependency> <groupId>org.springframework.cloudgroupId> <artifactId>spring-cloud-dependenciesartifactId> <version>${spring-cloud-release.version}version> <type>pomtype> <scope>importscope> dependency> <dependency> <groupId>com.alibaba.nacosgroupId> <artifactId>nacos-clientartifactId> <version>${nacos.version}version> dependency> <dependency> <groupId>com.alibaba.cloudgroupId> <artifactId>spring-cloud-starter-alibaba-nacos-discoveryartifactId> <version>${alibaba.cloud.version}version> dependency> <dependency> <groupId>com.alibaba.cloudgroupId> <artifactId>spring-cloud-starter-alibaba-nacos-configartifactId> <version>${alibaba.cloud.version}version> dependency> <dependency> <groupId>com.alibaba.cloudgroupId> <artifactId>spring-cloud-starter-alibaba-sentinelartifactId> <version>${alibaba.cloud.version}version> dependency> <dependency> <groupId>com.baomidougroupId> <artifactId>mybatis-plus-boot-starterartifactId> <version>3.4.0version> dependency> <dependency> <groupId>com.baomidougroupId> <artifactId>mybatis-plus-annotationartifactId> <version>3.4.0version> dependency> <dependency> <groupId>mysqlgroupId> <artifactId>mysql-connector-javaartifactId> <version>${mysql.version}version> dependency> <dependency> <groupId>com.alibabagroupId> <artifactId>druid-spring-boot-starterartifactId> <version>${durid.starter.version}version> dependency> <dependency> <groupId>io.springfoxgroupId> <artifactId>springfox-swagger2artifactId> <version>${swagger.version}version> dependency> <dependency> <groupId>io.springfoxgroupId> <artifactId>springfox-swagger-uiartifactId> <version>${swagger.version}version> dependency> <dependency> <groupId>commons-beanutilsgroupId> <artifactId>commons-beanutilsartifactId> <version>${beanutils.version}version> dependency> <dependency> <groupId>io.jsonwebtokengroupId> <artifactId>jjwtartifactId> <version>${jwt.jjwt.version}version> dependency> <dependency> <groupId>joda-timegroupId> <artifactId>joda-timeartifactId> <version>${jwt.joda.version}version> dependency> <dependency> <groupId>com.czxygroupId> <artifactId>nacos-ssm-fx-domain-bg12artifactId> <version>${student.version}version> dependency> dependencies> dependencyManagement>
1.1.2 domain项目
-
坐标
<dependencies> <dependency> <groupId>org.projectlombokgroupId> <artifactId>lombokartifactId> dependency> <dependency> <groupId>org.springframework.bootgroupId> <artifactId>spring-boot-starter-jsonartifactId> dependency> <dependency> <groupId>com.baomidougroupId> <artifactId>mybatis-plus-annotationartifactId> dependency> dependencies> -
JavaBean
package com.czxy.domain; import com.baomidou.mybatisplus.annotation.TableField; import com.baomidou.mybatisplus.annotation.TableId; import com.baomidou.mybatisplus.annotation.TableName; import com.fasterxml.jackson.annotation.JsonFormat; import lombok.Data; import java.util.Date; @TableName("tb_student") @Data public class Student { @TableId("s_id") private Integer sid; @TableField("sname") private String sname; @TableField("age") private Integer age; @TableField("birthday") @JsonFormat(pattern = "yyyy-MM-dd", timezone = "GMT+8") private Date birthday; @TableField("gender") private String gender; @TableField("c_id") private Integer cid; @TableField("city_ids") private String cityIds; } /* CREATE TABLE `tb_student` ( `s_id` INT NOT NULL PRIMARY KEY AUTO_INCREMENT COMMENT '学生ID', `sname` VARCHAR(50) DEFAULT NULL COMMENT '姓名', `age` INT(11) DEFAULT NULL COMMENT '年龄', `birthday` DATETIME DEFAULT NULL COMMENT '生日', `gender` CHAR(1) DEFAULT NULL COMMENT '性别', `c_id` INT DEFAULT NULL, `city_ids` VARCHAR(32) DEFAULT NULL COMMENT '城市：320000,321300,321322' ); */ -
拷贝：BaseResult
package com.czxy.vo; import lombok.Getter; import java.util.HashMap; import java.util.Map; @Getter public class BaseResult<T> { //成功状态码 public static final int OK = 20000; //失败状态码 public static final int ERROR = 0; //返回码 private Integer code; //返回消息 private String message; //存放数据 private T data; //其他数据 private Map<String,Object> other = new HashMap<>(); public BaseResult() { } public BaseResult(Integer code, String message) { this.code = code; this.message = message; } public BaseResult(Integer code, String message, T data) { this.code = code; this.message = message; this.data = data; } /** * 快捷成功BaseResult对象 * @param message * @return */ public static BaseResult ok(String message){ return new BaseResult(BaseResult.OK , message); } public static BaseResult ok(String message, Object data){ return new BaseResult(BaseResult.OK , message, data ); } /** * 快捷失败BaseResult对象 * @param message * @return */ public static BaseResult error(String message){ return new BaseResult(BaseResult.ERROR , message); } /** * 自定义数据区域 * @param key * @param msg * @return */ public BaseResult append(String key , Object msg){ other.put(key , msg); return this; } // public Integer getCode() { // return code; // } // // public String getMessage() { // return message; // } // // public T getData() { // return data; // } // // public Map
1.1.3 网关gateway
-
坐标
<dependencies> <dependency> <groupId>org.springframework.cloudgroupId> <artifactId>spring-cloud-starter-gatewayartifactId> dependency> <dependency> <groupId>com.alibaba.cloudgroupId> <artifactId>spring-cloud-starter-alibaba-nacos-discoveryartifactId> dependency> <dependency> <groupId>commons-beanutilsgroupId> <artifactId>commons-beanutilsartifactId> dependency> <dependency> <groupId>io.jsonwebtokengroupId> <artifactId>jjwtartifactId> dependency> <dependency> <groupId>joda-timegroupId> <artifactId>joda-timeartifactId> dependency> dependencies> -
yml配置文件：application.yml
#端口号 server: port: 10010 spring: application: name: student-gateway cloud: nacos: discovery: server-addr: 127.0.0.1:8848 #nacos服务地址 gateway: discovery: locator: enabled: true #开启服务注册和发现的功能，自动创建router以服务名开头的请求路径转发到对应的服务 lowerCaseServiceId: true #将请求路径上的服务名配置为小写 -
启动类
package com.czxy; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cloud.client.discovery.EnableDiscoveryClient; @SpringBootApplication @EnableDiscoveryClient //服务发现 public class GatewayApplication { public static void main(String[] args) { SpringApplication.run(GatewayApplication.class,args); } } -
跨域配置类：
config/GlobalGatewayCorsConfig.javapackage com.czxy.config; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.http.HttpHeaders; import org.springframework.http.HttpMethod; import org.springframework.http.HttpStatus; import org.springframework.http.server.reactive.ServerHttpRequest; import org.springframework.http.server.reactive.ServerHttpResponse; import org.springframework.web.cors.reactive.CorsUtils; import org.springframework.web.server.ServerWebExchange; import org.springframework.web.server.WebFilter; import org.springframework.web.server.WebFilterChain; import reactor.core.publisher.Mono; @Configuration public class GlobalGatewayCorsConfig { @Bean public WebFilter corsFilter2() { return (ServerWebExchange ctx, WebFilterChain chain) -> { ServerHttpRequest request = ctx.getRequest(); if (CorsUtils.isCorsRequest(request)) { HttpHeaders requestHeaders = request.getHeaders(); ServerHttpResponse response = ctx.getResponse(); HttpMethod requestMethod = requestHeaders.getAccessControlRequestMethod(); HttpHeaders headers = response.getHeaders(); headers.add(HttpHeaders.ACCESS_CONTROL_ALLOW_ORIGIN, requestHeaders.getOrigin()); headers.addAll(HttpHeaders.ACCESS_CONTROL_ALLOW_HEADERS, requestHeaders.getAccessControlRequestHeaders()); if (requestMethod != null) { headers.add(HttpHeaders.ACCESS_CONTROL_ALLOW_METHODS, requestMethod.name()); } headers.add(HttpHeaders.ACCESS_CONTROL_ALLOW_CREDENTIALS, "true"); headers.add(HttpHeaders.ACCESS_CONTROL_EXPOSE_HEADERS, "*"); if (request.getMethod() == HttpMethod.OPTIONS) { response.setStatusCode(HttpStatus.OK); return Mono.empty(); } } return chain.filter(ctx); }; } }
1.1.4 学生服务
-
坐标
<dependencies> <dependency> <groupId>org.springframework.bootgroupId> <artifactId>spring-boot-starter-webartifactId> dependency> <dependency> <groupId>com.alibaba.nacosgroupId> <artifactId>nacos-clientartifactId> dependency> <dependency> <groupId>com.alibaba.cloudgroupId> <artifactId>spring-cloud-starter-alibaba-nacos-discoveryartifactId> dependency> <dependency> <groupId>com.baomidougroupId> <artifactId>mybatis-plus-boot-starterartifactId> dependency> <dependency> <groupId>mysqlgroupId> <artifactId>mysql-connector-javaartifactId> dependency> <dependency> <groupId>com.alibabagroupId> <artifactId>druid-spring-boot-starterartifactId> dependency> <dependency> <groupId>io.springfoxgroupId> <artifactId>springfox-swagger2artifactId> dependency> <dependency> <groupId>io.springfoxgroupId> <artifactId>springfox-swagger-uiartifactId> dependency> <dependency> <groupId>org.springframework.cloudgroupId> <artifactId>spring-cloud-starter-openfeignartifactId> dependency> <dependency> <groupId>com.czxygroupId> <artifactId>nacos-ssm-fx-domain-bg12artifactId> dependency> dependencies> -
yml配置文件
#端口号 server: port: 9001 spring: application: name: student-plus-service #服务名 datasource: driverClassName: com.mysql.jdbc.Driver url: jdbc:mysql://127.0.0.1:3306/nacos_ssm_student?useUnicode=true&characterEncoding=utf8 username: root password: 1234 druid: #druid 连接池配置 initial-size: 1 #初始化连接池大小 min-idle: 1 #最小连接数 max-active: 20 #最大连接数 test-on-borrow: true #获取连接时候验证，会影响性能 cloud: nacos: discovery: server-addr: 127.0.0.1:8848 #nacos服务地址 sentinel: transport: dashboard: 127.0.0.1:8080 -
启动类
package com.czxy; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cloud.client.discovery.EnableDiscoveryClient; @SpringBootApplication @EnableDiscoveryClient public class StudentServiceApplication { public static void main(String[] args) { SpringApplication.run(StudentServiceApplication.class,args); } } -
配置类：
config/Swagger2ConfigurationV3.javapackage com.czxy.config; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import springfox.documentation.builders.ApiInfoBuilder; import springfox.documentation.builders.PathSelectors; import springfox.documentation.builders.RequestHandlerSelectors; import springfox.documentation.service.*; import springfox.documentation.spi.DocumentationType; import springfox.documentation.spi.service.contexts.SecurityContext; import springfox.documentation.spring.web.plugins.Docket; import springfox.documentation.swagger2.annotations.EnableSwagger2; import java.util.ArrayList; import java.util.List; /** * Swagger2 配置类， * 访问路径：swagger-ui.html * 自动注册： * 位置：resources/META-INF/spring.factories * 内容： * org.springframework.boot.autoconfigure.EnableAutoConfiguration=\ * com.czxy.config.Swagger2Configuration */ @Configuration @EnableSwagger2 public class Swagger2ConfigurationV3 { @Bean public Docket createRestApi() { // 1 确定文档Swagger版本 Docket docket = new Docket(DocumentationType.SWAGGER_2); // 2 设置 api基本信息 docket.apiInfo(apiInfo()); // 3 设置自定义加载路径 docket = docket.select() .apis(RequestHandlerSelectors.basePackage("com.czxy")) .paths(PathSelectors.any()) .build(); //4 设置权限 docket.securitySchemes(securitySchemes()); docket.securityContexts(securityContexts()); return docket; } private ApiInfo apiInfo() { return new ApiInfoBuilder() .title("API") .description("基于swagger接口文档") .contact(new Contact("梁桐","http://www.javaliang.com","[email protected]")) .version("1.0") .build(); } private List<ApiKey> securitySchemes() { List<ApiKey> list = new ArrayList<>(); // name 为参数名 keyname是页面传值显示的 keyname， name在swagger鉴权中使用 list.add(new ApiKey("Authorization", "Authorization", "header")); return list; } private List<SecurityContext> securityContexts() { List<SecurityContext> list = new ArrayList<>(); list.add(SecurityContext.builder() .securityReferences(defaultAuth()) .forPaths(PathSelectors.regex("^(?!auth).*$")) .build()); return list; } private List<SecurityReference> defaultAuth() { AuthorizationScope authorizationScope = new AuthorizationScope("global", "accessEverything"); AuthorizationScope[] authorizationScopes = new AuthorizationScope[1]; authorizationScopes[0] = authorizationScope; List<SecurityReference> list = new ArrayList(); list.add(new SecurityReference("Authorization", authorizationScopes)); return list; } }
1.2 前端环境
1.2.1 创建项目：
vue create nacos-fx-spa-bg12
1.2.2 整合axios
-
下载axios
cnpm install axios --save -
抽取工具 request.js
npm i element-ui --savesrc/utils/request.jsimport axios from 'axios' import { MessageBox, Message } from 'element-ui' // 方式1：设置基本路径 // axios.defaults.baseURL='http://localhost:10010/api' // 方式2：create an axios instance，并设置基本路径 const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url // withCredentials: true, // send cookies when cross-domain requests timeout: 5000 // request timeout }) // request interceptor service.interceptors.request.use( config => { // 请求头中追加token let token = localStorage.getItem('token') if (token) { config.headers.Authorization = token } return config }, error => { // do something with request error console.log(error) // for debug return Promise.reject(error) } ) // response interceptor service.interceptors.response.use( response => { const res = response.data // if the custom code is not 20000, it is judged as an error. if (res.code !== 20000) { Message({ message: res.message || 'Error', type: 'error', duration: 5 * 1000 }) // ajax异常提示信息 (路径信息，数据) console.info(response.config, response.data ) return Promise.reject(new Error(res.message || 'Error')) } else { return res } }, error => { console.log('err' + error) // for debug if(error.response.status == 401) { MessageBox.confirm(error.response.data, '重新登录确认框', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => { // 删除token localStorage.removeItem('token') location.reload() }) } else { Message({ message: error.message, type: 'error', duration: 5 * 1000 }) } return Promise.reject(error) } ) export default service -
抽取api：
-
将ajax抽取到一个student.js文件中，student.js调用request.js（使用增强后的axios）
// 导入工具 request.js import axios from '@/utils/request.js' // 编写功能方法 export function selectAll() { return axios.get('/student-plus-service/student') } -
request.js ajax访问路径的前缀baseURL，抽取到配置文件中
.env.development
-
~~~
# just a flag
ENV = 'development'
# base api
VUE_APP_BASE_API = 'http://localhost:10010/'
~~~
2. 学生管理
2.1 查询所有的学生
2.1.1 后端
-
步骤：
- 步骤1：编写mapper，通用mapper
- 步骤2：编写service，通用service 接口 + 实现类
- 步骤3：编写controller
-
步骤1：编写mapper，通用mapper
package com.czxy.mapper; import com.baomidou.mybatisplus.core.mapper.BaseMapper; import com.czxy.domain.Student; import org.apache.ibatis.annotations.Mapper; @Mapper public interface StudentMapper extends BaseMapper<Student> { } -
步骤2：编写service，通用service 接口 + 实现类
-
接口
package com.czxy.service; import com.baomidou.mybatisplus.extension.service.IService; import com.czxy.domain.Student; public interface StudentService extends IService<Student> { } -
实现类
package com.czxy.service.impl; import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl; import com.czxy.domain.Student; import com.czxy.mapper.StudentMapper; import com.czxy.service.StudentService; import org.springframework.stereotype.Service; import org.springframework.transaction.annotation.Transactional; @Service @Transactional public class StudentServiceImpl extends ServiceImpl<StudentMapper, Student> implements StudentService { }
-
-
步骤3：编写controller, GET请求 + BaseResult
package com.czxy.controller; import com.czxy.domain.Student; import com.czxy.service.StudentService; import com.czxy.vo.BaseResult; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import javax.annotation.Resource; import java.util.List; @RestController @RequestMapping("/student") public class StudentController { @Resource private StudentService studentService; @GetMapping public BaseResult selectAll() { // 1.请求数据 // 2 查询 List<Student> list = studentService.list(); // 3 响应结果 return BaseResult.ok("查询成功", list); /* BaesResult baseResult = new BaseResult(); baseResult.setCode(20000); //自定义编码 baseResult.setMessage("查询成功"); //提示信息 baseResult.setData( list ); //结果数据 */ } }
2.1.2 前端
1）访问页面
-
步骤1：修改App.vue页面，确定访问路径
-
步骤2：修改路由
src/router/index.js编写访问路径import Home from '../views/Home.vue' const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/studentList', name: '学生列表', component: () => import('../views/StudentList.vue') } ] -
步骤3：创建StudentList.vue页面
学生列表页面
2）显示查询结果
- 步骤：
- 步骤1：导入api，获得查询所有函数
- 步骤2：编写查询所有学生函数，调用导入api函数，完成ajax操作，查询结果保存studentList
- 步骤3：页面加载成功后，查询
- 步骤4：遍历展示
编号
姓名
年龄
生日
性别
班级
操作
{{student.sid}}
{{student.sname}}
{{student.age}}
{{student.birthday}}
{{student.gender == 1 ? '男' : '女'}}
{{student.cid}}
修改
删除
2.2 条件查询 + 分页
2.2.1 后端步骤
-
确定访问路径
http://localhost:10010/student-plus-service/student/condition/{size}/{current} -
步骤1：准备条件封装StudentVo
-
步骤2：编写controller，获得分页参数+条件，返回 Page进行结果封装
-
步骤3：编写service
- 1）查询条件
- 2）分页
- 3）查询
- 4）关联
- 5）处理/返回结果
-
步骤4：拷贝MyBatisPlus分页配置类
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pEssSDxP-1645576553138)(assets/image-20220222150608792.png)]
2.2.2 后端实现
-
步骤1：准备条件封装StudentVo
package com.czxy.vo; import lombok.Data; @Data public class StudentVo { private String cid; private String sname; private String startAge; private String endAge; } -
步骤2：编写controller，获得分页参数+条件，返回 Page进行结果封装
/** * * @param studentVo 条件 * @param size 每页个数 * @param current 第几页 * @return */ @PostMapping("/condtion/{size}/{current}") public BaseResult condition( @RequestBody StudentVo studentVo, @PathVariable("size") Integer size, @PathVariable("current") Integer current ){ // 2 查询 Page<Student> page = studentService.condition(studentVo,size,current); // 3 返回 return BaseResult.ok("查询成功", page); } -
步骤3：编写service
-
接口
package com.czxy.service; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import com.baomidou.mybatisplus.extension.service.IService; import com.czxy.domain.Student; import com.czxy.vo.StudentVo; public interface StudentService extends IService<Student> { /** * 分页 + 条件 查询 * @param studentVo * @param size * @param current * @return */ Page<Student> condition(StudentVo studentVo, Integer size, Integer current); } -
实现类
@Override public Page<Student> condition(StudentVo studentVo, Integer size, Integer current) { //1 条件 QueryWrapper<Student> queryWrapper = new QueryWrapper<>(); // 1.1 班级 queryWrapper.eq(StringUtils.isNotBlank(studentVo.getCid()), "c_id", studentVo.getCid()); // 1.2 姓名 - like %张% queryWrapper.like(StringUtils.isNotBlank(studentVo.getSname()),"sname", studentVo.getSname()); // 1.3 开始年龄 queryWrapper.ge(StringUtils.isNotBlank(studentVo.getStartAge()),"age", studentVo.getStartAge()); // 1.4 结束年龄 queryWrapper.le(StringUtils.isNotBlank(studentVo.getEndAge()),"age", studentVo.getEndAge()); // 2 分页 Page page = new Page(current, size); // 3 查询 this.baseMapper.selectPage(page, queryWrapper); //TODO 4 关联--查询班级 // 5 返回 return page; }
-
-
步骤4：拷贝MyBatisPlus分页配置类
package com.czxy.config; import com.baomidou.mybatisplus.annotation.DbType; import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor; import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; @Configuration public class MybatisPlusConfig { /** * 配置插件 * @return */ @Bean public MybatisPlusInterceptor mybatisPlusInterceptor(){ MybatisPlusInterceptor mybatisPlusInterceptor = new MybatisPlusInterceptor(); // 分页插件 mybatisPlusInterceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); return mybatisPlusInterceptor; } }
2.2.3 前端步骤
- 步骤1：编写页面 StudentCondition.vue + 路由
- 步骤2：编写ajax student.js 写 condition函数
- 步骤3：修改StudentCondition.vue
- 基本查询：page、studentVo
- 条件查询
- 分页查询
2.2.4 前端实现
-
步骤1：编写页面 StudentCondition.vue + 路由
-
步骤2：编写ajax student.js 写 condition函数
// 查询所有学生+条件+分页
export function condition(page,studentVo) {
var url = `/student-plus-service/student/condtion/${page.size}/${page.current}`
return axios.post(url, studentVo)
}
-
步骤3：修改StudentCondition.vue
-
基本查询：page、studentVo
编号 姓名 年龄 生日 性别 班级 操作 {{student.sid}} {{student.sname}} {{student.age}} {{student.birthday}} {{student.gender == 1 ? '男' : '女'}} {{student.cid}} 修改 删除 -
条件查询：（使用模拟数据显示班级列表）
classesList: [ //班级的模拟数据 {cid:1, cname: 'Java56'}, {cid:2, cname: 'Java78'}, {cid:3, cname: 'Java12'}, {cid:4, cname: 'Java34'}, ]班级 姓名： 年龄： --班级 姓名： 年龄： --编号 姓名 年龄 生日 性别 班级 操作 {{student.sid}} {{student.sname}} {{student.age}} {{student.birthday}} {{student.gender == 1 ? '男' : '女'}} {{student.cid}} 修改 删除 -
分页查询
每页 条， {{num}}， 跳转到第 页
-
2.2.5 前端完整代码
班级
姓名：
年龄： --
编号
姓名
年龄
生日
性别
班级
操作
{{student.sid}}
{{student.sname}}
{{student.age}}
{{student.birthday}}
{{student.gender == 1 ? '男' : '女'}}
{{student.cid}}
修改
删除
每页
条，
{{num}}，
跳转到第
页
2.3 添加或修改
2.3.1 后端实现
@PostMapping
public BaseResult saveOrUpdate(@RequestBody Student student) {
try {
// 保存或更新:如果没有id进行添加操作；如果有id进行更新操作
boolean result = studentService.saveOrUpdate(student);
//处理
if(result) {
return BaseResult.ok("编辑成功");
}
return BaseResult.error("编辑失败");
} catch (Exception e) {
e.printStackTrace();
return BaseResult.error(e.getMessage());
}
}
- 数据库的id为自动增强，如果JavaBean没有设置，会出现
类型不匹配异常。
3. 班级管理
3.1 查询所有班级
3.1.1 后端
-
步骤：
- 步骤1：编写JavaBean，Classes
- 步骤2：编写Mapper，ClassesMapper，实现通用mapper
- 步骤3：编写service，接口+实现类+通用
- 步骤4：编写controller
-
步骤1：编写JavaBean，Classes
package com.czxy.domain; import com.baomidou.mybatisplus.annotation.IdType; import com.baomidou.mybatisplus.annotation.TableField; import com.baomidou.mybatisplus.annotation.TableId; import com.baomidou.mybatisplus.annotation.TableName; import lombok.Data; @TableName("tb_class") @Data public class Classes { @TableId(value = "cid", type = IdType.AUTO) private Integer cid; @TableField("cname") private String cname; } /* CREATE TABLE `tb_class` ( `cid` int(11) NOT NULL AUTO_INCREMENT, `cname` varchar(50) DEFAULT NULL, PRIMARY KEY (`cid`) ) */ -
步骤2：编写Mapper，ClassesMapper，实现通用mapper
package com.czxy.mapper; import com.baomidou.mybatisplus.core.mapper.BaseMapper; import com.czxy.domain.Classes; import org.apache.ibatis.annotations.Mapper; @Mapper public interface ClassesMapper extends BaseMapper<Classes> { } -
步骤3：编写service，接口+实现类+通用
-
接口
package com.czxy.service; import com.baomidou.mybatisplus.extension.service.IService; import com.czxy.domain.Classes; public interface ClassesService extends IService<Classes> { } -
实现类
package com.czxy.service.impl; import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl; import com.czxy.domain.Classes; import com.czxy.mapper.ClassesMapper; import com.czxy.service.ClassesService; import org.springframework.stereotype.Service; import org.springframework.transaction.annotation.Transactional; @Service @Transactional public class ClassesServiceImpl extends ServiceImpl<ClassesMapper, Classes> implements ClassesService { }
-
-
步骤4：编写controller
package com.czxy.controller; import com.czxy.domain.Classes; import com.czxy.service.ClassesService; import com.czxy.vo.BaseResult; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import javax.annotation.Resource; import java.util.List; @RestController @RequestMapping("/classes") public class ClassesController { @Resource private ClassesService classesService; /** * 查询所有 * @return */ @GetMapping public BaseResult findAll() { // 2 查询 List<Classes> list = classesService.list(); // 3 返回 return BaseResult.ok("查询成功", list ); } }