以 express視角 網址能夠訪問 express構建了一個web server var expresss=require('express'); 是一個web後端 開發框架 第三方npm 包 npm i express --save web server 就是一個運行app實例 var app=express(); 監聽端口 app.listen(3000) 處理路由,將響應不一樣的地址訪問。 分模塊構建路由, var router=express.Router(); router.get('/', (req, res) => { res.send('hello, express'); }); app.use('/', indexRouter); 什麼叫作html模板 express 有些高效的html工具 ejs是廣爲流行的 。 web server核心的模式是mvc model 數據 (數據庫) control 控制器(路由) view (視圖) html 將視圖添加到 webserver裏面 views 模板文件 指明目錄在哪裏 設置模板引擎用的是什麼 模板語法 <%%> 用於js語法的嵌入,ejs html 部分就是這個模子 數據由router render 第二個參數傳過來 = 表示值輸出 什麼都沒有js語句執行 邏輯運算 -用於html解析 默認狀況 它會將html處理爲文本。 <%- include('header')%> 模板組裝語法 有利於代碼的複用 中間件 從請求到返回,在這段段過程當中間 由一個個中間件來陸續完成想應的功能, epress架構思想,流水線 使用中間件 app.use() function(err,req,res,next){} 第三方中間件 next方法 若是不使用next 就認爲請求結束。 res.render() res.end() 這些方法也會中止中間件的傳播 錯誤處理 1 讓開發者明白 除了什麼錯 。 next(new Error()) 2 錯誤 不能直接拋給用戶 專門的錯誤處理中間件 app.use(function(err,req,res,naxt){ console.log(err.stack) res.status(500).send(something broken)) } 博客 目錄分析 models 存放數據庫的文件 M routes 存放路由文件 C views 存放模板文件 V public 存放靜態資源 index.js 程序文件 入口文件 package.json 項目描述 做者 依賴等。
要代碼戳這裏html
實際中的路徑確定是沒有.html
這樣的,他們大概是這樣:node
var http = require('http') var server = http.createServer() server.on('request', function (req, res) { //一、經過req.url拿到當前請求路徑 var url = req.url //2.根據不一樣的請求路徑處理不一樣的響應 if(url === '/') { res.end('index page') }else if(url ==='/login') { res.end('login page') }else if(url === '/register'){ res.end('resgister page') }else { res.end('404 Not Found') } }) server.listen(3000, function(){ console.log('running...'); })
瀏覽器輸入http://localhost:3000/register
http://localhost:3000
http://localhost:3000/login
到達不一樣的頁面git
var http = require('http'); var fs = require('fs'); var server = http.createServer(function(req, res) { console.log('request was made: ' + req.url); if (req.url === '/home' || req.url === '/'){ res.writeHead(200,{'Content-Type': 'text/html'}); fs.createReadStream(__dirname + '/index.html','utf8').pipe(res); }else if(req.url === '/contact'){ res.writeHead(200,{'Content-Type': 'text/html'}); fs.createReadStream(__dirname + '/contact.html','utf8').pipe(res); }else if(req.url === '/api/users'){ var users = [{name: 'AlexZ33', age:26}, {name: 'jingxin', age: 8}]; res.writeHead(200, {'Content-Type': 'application/json'}); res.end(JSON.stringify(users)); }else { res.writeHead(404,{'Content-Type': 'text/html'}); fs.createReadStream(__dirname + '/404.html','utf8').pipe(res); } }); server.listen(3000,'127.0.0.1'); console.log('now listening to port 3000');
因此咱們開啓服務器 瀏覽器輸入 http://localhost:3000/home
或者 http://localhost:3000
都會訪問到index.html頁面github
瀏覽器輸入 http://localhost:3000/contact
web
}else if(req.url === '/api/users'){ var users = [{name: 'AlexZ33', age:26}, {name: 'jingxin', age: 8}]; res.writeHead(200, {'Content-Type': 'application/json'}); res.end(JSON.stringify(users)); }
這段的json字符串 在實際的app中 你獲得的應該來自數據庫(database)數據庫
咱們在瀏覽器中輸入一個不存在的路徑 好比 http://localhost:3000/77
express
處理靜態資源
路徑本質上就是標識,這裏有一個小項目關於實現的靜態資源訪問
和頁面路徑設置
戳這裏npm