网站首页地址 网站域名,wordpress 设置页面,培训班网站建设,wordpress the_post()一些项目因需求不同#xff0c;如需SEO或小项目#xff0c;使用angular、react或vue就大材小用了。可以通过webpack、gulp这些构建工具#xff0c;也能快速完成html页面开发#xff0c;并且也能使用less/sass/styus等样式预编译功能#xff0c;以及将js、html分模块、分组… 一些项目因需求不同如需SEO或小项目使用angular、react或vue就大材小用了。可以通过webpack、gulp这些构建工具也能快速完成html页面开发并且也能使用less/sass/styus等样式预编译功能以及将js、html分模块、分组件进行开发。 webpack生成企业站静态页面已经讲了三篇本该结篇但这几天又想到以前项目上使用过MVP模式开发一部分通过后台渲染一部分前端渲染这样能减轻后端压力也能提升开发速度让前端在写静态页面时候就能完成页面数据渲染工作。有需求就有革新的动力所以这篇将对之前功能再度升级改造。 当然这种方法把数据获取到客户端通过art-template模板引擎对数据进行渲染实现是没问题但是完全前端进行渲染这样对SEO优化不太友好若是不考虑此问题不大若将head标签和导航等公共部分在服务端渲染其他内容通过ajax请求在客户端渲染也能满足SEO优化需求和减轻后端压力。 另外art-template存在在webpack编译环境 和 浏览器的生产环境两个环境语法标签会存在冲突在webpack构建生成静态页面时候语法标签就会被解析掉所以要重点注意一点虽然这是可以通过art-templte配置来解决。
1.项目环境搭建 地址Webpack生成企业站静态页面 - 项目搭建-CSDN博客
2. 组件化 地址Webpack生成企业站静态页面 - 组件化-CSDN博客
3. 增加数据处理能力 地址Webpack生成企业站静态页面 - 增强数据处理能力-CSDN博客 该篇是和前三篇连贯讲解的所以从后面开始看的可能地方不太清楚或运行后报错等出现这些问题可以翻看下前几篇这里就不再从零开始讲解项目如何搭建和完善的了。 一、配置修改 首先修改一下webpack.config.js对外增加暴露art-template插件在客户端浏览器中运行时也能使用art-template。
1.1 暴露art-template 这里大家注意的时添加的是template-web.js直接用require引用art-template会报错。 入口entry位置添加artTemplate生成artTemplate.js到dist/js目录中。如下图 在module的rules中之前对外暴露jquery位置后面再增加一个暴露art-template的loader。如下图 webapck.config.js代码如下
const { resolve } require(path);
const webpack require(webpack);
const MiniCssExtractPlugin require(mini-css-extract-plugin);
const artTemplate require(art-template);
const { entrys, staticHtmls, watchHtmls } require(./static.config);
const htmlData require(./html.data.json);// 指定art-template模板路径
artTemplate.defaults.root resolve(__dirname, ./src);
// 指定模板名称
artTemplate.defaults.extname .html;module.exports {entry: {artTemplate: [art-template/lib/template-web.js],jquery: [jquery],...entrys()},output: {filename: js/[name].bundle.js, // 对入口名称进行命名,clean: true // 在生成文件之前清空 output 目录},module: {rules: [// MiniCssExtractPlugin.loader 提取CSS为独立文件// css-loader 会对 import 和 url() 进行处理就像 js 解析 import/require() 一样。{test: /\.css$/i,use: [MiniCssExtractPlugin.loader, css-loader]},// webpack 将 Less 编译为 CSS 的 loader。{test: /\.less$/i,use: [MiniCssExtractPlugin.loader, css-loader, less-loader]},// 匹配图片资源指定构建后存储位置和命名{test: /\.(png|jpg|jpeg|svg|gif)$/i,type: asset/resource,generator: {filename: images/[name][ext]}}, // 匹配html页面并提取内部资源文件{test: /\.html$/i,loader: html-loader,exclude: /node_modules/,options: {minimize: false, // 不压缩html内容preprocessor: (content, loaderContext) {// 正则达式let regEx /datalist\s*{\s*[\s\S]*?\s*}\s*\/datalist/gi,// 区域html页面中json数据htmlResult content.match(regEx),// 公共部分json数据returnData {...htmlData},// 临时存储html中读取到的json数据data {};// 判断htmlResult如果不为空并且数组match匹配到数据返回为数组格式则转换字符串内容为json数据if(null!htmlResultArray.isArray(htmlResult)){try {// 去除datalist标签htmlResult htmlResult.map(item {item item.replace(datalist, );item item.replace(/datalist, );return JSON.parse(item);});// 合并数据htmlResult.forEach(item {Object.assign(data, item);});// 合并到htmlData数据集中Object.assign(returnData, data);} catch (error) {console.error(html result:, error);}// 清除页面中数据content content.replace(regEx, );}return artTemplate.compile(content)(returnData);}}},// 将jquery暴露给全局对象self、window 和 global{test: require.resolve(jquery),loader: expose-loader,options: {exposes: [$, jQuery]}},// 对外暴露art-template{test: require.resolve(art-template/lib/template-web.js),loader: expose-loader,options: {exposes: [artTemplate]}}]},plugins: [...staticHtmls(),// 提取css文件new MiniCssExtractPlugin({filename: css/[name]_bundle.css, //输出文件}),],resolve: {alias: {// 样式路径目录别名$css: resolve(__dirname, src/css)}},mode: production,devServer: {static: {// 指定服务运行目录directory: resolve(__dirname, dist)},watchFiles: [...watchHtmls()],compress: true, //gzip压缩port: 3000, //指定端口号open: true, //服务启动后自动在浏览器打开hot: true //开启热更}
}
1.2 html引入art-template 要想在客户端浏览器中能调用art-template还需要做最后一步前篇中为了方便后期维护将页面配置信息单独放在static.config.js文件中需要在这把artTemplate放到chunks中如下图 这样再执行webpack命令artTemplate.bundle.js文件就成自动注入到所有html文件中。 static.config.js文件代码如下
const { resolve } require(path);
const HtmlWebpackPlugin require(html-webpack-plugin);// 引用JS文件
const scripts [common, index, list, article, contact, message];
// 需要生成的静态页面
const htmls [{name: index.html, chunks: [index]},{name: list.html, chunks: [list]},{name: article.html, chunks: [article]},{name: contact.html, chunks: [contact]},{name: message.html, chunks: [message]}
];
/*** 静态页面配置*/
module.exports {// 重组js入口文件entrys: () {let params {};scripts.forEach(name {params[name] resolve(__dirname, ./src/js/${name}.js);})return params;},// 重组静态页面文件staticHtmls: () htmls.map(item {return new HtmlWebpackPlugin({inject: body,template: resolve(__dirname, ./src/${item.name}),filename: item.name,chunks: [jquery, artTemplate, common, ...item.chunks],minify: false});}),// 监听热更html页面watchHtmls: () htmls.map(item resolve(__dirname, ./src/${item.name}))
} 二、创建mock数据 第二步使用mock来模拟后台接口这里使用梦学谷的mock地址Easy Mock。这个平台使用太简单了就不教大家怎么使用了。现在通过这个模拟我们需要的接口如下图 /inviteList 接口返回数据代码如下
{code: 200,data: [{title: 2015-03-17诚招,datetime: 2014-10-2,url: javascript:;},{title: 2014-03-12招聘,datetime: 2014-03-12,url: javascript:;},{title: 2013-03-30诚招学生暑期工,datetime: 2014-10-2,url: javascript:;}],message: sccuess
}
/bottomList 接口返回数据代码如下
{code: 200,data: [{title: 新春有礼——望玉岛别墅标间推出亲民价餐饮,datetime: 2014-10-2,url: javascript:;},{title: 新春有礼——望玉岛别墅标间推出亲民价餐饮,datetime: 2014-10-2,url: javascript:;},{title: 新春有礼——望玉岛别墅标间推出亲民价餐饮,datetime: 2014-10-2,url: javascript:;},{title: 新春有礼——望玉岛别墅标间推出亲民价餐饮,datetime: 2014-10-2,url: javascript:;}],message: success
}
/firstList 接口返回数据代码如下
{code: 200,data: [{title: 望玉岛标题,description: 望玉岛度假村一日游活动方案活动主题放飞心情走进自然活动地望玉岛度假村行程特点领略望玉岛... ,thumb: images/index_09.jpg,url: javascript:;},{title: 望玉岛标题,description: 望玉岛度假村一日游活动方案活动主题放飞心情走进自然活动地望玉岛度假村行程特点领略望玉岛... ,thumb: images/index_10.jpg,url: javascript:;},{title: 望玉岛标题,description: 望玉岛度假村一日游活动方案活动主题放飞心情走进自然活动地望玉岛度假村行程特点领略望玉岛... ,thumb: images/index_11.jpg,url: javascript:;}],message: success
} 由于这里是项目演示而模拟的数据所以好个区域是使用同一份接口数据就不一一造模拟数据了。 三、ajax封装 这里主要是演示如果通过ajax请求获取数据再将数据渲染到页面所以就简单封装并模拟。如果有朋友希望使用axios或其他相关请求工具可以自行研究。 由于ajax请求所有页面都需要使用到所以这里将封装内容放到之前创建的common.js文件中代码如下
import $css/common.less;(function(){// ajax请求地址const ajaxBaseUrl https://mock.mengxuegu.com/mock/${mock的Project ID}/webpack_ajax_pro;// 配置art-template语法模板artTemplate.defaults.rules[1].test /{%([#]?)[ \t]*(\/?)([\w\W]*?)[ \t]*%}/;/*** ajax 请求* param {*} url * param {*} params * param {*} type */function ajaxRequest(url, params, type){return new Promise(function(resolve, reject){$.ajax({url: ajaxBaseUrl url,type: type,data: params,success: function(res){resolve(res);},error: function(e){reject(e);}});});}/*** 封装Get请求* param {*} id * param {*} url * param {*} params */$.fn.requestGetRender function(id, url, params){let that this;ajaxRequest(url, params, get).then(function(res){let html artTemplate(id, res);$(that).html(html);}).catch(function(msg){console.error(msg);});}/*** 封装POST请求* param {*} id * param {*} url * param {*} params */$.fn.requestPostRender function(id, url, params){let that this;ajaxRequest(url, params, post).then(function(res){let html artTemplate(id, res);$(that).html(html);}).catch(function(msg){console.error(msg);});}
})(); 代码里需要注意的是art-template引擎的语法规则修改因为% %和{{ }}在webpack中默认使用如果客户端代码中不修改语法规则webpack构建时含有% 和 {{ 的语法内容都会被匹配到和清空这样到客户端时就获取不到任何模板内容了。 客户端修改为开始标签为{% 和结束标签为%}代码如下
// 配置art-template语法模板
artTemplate.defaults.rules[1].test /{%([#]?)[ \t]*(\/?)([\w\W]*?)[ \t]*%}/; 另外ajax这里就不细讲了如不了解它的可以去看下相关文档。 art-template在expose-loader中对外暴露名称已修改为artTemplate所以在成功获取到数据后可以直接使用artTemplate来渲染数据。通过artTemplate渲染后得到新的html内容直接通过jquery将其追加到DOM中。 另外有些人可能不清楚$.fn是什么不了解jquery朋友可以查看下相关手册了解其用法和作用。 四、语法标签修改 以上工作做完后我们可以修改index.html中数据了。将之前不管使用{{set inviteList ... }}还是datalist标签引用的JSON数据把需要通过接口获取的数据可以全部删除掉。第二步将客户端浏览器要使用到的模板信息独立出来在template中创建indexTpl.html单独存放。如下图 indexTpl.html模板代码如下
script typetext/html idtpl_top
{%each data as item%}
dl classb_listdta href# target_blankimg src{%item.thumb%} alt09 //a/dtddh2a href{%item.url%} target_blank{%item.title%}/a/h2span{%item.description%}a href{%item.url%} target_blank[详细情况]/a/span/dd
/dl
{%/each%}
/scriptscript typetext/html idtpl_bottom
{%each data as item %}
lispan{% item.datetime %}/spana href{% item.url %} target_blank{% item.title %}/a
/li
{%/each%}
/script 对页面代码分析可知几个区域主要分为这两种模板数据结构所以结构一样的可以共用一个模板。另外模板里的语法开始和结束标签也修改为common.js中修改的语法规则如果未修改客户端浏览器运行时可能渲染为空。 现在index.html文件中代码如下
!-- 修改当前页面对应标题 --
{{$data.navIndexName 首页}}{{extend ./template/layout.html}}datalist
{title: 首页
}
/datalist{{block content}}
!-- mainer_wrapper --
div idmainer_wrapper!-- main --div classmain-containerdiv classclear/div!-- 广告 START --div classbox_gga href# target_blankimg srcimages/index_08.jpg altbanner //a/div!-- 广告 END --!-- box_content 最新活动 START --div classbox_content wd490 fldiv classtitlea href# classmoreMORE gt;gt;/a最新活动/divdiv classcontentdiv idnewsBox/divdiv classclear/div/div/div!-- /box_content 最新活动 END --!-- box_content 旅游项目 START --div classbox_content wd490 fl mg_l15div classtitlea href# classmoreMORE gt;gt;/a旅游项目/divdiv classcontentdiv idtravelBox/divdiv classclear/div/div/div!-- /box_content 旅游项目 END --!-- box_content 旅游咨询 START --div classbox_content fl stylewidth:360px;div classtitlea href# classmoreMORE gt;gt;/a旅游咨询/divdiv classcontentul classbox_list idconsultBox/ul/div/div!-- /box_content 旅游咨询 END --!-- box_content 贵宾服务 START --div classbox_content fl mg_l15 stylewidth:360px;div classtitlea href# classmoreMORE gt;gt;/a贵宾服务/divdiv classcontentul classbox_list idserviceBox/ul/div/div!-- /box_content 贵宾服务 END --!-- box_content 招聘信息 START --div classbox_content fl mg_l15 stylewidth:240px;div classtitlea href# classmoreMORE gt;gt;/a招聘信息/divdiv classcontentul classbox_list idinvitBox/ul/div/div!-- /box_content 招聘信息 END --div classclear/div/div!-- /main --
/div
!-- /mainer_wrapper --{{include ./template/indexTpl.html}}
{{/block}} 这里将独立出去的art-template渲染需要的模板文件再通过include引入进来。其他不需要的数据也清理干净页面显示更为整洁了。 此时执行npx webpack serve命令发现页面数据为空这是因为还未写调用接口数据的代码如下图 html代码除了将多余json数据、模板代码作了处理还需要添加相关ID这在后面客户端渲染页面数据会有用的。如下图 五、页面渲染 由于是首页数据渲染之前也创建了index.html的入口文件所以调用接口的功能就写在index.js文件中代码如下
import $css/index.less;$(function(){// 最新活动$(#newsBox).requestGetRender(tpl_top, /firstList, {});// 旅游项目$(#travelBox).requestGetRender(tpl_top, /firstList, {});// 旅游咨询$(#consultBox).requestGetRender(tpl_bottom, /bottomList, {});// 贵宾服务$(#serviceBox).requestGetRender(tpl_bottom, /bottomList, {});// 招聘信息$(#invitBox).requestGetRender(tpl_bottom, /inviteList, {});
}); 如果devServer打开了hot功能在index.js中添加上面代码后页面数据已显示出来了。如下图 这里写的比较简单也是按个人思路整理的希望对大家有帮助。不管用什么方法只要能满足项目需求达到预期效果用什么方式实现并不重要。
