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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。