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
源码地址
689053382-5902a9e69ee4e_articlex.png
11 回复
@wocaatm 因为...因为被我注释了...
/src/page/reg.vue
reg(){
//this.$store.dispatch('userReg', this.user);
}