阅读 145

【javaScript】express实现前端与后端渲染,以及art-template的使用

主题

注意与显卡的物理渲染做区分,这篇文章所讨论的前后端式的文档(即view+model)

怎么理解渲染?(html格式渲染、后端返回数据格式的渲染),其实都是数据格式渲染,html渲染是其中一种

  • 前端渲染:根据后端返回的数据(如json格式的数据)自己加工形成html文件
  • 后端渲染:直接形成一个html文件,等待前端获取文件(类似于静态路由)

项目实例

前端渲染

  • 后端代码
//controller层的代码
const template = require('art-template'); //模板
const path = require('path');
const fs= require('fs');
const listModule = require('../model/back_model.js'); //仅仅是获取数据

//controller向外面暴露的方法
const list=(req,res,next) => { 

    //仅仅返回数据,html代码由前端构建,这里的后端渲染是指,对于返回数据格式的渲染
    res.set('Content-Type', 'application/json; charset=utf-8');
    res.header("Access-Control-Allow-Origin", "*");
    res.render('back_template',{
        //可以知道,仅仅返回json格式的数据,渲染工作由前端完成,但是写了这么多代码,就只是为了队返回数据格式的渲染
        data:JSON.stringify(listModule.dataArray) 
    })
}

module.exports.list=list;
复制代码
//server.js,服务器
const path=require('path');
const express = require('express');
const app=express();
const router=require('./router/router.js'); //router层调用controller层的代码

//模板
app.engine('art', require('express-art-template'));
app.set('view options', { //注意此处和官网不一样
    debug: process.env.NODE_ENV !== 'production',
    escape: false // 是个坑,转化HTML5代码 
});
app.set('views', path.join(__dirname, './view')); 
app.set('view engine', 'art');//调用render()时,主动去该文件夹下寻找art后缀的文件

app.use('/',router);

app.listen(8080, () => {
    console.log('localhost:8080')
})
复制代码
  • 前端代码
//前端的js代码,有script标签引入
$.ajax({
    url: 'http://127.0.0.1:8080/list',//尽量不要localhost
    success(result){//result是Ajax请求的结果
        //view模板的格式,前端没有文件系统,只可以这样,使用字符串
        let templateStr=`
            <ul>
                {{each data}}
                <li>{{$value}}</li>
                {{/each}}
            </ul>
            <div>
                <b>{{x}}</b>
            </div>
        `;
        
        //model
        let html=template.render(templateStr,{
            data:result.data,
            x:520
        });
        $('#box2').html(html);
    }
})
复制代码

后端渲染

  • 后端渲染
//controller
const template = require('art-template');
const path = require('path');
const fs= require('fs');

const listModule = require('../model/back_model.js');

const list=(req,res,next) => {
    //后端渲染好一个完整的页面,等待前端去取用
    let html=template(path.join(__dirname,'../view/front_template.art'),{
        data:listModule.dataArray
    })
    
    //通过文件的方式,完成一个页面
    fs.writeFileSync(path.join(__dirname, '../public/made_by_backRender.html'), html);
    
    res.send('pages has been compiled.');
}
module.exports.list=list;
复制代码
//server.js,服务器
const path=require('path');
const express = require('express');
const app=express();
const router=require('./router/router.js'); //router层调用controller层的代码

//模板
app.engine('art', require('express-art-template'));
app.set('view options', { //注意此处和官网不一样
    debug: process.env.NODE_ENV !== 'production',
    escape: false // 是个坑,转化HTML5代码 
});
app.set('views', path.join(__dirname, './view')); 
app.set('view engine', 'art');//调用render()时,主动去该文件夹下寻找art后缀的文件

app.use('/',router);

app.listen(8080, () => {
    console.log('localhost:8080')
})
复制代码
  • 前端代码
//直接获取静态页面。express static
复制代码
文章分类
前端
文章标签