springBoot + mybatis + Vue3的前后端分离小demo

面试找工作总会有公司问到两大块内容，一个是调优，另一个是常见问题。所以萌生一个想法整理下相关问题和思路，为了后面处理方便，写一个java基础项目，后期在这个项目上面编写产生相关问题，并测试解决。

只是一个简单小demo，可以用来作为入门学习，这里也只是为了记录方便后期使用。项目地址：https://gitee.com/lihao2/error-demo.git

项目是一个java 前后端分离项目

后端用的springBoot + mybatis

前端用的Vue3

数据库用的mysql

工具使用的是idea

springBoot项目搭建

1、创建error-demo java项目，在里面创建error-api作为后端接口

2、写入依赖

error-demo

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.0.4.RELEASE</version>
        <relativePath />
    </parent>

error-api

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

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

        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>1.3.2</version>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>

    </dependencies>

    <build>
        <resources>
            <resource>
                <directory>src/main/java</directory>
                <excludes>
                    <exclude>**/*.java</exclude>
                </excludes>
            </resource>
            <resource>
                <directory>src/main/resources</directory>
                <includes>
                    <include>**/*.*</include>
                </includes>
            </resource>
        </resources>

        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

2、error-api下创建application.yml配置文件

server:
  port: 8888
spring:
  datasource:
    driver-class-name: com.mysql.jdbc.Driver
    url: jdbc:mysql://localhost:3306/error-demo?useSSL=false&useUnicode=true&characterEncoding=utf-8&allowPublicKeyRetrieval=true
    username: root
    password: root

pagehelper:
  #配置数据库类型
  helperDialect: mysql

mybatis:
  mapper-locations: classpath:mapper/*.xml

3、创建启动类和controller

@SpringBootApplication
@MapperScan("com.lihao.mapper")
public class ErrorApplication {

    public static void main(String[] args) {
        SpringApplication.run(ErrorApplication.class);
    }

}

后端业务代码是读取一个item的controller，这里就不写了

创建前端项目

1、首先确保已经安装了 Node.js，没有安装需要安装，直接去官网下载双击安装下一步下一步就好

2、使用 npm 来全局安装 Vue CLI

npm install -g @vue/cli

3、当前项目下创建error-ui前端项目，创建的时候注意进入到error-demo文件夹下，这样前端项目和后端在一起比较方便后期修改

vue create error-ui

然后选择Vue3项目

4、修改vue.config.js，主要是为了避免跨域问题

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:8888',
        changeOrigin: true,
        ws: false,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
})

5、安装，element-ui，并在main.js中添加配置

控制台运行
npm i element-ui -S

main.js内容
import ElementPlus from 'element-plus'

app.use(ElementPlus)

6、安装axios访问后端接口，并创建request.js封装axios操作

控制台运行
npm i axios -S

创建request.js文件
import axios from 'axios'

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({
    // axios中请求配置有baseURL选项，表示请求URL公共部分
    baseURL: "/api/",
    // 超时
    timeout: 10000
})

export default service

7、安装router配置路由

npm i router -S

在main.js中增加配置

import router from './router'

app.use(router) //注册路由

App.vue中删除多余内容，增加Vue标签

<template>
  <router-view />
</template>

<script>

export default {
  name: 'App'
}
</script>

<style>
</style>

创建router/index.js配置路由

import { createRouter,createWebHashHistory } from 'vue-router'

// 配置导出路由
const router = createRouter({
  history:createWebHashHistory(),
  routes: [{
      path: "/",
      component: () => import('@/view/itemList.vue')
    }
  ]
})

export default router

8、项目搭建完，后面开始写页面代码，主要是Vue文件和js文件

api文件夹下创建item.js文件

import request from './request'

export const page = (data) => {
    return request({
        url: '/item/page',
        method: 'post',
        data: data
    })
}

9、view文件夹下创建itemList文件

<template>
  <div>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="createTime" label="Date" width="180" />
      <el-table-column prop="name" label="name" width="180" />
      <el-table-column prop="storeId" label="storeId" />
    </el-table>

    <el-pagination
        small
        background
        layout="prev, pager, next"
        :total="total"
        class="mt-4"
        @current-change="loadData"
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
    />
  </div>
</template>

<script name="itemList" setup>
import {ref} from "vue"
import {page} from "@/api/item"
import {onMounted} from "vue";

const tableData = ref([])
const pageSize = ref(10)
const pageNum = ref(1)
const total = ref(1)

const loadData = () => {
  let param = {
    pageSize: pageSize.value,
    pageNum: pageNum.value
  }
  page(param).then(
      res => {
        tableData.value = res.data.list
        total.value = res.data.total
      }
  )
}

onMounted( () => {
  loadData()
} )

</script>

<style scoped>

</style>

到这项目就搭建完了，执行ErrorApplication启动类和package.json下的serve命令启动后端和前端即可。