书城项目第一阶段的实现【登录&注册页面】
大哥大哥欢迎你 感谢你来我这里
大哥大哥欢迎你 等风等雨等着你
他来了 他来了 他带着 礼物 走来了
他来了 他来了 他脚踏祥云进来了
大哥天 大哥地 大哥能顶天立地
大哥风 大哥雨 大哥能呼风唤雨
这是我的好大哥 他有房又有车
再次欢迎我大哥 刷点礼物不用说
来感谢大哥66 谢我大哥在身后
今生有你已经足够 大哥大哥很优秀
感谢大哥的520 大哥他还没有停
大哥少刷行不行 不行不行就不行
感谢大哥1314 让我们再来一次
心中立下忠义二字护我大哥在展翅
一声朋友一生情 一生有你才会赢
让我护你度安宁 心中刻下大哥名
大哥大哥你快过来让我来给你安排
书城项目的第一阶段&学习Javaweb的第十五天
实现了首页的登录以及注册页面的非空验证，以及正则表达式的练习，
使用了...啥也没用到..就 就写完了
页面包含五个部分，分别是
index首页，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>书城首页</title>
<link rel="stylesheet" href="static/css/minireset.css" />
<link rel="stylesheet" href="static/css/common.css" />
<link rel="stylesheet" href="static/css/iconfont.css" />
<link rel="stylesheet" href="static/css/index.css" />
<link rel="stylesheet" href="static/css/swiper.min.css" />
</head>
<body>
<div id="app">
<div class="topbar">
<div class="w">
<div class="topbar-left">
<i>送至:</i>
<i>北京</i>
<i class="iconfont icon-ai-arrow-down"></i>
</div>
<div class="topbar-right">
<a href="pages/user/login.html" class="login">登录</a>
<a href="pages/user/regist.html" class="register">注册</a>
<a
href="pages/cart/cart.html"
class="cart iconfont icon-gouwuche
"
>
购物车
<div class="cart-num">3</div>
</a>
<a href="pages/manager/book_manager.html" class="admin">后台管理</a>
</div>
<!-- 登录后风格-->
<!-- <div class="topbar-right">-->
<!-- <span>欢迎你<b>张总</b></span>-->
<!-- <a href="#" class="register">注销</a>-->
<!-- <a-->
<!-- href="pages/cart/cart.jsp"-->
<!-- class="cart iconfont icon-gouwuche-->
<!-- ">-->
<!-- 购物车-->
<!-- <div class="cart-num">3</div>-->
<!-- </a>-->
<!-- <a href="./pages/manager/book_manager.html" class="admin">后台管理</a>-->
<!-- </div>-->
</div>
</div>
<div class="header w">
<a href="#" class="header-logo"></a>
<div class="header-nav">
<ul>
<li><a href="#">java</a></li>
<li><a href="#">前端</a></li>
<li><a href="#">小说</a></li>
<li><a href="#">文学</a></li>
<li><a href="#">青春文学</a></li>
<li><a href="#">艺术</a></li>
<li><a href="#">管理</a></li>
</ul>
</div>
<div class="header-search">
<input type="text" placeholder="十万个为什么" />
<button class="iconfont icon-search"></button>
</div>
</div>
<div class="banner w clearfix">
<div class="banner-left">
<ul>
<li>
<a href="">
<span>文学 鉴赏</span>
<i class="iconfont icon-jiantou"></i
></a>
</li>
<li>
<a href="">
<span>社科 研究</span>
<i class="iconfont icon-jiantou"></i
></a>
</li>
<li>
<a href="">
<span>少儿 培训</span>
<i class="iconfont icon-jiantou"></i
></a>
</li>
<li>
<a href="">
<span>艺术 赏析</span>
<i class="iconfont icon-jiantou"></i
></a>
</li>
<li>
<a href="">
<span>生活 周边</span>
<i class="iconfont icon-jiantou"></i
></a>
</li>
<li>
<a href="">
<span>文教 科技</span>
<i class="iconfont icon-jiantou"></i
></a>
</li>
<li>
<a href="">
<span>热销 畅读</span>
<i class="iconfont icon-jiantou"></i
></a>
</li>
</ul>
</div>
<div class="banner-right">
<div class="swiper-container">
<ul class="swiper-wrapper">
<li class="swiper-slide">
<img src="static/uploads/banner4.jpg" alt="">
<!-- <div class="banner-img"></div> -->
</li>
<li class="swiper-slide">
<img src="static/uploads/banner5.jpg" alt="">
<!-- <div class="banner-img"></div> -->
</li>
<li class="swiper-slide">
<img src="static/uploads/banner6.jpg" alt="">
<!-- <div class="banner-img"></div> -->
</li>
</ul>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<div class="books-list ">
<div class="w">
<div class="list">
<div class="list-header">
<div class="title">图书列表</div>
<div class="price-search">
<span>价格:</span>
<input type="text">
<span>-元</span>
<input type="text">
<span>元</span>
<button>查询</button>
</div>
</div>
<div class="list-content">
<div class="list-item">
<img src="static/uploads/huozhe.jpg" alt="">
<p>书名:活着</p>
<p>作者:余华</p>
<p>价格:￥66.6</p>
<p>销量:230</p>
<p>库存:1000</p>
<button>加入购物车</button>
</div>
<div href="" class="list-item">
<img src="static/uploads/huranqiri.jpg" alt="">
<p>书名:活着</p>
<p>作者:余华</p>
<p>价格:￥66.6</p>
<p>销量:230</p>
<p>库存:1000</p>
<button>加入购物车</button>
</div>
<div href="" class="list-item">
<img src="static/uploads/Javabianchengsixiang.jpg" alt="">
<p>书名:活着</p>
<p>作者:余华</p>
<p>价格:￥66.6</p>
<p>销量:230</p>
<p>库存:1000</p>
<button>加入购物车</button>
</div>
<div href="" class="list-item">
<img src="static/uploads/jiaofu.jpg" alt="">
<p>书名:活着</p>
<p>作者:余华</p>
<p>价格:￥66.6</p>
<p>销量:230</p>
<p>库存:1000</p>
<button>加入购物车</button>
</div>
<div href="" class="list-item">
<img src="static/uploads/jieyouzahuodian.jpg" alt="">
<p>书名:活着</p>
<p>作者:余华</p>
<p>价格:￥66.6</p>
<p>销量:230</p>
<p>库存:1000</p>
<button>加入购物车</button>
</div>
<div href="" class="list-item">
<img src="static/uploads/kanjian.jpg" alt="">
<p>书名:活着</p>
<p>作者:余华</p>
<p>价格:￥66.6</p>
<p>销量:230</p>
<p>库存:1000</p>
<button>加入购物车</button>
</div>
<div href="" class="list-item">
<img src="static/uploads/pinang.jpg" alt="">
<p>书名:活着</p>
<p>作者:余华</p>
<p>价格:￥66.6</p>
<p>销量:230</p>
<p>库存:1000</p>
<button>加入购物车</button>
</div>
<div href="" class="list-item">
<img src="static/uploads/pingfandeshijie.jpg" alt="">
<p>书名:活着</p>
<p>作者:余华</p>
<p>价格:￥66.6</p>
<p>销量:230</p>
<p>库存:1000</p>
<button>加入购物车</button>
</div>
<div href="" class="list-item">
<img src="static/uploads/qiadaohaochudexingfu.jpg" alt="">
<p>书名:活着</p>
<p>作者:余华</p>
<p>价格:￥66.6</p>
<p>销量:230</p>
<p>库存:1000</p>
<button>加入购物车</button>
</div>
<div href="" class="list-item">
<img src="static/uploads/renyueshenhua.jpg" alt="">
<p>书名:活着</p>
<p>作者:余华</p>
<p>价格:￥66.6</p>
<p>销量:230</p>
<p>库存:1000</p>
<button>加入购物车</button>
</div>
</div>
<div class="list-footer">
<div>首页</div>
<div>上一页</div>
<ul><li class="active">1</li><li>2</li><li>3</li></ul>
<div>下一页</div>
<div>末页</div>
<span>共10页</span>
<span>30条记录</span>
<span>到第</span>
<input type="text">
<span>页</span>
<button>确定</button>
</div>
</div>
</div>
</div>
<div class="cate w">
<div class="list">
<a href="" class="list-item">
<i class="iconfont icon-java"></i>
<span>java</span>
</a>
<a href="" class="list-item"
><i class="iconfont icon-h5"></i>h5</a
>
<a href="" class="list-item">
<i class="iconfont icon-python"></i>python
</a>
<a href="" class="list-item"
><i class="iconfont icon-tianchongxing-"></i>pm</a
>
<a href="" class="list-item"
><i class="iconfont icon-php_elephant"></i>php</a
>
<a href="" class="list-item"
><i class="iconfont icon-go"></i>go</a
>
</div>
<a href="" class="img">
<img src="static/uploads/cate4.jpg" alt="" />
</a>
<a href="" class="img">
<img src="static/uploads/cate5.jpg" alt="" />
</a>
<a href="" class="img">
<img src="static/uploads/cate6.jpg" alt="" />
</a>
</div>
<div class="books">
<div class="w">
<div class="seckill">
<div class="seckill-header">
<div class="title">
图书秒杀
</div>
<!-- <i class="iconfont icon-huanyipi"></i> -->
</div>
<div class="seckill-content">
<a href="" class="tip">
<h5>距离结束还有</h5>
<i class="iconfont icon-shandian"></i>
<div class="downcount">
<span class="time">00</span>
<span class="token">:</span>
<span class="time">00</span>
<span class="token">:</span>
<span class="time">00</span>
</div>
</a>
<a href="" class="books-sec">
<img src="static/uploads/congwanqingdaominguo.jpg" alt="">
<p>从晚晴到民国</p>
<div>
<span class="cur-price">￥28.9</span>
<span class="pre-price">￥36.5</span>
</div>
<button>立即购买</button>
</a>
<a href="" class="books-sec">
<img src="static/uploads/cyuyanrumenjingdian.jpg" alt="">
<p>c语言入门经典</p>
<div>
<span class="cur-price">￥55.9</span>
<span class="pre-price">￥68.5</span>
</div>
<button>立即购买</button>
</a>
<a href="" class="books-sec">
<img src="static/uploads/fusang.jpg" alt="">
<p>扶桑</p>
<div>
<span class="cur-price">￥30.9</span>
<span class="pre-price">￥47.5</span>
</div>
<button>立即购买</button>
</a>
<a href="" class="books-sec">
<img src="static/uploads/geihaizideshi.jpg" alt="">
<p>给孩子的诗</p>
<div>
<span class="cur-price">￥18.9</span>
<span class="pre-price">￥25.5</span>
</div>
<button>立即购买</button>
</a>
</ul>
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="w">
<div class="top">
<ul>
<li>
<a href="">
<img src="static/img/bottom1.png" alt="">
<span>大咖级讲师亲自授课</span>
</a>
</li>
<li>
<a href="">
<img src="static/img/bottom.png" alt="">
<span>课程为学员成长持续赋能</span>
</a>
</li>
<li>
<a href="">
<img src="static/img/bottom2.png" alt="">
<span>学员真是情况大公开</span>
</a>
</li>
</ul>
</div>
<div class="content">
<dl>
<dt>关于尚硅谷</dt>
<dd>教育理念</dd>
<!-- <dd>名师团队</dd>
<dd>学员心声</dd> -->
</dl>
<dl>
<dt>资源下载</dt>
<dd>视频下载</dd>
<!-- <dd>资料下载</dd>
<dd>工具下载</dd> -->
</dl>
<dl>
<dt>加入我们</dt>
<dd>招聘岗位</dd>
<!-- <dd>岗位介绍</dd>
<dd>招贤纳师</dd> -->
</dl>
<dl>
<dt>联系我们</dt>
<dd>http://www.atguigu.com<dd>
</dl>
</div>
</div>
<div class="down">
尚硅谷书城.Copyright ©2015
</div>
</div>
</div>
<script src="static/script/swiper.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
autoplay: true,
pagination: {
el: '.swiper-pagination',
dynamicBullets: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
})
</script>
</body>
</html>
注册页，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>尚硅谷会员注册页面</title>
<link type="text/css" rel="stylesheet" href="../../static/css/style.css" />
<link rel="stylesheet" href="../../static/css/register.css" />
<style type="text/css">
.login_form {
height: 420px;
margin-top: 25px;
}
.login_banner .register_form form .form-item .vv{
visibility: visible;
}
</style>
</head>
<div id="app">
<body>
<div id="login_header">
<a href="../../index.html">
<img class="logo_img" alt="" src="../../static/img/logo.gif" />
</a>
</div>
<div class="login_banner">
<div class="register_form">
<h1>注册尚硅谷会员</h1>
<form action="regist_success.html">
<div class="form-item">
<div>
<label>用户名称:</label>
<input v-model="username" @change="checkUserName" type="text" placeholder="请输入用户名" />
</div>
<span class="errMess" :class="{vv:unVv}">只能是6~16位数组和字母组成</span>
</div>
<div class="form-item">
<div>
<label>用户密码:</label>
<input v-model="password" @change="checkPassWord" type="password" placeholder="请输入密码" />
</div>
<span class="errMess" :class="{vv:pwVv}">密码为8位</span>
</div>
<div class="form-item">
<div>
<label>确认密码:</label>
<input v-model="rePwd" @change="checkRePwd" type="password" placeholder="请输入确认密码" />
</div>
<span class="errMess" :class="{vv:rePwdVv}">密码两次输入不一致</span>
</div>
<div class="form-item">
<div>
<label>用户邮箱:</label>
<input v-model="email" type="text" placeholder="请输入邮箱" />
</div>
<span class="errMess" @change="checkemail" :class="{vv:emailVv}">请输入正确的邮箱格式</span>
</div>
<div class="form-item">
<div>
<label>验证码:</label>
<div class="verify">
<input v-model="code" @blur="checkCode" type="text" placeholder="" />
<img src="../../static/img/code.bmp" alt="" />
</div>
</div>
<span class="errMess" :class="{vv:codeVv}">请输入正确的验证码</span>
</div>
<button class="btn" @click="checkRegist">注册</button>
</form>
</div>
</div>
<div id="bottom">
<span>
尚硅谷书城.Copyright ©2015
</span>
</div>
</body>
</div>
<script type="text/javascript" src="../../static/script/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
data:{ //不是date，是data啊
"username":"",
"unVv":false,
"password":"",
"pwVv":false,
"rePwd":"",
"rePwdVv":false,
"emailVv":false,
"email":"",
"code":"",
"codeVv":false,
},
methods:{
//验证用户名
checkUserName(){
this.unVv = false;
//用户名要求6-12位，字母数字下划线
//正则表达式
var unReg = /^\w{6,12}$/;
if (unReg.test(this.username) == false){
this.unVv= true;
//取消默认行为
event.preventDefault();
}
},
//验证密码
checkPassWord(){
this.pwVv = false;
//定义密码正则
var pwdReg = /^[a-zA-Z0-9]{6}$/
if(pwdReg.test(this.password) == false){
this.pwVv = true;
event.preventDefault();
}
},
//确认密码
checkRePwd(){
this.rePwdVv = false;
if (this.password != this.rePwd){
this.rePwdVv = true;
event.preventDefault();
}
},
//确认邮箱
checkemail(){
this.emailVv = false;
var emailReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
if(emailReg.test(this.email) == false){
this.emailVv = true;
event.preventDefault();
}
},
//验证码非空
checkCode(){
this.codeVv = false;
if (this.code == ""){
this.codeVv = true;
event.preventDefault();
}
},
checkRegist(){
this.checkUserName();
this.checkPassWord();
this.checkRePwd();
this.checkemail();
this.checkCode();
}
}
})
</script>
</html>
注册成功页，
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>尚硅谷会员注册页面</title> <link type="text/css" rel="stylesheet" href="../../static/css/style.css" > <style type="text/css"> h1 { text-align: center; margin-top: 200px; } h1 a { color:red; } </style> </head> <body> <div id="header"> <a href="../../index.html"> <img class="logo_img" alt="" src="../../static/img/logo.gif" /> </a> <span class="wel_word"></span> <div> <span>欢迎<span class="um_span">张总</span>光临尚硅谷书城</span> <a href="../order/order.html">我的订单</a> <a href="../../index.html">注销</a> <a href="../../index.html">返回</a> </div> </div> <div id="main"> <h1>注册成功! <a href="../../index.html">转到主页</a></h1> </div> <div id="bottom"> <span> 尚硅谷书城.Copyright ©2015 </span> </div> </body> </html>
登录页，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>尚硅谷会员登录页面</title>
<link type="text/css" rel="stylesheet" href="../../static/css/style.css" />
</head>
<body>
<div id="app">
<div id="login_header">
<a href="../../index.html">
<img class="logo_img" alt="" src="../../static/img/logo.gif" />
</a>
</div>
<div class="login_banner">
<div id="l_content">
<span class="login_word">欢迎登录</span>
</div>
<div id="content">
<div class="login_form">
<div class="login_box">
<div class="tit">
<h1>尚硅谷会员</h1>
</div>
<div class="msg_cont">
<b></b>
<span class="errorMsg">{{msg}}</span>
</div>
<div class="form">
<form action="login_success.html">
<label>用户名称：</label>
<input
class="itxt"
type="text"
placeholder="请输入用户名"
autocomplete="off"
tabindex="1"
name="username"
id="username"
v-model="username"
/>
<br />
<br />
<label>用户密码：</label>
<input
class="itxt"
type="password"
placeholder="请输入密码"
autocomplete="off"
tabindex="1"
name="password"
id="password"
v-model="password"
/>
<br />
<br />
<input type="submit" value="登录" id="sub_btn" @click="checklogin"/>
</form>
<div class="tit">
<a href="regist.html">立即注册</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="bottom">
<span>
尚硅谷书城.Copyright ©2015
</span>
</div>
</div>
</body>
<script type="text/javascript" src="../../static/script/vue.min.js"></script>
<script>//Vue模板代码，注意this的调用。
new Vue({
el:"#app",
data:{
username:"",
password:"",
"msg":"请输入用户名和密码",
},
methods:{
checkUserName(){
if (this.username == ""){
this.msg = "用户名不能为空";
event.preventDefault();
}
},
checkPassword(){
if (this.password == ""){
this.msg="密码不能为空，请重新输入";
event.preventDefault();
}
},
checklogin(){//调用方法
this.checkUserName();
this.checkPassword();
}
}
})
</script>
</html>
登陆成功页
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>尚硅谷会员注册页面</title> <link type="text/css" rel="stylesheet" href="static/css/style.css" > <style type="text/css"> h1 { text-align: center; margin-top: 200px; } h1 a { color:red; } </style> </head> <body> <div id="header"> <a href="index.html"> <img class="logo_img" alt="" src="static/img/logo.gif" /> </a> <div> <span>欢迎<span class="um_span">张总</span>光临尚硅谷书城</span> <a href="order/order.html">我的订单</a> <a href="index.html">注销</a> <a href="index.html">返回</a> </div> </div> <div id="main"> <h1>欢迎回来 <a href="index.html">转到主页</a></h1> </div> <div id="bottom"> <span> 尚硅谷书城.Copyright ©2015 </span> </div> </body> </html>
浙公网安备 33010602011771号