pandazone
1.0
Use vue2.0+element-ui+node.js+mongodb to build a full-stack space blog system, imitating QQ space, with modules such as talk, blog, photo album, message, and friends.
Online address: https://auven.github.io/pandazone/
If you don’t know node.js and mongoDB, you can read the nodejs+express+mongodb study notes to get started.
$ npm install# If the above command is slow to install, you can use the following command $ npm install --registry=https://registry.npm.taobao.org
Note: The development environment uses real data and MongoDB needs to be installed.
First you must open the MongoDB database. As for how to use MongoDB, I won’t explain much here. Please Baidu yourself.
# Install dependencies npm install # Initialize the cities table, used to register the city data source of the page npm run initCitys # Start the server and run it on localhost:8080npm run dev
The development environment vue routing uses history mode.
In a production environment, mock data is used. If you want to replace real data, please modify BASE_API in config/prod.env.js .
# 打包压缩代码
npm run build
# 预览网页
node server/prod.server.jsThe production environment vue routing uses hash mode.
This project is my graduation project. I have implemented this website using PHP before, but because I am learning Vue recently, I used Vue for this project.
Technologies involved: vue2.0, express, node.js+mongodb, using element, PhotoSwipe, Baidu ueditor and other plug-ins.
│ .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
