最近学了mysql数据库,寻思着能不能构思一个小的全栈项目,思来想去,于是就有了下面的项目: 先上几张效果图吧       目前暂时前端只有这几个页面,后端开发方面,有登录,注册,完善用户信息,获取用户信息,获取文章列表,发表文章,点赞文章的api接口: 后续会慢慢考虑如何丰富这个项目,比如搜索,实时增加聊天,文章留言功能,粉丝功能,用户发表文章管理,等等等等等....... 这里是项目地址:感兴趣的朋友可以瞅两眼,也欢迎交流 https://github.com/songdongdong123…
本系列文章,主要是一个前端的视角来实现一些后端的功能,所以不会讲太多的前端东西,主要是分享做这个项目学到的一些东西,,,,, 好了闲话不多说,我们开始搭建后端服务,这里我们采用node的express框架来做我们的后端服务 这里是官网地址:express 一.安装express框架 npm install express --save 二.先写一个测试的接口 在根目录下新建一个server的文件夹,并新建一个server.js const express = require('express')…
一.基于web端的实时通讯,我们都知道有websocket,为了快速开发,本项目我们采用socket.io(客户端使用socket.io-client) Socket.io是一个WebSocket库,包括了客户端的js和服务器端的nodejs,它的目标是构建可以在不同浏览器和移动设备上使用的实时应用.它会自动根据浏览器从WebSocket.AJAX长轮询.Iframe流等等各种方式中选择最佳的方式来实现网络实时应用,非常方便和人性化,而且支持的浏览器最低达IE5.5 socket.io特点: 实…
一.使用vue-cli脚手架构建 <!-- 全局安装vue-cli --> npm install -g vue-cli <!-- 设置vue webpack模板 --> vue init webpack my-project <!-- 进入项目 --> cd my-project <!-- 安装依赖 --> npm install <!-- 启动项目 --> npm run dev 二.安装axios并统一处理请求接口(二次封装axios) 1…
一.模型的引入 引入db.js const sequelize = require('./db') sequelize本身就是一个对象,他提供了众多的方法, const account = sequelize.model('account') //获取account这个模型 二,数据库基本操作(增.删.改.查) 增: account.create(data).then(doc => { const {user_name, user_id, user_info, avatar} = doc res…
一.数据模型的设计 这里我们先不讨论群聊的模型,指讨论两个人之间的聊天,我们可以把两个人实时聊天抽象为(点对点)的实时通讯,如下图 我们上面的所说的模型其实也就是数据包的模型应该怎么设计,换句话说就是数据包的数据结构的设计,其实很简单,A发送给B,已经B发送给A,我们在传输的时候,全部带上他们的唯一标识,也就是userid,如下图所示 如上图所示我们很容易就会发现,这两个数据包虽然带了各自的userid但是还是不够准确,因为我们只是带了自己的userid,所以我们不知道发给谁,那么很简单,我们再…
个人博客系统 前言 ❝ 代码质量问题轻点喷(去年才学的前端),有啥建议欢迎联系我,联系方式见最下方,感谢! 页面有啥bug也可以反馈给我,感谢! 这是一套包含前后端代码的个人博客系统,欢迎各位提出建议,本来打算用nuxt来书写,但是想学了react之后用next来写,后面会用reactSSR来重构! ❞ 博客该有的功能都有,可以写文章,可以评论,可以留言,甚至可以玩游戏(虽然还没完善),等等让你来发现. 这是一个小型的全栈项目,主要是检验并记录一下自己的学习成果 运用的技术Vue.Vue-Cli…
欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 上一篇文章给大家讲了一下本项目的开发计划,这一章将会开始着手搭建一个MEAN项目.千里之行,始于足下,打造MEAN全栈项目的第一步就是创建一个新的Express项目.在本项目中,你需要安装以下工具: (1) Node和npm (2)全局安装的Express (3)git (4)一个云服务器 (5)一个写命令行的接口(CLI)或者是终端 创建一个Express项目 具体的安装方式请自行百度.首先,我们创建一个项…
欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习.   上一节简单介绍了什么是MEAN全栈项目,这一节将简要介绍三个内容:(1)一个通用的MEAN项目的技术架构,(2)为什么我们要打造单页应用,(3)本系列项目的技术架构和开发计划.希望通过这三个问题,我们能够对本项目产生一个全局视角. 实现一个常见的MEAN全栈项目的核心就是RESTful API.这个接口通常是用MongoDB, Express, Node.js实现的,而单页应用(SPA)由AngularJ…
欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 在本系列的开篇,我打算讲一下全栈项目开发的优势,以及MEAN项目各个模块的概览. 为什么选择全栈开发?     对于初学者来说,学习一门新的语言和技术的体验总是让人愉快的,也会满足于掌握了一些新的东西并且解决了一些实际问题.在一个小组中采用全栈开发时,你可以更加有效地把握项目全局概念,这也有利于让你了解项目中的不同模块以及它们之间是如何协同工作的.你会对你们的产品中他人的贡献更加清晰,你也就了解了这款产品如何…