</dependency>
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger-ui</artifactId>
<version>${swagger.version}</version>
</dependency>
<!--jwt-->
<!--JavaBean工具类，用于JavaBean数据封装-->
<dependency>
<groupId>commons-beanutils</groupId>
<artifactId>commons-beanutils</artifactId>
<version>${beanutils.version}</version>
</dependency>
<!--jwt工具-->
<dependency>
<groupId>io.jsonwebtoken</groupId>
<artifactId>jjwt</artifactId>
<version>${jwt.jjwt.version}</version>
</dependency>
<!--joda 时间工具类 -->
<dependency>
<groupId>joda-time</groupId>
<artifactId>joda-time</artifactId>
<version>${jwt.joda.version}</version>
</dependency>
</dependencies>
</dependencyManagement>
<dependencies>
<!--web起步依赖-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- mybatis启动器 -->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
</dependency>
<!-- 通用Mapper启动器 -->
<dependency>
<groupId>tk.mybatis</groupId>
<artifactId>mapper-spring-boot-starter</artifactId>
</dependency>
<!-- 分页助手启动器 -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
</dependency>
<!-- mysql驱动 -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
<!-- Druid连接池 -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid-spring-boot-starter</artifactId>
</dependency>
<!--swagger2-->
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger2</artifactId>
</dependency>
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger-ui</artifactId>
</dependency>
</dependencies>
### 3.1.3核心配置文件
* application.properties
#端口号
server.port=8080
#数据库基本配置
spring.datasource.driverClassName=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/ssm_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
### 3.1.4启动类
package com.czxy.ssm;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class StudentApplication {
public static void main(String[] args) {
SpringApplication.run(StudentApplication.class, args);
}
}
### 3.1.5封装类
package com.czxy.ssm.vo;
import java.util.HashMap;
import java.util.Map;
public class BaseResult {
//成功状态码
public static final int OK = 1;
//失败状态码
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<String, Object> getOther() {
return other;
}
}
### 3.1.6配置类(可选)
package com.czxy.student.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","liangtong@itcast.cn"))
.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;
}
}
3.2前端环境
---------------
### 3.2.1拷贝静态资源
### 3.2.2vs打开资源
4.班级管理
======
4.1JavaBean:Classes
---------------------------
package com.czxy.ssm.domain;
import javax.persistence.Column;
import javax.persistence.Id;
import javax.persistence.Table;
@Table(name = “tb_class”)
public class Classes {
/*
CREATE TABLE tb_class(
`c_id` VARCHAR(32) PRIMARY KEY COMMENT '班级ID',
`c_name` VARCHAR(50) COMMENT '班级名称',
`desc` VARCHAR(200) COMMENT '班级描述'
);
*/
@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;
}
public Classes() {
}
public Classes(String cid, String cname, String desc) {
this.cid = cid;
this.cname = cname;
this.desc = desc;
}
@Override
public String toString() {
return "Classes{" +
"cid='" + cid + '\'' +
", cname='" + cname + '\'' +
", desc='" + desc + '\'' +
'}';
}
}
4.2查询所有
---------------
### 4.2.1后端
* 编写Mapper
package com.czxy.ssm.mapper;
import com.czxy.ssm.domain.Classes;
import tk.mybatis.mapper.common.Mapper;
@org.apache.ibatis.annotations.Mapper
public interface ClassesMapper extends Mapper {
}
* 编写service
* 接口
package com.czxy.ssm.service;
import com.czxy.ssm.domain.Classes;
import java.util.List;
public interface ClassesService {
/**
* 查询所有
* @return
*/
public List<Classes> selectAll() ;
}
-实现类
package com.czxy.ssm.service.impl;
import com.czxy.ssm.domain.Classes;
import com.czxy.ssm.mapper.ClassesMapper;
import com.czxy.ssm.service.ClassesService;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import javax.annotation.Resource;
import java.util.List;
@Service
@Transactional
public class ClassesServiceImpl implements ClassesService {
@Resource
private ClassesMapper classesMapper;
@Override
public List<Classes> selectAll() {
List<Classes> list = classesMapper.selectAll();
return list;
}
}
* 编写Controller
package com.czxy.ssm.controller;
import com.czxy.ssm.domain.Classes;
import com.czxy.ssm.service.ClassesService;
import com.czxy.ssm.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;
@GetMapping
public BaseResult<List<Classes>> list() {
// 查询所有
List<Classes> list = classesService.selectAll();
// 返回
/*
BaseResult baseResult = new BaseResult();
baseResult.setCode(1); // 0 错误， 20000 成功
baseResult.setMessage("提示信息");
baseResult.setData(list);
return baseResult;
*/
return BaseResult.ok("查询成功", list);
}
}
* 查询结果
### 4.2.2前端：axios+then
* 编写页面、发送ajax、显示数据
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<div id="app">
<table border="1">
<tr>
<td>编号</td>
<td>名称</td>
<td>描述</td>
</tr>
<tr v-for="(classes,index) in classesList">
<td>{{classes.cid}}</td>
<td>{{classes.cname}} </td>
<td>{{classes.desc}}</td>
</tr>
</table>
</div>
### 4.2.3前端：async+await
<meta charset="UTF-8">
<title>班级列表</title>
<script src="../js/axios.js"></script>
<script src="../js/vue.js"></script>
<div id="app">
<table border="1">
<tr>
<td>编号</td>
<td>班级名称</td>
<td>描述</td>
<td>操作</td>
</tr>
<tr v-for="(classes,index) in classesList">
<td>{{classes.cid}}</td>
<td>{{classes.cname}}</td>
<td>{{classes.desc}}</td>
<td>
修改
删除
</td>
</tr>
</table>
</div>
4.3添加班级
---------------
### 4.3.1需求：
* 完成班级的添加
* 后端
* 获得提交的班级数据（json数据）
* 保存班级数据（controller-service）
* 根据操作结果提示：成功true-->添加成功，失败false-->添加失败
* 前端
* 绘制表单，数据绑定
* 点击添加，发送ajax完成添加
* 成功，跳转到列表页面。失败，给出提示
### 4.3.2后端
* 步骤1：编写service，完成添加
* 接口
/**
* 添加班级
* @param classes
* @return
*/
public boolean add(Classes classes);
* 实现类
@Override
public boolean add(Classes classes) {
int result = classesMapper.insert(classes);
return result == 1;
}
* 步骤2：编写controller，处理结果BaseResult
/**
* 添加班级
* @param classes
* @return
*/
@PostMapping
public BaseResult add(@RequestBody Classes classes) {
// 添加
boolean result =classesService.add(classes);
// 提示
if(result) {
// 成功
return BaseResult.ok("添加成功");
}
// 失败
return BaseResult.error("添加失败");
}
### 4.3.3前端
<meta charset="UTF-8">
<title>班级列表</title>
<script src="../js/axios.js"></script>
<script src="../js/vue.js"></script>
<div id="app">
<table>
<tr>
<td>编号</td>
<td>
<input type="text" v-model="classes.cid" />
</td>
</tr>
<tr>
<td>班级名称</td>
<td>
<input type="text" v-model="classes.cname" />
</td>
</tr>
<tr>
<td>班级描述</td>
<td>
<textarea cols="30" rows="10" v-model="classes.desc"></textarea>
</td>
</tr>
<tr>
<td>
<input type="button" value="添加" @click="addClasses" />
</td>
<td></td>
</tr>
</table>
</div>
4.4修改班级
---------------
### 4.4.1需求：
* 完成班级的修改
* 表单的回显：通过id查询详情
* 修改功能：通过id更新
### 4.4.2后端
* 步骤
* 编写service：selectById、update
* 接口
* 实现类
* 编写controller：selectById、update
* 编写service：selectById、update
* 接口
/**
* 通过id查询详情
* @param cid
* @return
*/
public Classes selectById(String cid);
/**
* 更新班级
* @param classes
* @return
*/
public boolean update(Classes classes);
* 实现类
@Override
public Classes selectById(String cid) {
return classesMapper.selectByPrimaryKey(cid);
}
@Override
public boolean update(Classes classes) {
int result = classesMapper.updateByPrimaryKeySelective(classes);
return result == 1;
}
* 编写controller：selectById、update
/**
* 查询详情
* @param cid
* @return
*/
@GetMapping("/{cid}")
public BaseResult<Classes> selectById(@PathVariable("cid") String cid) {
//查询
Classes classes = classesService.selectById(cid);
//返回
return BaseResult.ok("查询详情成功", classes);
}
/**
* 更新
* @param classes
* @return
*/
@PutMapping
public BaseResult update(@RequestBody Classes classes) {
try {
// 更新
boolean result = classesService.update(classes);
// 提示
if(result) {
return BaseResult.ok("更新成功");
}
return BaseResult.error("更新失败");
} catch (Exception e) {
e.printStackTrace();
return BaseResult.error(e.getMessage());
}
}
### 4.4.3前端
* 步骤：
* 列表页面点击“修改”，添加到修改页面 edit.html?cid=c001
* 页面加载成功时，通过id查询详情
* 回显：将查询结果绑定表单（添加已经完成，采用复制）
* 点击确定进行更新
* 修改list.html页面
修改
* 编写edit.html页面
<meta charset="UTF-8">
<title>班级列表</title>
<script src="../js/axios.js"></script>
<script src="../js/vue.js"></script>
<div id="app">
<!--3 表单回显 -->
<table>
<tr>
<td>编号</td>
<td>
{{classes.cid}}
</td>
</tr>
<tr>
<td>班级名称</td>
<td>
<input type="text" v-model="classes.cname" />
</td>
</tr>
<tr>
<td>班级描述</td>
<td>
<textarea cols="30" rows="10" v-model="classes.desc"></textarea>
</td>
</tr>
<tr>
<td>
<!--4 更新 -->
<input type="button" value="修改" @click="updateClasses" />
</td>
<td></td>
</tr>
</table>
</div>
4.5删除班级
---------------
### 最后
>由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容
>
<tr>
<td>班级描述</td>
<td>
<textarea cols="30" rows="10" v-model="classes.desc"></textarea>
</td>
</tr>
<tr>
<td>
<!--4 更新 -->
<input type="button" value="修改" @click="updateClasses" />
</td>
<td></td>
</tr>
</table>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
classes: {
},
classesId: ''
},
methods: {
async selectClassesById() { //2 查询详情
let { data: baseResult } = await axios.get(`http://localhost:8080/classes/${this.classesId}`)
// 将查询结果存放classes对象，将自动回显
if( baseResult.code == 20000) {
this.classes = baseResult.data
}
},
async updateClasses() { // 4 更新函数
let { data: baseResult } = await axios.put(`http://localhost:8080/classes`, this.classes)
// 提示
if(baseResult.code == 20000) {
//成功
location.href = '/cls/list.html'
} else {
//失败
alert(baseResult.message)
}
}
},
mounted() {
// 2.1 获得id
let arr = location.href.split("?cid=")
this.classesId = arr[1]
// 2.2 查询详情
this.selectClassesById()
}
})
</script>
4.5删除班级
最后
[外链图片转存中…(img-xX8V5TQ6-1718459781372)]
[外链图片转存中…(img-ygLg45Kb-1718459781373)]
由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容
扫一扫
373
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
