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

fizz 发布于2019-06-26 17:39 / 3328人阅读

摘要：注册成功后会返回注册用户的此就是上面说到的，用于用户登陆的基础，请保管好。

地址

https://github.com/billyhoomm...
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）

Nodejs(6.0.0+)/npm/Mongodb安装(不会的自行google)；

pm2（项目启动管理）

进入config/config.js配置数据库信息以及七牛云账号设置

npm run start

注册个人信息
注册接口可以参考API文档 md/api.md，可以使用Postman等模拟工具来进行。

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

参数（Post）：

url:/api/register
header: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"
          }//该账号登录记录
        ]
    }
}

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

参考文档

Vue2.0文档

WebPack中文文档

MongooseAPI参考手册

Mongoose的Population连表操作

Express 4.x API手册

Echarts

Markdown转码工具

代码高亮工具

...

GPU云服务器云服务器 Vue+Express 最快的全排列算法 html网页的全选 mysql扩展开启MongoDB

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/19258.html

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

摘要：注册成功后会返回注册用户的此就是上面说到的，用于用户登陆的基础，请保管好。地址 https://github.com/billyhoomm...http://blog.billyhu.com 说明（Instructions）本项目后台基于express、mongodb，前台基于Vue2.0全家桶、bootstrap、scss预编译器以及一众工具类插件项目前后台代码在同一个目录中...

Salamander 2019-08-22 16:43 评论0 收藏0
XBlog： Vue+Express+Mongodb的全栈可扩展的完整博客系统

摘要：注册成功后会返回注册用户的此就是上面说到的，用于用户登陆的基础，请保管好。地址 https://github.com/billyhoomm...http://blog.billyhu.com 说明（Instructions）本项目后台基于express、mongodb，前台基于Vue2.0全家桶、bootstrap、scss预编译器以及一众工具类插件项目前后台代码在同一个目录中...

banana_pi 2019-08-29 15:11 评论0 收藏0
react + node + express + ant + mongodb 的简洁兼时尚的博客网站

摘要：前言此项目是用于构建博客网站的，由三部分组成，包含前台展示管理后台和后端。体验地址网站主页网站首页管理后台计划这次是一个完整的全栈式开发，只要部署了这三个项目的代码，是完全可以搭建好博客网站的。 showImg(https://segmentfault.com/img/remote/1460000017095592); 前言此项目是用于构建博客网站的，由三部分组成，包含前台展示、管理...

fish 2019-06-26 17:54 评论0 收藏0
仿美团外卖的全栈项目(vue+node+mongodb)带支付->大三求实习

摘要：前端项目包含多个路由，涉及到文件有个，功能设计登录，定位，浏览商品，加购物车，下订单，支付支持微信和支付宝的扫码支付和调起支付，评价，个人信息更改，是一个较为完整的项目。关于 2019届大三学生，前段时间一直想一个人单独开发一个较为完整的项目，在众多应用中，考虑之后选择了美团外卖来模仿，这段时间就利用课余时间进行开发，前端用vue+vuex+vue-router+axios，因为需要...

anRui 2019-06-26 17:38 评论0 收藏0
仿美团外卖的全栈项目(vue+node+mongodb)带支付->大三求实习

摘要：前端项目包含多个路由，涉及到文件有个，功能设计登录，定位，浏览商品，加购物车，下订单，支付支持微信和支付宝的扫码支付和调起支付，评价，个人信息更改，是一个较为完整的项目。关于 2019届大三学生，前段时间一直想一个人单独开发一个较为完整的项目，在众多应用中，考虑之后选择了美团外卖来模仿，这段时间就利用课余时间进行开发，前端用vue+vuex+vue-router+axios，因为需要...

iflove 2019-08-22 16:09 评论0 收藏0