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

一：后端

1.新建springboot工程,设置文件编码utf-8.

2.三个文件

①配置文件

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

②统一返回包装结果

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（添加对应的注解）：

@RestController
@CrossOrigin
public class StuController {
    @Resource
    private StuService service;
    @GetMapping("/select")
    public Result select(){
        List<Stu> list = service.select();
        return Result.success(list);
    }
}

③Service（添加对应的注解）：

@Service
public class StuService {
    @Resource
    private StuMapper stuMapper;
    public List<Stu> select(){
        return stuMapper.select();
    }
}

④Mapper接口（添加对应的注解）：

@Mapper
public interface StuMapper {
    @Select("select * from stu")
    List<Stu> select() ;
}

4.启动类中添加扫描类

@MapperScan("com.example.mapper")

5.启动工程

6.测试接口

⭐用网页测试接口是否可以跑的通

7.注意事项

⭐①启动类与三层架构为同一级

⭐②在当前层调用其他层的方法时，是对象调用方法，而不是类调用方法

⭐③修改完代码后要重新启动工程
⭐④注意格式，不要打多余的空格

二：前端

1.新建vue页面,添加基础的格式

<template>
    <div>
    </div>
</template>

<script setup>
</script>

2.添加路由

{path: 'stu', meta:{title:'测试'},component:() => import('../views/Stu.vue')}

3.template标签中

①写页面的架构(按钮，表格，表单，单选，多选...)，
②绑定事件（按钮上，超链接上...）
③绑定数据（表格上...）

4.script标签中

①导入类库
②定义存储于后端的变量
③写方法（发送请求）