使用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; 最简单的实践之修改服务器时间: 查看和修改服务器配 ...
随机推荐
- UX术语详解：任务流，用户流，流程图以及其它全新术语
以下内容由Mockplus(摹客)团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具. 用户体验拥有一长串专业的术语和可交付内容.当在线查看UX相关职位描述时,所罗列的这类术语更是 ...
- FW:考查嵌入式C开发人员的最好的16道题(转)
考查一个初级嵌入式系统开发人员的C基本功,附有答案题目由资深嵌入式系统专家拟定, 目的是考查入门级的嵌入式软件开发人员 Gavin Shaw提供详细解答. 编者按:非常基本关于C语言的问题,一个信息类 ...
- idea如何设置注释作者信息
什么情况下使用? 在建一个新的类的时候 有注释信息 如下图所示 实现步骤 1 打开idea后 点击File后 选择Settings..如下图 2 打开后打开 file and code t ...
- centos环境下创建数据库和表的方法
centos环境下创建数据库和表的方法 //查询数据库的命令: mysql> SHOW DATABASES; +--------------------+ | Database ...
- ceph故障：too many PGs per OSD
原文:http://www.linuxidc.com/Linux/2017-04/142518.htm 背景 集群状态报错,如下: # ceph -s cluster 1d64ac80-21be-43 ...
- C++中const在函数中的用法
1.const放在函数前面 如果我们的函数的返回值是以 指针形式 返回的,如果在函数前面加上const修饰,则表示指针指向的内容是不能被改变的,并且接收返回值的 指针变量必须是const修饰的,例如: ...
- 20155335俞昆《java程序设计》第6周总结
20155335 <Java程序设计>第6周学习总结 ## 教材学习内容总结 首先,我们需要了解输入和输出的关系,我想,这不同于c语言中的输入和输出,我们首先明白,Java中以串流 ...
- HRBUST1311 火影忍者之～忍者村 2017-03-06 16:06 106人阅读 评论(0) 收藏
火影忍者之-忍者村 忍者村是忍者聚居的村子,相等于国家的军事力量.绝大部分村民都是忍者,有一些忍者会在村内开设书店.餐厅等,不过大部分忍者都是为村子执行任务的忍者,以赚取酬劳,并于战时为国家出战. ...
- SpringBoot学习：整合shiro自动登录功能（rememberMe记住我功能）
首先在shiro配置类中注入rememberMe管理器 /** * cookie对象; * rememberMeCookie()方法是设置Cookie的生成模版,比如cookie的name,cooki ...
- FIREDAC的TFDJSONDataSets和TFDJSONDeltas查询和提交数据
服务端代码: uses Data.FireDACJSONReflect, FireDAC.Stan.Storage, FireDAC.Stan.StorageBin, FireDAC.Stan.Sto ...