# springboot-demo

**Repository Path**: BIT_Worker/springboot-demo

## Basic Information

- **Project Name**: springboot-demo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-01-20
- **Last Updated**: 2022-01-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 准备数据库

```sql
/*
 Navicat Premium Data Transfer

 Source Server         : localhost
 Source Server Type    : MySQL
 Source Server Version : 80017
 Source Host           : localhost:3306
 Source Schema         : springboot

 Target Server Type    : MySQL
 Target Server Version : 80017
 File Encoding         : 65001
*/

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for book
-- ----------------------------
DROP TABLE IF EXISTS `book`;
CREATE TABLE `book`  (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键id',
  `category_id` int(11) NOT NULL COMMENT '分类id',
  `name` varchar(128) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '名称',
  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `update_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
  `deleted` tinyint(4) NOT NULL DEFAULT 0 COMMENT '逻辑删除',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of book
-- ----------------------------
INSERT INTO `book` (`category_id`, `name`) VALUES (1, 'Java核心技术');
INSERT INTO `book` (`category_id`, `name`) VALUES (1, 'Vue.js实战');
INSERT INTO `book` (`category_id`, `name`) VALUES (2, '十万个为什么');
INSERT INTO `book` (`category_id`, `name`) VALUES (2, '恐龙时代');
INSERT INTO `book` (`category_id`, `name`) VALUES (3, '三体');
INSERT INTO `book` (`category_id`, `name`) VALUES (3, '西游记');

