Node.js是基于chrome V8引擎的javascript的运行环境的后端语言,有着单线程(与js运行机制一样),支持高并发请求,轻量而且高效的特点,非常适合做服务端渲染.
接下来我就要利用Express框架搭建一个服务端渲染的简单页面,Express是一个基于Node.js平台的极简、灵活的web 应用开发框架，它提供一系列强大的特性，帮助你创建各种 Web 和移动设备应用
//安装开发需要的依赖包
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 startOK了.
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。