二、搭建Apache服务器 模板引擎
生活随笔
收集整理的這篇文章主要介紹了
二、搭建Apache服务器 模板引擎
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1. 案例：搭建簡單的Apache服務器
var http = require('http') var fs = require('fs')var server = http.createServer()var wwwDir = 'D:\\CWork\\node.js黑馬程序員\\study_nodejs\\day02\\code\\www'server.on('request', function(req, res) {var url = req.urlfs.readFile('./template.html', function(err, data) {if (err) {res.end('404 Not Found.')}// 1. 如何得到wwwDir目錄列表中的文件名稱和目錄名// fs.readdir// 2. 如何將得到的文件名和目錄名替換到template.html中// 2.1 在template.html中需要替換的位置預留一個特殊的標記（^_^）// 2.2 根據files生成需要的HTML內容// 只要你 做了這兩件事情，這個問題就解決了// fs.readdir(wwwDir, function(err, files) {if (err) {return console.log('讀取目錄不存在')}var content = ''files.forEach(function (item) {// 在 ES6的 ``字符串中，可以使用${}來引用變量content += `<tr><td data-value="apple/"><a class="icon dir" href="/D:\\CWork\\node.js黑馬程序員\\study_nodejs\\day02\\code\\www">${item}/</a></td><td class="detailsColumn" data-value="0"></td><td class="detailsColumn" data-value="1509589967">2017/11/2 上午10:32:47</td></tr>`})data = data.toString()data = data.replace('^_^',content)res.end(data)console.log(files)});});})// 3. 綁定端口號，啟動服務 server.listen(3000, function() {console.log('Server running...') })2. 模板引擎的基本使用
需要安裝 art-template
cmd中執行命令 npm install art-template --save
官網下載模板引擎
2.1 在瀏覽器中使用art-template模板引擎
<!DOCTYPE html> <html> <head><title></title> </head> <body><!-- 注意： 在瀏覽器中需要引用template-web.js文件 --><script src="node_modules/art-template/lib/template-web.js"></script><script type="text/template" id="tpl"><!DOCTYPE html><html><head><title></title></head><body><p>hello {{ name }}</p><p>我今年{{ age }}歲了</p><p>我喜歡： {{each hobbies}} {{$value}} {{/each}}</p></body></html></script><script>var ret = template('tpl', {name: 'Jack',age: 18,hobbies: ['寫代碼','玩游戲','唱歌']})console.log(ret)</script> </body> </html>2.2 在node中使用art-template模板引擎
3. Apache案例升級版：加入模板引擎
var http = require('http') var fs = require('fs') var template = require('art-template')var server = http.createServer()var wwwDir = 'D:\\CWork\\node.js黑馬程序員\\study_nodejs\\day02\\code\\www'server.on('request', function(req, res) {var url = req.urlfs.readFile('./template-apache.html', function(err, data) {if (err) {res.end('404 Not Found.')}// 1. 如何得到wwwDir目錄列表中的文件名稱和目錄名// fs.readdir// 2. 如何將得到的文件名和目錄名替換到template.html中// 2.1 在template.html中需要替換的位置預留一個特殊的標記（^_^）// 2.2 根據files生成需要的HTML內容// 只要你 做了這兩件事情，這個問題就解決了////fs.readdir(wwwDir, function(err, files) {if (err) {return res.end('找不到文件目錄')}// 這里只需要使用模板引擎解析替換data中的模板字符串就可以了// 數據就是files// 然后去你的template.html文件中編寫你的模板語法就可以了var htmlStr = template.render(data.toString(), {title: '哈蛤',files: files,wwwDir: wwwDir})res.end(htmlStr)});});});// 3. 綁定端口號，啟動服務 server.listen(3000, function() {console.log('Server running...') })總結
以上是生活随笔為你收集整理的二、搭建Apache服务器 模板引擎的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Vue3 高级语法（一）—— h函数、j
- 下一篇： 笔记本电脑关机快捷键_2020年双十一值