js控制前端html的显示
1.新建project
1.1项目结构
1.2更换国内镜像地址
在project1文件夹下cmd进入命令行，或者open in terminal进入命令行，
输入以下命令
npm config set registry https://registry.npm.taobao.org/
1.3下载插件
npm i express express-art-template art-template
2.前端文件设计
2.1 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="/a">a文章</a>
<a href="/b">b文章</a>
</body>
</html>
首页面只有两个a标签
2.2 a.html/b.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
background:lightgrey;
}
#center{
width: 1200px;
margin: 0 auto;
background: url({{data.bgTmg}});
}
</style>
</head>
<body>
<div id="center">
<h1>
{{data.title}}
</h1>
<p>
{{each data.content}}
</p>
<p>
{{$value}}
</p>
{{/each}}
<img src="{{data.bgImg}}" alt="">
</div>
</body>
</html>
准备接收js发送来的数据
3.js端设计
3.1app.js
const express=require('express')
const app=express()
app.engine("html",require('express-art-template'))
const data1={
title:"一个委托博士的毕业之困",
content:["第一段落1111","第二段落2222"],
bgTmg:"http://cms-bucket.ws.126.net/2021/1203/4128f2bcp00r3itwq0092c000d7008sc.png"
}
const data2={
title:"一个委托博士的毕业之困",
content:["第一段落1111","第二段落2222"],
bgTmg:"http://cms-bucket.ws.126.net/2021/1206/c74c4f13p00r3obba008jc000d7008sc.png"
}
app.get('/',function (req,res) {
res.render('index.html')
})
app.get("/a",function (req,res) {
const data=data1
res.render("a.html",{data})
})
app.get("/b",function (req,res) {
const data=data2
res.render("b.html",{data})
})
app.listen(3000,function () {
console.log('app is running...')
})
4.后台开启运行
node app
3084
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
