系統分為兩端,分別實現。
管理員端:
功能 :個人信息,設置,發布隨筆,隨筆列表,刪除隨筆,查找,文章 等。
技術點:Boostrap + AdminLTE;
基於nodejs 實現的express 框架;
MongoDB數據庫;
Mongoose 模塊,操作數據庫。
用戶端:
功能:瀏覽隨筆列表,查看隨筆,文章類似,評論,點贊 等;
技術點:HTML + CSS + javascript 完成用戶端頁面及交互邏輯(使用博客模板);
jquery 實現DOM操作,Ajax 數據對接。
博客系統目標拆分實現
1:實現“用戶訪問接口,給用戶返回一個HTML頁面”:
(1)新建blog項目,
(2)在項目路徑下,cmd 執行 npm init 進行項目初始化。
(3)執行 npm install express --save z安裝express 框架。
(4)在項目文件下新建app.js 文件,並在其中引入express模塊。
(5)在 app.js 中使用express 提供的方法,開啟服務,監聽前端請求,並作出響應。
2:實現“用戶訪問接口,返回一個帶樣式的HTML頁面”:
(1)在 app.js 中配置靜態資源托管路徑
app.use('/pub',express.static(__dirname+'/public'));
(2)在html 頁面中通過配置的路徑訪問對應資源
<link rel="stylesheet" href="/pub/css/index.css">
3:在前端渲染出來的html中,加入文章列表的數據
(1)后端添加一個 /list 接口,用來給用戶返回html 結構。
app.get('/list',function (req,res) { //只負責渲染文章列表的頁面結構
res.sendFile(__dirname+'/views/list.html');
})
(2)后端再添加一個 /list/getdata ,用以返回文章數據
var listD = require('./data/listData'); app.get('/list/getdata',function (req,res) { res.send(listD); })
(3)前端通過ajax請求 /list/getdata接口,並拿到json數據包,通過dom操作嵌入html中。(略)
下節將使用模板引擎來拆分代碼和渲染數據。
