Vue2Vuex多人博客系统：共享创作与交流平台

断断续续写了个单页面的博客体系,实际上是想给我和我的小伙伴写日记用的,租了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
在线地点