前后端不分离的情况(数据都来源于后端,前后端不可以分离使用)

npm i express art-template express-art-template --S
先下载模板引擎,模板渲染,还有experss服务器的包

js代码

//导入express服务器第三方的包
const express = require("express")
//导入模板引擎
const artTemple = require("express-art-template")
//导入node的fs文件系统的模块
const fs = require("fs")//创建服务器实例
const app = express()//注册模板引擎(告诉express框架使用什么模板引擎渲染什么后缀的文件)
//参数一:要渲染的文件名后缀
//参数二:使用什么模板引擎去渲染
//默认会渲染项目根目录下的views文件夹下的.html
app.engine("html", artTemple)
//当文件夹名不是views
//设置目录文件夹
app.set("views", "./xiaoji")//如果不需要修改,这行代码就省略app.get("/", function (req, res) {res.render("index1.html", {title: "今日书籍打折",books: [{name: "三国演义", price: 50, disc: 30},{name: "水浒传", price: 60, disc: 48},{name: "西游记", price: 70, disc: 56},{name: "红楼梦", price: 50, disc: 30}],arr: ["小红", "小明", "小翠"],age: 20,score: 89})
})//调用listen启动服务器
app.listen(80, function () {console.log("开启了127.0.0.1服务器");
})

html代码

{title}} 渲染的值 -->{}}可以是变量\属性\表达式-->
{{title}}
{{each arr}}
{{$value}}----{{$index}}
{{/each}}
{{each books a b}}
{{a.name}}---{{b}}
原价:{{a.price}}
现价:{{a.disc}}
{{/each}}
{{1>3?"不大于":"大于"}}
{{0||10}}
{{5||10}}
{{if age<18}} 
未成年了
{{/if}}{{if age>=18}}
成年了
{{else}}
未成年
{{/if}}{{if score >=90}}
成绩:优
{{else if score>=60}}
成绩:良
{{else}}
成绩:不及格
{{/if}}

包结构

前后端分离模板的使用(前后端可以独立使用)

先获取模板的js文件,这里给大家提供
链接: https://pan.baidu.com/s/1ertUhroqoUL4Ek8ZN7LzgA?pwd=drck 提取码: drck

这里演示不用后台代码了，用一个get的api接口演示前端如何使用的模板(直接运行就可以看到效果)

html文件