vue2 vuex 多人博客系统
发布于 2 年前 作者 xuyd 3301 次浏览 来自 分享

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

689053382-5902a9e69ee4e_articlex.png

11 回复

为啥注册不了

这分屏设计真不错

@wocaatm 因为…因为被我注释了…

/src/page/reg.vue

reg(){
	//this.$store.dispatch('userReg', this.user);
}

gm window下安装ImageMagick 没有用啊

这个设计 不错

很有设计感

@wocaatm 如果装了不能用的话 可能是node版本问题 最好是6.7以上的

@xuyd VUE 从详情页返回列表页,又从新开始了,如果要是文章比较多,拉了几个小时,点开一个返回之后,又要从新拉,这个问题如何解决,不然用户体验就太差了

不错,特效收下了哈

@chanywn 这样的话 可以在页面加载的时候不清数据 不过会有别的问题 所以分页还是最科学的

回到顶部