使用 Vue2.js + Node.js 搭建一个小型的全栈项目

写在前面

因为最近公司业务不是很忙，空闲时间比较多，因而就在纠结Vue.js（以前就学习过）和Node.js先专研哪一个比较好，最终选择了先玩玩Node.js。通过一段时间的学习，就有了教程 Node+Koa2+Mysql 搭建简易博客 GitHub地址，想要了解的能够先看看，我的水平有限，但愿能够帮到你。
大概过来一个多月，我决定两路开工。使用Node.js给前端写接口，配备后台管理功能，先把后台搭建好。大概几天事后，后台一些简单的功能实现后，就开始用Vue.js开始搭建前台，也一直在想作点什么比较好，因而就作了个豆瓣评分相似的项目。

前端项目地址 https://github.com/wclimb/vue...
前端预览 http://video.wclimb.site

后端项目地址 https://github.com/wclimb/vid...
后台管理 http://vue.wclimb.site

API接口地址 https://github.com/wclimb/vid...

技术栈(Vue2.js + Node.js 全栈项目)

因为页面不是不少，vuex用的很少，关键掌握怎么实现就行了

vue2 + vuex + vue-router + webpack + fetch + sass + flex + svg + 阿里字体图标

运行

git clone https://github.com/wclimb/vue-video.git

cd vue-video

npm install  建议使用淘宝镜像(https://npm.taobao.org/) =>  cnpm i

npm run dev (运行项目)

npm run build (打包项目)

ps: 若是打包以后文件运行不了，请打包以前把路由的 mode:'history'注释掉，该功能去掉了url中丑陋的 # 号

功能

• 1. 注册登陆登出 + 验证码 密码检测，若是用户不存在则自动建立
• 1. 检测是否登陆，若是没有登陆则不容许评论和评价
• 1. 能够上传影片到后台，进行前台展现
• 1. 评分功能，初始化评分能够自由设置，若是没有人like则默认显示原始评分，若是有则计算当前vide的评分
• 1. 修改用户名，检测用户名是否跟其余人重复
• 1. 上传头像，默认没有头像
• 1. 评论功能，评论以后能够在我的中心展现，而且能够删除
• 1. 搜索功能，能够搜索存在的影片，若是没有则显示无结果
• 1. 本身喜欢的video和评论的内容会在我的中心显示

综上：

• [x] 注册
• [x] 登陆
• [x] 登出
• [x] 验证码
• [x] 详情页
• [x] 分类
• [x] 分类影视列表
• [x] 修改用户名
• [x] 上传头像
• [x] 评论
• [x] 删除评论
• [x] 搜索
• [x] 我的中心数据

若是以为对你有帮助还望关注一下，有问题能够即便提哟，以为不错的话star一下也是能够的哟

前端线上地址

项目是手机端的，请使用谷歌浏览器手机预览模式

首页默认一种类别只显示10个，能够查看更多显示所有

预览：vue-video

手机扫描图下二维码预览

后端线上地址

技术栈：Node + Koa2 + Mysql
预览：video-admin
GitHub: 管理后台

前端演示

主页

登陆页

我的中心页

详情页

后台演示

有问题欢迎反馈

在使用中有任何问题，欢迎反馈给我，能够用如下联系方式跟我交流

• 邮件(875246904#qq.com, 把#换成@)
• QQ: 875246904
• weibo: @wclimb

目录结构

|-- build                            // webpack配置文件
|-- config                           // 项目打包路径
|-- src                              // 源码目录
|   |-- assets                       // 图片文件
|   |-- base                            // 移动端适配
|   |-- components                   // 组件
|   |-- data                         // 接口
|   |-- router                         // 路由配置
|   |-- store                        // 状态管理
|   |-- style                        // 样式
|        App.vue                      // 页面入口文件
|        main.js                      // 程序入口文件
|-- static                           // 静态资源
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 代码编写规格
|-- .gitignore                       // git忽略的文件
|-- .postcssrc.js                    // post-loader的插件配置文件
|-- index.html                       // 入口html文件
|-- package.json                     // 项目及工具的依赖配置文件