【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
复制代码