Springboot+Vue整合笔记【超详细】

• | 作者：江夏
• | 知乎：https://www.zhihu.com/people/qing-ni-chi-you-zi-96
• | GitHub：https://github.com/JiangXia-1024?tab=repositories
• | 博客地址：https://blog.csdn.net/qq_41153943

Part 1

目前很多公司的开发模式都是前后的分离的分工模式，这样能够做到各司其职，提高开发的效率。之前也有文章介绍了springboot项目和vue创建一个简单的前端项目，这篇文章则是将springboot和vue进行简单的整合，实现一个简单的登录页面。

最后本文的源码都会同步至github，欢迎下载使用和star！


Part 2

先介绍下本文的开发工具，后端使用的java的版本是jdk1.8，框架是springboot，开发工具是idea，前端则是使用vue.js，开发工具是vs code。

本文的前提条件是需要对springboot和vue.js 有个一定简单的了解。

关于如何使用idea创建一个springboot项目可以参考：SpringBoot入门：使用IDEA和Eclipse构建第一个SpringBoot项目。

如何创建一个vue前端项目可以参考:Vue学习笔记(一)：从零开始创建一个Vue前端项目。


一、后端Springboot项目开发：

这里先准备下数据，创建一个user表，并插入数据，sql如下：

1. CREATE TABLE `user` (
2. `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'ID',
3. `email` varchar(255) NOT NULL COMMENT '邮箱',
4. `password` varchar(255) NOT NULL COMMENT '密码',
5. `username` varchar(255) NOT NULL COMMENT '姓名',
6. PRIMARY KEY (`id`),
7. UNIQUE KEY `email` (`email`) USING BTREE
8. ) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;
11. INSERT INTO `user` VALUES ('1', '1@qq.com', '123456', '张三');
12. INSERT INTO `user` VALUES ('2', '2@qq.com', '234567', '李四');
13. INSERT INTO `user` VALUES ('3', '3@qq.com', '345678', '王五');

复制代码 首先创建一个springboot项目，然后在pom文件中引入相关依赖：

1. <?xml version="1.0" encoding="UTF-8"?>
2. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
3.          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
4.     <modelVersion>4.0.0</modelVersion>
5.     <parent>
6.         <groupId>org.springframework.boot</groupId>
7.         <artifactId>spring-boot-starter-parent</artifactId>
8.         <version>2.3.2.RELEASE</version>
9.         <relativePath/> <!– lookup parent from repository –>
10.     </parent>
11.     <groupId>com.springboot</groupId>
12.     <artifactId>springbootdemo</artifactId>
13.     <version>0.0.1-SNAPSHOT</version>
14.     <name>springbootdemo</name>
15.     <description>Demo project for Spring Boot</description>
17.     <properties>
18.         <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
19.         <java.version>1.8</java.version>
20.     </properties>
22.     <dependencies>
23.         <dependency>
24.             <groupId>org.springframework.boot</groupId>
25.             <artifactId>spring-boot-starter-web</artifactId>
26.         </dependency>
27.         <dependency>
28.             <groupId>org.springframework.boot</groupId>
29.             <artifactId>spring-boot-starter-thymeleaf</artifactId>
30.         </dependency>
31.         <dependency>
32.             <groupId>org.springframework.boot</groupId>
33.             <artifactId>spring-boot-starter-data-jpa</artifactId>
34.         </dependency>
35.         <dependency>
36.             <groupId>org.springframework.boot</groupId>
37.             <artifactId>spring-boot-devtools</artifactId>
38.             <optional>true</optional>
39.         </dependency>
40.         <dependency>
41.             <groupId>org.springframework.boot</groupId>
42.             <artifactId>spring-boot-starter-test</artifactId>
43.             <scope>test</scope>
44.         </dependency>
45.         <!– Spring Boot Mybatis 依赖 –>
46.         <dependency>
47.             <groupId>org.mybatis.spring.boot</groupId>
48.             <artifactId>mybatis-spring-boot-starter</artifactId>
49.             <version>1.2.0</version>
50.         </dependency>
51.         <!– MySQL 连接驱动依赖 –>
52.         <dependency>
53.             <groupId>mysql</groupId>
54.             <artifactId>mysql-connector-java</artifactId>
55.             <version>5.1.39</version>
56.         </dependency>
58.         <!–io工具类–>
59.         <dependency>
60.             <groupId>commons-io</groupId>
61.             <artifactId>commons-io</artifactId>
62.             <version>2.5</version>
63.         </dependency>
64.     </dependencies>
65.     <build>
66.         <plugins>
67.             <!–运用SpringBoot 插件  使用spring-boot-devtools模块的应用,当classpath中的文件有改变时，会自动重启！–>
68.             <plugin>
69.                 <groupId>org.springframework.boot</groupId>
70.                 <artifactId>spring-boot-maven-plugin</artifactId>
71.                 <configuration>
72.                     <fork>true</fork>
73.                 </configuration>
74.             </plugin>
75.         </plugins>
76.     </build>
78. </project>

复制代码 APPlication.properties文件，添加配置内容如下：

1. ## 数据源配置
2. spring.datasource.url=jdbc:mysql://localhost:3306/jdbc?useUnicode=true&characterEncoding=utf8&autoReconnect=true&failOverReadOnly=false
3. spring.datasource.username=root
4. spring.datasource.password=jiang
5. spring.datasource.driver-class-name=com.mysql.jdbc.Driver
7. ## Mybatis 配置
8. # 配置为 com.pancm.bean 指向实体类包路径。
9. mybatis.typeAliasesPackage=com.springboot.bean
10. # 配置为 classpath 路径下 mapper 包下，* 代表会扫描所有 xml 文件。
11. mybatis.mapperLocations=classpath\:mapper/*.xml

复制代码 开始编写核心逻辑代码：

新建一个User.java实体类，代码如下：

1. package com.springboot.springbootdemo.bean;
2. public class User {
3.     private long id;
4.     private String email;
5.     private String password;
6.     private String username;
7.     public long getId() {
8.         return id;
9.     }
10.     public void setId(int id) {
11.         this.id = id;
12.     }
13.     public String getEmail() {
14.         return email;
15.     }
16.     public void setEmail(String email) {
17.         this.email = email;
18.     }
19.     public String getPassword() {
20.         return password;
21.     }
22.     public void setPassword(String password) {
23.         this.password = password;
24.     }
25.     public String getUsername() {
26.         return username;
27.     }
28.     public void setUsername(String username) {
29.         this.username = username;
30.     }
31. }

复制代码 然后再新建一个dao文件：

1. package com.springboot.springbootdemo.dao;
3. import com.springboot.springbootdemo.bean.User;
4. import org.apache.ibatis.annotations.*;
5. import org.springframework.data.repository.query.Param;
6. import java.util.List;
8. @Mapper
9. public interface UserDao {
10.     /**
11.      * 新增数据
12.      */
13.     @Insert("insert into user(id,email,password,username) values (#{id},#{email},#{password},#{username})")
14.     void addUser(User user);
16.     /**
17.      * 修改数据
18.      */
19.     @Update("update user set username=#{username},password=#{password} where id=#{id}")
20.     void updateUser(User user);
22.     /**
23.      * 删除数据
24.      */
25.     @Delete("delete from user where id=#{id}")
26.     void deleteUser(int id);
28.     /**
29.      * 根据查询数据
30.      *
31.      */
32.     @Select("select id,email,password,username from user where username=#{userName}")
33.     User findByName(@Param("userName") String userName);
35.     /**
36.      * 查询所有数据
37.      */
38.     @Select("select id,email,password,username FROM user")
39.     List<User> findAll();
40. }

复制代码 然后就是service和UserServiceImpl文件：

userservice:

1. package com.springboot.springbootdemo.service;
3. import com.springboot.springbootdemo.bean.User;
5. import java.util.List;
7. public interface UserService {
8.     /**
9.      * 新增用户
10.      * @param user
11.      * @return
12.      */
13.     boolean addUser(User user);
15.     /**
16.      * 修改用户
17.      * @param user
18.      * @return
19.      */
20.     boolean updateUser(User user);
23.     /**
24.      * 删除用户
25.      * @param id
26.      * @return
27.      */
28.     boolean deleteUser(int id);
30.     /**
31.      * 根据名字查询用户信息
32.      * @param userName
33.      */
34.     User findUserByName(String userName);
37.     /**
38.      * 查询所有数据
39.      * @return
40.      */
41.     List<User> findAll();
42. }

复制代码 UserServiceImpl文件：

1. package com.springboot.springbootdemo.service;
2. import com.springboot.springbootdemo.bean.User;
3. import com.springboot.springbootdemo.dao.UserDao;
4. import org.springframework.beans.factory.annotation.Autowired;
5. import org.springframework.stereotype.Service;
7. import java.util.List;
9. @Service
10. public class UserServiceImpl implements UserService {
11.     @Autowired
12.     private UserDao userDao;
14.     @Override
15.     public boolean addUser(User user) {
16.         boolean flag=false;
17.         try{
18.             userDao.addUser(user);
19.             flag=true;
20.         }catch(Exception e){
21.             e.printStackTrace();
22.         }
23.         return flag;
24.     }
26.     @Override
27.     public boolean updateUser(User user) {
28.         boolean flag=false;
29.         try{
30.             userDao.updateUser(user);
31.             flag=true;
32.         }catch(Exception e){
33.             e.printStackTrace();
34.         }
35.         return flag;
36.     }
38.     @Override
39.     public boolean deleteUser(int id) {
40.         boolean flag=false;
41.         try{
42.             userDao.deleteUser(id);
43.             flag=true;
44.         }catch(Exception e){
45.             e.printStackTrace();
46.         }
47.         return flag;
48.     }
50.     @Override
51.     public User findUserByName(String userName) {
52.         return userDao.findByName(userName);
53.     }
56.     @Override
57.     public List<User> findAll() {
58.         return userDao.findAll();
59.     }
60. }

复制代码 最后就是controller文件：

1. package com.springboot.springbootdemo.controller;
2. import com.springboot.springbootdemo.bean.User;
3. import com.springboot.springbootdemo.service.UserService;
4. import org.springframework.beans.factory.annotation.Autowired;
5. import org.springframework.web.bind.annotation.*;
6. import java.util.List;
7. @RestController
8. @RequestMapping(value = "/do/user")
9. public class UserController {
10.     @Autowired
11.     private UserService userService;
13.     @RequestMapping(value = "/user", method = RequestMethod.POST)
14.     public boolean addUser(@RequestBody User user) {
15.         System.out.println("新增数据：");
16.         return userService.addUser(user);
17.     }
19.     @RequestMapping(value = "/user", method = RequestMethod.PUT)
20.     public boolean updateUser(@RequestBody User user) {
21.         System.out.println("更新数据：");
22.         return userService.updateUser(user);
23.     }
25.     @RequestMapping(value = "/user", method = RequestMethod.DELETE)
26.     public boolean delete(@RequestParam(value = "id", required = true) int Id) {
27.         System.out.println("删除数据：");
28.         return userService.deleteUser(Id);
29.     }
32.     @RequestMapping(value = "/user", method = RequestMethod.GET)
33.     public User findByUserName(@RequestParam(value = "userName", required = true) String userName) {
34.         System.out.println("查询数据：");
35.         return userService.findUserByName(userName);
36.     }
38.     @RequestMapping(value = "/userAll", method = RequestMethod.GET)
39.     public List<User> findByUserAge() {
40.         System.out.println("查询所有数据:");
41.         return userService.findAll();
42.     }
43. }

复制代码 然后启动项目，进行测试：

这里后端的接口基本就开发完成了，接着开发前端的vue项目。


二、前端Vue项目开发：

这里的前端的开发是在前面提到的那篇文章的demo基础上进行开发。

先引入一些组件，在终端窗口输入下面的命令:

1. #引入axios
2. cnpm install axios –save-dev

复制代码 然后在main.js文件中引入，main.js文件如下：

1. // The Vue build version to load with the `import` command
2. // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
3. import Vue from 'vue'
4. import App from './App'
5. import router from './router'
6. import './plugins/element.js'
7. //引入axios
8. 16 import axios from 'axios'
9. 17 Vue.prototype.$ajax = axios
10. Vue.config.productionTip = false
12. /* eslint-disable no-new */
13. new Vue({
14.   el: '#app',
15.   router,
16.   components: { App },
17.   template: '<App/>'
18. })

复制代码 接着在componment文件夹下新建一个页面：

1. <template>
2.   <div class="layout">
3.     <Layout>
4.       <Content :style="{padding: '0 50px'}">
5.         <Card>
6.           <div style="min-height: 200px;">
7.             <v-table
8.               is-horizontal-resize
9.               style="width:100%"
10.               :columns="columns"
11.               :table-data="tableData"
12.               row-hover-color="#eee"
13.               row-click-color="#edf7ff"
14.             ></v-table>
15.           </div>
16.         </Card>
17.       </Content>
18.     </Layout>
19.   </div>
20. </template>
22. <script>
23.   export default {
24.     name: "main-page",
25.     data() {
26.       return {
27.         tableData: [],
28.         columns: [
29.           {field: 'id', title: '编号', width: 80, titleAlign: 'center', columnAlign: 'center',isResize:true},
30.           {field: 'email', title: '邮箱', width: 150, titleAlign: 'center', columnAlign: 'center',isResize:true},
31.           {field: 'password', title: '密码', width: 150, titleAlign: 'center', columnAlign: 'center',isResize:true},
32.           {field: 'username', title: '姓名', width: 280, titleAlign: 'center', columnAlign: 'left',isResize:true}
33.         ]
34.       }
35.     },
36.     created() {
37.         //这里直接在created函数中使用axios的get请求向后台获取用户信息数据
38.         // 在实际开发中可以卸载apiadress.js中配置具体的method对应的路径和接口，这个
39.         //后面完善功能的情况下再进行介绍
40.         this.$ajax('http://localhost:8080/do/user/userAll').then(res => {
41.          this.tableData = res.data
42.           console.log(res.data);
43.        }).catch(functiоn (error) {
44.           console.log(error);
45.      });
46.   }
47.   }
48. </script>
49. <style scoped>
50.   .layout{
51.     border: 1px solid #d7dde4;
52.     background: #f5f7f9;
53.     position: relative;
54.     border-radius: 4px;
55.     overflow: hidden;
56.     height: 100%;
57.   }
58.   .layout-logo{
59.     width: 100px;
60.     height: 30px;
61.     background: #5b6270;
62.     border-radius: 3px;
63.     float: left;
64.     position: relative;
65.     top: 15px;
66.     left: 20px;
67.     font-weight: bold;
68.     text-align: center;
69.     color: #49ffcc;
70.   }
71.   .layout-nav{
72.     width: 420px;
73.     margin: 0 auto;
74.     margin-right: 20px;
75.   }
76.   .layout-footer-center{
77.     text-align: center;
78.   }
79. </style>

复制代码 接着在index.js文件中加入该组件：

1. import Vue from 'vue'
2. import Router from 'vue-router'
3. import HelloWorld from '@/components/HelloWorld'
4. import HelloDemo from '@/components/HelloDemo'
5. import zicomponent from '@/components/zicomponent'
6. import fucomponent from '@/components/fucomponent'
7. import MainPage from '@/components/MainPage'
9. Vue.use(Router)
11. export default new Router({
12.   routes: [
13.     {
14.       path:'/hello',
15.       name:'HelloDemo',
16.       component:HelloDemo
17.     },
18.     {
19.       path: '/',
20.       name: 'HelloWorld',
21.       component: HelloWorld
22.     },
23.     {
24.       path: '/zi',
25.       name: 'zicomponent',
26.       component: zicomponent
27.     },
28.     {
29.       path: '/fu',
30.       name: 'fucomponent',
31.       component: fucomponent
32.     },
33.     {
34.       path: '/main',
35.       name: 'MainPage',
36.       component: MainPage
37.     }
38.   ]
39. })

复制代码 接着输入npm run dev，编译项目：

注意这里因为vue是8081端口，而springboot项目是8080端口，所以查不出数据。

这里可以看到报跨域的错误了。所以我们要对前端的代码进行下处理：

main.js文件加入下面的代码：

1. // 设置全局的axios
2. Vue.prototype.$axios=Axios
3. // 设置基本路径
4. Axios.defaults.baseURL='/api'

复制代码 config/index.js文件，在proxyTable里添加如下代码：

1. //X请求路径
2.     proxyTable: {
3.       '/api':{
4.         target:"http://localhost:8080/",
5.         changeOrigin:true,
6.         pathRewrite:{
7.           '^/api':''
8.         }
9.       }
10.     },

复制代码

最后重启下前端（我这里需要重启下不然没生效），然后编译：

Part 3

上面就是如果使用简单的将springboot和vue进行一个简单的整合，后续将对这块进行完善和继续开发，有任何问题欢迎交流讨论。

另外所有实战文章的源码都会同步至github，有需要的欢迎下载使用。

最后如果觉得本文写得不错，就点下赞和再看推荐给更多的人呗。

本文原创首发于微信公众号【1024笔记】，原文传送门！有兴趣的可以微信搜索关注。


GitHub源码地址

后端：https://github.com/JiangXia-1024/SpringBootDemo_02

前端：https://github.com/JiangXia-1024/vueDemo


历史文章：

• 分享一些实用的工具和自学网站，建议收藏
• Spring Boot开发图片上传并添加水印接口
• Vue学习笔记(一)：从零开始创建一个Vue前端项目
• Postman接口测试图文教程
• jQuery：选择器使用详解