前后端渲染详解

最新推荐文章于 2024-06-13 09:59:37 发布

每天都要学习一点点

最新推荐文章于 2024-06-13 09:59:37 发布

阅读量552

点赞数

文章标签： node.js

本文链接：https://blog.csdn.net/qq_45031196/article/details/105391854

版权

前端渲染

访问网页时，先请求到 html 内容，并渲染出来。然后根据需要发送 ajax 请求获取后台返回的数据来更新页面。

前端渲染的优势

局部刷新。无需每次都进行完整页面请求
懒加载。如在页面初始时只加载可视区域内的数据，滚动后rp加载其它数据，可以通过 react-lazyload 实现
富交互。使用 JS 实现各种酷炫效果
节约服务器成本。省电省钱，JS 支持 CDN 部署，且部署极其简单，只需要服务器支持静态文件即可
天生的关注分离设计。服务器来访问数据库提供接口，JS 只关注数据获取和展现
JS 一次学习，到处使用。可以用来开发 Web、Serve、Mobile、Desktop 类型的应用

前端渲染演示

前端渲染就是先请求到页面的数据，再去发ajax请求拿到数据，再把拿到的数据去更新页面

//这里实现一个小案例
index.html
<body>
    <h1>
        hello 我喜欢的水果
    </h1>
    <ul id="myUl">
        <!-- <li>apple</li>
        <li>banana</li>
        <li>pear</li> -->
    </ul>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
<script>
    //直接发起ajax请求
    $(function () {
        $.get('http://localhost:3000/getFruits', function (res) {
            //1.循环遍历res这个数组
            for (var i = 0; i < res.length; i++) {
                //1.1创建li元素
                let li = document.createElement('li')
                //设置li元素的文本
                li.innerHTML = res[i]
                //1.3讲这个li元素追加到ul元素中
                document.getElementById('myUl').appendChild(li)
            }
        })
    })
</script>
index.js
//后端服务代码
const express = require('express')

const app = express()

//静态资源托管
app.use(express.static('./public'))

app.get('/getFruits', (req, res) => {
    let fruits = [
        'apple',
        'banana',
        'pear'
    ]
    res.send(fruits)
})


app.listen(3000, () => {
    console.log('服务启动成功')
})

???
localhost:3000是渲染的前端页面
localhost:3000/getFruits是数组

后端渲染

访问网页时，后端将 html 内容与 json 数据拼接好之后再返回到客户端来渲染。

后端渲染的优势

服务端渲染不需要先下载一堆 js 和 css 后才能看到页面（首屏性能）
SEO
服务端渲染不用关心浏览器兼容性问题（随意浏览器发展，这个优点逐渐消失）
对于电量不给力的手机或平板，减少在客户端的电量消耗很重要

后端渲染的准备工作

EJS模板引擎

ejs官网

后端渲染演示

案例1

index.ejs
<body>
    <h1>这里是ejs</h1>
    <ul>
        <% for(var i=0;i<fruits.length;i++){ %>
        <li><%= fruits[i] %></li>
        <% } %>

    </ul>
</body>

index.js
const express = require('express')
const app = express()
//设置模板引擎的配置
app.set('view engine', 'ejs') //设置当前使用的模板引擎是ejs
app.set('views', './views') //设置当前项目在何处存放模板页面，views目录下


//GET http:localhost:3000/
//访问这个地址的时候，讲模板页面的内容输出
app.get('/', (req, res) => {
    /**
     * 渲染模板页面
     * res.render(view,locals)
     * -view    要渲染的模板页面的名字，直接写文件名即可，可以省略后缀
     * -locals  要携带到模板页面中的数据
     */
    res.render('index.ejs', {
        /**
         * key:value
         * key  就是后续可以在模板页面中使用的模板变量
         * value    就是这个模板变量的值
         */
        fruits: ['HELLO', 'HI', 'HOW ARE YOU']
    })
    //模板变量可以传到模板页面中
})
app.listen(3000, () => {
    console.log('服务启动成功')
})

页面渲染成果：
在这里插入图片描述
案例2

hello.ejs
<body>
    <h1>hello,这里是ejs参数的获取</h1>
    <!-- 要把携带过来的name和age用上 -->
    <p>姓名：<%= name %></p>
    <p>年龄：<%= age %></p>
</body>
index.js
const express = require('express')
const app = express()
//设置模板引擎的配置
app.set('view engine', 'ejs') //设置当前使用的模板引擎是ejs
app.set('views', './views') //设置当前项目在何处存放模板页面，views目录下
//GET http:localhost:3000/hello
//http://localhost:3000/hello?name=zhangsan&age=17
app.get('/hello', (req, res) => {
    //问号后面的参数不可以写死
    //构造函数相当于req.query.name=name
    const { name, age} = req.query
    res.render('hello.ejs', {
        name,
        age
    })
})
app.listen(3000, () => {
    console.log('服务启动成功')
})

页面渲染成果
在这里插入图片描述
案例3

world.ejs
<body>
    <h1>这里是world</h1>
    <%- str %>
</body>
index.js
app.get('/world', (req, res) => {
    res.render('world', {
        str: '<button>点我</button>'
    })
})

页面渲染成果
在这里插入图片描述
案例4

world.ejs
<body>
    <h1>这里是world</h1>
    <table>
        <thead>
            <tr>
                <th>id</th>
                <th>名字</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody>
            <%  for(var i=0;i<list.length;i++){  %>
            <tr>
                <td><%= list[i].id %></td>
                <td><%= list[i].name %></td>
                <td><%= list[i].price %></td>
            </tr>
            <% } %>

        </tbody>
    </table>
</body>

index.js
app.get('/world', (req, res) => {
    res.render('world', {
        list: [{
                id: 1,
                name: 'Apple',
                price: 10
            },
            {
                id: 2,
                name: 'banana',
                price: 20
            },
            {
                id: 3,
                name: 'pear',
                price: 30
            }
        ]
    })
})

页面渲染成果在这里插入图片描述