这张图用来做封面，好看而已～
年后那段时间看了黄轶老师出的饿了么高仿单页应用后一直想自己动手开发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等全家桶的配合使用，在这个过程中收获甚广，我深知做一个项目是不够充实自身知识栈的，前端／计算机行业需要终身学习的热情，且学且行吧。
网友评论