成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

親手擼一個node項目

crossoverJie / 1629人閱讀

摘要：實現(xiàn)一個增刪查的項目項目截圖錄入頁詳情頁列表頁項目目錄如下存放靜態(tài)資源文件存放視圖文件用于存放各個頁面存放路由文件不過我最終為了方便都寫到了下也可以說是偷了個懶存放模型文件并對外暴露接口后面用于的存儲這個就有點像功能差不多都是存儲數(shù)據(jù)嘛大家

node + express + es6 + mongoose + mongodb 實現(xiàn)一個增刪查的項目

項目截圖：
1.錄入頁:

2.詳情頁：

3.列表頁：

項目目錄如下：

├─ app.js
├─ bin
│    └─ www
├─ index.html
├─ js
│    └─ jquery.js
├─ models
│    └─ movies.js
├─ package.json
├─ public
│    ├─ javascripts
│    │    └─ jquery.min.js
│    └─ stylesheets
│           ├─ bootstrap
│           └─ style.css
├─ routes
│    ├─ admin.js
│    ├─ detail.js
│    ├─ index.js
│    ├─ list.js
│    └─ users.js
├─ schemas
│    └─ movies.js
└─ views
       ├─ admin.ejs
       ├─ delete.ejs
       ├─ detail.ejs
       ├─ error.ejs
       ├─ includes
       │    └─ header.ejs
       ├─ index.ejs
       └─ list.ejs

public： 存放靜態(tài)資源文件
views： 存放視圖文件（ejs） 用于存放各個頁面
routes： 存放路由文件 不過我最終為了方便 都寫到了app.js下 也可以說是偷了個懶
schemas models： 存放mongoose模型文件 并對外暴露接口 后面用于mongodb的存儲 這個就有點像vuex 功能差不多 都是存儲數(shù)據(jù)嘛 大家可以自行百度 以后我也會出點mongodb的基礎(chǔ)教程

基本代碼：

錄入頁

點擊錄入后執(zhí)行這里

post請求相當于拿到了form表單的內(nèi)容
然后跳轉(zhuǎn)到詳情頁

req.query.id是請求體中的id字段

save這個方法是mongoose的方法 用于存儲到mongodb中

列表頁

/admin/list進入列表頁

fetch為我在建模里面寫的靜態(tài)方法

在列表頁中點擊刪除按鈕 要做到刪除效果
我這里用的是jq

對應(yīng)的后端代碼為

相當于點擊了按鈕 請求了admin/list這個接口 把對應(yīng)的_id這條數(shù)據(jù)在mongodb中刪除如果返回碼為1說明請求成功 同時remove()dom節(jié)點
當沒有條數(shù)的時候 就意味著沒數(shù)據(jù)了 需要從新添加 就要跳轉(zhuǎn)錄入頁了 這里用的是window.open()這個方法實現(xiàn)

基本功能就是這些 這個項目難點在于express框架路由 視圖 和mongoose的結(jié)合 有些童鞋多帶帶寫一些路由沒問題 但是以結(jié)合起來 問題就來了 經(jīng)常總結(jié)會有很好的效果 源碼后續(xù)我會傳到github上 有問題歡迎交流

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/18990.html

相關(guān)文章

  • 親手擼一個node項目

    摘要：實現(xiàn)一個增刪查的項目項目截圖錄入頁詳情頁列表頁項目目錄如下存放靜態(tài)資源文件存放視圖文件用于存放各個頁面存放路由文件不過我最終為了方便都寫到了下也可以說是偷了個懶存放模型文件并對外暴露接口后面用于的存儲這個就有點像功能差不多都是存儲數(shù)據(jù)嘛大家 node + express + es6 + mongoose + mongodb 實現(xiàn)一個增刪查的項目 項目截圖： 1.錄入頁: showI...

    oujie 評論0 收藏0

  • 親手擼一個React（一）：JSX與虛擬DOM

    摘要：前言的火熱程度已經(jīng)達到了個，本系列文章主要用簡單的代碼來實現(xiàn)一個，來了解虛擬算法以及和的設(shè)計。要想將虛擬轉(zhuǎn)成真實并渲染到頁面上，就需要調(diào)用，比如這段代碼轉(zhuǎn)換后的樣子這時，會將掛載到為的下，從而在頁面上顯示出來。 前言 react的火熱程度已經(jīng)達到了94.5k個start，本系列文章主要用簡單的代碼來實現(xiàn)一個react，來了解JSX、虛擬DOM、diff算法以及state和setStat...

    aaron 評論0 收藏0

  • 手摸手，帶你用vue擼后臺 系列一(基礎(chǔ)篇)

    摘要：詳細具體的使用可以見文章手摸手，帶你優(yōu)雅的使用。為了加速線上鏡像構(gòu)建的速度，我們利用源進行加速并且將一些常見的依賴打入了基礎(chǔ)鏡像，避免每次都需要重新下載。 完整項目地址：vue-element-admin系類文章二：手摸手，帶你用vue擼后臺 系列二（登錄權(quán)限篇）系類文章三：手摸手，帶你用vue擼后臺 系列三(實戰(zhàn)篇）系類文章四：手摸手，帶你用vue擼后臺 系列四(vueAdmin 一...

    xiaotianyi 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<