node.js基於express模擬客戶端渲染和服務端渲染（基礎無模板）
阿新 • • 發佈：2021-11-13
服務端渲染
/* * @Description:express路由表 * @Author: NanKe * @Date: 2021-11-08 16:07:49 * @LastEditTime: 2021-11-12 12:26:42 * @LastEditors: NanKe * @Cnblogs: https://www.cnblogs.com/NanKe-Studying/ * @FilePath: \node\express\router\index.js */ const express = require("express") const router = express.Router()const { list } = require("../controllers") router.get('/api/list', list) module.exports = router
/* * @Description:控制層 * @Author: NanKe * @Date: 2021-11-08 21:08:11 * @LastEditTime: 2021-11-08 21:14:14 * @LastEditors: NanKe * @Cnblogs: https://www.cnblogs.com/NanKe-Studying/ * @FilePath: \node\express\controllers\index.js*/ const list = (req, res, next) => { let data = '<ul>' for (let i = 0; i < 100; i++) { data += `<li>${i}</li>` } data += '</ul>' res.send(data) } exports.list = list
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>static</title>
<link rel="stylesheet" href="./styles/reset.css">
<script src="./scripts/common.js"></script>
</head>
<body>
hello
/* * @Description:express服務端渲染 * @Author: NanKe * @Date: 2021-11-08 16:11:51 * @LastEditTime: 2021-11-12 12:20:17 * @LastEditors: NanKe * @Cnblogs: https://www.cnblogs.com/NanKe-Studying/ * @FilePath: \node\express\express2.js */ const express = require("express") const router = require("./router/index") const app = express() //處理前端傳遞表單資料 parse application/x-www-form-urlencoded app.use(express.urlencoded({ extended: false })) //處理前端傳遞json資料 parse application/json app.use(express.json()) //靜態資源服務中介軟體 app.use(express.static('./public')) app.use('/', router) app.listen(8080, () => { console.log("localhost:8080 Listen"); })
目錄結構
點選訪問
成功請求服務端渲染好的html模板
客戶端渲染（前後端分離）
/* * @Description:express路由表 * @Author: NanKe * @Date: 2021-11-08 16:07:49 * @LastEditTime: 2021-11-12 12:26:42 * @LastEditors: NanKe * @Cnblogs: https://www.cnblogs.com/NanKe-Studying/ * @FilePath: \node\express\router\index.js */ const express = require("express") const router = express.Router() const { list } = require("../controllers") router.get('/api/list', list) module.exports = router
/* * @Description:控制層 * @Author: NanKe * @Date: 2021-11-08 21:08:11 * @LastEditTime: 2021-11-12 13:07:38 * @LastEditors: NanKe * @Cnblogs: https://www.cnblogs.com/NanKe-Studying/ * @FilePath: \node\express\controllers\index.js */ const list = (req, res, next) => { let dataObj = { code:200, data:[] } for(let i=0;i<100;i++){ dataObj.data.push('line'+i) } res.send(dataObj) } exports.list = list
/* * @Description: * @Author: NanKe * @Date: 2021-11-12 11:43:54 * @LastEditTime: 2021-11-12 13:39:55 * @LastEditors: NanKe * @Cnblogs: https://www.cnblogs.com/NanKe-Studying/ * @FilePath: \node\express\public\scripts\common.js */ $.ajax({ url: "/api/list", success(result) { console.log(result); let html = '<ul>' $.each(result.data, function (indexInArray, valueOfElement) { html += '<li>' + valueOfElement + '</li>' }); html +="</ul>" $('#list').html(html) } });
/* * @Description:express+路由表--》獲取前端傳遞的引數 * @Author: NanKe * @Date: 2021-11-08 16:11:51 * @LastEditTime: 2021-11-12 12:20:17 * @LastEditors: NanKe * @Cnblogs: https://www.cnblogs.com/NanKe-Studying/ * @FilePath: \node\express\express2.js */ const express = require("express") const router = require("./router/index") const app = express() //處理前端傳遞表單資料 parse application/x-www-form-urlencoded app.use(express.urlencoded({ extended: false })) //處理前端傳遞json資料 parse application/json app.use(express.json()) //靜態資源服務中介軟體 app.use(express.static('./public')) app.use('/', router) app.listen(8080, () => { console.log("localhost:8080 Listen"); })
<!-- * @Description: * @Author: NanKe * @Date: 2021-11-12 11:43:54 * @LastEditTime: 2021-11-12 13:32:40 * @LastEditors: NanKe * @Cnblogs: https://www.cnblogs.com/NanKe-Studying/ * @FilePath: \node\express\public\index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>static</title> <link rel="stylesheet" href="./styles/reset.css"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <script src="./scripts/common.js"></script> </head> <body> hello <img src="./images/img1.jpg" alt=""> <a href="/api/list">api/list</a> <div id="list"></div> </body> </html>
可以看到這種請求方式 就是前端獲取到json資料 html才在瀏覽器進行渲染