Vue登录Demo

1.安装引入element-ui

命令行安装

npm install element-ui -S

引入

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Vue from 'vue'
Vue.use(ElementUI)

2.编写一个简单的登录功能

1.在components创建一个Login.vue

2.先搭建一个单页面组件的框架,

写html代码，注意template标签内一定要有一个html标签包裹所写的内容，例如下面的例子就用

包裹住
编写脚本
样式
用element-ui组件先编写一个基本的页面

3.我们给form，两个input框绑定数据，给表单控件绑定用v-model

在data方法里面，同样也要创建数据模型

loginForm: {
      username: '',
      password: '',
 }

4.表单验证

element-ui 里面有表单校验的例子
在data() 里面加上这个loginRules，用于表单验证

loginRules: {
        username: [
            {
                required: true,

                message: "请输入用户名",

                trigger: "blur"
            }
        ],
        password: [
           {
               required: true,
               message: '请输入密码',
               trigger: 'blur'
           }
        ]
      }

与组件的绑定

5.请求远程服务器登录

请求服务器要用axios

npm install axios --save

在src目录下创建utils文件夹，然后创建request.js文件

//直接引入
import axios from 'axios'

//因为axios默认发的是json格式数据，我们要做表单提交，需要更改axios配置
// 引入 Qs是为了把json格式，转为formdata 的数据格式
import Qs from 'Qs'
const service = axios.create({
    baseURL: 'api',
    timeout: 1000,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    transformRequest: [function (data) {
        // 对 data 进行任意转换处理
        return Qs.stringify(data);
    }],
});
export default service;

创建好request.js的工具类后，建议在src下创建apis文件夹，用于处理服务器请求
在apis下创建login.js，用于定义登录所需的请求服务器接口

import request from '@/utils/request'
export function loginReq(username,password) {
    return request.post('/login.json',{
        loginName: username,
        loginPassword: password
    })
}

创建好了之后，可以在Login.vue上调用loginReq接口

//先引入接口
import { loginReq } from '@/apis/Login'
//在methods加上处理方法
methods: {
      handleLogin (){
           this.$refs.loginForm.validate((valid) => {
               if(valid){
                  loginReq(this.loginForm.username,this.loginForm.password).then((res) => {
                      console.log(res.data.status);
                  })
               }else{
                   console.log('用户名或密码错误')
               }
           })
      }
  }
//在el-button 加上点击效果
登录

6.登录错误处理

可以用element-ui直接弹出消息提示

this.$message.error("用户名或密码错误");

7.跳转

登录成功之后，需要马上跳转到个人首页

this.$router.push({
          name: "Home",
          params: {
          username: this.loginForm.username
       }
});

8.处理跨域，在config/index.js中的dev对象加上

proxyTable: {
      '/api/**': {
        target: 'http://127.0.0.1:6600/',
        changeOrigin: true, //改变源
        pathRewrite: {
          '^/api': '/'
        }
      },
    }

五.项目打包与后端整合

1.项目打包

打开config文件夹下index.js，修改build 对象的属性assetsPublicPath，改为

assetsPublicPath: './',

dev.env.js 和 prod.env.js 分别对应的是开发环境和生产环境的配置, 可以分别在这两个文件夹添加BASE_API 属性，表示请求服务器的前缀，而生产环境下直接设置为'"/"'就可以了，因为打包后是直接放在服务器下的，跟服务器相同域名

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  BASE_API: '"/"'
}

在终端输入

npm run build

等运行完成如果出现

  Tip: built files are meant to be served over an HTTP server.
  Opening index.html over file:// won't work.

表示编译成功,在根目录的dist文件夹下，则是编译好的文件

2.集成到Spring boot

把dist下面的所有文件，包括static文件夹 和 index.html 直接扔到 spring boot项目中resources的static文件夹中
重启项目，就完成了