基于SpringBoot+Mybatis+vue2前后端分离项目模板实现

• 需求：

        无

• 实现功能：

        实现一个前后端分离的项目模板，以供更好的开发项目（主要基于上次搭建的vue项目，实现通过接口访问后台实现查询后台数据库用户信息的简易版Demo）

• 环境：

        idea 2021.6

        mysql 8.0

        vue环境见上节（离线安装模板）

• 可能相关问题描述：

        ①项目启动中前后端端口不一致问题的解决方法？

       1) 通过配置访问Vue后端的接口地址实现，在build/index.js中proxyTable中加入如下代码：

    proxyTable: {
      '/api': {
        target: 'http://localhost:8081',//要访问的后端接口
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'  //这句话的意思是用'/api来代替http://localhost:8081/'
          //  '^/api': '/'  '用/api来代替http://localhost:8081'
        }
      }
    },

        2) 当后台引入SpringSecurity后，如果不进行任何配置，SpringSecurity自带有登录页面，会出现跨域跳转路径被/login拦截导致无法登录问题。（以请求localhost:8081/api/user为例）

        

 以上图为例，springBoot引入如下pom文件后不做任何配置,出现无法跨域问题

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-security</artifactId>
</dependency>

删除pom后

        ②Vue自定义标签未定义模板也可以情况？(与本例无关，仅用于总结)

         在参考vue-admin-template项目中发现引入了非系统内置的标签,而且没有自定义但是仍然可以使用的情况，参见如下代码：

        AppMain1.vue

         AppMain.vue

        并在router/index.js加入如下代码：（主要是访问AppMain.vue这个界面）

import Vue from 'vue'
import Router from 'vue-router'
import nest from '@/components/AppMain'

Vue.use(Router)

export default new Router({
  mode:'history',
  routes: [
    {
      path: '/nest',
      name: 'nest',
      component: nest
    },
  ]
})

      通过访问发现AppMain1的内容也读取出来了，说明这个自定义标签会在export default时默认生成一个作为能够让其他vue引用的标签。

        ③npm run dev大致是怎样启动一个项目的？

        参考链接：整合 vue-element-template_Caozefei_2018的博客-CSDN博客_vue-element-templatehttps://blog.csdn.net/Caozefei_2018/article/details/111146389

• 步骤

      ①创建SpringBoot+MyBatis环境，增加实体类以及创建数据库，提供能够API接口

        1）IDEA创建新项目，并增加如下依赖：

              File->New->Project..，

 2）删除application.properties,创建application.yml文件并增加如下配置：

server:
  port: 8081
  servlet:
    context-path: /
spring:
  datasource:
    username: root
    password: 123123
    url: jdbc:mysql://localhost:3306/zzz?useUnicode=true&characterEncoding=utf-8&useSSL=true&serverTimezone=UTC
    type: com.alibaba.druid.pool.DruidDataSource
    driver-class-name: com.mysql.cj.jdbc.Driver
mybatis:
  mapper-locations: classpath*:/mapper/**/*.xml

3）创建User实体类、userMapper接口、userMapper.xml,以及ApiController

        User

public class User {

    private Long id;

    private String name;

...
}

       UserMapper

@Mapper
public interface UserMapper {
    public List<User> findAll();
}

        userMapper.xml

<?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.example.demo.Mapper.UserMapper">
    <select id="findAll" resultType="com.example.demo.Entity.User">
        select * from user
    </select>
</mapper>

       ApiController

@RestController(value = "api")
public class apiController {
    @Autowired
    private UserMapper userMapper;

    @RequestMapping("/user")
    public List<User> myTest(){
        List<User> users = userMapper.findAll();
        return users;
    }
}

        4)打开mysql管理工具Navcat创建数据库

   ②VUE引入axios，并修改访问后台接口，实现点击获取信息按钮获取用户信息功能

        1）导入axios

npm install axios

npm install

          2)修改build/index.js下的proxyTable{}代码：

proxyTable: {
  '/api': {
    target: 'http://localhost:8081',//要访问的后端接口
    changeOrigin: true,
    pathRewrite: {
      '^/api': '/'
    }
  }
},

        3)增加user.vue通过axios请求后台：代码如下：

        user.vue

<template>
  <div>
    <el-button @click="getUser">获取用户信息</el-button>
    <ul v-for="(item,i) in user">
      <li>{{item.name}}</li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "user",
  data() {
    return {
      user:[],
    }
  },
  methods:{
    getUser(){
      axios.get("/api/user").then((respose)=>{
        debugger
          if(respose.status==200){
            debugger
              this.user=respose.data;
          }
        }
      )
    }
  }

}
</script>

<style scoped>

</style>

   router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import user from '@/components/user'
Vue.use(Router)
export default new Router({
  mode:'history',
  routes: [
    {
      path: '/user',
      name: 'user',
      component: user
    }
  ]
})

至此，启动后台，前端npm run dev运行后访问/user,点击获取用户信息，得到的界面如下：

项目Demo下载地址：

        链接：https://pan.baidu.com/s/1UmwThNegO2EmsEzfuOIIEQ 
        提取码：rtj6