{"id":13536409,"url":"https://github.com/BUPT-HJM/vue-blog","last_synced_at":"2025-04-02T03:30:43.347Z","repository":{"id":44163016,"uuid":"76863123","full_name":"BUPT-HJM/vue-blog","owner":"BUPT-HJM","description":"A single-user blog built with vue2, koa2 and mongodb which supports Server-Side Rendering","archived":false,"fork":false,"pushed_at":"2022-02-11T13:56:42.000Z","size":1152,"stargazers_count":597,"open_issues_count":4,"forks_count":127,"subscribers_count":23,"default_branch":"master","last_synced_at":"2025-03-29T00:08:18.632Z","etag":null,"topics":["axios","docker","docker-compose","highlight","koa2","mongoose","simplemde","vue","vue-blog","vue-router","vue2","vuex2","webpack2","yarn"],"latest_commit_sha":null,"homepage":"https://imhjm.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BUPT-HJM.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-19T13:07:55.000Z","updated_at":"2025-03-12T14:09:08.000Z","dependencies_parsed_at":"2022-09-05T18:12:05.720Z","dependency_job_id":null,"html_url":"https://github.com/BUPT-HJM/vue-blog","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/BUPT-HJM%2Fvue-blog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BUPT-HJM%2Fvue-blog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BUPT-HJM%2Fvue-blog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BUPT-HJM%2Fvue-blog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BUPT-HJM","download_url":"https://codeload.github.com/BUPT-HJM/vue-blog/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246750833,"owners_count":20827788,"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":["axios","docker","docker-compose","highlight","koa2","mongoose","simplemde","vue","vue-blog","vue-router","vue2","vuex2","webpack2","yarn"],"created_at":"2024-08-01T09:00:38.758Z","updated_at":"2025-04-02T03:30:42.999Z","avatar_url":"https://github.com/BUPT-HJM.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Demo示例"],"sub_categories":[],"readme":"# vue-blog\r\n\r\n\u003e A single-user blog built with vue2, koa2 and mongodb which supports Server-Side Rendering\r\n\r\n一个使用vue2、koa2、mongodb搭建的单用户博客，支持markdown编辑，文章标签分类，发布文章／撤回发布文章，支持服务端渲染（Server-Side Rendering）\r\n\r\n\u003cp align=\"center\"\u003e\r\n    \u003cimg src=\"http://img.imhjm.com/vue-blog-1.png\" width=\"700px\"\u003e\r\n    \u003cimg src=\"http://img.imhjm.com/vue-blog-admin-22.png\" width=\"700px\"\u003e\r\n    \u003cimg src=\"http://img.imhjm.com/vue-blog-2.png\" width=\"700px\"\u003e\r\n    \u003cbr\u003e\r\n    访问链接:https://imhjm.com/\r\n\u003c/p\u003e\r\n\r\n## 整体架构\r\n\u003cimg width=\"973\" src=\"http://img.imhjm.com/vue-blog-2-ssr.png\"\u003e\r\n\r\n- client端分为`front`和`admin`，`webpack2`打包实现多页配置，开发模式下`hot reload`\r\n    - admin端使用vue2、vuex、vue-router\r\n    - front端直接使用 ~~vue event bus~~ vuex(考虑到今后博客应用可能变复杂)、vue-router, Fastclick解决移动端300ms延迟问题\r\n    - 编辑器使用[simplemde](https://github.com/NextStepWebs/simplemde-markdown-editor)\r\n    - markdown解析和高亮使用marked.js和highlight.js\r\n- server\r\n    - 使用koa2+koa-router实现RESTful API\r\n    - mongoose连接mongodb\r\n    - 前后端鉴权使用[jwt](https://github.com/auth0/node-jsonwebtoken)\r\n- 实现Server-Side Rendering服务端渲染\r\n\r\n## 更多细节\r\n- 博客线上地址：http://imhjm.com/\r\n- [基于vue2、koa2、mongodb的个人博客](http://imhjm.com/article/58f76ed0c9eb43547d08ec6c)\r\n- [Vue2服务端渲染实践以及相关解读](http://imhjm.com/article/590710fbe3176b248999f88c)\r\n\r\n\u003e 访问博客线上地址可以获得最新信息\r\n\r\n## 快速开始\r\n- 需要Node.js 6+版本\r\n- 需要安装mongodb,并且运行mongodb服务,在`server/configs/index.js`中默认连接`mongodb://localhost:27017/vue-blog`\r\n- 配置`server/configs/index.js`,配置admin用户名、密码等,或者新建`server/configs/private.js`\r\n\r\n\u003e 注：可使用docker快速开始，详见后文\r\n\r\n``` bash\r\n# install dependencies \r\n# 安装依赖，可以使用yarn/npm\r\nnpm install # or yarn install\r\n\r\n# serve in dev mode, with hot reload at localhost:8889\r\n# 开发环境，带有HMR，监听8889端口\r\nnpm run dev\r\n\r\n# build for production\r\n# 生产环境打包\r\nnpm run build\r\n\r\n# serve in production mode (with building)\r\n# 生产环境服务，不带有打包\r\nnpm start\r\n\r\n# serve in production mode (without building)\r\n# 生产环境服务,带有打包\r\nnpm run prod\r\n\r\n# pm2\r\n# need `npm install pm2 -g`\r\nnpm run pm2\r\n```\r\n\r\n## 使用docker快速开始\r\n- 首先，需要访问[docker官网](https://www.docker.com/)根据不同操作系统获取docker\r\n- docker官方文档：https://docs.docker.com/\r\n- mongo dockerhub文档：https://hub.docker.com/_/mongo/ （关于auth/volumes一些问题）\r\n\r\n``` bash\r\n# development mode（use volumes for test-edit-reload cycle）\r\n# 开发模式(使用挂载同步容器和用户主机上的文件以便于开发)\r\n# Build or rebuild services\r\ndocker-compose build\r\n# Create and start containers\r\ndocker-compose up\r\n\r\n# production mode\r\n# 生产模式\r\n# Build or rebuild services\r\ndocker-compose -f docker-compose.prod.yml build\r\n# Create and start containers\r\ndocker-compose -f docker-compose.prod.yml up\r\n\r\n# 进入容器开启交互式终端\r\n# (xxx指代容器名或者容器ID，可由`docker ps`查看)\r\ndocker exec -it xxx bash\r\n```\r\n\r\n\u003e 注：为了防止生产环境数据库被改写，生产模式数据库与开发环境数据库的链接不同，开发环境使用vue-blog，生产环境使用vue-blog-prod,具体可以看docker-compose配置文件\r\n\r\n\r\n## 自定义配置\r\nserver端配置文件位于`server/configs`目录下\r\n\r\n``` javascript\r\n// 可新建private.js定义自己私有的配置\r\nmodule.exports = {\r\n    mongodbSecret: { // 如果mongodb设置用户名／密码可在此配置\r\n        user: '', \r\n        pass: ''\r\n    },\r\n    jwt: { // 配置jwt secret\r\n        secret: ''\r\n    },\r\n    admin: { // 配置用户名／密码\r\n        user: '',\r\n        pwd: ''\r\n    },\r\n    disqus: { // disqus评论\r\n        url: '',\r\n    },\r\n    baidu: { // 百度统计\r\n        url: '',\r\n    },\r\n}\r\n```\r\n\r\n## LICENSE\r\n[MIT](https://github.com/BUPT-HJM/vue-blog/blob/master/LICENSE)\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBUPT-HJM%2Fvue-blog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FBUPT-HJM%2Fvue-blog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBUPT-HJM%2Fvue-blog/lists"}