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

freewolf 发布于2019-08-21 16:20 / 3526人阅读

摘要：大概过来一个多月，我决定两路开工。使用给前端写接口，配备后台管理功能，先把后台搭建好。大概几天过后，后台一些简单的功能实现后，就开始用开始搭建前台，也一直在想做点什么比较好，于是就做了个豆瓣评分类似的项目。

写在前面

由于最近公司业务不是很忙，空闲时间比较多，于是就在纠结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中丑陋的 # 号

功能

注册登录登出 + 验证码密码检测，如果用户不存在则自动创建

检测是否登录，如果没有登录则不允许评论和评价

可以上传影片到后台，进行前台展示

评分功能，初始化评分可以自由设置，如果没有人like则默认显示原始评分，如果有则计算当前vide的评分

修改用户名，检测用户名是否跟其他人重复

上传头像，默认没有头像

评论功能，评论之后可以在个人中心展示，并且可以删除

搜索功能，可以搜索存在的影片，如果没有则显示无结果

自己喜欢的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                     // 项目及工具的依赖配置文件

专线服务服务器托管搭建 node.js 云主机搭建 node.js 云vps webrtc node.js服务搭建搭建 node.js 云服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88427.html

Node.js+MySQL+Vue 的全栈实战项目

摘要：本项目是一个基于的全栈是实战项目，目标就是带领读者朋友上手实战。该实战项目主要有首页登陆注册笔记分类，笔记列表，笔记详情，发布笔记和个人主页八个部分。本项目是一个基于 Node.js 的全栈是实战项目，目标就是带领读者朋友上手实战。众所周知全栈工程师是要比纯前端有发展前景的，非常希望本篇文章能给朋友们带来一些收获。该实战项目主要有首页、登陆、注册、笔记分类，笔记列表，笔记详情，发布...

notebin 2019-08-02 15:07 评论0 收藏0
Node.js+MySQL+Vue 的全栈实战项目

摘要：本项目是一个基于的全栈是实战项目，目标就是带领读者朋友上手实战。该实战项目主要有首页登陆注册笔记分类，笔记列表，笔记详情，发布笔记和个人主页八个部分。本项目是一个基于 Node.js 的全栈是实战项目，目标就是带领读者朋友上手实战。众所周知全栈工程师是要比纯前端有发展前景的，非常希望本篇文章能给朋友们带来一些收获。该实战项目主要有首页、登陆、注册、笔记分类，笔记列表，笔记详情，发布...

wean 2019-08-01 13:58 评论0 收藏0
小白的全栈开发一

摘要：小白的全栈开发一简介从新手的角度对有了解，对和有了解。希望能够帮助和我一样是全栈小白的你看过很多关于怎么搭建全栈的文章，部分可能有借鉴。因为要自己独立完成，所以开始自己的全栈之旅。分享出来我的全栈经历，并记录我的毕设进度逃。小白的全栈开发一简介从新手的角度（对vue有了解，对Koa和Express有了解。）从0开始搭建一个通过RESTful API提供数据，vue组成的单页面的...

hiyayiji 2019-06-26 17:11 评论0 收藏0
【完结汇总】iKcamp出品基于Koa2搭建Node.js实战共十一堂课(含视频)

摘要：云集一线大厂有真正实力的程序员团队云集一线大厂经验丰厚的码农，开源奉献各教程。融合多种常见的需求场景网络请求解析模板引擎静态资源日志记录错误请求处理。结合语句中转中间件控制权，解决回调地狱问题。注意分支中的目录为当节课程后的完整代码。 ?? 与众不同的学习方式，为你打开新的编程视角独特的『同步学习』方式文案讲解+视频演示，文字可激发深层的思考、视频可还原实战操作过程。云...

sPeng 2019-08-22 14:58 评论0 收藏0
开始连载啦～每周２更共11堂iKcamp课｜基于Koa2搭建Node.js实战项目教学（含视频）|

摘要：玩转同时全面掌握潮流技术采用新一代的开发框架更小更富有表现力更健壮。融合多种常见的需求场景网络请求解析模板引擎静态资源日志记录错误请求处理。结合语句中转中间件控制权，解决回调地狱问题。注意分支中的目录为当节课程后的完整代码。 ?? 与众不同的学习方式，为你打开新的编程视角独特的『同步学习』方式文案讲解+视频演示，文字可激发深层的思考、视频可还原实战操作过程。云集一线大厂...

B0B0 2019-08-22 11:17 评论0 收藏0