@(云客技術(shù))[node|express|最新版]
最近想寫個(gè)個(gè)人博客，發(fā)現(xiàn)網(wǎng)上的express教程都有跟不上時(shí)代了，
我目前用到的express框架是4.13版本的，然而網(wǎng)上的基本都是4.0版本以下的，所以通過自己最近的踩坑總結(jié)了一些express框架的運(yùn)用了，來給大家演示一下，
安裝node
到node官網(wǎng)下載穩(wěn)定版安裝
一路點(diǎn)下去就好
測(cè)試node是否安裝成功
$ node -v
測(cè)試結(jié)果如下圖
安裝express框架
在網(wǎng)上多數(shù)教程介紹全局安裝express框架的命令
$ npm install -g express
看到目錄樹啦 ok我們安裝成功了！但是在接下來我們初始化一個(gè)express框架項(xiàng)目的時(shí)候出問題了
我們輸入指令
$ express ejs ourdome
然而出問題了 問題的提示 express on found,說明我們并沒有全局安裝成功express
然后我就在網(wǎng)上繞了一個(gè)世紀(jì)回來，原來在epxress4.0以后全局安裝的命令變量改變了并不是這個(gè)?。?！好吧 心里略微有點(diǎn)不平。
輸入指令
$ npm install -g express-generator
然后等待安裝
初始化ejs模板項(xiàng)目
$ express ejs ourdome
$ cd ourdome
$ npm install
好現(xiàn)在我們就可以來運(yùn)行項(xiàng)目了
$ node ./bin/www
訪問網(wǎng)址 http://127.0.0.1:3000
現(xiàn)在我們初始化項(xiàng)目已經(jīng)完成了
現(xiàn)在我們可以查看項(xiàng)目目錄
bin目錄是整個(gè)項(xiàng)目的啟動(dòng)文件在的位置
node_modules是整個(gè)項(xiàng)目運(yùn)行的依賴文件
public是項(xiàng)目運(yùn)行的時(shí)候外部可以訪問到的地方通常放js,css,images
routes是外部訪問項(xiàng)目的路由配置文件
view就是我們的ejs文件存放的地址
查看ejs文件
再看路由文件
路由文件
第一行 導(dǎo)入express包
第二行 導(dǎo)入路由
中間配置路由
router.get說明這是一個(gè)get訪問的路由，get里面的連個(gè)參數(shù)，第一個(gè)是表示訪問的相對(duì)路勁，也就是我們通常說的路由，第二個(gè)參數(shù)是個(gè)回調(diào)函數(shù)，這個(gè)回掉函數(shù)包含三個(gè)參數(shù) req,代表的請(qǐng)求體(所有的請(qǐng)求信息都會(huì)在這里) res代表的是返回體（所有的返回信息，以及返回方法都在這）next是不處理交由下個(gè)路由攔截處理
res.router里面的兩個(gè)參數(shù) 第一個(gè)是表示ejs文件 相對(duì)views目錄下的相對(duì)位置后面不需要跟后綴名第二個(gè)參數(shù)是在ejs里面渲染的json對(duì)象數(shù)據(jù)
如上圖 json里面的{title：“Express"}在ejs里面渲染為 <%= title%>
在一個(gè)路由文件里可以寫多個(gè)路由如圖
訪問下面的那個(gè)路由 為http://127.0.0.1:3000/next
最后面導(dǎo)出路由文件
在ejs文件中引用public文件
如上面ejs文件圖片所示在head位置引入css樣式文件 /stylesheets/style.css 代表絕對(duì)路徑訪問文件
在app.js文件匯總配置路由
有一天我發(fā)現(xiàn)我想提出一個(gè)大的分類路由，在index.js路由中一級(jí)路由和其二級(jí)路由并沒有什么關(guān)系，
這時(shí)候我們就可以在app.js里面修改路由 首先看原來的app.js文件的代碼
var routes = require('./routes/index');
var users = require('./routes/users');
app.use('/', routes);
app.use('/users', users);
這兩段代碼是官方的配置路由 我們來解讀一下
第一段代碼 是初始化路由文件所在地
第二段代碼 是初始化路由的分配方式（'/'是當(dāng)前路徑也就是域名下直接路由，'/users'是域名下再加/user才能訪問到）
我們可以這樣添加代碼
var pack = require('./routes/pack');
app.use('/pack', pack);
這時(shí)候我們就可以訪問域名下/pack
然后添加路由文件 ，在router下新建pack.js文件，在pack.js文件中添加
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('pack', { title: 'Pack' });
});
module.exports = router;
然后在views 下 新建pack.ejs文件造pack.ejs文件中添加
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
</body>
</html>
我們需要重新啟動(dòng)
Ctrl+C停止服務(wù)
$ npm start
這樣路由就已經(jīng)配置好了 現(xiàn)在可以訪問了http://127.0.0.1:3000/pack
路由的配置就到這了，還有一個(gè)更改端口
到/bin/www文件中找到這一行代碼
var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);
自行更改端口號(hào)
到這就算ok了,但是我想說學(xué)習(xí)還真是一件很累的事情！！！
