Skip to content

Latest commit

 

History

History
181 lines (165 loc) · 6.78 KB

课时9 完善页面.md

File metadata and controls

181 lines (165 loc) · 6.78 KB
Raw

在views下创建include文件夹

在include下添加包含的头部

header.ejs
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>珠峰博客</title>
    <link href="/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<!--最外面的容器nav标签，并添加nav-bar样式类，表示这里面属于导航条 -->
<nav class="navbar navbar-default" role="navigation">
    <!--第二步：增加header-->
    <div class="navbar-header">
        <!--最左侧的，默认不可见 按钮标签里嵌套了三个span的icon。然后给与navbar-toggle样式类和属性collapse(收起)，点击的时候目标为data-target。当窗口缩小到一定程度，右侧的效果显现。-->
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menus">
            <span class="sr-only">珠峰博客</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="/" class="navbar-brand">珠峰博客</a>
    </div>
    <!-- 放置其它的导航条 -->
    <div class="collapse navbar-collapse" id="menus">
        <ul class="nav navbar-nav">
            <li class="active"><a href="/users/reg">注册</a></li>
            <li><a href="/users/login">登录</a></li>
            <li><a href="/articles/add">发表文章</a></li>
            <li><a href="/users/logout">登出</a></li>
        </ul>
    </div>
</nav>

在include下添加包含的尾部

footer.ejs
<script src="/lib/jquery/dist/jquery.js"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
</body>
</html>

修改首页

views/index.ejs
<% include include/header.ejs%>
<div class="container">
 主页
</div>
<% include include/footer.ejs%>

效果如下 image

修改用户注册页面

views/user/reg.ejs
<% include ../include/header.ejs%>
<div class="container">
    <form action="/users/reg" method="post"  role="form" class="form-horizontal">
        <div class="form-group">
            <label for="username" class="col-sm-2 control-label">用户名</label>
            <div class="input-group col-sm-10">
                <div class="input-group-addon"> <span class="glyphicon glyphicon-user"></span> </div>
                <input type="text" class="form-control" id="username" name="username" placeholder="用户名"/>
            </div>

        </div>
        <div class="form-group">
            <label for="email" class="col-sm-2 control-label">邮箱</label>
            <div class="input-group col-sm-10">
                <div class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></div>
                <input type="email" class="form-control" name="email" id="email" placeholder="邮箱"/>
            </div>
        </div>
        <div class="form-group">
            <label for="password" class="col-sm-2 control-label">确认密码</label>
            <div class="input-group col-sm-10">
                <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
                <input type="password" class="form-control" name="password" id="password" placeholder="密码"/>
            </div>
        </div>
        <div class="form-group">
            <label for="repassword" class="col-sm-2 control-label">确认密码</label>
            <div class="input-group col-sm-10">
                <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
                <input type="password" class="form-control" name="repassword" id="repassword" placeholder="确认密码"/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">提交</button>
                <button type="reset" class="btn btn-default">重置</button>
            </div>
        </div>

    </form>
</div>
<% include ../include/footer.ejs%>

效果如下 image

修改用户登录界面

views/user/login.ejs
<% include ../include/header.ejs%>
<div class="container">
    <form action="/users/login" method="post"  role="form" class="form-horizontal">
        <div class="form-group">
            <label for="username" class="col-sm-2 control-label">用户名</label>
            <div class="input-group col-sm-10">
                <div class="input-group-addon"> <span class="glyphicon glyphicon-user"></span> </div>
                <input type="text" class="form-control" id="username" name="username" placeholder="用户名"/>
            </div>

        </div>
        <div class="form-group">
            <label for="password" class="col-sm-2 control-label">确认密码</label>
            <div class="input-group col-sm-10">
                <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
                <input type="password" class="form-control" name="password" id="password" placeholder="密码"/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">提交</button>
                <button type="reset" class="btn btn-default">重置</button>
            </div>
        </div>

    </form>
</div>
<% include ../include/footer.ejs%>

效果如下 image

修改发表文章页面

views/article/add.ejs
<% include ../include/header.ejs%>
   <div class="container">
       <form action="/articles/add" method="post"  role="form" class="form-horizontal">
           <div class="form-group">
               <label for="title" class="col-sm-2 control-label">标题</label>
               <div class="col-sm-10">
                   <input type="text" value="" class="form-control" id="title" name="title" placeholder="标题"/>
               </div>
           </div>
           <div class="form-group">
               <label for="content" class="col-sm-2 control-label">正文</label>
               <div class="col-sm-10">
                   <textarea class="form-control"   id="" cols="30" rows="10" id="content" name="content" placeholder="请输入内容"></textarea>
               </div>
           </div>
           <div class="form-group">
               <div class="col-sm-offset-2 col-sm-10">
                   <button type="submit" class="btn btn-default">提交</button>
                   <button type="reset" class="btn btn-default">重置</button>
               </div>
           </div>
       </form>
   </div>
   <% include ../include/footer.ejs%>

效果如下 image