node.js+express+mysql+swig+bootstrap 搭建个人博客系统

2018年6月11日08:30:12 发表评论 281 浏览

花了2周的时间,用node.js+express+mysql+swig+bootstrop搭建了一个博客系统,从在数据库中创建相应的表存储数据,到后端用node根据条件查询数据库返回json结果,再到前端用ajax请求node的返回结果输出到界面上,形成了一个完整的前后端开发过程。

因为这篇文章涵盖的内容比较多,背后依赖的环境也比较多,所以建议有点基础的人看。文章的最后会把代码留给大家,我的数据库是在公司的测试环境上,直接下载是运行不了的,所以需要运行代码的小伙伴记得把数据库的地址和用户改掉,还有接口mysql的表名。

因为简书gif图只支持500m以下,所以个别我就少录制一点因为mac的录制文件真的很大,很郁闷。

讨厌伸手党哦,记得点赞、

项目架构

node.js+express+mysql+swig+bootstrap 搭建个人博客系统

项目主要思路

1.登录时验证请求接口,判断用户有无注册

node.js+express+mysql+swig+bootstrap 搭建个人博客系统

2、没有该用户会进行注册,如果该用户名已被注册会提示,两次密码不一致也会提示

node.js+express+mysql+swig+bootstrap 搭建个人博客系统

3、注册之后就可以进行登录

node.js+express+mysql+swig+bootstrap 搭建个人博客系统

4、用“超级管理员”的账户登录,可进入管理后台

node.js+express+mysql+swig+bootstrap 搭建个人博客系统

5、登录后台以后可查看登录注册的用户
登录注册的用户进行分页展示

node.js+express+mysql+swig+bootstrap 搭建个人博客系统

6、查看博客的分类管理

node.js+express+mysql+swig+bootstrap 搭建个人博客系统

7、可以进行分类的修改和删除操作,并且存入到数据库当中

node.js+express+mysql+swig+bootstrap 搭建个人博客系统

8、文章的管理,可进行文章的查看,更改,删除操作

node.js+express+mysql+swig+bootstrap 搭建个人博客系统

9、首页会进行文章的展示

node.js+express+mysql+swig+bootstrap 搭建个人博客系统

10、点击“阅读全文”会进入详情页,每点击一次会记录一次浏览量

node.js+express+mysql+swig+bootstrap 搭建个人博客系统

这就是整体的思路和页面效果,大家可以根据这个思路自己先试着做一做,中间遇到的坑再去看我的代码,我的代码也有些细节处理的不好,但是由于工作开始忙起来了,我也无心去细化了,毕竟也只是自己练习的,真实的项目肯定是在这个骨架上进行的更加细化和严密。

项目技术与架构

项目主要启用npm包管理工具,这样方便于管理第三方依赖,所以,首先你要确认你安装了node。

package.json中的dependencies就是项目需要的所有依赖。

node.js+express+mysql+swig+bootstrap 搭建个人博客系统

解释一下我们安装的依赖包

Express:不用解释了,是基于 Node.js 平台的 web 应用开发框架

body-parser:body-parser是一个HTTP请求体解析中间件,使用这个模块可以解析JSON、Raw、文本、URL-encoded格式的请求体,Express框架中就是使用这个模块做为请求体解析中间件。

cookie-parser:cookie-parser是一个非常好用方便的插件,用来存储用户信息

express-session:也是用来存储用户信息的

swig:是一个前端模板,可以方便把后台信息直接渲染到页面上,这样的模板有很多,之所以选用swig,就是因为不用改任何后缀,html文件可以方便浏览器的调试。

mysql:数据库

markdown:没有做那么深入,所以没有用上,但是做博客的时候,用这个是很方便的。

整个项目架构

node.js+express+mysql+swig+bootstrap 搭建个人博客系统

根据以上信息,小伙伴就可以着手进行操作了,等有时间我会把代码上传,分享给大家。

作者:范小饭

  • 博主微信
  • 扫一扫,来聊天吧
  • weinxin
  • 站长技术资源群
  • 群号: 465630005
  • weinxin
转载大师
微商加盟

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: