pandazone
1.0
使用vue2.0+element-ui+node.js+mongodb构建全栈空间博客系统,仿qq空间,有说说,博客,相册,留言,好友等模块。
线上地址:https://auven.github.io/pandazone/
如果不了解node.js和mongoDB,可以阅读nodejs+express+mongodb学习笔记简单入门一下。
$ npm install# 如果上面的命令安装很慢,可以使用以下命令$ npm install --registry=https://registry.npm.taobao.org
注意: 开发环境使用真实的数据,需安装MongoDB。
首先你必须开启MongoDB数据库,至于如何使用MongoDB,我在这里不多做解释,请自行百度。
# 安装依赖npm install# 初始化citys表,用于注册页面的城市数据来源npm run initCitys# 启动服务器,运行在localhost:8080npm run dev
开发环境vue路由使用history模式。
生产环境下,使用mock数据,若要更换真实数据,请修改config/prod.env.js
里的BASE_API
。
# 打包压缩代码
npm run build
# 预览网页
node server/prod.server.js
生产环境vue路由使用hash模式。
本项目是我的毕业设计,以前用php实现过这个网站,但是因为最近在学习vue,所以就使用了vue来做这个项目。
涉及的技术:vue2.0、express、node.js+mongodb,使用了element、PhotoSwipe、百度ueditor等插件。
│ .babelrc │ .editorconfig │ .eslintignore │ .eslintrc.js │ .gitignore │ .postcssrc.js │ .travis.yml │ index.html │ package.json │ README.md │ ├─build // webpack配置文件 │ build.js │ check-versions.js │ dev-client.js │ dev-server.js │ initCitys.js │ utils.js │ vue-loader.conf.js │ webpack.base.conf.js │ webpack.dev.conf.js │ webpack.prod.conf.js │ webpack.test.conf.js │ ├─config // webpack配置文件 │ dev.env.js │ index.js │ prod.env.js │ test.env.js │ ├─dist // build之后的目录 │ ├─server // express服务器相关代码 │ │ prod.server.js │ │ settings.js │ │ │ ├─models // mongoose模块(与MongoDB进行数据交互) │ │ Album.js │ │ Blog.js │ │ BlogGroup.js │ │ db.js │ │ dbs.js │ │ Log.js │ │ md5.js │ │ Mood.js │ │ User.js │ │ │ ├─router // 服务器路由配置 │ │ router.js │ │ │ └─upload // 图片上传目录 │ ├─album // 相册 │ │ │ ├─avatar // 头像 │ │ │ ├─moodImg // 说说配图 │ │ │ └─temp // 临时上传文件 ├─src // vue项目源文件 │ │ App.vue │ │ main.js // 入口文件 │ │ │ ├─common // 公共 │ │ ├─fonts │ │ │ pandazone.eot │ │ │ pandazone.svg │ │ │ pandazone.ttf │ │ │ pandazone.woff │ │ │ │ │ └─stylus │ │ base.styl │ │ icon.styl │ │ index.styl │ │ mixin.styl │ │ │ ├─components // 组件 │ │ ├─404 │ │ │ 404.png │ │ │ 404.vue │ │ │ 404_msg.png │ │ │ 404_to_index.png │ │ │ error_bg.jpg │ │ │ error_cloud.png │ │ │ │ │ ├─album │ │ │ album.vue │ │ │ │ │ ├─albumDetail │ │ │ albumDetail.vue │ │ │ │ │ ├─blog │ │ │ blog.vue │ │ │ │ │ ├─blogDetail │ │ │ blogDetail.vue │ │ │ │ │ ├─blogModify │ │ │ blogModify.vue │ │ │ │ │ ├─footer │ │ │ footer.vue │ │ │ WechatIMG2.jpeg │ │ │ │ │ ├─friends │ │ │ friends.vue │ │ │ │ │ ├─header │ │ │ header.vue │ │ │ │ │ ├─home │ │ │ home.vue │ │ │ │ │ ├─index │ │ │ index.vue │ │ │ │ │ ├─login │ │ │ login.vue │ │ │ │ │ ├─message │ │ │ message.vue │ │ │ │ │ ├─mood │ │ │ mood.vue │ │ │ │ │ ├─newBlog │ │ │ newBlog.vue │ │ │ │ │ ├─newMood │ │ │ newMood.vue │ │ │ │ │ ├─profile │ │ │ profile.vue │ │ │ │ │ ├─register │ │ │ register.vue │ │ │ │ │ ├─status │ │ │ status.vue │ │ │ │ │ ├─uploadImg │ │ │ uploadImg.vue │ │ │ │ │ ├─userIndex │ │ │ userIndex.vue │ │ │ │ │ └─vueUeditor │ │ vueUeditor.vue │ │ │ └─router // vue-router │ index.js │ └─static // 静态资源文件 │ .gitkeep │ city.json │ ├─css │ normalize.css │ ├─images │ 72019_bg.jpg │ 72019_top.png │ moren.jpg │ ├─js │ └─PhotoSwipe │ └─ueditor1_4_3_3