亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

親手?jǐn)]一個(gè)node項(xiàng)目

crossoverJie / 1691人閱讀

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

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

項(xiàng)目截圖：
1.錄入頁:

2.詳情頁：

3.列表頁：

項(xiàng)目目錄如下：

├─ 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） 用于存放各個(gè)頁面
routes： 存放路由文件 不過我最終為了方便 都寫到了app.js下 也可以說是偷了個(gè)懶
schemas models： 存放mongoose模型文件 并對(duì)外暴露接口 后面用于mongodb的存儲(chǔ) 這個(gè)就有點(diǎn)像vuex 功能差不多 都是存儲(chǔ)數(shù)據(jù)嘛 大家可以自行百度 以后我也會(huì)出點(diǎn)mongodb的基礎(chǔ)教程

基本代碼：

錄入頁

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

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

req.query.id是請(qǐng)求體中的id字段

save這個(gè)方法是mongoose的方法 用于存儲(chǔ)到mongodb中

列表頁

/admin/list進(jìn)入列表頁

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

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/18990.html

相關(guān)文章

  • 親手擼一個(gè)node項(xiàng)目

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

    oujie 評(píng)論0 收藏0

  • 親手擼一個(gè)React（一）：JSX與虛擬DOM

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

    aaron 評(píng)論0 收藏0

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

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

    xiaotianyi 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<