使用Vue写一个登陆页面并在管理页面查看和修改
注册页面
代码如下
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
<link rel="stylesheet" href="css/register.css">
<link rel="stylesheet" href="lib/bootstrap-3.3.7.css">
<script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app"> <div class="container">
<div class="center-block">
<form class="form-signin input-group-lg col-lg-5 col-md-offset-3" @submit="checkForm"> <h2 class="form-signin-heading">用户注册</h2> <label for="username"></label>
<input type="text" id="username" class="form-control" placeholder="用户名" v-model="username"> <label for="email" class="sr-only">邮件</label>
<input type="email" id="email" class="form-control" placeholder="邮件地址" v-model="email"> <label for="password" class="sr-only">密码</label>
<input type="password" id="password" class="form-control" placeholder="密码" v-model="password"> <label for="telephone" class="sr-only">电话</label>
<input type="text" id="telephone" class="form-control" placeholder="请输入你的电话" v-model="telephone"> <div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> 记住我
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit button" @click="addUserInfo">注册</button>
</form>
</div> </div>
<div id="error" class="container col-md-offset-4">
<p v-if="errors.length">
<b>错误的结果:</b>
<ul>
<li v-for="error in errors">{{ error }}</li>
</ul>
</p>
</div> <!--<div v-if="userInfo.length === 0">--> <!--</div>-->
<!--<div id="jieshou" class="container col-md-offset-4" v-else>-->
<!--<ul v-for="(item,index) in userInfo">-->
<!--<li>用户名：{{item.username}}</li>-->
<!--<li>密码：{{item.password}}</li>-->
<!--<li>电话：{{item.telephone}}</li>-->
<!--<li>邮件:{{item.email}}</li>-->
<!--</ul>-->
</div> </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
<link rel="stylesheet" href="css/register.css">
<link rel="stylesheet" href="lib/bootstrap-3.3.7.css">
<script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app"> <div class="container">
<div class="center-block">
<form class="form-signin input-group-lg col-lg-5 col-md-offset-3" @submit="checkForm"> <h2 class="form-signin-heading">用户注册</h2> <label for="username"></label>
<input type="text" id="username" class="form-control" placeholder="用户名" v-model="username"> <label for="email" class="sr-only">邮件</label>
<input type="email" id="email" class="form-control" placeholder="邮件地址" v-model="email"> <label for="password" class="sr-only">密码</label>
<input type="password" id="password" class="form-control" placeholder="密码" v-model="password"> <label for="telephone" class="sr-only">电话</label>
<input type="text" id="telephone" class="form-control" placeholder="请输入你的电话" v-model="telephone"> <div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> 记住我
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit button" @click="addUserInfo">注册</button>
</form>
</div> </div>
<div id="error" class="container col-md-offset-4">
<p v-if="errors.length">
<b>错误的结果:</b>
<ul>
<li v-for="error in errors">{{ error }}</li>
</ul>
</p>
</div> <!--<div v-if="userInfo.length === 0">--> <!--</div>-->
<!--<div id="jieshou" class="container col-md-offset-4" v-else>-->
<!--<ul v-for="(item,index) in userInfo">-->
<!--<li>用户名：{{item.username}}</li>-->
<!--<li>密码：{{item.password}}</li>-->
<!--<li>电话：{{item.telephone}}</li>-->
<!--<li>邮件:{{item.email}}</li>-->
<!--</ul>-->
</div> </div>
</body>
</html>
javascript
<script>
var vm = new Vue({
el: '#app',
data: {
errors: [],
username: null,
email: null,
password: null,
telephone: null,
userInfo: JSON.parse(localStorage.getItem('userInfo')) || []
},
methods: {
checkForm: function (e) {
if (this.username && this.email && this.password && this.telephone) {
return true;
}
this.errors = [];
if (!this.username) {
this.errors.push('请输入用户名');
} else if (!this.vaildUsername(this.username)) {
this.errors.push('请输入4-16个英文大小写和数字的组合');
}
if (!this.email) {
this.errors.push('请输入邮件');
} else if (!this.vaildEmail(this.email)) {
this.errors.push('邮件格式为xx@xx.com');
}
if (!this.password) {
this.errors.push('请输入密码');
} else if (!this.vaildPassword(this.password)) {
this.errors.push('密码有误');
}
if (!this.telephone) {
this.errors.push('请输入手机号');
} else if (!this.vaildTelephone(this.telephone)) {
this.errors.push('手机号为11个纯数字组合')
}
e.preventDefault();
},
vaildUsername: function (username) { //用户名表单效验
var re = /^[a-zA-Z0-9_-]{4,16}$/;
return re.test(username);
},
vaildEmail: function (email) { //表单邮件的效验
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
},
vaildPassworld: function (password) { //表单密码的效验
var re = /^[a-zA-Z0-9_-]{4,16}$/;
return re.test(password);
},
vaildTelephone: function (telephone) { //表单电话的效验
var re = /^\d{11,20}$/;
return re.test(telephone);
},
addUserInfo() {
if (this.username && this.password && this.email && this.telephone) {
var obj = {
username: this.username,
password: this.password,
email: this.email,
telephone: this.telephone
}
this.userInfo.push(obj)
localStorage.setItem('userInfo', JSON.stringify(this.userInfo))
this.username = ''
this.password = ''
this.email = ''
this.telephone = ''
}
window.open('management.html')
}
}
})
</script>
<script>
var vm = new Vue({
el: '#app',
data: {
errors: [],
username: null,
email: null,
password: null,
telephone: null,
userInfo: JSON.parse(localStorage.getItem('userInfo')) || []
},
methods: {
checkForm: function (e) {
if (this.username && this.email && this.password && this.telephone) {
return true;
}
this.errors = [];
if (!this.username) {
this.errors.push('请输入用户名');
} else if (!this.vaildUsername(this.username)) {
this.errors.push('请输入4-16个英文大小写和数字的组合');
}
if (!this.email) {
this.errors.push('请输入邮件');
} else if (!this.vaildEmail(this.email)) {
this.errors.push('邮件格式为xx@xx.com');
}
if (!this.password) {
this.errors.push('请输入密码');
} else if (!this.vaildPassword(this.password)) {
this.errors.push('密码有误');
}
if (!this.telephone) {
this.errors.push('请输入手机号');
} else if (!this.vaildTelephone(this.telephone)) {
this.errors.push('手机号为11个纯数字组合')
}
e.preventDefault();
},
vaildUsername: function (username) { //用户名表单效验
var re = /^[a-zA-Z0-9_-]{4,16}$/;
return re.test(username);
},
vaildEmail: function (email) { //表单邮件的效验
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
},
vaildPassworld: function (password) { //表单密码的效验
var re = /^[a-zA-Z0-9_-]{4,16}$/;
return re.test(password);
},
vaildTelephone: function (telephone) { //表单电话的效验
var re = /^\d{11,20}$/;
return re.test(telephone);
},
addUserInfo() {
if (this.username && this.password && this.email && this.telephone) {
var obj = {
username: this.username,
password: this.password,
email: this.email,
telephone: this.telephone
}
this.userInfo.push(obj)
localStorage.setItem('userInfo', JSON.stringify(this.userInfo))
this.username = ''
this.password = ''
this.email = ''
this.telephone = ''
}
window.open('management.html')
}
}
})
</script>
管理页面
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="lib/vue-2.4.0.js"></script>
<link rel="stylesheet" href="lib/bootstrap-3.3.7.css">
<body> <div id="app"> <div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加用户</h3>
</div>
<div class="panel-body form-inline">
<label>
用户名:
<input type="text" class="form-control" v-model="id">
</label>
<label>
密码:
<input type="text" class="form-control" v-model="pass">
</label>
<label>
邮件:
<input type="text" class="form-control" v-model="Email">
</label>
<label>
电话:
<input type="text" class="form-control" v-model="tel">
</label> <input type="button" value="添加" class="btn btn-primary" @click="add()"> <label>
搜索关键字:
<input type="text" class="form-control" v-model="keywords">
</label>
</div>
</div> <table class="table table-hover table-border table-striped">
<thead>
<tr>
<th>用户名</th>
<th>密码</th>
<th>邮件</th>
<th>电话</th>
</tr>
</thead>
<div v-if="userInfo.length === 0"> </div>
<div v-else>
<tr v-for="(item,index) in userInfo">
<td>{{ item.username }}</td>
<td>{{ item.password }}</td>
<td>{{ item.email}}</td>
<td>{{ item.telephone}}</td>
<td>
<a href="#" @click="dellocal">删除</a>
</td>
</tr>
</div> <tbody v-for="item in search(keywords)" :key="item.id">
<tr>
<td>{{ item.id }}</td>
<td>{{ item.pass }}</td>
<td>{{ item.Email}}</td>
<td>{{item.tel}}</td>
<td>
<a href="#" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table> </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="lib/vue-2.4.0.js"></script>
<link rel="stylesheet" href="lib/bootstrap-3.3.7.css">
<body> <div id="app"> <div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加用户</h3>
</div>
<div class="panel-body form-inline">
<label>
用户名:
<input type="text" class="form-control" v-model="id">
</label>
<label>
密码:
<input type="text" class="form-control" v-model="pass">
</label>
<label>
邮件:
<input type="text" class="form-control" v-model="Email">
</label>
<label>
电话:
<input type="text" class="form-control" v-model="tel">
</label> <input type="button" value="添加" class="btn btn-primary" @click="add()"> <label>
搜索关键字:
<input type="text" class="form-control" v-model="keywords">
</label>
</div>
</div> <table class="table table-hover table-border table-striped">
<thead>
<tr>
<th>用户名</th>
<th>密码</th>
<th>邮件</th>
<th>电话</th>
</tr>
</thead>
<div v-if="userInfo.length === 0"> </div>
<div v-else>
<tr v-for="(item,index) in userInfo">
<td>{{ item.username }}</td>
<td>{{ item.password }}</td>
<td>{{ item.email}}</td>
<td>{{ item.telephone}}</td>
<td>
<a href="#" @click="dellocal">删除</a>
</td>
</tr>
</div> <tbody v-for="item in search(keywords)" :key="item.id">
<tr>
<td>{{ item.id }}</td>
<td>{{ item.pass }}</td>
<td>{{ item.Email}}</td>
<td>{{item.tel}}</td>
<td>
<a href="#" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table> </div>
</body>
</html>
管理页面的javascript代码
<script>
var vm = new Vue({
el: '#app',
data: {
id: '',
pass: '',
Email: '',
tel: '',
username: null,
email: null,
password: null,
telephone: null,
keywords: '',//搜索的关键字
userInfo: JSON.parse(localStorage.getItem('userInfo')) || [],
list: [
{id: 222222, pass: '222222', Email: '5656561@qq.com', tel: '18959290335'},
{id: 333333, pass: '333333', Email: '5656561@qq.com', tel: '18959290335'},
{id: 444444, pass: '444444', Email: '5656561@qq.com', tel: '18959290335'},
{id: 555555, pass: '555555', Email: '5656561@qq.com', tel: '18959290335'},
{id: 666666, pass: '666666', Email: '5656561@qq.com', tel: '18959290335'},
]
},
methods: {
add() {
var user = {id: this.id, pass: this.pass, Email: this.Email, tel: this.tel}
this.list.push(user)
this.id = this.pass = this.Email = this.tel = ''
},
search(keywords) { //根据关键字,进行搜索
var newList = []
this.list.forEach(item => {
if (item.pass.indexOf(keywords) != -1) {
newList.push(item)
}
})
return newList
},
dellocal(){//删除localStorage数据
localStorage.clear();
},
del(id) {//根据id删除数据
this.list.some((item, i) => {
if (item.id === id) {
this.list.splice(i, 1)
return true;
}
})
},
}
})
</script>
<script>
var vm = new Vue({
el: '#app',
data: {
id: '',
pass: '',
Email: '',
tel: '',
username: null,
email: null,
password: null,
telephone: null,
keywords: '',//搜索的关键字
userInfo: JSON.parse(localStorage.getItem('userInfo')) || [],
list: [
{id: 222222, pass: '222222', Email: '5656561@qq.com', tel: '18959290335'},
{id: 333333, pass: '333333', Email: '5656561@qq.com', tel: '18959290335'},
{id: 444444, pass: '444444', Email: '5656561@qq.com', tel: '18959290335'},
{id: 555555, pass: '555555', Email: '5656561@qq.com', tel: '18959290335'},
{id: 666666, pass: '666666', Email: '5656561@qq.com', tel: '18959290335'},
]
},
methods: {
add() {
var user = {id: this.id, pass: this.pass, Email: this.Email, tel: this.tel}
this.list.push(user)
this.id = this.pass = this.Email = this.tel = ''
},
search(keywords) { //根据关键字,进行搜索
var newList = []
this.list.forEach(item => {
if (item.pass.indexOf(keywords) != -1) {
newList.push(item)
}
})
return newList
},
dellocal(){//删除localStorage数据
localStorage.clear();
},
del(id) {//根据id删除数据
this.list.some((item, i) => {
if (item.id === id) {
this.list.splice(i, 1)
return true;
}
})
},
}
})
</script>
使用Vue写一个登陆页面并在管理页面查看和修改的更多相关文章
- 用ES6的class模仿Vue写一个双向绑定
原文地址:用ES6的class模仿Vue写一个双向绑定 点击在线尝试一下 最终效果如下: 构造器(constructor) 构造一个TinyVue对象,包含基本的el,data,methods cla ...
- 用vue写一个仿简书的轮播图
原文地址:用vue写一个仿简书的轮播图 先展示最终效果: Vue的理念是以数据驱动视图,所以拒绝通过改变元素的margin-top来实现滚动效果.写好css样式,只需改变每张图片的class即可实现轮 ...
- laravel学习：php写一个简单的ioc服务管理容器
php写一个简单的ioc服务管理容器 原创: 陈晨 CoderStory 2018-01-14 最近学习laravel框架,了解到laravel核心是一个大容器,这个容器负责几乎所有服务组件的实例化以 ...
- 用vue写一个仿app下拉刷新的组件
如果你用vue弄移动端的页面,那么下拉刷新还是比较常见的场景,下面来研究如何写一个下拉刷新的组件(先上图); 由于节省大家的时间,样式就不贴出来了. html结构也不必介绍了,直接看代码吧-.- &l ...
- SpringBoot写一个登陆注册功能，和期间走的坑
文章目录 前言 1. 首先介绍项目的相关技术和工具: 2. 首先创建项目 3. 项目的结构 3.1实体类: 3.2 Mapper.xml 3.3 mapper.inteface 3.4 Service ...
- 教你用Vue写一个开心消消乐
之前做过一个算法题,算法要求就是写一个开心消消乐的逻辑算法,当时也是考虑了一段时间才做出来.后来想了想,既然核心算法都有了,能不能实现一个开心消消乐的小游戏呢,于是花了两天时间做了一个小游戏出来. 效 ...
- 使用Vue写一个九九乘法表
Vue.js是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. 下面是在Vue 测试实例 - 菜鸟教程(runoob.com)使用Vue写的一个九九乘法表, ...
- [Vue]写一个简单的文件上传控件
这篇将介绍如何写一个简单的基于Vue+Element的文件上传控件. 控件将具有 1. 上传队列的列表,显示文件名称,大小等信息,可以显示上传进度实时刷新 2. 取消上传 使用Element的u ...
- django搭建一个小型的服务器运维网站-查看和修改服务器配置与数据库的路由
目录 项目介绍和源码: 拿来即用的bootstrap模板: 服务器SSH服务配置与python中paramiko的使用: 用户登陆与session; 最简单的实践之修改服务器时间: 查看和修改服务器配 ...
随机推荐
- smarty if
<{if data}> <input type="submit" value="修改" /> <{else}> <in ...
- Laravel trait 使用心得
trait 是在PHP5.4中为了方便代码复用的一种实现方式,但目前我在看的的PHP项目中较少看的有程序员去主动使用这个实现方式,在laravel中有很多 trait 的使用,关于trait 在 la ...
- gp sql
appendonly -- drop table if exists test_appendonly; -- create table test_appendonly with(appendonly= ...
- Windows sql语句正则匹配导出数据到本地 The MySQL server is running with the --secure-file-priv option so it cannot execute this statement
尝试使用 into outfile导出数据的时候出现错误: The MySQL server is running with the --secure-file-priv option so it c ...
- swift po 实现动态按钮2
// // ButtonViewController.swift // PopInstall // // Created by su on 15/12/11. // Copyright © 2 ...
- JavaScript语言精粹 笔记06 方法
JS包含了少量可用在标准类型上的标准方法. ArrayFunctionNumberObjectRegExpString Array array.concat(item...) concat方法返回一个 ...
- WEBXONE IIS部署C/S程序
WEBXONE IIS部署C/S程序 在EXE的主窗体的ONCREATE()里添加如下代码,部署的时候记得带wxoBase.dll. uses wxoExec; procedure TFrmMain. ...
- 2.自己的Github试用过程
打开我个人的Github,我试着做些简单的试用.首先,经过简短描述,我成功创建了一个新的存储库
- java写入换行符
写入一个文件,生成文本文档,里面写入1000行字符,但是写出来的没有换行.所以纠结,百度了下,一行完事. String crlf=System.getProperty("line.separ ...
- js虚拟数字小键盘
效果图 页面代码: @Html.TextBoxFor(m=>Model.FBP[i].RealNumb,new{onclick="showKeyboard('txtRealNumbOp ...