手机网站开发需求 百度云盘,h5开发入门,药品加工厂做网站,哈尔滨 网站建设仟路一、什么是服务器端渲染#xff08;SSR#xff09;
简单说#xff0c;就是在服务器上把网页生成好#xff0c;整个的HTML页面生成出来#xff0c;生成出的页面已经包含了所有必要的数据和结构信息#xff0c;然后直接发给浏览器进行展现。 二、例题
要求搭建http服务SSR
简单说就是在服务器上把网页生成好整个的HTML页面生成出来生成出的页面已经包含了所有必要的数据和结构信息然后直接发给浏览器进行展现。 二、例题
要求搭建http服务响应一个4行3列的表格并且表格隔行换色点击单元格后相应单元格会单独变色显示
1普通版写法直接在html中写入css与js样式
思路
(1)在建一个html文件在里面写好htmlcssjs代码。
(2)通过fs去读取这个html文件并且通过fs写入文件的方式写入到我们要运行的文件中
html代码如图所示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyletd{padding: 30px 30px;border-collapse: collapse;}tr:nth-child(odd){background-color: pink;}tr:nth-child(even){background-color: darksalmon;}/style
/head
bodytable border1trtd/tdtd/tdtd/td/trtrtd/tdtd/tdtd/td/trtrtd/tdtd/tdtd/td/trtrtd/tdtd/tdtd/td/tr/tablescriptvar tdsdocument.querySelectorAll(td);tds.forEach(item {item.onclickfunction(){this.style.backgroundColoryellow;}});/script
/body
/html
运行代码如图所示
// 1.导入http模块
const httprequire(http);
const fsrequire(fs);
// 2.创建服务对象
const serverhttp.createServer((request,response){let htmlfs.readFileSync(__dirname/http响应练习普通版.html) //通过fs去读取这个html文件response.end(html);
})
// 3.监听端口启动服务
server.listen(9000,(){console.log(服务已启动...);
})
运行结果如图所示 2进阶版写法创建css、js夹子进行文件分类。利用if分支进行不同文件的读取写入
思路
(1)分别建一个html、css、js文件在里面写好html、css、js代码。
(2)通过不同的if分支结构去通过fs去读取不同的文件并且通过fs写入文件的方式写入到我们要运行的文件中
文件夹创建如图所示 故
html对应pathname是 /
css对应pathname是/css/http.css
css对应pathname是/js/http.js
运行代码如图所示
// 1.导入http模块
const http require(http);
const fs require(fs);
// 2.创建服务对象
const server http.createServer((request, response) {// 获取请求url路径let { pathname } new URL(request.url, http://127.0.0.1);if (pathname /) {// 读取文件内容let html fs.readFileSync(__dirname/http响应练习进阶版.html) //通过fs去读取这个html文件response.end(html);} else if (pathname /css/http.css) {// 读取文件内容let css fs.readFileSync(__dirname/css/http.css) //通过fs去读取这个html文件response.end(css);} else if (pathname /js/http.js) {// 读取文件内容let js fs.readFileSync(__dirname/js/http.js) //通过fs去读取这个html文件response.end(js);} else {response.statusCode 404;response.end(h1404 NOT FOUND/h1)}
})// 3.监听端口启动服务
server.listen(9000, () {console.log(服务已启动...);
})运行结果如图所示
