年后那段時間看了黃軼老師出的餓了么高仿單頁應用后一直想自己動手開發Vue2.0單頁應用(不得不說拿著vue2.0跟著那個1.0教程學是非常蛋疼的事情，踩了很多坑)，恰逢這學期有Node.js課程，于是乎，課程設計什么的，一拍即合，當然在做著項目的同時也遇到很多坑，也有很多巧妙解決的地方，于是在這個項目快要結束之際，我想寫這篇文章記錄，并總結，注意本文并不是介紹怎么做的教學文，只是一些節點的分析和總結。
技術棧在經過考慮后決定使用如下，后端采用Express做RESTful API開發，Mysql作為數據存儲，至于為什么不采用mongodb，因為其中很多關聯數據表，問過一些有經驗的后臺，mongodb在處理關系型數據上并不是太合適，Redis作為SESSION存儲。
所以這樣我用了2個js文件就把后端搞定了。一個定義api，一個做express，mysql，redis連接相關信息。
后臺管理界面樣式方面采用Element UI(以下簡稱eleui)作為UI層框架，不得不說Eleui的文檔非常完善，各種回調方法，參數都非常完善和易懂，樣式美觀方面也跟外面那些妖艷的賤貨不一樣。作為一個前端菜鳥，我都能看著文檔api擼出一個應用。
前端采用Vue全家桶這個大家太熟了，簡單列一下吧
前端：Vue全家桶
Vue.js
Vue-Cli
Vue-Resource
Vue-Router
Vuex
Element UI
后端：Node
Express
Mysql
Redis
整體思路：
Node服務端不做路由切換，這部分交給Vue-Router完成
Node服務端只用來接收前端通過ajax發送的請求，查詢數據庫并返回值
所以這樣做前后端幾乎完全解耦，只要約定好restful數據接口，前端渲染后端返回的數據就ok了。
例如，這里要使用/api/movelist的api取數據庫movie表里數據，這里我采用了左聯的方式，將movie表中fid等于movieCategory fid的數據篩選出來，這樣，我們就能取到movie表的電影，并且還可以得到它屬于哪個分類。
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，雖然這樣會引入bootstrap和jquery，但是目前來看如果是這種需求確實沒有比較好／現成的解決方案，vue的一些富文本插件都有一些功能不全和bug，所以綜合考慮還是使用summernote。
summernote需要你在webpack中把jquery加入alias以便全局調用，使用時在mounted周期聲明如下。callback里的onImageUpload作為圖片上傳成功的回調，你可以在此將圖片傳到服務器獲取相對地址并返回到編輯器中，注意這里有個坑，你需要給express中設置上傳目錄為可訪問的靜態資源目錄。(當初被坑慘了，一直空白 ／手動捂臉)
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判斷后臺傳回的數據，(我在后臺設置一個字段)，如果0則為否，1則為是，這樣只要判斷參數便可以設置該影片是否被禁用，以及解除禁用的操作，這無疑讓我們體驗到 ‘數據驅動視圖’的靈魂，大大提高開發效率。
目前完成功能
輪播圖增刪改查
視頻，視頻分類增刪改查
話題，話題分類的增刪改查(富文本)
用戶的簡單操作(封禁，解封)
用戶上傳頭像，改名等。
待完成
用戶權限劃分
視頻評論增刪改查
話題評論增刪改查
我也不知道，精彩待續?
項目運行
因為上次放了測試賬號被人增加了一些奇怪的東西，這個就暫時不做公開demo了，有需要的去github看源碼吧
項目地址：https://github.com/dubinbin/videoBackEnd
因為新webpack的proxytable我弄了后一直不能轉發成功，所以我用的是之前的webpack版本，如果有哪位大神有解決方案，請賜教，我把谷歌，stackoverflow都翻了一遍也沒有好的解決方案。
注
因為一些原因(不想做，懶)，表單并沒有做輸入驗證，有需要可以參考如下文章
http://blog.csdn.net/github_26672553/article/details/53541055
由于(不會)的原因，也沒有用mocha等做測試，純自測/滑稽，所以這只能算一個練手的作品吧～
后記
作為一名業余前端，在真正開發后端的時候才明白原來平常那些應用簡單操作在服務端來做要考慮情況更多。例如用戶未登陸去往后臺頁面如何分辨并返回(使用session進行判斷),改一張輪播圖需要先請求后臺刪除原有圖片再替換新圖片的邏輯操作。刪一個分類要同時把該分類關聯的另一張表的數據刪除。
當然初次做這種前后端聯調項目，不免很多代碼寫的不夠漂亮和高效復用，api也可能不是做的很好，還需要不斷學習。
在這個項目中不僅學習了后端express，restful api的開發，同時也加強了我對vue組件化開發的學習，router，resource，vuex等全家桶的配合使用，在這個過程中收獲甚廣，我深知做一個項目是不夠充實自身知識棧的，前端／計算機行業需要終身學習的熱情，且學且行吧。
