前端渲染 vs 后端渲染

前端渲染 vs 后端渲染

1. 前端渲染是通過ajax請求數據，然后通過js語法將數據展示到頁面中，稱之為前端渲染
2. 后端渲染是通過后端語言 + 后端模板( ejs ) 將 頁面整個發送給前端
   1. 后端模板
      1. ejs
      2. pug( jade )
      3. art-template

現在流行的： 前端渲染

問題： 當前后端同時進行項目開發是， 后端數據接口沒有寫好，但是前端卻需要這個接口，這個時候怎么辦？ 分析： 需要一段數據 解決： 模擬假數據（ mock數據 json-server / mock.js ）

以上這種形式叫做 ： 前后端架構分離

很久以前，沒有前端崗位的， 所有的網頁都需要后端完成， 那個時候的情況我們稱之為： 前后端耦合

3. Node.js做項目的時候 ，就有兩種選擇了

   1. 前后端分離 ：后端提供接口，前端渲染
   2. 前后端耦合： 后端渲染

4. 直接借助一個工具來搭建一個Node.js項目，這個工具叫做 express-generator ,這個工具幫助我們實現了express框架

5. 創建express項目的流程

   1. 安裝 express-generator $ cnpm i express-generator -g

   2. 創建express 項目 $ express -e 項目名稱 -e是安裝 ejs 模板,支持js語法

   3. 分析目錄

      • package.json 整個項目的依賴配置文件
      • app.js 是整個項目的入口文件
      • views/xx.ejs 是整個項目的模板（模板內容是什么，將來頁面呈現就是什么）
      • routes 是整個項目的路由配置文件
      • public 靜態資源文件（img css js )
      • node_modules 整個項目的依賴包
      • bin / www 整個項目的服務器配置文件

   4. 啟動項目 package.json 中 npm 腳本 $ npm run start

   5. 研究項目代碼

      • 入口文件 app.js

   //引入項目所需要的第三方包 var createError = require('http-errors'); var express = require('express'); var path = require('path'); var cookieParser = require('cookie-parser'); var logger = require('morgan'); //引入項目路由配置文件 var indexRouter = require('./routes/index'); var usersRouter = require('./routes/users'); //創建app對象，是應用級中間件 var app = express(); // view engine setup app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'ejs'); app.use(logger('dev')); app.use(express.json()); app.use(express.urlencoded({ extended: false })); app.use(cookieParser()); app.use(express.static(path.join(__dirname, 'public'))); //路由及中間件 app.use('/', indexRouter); app.use('/users', usersRouter); // catch 404 and forward to error handler app.use(function(req, res, next) { 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('error'); }); module.exports = app;