年后那段時(shí)間看了黃軼老師出的餓了么高仿單頁(yè)應(yīng)用后一直想自己動(dòng)手開發(fā)Vue2.0單頁(yè)應(yīng)用(不得不說拿著vue2.0跟著那個(gè)1.0教程學(xué)是非常蛋疼的事情，踩了很多坑)，恰逢這學(xué)期有Node.js課程，于是乎，課程設(shè)計(jì)什么的，一拍即合，當(dāng)然在做著項(xiàng)目的同時(shí)也遇到很多坑，也有很多巧妙解決的地方，于是在這個(gè)項(xiàng)目快要結(jié)束之際，我想寫這篇文章記錄，并總結(jié)，注意本文并不是介紹怎么做的教學(xué)文，只是一些節(jié)點(diǎn)的分析和總結(jié)。
技術(shù)棧在經(jīng)過考慮后決定使用如下，后端采用Express做RESTful API開發(fā)，Mysql作為數(shù)據(jù)存儲(chǔ)，至于為什么不采用mongodb，因?yàn)槠渲泻芏嚓P(guān)聯(lián)數(shù)據(jù)表，問過一些有經(jīng)驗(yàn)的后臺(tái)，mongodb在處理關(guān)系型數(shù)據(jù)上并不是太合適，Redis作為SESSION存儲(chǔ)。
所以這樣我用了2個(gè)js文件就把后端搞定了。一個(gè)定義api，一個(gè)做express，mysql，redis連接相關(guān)信息。
后臺(tái)管理界面樣式方面采用Element UI(以下簡(jiǎn)稱eleui)作為UI層框架，不得不說Eleui的文檔非常完善，各種回調(diào)方法，參數(shù)都非常完善和易懂，樣式美觀方面也跟外面那些妖艷的賤貨不一樣。作為一個(gè)前端菜鳥，我都能看著文檔api擼出一個(gè)應(yīng)用。
前端采用Vue全家桶這個(gè)大家太熟了，簡(jiǎn)單列一下吧
前端：Vue全家桶
Vue.js
Vue-Cli
Vue-Resource
Vue-Router
Vuex
Element UI
后端：Node
Express
Mysql
Redis
整體思路：
Node服務(wù)端不做路由切換，這部分交給Vue-Router完成
Node服務(wù)端只用來接收前端通過ajax發(fā)送的請(qǐng)求，查詢數(shù)據(jù)庫(kù)并返回值
所以這樣做前后端幾乎完全解耦，只要約定好restful數(shù)據(jù)接口，前端渲染后端返回的數(shù)據(jù)就ok了。
例如，這里要使用/api/movelist的api取數(shù)據(jù)庫(kù)movie表里數(shù)據(jù)，這里我采用了左聯(lián)的方式，將movie表中fid等于movieCategory fid的數(shù)據(jù)篩選出來，這樣，我們就能取到movie表的電影，并且還可以得到它屬于哪個(gè)分類。
router.get('/api/movielist',function(req, res){
connection.query('SELECT movie.id,movie.Mname,movie.PicUrl,movie.showTime,movie.movieUrl,movie.moviePlayTime,movie.enable, movieCategory.name FROM movie LEFT OUTER JOIN movieCategory ON movie.fid = movieCategory.fid order by movie.id ',function(err,doc){
? ? ? if(err) {
? ? ? ? ?console.log(err)
? ? ? ?}elseif(doc) {
? ? ? ? ? res.json({
? ? ? ? ? ? errno:0,
? ? ? ? ? ?data:doc
? ? ?})
? ? ?}
? ?})
})
富文本編輯器summernote
在富文本選擇上，選擇了summernote，雖然這樣會(huì)引入bootstrap和jquery，但是目前來看如果是這種需求確實(shí)沒有比較好／現(xiàn)成的解決方案，vue的一些富文本插件都有一些功能不全和bug，所以綜合考慮還是使用summernote。
summernote需要你在webpack中把jquery加入alias以便全局調(diào)用，使用時(shí)在mounted周期聲明如下。callback里的onImageUpload作為圖片上傳成功的回調(diào)，你可以在此將圖片傳到服務(wù)器獲取相對(duì)地址并返回到編輯器中，注意這里有個(gè)坑，你需要給express中設(shè)置上傳目錄為可訪問的靜態(tài)資源目錄。(當(dāng)初被坑慘了，一直空白 ／手動(dòng)捂臉)
mounted(){
? ? $('#summernote').summernote({
? ? ? ? ?lang:'zh-CN',
? ? ? ? ?height:300,
? ? ? ? minHeight:null,
? ? ? ? maxHeight:null,
? ? ? ? focus:true,
toolbar:[
? ? ? ? ?['style',['bold','italic','clear']],
? ? ? ? ['fontsize',['fontsize']],
? ? ? ? ['para',['ul','ol','paragraph']],
? ? ? ? ?['insert',['picture','link','video']]
],
? ? ?callbacks:{
? ? ? ? onImageUpload:function(files){
? ? ? ? var ?data=new FormData();
? ? ? ? Picdata.append('upload',files[0]);
? ? ? ? $.ajax({
? ? ? ? ? ? url:'/api/uploadEditorPic',
? ? ? ? ? ?type:'POST',
? ? ? ? ? ?cache:false,
? ? ? ? ? ?data:data,
? ? ? ? ? ?processData:false,
? ? ? ? ? ?contentType:false
? ? ? ? ?}).success(function(res) {
? ? ? ? ? ?$('#summernote').summernote("insertImage",res);
? ? ? ? ? ?}).fail(function(res) {
? ? ? ? ? ? ? console.log('error')
? ? ? ? });
? ? ?}?
? ?}
?})
},
部分功能演示(gif)
在視頻管理這里，我們可以用v-if判斷后臺(tái)傳回的數(shù)據(jù)，(我在后臺(tái)設(shè)置一個(gè)字段)，如果0則為否，1則為是，這樣只要判斷參數(shù)便可以設(shè)置該影片是否被禁用，以及解除禁用的操作，這無疑讓我們體驗(yàn)到 ‘?dāng)?shù)據(jù)驅(qū)動(dòng)視圖’的靈魂，大大提高開發(fā)效率。
目前完成功能
輪播圖增刪改查
視頻，視頻分類增刪改查
話題，話題分類的增刪改查(富文本)
用戶的簡(jiǎn)單操作(封禁，解封)
用戶上傳頭像，改名等。
待完成
用戶權(quán)限劃分
視頻評(píng)論增刪改查
話題評(píng)論增刪改查
我也不知道，精彩待續(xù)?
項(xiàng)目運(yùn)行
因?yàn)樯洗畏帕藴y(cè)試賬號(hào)被人增加了一些奇怪的東西，這個(gè)就暫時(shí)不做公開demo了，有需要的去github看源碼吧
項(xiàng)目地址：https://github.com/dubinbin/videoBackEnd
因?yàn)樾聎ebpack的proxytable我弄了后一直不能轉(zhuǎn)發(fā)成功，所以我用的是之前的webpack版本，如果有哪位大神有解決方案，請(qǐng)賜教，我把谷歌，stackoverflow都翻了一遍也沒有好的解決方案。
注
因?yàn)橐恍┰?不想做，懶)，表單并沒有做輸入驗(yàn)證，有需要可以參考如下文章
http://blog.csdn.net/github_26672553/article/details/53541055
由于(不會(huì))的原因，也沒有用mocha等做測(cè)試，純自測(cè)/滑稽，所以這只能算一個(gè)練手的作品吧～
后記
作為一名業(yè)余前端，在真正開發(fā)后端的時(shí)候才明白原來平常那些應(yīng)用簡(jiǎn)單操作在服務(wù)端來做要考慮情況更多。例如用戶未登陸去往后臺(tái)頁(yè)面如何分辨并返回(使用session進(jìn)行判斷),改一張輪播圖需要先請(qǐng)求后臺(tái)刪除原有圖片再替換新圖片的邏輯操作。刪一個(gè)分類要同時(shí)把該分類關(guān)聯(lián)的另一張表的數(shù)據(jù)刪除。
當(dāng)然初次做這種前后端聯(lián)調(diào)項(xiàng)目，不免很多代碼寫的不夠漂亮和高效復(fù)用，api也可能不是做的很好，還需要不斷學(xué)習(xí)。
在這個(gè)項(xiàng)目中不僅學(xué)習(xí)了后端express，restful api的開發(fā)，同時(shí)也加強(qiáng)了我對(duì)vue組件化開發(fā)的學(xué)習(xí)，router，resource，vuex等全家桶的配合使用，在這個(gè)過程中收獲甚廣，我深知做一個(gè)項(xiàng)目是不夠充實(shí)自身知識(shí)棧的，前端／計(jì)算機(jī)行業(yè)需要終身學(xué)習(xí)的熱情，且學(xué)且行吧。
