Node+Expess构建简单服务端渲染页面

时间 2020-04-10

标签 node+expess node expess 构建简单服务渲染页面繁體版

原文原文链接

Node.js是基于chrome V8引擎的javascript的运行环境的后端语言,有着单线程(与js运行机制同样),支持高并发请求,轻量并且高效的特色,很是适合作服务端渲染.
接下来我就要利用Express框架搭建一个服务端渲染的简单页面,Express是一个基于Node.js平台的极简、灵活的web 应用开发框架，它提供一系列强大的特性，帮助你建立各类 Web 和移动设备应用javascript

//安装开发须要的依赖包
npm i express -g  全局安装  express

新建项目主文件 app.js

var createError = require('http-errors');  // httpError 模块
var express = require('express');  //导入express   
var path = require('path');  // Node 自带模块 
var logger = require('morgan');   // 处理日志  

var indexRouter = require('./routes/index');   // 服务器路由 
var app = express();   // 泛指 express 全部的方法和属性的集合 
// view engine setup  //设置渲染模板引擎,咱们使用的ejs后端模板
app.set('views', path.join(__dirname, 'views'));  // __dirname 根目录   views 拆分到 根目录 
app.set('view engine', 'ejs');  // 设置模块引擎 

app.use(logger('dev'));   // 添加日志中间件 
app.use(express.static(path.join(__dirname, 'public'))); // 静态目录 __dirname 根目录   public 拆分到 根目录

// 路由中间件 设置路由别名  避免路由命名冲突 
app.use('/', indexRouter);   // 浏览器  中间件别名 + path 

// 转发错误处理程序
app.use(function(req, res, next) {
  // next 进入执行下一个中间件 
  console.log(404); 
  next(createError(404));
});

// error handler错误处理
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  // res.render("./views/error.ejs")
  res.render('error');    // SSR 服务器端渲染 
});
module.exports = app;

新建服务端路由文件,index.js

var express = require('express');
var router = express.Router();   // app  > Router 使用express的路由模块
// router 路由模块
// get  请求方式  
// req  请求 request
// res  响应  response 
// next 执行下个中间件 
//index属于文件根目录,能够省略为"/"
router.get('/', function(req, res, next) {
  console.log(req.session);
  //渲染到具体模板 index.ejs
  res.render('./index.ejs', { 
      title: '标题',
      word:"酷酷酷",
      tag:"<h2>Are you OK???? </h2>",
    });
});

新建后端模板index.ejs

简单介绍一下ejs模板语法
<% '脚本' 标签，用于流程控制，无输出。
<%= 输出数据到模板（输出是转义HTML标签不会编译html标签）
<%- 输出非转义的数据到模板(会编译html标签 )
<%#  ejs 这是注释的文本...  %>

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <%- include common %>  //这是我以前写的公共样式
  </head>
  <body>
    <%- include('head',{title:'home'})%>
    <h1><%= title %></h1>
    <p> <%= word %> </p>
    <p> <%=msg %> </p>
    <div>
      <%- tag %>
    </div>
  </body>
</html>
<script >
//js脚本部分能够在script标签里面写

</script>

项目配置文件package.json

"scripts": {
    "start": "node ./bin/www",
  },
//启动cmd窗口,执行npm run start

OK了.html