12.13-练习-前后端交互-查询功能

## 一：后端
#### 1.新建springboot工程,设置文件编码utf-8.
#### 2.三个文件
①配置文件
```java
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    username: root
    password: root
    url: jdbc:mysql://localhost:3306/xm-pro?useUnicode=true&characterEncoding=utf-8&allowMultiQueries=true&useSSL=false

# 配置mybatis实体和xml映射
mybatis:
  # 映射XML
  mapper-locations: classpath:mapper/*.xml
  configuration:
    # 配置日志
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
    map-underscore-to-camel-case: true

```
②统一返回包装结果
```java
package com.example.config;

public class Result {
    private String code;
    private String msg;
    private Object data;


    public static Result success(){
        Result result = new Result();
        result.setCode("200");
        result.setMsg("请求成功");
        return result;
    }

    public static Result success(Object data){
        Result result = success();
        result.setData(data);
        return result;
    }

    public static Result error(){
        Result result = new Result();
        result.setCode("500");
        result.setMsg("系统异常");
        return result;
    }

    public static Result error(String code,String msg){
        Result result = new Result();
        result.setCode(code);
        result.setMsg(msg);
        return result;
    }

    public String getCode() {
        return code;
    }

    public void setCode(String code) {
        this.code = code;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public Object getData() {
        return data;
    }

    public void setData(Object data) {
        this.data = data;
    }
}
```
③跨域文件-注解 
@CrossOrigin
#### 3.三层架构及实体类
①实体类与表结构字段一一对应，get/set方法
②Controller（添加对应的注解）：

```java
@RestController
@CrossOrigin
public class StuController {
    @Resource
    private StuService service;
    @GetMapping("/select")
    public Result select(){
        List<Stu> list = service.select();
        return Result.success(list);
    }
}
```
③Service（添加对应的注解）：
```java
@Service
public class StuService {
    @Resource
    private StuMapper stuMapper;
    public List<Stu> select(){
        return stuMapper.select();
    }
}
```
④Mapper接口（添加对应的注解）：
```java
@Mapper
public interface StuMapper {
    @Select("select * from stu")
    List<Stu> select() ;
}
```
#### 4.启动类中添加扫描类
```java
@MapperScan("com.example.mapper")
```
#### 5.启动工程
#### 6.测试接口
⭐用网页测试接口是否可以跑的通
#### 7.注意事项
⭐①启动类与三层架构为同一级
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/42acf5fa-3742-94de-c875-7739c79ad089.png)
⭐②在当前层调用其他层的方法时，是对象调用方法，而不是类调用方法
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/27633baf-2979-a40c-e50f-17d24fd5711e.png)
⭐③修改完代码后要重新启动工程
⭐④注意格式，不要打多余的空格
## 二：前端
#### 1.新建vue页面,添加基础的格式
```java
<template>
    <div>
    </div>
</template>

<script setup>
</script>
```
#### 2.添加路由
```java
{path: 'stu', meta:{title:'测试'},component:() => import('../views/Stu.vue')}
```
#### 3.template标签中
①写页面的架构(按钮，表格，表单，单选，多选...)，
②绑定事件（按钮上，超链接上...） 
③绑定数据（表格上...）
#### 4.script标签中
①导入类库
②定义存储于后端的变量
③写方法（发送请求）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/a68f1fd4-b244-4d47-7e7e-a1594d8097c0.png)