pandazone
1.0
Gunakan vue2.0+element-ui+node.js+mongodb untuk membangun sistem blog ruang tumpukan penuh, meniru ruang QQ, dengan modul seperti pembicaraan, blog, album foto, pesan, dan teman.
Alamat daring: https://auven.github.io/pandazone/
Jika Anda tidak mengetahui node.js dan mongoDB, Anda dapat membaca catatan belajar nodejs+express+mongodb untuk memulai.
$npm install# Jika perintah di atas lambat untuk diinstal, Anda dapat menggunakan perintah berikut $npm install --registry=https://registry.npm.taobao.org
Catatan: Lingkungan pengembangan menggunakan data nyata dan MongoDB perlu diinstal.
Pertama anda harus membuka database MongoDB. Sedangkan untuk cara menggunakan MongoDB, silahkan saya jelaskan sendiri di sini.
# Instal dependensi npm install # Inisialisasi tabel kota, digunakan untuk mendaftarkan sumber data kota dari halaman npm run initCitys # Mulai server dan jalankan di localhost:8080npm run dev
Perutean vue lingkungan pengembangan menggunakan mode riwayat.
Di lingkungan produksi, data tiruan digunakan. Jika Anda ingin mengganti data sebenarnya, harap ubah BASE_API di config/prod.env.js .
# 打包压缩代码
npm run build
# 预览网页
node server/prod.server.jsPerutean vue lingkungan produksi menggunakan mode hash.
Proyek ini adalah proyek kelulusan saya. Saya telah mengimplementasikan situs web ini menggunakan PHP sebelumnya, tetapi karena saya baru mempelajari Vue, saya menggunakan Vue untuk proyek ini.
Teknologi yang terlibat: vue2.0, express, node.js+mongodb, menggunakan elemen, PhotoSwipe, Baidu ueditor dan plug-in lainnya.
│ .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
