{"id":13536425,"url":"https://github.com/elva2596/vueBlog","last_synced_at":"2025-04-02T03:30:48.650Z","repository":{"id":51139268,"uuid":"82672902","full_name":"elva2596/vueBlog","owner":"elva2596","description":null,"archived":false,"fork":false,"pushed_at":"2021-05-21T18:35:50.000Z","size":43087,"stargazers_count":293,"open_issues_count":8,"forks_count":79,"subscribers_count":17,"default_branch":"master","last_synced_at":"2024-11-03T01:33:13.808Z","etag":null,"topics":["express","flexbox","vue"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/elva2596.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-21T11:38:00.000Z","updated_at":"2024-04-02T17:40:27.000Z","dependencies_parsed_at":"2022-08-30T02:10:55.370Z","dependency_job_id":null,"html_url":"https://github.com/elva2596/vueBlog","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elva2596%2FvueBlog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elva2596%2FvueBlog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elva2596%2FvueBlog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elva2596%2FvueBlog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/elva2596","download_url":"https://codeload.github.com/elva2596/vueBlog/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246750867,"owners_count":20827794,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["express","flexbox","vue"],"created_at":"2024-08-01T09:00:39.061Z","updated_at":"2025-04-02T03:30:46.941Z","avatar_url":"https://github.com/elva2596.png","language":"JavaScript","readme":"\u003e 一个前端基于Vue2.0全家桶，后端基于Express+Mongodb的前后端分离博客。前端界面使用了flexbox+rem布局，后端界面使用了element ui。本项目可以作为一个前端进阶项目，从前端flexbox布局到前端框架的使用，再到后端以及数据库，是一个打通前后端流程的一个项目。由于最近刚换了域名，正在备案中，所以目前没有线上演示，不过可以看一下下面的动态图特效。  \n\n#  特点\n* 支持 MarkDown 编辑\n* 支持代码高亮\n* 支持移动端浏览\n\n[在线地址](http://www.dailu.site)\n\n# 功能展示展示\n\n\n#### PC前台博客演示\n\n![](src/assets/img/fronted.gif)\n\n\n#### 移动端前台演示\n![](src/assets/img/mobile.gif)\n\n#### 后台管理演示\n![](src/assets/img/backend.gif)\n\n#### 若图片无法显示则点击这里:[pc前端功能展示](http://ofyxyx8o9.bkt.clouddn.com/fronted.gif) [移动前端功能展示](http://ofyxyx8o9.bkt.clouddn.com/mobile.gif)[pc后端功能展示](http://ofyxyx8o9.bkt.clouddn.com/backend.gif)\n\n### 前端工具\n* Vue2.0\n* Vue-Router\n* Vuex\n* axios\n* element ui  \n\n前端布局采用flexbox+rem布局，关于flexbox请阅读[一个完整的Flexbox指南](http://www.w3cplus.com/css3/a-guide-to-flexbox-new.html)以及这篇最新的[理解Flexbox：你需要知道的一切](http://www.w3cplus.com/css3/understanding-flexbox-everything-you-need-to-know.html)\n\n本项目还采用了手机端适配，关于移动端的学习资料请按照我下面罗列的资料按顺序仔细阅读。\n\n1. [移动端调试](https://segmentfault.com/a/1190000002565572)\n2. [介绍vieport](http://www.css88.com/archives/6410)\n4. [使用Flexible实现手淘H5页面的终端适配](https://github.com/amfe/article/issues/17)\n\n\n\n### 后端工具\n* express\n* mongodb（mongolass）\n\n后端的管理界面我直接使用了[element ui](http://element.eleme.io/#/)这个基于vue的组件库，很强大.\n\n\n# 目录结构\n\n```\n│  .babelrc\n│  .editorconfig\n│  .eslintignore\n│  .eslintrc.js\n│  .gitignore\n│  index.html\n│  package.json\n│  README.md\n│\n├─build\n│      build.js\n│      check-versions.js\n│      dev-client.js\n│      dev-server.js\n│      utils.js\n│      webpack.base.conf.js\n│      webpack.dev.conf.js\n│      webpack.prod.conf.js\n│\n├─config\n│      dev.env.js\n│      index.js\n│      prod.env.js\n│      test.env.js\n│\n├─server                        后端文件夹\n│  │  .env\n│  │  app.js    后端入口\n│  │\n│  ├─api\n│  │      index.js  后端api\n│  │\n│  ├─lib\n│  │      mongo.js 数据库\n│  │\n│  ├─middleware\n│  │      checkToken.js\n│  │      createToken.js\n│  │\n│  └─routes                 后端路由\n│          admin.js\n│          article.js\n│          classify.js\n│          index.js\n│          login.js\n│          reg.js\n│\n├─src       前端文件夹\n│  │  App.vue\n│  │  main.js   前端入口\n│  │\n│  ├─api    前端api\n│  │      index.js\n│  │\n│  ├─assets\n│  │  ├─css\n│  │  │      commen.css\n│  │  │      default.css\n│  │  │      default0.css\n│  │  │      highlight.css\n│  │  │\n│  │  ├─img\n│  │  │      bg.jpg\n│  │  │      bgm.jpg\n│  │  │\n│  │  └─js\n│  │          commen.js\n│  │          highlight.pack.js\n│  │          hljs.js\n│  │\n│  ├─components\n│  │  │  NotFound.vue\n│  │  │\n│  │  ├─backEnd             后端界面\n│  │  │      Admin.vue\n│  │  │      ArticleCreate.vue\n│  │  │      ArticleEdit.vue\n│  │  │      ArticleList.vue\n│  │  │      ClassList.vue\n│  │  │      Login.vue\n│  │  │      Reg.vue\n│  │  │\n│  │  └─fronted             前端界面\n│  │          About.vue\n│  │          Article.vue\n│  │          Front.vue\n│  │          Home.vue\n│  │          Tags.vue\n│  │          vfooter.vue\n│  │          vheader.vue\n│  │\n│  ├─routes             前端路由vue-router\n│  │      index.js\n│  │      routes.js\n│  │\n│  └─store             前端vuex\n│      │  actions.js\n│      │  index.js\n│      │  MsgAlert.js\n│      │  mutations.js\n│      │  states.js\n│      │  types.js\n```  \n\n## Step\n#### 环境\n* Node.js v6\n* mongoDB [下载地址](https://www.mongodb.com/download-center?jmp=nav#community)\n[安装方法](https://docs.mongodb.com/manual/installation/)\n安装完成后启动数据库  \n`mongod`  \n\n\n#### 克隆远程库\n`git clone https://github.com/elva2596/vueBlog.git`\n\n\n#### 安装前端依赖\n`npm install`\n\n\n#### 全局安装supervisor\n`npm install -g supervisor`\n\n\n#### 启动mongodb服务器\n\n在你安装的数据库文件中的bin目录中启动\n\n`mongod`\n\n#### 安装后端依赖\n`进入到server文件夹下，安装后端依赖：npm install`\n\n#### 启动后端服务器\n`npm start`\n\n\n#### 启动前端项目\n`回到项目根目录下运行：npm run dev`\n\n\n#### 生成发布\n`npm run build`\n\n\n#### Notice\n* 前后端启动时的路径不一样，前端在项目根目录，后端在servser根目录，其实可以把后端分离出来。\n* 因为是前后端分离项目，必然涉及到跨域，使用webpack的proxyTable,进入到config文件夹的index.js,将proxyTable配置成：\n`proxyTable: {\n        '/api':{\n        target:'http://localhost:3009/api',\n        changeOrigin:true,\n        pathRewrite:{\n          '^/api':''\n        }\n      }\n    },`\n\n\n\n* 推荐[Robomongo](https://robomongo.org/)作为数据库的可视化管理工具\n* 推荐Postman作为验证restful API的工具，请参考[这篇文章](http://www.cnblogs.com/mafly/p/postman.html)\n* 这里的主页界面有个小小的bug,主页只显示每篇具体文章的摘要，在这里我取了一个巧，就是将从后端返回的数据经过markdown解析以后，用了一个正则把第一个p标签以及其中的内容给提取出来渲染到页面。因此后端在添加文章的时候必须在编写每篇文章的开头写一段话。因为毕竟这个博客只是一个第一版，后面我会把这个问题解决掉。\n\n\n# Todo\n* 移动端优化，300ms\n* 添加评论功能\n* 密码修改功能\n* 用户权限分类\n\n\n## License\nMIT\n","funding_links":[],"categories":["Demo示例"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felva2596%2FvueBlog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felva2596%2FvueBlog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felva2596%2FvueBlog/lists"}