資訊專欄INFORMATION COLUMN
摘要：實現一個增刪查的項目項目截圖錄入頁詳情頁列表頁項目目錄如下存放靜態資源文件存放視圖文件用于存放各個頁面存放路由文件不過我最終為了方便都寫到了下也可以說是偷了個懶存放模型文件并對外暴露接口后面用于的存儲這個就有點像功能差不多都是存儲數據嘛大家
node + express + es6 + mongoose + mongodb 實現一個增刪查的項目
項目截圖：
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： 存放靜態資源文件
views： 存放視圖文件（ejs） 用于存放各個頁面
routes： 存放路由文件 不過我最終為了方便 都寫到了app.js下 也可以說是偷了個懶
schemas models： 存放mongoose模型文件 并對外暴露接口 后面用于mongodb的存儲 這個就有點像vuex 功能差不多 都是存儲數據嘛 大家可以自行百度 以后我也會出點mongodb的基礎教程
基本代碼：
錄入頁
點擊錄入后執行這里
post請求相當于拿到了form表單的內容
然后跳轉到詳情頁
req.query.id是請求體中的id字段
save這個方法是mongoose的方法 用于存儲到mongodb中
列表頁
/admin/list進入列表頁
fetch為我在建模里面寫的靜態方法
在列表頁中點擊刪除按鈕 要做到刪除效果
我這里用的是jq
對應的后端代碼為
相當于點擊了按鈕 請求了admin/list這個接口 把對應的_id這條數據在mongodb中刪除如果返回碼為1說明請求成功 同時remove()dom節點
當沒有條數的時候 就意味著沒數據了 需要從新添加 就要跳轉錄入頁了 這里用的是window.open()這個方法實現
基本功能就是這些 這個項目難點在于express框架路由 視圖 和mongoose的結合 有些童鞋多帶帶寫一些路由沒問題 但是以結合起來 問題就來了 經常總結會有很好的效果 源碼后續我會傳到github上 有問題歡迎交流
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88254.html
摘要：實現一個增刪查的項目項目截圖錄入頁詳情頁列表頁項目目錄如下存放靜態資源文件存放視圖文件用于存放各個頁面存放路由文件不過我最終為了方便都寫到了下也可以說是偷了個懶存放模型文件并對外暴露接口后面用于的存儲這個就有點像功能差不多都是存儲數據嘛大家 node + express + es6 + mongoose + mongodb 實現一個增刪查的項目 項目截圖： 1.錄入頁: showI...
摘要：前言的火熱程度已經達到了個，本系列文章主要用簡單的代碼來實現一個，來了解虛擬算法以及和的設計。要想將虛擬轉成真實并渲染到頁面上，就需要調用，比如這段代碼轉換后的樣子這時，會將掛載到為的下，從而在頁面上顯示出來。 前言 react的火熱程度已經達到了94.5k個start，本系列文章主要用簡單的代碼來實現一個react，來了解JSX、虛擬DOM、diff算法以及state和setStat...
摘要：詳細具體的使用可以見文章手摸手，帶你優雅的使用。為了加速線上鏡像構建的速度，我們利用源進行加速并且將一些常見的依賴打入了基礎鏡像，避免每次都需要重新下載。 完整項目地址：vue-element-admin系類文章二：手摸手，帶你用vue擼后臺 系列二（登錄權限篇）系類文章三：手摸手，帶你用vue擼后臺 系列三(實戰篇）系類文章四：手摸手，帶你用vue擼后臺 系列四(vueAdmin 一...
閱讀 3475·2021-09-22 15:02
閱讀 3522·2021-09-02 15:21
閱讀 2139·2019-08-30 15:55
閱讀 2786·2019-08-30 15:44
閱讀 785·2019-08-29 16:56
閱讀 2419·2019-08-23 18:22
閱讀 3347·2019-08-23 12:20
閱讀 3095·2019-08-23 11:28
