vue2 vuex 多人博客系统

摘要：多人博客系统断断续续写了个单页面的博客系统其实是想给我和我的小伙伴写日记用的租了服务器写接口用反向代理也算是练练手。

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

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/

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