Springboot+Vue+Element UI+MySQL实现简单的页面验证登录及前后端数据传递

① 使用Vue+Element UI创建简单的登录页面

创建Vue项目:
命令行进入项目文件夹，输入:

vue create spring_vue_project(项目名)

启动Vue项目:
进入vue项目文件夹，输入:

cd spring_vue_project

启动项目，输入:

npm run serve

Vue项目文件简单介绍：

node_modules: 存包管理的一些依赖，如果项目需要上传到版本控制平台，不建议上传此文件夹（拷贝下来的项目可以通过 npm i 进行下载
public：放公有文件
src: 编写前端代码主要涉及到的文件，main.js为整个项目的入口文件
package.json: 版本，启动命令。“dependencies” 为生产环境依赖， “devDependencies” 为开发环境依赖

修改vue.config.js设置项目端口及自启动:

module.exports={
   
  devServer:{
   
    port:8090, //端口
    host:'localhost',
    open:true, //自启动
  }
}

修改完成后，重启Vue项目

安装并引入 Element UI：
安装：

npm i element-ui -S

引入依赖:
在main.js中写入一下内容:

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
   
  el: '#app',
  render: h => h(App)
});

分别创建 home.vue 和 login.vue 两个页面文件并配置路由：
在views文件夹下创建 home.vue 和 login.vue
在router文件夹下的 index.js 中修改路由:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
   
    path: '/', //如果url为空，重定向到home页面
    redirect:'/home'
  },
  {
   
    path: '/home',//主页
    name: 'home',
    component:()=>import('../views/home.vue')
  },
  {
   
    path: '/login',//登录页
    name: 'login',
    component:()=>import('../views/login.vue')
  }
]

const router = new VueRouter({
   
  routes
})

export default router

修改 App.vue，让他显示路由页面:

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

使用 Element UI 完善 login.vue：
功能：

• 输入框校验(是否输入，输入长度范围)
• 验证成功后跳转到 home.vue

具体实现（通过 Form组件完成）：

<template>
  <div class="about">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

        <el-form-item label="用户名" prop="username">
            <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="ruleForm.password"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
        </el-form-item>
    </el-form>
  </div>
</template>

<script>
    export default{
   
        data(){
   
            return{
   
                ruleForm:{
   
                    username:'',
                    password: