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 # เริ่มต้นตารางเมืองที่ใช้ในการลงทะเบียนแหล่งข้อมูลเมืองของหน้า npm run initCitys # เริ่มเซิร์ฟเวอร์และรันบน localhost:8080npm run dev
การกำหนดเส้นทาง vue ของสภาพแวดล้อมการพัฒนาใช้โหมดประวัติ
ในสภาพแวดล้อมการใช้งานจริง มีการใช้ข้อมูลจำลอง หากคุณต้องการแทนที่ข้อมูลจริง โปรดแก้ไข BASE_API ใน config/prod.env.js
# 打包压缩代码
npm run build
# 预览网页
node server/prod.server.jsการกำหนดเส้นทาง vue ของสภาพแวดล้อมการใช้งานจริงใช้โหมดแฮช
โปรเจ็กต์นี้เป็นโปรเจ็กต์สำเร็จการศึกษาของฉัน ฉันเคยใช้งานเว็บไซต์นี้โดยใช้ PHP มาก่อน แต่เนื่องจากฉันกำลังเรียนรู้ Vue เมื่อเร็ว ๆ นี้ ฉันจึงใช้ Vue สำหรับโปรเจ็กต์นี้
เทคโนโลยีที่เกี่ยวข้อง: vue2.0, express, node.js+mongodb, การใช้องค์ประกอบ, PhotoSwipe, Baidu 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
