最近了解到Vue.js挺火的,有同学已经学习了,那我心里痒痒的也学习了一点,然后也学了一点元素组件,就做了简单的登录页面。
<>强效果很简单:
<强>代码如下:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>插入标题here
& lt;链接rel="样式表" href=" https://www.yisu.com//unpkg.com/element-ui@1.3.6/lib/theme-default/index.css”rel=巴獠縩ofollow”比;
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/vue/dist/vue.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/element-ui/lib/index.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/jquery/jquery-3.1.1.js "祝辞& lt;/script>
& lt; style>
.el-row {
margin-bottom: 20 px;
和:胎{
margin-bottom: 0;
}
}
.login-box {
margin-top: 20%;
margin-left: 40%;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类="登录框" id=坝τ谩北?
& lt; el-row>
& lt; el-col:跨度=" 8 "比;
& lt; el-input id="名称" v模型=皀ame”占位符=扒胧淙胝屎拧痹?
& lt;模板槽=扒爸谩钡脑谡屎? lt;/template>
& lt;/el-input>
& lt;/el-col>
& lt;/el-row>
& lt; el-row>
& lt; el-col:跨度=" 8 "比;
& lt; el-input id="密码" v模型类型=懊苈搿?懊苈搿闭嘉环?扒胧淙朊苈搿北?
& lt;模板槽=扒爸谩痹诿苈? lt;/template>
& lt;/el-input>
& lt;/el-col>
& lt;/el-row>
& lt; el-row>
& lt; el-col:跨度=" 8 "比;
& lt; el-button id="登录" v:点击=凹觳椤崩嘈?爸鳌痹诘锹? lt;/el-button>
& lt;/el-col>
& lt;/el-row>
& lt;/div>
& lt;/body>
& lt;脚本type=" text/javascript祝辞
新Vue ({
埃尔:“#应用”,
数据:{
名称:”,
密码:"
},
方法:{
检查:函数(事件){//获取值
var=this.name名称;
var密码=this.password;
如果(name==| |密码==?{
美元。消息({
消息:“账号或密码为空!’,
类型:“错误”
}）
返回;
}
. ajax({美元
url:“登录”,
类型:“文章”,
数据:{
名称:姓名、
密码:密码
},
成功:功能(数据){
结果var=data.result;
如果结果==罢媸怠眧 |结果==true) {
alert("登录成功”);
其他}{
alert("登录失败”);
}
},
错误:功能(数据){
警报(数据);
},
数据类型:json,
}）
}
}
}）
& lt;/script>
& lt;/html>
后台代码:
包com.moson.backstage.controller;
进口java.io.IOException;
进口java.io.PrintWriter;
进口javax.servlet.ServletException;
进口javax.servlet.annotation.WebServlet;
进口javax.servlet.http.HttpServlet;
进口javax.servlet.http.HttpServletRequest;
进口javax.servlet.http.HttpServletResponse;/* *
* LoginController
* @author MoXingJian
* @qq.com 939697374
* @date 2017年6月20日下午3:03:50
* @version 1.0
*/@WebServlet("/登录”)
公开课LoginController扩展HttpServlet {
@Override
保护无效doGet (HttpServletRequest请求,HttpServletResponse响应)抛出ServletException IOException {
doPost(请求、响应);
}
@Override
保护无效doPost (HttpServletRequest请求,HttpServletResponse响应)抛出ServletException IOException {
字符串名称=request.getParameter(“名字”);
字符串密码=request.getParameter(“密码”);
response.setCharacterEncoding(“utf - 8”);
response.setContentType (" text/xml; charset=utf - 8”);
PrintWriter=response.getWriter ();
如果(name.equals (“MoSon”),,password.equals (" 123456 ")) {
out.write(“{\“\”:真}”);
其他}{
out.write(“{\“\”:假}”);
}
out.flush ();
out.close ();
}
}
之前
以上这篇使用Vue.js和Element-UI做一个简单登录页面的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
