摘要：多人博客系統斷斷續續寫了個單頁面的博客系統其實是想給我和我的小伙伴寫日記用的租了服務器寫接口用反向代理也算是練練手。

斷斷續續寫了個單頁面的博客系統,其實是想給我和我的小伙伴寫日記用的,租了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
在線地址