国产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
主站蜘蛛池模板: 久久婷婷久久一区二区三区 | 亚洲国产精品免费在线观看 | 精品一区二区三区的国产在线观看 | 国产精品一区二区三 | 国产六区| 欧美福利在线视频 | 久久久久免费精品国产小说 | 亚洲精品美女久久久aaa | 国产第一页在线观看 | 国产麻豆精品 | 欧美日韩高清一区二区三区 | 国产在线精品成人一区二区三区 | 国产成人h片视频在线观看 国产超级乱淫片中文 | 中日韩一区二区三区 | 精品国产综合区久久久久99 | 在线观看亚洲一区 | 91精品观看91久久久久久 | 自拍 欧美 在线 综合 另类 | 中文字字幕码一二三区 | 91麻豆国产精品91久久久 | 亚洲精彩视频在线观看 | 亚洲青草| 精品国产欧美一区二区 | 成人区精品一区二区毛片不卡 | 日韩电影免费在线观看网址 | 国产喷水在线观看 | 国产一区二区三区精品视频 | 久久精品成人 | 亚洲 自拍 另类 欧美 综合 | 亚洲第一页中文字幕 | 亚洲久热| 久久艹精品 | 亚洲精品乱码久久久久久 | 最近免费中文字幕大全免费版视频 | 日日摸夜夜添夜夜爽免费视频 | 国产精品久久久久久免费播放 | 日本欧美一区二区三区不卡视频 | 在线欧美a | 欧美另类精品一区二区三区 | 91精品成人免费国产片 | 午夜欧美性视频在线播放 |