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 # 서버를 시작하고 localhost:8080npm run dev에서 실행합니다.
개발 환경 vue 라우팅은 기록 모드를 사용합니다.
프로덕션 환경에서는 모의 데이터를 사용합니다. 실제 데이터를 대체하려면 config/prod.env.js 에서 BASE_API 수정하세요.
# 打包压缩代码
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
