页面渲染的两种方式

2024-01-30 19:55:46

1 前后端分离
+后端提供数据，前端使用ajax请求数据，再进行页面的组装和渲染
2 服务端渲染
+前端只负责浏览器打开页面，发送请求
+服务端接收到请求后，在服务端准备好页面；
+前端只需要提供一个浏览器，负责显示就好

关于服务端渲染页面
// +需要使用一个第三方模块 art-template(模板引擎)
// +下载，命令行指令：npm install art-template
// +导入： let template = require(‘art-template’)
// 数据渲染的方法：
// 语法：template.render(html格式的字符串，对象)
// 对象就是前面的html格式字符串内使用的数据信息

**1 测试方法**

// 导入模块
let template = require('art-template')
let fs = require('fs')

// 1 测试方法
// {{变量}}，变量是对象中的键名
let htmlStr = `<h1>{{msg}}</h1>`
let res = template.render(htmlStr,{msg:'hello world'})
console.log(res);

2 文件测试

// 2 文件测试
// 利用fs读取指定html文件，
fs.readFile('./test/test.html','utf-8',(err,data) => {
  if(err) return console.log(err);
  let res = template.render(data,{
    msg:'hello node',
    num:3,
    users:[
      {id:1,name:'kelly',age:18,gender:'female'},
      {id:2,name:'kelly2',age:25,gender:'female'}
    ]
  })
  console.log(res);
})

test.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>Document</title>
</head>
<body>
  <!-- 基本渲染 -->
  <h1>{{msg}}</h1>
  <!-- 条件渲染 -->
  {{ if num>0 }}
  <span>我是根据条件判断</span>
  {{ /if }}
  <!-- 循环渲染 -->
  <table>
    <thead>
      <tr>
        <th>序号</th>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      {{ each users}}
      <tr>
        <td>{{$index}}</td>
        <td>{{$value.id}}</td>
        <td>{{$value.name}}</td>
        <td>{{$value.age}}</td>
        <td>{{$value.gender}}</td>
      </tr>
      {{ /each}}
    </tbody>
  </table>
</body>
</html>

以上内容渲染在命令行窗口
以下内容渲染在浏览器页面

1 新添加一个页面渲染js文件

// 搭建一个简单的服务器
let http = require('http')
let fs = require('fs')
let template = require('art-template')
http.createServer((req,res) => {
  // 请求过来的数据是/test.html,则返回文件并渲染数据
  // 使用info模拟数据库拿到数据
  let info = {
    msg:'hello node',
    num:3,
    users:[
      {id:1,name:'kelly',age:18,gender:'female'},
      {id:2,name:'kelly2',age:25,gender:'female'}
    ]
  }
  if(req.url === '/test.html') {
    fs.readFile('./test/test.html','utf-8',(err,data) => {
      if(err) return console.log(err);
      // data读取到的是html格式的字符串
      let htmlStr = template.render(data,info)
      // 将渲染后的结果返回给前端
      res.end(htmlStr)
    })
  }
}).listen(8080,() => {
  console.log('请访问：http://localhost:8080');
})

渲染结果

码农公寓

相关文章