登录页面的开发

来自CloudWiki
跳转至： 导航， 搜索

准备工作

00：22 把view下的login.html改为user-login.html

00：29 Webpack.config.js中的修改： 

 entry: {
        "common":['./src/page/common/index.js'],
        "index":['./src/page/index/index.js'],
        "user-login":['./src/page/user-login/index.js'],
        "result":['./src/page/result/index.js']
    },

00：34 html模板的处理也要做相应的修改 

//html模板的处理
        new HtmlWebpackPlugin(getHtmlConfig('index','首页')),
        new HtmlWebpackPlugin(getHtmlConfig('user-login','用户登录')),
         new HtmlWebpackPlugin(getHtmlConfig('result','操作结果')),

保存并重启服务

逻辑部分也改掉：

Page/login 也改为user-login

然后将src中所有引用login的地方也改为user-login

(mm.html : login.html -> user-login.html)

html页面的初始化

User-login.html

02:03 

<!DOCTYPE html>
<html lang="en">
    <head>
        <%= require('html-loader!./layout/head-common.html')  %>
        <title><%= htmlWebpackPlugin.options.title%> - MMall电商平台</title>
    </head>
    <body>
        <%= require('html-loader!./layout/nav-simple.html')  %>
       
        <%= require('html-loader!./layout/footer.html')  %>
    </body>
</html>


User-login/index.js

/*
* @Author: Rosen
* @Date:   2017-05-08 22:26:19
* @Last Modified by:   Rosen
* @Last Modified time: 2017-05-21 22:36:14
*/

'use strict';
require('./index.css');
require('page/common/nav-simple/index.js');
var _user   = require('service/user-service.js');
var _mm     = require('util/mm.js');


html页面的开发

User-login.html: 

<!DOCTYPE html>
<html lang="en">
    <head>
        <%= require('html-loader!./layout/head-common.html')  %>
        <title><%= htmlWebpackPlugin.options.title%> - MMall电商平台</title>
    </head>
    <body>
        <%= require('html-loader!./layout/nav-simple.html')  %>
        <div class="page-wrap">
            <div class="w">
                <div class="user-con">
                    <div class="user-title">用户登录</div>
                    <div class="user-box">
                        <div class="error-item">
                            <i class="fa fa-minus-circle error-icon"></i>
                            <p class="err-msg">Error</p>
                        </div>
                        <div class="user-item">
                            <label class="user-label" for="">
                                <i class="fa fa-user"></i>
                            </label>
                            <input class="user-content" id="username" placeholder="请输入用户名" autocomplete="off">
                        </div>
                        <div class="user-item">
                            <label class="user-label" for="password">
                                <i class="fa fa-lock"></i>
                            </label>
                            <input type="password" class="user-content" id="password" placeholder="请输入密码" autocomplete="off">
                        </div>
                        <a class="btn btn-submit" id="submit">登录</a>
                        <div class="link-item">
                            <a class="link" href="./user-pass-reset.html" target="_blank">忘记密码</a>
                            <a class="link" href="./user-register.html" target="_blank">免费注册</a>
                        </div>
                    </div>  
                </div>                
            </div>
        </div>
        <%= require('html-loader!./layout/footer.html')  %>
    </body>
</html>

编辑css

/*
* @Author: Rosen
* @Date:   2017-05-21 15:11:05
* @Last Modified by:   Rosen
* @Last Modified time: 2017-05-21 22:46:39
*/
/* 最外层容器 */
.page-wrap{
    padding: 40px 0;
    background: #e72955;
}
/* 表单框 */
.user-con{
    position: relative;
    margin: 0 auto;
    width: 400px;
    background: #fff;
}
.user-con .user-title{
    text-align: center;
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
    font-size: 18px;
    font-weight: bold;
    color: #666;
}
.user-con .user-box{
    padding: 20px;
}
/* 错误提示框 */
.user-con .user-box .error-item{
    position: relative;
    padding: 4px 0 4px 40px;
    margin-bottom: 10px;
    border: 1px solid red;
    color: red;
    background: #fde9e9;
    display: none;
}
/* 错误图标 */
.user-con .user-box .error-icon{
    position: absolute;
    left: 14px;
    top: 50%;
    font-size: 14px;
    margin-top: -7px;
}

.user-con .user-item{
    position: relative;
    margin-bottom: 20px;
}
.user-con .user-item .user-label{
    position: absolute;
    left: 1px;
    top: 1px;
    bottom: 1px;
    width: 40px;
    line-height: 36px;
    background: #f3f3f3;
    font-size: 18px;
    color: #d3d3d3;
    text-align: center;
    border-right: 1px solid #bdbdbd;
}
.user-con .user-item .user-content{
    padding: 10px 0 10px 50px;
    width: 308px;
    height: 18px;
    line-height: 18px;
    font-size: 15px;
    border: 1px solid #bdbdbd;
    outline: none;
}
.user-con .btn-submit{
    width: 100%;
    padding: 2px 0;
    text-align: center;
    font-size: 20px;
}
/* 跳转链接 */
.user-con .link-item{
    text-align: right;
    margin-top: 10px;
}
.user-con .link-item .link{
    margin-left: 10px;
    color: #999;
}
取自“http://www.openbrains.net/mediawiki/index.php?title=登录页面的开发&oldid=10490”