{"id":18822149,"url":"https://github.com/paddingme/client-side","last_synced_at":"2025-07-28T19:34:01.442Z","repository":{"id":79873477,"uuid":"45588459","full_name":"paddingme/client-side","owner":"paddingme","description":"前后端分离之客户端","archived":false,"fork":false,"pushed_at":"2015-12-09T12:22:05.000Z","size":424,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-22T10:15:21.205Z","etag":null,"topics":[],"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/paddingme.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2015-11-05T04:52:41.000Z","updated_at":"2019-05-05T08:05:33.000Z","dependencies_parsed_at":"2023-04-25T03:39:44.776Z","dependency_job_id":null,"html_url":"https://github.com/paddingme/client-side","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/paddingme/client-side","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paddingme%2Fclient-side","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paddingme%2Fclient-side/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paddingme%2Fclient-side/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paddingme%2Fclient-side/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/paddingme","download_url":"https://codeload.github.com/paddingme/client-side/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paddingme%2Fclient-side/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267575755,"owners_count":24110254,"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","status":"online","status_checked_at":"2025-07-28T02:00:09.689Z","response_time":68,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-11-08T00:48:04.470Z","updated_at":"2025-07-28T19:34:01.394Z","avatar_url":"https://github.com/paddingme.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 前后端分离\n\n\n## 一、 前后端分离目标 \n\n1. 前后端关注点分离，前端只关注前端部分开发，不用等待后端开发完毕再进行前端开发，前端所有数据，资源由前端控制；\n2. 线上环境和开发环境分离,前端资源优化,性能提升。利用前端工程化技术自动对开发环境资源进行压缩，MD5重命名打包发布到dist文件夹下，只需要dist文件夹部署线上即可。\n3. 开发流程自动化，代码风格一致,更好的合作开发。\n\n\n## 二、 前后端分离工作\n\n已经实现\n\n- [x] API 文档生成\n- [x] 前端测试服务器搭建；\n- [x] 测试服务器与客户端通过 jwt 通信验证；\n- [x] 前端自动化：一条命令完成以下工作：\n\t  - [x] 静态资源文件合并压缩（js、css、img、html）\n\t  - [x] 静态资源文件添加MD5重命名\n\t  - [x] 编辑器保存即刷新浏览器进行调试，免去1天上万次刷新浏览器！\n\t  - [x] 自动发布(后期可做自动发布到公司测试服务器以及线上环境)\n\n待完成：\n\n- [ ] 前端开发规范;\n- [ ] angularjs 单元测试和端到端测试部分;\n- [ ] angularjs 共用组件（按钮，弹出框等等）在项目中总结提炼;\n- [ ] 前端自动化：\n\t  - [ ] postcss 对css 进行后处理（自动加前缀，自动对 IE进行hack ；\n- [ ] CSS 后处理器结合预处理器（stylus/sass/less）更好的管理 css 文件；\n- [ ] 对js 使用 jshint 进行校验，使代码更为规范。\n\n\n\n## 三 、测试服务器以及 API 文档生成\n\n### 1. 服务器目录\n测试服务器的目录结构见如下：\n\n```\n- server(服务器端)\n\t-- node_modules (依赖库)\n\t-- public (所有服务器中需要使用的静态文件放在这里，img/doc等等)\n\t\t-- doc (自动生成的API 文档目录)\n\t\t-- img (手工添加的图片文件夹)\n\t-- route(路由管理)\n\t\t--- user.js （这里控制signin/signout 发给客户端jwt）\n\t-- api.js (api 文档 语法见 http://apidocjs.com/)\n\t-- config.js (配置文件：秘钥，秘钥过期时间等)\n\t-- gulpfile.js (gulp 配置文件)\n\t-- db.json （提供给客户端的假数据，即API）\n\t-- package.json (项目依赖说明)\n\t-- README.md(读我)\n\t-- server.js (服务器启动文件)\n\n```\n\n### 2. 服务器启动\n\n1. 命令行切换到 server 目录下， 执行 `gulp` 命令会自动生成 API 文档目录。\n\t（API 文档是前后端分离中前端和后端定义的契约，前后端都依照 API 文档进行开发工作。）\n\n2. 启动服务器，切换到 server 目录下 执行 `node server`即可。\n\n\nAPI 文档目录为： http://127.0.0.1:3000/doc/\n\nAPI 目录为 http://127.0.0.1:3000/api/ (注意这里要添加jwt 才能访问)\n\n可以使用 [postman](https://www.getpostman.com/) 对所有的 API 进行测试。\n\n服务器就ok了。\n\n\n\n\n## 四、 前端开发\n\n主要使用 Angularjs 框架进行开发，使用 gulp 进行自动化管理。\nƒ\n\n### 1. 前端开发目录\n\n前端开发项目文件目录示例暂时如下，后期根据需要进行调整。\n\n\n```\n- client(项目名)\n \t-- dist(线上环境，由gulp自动生成)\n \t-- doc（项目文档 PSD 等）\n \t-- node_modules （gulp 依赖模块，已经安装好）\n \t-- src (开发环境)\n \t\t--- css (css文件)\n \t\t--- img (图片，如果有其他资源文件再同级新建目录，如 video/font等)\n \t\t--- js （共用的controller,service,directive,filter 全部放在这里)\n \t\t\t---- app.js (项目启动文件，路由管理)\n \t\t\t---- controller.js (控制器)\n \t\t\t---- directive.js (指令)\n \t\t\t---- service.js （服务）\n \t\t\t---- filter.js （过滤器）\n \t\t--- partialsA （各个模块,暂时项目较小放模板页，项目较大按 partialsB 目录）\n \t\t\t--- login.html\n \t\t\t--- logout.html\n \t\t--- partialsB \n \t\t\t---- 模块A\n \t\t\t    ----- 模块A.html (模块A模板)\n \t\t\t    ----- 模块A.js （模块A控制器）\n \t\t\t---- 模块B\n \t\t\t    ----- 模块B.html (模块B模板)\n \t\t\t    ----- 模块B.js （模块B控制器）\n \t\t--- vendor(第三方插件)\n \t\t\t---- bootstrap（插件名）\n \t\t\t\t---- bootstrap-3.0.2.min.css（插件名+版本号+min.css/需要压缩）\n \t\t\t\t---- bootstrap-3.0.2.min.js （插件名+版本号+min.css/需要压缩）\n \t\t--- 404.html (404页面)\n \t\t--- favicon （favicon）\n \t\t--- index.html（主页）\n \t-- test (单元测试/端到端测试文件)\n \t-- .editorconfig（编辑器配置文件，保持不同编辑器代码风格一致）\n \t-- .jshintrc (jshint 配置文件)\n \t-- .CHANGELOG.md (项目更改记录，每次更改需要记录)\n \t-- gulpfile.js(gulp 配置文件)\n \t-- packge.json （项目依赖）\n \t-- README.md （项目README，注意事项什么的）\n```\n\n\n### 2. 使用步骤\n\n前提：系统已经安装 [nodejs](https://nodejs.org)环境。\n\n1. 启动服务器,命令行切换到 server 目录下,执行 `node server`。\n2. 新打开一个命令行切换到 client 目录下执行 `gulp`（第一次使用请全局安装gulp,执行命令：`npm install gulp -g`）。\n3. 然后你就可以在 client src 目录下开发。在 `localhost:3001`下进行调试（可能会变，反正是会自动打开的）。\n\n在使用步骤中，可能的错误是 没有安装好 依赖库，依赖库 在 sever/node_modules 和 client/node_modules 缺少什么 安装什么 安装命令为 `npm install xx模块 `\n\n###  3. gulp 常用命令\n\ngulp 是 前端自动化工具之一，比较简单，易于使用。\n这里有简单的教程你可以查看:[Gulp：任务自动管理工具](http://javascript.ruanyifeng.com/tool/gulp.html)。\n\ngulp 的配置文件在 `gulpfile.js`，我已经写了一些常用的命令，有详细的注释，请仔细阅读。\n\n以下是一些命令你可以根据需要使用：\n\n- `gulp html`: 压缩 src/vendor 下 html 页面 到 dist/partials/ ;\n- `gulp img`: 压缩 src/img 下图片 到 dist/img（ 默认只压缩 png 图片）;\n- `gulp move`: 迁移所有未修改文件到dist目录下;\n- `gulp clean`: 清空 dist 文件夹 ;\n- `gulp watch`: 监听 dist 目录下文件变动，自动重新刷新浏览器;\n- `gulp build`: 执行 前面的`gulp html`、`gulp img`、`gulp move`之后再将index.html 中得 css,js 合并重命名以及对应的css文件，js文件进行处理发送到相应 dist 目录;\n- `gulp`: 执行以上所有任务，并且监听所有文件变化;\n\n### 4. .editorconfig\n\n为保持统一的代码风格，使用.editroconfig配置各个编辑器。（推荐使用 [sublime](http://www.sublimetext.com/)编辑器）\n\n代码风格约定：\n\n- 使用 2个 空格缩进\n- 使用 Unix 风格换行符（LF） 保证跨平台的一致性\n- 删除行尾多余的空格 \n- 文件末尾增加一个空行 \n\n[EditorConfig](http://editorconfig.org/) 是一个帮助开发者在不同的编辑器中保持统一编码 风格的插件，支持了大部分流行的编辑器。它包括两部分：代码风格规则定义(.editorconfig 文件,已经存在于目录)和支持此规则的编辑器插件。\n\nsublime editorConfig 插件安装： 调出 sublime  package control（一般快捷键为control +p）-\u003e package controll: install package -\u003e 查找 editorconfig 安装即可。\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpaddingme%2Fclient-side","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpaddingme%2Fclient-side","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpaddingme%2Fclient-side/lists"}