-- ----------------------------
-- Table structure for category
-- ----------------------------
DROP TABLE IF EXISTS `category`;
CREATE TABLE `category`  (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '分类主键',
  `name` varchar(128) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '分类名称',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of category
-- ----------------------------
INSERT INTO `category` VALUES (1, '计算机编程');
INSERT INTO `category` VALUES (2, '科普');
INSERT INTO `category` VALUES (3, '小说');
```



# 逆向生成代码

使用`mybatis-plus-generator`项目生成代码



# 创建项目

创建`springboot`项目
![image-20220119214543286](https://gitee.com/BIT_Worker/pic-go/raw/master/img/202201192145476.png)
![image-20220119214650246](https://gitee.com/BIT_Worker/pic-go/raw/master/img/202201192146304.png)
![image-20220119214710553](https://gitee.com/BIT_Worker/pic-go/raw/master/img/202201192147617.png)

将生成的代码复制到该项目中



# 导入依赖

项目创建成功后修改`parent`标签下`spring-boot`的版本

```xml
<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.5.0</version>
    <relativePath/> <!-- lookup parent from repository -->
</parent>
```

加入`mybatis-plus`的依赖

```xml
<!--mybatis-plus-->
<dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-boot-starter</artifactId>
    <version>3.5.0</version>
</dependency>
```

完整`pom.xml`文件如下

```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 https://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.5.0</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.bjsy</groupId>
    <artifactId>springboot-demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>springboot-demo</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>

        <!--springboot web-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <!--springboot test-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <!--springboot 开发工具-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>

        <!--spring configuration-processor-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-configuration-processor</artifactId>
            <optional>true</optional>
        </dependency>

        <!--mysql-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>

        <!--mybatis-->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.2.1</version>
        </dependency>

        <!--mybatis-plus-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.5.0</version>
        </dependency>

        <!--lombok-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>

    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>
```



# 配置文件

将`application.properties`改为`application.yaml`，内容如下

```yaml
# 设置服务的端口
server:
  port: 8080

# spring相关配置
spring:
  # 配置数据库信息
  datasource:
    # 驱动
    driver-class-name: com.mysql.cj.jdbc.Driver
    # 链接
    url: jdbc:mysql://localhost:3306/springboot?serverTimeZone=Asia/Shanghai
    # 用户名
    username: root
    # 密码
    password: 1234

# mybatis-plus相关配置
mybatis-plus:
  configuration:
    # 开启日志打印
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
    # 开启下划线转驼峰
    map-underscore-to-camel-case: true
  global-config:
    db-config:
      # 设置所有表的主键为自增类型
      id-type: auto
      # 设置逻辑删除字段名称
      logic-delete-field: deleted
      # 逻辑删除
      logic-delete-value: 1
      # 逻辑未删除
      logic-not-delete-value: 0
```



# 获取所有图书信息接口

在`BookController.java`中添加如下代码

```java
@Autowired
private BookService bookService;
@GetMapping
public Result getAllBook() {
    List<Book> bookList = bookService.list();
    return bookList;
}
```

启动项目，测试，在浏览器输入`localhost:8080/book`查看结果



# 统一返回数据格式

新建`Result.java`

```java
package com.bjsy.vo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

/**
 * 统一返回对象
 */
@Data
@NoArgsConstructor
@AllArgsConstructor
public class Result {

    //返回码
    private Integer code;
    //返回消息
    private String msg;
    //返回数据
    private Object data;

    //操作成功
    public static Result success(Object data) {
        return new Result(200, "success", data);
    }

    //操作失败
    public static Result fail(Integer code, String msg) {
        return new Result(code, msg, null);
    }
    
}
```

修改代码

```java
@GetMapping
public Result getAllBook() {
    List<Book> bookList = bookService.list();
    if (!CollectionUtils.isEmpty(bookList)) {
        return Result.success(bookList);
    }
    return Result.fail(10001, "获取失败");
}
```

浏览器测试，发现返回的时间多了个`T`



# 解决返回时间格式

新建`LocalDateTimeConfig.java`

```java
package com.bjsy.config;

import com.fasterxml.jackson.datatype.jsr310.ser.LocalDateTimeSerializer;
import org.springframework.boot.autoconfigure.jackson.Jackson2ObjectMapperBuilderCustomizer;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

import java.time.LocalDateTime;
import java.time.format.DateTimeFormatter;

/**
 * 配置类，用来解决返回给前端的时间中间有个T
 */
@Configuration
public class LocalDateTimeConfig {
 
    @Bean
    public LocalDateTimeSerializer localDateTimeDeserializer() {
        return new LocalDateTimeSerializer(DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss"));
    }
 
    @Bean
    public Jackson2ObjectMapperBuilderCustomizer jackson2ObjectMapperBuilderCustomizer() {
        return builder -> builder.serializerByType(LocalDateTime.class, localDateTimeDeserializer());
    }
}
```



# 新增图书接口

添加代码

```java
/**
     * 插入书的信息（新增书）
     * @param book
     * @return
     */
@PostMapping
public Result insertBook(@RequestBody Book book) {
    boolean flag = bookService.save(book);
    if (flag) {
        return Result.success(null);
    }
    return Result.fail(10002, "保存失败");
}
```

使用`PostMan`进行测试
![image-20220119220142080](https://gitee.com/BIT_Worker/pic-go/raw/master/img/202201192201174.png)



# 删除图书接口

添加代码

```java
/**
     * 根据书的id删除
     * @param id
     * @return
     */
@DeleteMapping("/{id}")
public Result deleteBook(@PathVariable Integer id) {
    boolean flag = bookService.removeById(id);
    if (flag) {
        return Result.success(null);
    }
    return Result.fail(10003, "删除失败");
}
```

测试
![image-20220119220332124](https://gitee.com/BIT_Worker/pic-go/raw/master/img/202201192203216.png)



# 更新图书信息接口

添加代码

```java
/**
     * 根据id跟新书的信息
     * @param book
     * @return
     */
@PutMapping
public Result updateBook(@RequestBody Book book) {
    boolean flag = bookService.updateById(book);
    if (flag) {
        return Result.success(null);
    }
    return Result.fail(10004, "更新失败");
}
```

测试
![image-20220119220502604](https://gitee.com/BIT_Worker/pic-go/raw/master/img/202201192205685.png)



# 多表查询

新建`BookVo.java`

```java
package com.bjsy.vo;

import lombok.Data;

/**
 * 视图对象，用于封装需要返回给前端的数据
 */
@Data
public class BookVo {

    Integer id;
    String category;
    String name;

}
```

修改`BookController.java`中的代码

```java
@GetMapping
public Result getAllBook() {
    return bookService.getAllBook();
}
```

在`BookService.java`中添加代码

```java
/**
     * 获取所有书的信息
     * @return
     */
Result getAllBook();
```

在`BookServiceImpl.java`中添加代码

```java
package com.bjsy.service.impl;

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.bjsy.mapper.BookMapper;
import com.bjsy.pojo.Book;
import com.bjsy.service.BookService;
import com.bjsy.vo.BookVo;
import com.bjsy.vo.Result;
import com.bjsy.vo.ResultEnum;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.util.CollectionUtils;

import java.util.List;

/**
 * <p>
 *  服务实现类
 * </p>
 *
 * @author 作者
 * @since 2022-01-19
 */
@Service
public class BookServiceImpl extends ServiceImpl<BookMapper, Book> implements BookService {

    //获取映射对象
    //private BookMapper bookMapper = new BookMapper();
    @Autowired
    private BookMapper bookMapper;

    @Override
    public Result getAllBook() {
        List<BookVo> bookVoList = bookMapper.getAllBook();
        //判空
        if (!CollectionUtils.isEmpty(bookVoList)) {
            return Result.success(bookVoList);
        }
        return Result.fail(10001, "查询失败");
    }
}
```

在`BookMapper.java`中添加代码

```java
List<BookVo> getAllBook();
```

在`BookMapper.xml`中添加代码

```xml
<select id="getAllBook" resultType="com.bjsy.vo.BookVo">
    select b.id id, c.name category, b.name name
    from book b, category c
    where b.category_id = c.id and b.deleted = 0
</select>
```

测试
![image-20220119220948776](https://gitee.com/BIT_Worker/pic-go/raw/master/img/202201192209864.png)



# 优化返回状态码

新建`ResultEnum.java`

```java
package com.bjsy.vo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.Getter;
import lombok.NoArgsConstructor;


/**
 * 返回状态码和信息枚举
 */
@Getter
@NoArgsConstructor
@AllArgsConstructor
public enum ResultEnum {

    QUERY_FAIL(10001, "获取信息失败"),
    SAVA_FAIL(10002, "保存失败"),
    DELETE_FAIL(10003, "删除失败"),
    UPDATE_FAIL(10004, "更新失败")
    ;

    private Integer code;
    private String msg;
}
```

在`Result.java`中添加代码

```java
public static Result fail(ResultEnum resultEnum) {
    return new Result(resultEnum.getCode(), resultEnum.getMsg(), null);
}
```

修改原来返回给前端结果的代码



# 查询分类的接口

在`CategoryController.java`中添加代码

```java
@Autowired
private CategoryService categoryService;

@GetMapping
public Result getAllCategory() {
    List<Category> categoryList = categoryService.list();
    if (!CollectionUtils.isEmpty(categoryList)) {
        return Result.success(categoryList);
    }
    return Result.fail(10005, "查询分类失败");
}
```

测试



# 跨域配置

新建类`WebMVCConfig.java`

```java
package com.bjsy.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebMVCConfig implements WebMvcConfigurer {

    //跨域配置
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") //所有接口支持跨域
                .allowedOrigins("*") //允许所有请求
                .allowedMethods("*") //允许所有方法
                .maxAge(3600); //最大跨域时间
    }
}
```



# 前端

```html
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>springboot-demo</title>
</head>

<body>
	<div id="app">
		<!-- 顶部按钮区 -->
		<el-row>
			<el-button type="primary" @click="getAll">获取图书列表</el-button>
			<el-button type="primary" @click="addBook">添加图书</el-button>
		</el-row>

		<!-- 表格区 -->
		<el-table :data="bookList">
			<el-table-column type="index" label="序号"></el-table-column>
			<el-table-column prop="category" label="图书类别"></el-table-column>
			<el-table-column prop="name" label="图书名称"></el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button type="danger" size="mini" @click="deleteBook(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 添加图书弹窗 -->
		<el-dialog title="添加图书" :visible.sync="addBookDialogVisible" width="50%">
			<el-form :model="addForm" label-width="100px">
				<el-form-item label="分类ID">
					<el-input type="text" v-model="addForm.categoryId"></el-input>
				</el-form-item>
				<el-form-item label="名称">
					<el-input type="text" v-model="addForm.name"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancle()">取 消</el-button>
				<el-button type="primary" @click="confirmAddBook()">确 定</el-button>
			</span>
		</el-dialog>

	</div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- axios -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
	var baseURL = "http://localhost:8080";
	new Vue({
		el: '#app',
		data: {
			bookList: [],
			addBookDialogVisible: false,
			addForm: {}
		},
		created() {
			this.getAll()
		},
		methods: {
			getAll() {
				axios.get(baseURL + "/book").then(res => {
					if (res.data.code == 200) {
						console.log(res.data)
						this.bookList = res.data.data
					}
				})
			},
			addBook() {
				this.addBookDialogVisible = true
			},
			cancle() {
				this.$message.info("取消操作")
				this.addBookDialogVisible = false
			},
			confirmAddBook() {
				console.log(this.addForm)
				axios.post(baseURL + "/book", this.addForm).then(res => {
					if (res.data.code == 200) {
						this.addBookDialogVisible = false
						this.$message.success("添加成功")
					} else {
						this.$message.error(res.data.msg)
					}
				}).finally(() => {
					this.getAll()
				})
			},
			deleteBook(book) {
				this.$confirm('此操作将永久删除该该图书, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					axios.delete(baseURL + "/book/" + book.id).then(res => {
						if (res.data.code == 200) {
							this.$message.success("删除成功")
							this.getAll()
						} else {
							this.$message.error(res.data.msg)
						}
					})
				}).catch(() => {
					this.$message.info("取消操作")
				});
			}
		}
	})
</script>

</html>
```