基於 node 搭建博客系統(一)


系統分為兩端,分別實現。

管理員端:

  功能 :個人信息,設置,發布隨筆,隨筆列表,刪除隨筆,查找,文章 等。

  技術點: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中。(略)

  

  下節將使用模板引擎來拆分代碼和渲染數據。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM