vue+ElementUI+后台接口实现登录页面

1.工具：vscode、eclipse、chrome

2.过程
（1）在src/pages下新建文件夹，在该文件夹中新建index.vue，代码如下：

<template>
    <div class="login-container">
        <el-form :model="ruleForm2" :rules="rules2"
         status-icon
         ref="ruleForm2" 
         label-position="left" 
         label-width="0px" 
         class="demo-ruleForm login-page">
            <h3 class="title">系统登录</h3>
            <el-form-item prop="username">
                <el-input type="text" 
                    v-model="ruleForm2.username"
                    auto-complete="off" 
                    placeholder="用户名"
                ></el-input>
            </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" 
                        v-model="ruleForm2.password"
                        auto-complete="off" 
                        placeholder="密码"
                    ></el-input>
                </el-form-item>
            <el-checkbox 
                v-model="checked"
                class="rememberme"
            >记住密码</el-checkbox>
            <el-form-item style="width:100%;">
                <el-button type="primary" style="width:100%;" @click="login" :loading="logining">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>


<script>
import { myLogin } from '@/services/api.js'

export default {
    data(){
        return {
            logining: false,                      //设置登录按钮状态
            ruleForm2: {
                username: '',
                password: ''
            },
            rules2: {
                username: [{required: true, message: '请输入用户名', trigger: 'blur'}],   //登录时验证用户名密码是否为空
                password: [{required: true, message: '请输入密码', trigger: 'blur'}]
            },
            checked: false                        //设置是否记住密码初始状态
        }
    },
    methods: {
        login(event) {
            this.$refs.ruleForm2.validate((valid) => {
                if(valid){
                    myLogin({username : this.ruleForm2.username, password : this.ruleForm2.password})
                        .then(({retCode, retMsg}) => {
                            if (retCode === '0000') {
                                this.$message({
                                    type: 'success',
                                    message: retMsg,
                                })
                                this.$router.push({path: '/'});
                            }
                            else {
                                this.$message({     
                                    type: 'error',
                                    message: retMsg
                                })
                           // this.$router.go(0);
                        }
                    })
                }
            });
        }
    }
};
</script>

<style scoped>
.login-container {
    width: 100%;
    height: 100%;
}
.login-page {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 15px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
}
label.el-checkbox.rememberme {
    margin: 0px 0px 15px;
    text-align: left;
}
</style>

（2）点击登录按钮，点击时触发click事件调用methods中的login方法，如下图所示：

（3）src/services/index.js

/* 用户登录 */
export function myLogin (params) {
  return request({
    method: 'post',
    url: '/test/mylogin/login/login1',
    data: params    //post用data,get用params
  })
}

（4）config/index.js

assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
        '/test/mylogin': {    //test为项目名，其他参数请查询下方的java文件
          target: 'http://localhost:8080/',
            changeOrigin: true,
        }
    },

（5）src/router/index.js

const MyLogin = () => import('@/pages/login/')

{
      path: '/mylogin',
      name: '登录',
      component: MyLogin
    }

（6）LoginController.java

import java.util.HashMap;
import java.util.Map;

import javax.annotation.Resource;
import javax.ws.rs.Consumes;
import javax.ws.rs.POST;
import javax.ws.rs.Path;
import javax.ws.rs.Produces;
import javax.ws.rs.core.Response;

import lombok.extern.log4j.Log4j;

import org.jboss.resteasy.annotations.providers.jaxb.json.BadgerFish;
import org.springframework.stereotype.Controller;

@Path("/mylogin")
@Controller
@Log4j
public class LoginController {

	@POST
	@Path("/login/login1")     //login为包名，login1为自己取的名字
	@Consumes("application/json")
	@Produces("application/json; charset=utf-8")
	@BadgerFish
	public Response execute(Map paramMap) {
		RetInfo retInfo = RetInfoUtils.getRetInfoBySuccess();
		Map<String,Object> result = new HashMap<String,Object>();
		//String username = MapUtils.getString(paramMap, "username");
		String username = (String) paramMap.get("username");
		String password = (String) paramMap.get("password");
		if(username != "" && password != ""){
			if (!username.matches(("[0-9A-Za-z_]*"))) {
				System.out.println("用户名必须为字母或数字");
				retInfo.setRetCode("-2");
				retInfo.setRetMsg("用户名必须为字母或数字！");
			}
			else if( username.equals("admin") && password.equals("123456") ){
				System.out.println("登录成功！");
				retInfo.setRetCode("0000");
				retInfo.setRetMsg("登录成功！");
			}
			else{
				System.out.println("用户名或密码错误！");
				retInfo.setRetCode("-1");
				retInfo.setRetMsg("用户名或密码错误！");
			}
		}
		else{
			System.out.println("用户名或密码为空！");
			retInfo.setRetCode("-3");
			retInfo.setRetMsg("用户名或密码为空！");
		}
		retInfo.setObject(result);
		return javax.ws.rs.core.Response.ok().entity(retInfo).build();
	}
}

3.原理
index.vue通过导入src/router/index.js使url:localhost:端口号/#/mylogin生效，然后根据反向代理截取端口号后面的内容进行请求，通过api.js传递数据，反向代理到config/index.js找到后台url进行请求，请求完成后返回结果。