搭建部署后端+实现前后端分离流程

软件使用IDEA 数据库使用MYSQL

项目创建步骤

1. 首先创建一个新工程

2. 导入Maven坐标

例：
开发工具——Lombok（项目导入）
Lombok是一个JAVA库，用于简化JAVA开发
数据库——MySQL Drive（项目导入）
Web——SPring Web
spring-web提供核心的HTTP集成，包括一些方便的Servlet过滤器
MyBatis（官网导入）
MyBatis官网
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>x.x.x</version>
</dependency>

新工程创建完成！

连接数据库

可以使用IDEA内部连接

4. 配置文件

a. 改文件格式（properties — yaml）
b. 内容格式也要修改
c. 修改端口号（也可以不修改）
d. 数据库连接需要配置（驱动、名称、地址、用户名、密码）

正式后端工作

创建`entity`包（实体类包）

在实体类包里添加数据库表的对应实体类

public class 表名{

}

一般包名和表名需要对应，如果不对应需要使用@TableName("表名")来标注

@TableName("表名")
public class 包名{
}

然后表中有几个列，就在实体类里写几个成员变量：

public class 表名{
    private 数据类型 列名;
    private 数据类型 列名;
}

简化开发
以下三个注释均来自Lombok开发工具，只需要定义属性，简化开发量

@Data 省略Get Set 方法的书写

@AllArgsConstructor 自动完成有参构造

@NoArgsConstuctor 自动完成无参构造

创建接口Mapper包

创建Mapper包，名称.mapper
接口 interface
我们导入了MyBatis Plus 不需要我们自己去写增删改查，直接继承BaseMapper
BaseMapper里面给我们封装了基础的增删改查功能，我们继承了他相当于继承了他的增删改查Mapper层的功能

public interface JOJOMapper extends BaseMapper<jojo>{
}

除此之外，我们还需要在主启动类中添加@MapperScan("com.mybatisplus.mapper")

@SpringBootApplication
@MapperScan("com.mybatisplus.mapper")
public class DemoApplication{
    public static void main(String[] args){
        SpringApplication.run(DemoApplication.class,args)
    }
}

创建启动类包 controller

创建启动类Controller
@Contrller 负责页面跳转
@RestContrller 负责把后端数据流返回给前端
@Autowired 自动装填
@RequestMapping 请求路径（用于和前端AJAX请求对应）

@RestContrller
public class JOJOController{

    @Autowired
    JOJOMapper jojoMapper;

    // 新增方法
    @RequestMapping（"/insert"）
    public String insert(String name,Integer age){
        return jojoMapper.insert(new jojo(name.age))>0?"success!":"fail!";
    }

    // 查询全部数据
    @RequestMapping("/select1")
    public List<jojo> select1（）{
        return jojoMapper.selectList（null）;
    }
}

新增SQL语句

如果我们有想要自定义一些复杂的独特的语句（新增BaseMapper中没有的方法）
我们需要在刚刚写好的 Mapper接口包中定义

public interface JOJOMapper extends BaseMapper<jojo>{
    //我要查找name中 以di开头的数据
    @Select("select * from jojo where name like 'di%';")
    jojo select2();
}

接着回到Controller类中

@RestContrller
public class JOJOController{

    @Autowired
    JOJOMapper jojoMapper;

    // 新增方法
    @RequestMapping（"/insert"）
    public String insert(String name,Integer age){
        return jojoMapper.insert(new jojo(name.age))>0?"success!":"fail!";
    }

    // 查询全部数据
    @RequestMapping("/select1")
    public List<jojo> select1（）{
        return jojoMapper.selectList（null）;
    }

    //新增的查询方法
    @RequestMapping（"/select2"）
    public jojo select2(){
        return jojoMapper.select2();
    }
}

前端页面工作

书写一个简单的前端页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="select1">固有查询</button>
    <button onclick="select2">自定义查询</button>
    <button onclick="insert">插入数据</button>

    <h1></h1>

    <textarea></textarea>

    <script src="水务海洋执法"></script>
    <script>
        function select1(){
            $.ajax({
                type:"get",
                url:"http://localhost:8080/select1",
                contentType:"application/json;charset=utf-8",
                dataType:"json",
                success:function(){
                    document.querySelector('textarea').innerText-JSON.stringify(data);
                },
                error:function(err){
                    alert(err);
                }
            });
        }

        function select2(){
            $.ajax({
                type:"get",
                url:"http://localhost:8080/select2",
                contentType:"application/json;charset=utf-8",
                dataType:"json",
                success:function(){
                    document.querySelector('textarea').innerText-JSON.stringify(data);
                },
                error:function(err){
                    alert(err);
                }
            });
        }

        function insert(){
            $.ajax({
                type:"get",
                url:"http://localhost:8080/insert",
                data:{
                    name:'jolin',
                    age:19,
                }
                contentType:"application/json;charset=utf-8",
                dataType:"text",
                success:function(){
                    document.querySelector('textarea').innerText-JSON.stringify(data);
                },
                error:function(err){
                    alert(err);
                }
            });
        }

    </script>
</body>
</html>

项目部署阶段

将我们的项目打包成Jar包 package
打包完成在target文件下
在target文件夹下打开CMD输入

java -jar jar包名称

即可直接启动服务

正常代码实现逻辑
Controller —— Service —— Impl —— Dao —— Xml