pandazone
1.0
Verwenden Sie vue2.0 + element-ui + node.js + mongodb, um ein Full-Stack-Space-Blogsystem zu erstellen, das den QQ-Space imitiert und Module wie Talk, Blog, Fotoalbum, Nachricht und Freunde enthält.
Online-Adresse: https://auven.github.io/pandazone/
Wenn Sie node.js und mongoDB nicht kennen, können Sie die Studiennotizen zu nodejs+express+mongodb lesen, um loszulegen.
$ npm install# Wenn die Installation des obigen Befehls langsam ist, können Sie den folgenden Befehl verwenden: $ npm install --registry=https://registry.npm.taobao.org
Hinweis: Die Entwicklungsumgebung verwendet echte Daten und MongoDB muss installiert sein.
Zuerst müssen Sie die MongoDB-Datenbank öffnen. Ich werde hier nicht viel erklären.
# Abhängigkeiten installieren npm install # Die Städtetabelle initialisieren, die zum Registrieren der Stadtdatenquelle der Seite verwendet wird. npm run initCitys # Starten Sie den Server und führen Sie ihn auf localhost:8080npm run dev aus
Das Vue-Routing der Entwicklungsumgebung verwendet den Verlaufsmodus.
In einer Produktionsumgebung werden Scheindaten verwendet. Wenn Sie echte Daten ersetzen möchten, ändern Sie bitte BASE_API in config/prod.env.js .
# 打包压缩代码
npm run build
# 预览网页
node server/prod.server.jsDas Vue-Routing der Produktionsumgebung verwendet den Hash-Modus.
Dieses Projekt ist mein Abschlussprojekt. Ich habe diese Website bereits in PHP implementiert, aber da ich kürzlich Vue gelernt habe, habe ich für dieses Projekt Vue verwendet.
Beteiligte Technologien: vue2.0, Express, node.js+mongodb, using element, PhotoSwipe, Baidu ueditor und andere 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
