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=data1res.render("a.html",{data})
})app.get("/b",function (req,res) {const data=data2res.render("b.html",{data})
})app.listen(3000,function () {console.log('app is running...')})

4.后台开启运行

node app

js控制前端html的显示相关推荐

JS控制HTML元素的显示和隐藏
利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: document.getElementB ...
js控制html控件显示隐藏和是否可用
利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: document.getElementB ...
js控制元素显示与否JS控制HTML元素的显示和隐藏
转载:https://www.cnblogs.com/unpolishedgem/p/3247098.html 利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个 ...
html元素隐藏js 控制,JS控制HTML元素的显示和隐藏的两种方法
JS控制HTML元素的显示和隐藏的两种方法利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一 ...
js控制浏览器全屏显示
window.navigator.userAgent.indexOf('MSIE')<0为true时,表示浏览器支持进入全屏还需做兼容性判断 <!DOCTYPE html> < ...
js控制元素隐藏和显示
方法一: document.querySelector("#id").style.visibility="hidden";document.querySelec ...
js控制div滚动条的显示/隐藏
滚动条显示 document.getElementById("keyCard").style.overflow = "auto"; 滚动条隐藏 document ...
html js 控制span值,根据显示/隐藏span标签/ Javascript组设置span文本？
下面是一个使"重用"文本与"span-group"同步的示例. Please Select US UK $5.00 25 Pounds It looks lik ...
html显示隐藏内容点击显示数据表代码,js如何实现点击显示和隐藏表格
js如何实现点击显示和隐藏表格一.总结一句话总结: 1.给table或者table里面的元素添加点击事件, 2.然后判断当前表格的数据显示或者隐藏, 3.然后通过display属性显示(非none ...

js控制前端html的显示

js控制前端html的显示

1.新建project

1.1项目结构

1.2更换国内镜像地址

1.3下载插件

2.前端文件设计

2.1 index.html

2.2 a.html/b.html

3.js端设计

3.1app.js

4.后台开启运行

js控制前端html的显示相关推荐

最新文章

热门文章