前后端分离项目（springboot+vue+mybatis）-前后端的连接-1

1.后端发送数据

1.后端连接数据库（mybatis）

在application.properties中进行数据库的配置

# 驱动类名称
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
# 数据库连接的url
spring.datasource.url=jdbc:mysql://localhost:3306/springboot?useUnicode=true&characterEncoding=utf-8&autoReconnect=true&failOverReadOnly=false&useSSL=false
# 连接数据库的用户名
spring.datasource.username=root
# 连接数据库的密码
spring.datasource.password=aass2580

# 配置mybatis的日志，输出到控制台
mybatis.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl

# 开启mybatis的驼峰命名自动映射开关
mybatis.configuration.map-underscore-to-camel-case=true

2.两种方式操作数据库

1.短句sql语句直接用注解写

@Mapper
public interface AdminMapper {
    @Select("select * from admin")
    List<Admin> getAdmin();
}

2.长句sql语句用xml文件写

1.在resources中创建与java包中相同的mapper路径
2.创建文件与java中mapper包中命名相同，后缀为xml
3.配置xml文件并写sql语句

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.mc.mapper.AdminMapper">
    <select id="getAdmin" resultType="com.mc.entity.Admin">
        select * from admin
    </select>
</mapper>

3.定义发送格式（json）

在controller中发送json数据到前端

@Slf4j
@RestController

public class AdminController {

    //private static Logger log= LoggerFactory.getLogger(DeptController.class);

    @Autowired
    private AdminService AdminService;

    @GetMapping("/admin")
    public Result getUser(){
        List<Admin> AdminList=AdminService.getAdmin();
        return Result.success(AdminList);
    }
}

2.前端接收数据

1.定义路由

定义页面路由与后端路由相同

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue')
  },
  {
    path: '/admin',
    name: 'admin',
    component: () => import('../views/adminView.vue')
  }
]

2.数据连接（JavaScript）

<script>
import request from "@/utils/request";

export default {
  name: "AdminView",
  //定义数据
  data() {
    return {
      tableData: []
    }
  },
  //创建前加载前做
  created() {
    this.load();
  },
  //调用函数
  methods: {
    load() {
      request.get("/admin").then(res => {
        if (res.code === '0') {
          this.tableData = res.data;
        }
      })
    },
  }
}
</script>

3.固定前后端端口

1.固定前端端口号

在vue.config.js文件中定义

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    port:8880
  }
})

2.固定后端端口号

在application.properties中定义

# 驱动类名称
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
# 数据库连接的url
spring.datasource.url=jdbc:mysql://localhost:3306/springboot?useUnicode=true&characterEncoding=utf-8&autoReconnect=true&failOverReadOnly=false&useSSL=false
# 连接数据库的用户名
spring.datasource.username=root
# 连接数据库的密码
spring.datasource.password=aass2580

# 配置mybatis的日志，输出到控制台
mybatis.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl

# 开启mybatis的驼峰命名自动映射开关
mybatis.configuration.map-underscore-to-camel-case=true
# 定义端口号
server.port=8888

4.通过前端连接后端

1.安装axios

npm i axios -S

2.封装接口

1.在src包中建立utils包
2.包中建立request.js文件
3.代码中的8888为连接的后端端口号

import axios from 'axios'

// 创建一个axios对象出来
const request = axios.create({
    baseURL: 'http://localhost:8888',
    timeout: 5000
})

// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {
    config.headers['Content-Type'] = 'application/json;charset=utf-8';

    // config.headers['token'] = user.token;  // 设置请求头
    return config
}, error => {
    return Promise.reject(error)
});

// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
    response => {
        // response.data即为后端返回的Result
        let res = response.data;
        // 兼容服务端返回的字符串数据
        if (typeof res === 'string') {
            res = res ? JSON.parse(res) : res
        }
        return res;
    },
    error => {
        console.log('err' + error) // for debug
        return Promise.reject(error)
    }
)


export default request

5.通过后端解决跨域问题

1.在com.mc包中建立config包
2.包中建立MyCorsConfig.java文件
3.代码中的8880为连接的前端端口号

package com.mc.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class MyCorsConfig {
    @Bean
    public CorsFilter corsFilter(){
        //1.添加CORS配置信息
        CorsConfiguration config = new CorsConfiguration();
        //1) 允许的域,不要写*，否则cookie就无法使用了
        config.addAllowedOrigin("http://localhost:8880"); //这里填写请求的前端服务器
        //2) 是否发送Cookie信息
        config.setAllowCredentials(true);
        //3) 允许的请求方式
        config.addAllowedMethod("OPTIONS");
        config.addAllowedMethod("HEAD");
        config.addAllowedMethod("GET");
        config.addAllowedMethod("PUT");
        config.addAllowedMethod("POST");
        config.addAllowedMethod("DELETE");
        config.addAllowedMethod("PATCH");
        // 4）允许的头信息
        config.addAllowedHeader("*");

        //2.添加映射路径，我们拦截一切请求
        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", config);

        //3.返回新的CorsFilter.
        return new CorsFilter(configSource);
    }
}