用node.js和mongDB創建網站

用node.js和mongDB創建網站

參考資料:
1.jade學習https://www.jianshu.com/p/e2a...
http://www.nooong.com/docs/ja...
2.app.js的結構設計(做用)http://www.cnblogs.com/scottj...
視頻參考:https://www.imooc.com/video/1091html

  • 工具選取

1.首先介紹須要的開發框架

clipboard.png

2.前端工具

clipboard.png

2.本地開發環境

clipboard.png

  • 開發步驟

clipboard.png

  • 原型圖

    前端:

clipboard.png

後臺:

clipboard.png

Node入口文件分析和目錄初始化

  • 首先是項目結構初始化

clipboard.png

  • 編寫入口文件

    引用express,實例出一個web服務器,監聽端口,獲取來自這個端口的請求前端

clipboard.png

  • 建立文件夾

clipboard.png

  • 測試可訪問性

clipboard.png

建立四個jade視圖及入口文件

  • 建立文件夾

clipboard.png

viwe文件夾裏放視圖模板        app.js

clipboard.png

安裝依賴、編寫入口文件

clipboard.png

  • app.js

clipboard.png

能夠在命令行裏改變port的值
clipboard.pngnode

  • 在view裏寫jade模板

clipboard.png

注意完善app.js,否則沒法訪問
clipboard.pngweb

這樣就把前臺請求跑通了mongodb

clipboard.png

僞造模板數據跑通先後端交互流程

  • 調整view文件夾,方便修改,模板的創建

view文件夾結構
clipboard.png數據庫

layout.jade編寫
clipboard.pngexpress

header.jade編寫(就是網站標題什麼的)
clipboard.pngnpm

head.jade編寫(網站的引用什麼的好比JQ)bootstrap

在安裝bootstrap和jq前要先安裝bower
clipboard.png
clipboard.png
安不上也不要緊windows

clipboard.png

創建page頁面

  • index.jade

clipboard.png

  • detail.jade

clipboard.png

  • admin.jade

clipboard.png

clipboard.png

  • list.jade

!clipboard.png

僞造數據

app.js加入
clipboard.png

假數據測試app.js
clipboard.png
clipboard.png
clipboard.png
clipboard.png
clipboard.png

  • 測試

clipboard.png

clipboard.png

clipboard.png

mongodb模式模型設計及編碼

  • windows下安裝mongodb以及node.js鏈接mongodb

https://www.cnblogs.com/star-...

安裝完成後要設置環境變量才能運行MongoDB
如何設置環境變量?

clipboard.png

個人電腦-右鍵屬性-高級系統設置-高級-環境變量

測試運行MongoDB

輸入如下代碼查看MongoDB版本號

mongod -v

在PATH裏的npm環境變量後面加個分號; 而後加上剛纔所安裝的路徑 D:MongoDBbin 肯定後就安裝完畢了。

  • 設計數據庫模型

clipboard.png

數據庫字段定義
clipboard.png

傳入模式編譯,生成構造函數
clipboard.png

  • 文檔實例化,調用模型

clipboard.png

批量查詢

clipboard.png

單條數據的查詢
clipboard.png

單條數據的刪除
clipboard.png

  • 數據庫的正刪改查,及後臺開發邏輯

文件目錄
clipboard.png

相關文章
相關標籤/搜索