親手擼一個node項目

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上 有問題歡迎交流