node服务端渲染(完整demo)

简介nodejs搭建多页面服务端渲染技术点koa 搭建服务koa-router 创建页面路由nunjucks 模板引擎组合htmlwebpack打包多页面node端异步请求服务端日志打印项目源码 git clone https://gitee.com/wjj0720/nod…运行npm inpm start一、现代服务端渲染的由来服务端渲染概念：是指，浏览器向服务器发出请求页面，服务端将准备好的模板和数据组装成完整的HTML返回给浏览器展示1、前端后端分离早在七八年前，几乎所有网站都使用 ASP、Java、PHP做后端渲染，随着网络的加快，客户端性能提高以及js本身的性能提高，我们开始往客户端增加更多的功能逻辑和交互，前端不再是简单的html+css更多的是交互，前端页在这是从后端分离出来「前后端正式分家」2、客户端渲染随着ajax技术的普及以及前端框架的崛起(jq、Angular、React、Vue) 框架的崛起，开始转向了前端渲染,使用 JS 来渲染页面大部分内容达到局部刷新的作用优势局部刷新，用户体验优富交互节约服务器成本缺点不利于SEO(爬虫无法爬取ajax)请求回来的数据受浏览器性能限制、增加手机端的耗电首屏渲染需要等js运行才能展示数据3、现在服务端渲染为了解决上面客户端渲染的缺点，然前后端分离后必不能合，如果要把前后端部门合并，拆掉的肯定是前端部门现在服务端渲染的特点前端开发人员编写html+css模板node中间服务负责前端模板和后台数据的组合数据依然由java等前服务端语言提供优势前后端分工明确SEO问题解决4、前、后端渲染相关讨论参考知乎问答：为什么现在又流行服务器端渲染html精读前后端渲染之争服务端渲染 vs 客户端渲染二、项目开始确保你安装node第一步让服务跑起来目标: 创建node服务,通过浏览器访问,返回’hello node!’(html页面其实就是一串字符串) /** 创建项目目录结构如下 / │─ package-lock.json │─ package.json │─ README.md ├─bin │─ www.js // 1. 安装依赖 npm i koa // 2. 修改package.json文件中 scripts 属性如下 “scripts”: { “start”: “node bin/www.js” } // 3. www.js写入如下代码 const Koa = require(‘koa’); let app = new Koa(); app.use(ctx => { ctx.body = ‘hello node!’ }); app.listen(3000, () => { console.log(‘服务器启动 http://127.0.0.1:3000’); }); // 4 npm start 浏览器访问 http://127.0.0.1:3000 查看效果第二步路由的使用目标:使用koa-router根据不同url返回不同页面内容依赖 npm i koa-routerkoa-router 更多细节请至npm查看 /* 新增routers文件夹目录结构如下 │─.gitignore │─package.json │─README.md ├─bin │ │─www.js ├─node_modules └─routers │─home.js │─index.js │─user.js / //项目中应按照模块对路由进行划分,示例简单将路由划分为首页(/)和用户页(/user) 在index中将路由集中管理导, 出并在app实例后挂载到app上 /* router/home.js 文件 / // 引包 const homeRouter = require(‘koa-router’)() //创建路由规则 homeRouter.get([’/’, ‘/index.html’, ‘/index’, ‘/home.html’, ‘/home’], (ctx, next) => { ctx.body = ‘home’ }); // 导出路由备用 module.exports = homeRouter /* router/user.js 文件 / const userRouter = require(‘koa-router’)() userRouter.get(’/user’, (ctx, next) => { ctx.body = ‘user’ }); module.exports = userRouter /* router/index.js 文件 / // 路由集中点 const routers = [ require(’./home.js’), require(’./user.js’) ] // 简单封装 module.exports = function (app) { routers.forEach(router => { app.use(router.routes()) }) return routers[0] } /* www.js 文件改写 / // 引入koa const Koa = require(‘koa’) const Routers = require(’../routers/index.js’) // 实例化koa对象 let app = new Koa() // 挂载路由 app.use((new Routers(app)).allowedMethods()) // 监听3000端口 app.listen(3000, () => { console.log(‘服务器启动 http://127.0.0.1:3000’) })第三步加入模板目标: 1.使用nunjucks解析html模板返回页面 2.了解koa中间件的使用依赖 npm i nunjucksnunjucks中文文档 / *我向项目目录下加入两个准备好的html文件目录结构如下 │─.gitignore │─package.json │─README.md ├─bin │ │─www.js │─middlewares //新增中间件目录 │ ├─nunjucksMiddleware.js //nunjucks模板中间件 ├─node_modules │─routers │ │─home.js │ │─index.js │ │─user.js │─views //新增目录作为视图层 ├─home │ ├─home.html ├─user ├─user.html / / nunjucksMiddleware.js 中间件的编写什么是中间件: 中间件就是在程序执行过程中增加辅助功能 nunjucksMiddleware作用: 给请求上下文加上render方法将来在路由中使用 / const nunjucks = require(’nunjucks’) const path = require(‘path’) const moment = require(‘moment’) let nunjucksEVN = new nunjucks.Environment(new nunjucks.FileSystemLoader(‘views’)) // 为nkj加入一个过滤器 nunjucksEVN.addFilter(’timeFormate’, (time, formate) => moment(time).format( formate || ‘YYYY-MM-DD HH:mm:ss’)) // 判断文件是否有html后缀 let isHtmlReg = /.html$/ let resolvePath = (params = {}, filePath) => { filePath = isHtmlReg.test(filePath) ? filePath : filePath + (params.suffix || ‘.html’) return path.resolve(params.path || ‘’, filePath) } / * @description nunjucks中间件添加render到请求上下文 * @param params {} / module.exports = (params) => { return (ctx, next) => { ctx.render = (filePath, renderData = {}) => { ctx.type = ’text/html’ ctx.body = nunjucksEVN.render(resolvePath(params, filePath), Object.assign({}, ctx.state, renderData)) } // 中间件本身执行完成需要调用next去执行下一步计划 return next() } } / 中间件挂载 www.js中增加部分代码 / // 头部引入文件 const nunjucksMiddleware = require(’../middlewares/nunjucksMiddleware.js’) //在路由之前调用因为我们的中间件是在路由中使用的故应该在路由前加到请求上下文ctx中 app.use(nunjucksMiddleware({ // 指定模板文件夹 path: path.resolve(__dirname, ‘../views’) }) / 路由中调用以routers/home.js 为例修改代码如下/ const homeRouter = require(‘koa-router’)() homeRouter.get([’/’, ‘/index.html’, ‘/index’, ‘/home.html’, ‘/home’], (ctx, next) => { // 渲染页面的数据 ctx.state.todoList = [ {name: ‘吃饭’, time: ‘2019.1.4 12:00’}, {name: ‘下午茶’, time: ‘2019.1.4 15:10’}, {name: ‘下班’, time: ‘2019.1.4 18:30’} ] // 这里的ctx.render方法就是我们通过nunjucksMiddleware中间件添加的 ctx.render(‘home/home’, { title: ‘首页’ }) }) module.exports = homeRouter第四步抽取公共模板目标: 抽取页面的公用部分如导航/底部/html模板等 /views目录下增加两个文件夹_layout(公用模板) _component(公共组件) 目录结构如下 │─.gitignore │─package.json │─README.md ├─bin │ │─www.js /koa服务 │─middlewares //中间件目录 │ ├─nunjucksMiddleware.js //nunjucks模板中间件 ├─node_modules │─routers //服务路由目录 │ │─home.js │ │─index.js │ │─user.js │─views //页面视图层 │─_component │ │─nav.html (公用导航) │─_layout │ │─layout.html (公用html框架) ├─home │ ├─home.html ├─user ├─user.html / <!– layout.html 文件代码 –> <!DOCTYPE html> <html> <head> <meta charset=“UTF-8”> <title>{{ title }}</title> </head> <body> <!– 占位名称为content的block将放在此处 –> {% block content %} {% endblock %} </body> </html> <!– nav.html 公用导航 –> <ul> <li><a href="/">首页</a></li> <li><a href="/user">用户页</a></li> </ul> <!– home.html 改写 –> <!– njk继承模板 –> {% extends “../_layout/layout.html” %} {% block content %} <!– njk引入公共模块 –> {% include “../_component/nav.html” %} <h1>待办事项</h1> <ul> <!– 过滤器的调用 timeFormate即我们在中间件中给njk加的过滤器 –> {% for item in todoList %} <li>{{item.name}} —> {{item.time | timeFormate}}</li> {% endfor %} </ul> {% endblock %} <!– user.html –> {% extends “../_layout/layout.html” %} {% block content %} {% include “../_component/nav.html” %} 用户中心 {% endblock %}第五步静态资源处理目标: 处理页面jscssimg等资源引入依赖用webpack打包静态资源 npm i webpack webpack-cli -D处理js npm i @babel/core @babel/preset-env babel-loader -D处理less npm i css-loader less-loader less mini-css-extract-plugin -D处理文件 npm i file-loader copy-webpack-plugin -D处理html npm i html-webpack-plugin -D清理打包文件 npm i clean-webpack-plugin -D> 相关插件使用查看npm相关文档 / 项目目录变更 │ .gitignore │ package.json │ README.md ├─bin │ www.js ├─config //增加webpack配置目录 │ webpack.config.js ├─middlewares │ nunjucksMiddleware.js ├─routers │ home.js │ index.js │ user.js ├─src │ │─template.html // + html模板以此模板为每个入口生成引入对应js的模板 │ ├─images // +图资源目录 │ │ ww.jpg │ ├─js // + js目录 │ │ ├─home │ │ │ home.js │ │ └─user │ │ user.js │ └─less // + css目录 │ ├─common │ │ common.less │ │ nav.less │ ├─home │ │ home.less │ └─user │ user.less └─views ├─home │ home.html ├─user │ user.html ├─_component │ nav.html └─_layout // webpac打包后的html模板 ├─home │ home.html └─user user.html / <!– template.html 内容–> <!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <meta http-equiv=“X-UA-Compatible” content=“ie=edge”> <title>{{title}}</title> </head> <body> <!– njk模板继承后填充 –> {% block content %} {% endblock %} </body> </html> / src/js/home/home.js 一个入口文件/ import ‘../../less/home/home.less’ //引入css import img from ‘../../images/ww.jpg’ //引入图片 console.log(111); let add = (a, b) => a + b; //箭头函数 let a = 3, b = 4; let c = add(a, b); console.log(c); // 这里只做打包演示代码不具任何意义 <!– less/home/home.less 内容 –> // 引入公共样式 @import ‘../common/common.less’; @import ‘../common/nav.less’; .list { li { color: rebeccapurple; } } .bg-img { width: 200px; height: 200px; background: url(../../images/ww.jpg); // 背景图片 margin: 10px 0; } / webpack配置 webpack.config.js */ const path = require(‘path’); const CleanWebpackPlugin = require(‘clean-webpack-plugin’); const HtmlWebpackPlugin = require(‘html-webpack-plugin’); const MiniCssExtractPlugin = require(“mini-css-extract-plugin”); const CopyWebpackPlugin = require(‘copy-webpack-plugin’); // 多入口 let entry = { home: ‘src/js/home/home.js’, user: ‘src/js/user/user.js’ } module.exports = evn => ({ mode: evn.production ? ‘production’ : ‘development’, // 给每个入口 path.reslove entry: Object.keys(entry).reduce((obj, item) => (obj[item] = path.resolve(entry[item])) && obj, {}), output: { publicPath: ‘/’, filename: ‘js/[name].js’, path: path.resolve(‘dist’) }, module: { rules: [ { // bable 根据需要转换到对应版本 test: /.js$/, exclude: /node_modules/, use: { loader: ‘babel-loader’, options: { presets: [’@babel/preset-env’] } } }, { // 转换less 并交给MiniCssExtractPlug插件提取到单独文件 test: /.less$/, loader: [MiniCssExtractPlugin.loader, ‘css-loader’, ’less-loader’], exclude: /node_modules/ }, { //将css、js引入的图片目录指到dist目录下的images 保持与页面引入的一致 test: /.(png|svg|jpg|gif)$/, use: [{ loader: ‘file-loader’, options: { name: ‘[name].[ext]’, outputPath: ‘./images’, } }] }, { test: /.(woff|woff2|eot|ttf|otf)$/, use: [{ loader: ‘file-loader’, options: { name: ‘[name].[ext]’, outputPath: ‘./font’, } }] } ] }, plugins: [ // 删除上一次打包目录(一般来说删除自己输出过的目录 ) new CleanWebpackPlugin([‘dist’, ‘views/_layout’], { // 当配置文件与package.json不再同一目录时候需要指定根目录 root: path.resolve() }), new MiniCssExtractPlugin({ filename: “css/[name].css”, chunkFilename: “[id].css” }), // 将src下的图片资源平移到dist目录 new CopyWebpackPlugin( [{ from: path.resolve(‘src/images’), to: path.resolve(‘dist/images’) } ]), // HtmlWebpackPlugin 每个入口生成一个html 并引入对应打包生产好的js …Object.keys(entry).map(item => new HtmlWebpackPlugin({ // 模块名对应入口名称 chunks: [item], // 输入目录 (可自行定义这边输入到views下面的_layout) filename: path.resolve(‘views/_layout/’ + entry[item].split(’/’).slice(-2).join(’/’).replace(‘js’, ‘html’)), // 基准模板 template: path.resolve(‘src/template.html’) })) ] }); <!– package.json中添加 –> “scripts”: { “start”: “node bin/www.js”, “build”: “webpack –env.production –config config/webpack.config.js” } 运行 npm run build 后生成 dist views/_layout 两个目录 <!– 查看打包后生成的模板 views/_layout/home/home.html–> <!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <meta http-equiv=“X-UA-Compatible” content=“ie=edge”> <title>{{title}}</title> <!– 引入了css文件 –> <link href="/css/home.css" rel=“stylesheet”></head> <body> {% block content %} {% endblock %} <!– 引入了js文件此时打包后的js/css在dist目录下面 –> <script type=“text/javascript” src="/js/home.js"></script></body> </html> <!– view/home/home.html 页面改写 –> <!– njk继承模板继承的目标来自webpack打包生成 –> {% extends “../_layout/home/home.html” %} {% block content %} <!– njk引入公共模块 –> {% include “../_component/nav.html” %} <h1>待办事项</h1> <ul class=“list”> <!– 过滤器的调用 timeFormate即我们在中间件中给njk加的过滤器 –> {% for item in todoList %} <li>{{item.name}} —> {{item.time | timeFormate}}</li> {% endfor %} </ul> <div class=“bg-img”> 背景图</div> <!– 页面图片引入方式 –> <img src="/images/ww.jpg"/> {% endblock %} /**koa处理静态资源 * 依赖 npm i ‘koa-static */ // www.js 增加将静态资源目录指向打包后的dist目录 app.use(require(‘koa-static’)(path.resolve(‘dist’)))运行npm run buildnpm start浏览器访问127.0.0.1:3000 查看页面 js css img 效果第六步监听编译目标: 文件发生改实时编译打包依赖 npm i pm2 concurrently /**项目中文件发生变动需要重启服务才能看到效果是一件蛋疼的事,故需要实时监听变动 */ <!– 我们要监听的有两点一是node服务而是webpack打包 package.json变动如下 –> “scripts”: { // concurrently 监听同时监听两条命令 “start”: “concurrently "npm run build:dev" "npm run server:dev"”, “dev”: “npm start”, // 生产环境执行两条命令即可无监听 “product”: “npm run build:pro && npm run server:pro”, // pm2 –watch参数监听服务的代码变更 “server:dev”: “pm2 start bin/www.js –watch”, // 生产不需要用监听 “server:pro”: “pm2 start bin/www.js”, // webpack –watch 对打包文件监听 “build:dev”: “webpack –watch –env.production –config config/webpack.config.js”, “build:pro”: “webpack –env.production –config config/webpack.config.js” }第七步数据请求目标: node请求接口数据填充模板依赖 npm i node-fetch /*上面的代码中routers/home.js首页路由中我们向页面渲染了下面的一组数据 / ctx.state.todoList = [ {name: ‘吃饭’, time: ‘2019.1.4 12:00’}, {name: ‘下午茶’, time: ‘2019.1.4 15:10’}, {name: ‘下班1’, time: ‘2019.1.4 18:30’} ] /但数据是同步的项目中我们必然会向java获取其他后台拿到渲染数据再填充页面我们来看看怎么做/ /我们在根目录下创建一个util的目录作为工具库并简单封装fetch.js请求数据/ const nodeFetch = require(’node-fetch’) module.exports = ({url, method, data = {}}) => { // get请求将参数拼到url url = method === ‘get’ || !method ? “?” + Object.keys(data).map(item => ${item}=${data[item]}).join(’&’) : url; return nodeFetch(url, { method: method || ‘get’, body: JSON.stringify(data), headers: { ‘Content-Type’: ‘application/json’ }, }).then(res => res.json()) } /在根目录下创建一个service的目录作为数据层并创建一个exampleService.js 作为示例/ //引入封装的请求工具 const fetch = require(’../util/fetch.js’) module.exports = { getTodoList (params = {}) { return fetch({ url: ‘https://www.easy-mock.com/mock/5c35a2a2ce7b4303bd93fbda/example/todolist', method: ‘post’, data: params }) }, //… } / 将请求加入到路由中 routers/home.js 改写 / const homeRouter = require(‘koa-router’)() let exampleService = require(’../service/exampleService.js’) // 引入service api //将路由匹配回调改成async函数并在请时候 await数据回来再调用render homeRouter.get([’/’, ‘/index.html’, ‘/index’, ‘/home.html’, ‘/home’], async (ctx, next) => { // 请求数据 let todoList = await exampleService.getTodoList({name: ‘ott’}) // 替换原来的静态数据 ctx.state.todoList = todoList.data ctx.render(‘home/home’, { title: ‘首页’ }) }) // 导出路由备用 module.exports = homeRouter第八步日志打印目标: 使程序运行可视依赖 npm i log4js / 在util目录下创建 logger.js 代码如下作简单的logger封装 / const log4js = require(’log4js’); const path = require(‘path’) // 定义log config log4js.configure({ appenders: { // 定义两个输出源 info: { type: ‘file’, filename: path.resolve(’log/info.log’) }, error: { type: ‘file’, filename: path.resolve(’log/error.log’) } }, categories: { // 为info/warn/debug 类型log调用info输出源 error/fatal 调用error输出源 default: { appenders: [‘info’], level: ‘info’ }, info: { appenders: [‘info’], level: ‘info’ }, warn: { appenders: [‘info’], level: ‘warn’ }, debug: { appenders: [‘info’], level: ‘debug’ }, error: { appenders: [’error’], level: ’error’ }, fatal: { appenders: [’error’], level: ‘fatal’ }, } }); // 导出5种类型的 logger module.exports = { debug: (…params) => log4js.getLogger(‘debug’).debug(…params), info: (…params) => log4js.getLogger(‘info’).info(…params), warn: (…params) => log4js.getLogger(‘warn’).warn(…params), error: (…params) => log4js.getLogger(’error’).error(…params), fatal: (…params) => log4js.getLogger(‘fatal’).fatal(…params), } / 在fetch.js中是哟logger */ const nodeFetch = require(’node-fetch’) const logger = require(’./logger.js’) module.exports = ({url, method, data = {}}) => { // 加入请求日志 logger.info(‘请求url:’, url , method||‘get’, JSON.stringify(data)) // get请求将参数拼到url url = method === ‘get’ || !method ? “?” + Object.keys(data).map(item => ${item}=${data[item]}).join(’&’) : url; return nodeFetch(url, { method: method || ‘get’, body: JSON.stringify(data), headers: { ‘Content-Type’: ‘application/json’ }, }).then(res => res.json()) } <!– 日志打印 –> [2019-01-09T17:34:11.404] [INFO] info - 请求url: https://www.easy-mock.com/mock/5c35a2a2ce7b4303bd93fbda/example/todolist post {“name”:“ott”}注: 仅共学习参考,生产配置自行斟酌!转载请备注来源!