国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當(dāng)前位置: 首頁 - 科技 - 知識(shí)百科 - 正文

Express實(shí)現(xiàn)前端后端通信上傳圖片之存儲(chǔ)數(shù)據(jù)庫(mysql)傻瓜式教程(一)_javascript技巧

來源:懂視網(wǎng) 責(zé)編:小采 時(shí)間:2020-11-27 21:47:02
文檔

Express實(shí)現(xiàn)前端后端通信上傳圖片之存儲(chǔ)數(shù)據(jù)庫(mysql)傻瓜式教程(一)_javascript技巧

Express實(shí)現(xiàn)前端后端通信上傳圖片之存儲(chǔ)數(shù)據(jù)庫(mysql)傻瓜式教程(一)_javascript技巧:在前端這個(gè)坑里摸爬滾打已經(jīng)一年多了,終于下定決心寫下自己第一篇博客(雖然內(nèi)容原創(chuàng)居少,算是個(gè)整合內(nèi)容),開始使用express的原因是因?yàn)樽约合霚y試接收下前端上傳圖片并返回,實(shí)現(xiàn)圖片上傳。后端各位大大們又都比較忙,沒辦法了,只能自己上了(哎,都是
推薦度:
導(dǎo)讀Express實(shí)現(xiàn)前端后端通信上傳圖片之存儲(chǔ)數(shù)據(jù)庫(mysql)傻瓜式教程(一)_javascript技巧:在前端這個(gè)坑里摸爬滾打已經(jīng)一年多了,終于下定決心寫下自己第一篇博客(雖然內(nèi)容原創(chuàng)居少,算是個(gè)整合內(nèi)容),開始使用express的原因是因?yàn)樽约合霚y試接收下前端上傳圖片并返回,實(shí)現(xiàn)圖片上傳。后端各位大大們又都比較忙,沒辦法了,只能自己上了(哎,都是
在前端這個(gè)坑里摸爬滾打已經(jīng)一年多了,終于下定決心寫下自己第一篇博客(雖然內(nèi)容原創(chuàng)居少,算是個(gè)整合內(nèi)容),開始使用express的原因是因?yàn)樽约合霚y試接收下前端上傳圖片并返回,實(shí)現(xiàn)圖片上傳。后端各位大大們又都比較忙,沒辦法了,只能自己上了(哎,都是逼出來的)。

  此教程適合沒有接觸過node的web前端開發(fā),快速構(gòu)建自己的框架,基于express4.x。

  首先安裝express ,http://www.expressjs.com.cn/starter/installing.html,安裝過程中一直回車到底就ok了。

  安裝完成后,繼續(xù)安裝express的應(yīng)用骨架,生成默認(rèn)項(xiàng)目

 ?。?g表示全局安裝,下次可以直接使用,不用再次安裝)

  接著在myapp文件夾下直接運(yùn)行express,項(xiàng)目目錄就直接生成了 

   然后安裝所有依賴包:

  啟動(dòng)這個(gè)應(yīng)用(MacOS 或 Linux 平臺(tái)):

  Windows 平臺(tái)使用如下命令:

   看到這個(gè)頁面時(shí),大家已經(jīng)完成了基礎(chǔ)的項(xiàng)目構(gòu)建,繼續(xù)往上添加自己的代碼就可以了。(到這部后大家可以把public目錄下的文件夾修改為自己喜歡的格式,例如:js,css,只是一個(gè)路徑而已)

   接下來大家就可以把自己的頁面添加到項(xiàng)目里面了,不過express到目前我只發(fā)現(xiàn)可以加載jade模板和ejs。大家不用擔(dān)心還要從新學(xué)習(xí)jade,這里http://www.html2jade.org/,可以直接用工具把html轉(zhuǎn)化為jade模板,可以讓你手中已有的項(xiàng)目直接添加進(jìn)去,jade模板在express的加載方法:http://www.expressjs.com.cn/guide/using-template-engines.html。其實(shí)jade的寫法真的很簡單,大家看一下api基本就能上手了,學(xué)習(xí)地址點(diǎn)這里。(項(xiàng)目里已經(jīng)集成了jade,不用重復(fù)安裝)

   現(xiàn)在大家打開核心的app.js

這幾行定義的是express的路由,大家可以簡單了解下路由的作用,http://www.expressjs.com.cn/guide/routing.html,這點(diǎn)非常重要,一定要理解,不是很難,應(yīng)該能夠很快理解。

   比如現(xiàn)在你打開http://localhost:3000/users頁面,對應(yīng)user.js里面的代碼一看就能理解。(打開這個(gè)頁面時(shí)發(fā)生了get請求)

   下面咱們先不急著上傳圖片,先測試下前端發(fā)送的post和get請求。

   以post請求為例,咱們把layout.jade修改成下面的樣子

  在public/js下新建個(gè)index.js,加載jquery(只是為了簡寫的ajax)有人可能會(huì)問為什么會(huì)沒有public路徑,因?yàn)镋xpress 內(nèi)置的 express.static 可以方便地托管靜態(tài)文件,例如圖片、CSS、JavaScript 文件等,詳細(xì)內(nèi)容點(diǎn)這里,對應(yīng)app.js的內(nèi)容為 app.use(express.static(path.join(__dirname, 'public')));

