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 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文件：

    4.0.0
    com.cloud
    cloud-admin
    0.0.1-SNAPSHOT
    cloud-admin
    cloud-admin

    
        1.8
        UTF-8
        UTF-8
        2.3.7.RELEASE
    

    
        
            org.springframework.boot
            spring-boot-starter
        
        
        
        
            org.springframework.boot
            spring-boot-starter-web
        
        
        
        
            org.mybatis.spring.boot
            mybatis-spring-boot-starter
            1.2.0
        
        
        
        
            mysql
            mysql-connector-java
        

        
            org.springframework.boot
            spring-boot-starter-test
            test
            
                
                    org.junit.vintage
                    junit-vintage-engine
                
            
        
    

    
        
            
                org.springframework.boot
                spring-boot-dependencies
                ${spring-boot.version}
                pom
                import
            
        
    

    
        
            
                org.apache.maven.plugins
                maven-compiler-plugin
                3.8.1
                
                    1.8
                    1.8
                    UTF-8
                
            
            
                org.springframework.boot
                spring-boot-maven-plugin
                2.3.7.RELEASE
                
                    com.cloud.CloudAdminApplication
                
                
                    
                        repackage
                        
                            repackage
                        
                    
                
            
        
    

（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 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 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 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: ''
})

（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并调用后台接口，渲染数据

（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 运行项目