毕设（一）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></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路由模式路径带#号，而且默认是Hashhistory: 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-componentsUserMan}
}
</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;}@Overridepublic 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 {@Autowiredprivate 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 {@Autowiredprivate 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: trueserver: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成功访问到了数据库，说明项目运行成功

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

基于springboot 快速搭建简单前后端分离项目-后台框架
目录 1.新建project 2.选择依赖 3.简单配置 4.数据库准备 5.完成后台逻辑代码 5.1创建java实体对象 5.2创建repository 5.3单元测试 5.4编写controlle ...
毕设：基于SpringBoot+Vue 实现云音乐(前后端分离)
文章目录一.简介 2.项目介绍二.功能 2.功能介绍三.核心技术 1.系统架构图 2.技术选型五.运行 3.截图前端界面后台管理界面总结 1.完整工程 2.其他一.简介 2.项目介绍 ...
基于 SpringBoot + Vue 的在线课堂前后端分离项目
开发时间:2022.10.17 - 2022.11.04 开源项目: 服务端:atguigu-course-backend 后台管理系统:atguigu-course-frontend 移动端微信公众 ...
SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建【后端篇】【快速生成后端代码、封装结果集、增删改查、模糊查找】【毕设基础框架】
前后端分离项目快速搭建[后端篇] 数据库准备后端搭建 1.快速创建个SpringBoot项目 2.引入依赖 3.编写代码快速生成代码 4.运行代码生成器生成代码 5.编写application.pr ...
从0搭建一个Springboot+vue前后端分离项目(一)安装工具,创建项目
从0搭建一个Springboot+vue前后端分离项目(二)使用idea进行页面搭建+页面搭建参考学习vue官网文档 https://v3.cn.vuejs.org/guide/installati ...
SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建【前端篇】【快速生成后端代码、封装结果集、增删改查、模糊查找】【毕设基础框架】
前后端分离项目快速搭建[前端篇] 后端篇前端篇创建vue项目安装所需工具开始编码 1.在根目录下添加vue.config.js文件 2.编写main.js 3.编写App.vue 4.编写ax ...
B站云E办Vue+SpringBoot前后端分离项目——MVC三层架构搭建后台项目
本项目来源B站云E办,笔记整理了项目搭建的过程和涉及的知识点.对于学习来说,不是复制粘贴代码即可,要知其然知其所以然.希望我的笔记能为大家提供思路,也欢迎各位伙伴的指正. 项目前端学习笔记目录 B站云 ...
【两万字图文详解】运动会管理系统-前后端分离-项目开发：【后端】SpringBoot, SpringMVC, MyBatis【前端】Vue.js，ElementUI
项目名称:运动会管理系统技术栈: 后端:SpringBoot,SpringMVC,MyBatis,tkmapper,Maven聚合工程等前端:Vue.js,Element-u ...
Springboot+vue 社团管理系统（前后端分离）
Springboot+vue 社团管理系统(前后端分离) zero.项目功能设计图一.数据库设计(项目准备) 1.建表 2.表目录二.前端编写(vue) 1.搭建Vue框架 2.放入静态资源(as ...