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 # تهيئة جدول المدن المستخدم لتسجيل مصدر بيانات المدينة للصفحة npm run initCitys # ابدأ تشغيل الخادم وتشغيله على المضيف المحلي:8080npm run dev
يستخدم توجيه vue لبيئة التطوير وضع السجل.
في بيئة الإنتاج، يتم استخدام بيانات وهمية إذا كنت تريد استبدال البيانات الحقيقية، يرجى تعديل BASE_API في config/prod.env.js .
# 打包压缩代码
npm run build
# 预览网页
node server/prod.server.jsيستخدم توجيه بيئة الإنتاج وضع التجزئة.
هذا المشروع هو مشروع تخرجي، لقد قمت بتنفيذ هذا الموقع بلغة 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
