使用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; 最简单的实践之修改服务器时间: 查看和修改服务器配 ...
随机推荐
- 使用c语言实现在linux下的openssl客户端和服务器端编程
使用c语言实现在linux下的openssl客户端和服务器端编程 摘自:https://www.cnblogs.com/etangyushan/p/3679457.html 前几天组长让我实现一个使用 ...
- HDU 6214 Smallest Minimum Cut (最小割且边数最少)
题意:给定上一个有向图,求 s - t 的最小割且边数最少. 析:设边的容量是w,边数为m,只要把每边打容量变成 w * (m+1) + 1,然后跑一个最大流,最大流%(m+1),就是答案. 代码如下 ...
- PHP（二）变量和常量
- 解决RPC failed; HTTP 413 curl 22 The requested URL returned error: 413 Request Entity Too Large问题
使用SourceTree客户端,向远程仓库推送时:RPC failed; HTTP 413 curl 22 The requested URL returned error: 413 Request ...
- Java Float类型 减法运算时精度丢失问题
package test1; public class Test2 { /*** @param args*/public static void main(String[] args) { Flo ...
- CDI Event解析
CDI(Contexts And Dependency Injection)是JavaEE 6标准中一个规范,将依赖注入IOC/DI上升到容器级别, 它提供了Java EE平台上服务注入的组件管理核心 ...
- Linux TCP不同状态的连接数统计
方法一:利用netstat命令 统计 TIME_WAIT/CLOSE_WAIT/ESTABLISHED/LISTEN 等TCP状态的连接数 netstat -tan |grep ^tcp |awk ' ...
- oracle 11gr2 2.04 em 更改 hostname 后无需重建资料库的方法
1) 备份删除$ORACKE_HOME/ xxxx-sid 的EM目录:复制要创建的xxx-sid EM 名称目录: 备份删除$ORACKE_HOME/oc4j/j2ee/ xxxx-sid 的EM目 ...
- ASP.NET Core 2.0 in Docker on Windows Containers
安装Docker for Windows https://store.docker.com/editions/community/docker-ce-desktop-windows 要想将一个ASP. ...
- iOS Objective-C 中 bool 与 BOOL 的你不一定知道的事
测试一下这段代码: - (void)test { NSLog(@"this is an attribut: %d", anAttribute); ; i < ; i++) { ...