本文共 3458 字，大约阅读时间需要 11 分钟。

1.简介

与 Angular，React 是目前前端三大框架，Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2.SpringBoot 2.0 与 Vue 的 整合

1.安装 Vue

我们可以通过 的方式来进行安装，在安装好 npm 的前提下，我们可以通过下面方法构建一个vue 项目。

# 全局安装 vue-cli 脚手架$ cnpm install --global vue-cli# 创建一个基于 webpack 模板的新项目$ vue init webpack my-project# 进入项目$ cd my-project# 下载依赖$ npm install# 运行项目$ npm run dev# 打包项目$ npm run build

执行 $ npm run dev 后，访问 http://localhost:8080/#/ 即可进入 vue 主页。

2.vue 实现代码

这是 vue 的主要目录，我们的代码写在该目录下

以上图片来自：https://www.cnblogs.com/goldlong/p/8027997.html components 是组件，这里面编写了我们要访问的视图代码 以 Login 为例实现登录功能

router 文件里面配置了路由，通过指定的 url 访问到特定的组件

index.js 文件代码如下

import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'import Login from '@/components/Login'import Test from '@/components/Test'Vue.use(Router)export default new Router({  routes: [    {      path: '/hello',      name: 'HelloWorld',      component: HelloWorld    }, {      path: '/',      name: 'Login',      component: Login    },  {      path: '/test',      name: 'Test',      component: Test    }  ]})

在utils 里面，我们定义了不同类型的请求发送数据给后端的 API

/** *@author :hly *@gkhub :https://gkhub.com/huangliangyun @blog :blog.csdn.net/Sirius_hly *@date :2018/11/24 */import axios from 'axios'let base = ''export const postRequest = (url, params) => {  return axios({    method: 'post',    url: `${base}${url}`,    data: params,    transformRequest: [function (data) {      // Do whatever you want to transform the data      let newData= ''      for (let k in data) {        newData+= encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) + '&'      }      return newData    }],    headers: {      'Content-Type': 'application/x-www-form-urlencoded'    }  })}

自此，我们与 SpringBoot 后端交互的代码就已经基本实现了，vue 和 SpringBoot 是两个项目，他们配置了不同的端口，如果要如果要间接访问，我们还需要进行跨域的配置。

找到 vue 项目下 config 的 index.js 文件

修改proxyTable，target 是 SpringBoot 的 地址和端口

//跨域    proxyTable: {      //别名      '/': {        target: 'http://localhost:8081',        changeOrigin: true,        pathRewrite: {          '^/': ''        }      }    },

完成后启动项目。

3.SpringBoot 实现代码

关键代码如下，接收 vue 端发送过来的数据，根据查询的结构，以 json 的形式返回 vue 端。

@Controllerpublic class UserController {    @Autowired    UserDao userDao;    @RequestMapping(value = "/login",method = RequestMethod.POST)    public ResultBean login(@RequestParam(value="username",required=false)String username,@RequestParam(value="password",required=false)String password , HttpServletResponse response) throws IOException {        System.err.println(username+": "+password);        if(password.equals(userDao.selectUserByUsername(username).getPassword())) {            response.setContentType("application/json;charset=utf-8");            PrintWriter out = response.getWriter();            out.write("{\"status\":\"success\",\"msg\":\"登录成功\"}");            out.flush();            out.close();        }else {            response.setContentType("application/json;charset=utf-8");            PrintWriter out = response.getWriter();            out.write("{\"status\":\"error\",\"msg\":\"登录失败\"}");            out.flush();            out.close();        }        return  null;    }}

4.SpringBoot 与 Vue 的集成

我们通过执行 $ npm run build 命令，打包 vue 项目，会生成一个 dist 文件，我们把这个文件直接复制到 SpringBoot 项目的 static 下，只启动 SpringBoot 项目 ，访问 http://localhost:8081/index.html#/ 就能看到我们的 vue 页面。

公众号：【星尘Pro】

github：

推荐阅读