为了账号安全,请及时绑定邮箱和手机立即绑定

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

标签:
Vue.js

地址

https://github.com/billyhoomm/XBlog
http://blog.billyhu.com

说明(Instructions)

  • 本项目后台基于express、mongodb,前台基于Vue2.0全家桶、bootstrap、scss预编译器以及一众工具类插件

  • 项目前后台代码在同一个目录中,AFront中为前端代码,build后会打包静态文件到public文件夹中

  • 鉴于云服务1M的小水管,项目中静态文件以及图片均使用七牛云CDN(拥有build自动上传功能)

项目结构(Project structure)


|-AFront                //前端代码|----build              //webpack|----config             //webpack基本配置|----src                //包含api、所有vue组件、所有插件|----index.html         //首页的模板文件|----package.json       
|-bin                   //启动文件|-config                //配置文件以及数据库模型|-controllers           //api路由请求控制|-md                    //接口文档|-public                //静态资源文件|-routes                //路由|-utils                 //通用工具类|-views                 //模板文件(均为错误页面,首页会转向public/index.html)|-app.js                //express|-cache.js              //本地缓存控制  |-package.json

页面结构(Page structure)


|----前台展示---- 
|-首页                //个人信息和简单导航 |-博客  
|-----最新文章           //最近10篇文章|-----归档                //博文时间归档|-----标签库           //文章分类|-音乐  
|-背景切换     
|-登录            
|----后台管理----
|-控制台       //PV统计、访问地区统计、以及其他数据统计图表    |-我的资料      //个人信息管理 |-标签管理      //标签增删改查            |-文章管理      //文章增删改查(编辑使用markdown)|-文章评论      //评论查询、回复、审核等|-退出
|---------------

前端(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)

cd AFront 
npm i
npm run dev #开发环境 npm run build #构建

后端(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):

    url:/api/registerheader:Content-Type   application/json; charset=utf-8{    "username": "登录用户名",    "password": "密码",    "is_admin":true,    //是否是admin用户
        "full_name":"昵称",    "position":"你的职位",    "address":"你的地址",    "motto":"你的心情",    "personal_state":"你的自我介绍",    "img_url":"http://你的头像地址"}

    结果:

    {    "code": "1",    "msg": "user added and login success!",    "token": "XXXXXXXXXXXXXXXXXXXXXXXXXX",    "data": {        "username": "登录用户名",        "password": "密码",        "is_admin":true,        "full_name": "昵称",        "position": "你的职位",        "address": "你的地址",        "motto": "你的心情",        "personal_state": "你的自我介绍",        "img_url": "http://你的头像地址",        "_id": "用户_id",        "login_info": [
            {            "login_time": "登录时间",            "login_ip":"登录ip",            "_id": "_id"
            }//该账号登录记录
            ]
        }
    }
  6. 登录(使用上面注册的用户名和密码)

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

参考文档



作者:一点红3340
链接:https://www.jianshu.com/p/cd8b38a58c86


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消