书城项目第一阶段的实现登录&注册页面

Posted 云深不知处

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了书城项目第一阶段的实现登录&注册页面相关的知识，希望对你有一定的参考价值。

书城项目的第一阶段&学习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" >
                <!-- <div class="banner-img"></div> -->
              </li>
              <li class="swiper-slide">
                <img src="static/uploads/banner5.jpg" >
                <!-- <div class="banner-img"></div> -->
              </li>
              <li class="swiper-slide">
                <img src="static/uploads/banner6.jpg" >
                <!-- <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" >
                <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" >
                <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" >
                <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" >
                <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" >
                <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" >
                <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" >
                <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" >
                <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" >
                <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" >
                <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"  />
        </a>
        <a href="" class="img">
          <img src="static/uploads/cate5.jpg"  />
        </a>
        <a href="" class="img">
          <img src="static/uploads/cate6.jpg"  />
        </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" >
                    <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" >
                    <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" >
                    <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" >
                    <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" >
                  <span>大咖级讲师亲自授课</span>
                </a>
              </li>
              <li>
                <a href="">
                  <img src="static/img/bottom.png" >
                  <span>课程为学员成长持续赋能</span>
                </a>
              </li>
              <li>
                <a href="">
                  <img src="static/img/bottom2.png" >
                  <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"  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"  />
              </div>
            </div>
            <span class="errMess" :class="{vv:codeVv}">请输入正确的验证码</span>
          </div>
          <button class="btn" @click="checkRegist">注册</button>
        </form>
      </div>
    </div>
    <div id="bottom">
      <span>
        尚硅谷书城.Copyright &copy;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"  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>&nbsp;&nbsp;
                    <a href="../../index.html">返回</a>
                </div>
        </div>
        
        <div id="main">
        
            <h1>注册成功! <a href="../../index.html">转到主页</a></h1>
    
        </div>
        
        <div id="bottom">
            <span>
                尚硅谷书城.Copyright &copy;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"  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 &copy;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"  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>&nbsp;&nbsp;
                    <a href="index.html">返回</a>
                </div>
        </div>
        
        <div id="main">
        
            <h1>欢迎回来 <a href="index.html">转到主页</a></h1>
    
        </div>
        
        <div id="bottom">
            <span>
                尚硅谷书城.Copyright &copy;2015
            </span>
        </div>
</body>
</html>

 

以上是关于书城项目第一阶段的实现登录&注册页面的主要内容，如果未能解决你的问题，请参考以下文章

EasyUi项目《网上书城》之权限登陆，注册，左侧树形菜单

基于 JavaWeb 的尚书房网上书城项目

基于web的网上书城系统开发-----登录注册

Java全栈web网页技术：9.书城项目实战一：jQuery和Servlet练习

Java全栈web网页技术：9.书城项目实战一：jQuery和Servlet练习

Java全栈web网页技术：9.书城项目实战一：jQuery和Servlet练习