摘要：多人博客系統(tǒng)斷斷續(xù)續(xù)寫(xiě)了個(gè)單頁(yè)面的博客系統(tǒng)其實(shí)是想給我和我的小伙伴寫(xiě)日記用的租了服務(wù)器寫(xiě)接口用反向代理也算是練練手。

斷斷續(xù)續(xù)寫(xiě)了個(gè)單頁(yè)面的博客系統(tǒng),其實(shí)是想給我和我的小伙伴寫(xiě)日記用的,租了do服務(wù)器,express寫(xiě)接口,用nginx反向代理,也算是練練手。不得不說(shuō)國(guó)外的服務(wù)器還是做單頁(yè)面更好

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

canvas粒子效果

登錄/注冊(cè)

個(gè)人中心

添加文章

編輯文章

搜索文章

下拉加載列表

文章留言

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用戶(hù)已登錄， false用戶(hù)未登錄

    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
開(kāi)啟mongodb
mongod --dbpath
node app

前臺(tái)界面
后臺(tái)api
在線(xiàn)地址