vue+ElementUI+后台接口实现登录页面
1.工具:vscode、eclipse、chrome2.过程(1)在src/pages下新建文件夹,在该文件夹中新建index.vue,代码如下:<template><div class="login-container"><el-form :model="ruleForm2" :rules="rules2"sta...
·
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进行请求,请求完成后返回结果。
更多推荐
已为社区贡献1条内容
所有评论(0)