使用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; 最简单的实践之修改服务器时间: 查看和修改服务器配 ...
随机推荐
- ImageView.src的png图标变形问题
图标,必须是png-24输出,如果是png-8输出,则失真.
- 视频转换工具ffmpeg
安装ffmpeg ffmpeg官网下载地址点击此处. 如果使用mac也可用homebrew下载安装:brew install ffmpeg 使用ffmpeg 命令如下:ffmpeg -i input. ...
- Linux的磁盘分区（一）
磁道:track 扇区:sector 磁头:head 柱面:cylinder 每个扇区,512字节 每个磁道划分为63个扇区 逻辑磁头(盘面)数设为255 一个柱面的大小 =255 * 63 * 51 ...
- MySQL性能调优与架构设计——第9章 MySQL数据库Schema设计的性能优化
第9章 MySQL数据库Schema设计的性能优化 前言: 很多人都认为性能是在通过编写代码(程序代码或者是数据库代码)的过程中优化出来的,其实这是一个非常大的误区.真正影响性能最大的部分是在设计中就 ...
- handsontable-developer guide-cell function
renderer 展示的数据不是来自于数据源,而是先把DOM和其他信息传给renderer,然后展示. //五种展示函数 TextRenderer: default NumericRenderer A ...
- CSS content应用
一.简介 content属性早在 CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容.此特性目前已被大部分的浏览器支持:(Firefox 1.5+, Safari 3. ...
- gitlab中修改项目名称客户端修改方法
如果gitlab项目名称已经修改,对于本地已经克隆下来的仓库,可以使用如下命令进行修改: git remote set-url origin 新的项目路径
- pyppeteer初尝滋味
最近在爬几个电商平台网站用的selenium一登录就会有验证,目前这些网站对selenium检测很严格 因为不少大网站有对selenium的js监测机制.比如navigator.webdriver,n ...
- “全栈2019”Java多线程第十六章：同步synchronized关键字详解
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...
- 动态代理（JDK实现）
JDK动态代理,针对目标对象的接口进行代理 ,动态生成接口的实现类 !(必须有接口) public class ProxyDemo { //通过方法的返回值得到代理对象 方法参数 ...