Week-7 通用模块和首页的开发

最新推荐文章于 2023-08-16 16:17:47 发布

ZenSheep

最新推荐文章于 2023-08-16 16:17:47 发布

阅读量144

点赞数

分类专栏：软件开发架构平台文章标签： ajax

本文链接：https://blog.csdn.net/yangzhenyu2/article/details/119024700

版权

软件开发架构平台专栏收录该内容

28 篇文章 2 订阅

订阅专栏

Week-7 通用模块和首页的开发

P1 通用的CSS和index.html的开发

mypetstore.css作为通用css
在通用模块common的index.js中使用 require(’./mypetsotre.css’); 引用公共css到所有页面

P2 首页catalog-main的拆分

网页的公共部分的包含问题，使用html-loader来加载后缀名为htm的功能部分，区别于html插件来加载后缀名为html的文件
安装插件：

npm install html-loader --save-dev
npm run build

1.在webpack.config.js中修改配置：

  module: {
      rules: [
        {
            test: /\.css$/,
            use : [
              {
                  loader : MiniCssExtractPlugin.loader,
                  options : {
                    publicPath : '../'
                  }
              },
              'css-loader'
            ]
        },
        {
            test: /\.(png|svg|jpg|gif)$/,
            use : [
              'url-loader?limit=1000&name=images/[name].[ext]'
            ]
        },
+        {
+           test: /\.htm$/,
+           use : {
+             loader: 'html-loader',
+             options: {
+               esModule: false,
+               minimize: false
+             }
+           }
+        }
      ]
    }

在view目录下新建common目录，用于保存公共页面模板，如新建head.htm

     <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

在页面引用公共模块

<!DOCTYPE html>
<html lang="en">
<head>
-    <!-- <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title> -->
    
+    <%= require('./common/head.htm') %>
</head>
<body>
    <h1>register.html</h1>
</body>
</html>

P3 图片的加载

webpack.config.js配置：

{
            test: /\.(png|svg|jpg|gif)$/,
            use : [
-              'url-loader?limit=1000&name=images/[name].[ext]'
+				{
+ 				  loader  : 'url-loader',
+ 				  options : {
+ 					  name  : 'images/[name].[ext]',
+ 				 	  limit : 10,
+ 				 	  esModule : false
+ 				  }
+ 				}
            ]
        }

由于htm和html使用的插件不同，因此
htm : 使用相对路径直接加载图片
html: 使用 <%= require(‘相对路径’) %> 加载图片

P4 通用util.js的开发

var _util = {
    request : function(param){
        var _this = this;
        $.ajax({
            type     : param.type || 'GET',
            url      : param.url  || '',
            dataType : param.type || 'json',
            data     : param.data  || '',
            success  : function(res){
                if(0 === res.status){
                    typeof res.success === 'function' && param.success(res.data,res.msg);
                }else if(10 === res.status){
                    _this.doLogin();
                }else if(1 === res.status){
                    typeof res.error === 'function' && param.error(res.msg);
                }
            },
            error    : function(errMsy){
                //todo: 请求错误提示
            }
        })
    },
    doLogin : function(){
        window.location.href = './account-login.html?redirect='+encodeURIComponent(window.location.href);
    }
};

module.exports = _util;

P5 判断登录状态

实现异步请求接口
实现服务

tips:

新增或删除文件最好重启dev

ZenSheep

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Week-7 通用模块和首页的开发

Week-7 通用模块和首页的开发P1 通用的CSS和index.html的开发mypetstore.css作为通用css在通用模块common的index.js中使用 require(’./mypetsotre.css’); 引用公共css到所有页面P2 首页catalog-main的拆分网页的公共部分的包含问题，使用html-loader来加载后缀名为htm的功能部分，区别于html插件来加载后缀名为html的文件安装插件：npm install html-loader --sav
复制链接

扫一扫