此教程適合沒有接觸過node的web前端開發,快速構建自己的框架,基于express4.x。
首先安裝express ,http://www.expressjs.com.cn/starter/installing.html,安裝過程中一直回車到底就ok了。
安裝完成后,繼續安裝express的應用骨架,生成默認項目
(-g表示全局安裝,下次可以直接使用,不用再次安裝)
接著在myapp文件夾下直接運行express,項目目錄就直接生成了
然后安裝所有依賴包:
啟動這個應用(MacOS 或 Linux 平臺):
Windows 平臺使用如下命令:
看到這個頁面時,大家已經完成了基礎的項目構建,繼續往上添加自己的代碼就可以了。(到這部后大家可以把public目錄下的文件夾修改為自己喜歡的格式,例如:js,css,只是一個路徑而已)
接下來大家就可以把自己的頁面添加到項目里面了,不過express到目前我只發現可以加載jade模板和ejs。大家不用擔心還要從新學習jade,這里http://www.html2jade.org/,可以直接用工具把html轉化為jade模板,可以讓你手中已有的項目直接添加進去,jade模板在express的加載方法:http://www.expressjs.com.cn/guide/using-template-engines.html。其實jade的寫法真的很簡單,大家看一下api基本就能上手了,學習地址點這里。(項目里已經集成了jade,不用重復安裝)
現在大家打開核心的app.js
這幾行定義的是express的路由,大家可以簡單了解下路由的作用,http://www.expressjs.com.cn/guide/routing.html,這點非常重要,一定要理解,不是很難,應該能夠很快理解。
比如現在你打開http://localhost:3000/users頁面,對應user.js里面的代碼一看就能理解。(打開這個頁面時發生了get請求)
下面咱們先不急著上傳圖片,先測試下前端發送的post和get請求。
以post請求為例,咱們把layout.jade修改成下面的樣子
在public/js下新建個index.js,加載jquery(只是為了簡寫的ajax)有人可能會問為什么會沒有public路徑,因為Express 內置的 express.static 可以方便地托管靜態文件,例如圖片、CSS、JavaScript 文件等,詳細內容點這里,對應app.js的內容為 app.use(express.static(path.join(__dirname, 'public')));
只有這樣才能讀取到文件。
下面開始修改js代碼,public/js/index.js內寫個最基礎的ajax請求就好了,這里發送請求的路徑為"/",就是往主頁發送請求(路由一定要理解,路由一定要理解,路由一定要理解!!)
然后在routes/index.js里面修改
在此監聽首頁的post請求,req.body.num表示發送過來的數據,大家可以直接打印下req,看看里面包含了什么內容,加深理解(修改完文件后記得重啟express)。
這時候在控制臺中就可以看到返回的數據了。
現在大家已經可以使用node接收前端發送的請求了(是不是灰長開心!!),下面進行我們的重頭戲,上傳圖片。
因為是測試接口,公司的項目要兼容低版本瀏覽器,所有plupload.js就上場了(不是我不想用h5的方法)。官網,下載后如圖,就夠用了。(記得在layout.jade里面加載)
把index.js修改成下面的樣子,這是個標準的官網上傳事例,不理解的在官網看下api,很好理解(其實看變量名字也都能理解~)
index.jade修改成下面的樣子,主要是添加上傳點擊的元素,添加了兩個按鈕而已(不要嫌棄它確實是比較丑--)
這里我們要用到的外部模塊是Felix Geisendörfer開發的node-formidable模塊。它對解析上傳的文件數據做了很好的抽象。 其實說白了,處理文件上傳“就是”處理POST數據 —— 但是,麻煩的是在具體的處理細節,所以,這里采用現成的方案更合適點。
安裝formidable模塊。
修改routes/index.js
module.exports = router;
此時需要在public下手動新建文件夾upload以及下面的temp文件夾。
先把文件上傳到臨時文件夾,再通過fs重命名移動到指定的目錄即可。
fs.rename即重命名,但是fs.rename不能夸磁盤移動文件,所以我們需要指定上傳的臨時目錄要和最終目錄在同一磁盤下。
res.write就是往前端返回的數據,這里我直接返回一個img標簽,并添加上傳文件的路徑,前端只要把標簽append到頁面中就ok了。
完成前端圖片上傳功能!!
今天進行到這里,明天進行講解node連接數據庫的操作。
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com