基于express,vue的前后端分离实现
发布于 6 年前 作者 zzzs 3909 次浏览 来自 分享

前言

作为一个phper,但工作中一直都有意无意的在接触着node,包括接触了前端相关框架,做一些与node有关的工具等,但没有真正的去完整的学过去用过。一直想找个时间去做个完整的node项目,好让自己学习学习。看着node更新的这么迅速,终于忍不住要开启个项目。

因为最近被好友洗脑,对诗词产生了兴趣,故取名【诗骚】,项目的内容也会以诗词为主。

该项目是自己的node入门项目(代码仓库),适合node新手阅读,当然也希望大牛们能阅读,望能给出好建议,欢迎纠错,不甚感激。

正文

在此之前稍微了解了node相关的生态圈,决定以下面技术栈开始项目,主要还是以学习为主,希望在新知识方面和做业务的过程中能促进技能的提升。

技术栈

  • 前后端分离
  • 后端: express mongodb socket.io
  • 前端: vue全家桶
  • ui:MintUI

本项目架构正如上述技术栈般清晰,后端由express提供接口,这里舍弃了里面的视图部分,只负责提供接口;前端用vue全家桶实现,ui部分使用饿了吗的MintUI,说实在个人感觉并不好用,通信方面用fetch,socket.io(大赞),项目目录如下: image.png

以上项目目录是用vue-cli构建,基于vue的webpack模板,再加上express的框架形成的, 前后端的分离实现也是基于此。在开发模式下,vue热加载监听8080端口:npm run dev,express服务监听3000端口:npm run server,可以说很方便了,不过要解决跨域问题。

项目目前初步完成了 吟诗作对 【多房间聊天室】,致敬经典【增删改查】 两部分,效果图如下(直男的ui,勿喷):

首页 image.png

聊天室入口 image.png

聊天室界面 image.png

致敬经典-列表 image.png

致敬经典-新增 image.png

致敬经典-展示 image.png

致敬经典-删除 image.png

最后

本文由于比较基础,只放了项目架构,没放具体代码片段,如想看具体代码,可访问代码仓库

5 回复

哈哈,我姿,顶一下

node怎么从零开始啊,现在一直想要学node不知道怎么开始。。。

@hellomrbigshot 🤘🏼🤘🏼 From Noder

@lww555 先看看狼叔的狼叔:如何正确的学习Node.js

我是先大概了解了下node生态圈,然后一边看点书(推荐 node深入浅出,node in action)一边开始做点小项目,这么开始的,希望能对你有用 From Noder

@zzzs 好的,我先看看书

回到顶部