序列文章
從項目中由淺入深的學習vue,微信小程序和快應用 (1)
從項目中由淺入深的學習react (2)
從項目中由淺入深的學習typescript (3)
前言
node.js的出現前端已經可以用js一把梭,從前端寫到後臺。
本文從後臺利用node的框架koa+mongodb實現數據的增刪改查和註冊接口，前端利用umi + dva +ant-design-pro來實現數據渲染。實現一個小全棧project,就是so-easy
1.效果圖
react-koa 全棧項目，歡迎star
2.技術棧
koa：node框架
koa-bodyparser：解析body的中間件
koa-router ：解析router的中間件
mongoose ：基於mongdodb的數據庫框架，操作數據
nodemon：後臺服務啓動熱更新
3.項目目錄
├── app // 主項目目錄
│ ├── controllrts // 控制器目錄（數據處理）
│ │ └── ... // 各個表對應的控制器
│ ├── middleware // 中間件目錄
│ │ └── resFormat.js // 格式化返回值
│ ├── models // 表目錄（數據模型）
│ │ ├── course.js // 課程表
│ │ └── user.js // 用戶表
│ └── utils // 工具庫
│ │ ├── formatDate.js // 時間格式化
│ │ └── passport.js // 用戶密碼加密和驗證工具
├── db-template // 數據庫導出的 json 文件
├── routes // 路由目錄
│ └── api // 接口目錄
│ │ ├── course_router.js // 課程相關接口
│ │ └── user_router.js // 用戶相關接口
├── app.js // 項目入口
└── config.js // 基礎配置信息
4.項目啓動步驟
1.git clone
2.安裝mongodb:http://www.runoob.com/mongodb...
3.安裝 Robomongo是mongodb可視化操作工具 (可選)
4.啓動
cd koa-template
npm run start
cd react-template
npm run start
注意:
mongodb啓動默認端口號是27017,啓動看是否被佔用
後端項目端口號是3000,可以在koa-template/config.js裏面修改
5.koa的主要API
| API | 作用 |
|---|---|
| new koa() | 得到koa實例 |
| use | koa的屬性,添加中間件 |
| context | 將 node 的 request 和 response 對象封裝到單個對象中,每個請求都將創建一個 Context,通過ctx訪問暴露的方法 |
| ctx方法 | request:請求主體; response:響應主體; ctx.cookies.get:獲取cookie; ctx.throw:拋出異常 |
| request屬性 | header:請求頭; method:方法; url:請求url; originalUrl請求原始URL; href:完整URL; hostname:主機名; type:請求頭類型; |
| response屬性 | header:響應頭; status:狀態,未設置默認爲200或204; body:響應主體,string(提示信息) Buffer Stream(流) Object Array JSON-字符串化ull 無內容響應; get:獲取響應頭字段; set:設置響應頭; append:添加響應頭; type:響應類型; lastModified:返回爲 Date, 如果存在; etag:設置緩存 |
6.koa-router主要API
| API | 作用 |
|---|---|
| get | get方法 |
| post | post方法 |
| patch | patch方法 |
| delete | delete方法 |
| prefix | 配置公共路由路徑 |
| use | 將路由分層,同一個實例router中可以配置成不同模塊 |
| ctx.params | 獲取動態路由參數 |
| fs | 分割文件 |
7.mongoose主要API
| API | 作用 |
|---|---|
| Schema | 數據模式,表結構的定義；每個schema會映射到mongodb中的一個collection，它不具備操作數據庫的能力 |
| model | schema生成的模型，可以對數據庫的操作 |
model的操作database方法
| API | 方法 |
|---|---|
| create/save | 創建 |
| remove | 移除 |
| delete | 刪除一個 |
| deleteMany | 刪除多個 |
| find | 查找 |
| findById | 通過id查找 |
| findOne | 找到一個 |
| count | 匹配文檔數量 |
| update | 更新 |
| updateOne | 更新一個 |
| updateMany | 更新多個 |
| findOneAndUpdate | 找到一個並更新 |
| findByIdAndUpdate | 通過id查找並更新 |
| findOneAndRemove | 找到一個並移除 |
| replaceOne | 替換一個 |
| watch | 監聽變化 |
query查詢API
| API | 作用 |
|---|---|
| where | 指定一個 path |
| equals | 等於 |
| or | 或 |
| nor | 不是 |
| gt | 大於 |
| lt | 小於 |
| size | 大小 |
| exists | 存在 |
| within | 在什麼之內 |
注:Query是通過Model.find()來實例化
aggregate(聚合)API
| API | 作用 |
|---|---|
| append | 追加 |
| addFields | 追加文件 |
| limit | 限制大小 |
| sort | 排序 |
注:aggregate=Model.aggregate()
更多詳細API,請戳
8.react項目詳情
9.總結
一個koa項目就是從koa-bodyparser來解析body,koa-router來分發和處理接口,mongose來操作database。入門就是so-easy！