XBlog: Vue+Express+Mongodb的全栈可扩展的完整博客系统

原创 知足 教程 教程 313阅读 2018-04-25 14:45:21 举报

地址

git地址:https://github.com/billyhoomm/XBlog
博客地址:http://blog.billyhu.com

说明(Instructions)

  • 本项目后台基于express、mongodb,前台基于Vue2.0全家桶、bootstrap、scss预编译器以及一众工具类插件
  • 项目前后台代码在同一个目录中,AFront中为前端代码,build后会打包静态文件到public文件夹中
  • 鉴于云服务1M的小水管,项目中静态文件以及图片均使用七牛云CDN(拥有build自动上传功能)

项目结构(Project structure)


页面结构(Page structure)


前端(Front)


特点(Features)

全屏幕自适应

背景图片随意配置和切换

...

插件(Plugins)

  • vue-moment(时间格式化)
  • moment.js(日期格式化)
  • font-awesome(字体图标)
  • vStorage.js(localStorage和sessionStorage管理)
  • bootstrap(sass版本,按需使用)
  • jquery(slim版本)
  • bootstrap-datetimepicker(日期选择器)
  • vue-multiselect(多选下拉框组件)
  • dropzone.js(上传插件)
  • fastclick.js(移动端延迟问题)
  • highlight.js(代码高亮,用户后台文章编辑)
  • marked(markdown预览)
  • clipboard(复制到剪贴板,上传图片获得图片访问地址)
  • js-md5(加密)
  • echarts(仪表盘图表统计)

配置文件(Config)

前台配置文件AFront/src/config,此处包含个人信息、所有api地址、静态资源的CDN地址(音乐、图片等)

  • url:api接口指向的地址,dev环境调试前端代码时需要提前在后台做好跨域
  • MY_INFO_ID:用来获取个人信息的info_id(后面会详细解释用户注册接口的字段和规范)
  • MY:回复网友评论时的昵称
  • EMAIL:回复网友评论时的邮箱
  • ...

启动(Start)

后端(Server)


全局配置(Config)

config/config.js:

  • 配置中包含mongodb数据库的连接配置和七牛云的文件上传api需要的配置
  • 关于七牛云的配置,可以自行去注册七牛、申请空间(免费的空间已经够用了),如果服务器是1M的小水管,静态文件放CDN后访问速度还是相当可以的

CDN自动上传配置

utils/cdn_sync.js

  • 运行 npm run cdnsync, 此处代码会将public中的所有文件上传到七牛云对应的空间
  • TODO: 后续有时间会加上文件以及文件夹过滤功能,整合成webpack插件

启动(Start)

  1. Nodejs(6.0.0+)/npm/Mongodb安装(不会的自行google);
  2. pm2(项目启动管理)
  3. 进入config/config.js配置数据库信息以及七牛云账号设置
  4. npm run start
  5. 注册个人信息
    注册接口可以参考API文档 md/api.md,可以使用Postman等模拟工具来进行。

    > 注册成功后会返回注册用户的_id, 此 _id就是上面说到的MY_INFO_ID,用于用户登陆的基础,请保管好。

    参数(Post):

    结果:

  6. 登录(使用上面注册的用户名和密码)

7.如果有问题的欢迎提issue或者在我博客留言或者邮件我

参考文档

评论 ( 2 )
最新评论
蓝龙 2018-06-13 11:03:28 2F

你好。这个开发自己的博客是免费的?

知足 2018-04-28 09:22:47 1F