Vue.js 와 Element-UI 를 사용 하여 간단 한 로그 인 페이지 의 인 스 턴 스 를 만 듭 니 다.
4967 단어 Vue.jsElement-UI로그 인페이지
효과 가 간단 합 니 다:
코드 는 다음 과 같 습 니 다:
전단 페이지
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="//unpkg.com/[email protected]/lib/theme-default/index.css" rel="external nofollow" >
<script type="text/javascript" src="vue/dist/vue.js"></script>
<script type="text/javascript" src="element-ui/lib/index.js"></script>
<script type="text/javascript" src="jquery/jquery-3.1.1.js"></script>
<style>
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.login-box {
margin-top:20%;
margin-left:40%;
}
</style>
</head>
<body>
<div class="login-box" id="app" >
<el-row>
<el-col :span="8">
<el-input id="name" v-model="name" placeholder=" ">
<template slot="prepend"> </template>
</el-input>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-input id="password" v-model="password" type="password" placeholder=" ">
<template slot="prepend"> </template>
</el-input>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-button id="login" v-on:click="check" style="width:100%" type="primary"> </el-button>
</el-col>
</el-row>
</div>
</body>
<script type="text/javascript">
new Vue({
el : '#app',
data : {
name : '',
password : ''
},
methods : {
check : function(event){
//
var name = this.name;
var password = this.password;
if(name == '' || password == ''){
this.$message({
message : ' ！',
type : 'error'
})
return;
}
$.ajax({
url : 'login',
type : 'post',
data : {
name : name,
password : password
},
success : function(data) {
var result = data.result;
if(result == 'true' || result == true){
alert(" ");
}else {
alert(" ");
}
},
error : function(data) {
alert(data);
},
dataType : 'json',
})
}
}
})
</script>
</html>
package com.moson.backstage.controller;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* LoginController
* @author MoXingJian
* @email [email protected]
* @date 2017 6 20 3:03:50
* @version 1.0
*/
@WebServlet("/login")
public class LoginController extends HttpServlet{
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String name = request.getParameter("name");
String password = request.getParameter("password");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/xml;charset=UTF-8");
PrintWriter out = response.getWriter();
if(name.equals("MoSon") && password.equals("123456")){
out.write("{\"result\":true}");
}else{
out.write("{\"result\":false}");
}
out.flush();
out.close();
}
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
LaravelAPI + Nuxt로 MultiAuth 구현현재 SIer5년째로 javascript(Jquery만), PHP(프레임워크 없음)를 2년 정도, C#(Windows 앱) 3년 정도 왔습니다. 여러가지 인연이 있어, 개인으로 최근 웹 서비스의 시작을 하게 되었습니...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
