毕设（一）Vue3 + SpringBoot + MyBatis搭建一个简单前后端分离项目

一、Vue项目搭建1、打开IDEA，创建Vue.js项目demo-vue项目结构2、在components目录下创建vue组件UserMan.vue<template><div><table><tr><td>编号</td><td>用户名</td><td>密码</td></t

奥妙无穹

7505人浏览 · 2022-03-18 14:17:49

奥妙无穹 · 2022-03-18 14:17:49 发布

一、Vue项目搭建

1、打开IDEA，创建Vue.js项目demo-vue

在这里插入图片描述
项目结构

2、在components目录下创建vue组件UserMan.vue

<template>
  <div>
    <table>
      <tr>
        <td>编号</td>
        <td>用户名</td>
        <td>密码</td>
      </tr>
      <!--遍历数据-->
      <tr v-for="item in users" :key="item.id">
        <td>{{item.id}}</td>
        <td>{{item.username}}</td>
        <td>{{item.password}}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "UserMan",
  data:function(){
    return{
      users:[
        {
          id:1,
          username:'user',
          password:'123456'
        },
        {
          id:2,
          username:'admin',
          password:'123456'
        },
        {
          id:3,
          username:'yanao',
          password:'123456'
        }
      ]
    }
  }
}
</script>

<style scoped>

</style>

3、新建router目录，并创建index.js文件

//引入Vue-router路由依赖
import { createRouter, createWebHistory } from "vue-router"
import UserMan from "@/components/UserMan";

//定义路由设置，注意这里是一个数组
const routes = [
    //每一个链接都是一个对象
    {
        //path表示链接路径，这里把默认的8081设置链接到HelloWorld.vue组件
        path: '/',
        //访问localhost:8081时会自动跳转到/home
        // redirect:'/home',
        name: 'UserMan',
        component: UserMan
    }
]

//定义路由配置，注意export导出，只有导出了别的文件才能import导入
export const router = createRouter({
    //createWebHistory路由模式路径不带#号,createWebHashHistory路由模式路径带#号，而且默认是Hash
    history: createWebHistory(),
    routes: routes
})

export default router

4、修改main.js文件

//引入Vue框架
import { createApp } from 'vue'
import App from './App.vue'
//引入路由，自动会寻找index.js
import Router from './router'
//引入axios，后面要用到的
import axios from 'axios'

//自动创建Vue
const app=createApp(App)
app.use(Router)
//mount手动挂载到id为app的dom中的意思
//需要注意的是：该方法是直接挂载到入口文件index.html 的 id=app 的dom 元素上的
app.mount('#app')
//关闭生产模式下给出的提示
app.config.productionTip=false
//将axios加载到原型上
app.config.globalProperties.$axios=axios

5、修改App.vue

<template>
  <div id="app">
    <!--在这里显示组件-->
    <router-view/>
  </div>
</template>

<script>
import UserMan from "@/components/UserMan";

export default {
  name: 'App',
  components: {
    // eslint-disable-next-line vue/no-unused-components
    UserMan
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

6、测试是否可行

启动项目，打开浏览器，并输入localhost:8081（这里的地址看你控制台给的地址）
在这里插入图片描述

在这里插入图片描述

二、SpringBoot项目搭建

1、使用IDEA的Spring Initializr搭建Spring Boot项目，勾选web、mysql、mybatis依赖

在这里插入图片描述
如果想使用Lombok、devtools也可以自行添加
项目结构如下

2、创建entity目录，并创建User实体类

package com.example.demo.entity;

public class User {
    private int id;
    private String username;
    private String password;

    public User(int id, String username, String password) {
        this.id = id;
        this.username = username;
        this.password = password;
    }

    public User() {
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                '}';
    }
}

3、创建Controller目录，并创建UserController类

记得改类名哈

package com.example.demo.Controller;

import com.example.demo.Service.UserService;
import com.example.demo.entity.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
@RequestMapping("/user")
public class UserController {

    @Autowired
    private UserService userService;
    @RequestMapping("/findAll")
    public List<User> findAll(){
        return userService.findAll();
    }
}

4、创建Service目录，以及UserService类

package com.example.demo.Service;

import com.example.demo.Mapper.UserMapper;
import com.example.demo.entity.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class UserService {
    @Autowired
    private UserMapper userMapper;

    public List<User> findAll(){
        return userMapper.findAll();
    }

}

5、创建Mapper目录，并创建UserMapper类

package com.example.demo.Mapper;

import com.example.demo.entity.User;
import org.apache.ibatis.annotations.Mapper;

import java.util.List;

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

6、在resources下创建mappers目录及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">
    <resultMap id="UserResult" type="com.example.demo.entity.User">
        <id column="id" property="id"></id>
        <result column="name" property="name"></result>
        <result column="password" property="password"></result>
    </resultMap>
    <select id="findAll" resultMap="UserResult">
        SELECT * FROM user
    </select>
</mapper>

注意这里的类名一定要对应

7、修改application.yml文件（也即properties文件换后缀）

记得修改账号密码

#基本属性
spring:
  datasource:
    #MySQL连接信息，后面一连串的是用于解决时区时间差报错问题
    url: jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC
    #账号，这里填入自己数据库的账号和密码
    username: root
    #密码
    password: 
    #驱动类
    driver-class-name: com.mysql.cj.jdbc.Driver

#MyBatis的相关配置
mybatis:
  #Mapper映射XML文件，建议写在resources目录下
  mapper-locations: classpath:mappers/*.xml
  #Mapper接口存放的目录
  type-aliases-package: com.example.demo.Mapper
  #开启驼峰命名
  configuration:
    map-underscore-to-camel-case: true

server:
  port: 8082

8、建立数据库

我使用的是MySQL数据库，使用软件是Navicat
新建数据库test，再新建表user，三个属性分别是id，username和password并填入数据
在这里插入图片描述
注意在创建表时修改username和password的字符集为utf-8

9、测试springboot项目

打开浏览器，输入http://localhost:8082/user/findAll 在这里插入图片描述

三、前后端连通

1、修改Vue项目中的UserMan.vue

向后端发送请求

<template>
  <div>
    <table>
      <tr>
        <td>编号</td>
        <td>用户名</td>
        <td>密码</td>
      </tr>
      <!--遍历数据-->
      <tr v-for="item in users" :key="item.id">
        <td>{{item.id}}</td>
        <td>{{item.username}}</td>
        <td>{{item.password}}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "UserMan",
  data:function(){
    return{
      users:[
        {
          id:1,
          username:'user',
          password:'123456'
        },
        {
          id:2,
          username:'admin',
          password:'123456'
        },
        {
          id:3,
          username:'yanao',
          password:'123456'
        }
      ]
    }
  },
  created() {
    this.$axios.get('/api')
        .then(resp=>{
          this.users=resp.data; //后端数据传给users数组
        })
  }
}
</script>

<style scoped>

</style>

2、修改Vue项目中的vue.config.js文件

此处用前端的方法使用反向代理进行跨域处理

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    proxy:{
      //api是后端数据接口的路径
      'api':{
        //后端数据接口的地址
        target:'http://localhost:8082/user/findAll',
        //允许跨域
        changeOrigin:true,
        //调用时用api替代根路径
        pathRewrite:{
          '^/api':""
        }
      }
    }
  },
  //关闭eslint校验
  lintOnSave:false
})

3、运行两个项目，并访问localhost:8081访问Vue页面
在这里插入图片描述
页面显示如此说明vue通过springboot成功访问到了数据库，说明项目运行成功

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^