vue2 vuex 多人博客系统

断断续续写了个单页面的博客系统,其实是想给我和我的小伙伴写日记用的,租了do服务器,express写接口,用nginx反向代理,也算是练练手。不得不说国外的服务器还是做单页面更好

vue前台部分

前台依赖模块

vue-cli
vue-router
vuex
axios
moment-timezone
vue-waterfall
wangeditor

功能模块

• canvas粒子效果
• 登录/注册
• 个人中心
• 添加文章
• 编辑文章
• 搜索文章
• 下拉加载列表
• 文章留言
• H5多图上传
• 缩略图生成
• 图片瀑布流布局

路由配置

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

import store from '../store/index'

import index from '../page/index'
import dairy from '../page/dairy'
import photo from '../page/photo'
import login from '../page/login'
import reg from '../page/reg'
import user from '../page/user'
import set from '../page/set'
import page from '../page/page'
import article from '../page/article'
import edit from '../page/edit'

import userIndex from '../components/user/index'
import userAlbum from '../components/user/album'
import userTogether from '../components/user/together'
import userInfo from '../components/user/info'
import setIndex from '../components/set/index'
import setFriend from '../components/set/friend'
import setPassword from '../components/set/password'

const routes = [{
    path: '/',
    component: index,
    meta: { auth: false }
}, {
    path: '/dairy',
    component: dairy,
    meta: { auth: false }
}, {
    path: '/photo',
    component: photo,
    meta: { auth: false }
}, {
    path: '/login',
    component: login,
},{
    path: '/reg',
    component: reg,
    meta: { auth: false }
},{
    path: '/article',
    component: article,
},{
    path: '/p/:aid',
    name: 'page',
    component: page,
    meta: { auth: false }
},{
    path: '/p/:aid/edit',
    name: 'edit',
    component: edit,
},{
    path : '/set',
    component : set,
    children : [{
        path: '',
        name: 'setIndex',
        component : setIndex,
    },{
        path : 'password',
        name: 'setPassword',
        component : setPassword,
    },{
        path : 'friend',
        name: 'setFriend',
        component : setFriend,
    }]
}, {
    path: '/u/:uid',
    component: user,
    children: [{
        path: '',
        name: 'userIndex',
        component: userIndex,
        meta: { auth: false }
    }, {
        path: 'album',
        name: 'userAlbum',
        component: userAlbum,
        meta: { auth: false }
    }, {
        path: 'together',
        name: 'userTogether',
        component: userTogether,
        meta: { auth: false }
    }, {
        path: 'info',
        name: 'userInfo',
        component: userInfo,
        meta: { auth: false }
    }]
}];

const router = new VueRouter({
    mode: 'history',
    saveScrollPosition: true,
    routes
});

router.beforeEach(({meta, path}, from, next) => {
    var { auth = true } = meta;
    var isLogin = Boolean(store.state.auth.token); //true用户已登录， false用户未登录

    if (auth && !isLogin && path !== '/login') {
        return next({ path: '/login' })
    }
    if(isLogin && (path == '/login' || path == '/reg')){
        return next({ path: '/' })
    }
    next()
});

export default router;

前台运行程序

npm install
npm run dev
http://localhost:8080/

api后台部分

后台依赖模块

express
mongoose
bluebird
jsonwebtoken
gm            需安装ImageMagick

后台文件目录

│─ config
│    └─    index.js
│─ models
│    ├─    album.model.js
│    ├─    article.model.js
│    ├─    comment.model.js
│    └─    user.model.js
├─ public/uploads
├─ routes
│    ├─    album
│    │        ├─    album.controller.js
│    │        └─    index.js
│    ├─    article
│    │        ├─    article.controller.js
│    │        └─    index.js
│    ├─    auth
│    │        ├─    local
│    │        │        ├─    index.js
│    │        │        └─    passport.js
│    │        ├─    auth.service.js
│    │        └─    index.js
│    ├─    comment
│    │        ├─    comment.controller.js
│    │        └─    index.js
│    ├─    user
│    │        ├─    user.controller.js
│    │        └─    index.js
│    └─    index.js
├─ app.js             
└─ package.json     

后台运行程序

npm install
开启mongodb
mongod --dbpath
node app

源码地址

前台界面后台api在线地址