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
在線地址