只有這樣才能讀取到文件。

  下面開始修改js代碼,public/js/index.js內(nèi)寫個(gè)最基礎(chǔ)的ajax請求就好了,這里發(fā)送請求的路徑為"/",就是往主頁發(fā)送請求(路由一定要理解,路由一定要理解,路由一定要理解?。。?br />

  然后在routes/index.js里面修改

  在此監(jiān)聽首頁的post請求,req.body.num表示發(fā)送過來的數(shù)據(jù),大家可以直接打印下req,看看里面包含了什么內(nèi)容,加深理解(修改完文件后記得重啟express)。

  這時(shí)候在控制臺(tái)中就可以看到返回的數(shù)據(jù)了。

  現(xiàn)在大家已經(jīng)可以使用node接收前端發(fā)送的請求了(是不是灰長開心?。。?,下面進(jìn)行我們的重頭戲,上傳圖片。

  因?yàn)槭菧y試接口,公司的項(xiàng)目要兼容低版本瀏覽器,所有plupload.js就上場了(不是我不想用h5的方法)。官網(wǎng),下載后如圖,就夠用了。(記得在layout.jade里面加載)

  把index.js修改成下面的樣子,這是個(gè)標(biāo)準(zhǔn)的官網(wǎng)上傳事例,不理解的在官網(wǎng)看下api,很好理解(其實(shí)看變量名字也都能理解~)

  index.jade修改成下面的樣子,主要是添加上傳點(diǎn)擊的元素,添加了兩個(gè)按鈕而已(不要嫌棄它確實(shí)是比較丑--)

  這里我們要用到的外部模塊是Felix Geisendörfer開發(fā)的node-formidable模塊。它對解析上傳的文件數(shù)據(jù)做了很好的抽象。 其實(shí)說白了,處理文件上傳“就是”處理POST數(shù)據(jù) —— 但是,麻煩的是在具體的處理細(xì)節(jié),所以,這里采用現(xiàn)成的方案更合適點(diǎn)。  

  安裝formidable模塊。

  修改routes/index.js

module.exports = router;

  此時(shí)需要在public下手動(dòng)新建文件夾upload以及下面的temp文件夾。

  先把文件上傳到臨時(shí)文件夾,再通過fs重命名移動(dòng)到指定的目錄即可。

  fs.rename即重命名,但是fs.rename不能夸磁盤移動(dòng)文件,所以我們需要指定上傳的臨時(shí)目錄要和最終目錄在同一磁盤下。

  res.write就是往前端返回的數(shù)據(jù),這里我直接返回一個(gè)img標(biāo)簽,并添加上傳文件的路徑,前端只要把標(biāo)簽append到頁面中就ok了。

  完成前端圖片上傳功能!!

  今天進(jìn)行到這里,明天進(jìn)行講解node連接數(shù)據(jù)庫的操作。

聲明:本網(wǎng)頁內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

Express實(shí)現(xiàn)前端后端通信上傳圖片之存儲(chǔ)數(shù)據(jù)庫(mysql)傻瓜式教程(一)_javascript技巧

Express實(shí)現(xiàn)前端后端通信上傳圖片之存儲(chǔ)數(shù)據(jù)庫(mysql)傻瓜式教程(一)_javascript技巧:在前端這個(gè)坑里摸爬滾打已經(jīng)一年多了,終于下定決心寫下自己第一篇博客(雖然內(nèi)容原創(chuàng)居少,算是個(gè)整合內(nèi)容),開始使用express的原因是因?yàn)樽约合霚y試接收下前端上傳圖片并返回,實(shí)現(xiàn)圖片上傳。后端各位大大們又都比較忙,沒辦法了,只能自己上了(哎,都是
推薦度:
標(biāo)簽: mysql javascript express
  • 熱門焦點(diǎn)

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 日韩大片在线观看 | 国产精品乱码一区二区三区 | 欧美αv日韩αv另类综合 | 亚洲国产欧美日韩 | 亚洲最新视频在线观看 | 全黄毛片 | 视频精品一区二区 | 日本久久精品免视看国产成人 | 国产午夜视频在线 | 一区二区三区免费在线 | 国产一精品一aⅴ一免费 | 欧洲亚洲一区 | 久久婷婷久久一区二区三区 | 91精品国产亚一区二区三区 | 午夜高清在线观看免费完整版 | 日韩精品免费观看 | 免费网站看v片在线成人国产系列 | 日本在线不卡一区二区 | 久久久久久久久久久9精品视频 | 国产欧美日韩va | 国产成人手机在线好好热 | 国产成人久久精品二区三区牛 | 精品一区二区三区四区五区 | 欧美v亚洲v国产v | 国产一区二区三区精品视频 | 国产激情视频一区二区三区 | 亚洲国产精久久久久久久 | 国产在线精品成人一区二区三区 | 一区二区视频 | 欧美一区二区三区视频在线观看 | 久久精品国产亚洲aa | 欧美一级淫片吊带丝袜 | 国产第8页 | 亚洲欧美v | 日韩欧美偷拍 | 欧美骚 | 国产欧美日韩综合精品一区二区 | 精品1区2区3区 | 欧美日本免费一区二区三区 | 99精品高清视频一区二区 | 免费一级a毛片在线播放视 免费一区二区 |