在之前的一篇文章《使用Express搭建簡書網(wǎng)站服務(wù)端，快跟著學(xué)下一下吧》中，我講解了使用Express搭建簡書網(wǎng)站服務(wù)端的過程，并且詳細講解了注冊/登錄功能的全棧實現(xiàn)。
簡書主頁面
今天這篇文章繼續(xù)以全棧實現(xiàn)來講解寫文章與看文章的功能。感興趣的可以自行clone或者fork項目。
https://github.com/zhouxiongking/vue2.0-vuex2.0-demo-jianshu
寫文章通過點擊左側(cè)菜單欄的寫文章，可以進入寫文章頁面，注意在寫文章之前需要登錄。
接下來同樣通過全棧實現(xiàn)的5個步驟來具體分析。
編寫前端頁面首先我們看一下寫文章的頁面，如下圖所示。
寫文章頁面
主要是引用了一個VueQuillEditor，方便實現(xiàn)富文本編輯，頁面代碼如下。
前端頁面
發(fā)送請求通過vue-resource發(fā)送請求，發(fā)送請求的代碼在.vue的script部分，詳細展示如下。
發(fā)送請求
服務(wù)端處理請求在項目的server文件夾下有一個app-article-server.js文件，專門存放與文章有關(guān)的服務(wù)端代碼。
有一點需要注意的是，因為在寫文章時傳遞的數(shù)據(jù)量可能會有很大，尤其是插入圖片后，因此需要對Express傳遞數(shù)據(jù)量限制進行修改。
Express設(shè)置
在設(shè)置完成之后，可以處理服務(wù)端代碼，服務(wù)端獲取參數(shù)后，傳遞至數(shù)據(jù)庫處理部分，詳細代碼如下。
服務(wù)器處理
數(shù)據(jù)庫處理在服務(wù)端接收到請求參數(shù)后，便會進行數(shù)據(jù)庫操作，將文章的各個信息寫入數(shù)據(jù)庫中。
在操作數(shù)據(jù)庫之前，需要創(chuàng)建數(shù)據(jù)庫的連接，在dbUtil/dbConnection.js文件中展示了如何創(chuàng)建數(shù)據(jù)庫連接，采用的是mysql數(shù)據(jù)庫，用戶名和密碼大家自行修改。
數(shù)據(jù)庫連接
數(shù)據(jù)庫連接成功后，便可以方便操作數(shù)據(jù)庫。
首先是保存文章，在保存文章后，會將文章的id返回，便于直接進入到文章展示的頁面，因此會出現(xiàn)兩個Promise。
保存文章
處理響應(yīng)結(jié)果在將文章保存至數(shù)據(jù)庫后，會將文章的id返回給瀏覽器端，瀏覽器會重定向路由至文章詳情頁，并根據(jù)id查找出文章進行顯示。
處理響應(yīng)
結(jié)束語今天這篇文章主要針對寫文章功能做了全棧講解，在學(xué)完之后是不是又對簡述網(wǎng)站的功能有了進一步的了解呢?
掃描二維碼推送至手機訪問。
版權(quán)聲明：本文由信途科技轉(zhuǎn)載于網(wǎng)絡(luò)，如有侵權(quán)聯(lián)系站長刪除。
轉(zhuǎn)載請注明出處http://macbookprostickers.com/xintu/9669.html
