通用操作提示页开发
来自CloudWiki
修改webpack配置文件
在config { entry:中添加result部分：
var config = {
entry: {
"common":['./src/page/common/index.js'],
"index":['./src/page/index/index.js'],
"login":['./src/page/login/index.js'],
"result":['./src/page/result/index.js']
},
0：52 在plugins中添加
new HtmlWebpackPlugin(getHtmlConfig('result')),
在page页下，新建result文件夹，在其中新建index.js和index.css
01：23 在view下新建result.html 代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
重启服务
01：45 在result.html页中编辑：
<!DOCTYPE html>
<html lang="en">
<head>
<%= require('html-loader!./layout/head-common.html') %>
<title>结果提示页 - MMall电商平台</title>
</head>
<body>
<%= require('html-loader!./layout/nav-simple.html') %>
恭喜您，注册成功!
<%= require('html-loader!./layout/footer.html') %>
</body>
</html>
02：24 将title中的结果提示页替换为：
<title><%= htmlWebpackPlugin.options.title%> - MMall电商平台</title>
02：49 在webpack.config.js中
GetHtmlConfig方法中添加title一项
//获取html-webpack-plugin参数的方法
var getHtmlConfig = function(name,title){
return {
template : './src/view/'+name +'.html',
filename : 'view/' + name + '.html',
title : title,
inject : true,
hash : true,
chunks : ['common',name]
};
};
同时把配置文件中html模板的处理添加如下：
new HtmlWebpackPlugin(getHtmlConfig('index','首页')),
new HtmlWebpackPlugin(getHtmlConfig('login','用户登录')),
new HtmlWebpackPlugin(getHtmlConfig('result','操作结果')),
重启服务，打到result页查看效果。
编辑html
05:33
<!DOCTYPE html>
<html lang="en">
<head>
<%= require('html-loader!./layout/head-common.html') %>
<title>结果提示页 - MMall电商平台</title>
</head>
<body>
<%= require('html-loader!./layout/nav-simple.html') %>
<div class="page-wrap w">
<div class="result-con">
<h1 class="result-title">恭喜您，注册成功!</h1>
<div class="result-content">
<a class="link" href="./index.html">回到首页</a>
</div>
</div>
<div class='content with-nav'>test</div>
</div>
<%= require('html-loader!./layout/footer.html') %>
</body>
</html>
编辑css
Page/result/index.css
08:53
/*
* @Author: Rosen
* @Date: 2017-05-19 21:52:52
* @Last Modified by: Rosen
* @Last Modified time: 2017-05-19 22:45:55
*/
.page-wrap{
padding: 30px 0;
margin-top: 20px;
text-align: center;
background: #fff;
}
.result-con{
display: none;
}
.result-con .result-title{
color: #555;
}
.result-con .result-content{
margin-top: 20px;
}
.result-con .result-content .link{
margin: 0 5px;
padding: 5px 10px;
border: 1px solid #ccc;
}
编辑js
12:16 首先继续完善result.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 w">
<div class="result-con register-success">
<h1 class="result-title">恭喜您，注册成功！</h1>
<div class="result-content">
<a class="link" href="./index.html">回到首页</a>
<a class="link" href="./user-login.html">立即去登录</a>
</div>
</div>
<div class="result-con pass-reset-success">
<h1 class="result-title">恭喜您，重置密码成功！</h1>
<div class="result-content">
<a class="link" href="./index.html">回到首页</a>
<a class="link" href="./user-login.html">立即去登录</a>
</div>
</div>
<div class="result-con cart-add-success">
<h1 class="result-title">您的商品已成功加入购物车！</h1>
<div class="result-content">
<a class="link" href="./index.html">继续购物</a>
<a class="link" href="./cart.html">去购物车查看</a>
</div>
</div>
<div class="result-con payment-success">
<h1 class="result-title">您的订单支付成功！</h1>
<div class="result-content">
<a class="link" href="./index.html">继续购物</a>
<a class="link order-number" href="./order-detail.html?orderNumber=">查看该订单</a>
</div>
</div>
<div class="result-con default-success">
<h1 class="result-title">恭喜您，操作成功！</h1>
<div class="result-content">
<a class="link" href="./index.html">回到首页</a>
</div>
</div>
</div>
<%= require('html-loader!./layout/footer.html') %>
</body>
</html>
然后编辑对应的Result/index.js 文件
13.32
'use strict';
require('./index.css');
require('page/common/nav-simple/index.js');
var _mm = require('util/mm.js');
$(function(){
var type = _mm.getUrlParam('type') || 'default',
$element = $('.' + type + '-success');
if(type === 'payment'){
var orderNumber = _mm.getUrlParam('orderNumber'),
$orderNumber = $element.find('.order-number');
$orderNumber.attr('href', $orderNumber.attr('href') + orderNumber);
}
// 显示对应的提示元素
$element.show();
})
最后，可以在浏览器上试一下：
http://localhost:8088/dist/view/result.html?type=cart-add
