页面渲染的两种方式

本文探讨了页面渲染的两种主要方式:前后端分离和服务端渲染。在前后端分离中,后端提供数据,前端通过ajax请求数据并组装渲染页面。而在服务端渲染中,前端仅负责展示,服务端完成页面准备和数据渲染,使用模板引擎如art-template来实现。此外,文章还介绍了服务端渲染的文件测试和新增页面渲染JS文件的实践。
摘要由CSDN通过智能技术生成

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
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值