Vue学习笔记(二)：Springboot+Vue项目整合

最新推荐文章于 2024-06-16 14:44:22 发布

Lucky扬

最新推荐文章于 2024-06-16 14:44:22 发布

阅读量2.5k

点赞数 1

分类专栏： Vue 文章标签： vue.js spring boot java

本文链接：https://blog.csdn.net/baidu_38300480/article/details/122213108

版权

Vue 专栏收录该内容

5 篇文章 3 订阅

订阅专栏

前面介绍了如何从零创建Vue项目，今天来谈谈如何整合SpringBoot和Vue，实现前后端的数据交互。

1.基于Springboot+Mybatis+MySQL开发后台接口

（1）建表并初始化数据

-- 创建数据表
create table if not exists user (
	id int not null auto_increment comment 'ID',
	username varchar(255) not null comment '姓名',
  age int not null comment '密码',
  primary key (id)
) engine=InnoDB default CHARSET=utf8;
-- 初始化数据
insert into user values ('1','张三',17);
insert into user values ('2','李四',18);
insert into user values ('3','王五',19);

（2）创建Springboot项目并在pom文件中引入相关依赖

pom文件：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.cloud</groupId>
    <artifactId>cloud-admin</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>cloud-admin</name>
    <description>cloud-admin</description>

    <properties>
        <java.version>1.8</java.version>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <spring-boot.version>2.3.7.RELEASE</spring-boot.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>
        
        <!-- Spring Web -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        
        <!-- Spring Boot Mybatis -->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>1.2.0</version>
        </dependency>
        
        <!-- MySQL -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
    </dependencies>

    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-dependencies</artifactId>
                <version>${spring-boot.version}</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.8.1</version>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                    <encoding>UTF-8</encoding>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>2.3.7.RELEASE</version>
                <configuration>
                    <mainClass>com.cloud.CloudAdminApplication</mainClass>
                </configuration>
                <executions>
                    <execution>
                        <id>repackage</id>
                        <goals>
                            <goal>repackage</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

</project>

（3）在application.properties核心配置文件中添加如下配置

spring.application.name=cloud-admin

# 端口配置
server.port=8081

# 数据源配置
spring.datasource.url=jdbc:mysql://localhost:3306/cloud?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

# Mybatis 配置
# 配置为com.cloud.domain指向实体类包路径
mybatis.typeAliasesPackage=com.cloud.domain
# 配置为classpath路径下mapper包下，* 代表会扫描所有xml文件
mybatis.mapperLocations=classpath\:mapper/*.xml

（4）创建实体类

package com.cloud.domain;

public class User {

	private Long id;
	private String username;
	private Integer age;

	public long getId() {
		return id;
	}

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

	public String getUsername() {
		return username;
	}

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

	public int getAge() {
		return age;
	}

	public void setAge(Integer age) {
		this.age = age;
	}

}

（5）创建Dao

package com.cloud.dao;

import java.util.List;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import com.cloud.domain.User;

@Mapper
public interface UserDao {

	@Select("select id,username,age from user")
	List<User> findAll();

}

（6）创建Service

package com.cloud.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.cloud.dao.UserDao;
import com.cloud.domain.User;

@Service
public class UserService {

	@Autowired
	private UserDao userDao;

	@Override
	public List<User> findAll() {
		return userDao.findAll();
	}

}

（7）创建Controller

package com.cloud.controller;

import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.cloud.domain.User;
import com.cloud.service.UserService;

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

	@Autowired
	private UserService userService;

	@GetMapping("/list")
	public List<User> findByUserAge() {
		return userService.findAll();
	}

}

2.基于axios完成Vue项目与后端的数据交互

（1）安装axios

npm install axios -S

（2）在main.js文件中引入axios

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'

/* 设置全局的axios */
Vue.prototype.$axios = axios
/* 设置基本路径 */
axios.defaults.baseURL = '/api'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

（3）在config/index.js中配置跨域

由于Vue是8080端口，而后台接口是8081端口，直接访问将产生跨域问题，因此在请求接口之前，需要配置代理请求路径。Vue实现跨域的原理和Nginx类似，浏览器是禁止跨域的，但是由服务端请求服务端是没有跨域问题的，当我们在本地运行 npm run dev 命令时，实际上是用Node运行了一个服务器，Vue实际上是将请求发给了自己的服务器，再由服务器转发给后台服务器，由此解决了跨域问题。

在config/index.js的proxyTable里添加如下代码即可

// 代理请求路径
proxyTable: { // 配置跨域
  '/api':{
    target:"http://localhost:8081/",  // 后台接口地址
    changeOrigin:true, //允许跨域
    pathRewrite:{ // 重写访问路径
      // 当我们在浏览器中看到的请求地址为：http://localhost:8080/api/user/list
      // 实际上访问的地址是：http://localhost:8081/user/list
      '^/api':''
    }
  }
},

（4）在components中创建组件ApiDemo.vue并调用后台接口，渲染数据

<template>
    <div>
        <table border="1" cellspacing="0" cellpadding="0">
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
            <tr v-for="item in userList" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.username}}</td>
                <td>{{item.age}}</td>
            </tr>
        </table>
    </div>
</template>
<script>
export default {
    name: 'ApiDemo',
    data() {
        return {
            userList: []
        }
    },
    created() {
        this.$axios('http://localhost:8080/api/user/list').then(res => {
            this.userList = res.data
            console.log(res.data);
        }).catch(function (error) {
            console.log(error);
        });
    }
}
</script>
<style scoped>
</style>

（5）在router/index.js文件中对组件进行路由配置

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import ApiDemo from '@/components/ApiDemo'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/api',
      name: 'ApiDemo',
      component: ApiDemo
    },
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

（6）最后，命令行输入 npm run dev 运行项目

Lucky扬

关注

1
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
Vue学习笔记(二)：Springboot+Vue项目整合

前面介绍了如何从零创建Vue项目，今天来谈谈如何整合SpringBoot和Vue，实现前后端的数据交互。1.基于Springboot+Mybatis+MySQL开发后台接口（1）建表并初始化数据-- 创建数据表create table if not exists user ( id int not null auto_increment comment 'ID', username varchar(255) not null comment '姓名', age i...
复制链接

扫一扫

专栏目录