node.js基于express模拟客户端渲染和服务端渲染（基础无模板）

2021-11-12 14:01:56 阅读：150 来源： 互联网

标签：node 11 const 渲染 express list NanKe router

服务端渲染

/*
 * @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
    <img src="./images/img1.jpg" alt="">
    <a href="/api/list">api/list</a>
</body>

</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");
})

目录结构

点击访问

成功请求服务端渲染好的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才在浏览器进行渲染

标签：node,11,const,渲染,express,list,NanKe,router
来源： https://www.cnblogs.com/NanKe-Studying/p/15544233.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

node.js基于express模拟客户端渲染和服务端渲染（基础无模板）

服务端渲染

客户端渲染（前后端分离）