一直就有要做一個(gè)前后端完整的個(gè)人項(xiàng)目的想法鲫竞，但因?yàn)閷W(xué)校和面試的事一直沒(méi)開(kāi)始。兩個(gè)星期前開(kāi)始了行動(dòng)，選定Vue + express + mongoDB 的技術(shù)棧。Vue框架的文檔還是非常友好易懂的袜茧，一個(gè)星期看官方文檔和寫(xiě)小demo，一個(gè)星期開(kāi)始正式開(kāi)發(fā)瓣窄。總算完成了主體功能的開(kāi)發(fā)∧啥Γ現(xiàn)在寫(xiě)個(gè)文章做個(gè)階段性總結(jié)俺夕。
Github地址：https://github.com/Howell5/Josephong.me
項(xiàng)目架構(gòu)圖
client
- 技術(shù)框架和基本庫(kù)：
- 用了Vue-cli 構(gòu)建基本項(xiàng)目目錄，Vue-Router 做路由控制贱鄙，用 axios 庫(kù)做 ajax 操作劝贸。
- 前臺(tái)展示頁(yè)（/psot 和 /postDetail）
- 用 Marked.js 和 highlight.js 處理 Markdow 轉(zhuǎn)化為 HTML。從服務(wù)器拿到數(shù)據(jù)進(jìn)行渲染逗宁。
- UI 借用了尤雨溪大佬博客的風(fēng)格映九，因?yàn)閷?shí)在沒(méi)想好自己的博客風(fēng)格，后期會(huì)改瞎颗。
- 后臺(tái)管理頁(yè)（/admin 和 /admin/articleEdit）
- 這里用到了嵌套路由件甥。編輯器用了第三方插件 simplemde渊季。
- UI 用 element-ui 很快能搭建好颖榜，畢竟不是展示頁(yè)，簡(jiǎn)潔好用就行。
Webpack作為靜態(tài)資源的打包和發(fā)布工具微猖。
server
服務(wù)端部分采用 express 作為開(kāi)發(fā)框架，提供api接口服務(wù)給前端ajax調(diào)用业踏，后端不做頁(yè)面模板的渲染和路由的導(dǎo)航工作盛撑，這部分都由前端的 vue 來(lái)處理，所以該博客其實(shí)是一個(gè)前后端分離曾我，以 RESTful api 來(lái)通信的單頁(yè)應(yīng)用粉怕。
因?yàn)橹饕壿嬏幚恚m然也沒(méi)有多少業(yè)務(wù)邏輯）都放在了前端，所以服務(wù)端寫(xiě)的很簡(jiǎn)單抒巢。利用 mongoose 與數(shù)據(jù)庫(kù) MongoDB 建立連接贫贝，并寫(xiě)好CURD（增刪改查）的接口給前端用就行了。
不得不說(shuō)這種開(kāi)發(fā)方式很爽虐秦，不像以前后端丟一個(gè)JSP頁(yè)面平酿，然后才能進(jìn)行前端工作。我個(gè)人認(rèn)為 業(yè)務(wù)進(jìn)行前后端分離悦陋，而個(gè)人開(kāi)發(fā)者進(jìn)行全棧發(fā)展蜈彼。
難點(diǎn)
跨域
因?yàn)樵趘ue-cli中本身就有一個(gè)小型服務(wù)器（本項(xiàng)目中：localhost:8525）供我們的vue項(xiàng)目跑起來(lái)，但我們需要的數(shù)據(jù)是我們自己搭建的服務(wù)器（本項(xiàng)目中：localhost:9999）提供給我們的俺驶。因?yàn)闉g覽器的“同源政策”幸逆，我們不能直接進(jìn)行跨域訪問(wèn)，解決方案也有很多暮现。CORS还绘，jsonp，...栖袋。詳情見(jiàn)文章 瀏覽器同源政策及其規(guī)避方法---阮一峰拍顷。而在我們的項(xiàng)目中，webpack-dev-server 給我們提供的proxy模塊塘幅，可以很快解決這個(gè)問(wèn)題昔案。配置如下：
** config/index.js **
dev: {
env: require('./dev.env'),
port: 8525,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'http://localhost:9999
changeOrigin: true
}
},
嵌套路由
一開(kāi)始在文章管理后臺(tái)中，我比較頭痛組件復(fù)用問(wèn)題电媳，在github看了相似項(xiàng)目的源碼踏揣，發(fā)現(xiàn)他們直接用復(fù)制代碼解決，顯然代碼冗余嚴(yán)重匾乓。在看Vue-Router的文檔中捞稿，一開(kāi)始并沒(méi)有注意嵌套路由的作用，后面多看幾遍就發(fā)現(xiàn)嵌套路由可以很完美解決這個(gè)問(wèn)題（果然官方文檔還是要反復(fù)看的）。我的路由配置：
{
path: '/admin',
name: 'admin',
component: admin,
children: [
{
path: '/',
component: articleList
},
{
path: 'articleList',
component: articleList
},
{
path: 'articleEdit',
component: articleEdit
},
{
path: 'articleEdit/?id=:id',
name: 'EditArticle',
component: articleEdit
}
]
}
實(shí)際演示
TODO
- [ ] 增加登錄/注冊(cè)功能
- [ ] 前臺(tái)展示頁(yè)面UI重新設(shè)計(jì)娱局，完善細(xì)節(jié)
- [ ] 部署到云服務(wù)器上
- [ ] 移動(dòng)端適配
本項(xiàng)目持續(xù)更新彰亥，如果對(duì)你有所幫助，歡迎到github上點(diǎn)個(gè)star :)
