概述：本文主要讲述vue+springboot JPA实现登录注册的方法，springboot(2.1.3.RELEASE)、vue(3.5.5)均为当前最新版本，其中首页和登录效果如图所示：

1、安装node和npm

安装方法参考官网

2、安装vue和vue-cli

（1）方式一

npm install vue
npm install -g @vue/cli
npm install -g @vue/cli-init

（2）方式二：使用使用淘宝镜像安装

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install cnpm -g
cnpm install vue
cnpm install --global vue-cli

查看vue版本

vue --version

3、创建项目

vue init webpack my-project

#也可以使用下列命令，但是会缺少一些目录
vue create my-projec

4、安装并配置elementUI和Axios

（1）切换到my-project中安装

npm i element-ui -S
npm install axios -S

安装完成后，在package.json中会出现依赖

"dependencies": {
    "axios": "^0.18.0",
    "element-ui": "^2.7.2",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  }

（2）配置：在src下的main.js中增加如下内容

import ElementUI from 'element-ui'
import '../node_modules/element-ui/lib/theme-chalk/index.css'
import axios from '../node_modules/axios'
import qs from '../node_modules/qs'
​
Vue.use(ElementUI);
new Vue({
  ....
  axios,
  qs,
  ...
})

cdn引入方式

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
​
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

vue去掉访问路径中的'#'(hash模式),在router目录下的index.js开启history模式，history模式使用 history.pushState API 来完成 URL 跳转而无须重新加载页面

export default new Router({
  mode: 'history',
  routes: [...]
})

（3）测试

（1）elementUI测试,修改项目中components下的HelloWorld.vue，更多详情参见官网

<!--修改模板如下-->
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
        <el-button type="primary" @click="visible = true">Button</el-button>
            <el-dialog :visible.sync="visible" title="Hello world">
            <p>Try Element</p>
        </el-dialog>
        <br><br>
        <el-button type="primary" @click="getRequest">Get测试</el-button>
        <el-button type="primary" @click="postRequest">Post测试</el-button>
    <h2>Ecosystem</h2>
  </div>
</template>
​
<!--在data return方法内增加-->
visible: false

启动测试

cd my-project
npm run dev

#如使用vue create my-projec 启动使用
npm run serve

效果如图 

(2)Axios请求测试

发送get请求

this.$axios.get('/hello')
            .then(function(response) {
            console.log(response);
            })
            .catch(function(err) {
            console.log(err);
            });

发送post请求

<!-- axios的表单提交,Content-Type默认为application/json;charset=UTF-8 -->
this.$axios.post('/sayHello',data,{headers:{'Content-Type':'application/x-www-form-urlencoded'}})
            .then(function(response) {
            console.log(response);
            })
            .catch(function(err) {
            console.log(err);
            });

测试结果如下：

Axios基本语法

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

Axios文档

• 英文：https://www.npmjs.com/package/axios
• 中文：https://www.kancloud.cn/yunye/axios/234845

5、创建springboot项目

SpringBoot JPA数据访问的详细内容参见官网指导手册

项目结构如图：

其中static目录下的文件从my-project打包而来，命令如下

npm run build

用户注册后，会返回注册状态信息，再测试登录即可

(1)后台接收参数的一点说明

@ModelAttribute 接受表单的数据，content-type的类型为application/x-www-form-urlencoded,
前台使用qs时默认会把content-type转为application/x-www-form-urlencoed;
@RequestBody 接受表单数据，content-type类型为application/json；
@RequestParam 接受URL中的请求参数（不用于表单提交）

(2)前后端分离跨域处理

修改vue项目中config下的index.js文件

    proxyTable: {
        '/':{
            target:'http://localhost:8080',
            changeOrigin:true,
            pathRewrite:{
                '^/':''
            }
        }
    }

说明：http://localhost:8080为要请求的服务器地址，如果get或post请求为：/user/login，则相当于：http://localhost:8080/user/login

参考链接：

Spring Boot+Vue从零开始搭建系统（三）：项目前后端分离_实现简单登录demo