1.搭建环境
1.1 创建项目
- 创建项目:exam-student
- 搭建环境:添加坐标、拷贝配置文件、编写启动类
1.2 添加坐标
pom.xml文件
<!-- 父工程 -->
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.1.6.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<!-- jar包版本 -->
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<java.version>1.8</java.version>
<mybatis.starter.version>1.3.2</mybatis.starter.version>
<mapper.starter.version>2.0.2</mapper.starter.version>
<mysql.version>5.1.32</mysql.version>
<pageHelper.starter.version>1.2.5</pageHelper.starter.version>
<durid.starter.version>1.1.10</durid.starter.version>
</properties>
<!-- 导入需要依赖(坐标/jar包) -->
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</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>${mybatis.starter.version}</version>
</dependency>
<!-- 通用Mapper启动器 -->
<dependency>
<groupId>tk.mybatis</groupId>
<artifactId>mapper-spring-boot-starter</artifactId>
<version>${mapper.starter.version}</version>
</dependency>
<!-- 分页助手启动器 -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>${pageHelper.starter.version}</version>
</dependency>
<!-- mysql驱动 -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>${mysql.version}</version>
</dependency>
<!-- Druid连接池 -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid-spring-boot-starter</artifactId>
<version>${durid.starter.version}</version>
</dependency>
<!--swagger2-->
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger2</artifactId>
<version>2.7.0</version>
</dependency>
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger-ui</artifactId>
<version>2.7.0</version>
</dependency>
</dependencies>
1.3 拷贝properties文件
application.properties配置文件
#端口号
server.port=8080
#数据库基本配置
spring.datasource.driverClassName=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/db3?useUnicode=true&characterEncoding=utf8
spring.datasource.username=root
spring.datasource.password=1234
#druid 连接池配置
#驱动
#spring.datasource.driver-class-name=com.mysql.jdbc.Driver
#初始化连接池大小
spring.datasource.druid.initial-size=1
#最小连接数
spring.datasource.druid.min-idle=1
#最大连接数
spring.datasource.druid.max-active=20
#获取连接时候验证,会影响性能
spring.datasource.druid.test-on-borrow=true
# mybatis
# mybatis.type-aliases-package=com.czxy.domain.base
# mybatis.mapper-locations=classpath:mappers/*.xml
#mapper
mapper.not-empty=false
mapper.identity=MYSQL
#开启驼峰映射
mybatis.configuration.map-underscore-to-camel-case=true
mybatis.mapper-locations=classpath*:mapper/*.xml
#开启log4j打印SQL语句
logging.level.com.czxy.dao=debug
1.4 编写启动类
启动类:
package com.czxy;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
/**
* @author 桐叔
* @email liangtong@itcast.cn
*/
@SpringBootApplication
public class StudentApplication {
public static void main(String[] args) {
SpringApplication.run(StudentApplication.class, args);
}
}
1. 5 拷贝封装类
- BaseResult类,用于存在自定义响应结果
1.6 拷贝配置类(可选)
- Swagger2Configuration类,用于自动生成后端访问接口,进行增删改查测试的
- 如果没有拷贝此配置文件,必须会用postman进行增删改查测试的
2. 单表:班级管理
2.0 数据库
create database db1005;
use db1005;
2.1 班级SQL
-- 班级表
create table tb_class(
`c_id` varchar(32) primary key comment '班级ID',
`c_name` varchar(50) comment '班级名称',
`desc` varchar(200) comment '班级描述'
);
insert into tb_class(`c_id`,`c_name`,`desc`) values('c001','Java12班','。。。。');
insert into tb_class(`c_id`,`c_name`,`desc`) values('c002','Java34班','。。。。');
2.2 查询所有班级
2.2.1 需求
2.2.2 分析
2.2.3 后端实现
-
编写JavaBean
package com.czxy.domain; import javax.persistence.Column; import javax.persistence.Id; import javax.persistence.Table; /** * @author 桐叔 * @email liangtong@itcast.cn */ @Table(name="tb_class") public class Classes { @Id @Column(name="c_id") private String cId; @Column(name="c_name") private String cName; @Column(name="`desc`") private String desc; public String getcId() { return cId; } public void setcId(String cId) { this.cId = cId; } public String getcName() { return cName; } public void setcName(String cName) { this.cName = cName; } public String getDesc() { return desc; } public void setDesc(String desc) { this.desc = desc; } @Override public String toString() { return "Classes{" + "cId='" + cId + '\'' + ", cName='" + cName + '\'' + ", desc='" + desc + '\'' + '}'; } }
-
编写mapper
package com.czxy.mapper; import com.czxy.domain.Classes; import tk.mybatis.mapper.common.Mapper; /** * @author 桐叔 * @email liangtong@itcast.cn */ @org.apache.ibatis.annotations.Mapper public interface ClassesMapper extends Mapper<Classes> { }
-
编写service
package com.czxy.service; import com.czxy.domain.Classes; import com.czxy.mapper.ClassesMapper; import org.springframework.stereotype.Service; import org.springframework.transaction.annotation.Transactional; import javax.annotation.Resource; import java.util.List; /** * @author 桐叔 * @email liangtong@itcast.cn */ @Service @Transactional public class ClassesService { @Resource private ClassesMapper classesMapper; /** * 查询所有 * @return */ public List<Classes> findAll() { List<Classes> list = classesMapper.selectAll(); return list; } }
-
编写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; /** * @author 桐叔 * @email liangtong@itcast.cn */ @RestController @RequestMapping("/classes") public class ClassesController { @Resource private ClassesService classesService; /** * 查询所有 * @return */ @GetMapping public BaseResult findAll(){ // 查询 List<Classes> list = classesService.findAll(); // 返回 return BaseResult.ok("查询成功", list ); } }
2.2.4 前端实现
-
创建static/js目录,拷贝js类库
-
创建首页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
</head>
<body>
<a href="classes_list.html">班级管理</a> |
</body>
</html>
-
创建列表页面
-
基本结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>班级列表</title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> <script> $(function(){ // 查询班级 // 查询所有 findAll(); }); //查询所有函数 function findAll() { } </script> </head> <body> <a href="index.html">返回首页</a> <a href="">添加班级</a> <br/> <table id="tid" border="1" width="800"> <tr> <td>班级ID</td> <td>班级名称</td> <td>班级描述</td> <td>操作</td> </tr> <tr> <td>c001</td> <td>Java34班</td> <td>这是一个有韧劲的班</td> <td> <a href="">修改</a> <a href="">删除</a> </td> </tr> </table> </body> </html>
完整代码
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>班级列表</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script>
$(function(){
// 查询班级
// 查询所有
findAll();
});
//查询所有函数
function findAll() {
// 查询
$.ajax({
"url":"/classes",
"type":"get",
"dataType":"json",
"success":function(data){
// 处理
if(data.code == 1) {
// 重置table
$("#tid").html(`
<tr>
<td>班级ID</td>
<td>班级名称</td>
<td>班级描述</td>
<td>操作</td>
</tr>
`);
// 追加
$(data.data).each(function(index,classes){
$("#tid").append(`
<tr>
<td>${
classes.cId}</td>
<td>${
classes.cName}</td>
<td>${
classes.desc}</td>
<td>
<a href="">修改</a>
<a href="">删除</a>
</td>
</tr>
`)
});
} else {
//
alert('查询失败')
}
},
"error":function(){
alert('操作失败')
}
})
}
</script>
</head>
<body>
<a href="index.html">返回首页</a>
<a href="">添加班级</a> <br/>
<table id="tid" border="1" width="800">
<tr>
<td>班级ID</td>
<td>班级名称</td>
<td>班级描述</td>
<td>操作</td>
</tr>
<tr>
<td>c001</td>
<td>Java34班</td>
<td>这是一个有韧劲的班</td>
<td>
<a href="">修改</a>
<a href="">删除</a>
</td>
</tr>
</table>
</body>
</html>
2.3 添加班级
2.3.1 需求
2.3.2 分析
2.3.2 后端实现
-
编写service,添加save方法
/** * 添加班级 * @param classes * @return */ public boolean save(Classes classes) { int count = classesMapper.insert(classes); return count == 1; }
-
编写controller
/** * 添加班级 * @param classes * @return */ @PostMapping public BaseResult save(@RequestBody Classes classes){ // 添加 boolean result = classesService.save(classes); // 返回 if(result){ return BaseResult.ok("添加成功"); } else { return BaseResult.error("添加失败"); } }
-
测试
2.3.3 前端实现
-
修改首页
-
添加 classes_add.html页面
![\求
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Cgctk-16189685s/image-20201003095420732.png)]
#25154)失败,源站可能有防盗链机制,建议将图片保存下来直接上传(assets/image-202010030908046)(assets/image-202010060811135695.png1.png)](https://img-blog.csdnimg.cn/20210421093059757.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMTM0Mjk3NDM1ODA=,size_16,color_FFFFFF,t_70)
<!DOCTYPE html>
<html lang="en">
<head>