{"id":25205109,"url":"https://github.com/weihomechen/blog","last_synced_at":"2025-09-09T14:41:28.205Z","repository":{"id":25088733,"uuid":"103152095","full_name":"weihomechen/blog","owner":"weihomechen","description":"一个博客全栈应用的前端部分","archived":false,"fork":false,"pushed_at":"2023-01-24T00:41:08.000Z","size":6246,"stargazers_count":20,"open_issues_count":25,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-01T05:34:26.195Z","etag":null,"topics":["blog","dva","es6","js","react","react-blog","umi","webpack"],"latest_commit_sha":null,"homepage":"http://rulifun.cn/blog","language":"TypeScript","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/weihomechen.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-09-11T15:18:01.000Z","updated_at":"2023-05-14T16:23:52.000Z","dependencies_parsed_at":"2023-02-13T05:40:34.476Z","dependency_job_id":null,"html_url":"https://github.com/weihomechen/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/weihomechen%2Fblog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weihomechen%2Fblog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weihomechen%2Fblog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weihomechen%2Fblog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/weihomechen","download_url":"https://codeload.github.com/weihomechen/blog/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253851624,"owners_count":21973773,"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":["blog","dva","es6","js","react","react-blog","umi","webpack"],"created_at":"2025-02-10T09:18:50.889Z","updated_at":"2025-05-13T01:22:33.322Z","avatar_url":"https://github.com/weihomechen.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# blog-front\n\n[![Build Status](https://www.travis-ci.org/weihomechen/blog.svg?branch=master)](https://www.travis-ci.org/weihomechen/blog)\n\n## 概述\n\n本项目是全栈博客应用的前端部分\n\n[服务端地址](https://github.com/weihomechen/blog-node)\n\n[在线预览](http://rulifun.cn/blog)\n\n\n### Vue实现（开发ing）\n\n[项目地址](https://github.com/weihomechen/vue-blog)\n\n[Vue实现线上地址](http://rulifun.cn/vue-blog)\n\n\n### 关于全栈博客\n\n该项目是一个web全栈应用，前后端分离，是笔者第一次进入服务端（node）领域的尝试。集成前端React(Vue)，后端Node，数据库Mysql，缓存Redis，消息推送，文件上传，密码加密，数据存储，性能监控等功能或模块，涵盖开发、mock、proxy、生产部署、线上监控等流程，适合有一定基础的前端er入门node，体验下web全栈开发，如果能帮助到你再好不过了，希望顺手点个star哈😄。\n\n### 前端主要技术栈：\n\n- react\n- dva\n- umi\n- webpack\n- es6+\n- axios\n- antd/material-ui\n\n主要模块和实现：\n\n- 文章模块：写文章、看文章、文章管理（编辑和删除等）和文章搜索\n- 用户模块：用户注册和登录，个人中心（管理个人事务），个人主页（对外展示）\n- 圈子模块：用户聚集的圈子，管理员可对圈子和成员进行管理\n- 社交功能：可对文章进行评论，对评论和回复进行回复；对文章进行打赏；可在反馈页面反馈问题，提交建议，所用用户可以进行讨论\n- 消息模块：收到新消息（文章评论和回复、反馈讨论等）、需要同意/审批的流程进度更新时（申请加入圈子等），用户可以实时收到消息推送，便于及时处理\n\n## Quick Start\n\n### 开始使用\n\n安装依赖\n```\ncnpm i\n```\n\n本地开发\n```\nnpm start\n```\n\n如果没有报错，项目就会运行在 [127.0.0.1:8080](http://127.0.0.1:8080)\n\n## 目录结构\n\n```\n.\n├── README.md\n├── config                      // 配置文件\n│   ├── config.js                  - 构建配置\n│   ├── menu.config.js             - 菜单配置\n│   ├── plugin.config.js           - 插件配置\n│   ├── project.config.js          - 项目相关信息配置\n│   └── router.config.js           - 路由配置\n├── lib                         // 引用的相对独立的库\n│   └── iconFont.js                - 自定义的图标字体库（基于阿里的iconfont）\n├── package-lock.json\n├── package.json\n├── src\n│   ├── app.ts                  // 前端入口\n│   ├── common                  // 通用代码\n│   ├── components              // 原则上无状态的组件\n│   ├── global.css              // 全局样式\n│   ├── layouts                 // 布局模式\n│   ├── models                  // 状态管理\n│   ├── pages                   // 页面路由组件\n│   ├── services                // 负责与API的交互\n│   └── utils                   // 通用工具\n├── tsconfig.json               // ts配置文件\n├── tslint.yml                  // tslint配置文件\n└── typings.d.ts                // ts声明文件\n```\n\n## 前后端流程\n\n- 1、浏览器访问页面URL\n- 2、前端渲染路由组件\n- 3、状态管理(models) 、与后台交互，发起请求等（services）\n- 4、nginx过滤、转发等\n- 5、后台监听收到请求（router）\n- 6、根据路由映射调用处理函数（controller）\n- 7、与数据库交互（service）、业务处理\n- 8、返回结果（controller）\n- 9、前端接收后处理(models)\n- 10、前端UI更新\n\n## 生产部署\n\n先安装[deploy-tool](https://github.com/weihomechen/deploy-tool)到本地\n\n```\nnpm i @ifun/deploy -g\n```\n\n[deploy-tool说明](https://github.com/weihomechen/deploy-tool/blob/master/README.md)\n\n在项目根目录创建部署配置文件`deploy.config.js`，**为了方便可能会将密码等敏感信息放入此文件，建议将此文件移出git管理**\n\n```js\n/**\n * 部署配置，配合@ifun/deploy@2.x\n */\nmodule.exports = {\n  dev: {\n    web: '88.88.88.88' // 部署到的服务器地址\n  },\n}\n```\n\n```sh\n# cd到项目根目录，部署前端项目\ndeploy app \u003cscheme\u003e\n\n# 示例\ndeploy app dev\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweihomechen%2Fblog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fweihomechen%2Fblog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweihomechen%2Fblog/lists"}