使用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; 最简单的实践之修改服务器时间: 查看和修改服务器配 ...
随机推荐
- VC获取网页标题，解决乱码问题 学习
博主不让转载 仅记录下地址 稍后 放出自己的代码 http://blog.csdn.net/friendan/article/details/11821135
- Jenkins执行selenium报错unknown error: cannot find Chrome binary
问题描述:在Pycharm中执行selenium测试用例,可以正常运行, 集成在Jenkins中,构建时,发现构建成功,但是查看Console Output,报错:unknown error: can ...
- http://blog.csdn.net/hongchangfirst/article/details/26004335
悲观锁(Pessimistic Lock), 顾名思义,就是很悲观,每次去拿数据的时候都认为别人会修改,所以每次在拿数据的时候都会上锁,这样别人想拿这个数据就会block直到它拿到锁.传统的 关系型数 ...
- VC 调试技术与异常（错误）处理 VC 调试技术与异常（错误）处理
调试技术与异常(错误)处理 (1) 转载自 52PK游戏论坛 跟踪与中间过程输出 也许一个开发人员一半以上的时间都是在面对错误,所以好的调试/查错方法(工具)会减轻我们工作的负担,也可以让枯燥的D ...
- 在github创建用户
在Github注册账户 第一个是创建用户名,第二个是填写邮箱,第三个是设置密码 进入给github会让你选择账户类型 第二步完成后会让你完成邮箱的验证 验证完邮箱以后此时就验证成功了点击绿色的 let ...
- Linux系统的运行级的概念
Linux OS 将操作 环境分为以下7个等级,即 0:关机 1:单用户模式(单用户.无网络) 2:无网络支持的多用户模式(多用户.无网络) 3:有网络支持的多用户模式(多用户.有网络) 4:保留,未 ...
- 通过一个例子感受C# 6.0新特性
微软在Visual Studio 2015中更新C#语言到6.0,添加了很多很好的特性,以使C#语言继续跻身于最优秀语言之行列.下面通过一个例子快速感受一下C# 6.0的新特性,以下程序在VS2015 ...
- java多线程 基础demo
join() 让主进程等待子进程全部执行完 例子如下: package mocker; public class TestThread5 extends Thread { priva ...
- h5页面宽度设置7.5rem
function ready() { var u = navigator.userAgent; var winW = document.documentElement.clientWidth; if ...
- 会HTML/CSS就可以轻松创建网站
网站其本质就是HTML + CSS 外加一些JavaScript构成的.所以基本上只要你会一些前端,就可以开始花样搭网站了. 如果只用HTML/CSS那做出来的网站只能叫静态网站,性能好但维护不方便, ...