尧图网页设计 
简介这份HIS系统前端源代码及说明面向医疗信息化初学者与前端开发者帮助理解医院信息系统中挂号、病历、药方等核心业务界面的实现方式。压缩包共42个文件约736KB包含9个HTML页面、8个JavaScript脚本、6个CSS样式表、8张JPG与5张PNG图片、2个JSON数据文件及1份说明文档覆盖页面结构、交互逻辑、样式设计与数据资源等层面。代码中运用jQuery处理DOM操作与事件监听并通过Ajax异步获取JSON数据实现挂号、病历、药方等信息的局部刷新CSS目录负责界面布局与配色图片资源用于图标与背景展示。已有2808人学习下载适合作为前端综合练习或课程设计参考读者可借此掌握多页面组织、异步通信与静态资源管理的完整流程并了解医疗信息系统的设计思路。1. 从一份 HIS 系统源码包说起它到底能跑出什么HIS 系统全称 Hospital Information System医院信息系统。这份HIS系统源代码及说明.rar不是一份只供阅读的文档而是一套带前端交互、带数据结构的完整工程源码。它最直接的用途是让开发者能在一个真实业务场景里把 ajax、json、javascript 这套前端数据流跑通而不是停留在写几个孤立 demo 的层面。我见过太多人拿到源码包第一反应是解压、找 index.html、双击打开然后发现页面空白或者按钮没反应就断定“这代码是坏的”。问题往往不在代码而在于 HIS 这类系统天然依赖后端接口返回 json 数据前端只是消费方。这份资源的价值恰恰在于它把“前端如何用 ajax 请求 json、如何渲染表格、如何处理增删改查”这条链路完整保留了下来。适合谁适合正在做医疗信息化项目、需要参考真实业务表单结构的前端也适合想拿一套完整工程练手 ajax 异步交互的后端转全栈。你不需要把它当成生产级系统直接上线但完全可以把它当成一个可拆解、可改造的实战样本。2. 拆包先看目录HIS 源码里哪些文件值得先读2.1 解压后的典型目录结构与文件职责拿到 rar 包别急着全局搜索。先按目录层级判断这套 HIS 的技术形态。常见做法是根目录下会有WebRoot、src、WebContent或直接以模块名命名的文件夹。前端资源通常集中在js、css、images三个目录业务页面则散落在pages、modules、views这类路径下。我一般会先找三类文件入口页面、公共 js、以及带ajax字样的脚本。入口页面通常是login.html、index.html或main.jsp它决定了系统启动后第一个加载的视图。公共 js 往往叫common.js、util.js、public.js里面封装了 ajax 请求方法、日期格式化、表单校验这些复用逻辑。带 ajax 的脚本则是理解数据流的关键因为 HIS 的挂号、收费、医嘱、药房这些模块几乎每一个操作都要向后端发请求。目录/文件典型作用优先阅读理由js/common.js封装 ajax、弹窗、校验看懂请求怎么发、参数怎么拼pages/register/挂号业务页面表单字段最全适合学结构pages/charge/收费业务页面涉及金额计算与 json 回填css/main.css全局样式判断页面布局方式WEB-INF/web.xml后端路由配置确认接口路径前缀这张表不是让你全读而是告诉你优先级。先读公共 js再读一个完整业务页面最后看配置。顺序反了很容易陷进某个具体页面的细节里出不来。2.2 用浏览器开发者工具定位 ajax 请求链路源码是静态的但数据流是动态的。要真正理解 HIS 前端怎么工作必须把页面跑起来打开浏览器开发者工具切到 Network 面板过滤 XHR 或 Fetch。然后手动触发一个业务操作比如点击“查询患者”或“保存挂号”。这时候你会看到一条请求记录点开它重点看四个位置Request URL、Request Method、Request Payload、Response。Request URL 告诉你接口路径Request Method 告诉你用的是 GET 还是 POSTRequest Payload 告诉你前端传了哪些参数Response 则是后端返回的 json 结构。把这四个位置和源码里的 ajax 调用一一对应你就能还原出完整的数据契约。// 典型 HIS 前端 ajax 调用片段基于 jQuery 风格 $.ajax({ url: basePath /patient/query, // 接口路径basePath 通常由公共 js 注入 type: POST, // HIS 查询多用 POST避免 URL 长度限制 dataType: json, // 明确期望返回 json否则 jQuery 可能按文本解析 data: { name: $(#patientName).val(), // 从表单读取患者姓名 idCard: $(#idCard).val(), // 身份证号用于精确匹配 page: 1, // 分页参数HIS 列表几乎必带 rows: 20 // 每页条数常见默认值 }, success: function(res) { if (res.code 200) { // 业务状态码不是 HTTP 状态码 renderTable(res.data); // 拿到数据后渲染表格 } else { alert(res.msg); // 失败时提示后端返回的错误信息 } }, error: function(xhr) { console.log(请求失败, xhr.status); // 网络层或服务层异常 } });这段代码的逻辑很直白拼参数、发请求、判状态、渲染或报错。参数说明上basePath是项目根路径通常由后端在页面头部注入避免硬编码dataType: json是关键如果后端返回的 json 格式不合法jQuery 会直接进 error 回调res.code是业务状态码和 HTTP 状态码是两回事HIS 里常见 200 表示成功、500 表示业务异常。你改代码时最先要确认的就是这三个参数是否和你的运行环境匹配。3. 让 HIS 前端跑起来ajax 请求 json 的完整复现步骤3.1 本地环境准备与静态资源路径修正这份源码大概率不是开箱即用的。常见情况是它原本跑在某个应用服务器下路径里带了项目名比如/his/。你直接双击 html 文件浏览器用的是file://协议ajax 请求会因为跨域或路径错误全部失败。我一般会先起一个本地静态服务器把源码根目录作为服务目录。用 Python 的话一行命令就够# 在源码根目录执行端口按需改 python -m http.server 8080然后浏览器访问http://localhost:8080/找到入口页面。如果页面能加载但样式错乱检查 css 和 js 的引用路径是不是绝对路径比如/his/js/common.js。这种路径在本地服务器下会 404需要改成相对路径./js/common.js或者js/common.js。这一步没有捷径只能看控制台报错哪个资源 404 就改哪个。提示如果源码里大量使用绝对路径不要一个个手改。常见做法是用编辑器的全局替换把/his/替换成/但替换前先备份避免误伤接口路径。3.2 构造 mock json 数据打通前端渲染后端没跑起来之前ajax 请求必然失败。这时候不要干等直接上 mock。思路很简单在本地写一个 json 文件然后用工具拦截 ajax 请求把响应指向这个文件。常见做法是用浏览器插件或者本地 node 脚本但我更推荐直接改前端代码里的 url临时指向一个静态 json。// 临时 mock把接口指向本地 json 文件 $.ajax({ url: mock/patient-list.json, // 静态文件路径和页面同域 type: GET, // 静态文件用 GET 即可 dataType: json, success: function(res) { renderTable(res.data); // 只要 json 结构对渲染逻辑不用改 } });对应的mock/patient-list.json内容要贴合原接口结构{ code: 200, msg: success, data: [ { id: 1, name: 张三, idCard: 110101199001011234, dept: 内科 }, { id: 2, name: 李四, idCard: 110101199202022345, dept: 外科 } ] }逻辑说明mock 的目的是验证前端渲染逻辑是否正确而不是验证后端。只要 json 的字段名和原接口一致表格就能正常渲染。参数上code和msg是业务约定data是列表数组。你改 mock 数据时重点改data里的字段值观察页面表格、分页、搜索框是否联动。这一步跑通说明前端代码本身是健康的问题只在后端接口。3.3 从 mock 切回真实接口的检查清单mock 跑通后切回真实接口往往还会翻车。我踩过的坑包括接口路径多了或少了一层、请求方法从 GET 变成 POST 但后端没改、json 字段名大小写不一致、日期格式从字符串变成时间戳。每次切换按下面这个清单过一遍能省很多时间。确认url前缀和真实后端路由一致注意http://和https://的区别。确认type与后端RequestMapping或路由定义匹配。用浏览器 Network 面板对比 mock 响应和真实响应的 json 结构逐字段核对。检查dataType是否仍为json如果后端返回的是字符串包裹的 json需要加JSON.parse。查看控制台是否有跨域报错如果有需要后端加响应头或走同域部署。这套流程走下来你对 HIS 前端的数据流就不再是黑匣子而是能定位到具体某一层的问题。4. 避坑与排查HIS 源码改造中最容易翻车的五个点4.1 页面空白但控制台无报错现象打开页面一片空白Network 面板也没有失败请求。原因通常是入口页面本身没有触发任何 ajax而是依赖后端模板渲染比如 jsp 或 php 直接输出 html。你拿到的是纯静态资源缺少服务端渲染层。解决找到入口页面的源码看是否有类似% %或?php ?的模板语法如果有说明必须配合后端运行不能纯静态打开。4.2 ajax 请求返回 200 但页面不更新现象Network 显示请求成功响应 json 也有数据但表格就是不动。原因多半是success回调里的判断条件不匹配比如后端返回code: 0表示成功而前端写的是code 200。解决在success回调第一行加console.log(res)看实际返回结构然后调整判断条件。HIS 系统里不同模块的成功码可能不统一这是血泪经验。4.3 中文乱码导致 json 解析失败现象响应内容里中文变成乱码JSON.parse直接抛异常。原因通常是后端响应头Content-Type没有指定charsetutf-8或者前端页面编码和接口编码不一致。解决先确认后端响应头再确认 html 的meta charset两边统一成 utf-8。如果后端改不了前端可以在 ajax 里加beforeSend设置编码但治标不治本。4.4 分页参数传了但后端不认现象列表只显示第一页点击下一页没反应。原因可能是前端传的是page和rows后端期望的是pageNum和pageSize。解决打开 Network 面板对比前端实际发送的参数名和后端接口文档改前端data里的字段名。这种命名不一致在 HIS 源码里非常常见因为不同模块可能由不同人开发。4.5 修改 js 后浏览器缓存导致不生效现象明明改了代码刷新页面还是旧逻辑。原因就是浏览器缓存了 js 文件。解决开发者工具 Network 面板勾选Disable cache或者用强制刷新Ctrl Shift R。更彻底的做法是在引用 js 时加版本号比如common.js?v2每次改完递增。这个坑不致命但特别耗时间我一般会在开发阶段一直开着禁用缓存。5. 进阶用法把 HIS 源码改造成可复用的前端模板5.1 抽离公共 ajax 封装与统一错误处理HIS 源码里最值得复用的不是某个具体页面而是 ajax 的调用模式。你可以把common.js里的请求逻辑抽成一个独立函数统一处理 basePath、超时、错误提示和 loading 状态。这样后续做任何管理后台都能直接套用。// 统一 ajax 封装返回 Promise 便于链式调用 function request(url, data, method) { return new Promise(function(resolve, reject) { $.ajax({ url: basePath url, // 统一拼接根路径 type: method || POST, // 默认 POST符合 HIS 习惯 dataType: json, data: data, timeout: 10000, // 超时 10 秒避免无限等待 success: function(res) { if (res.code 200) { resolve(res.data); // 只把业务数据抛出去 } else { alert(res.msg || 操作失败); reject(res); // 业务失败也走 reject } }, error: function(xhr) { alert(网络异常请稍后重试); reject(xhr); } }); }); }逻辑说明这个封装把成功和失败的分支都收敛到一处页面里只需要request(/patient/query, {...}).then(renderTable)。参数上basePath仍然由外部注入timeout按项目实际调整HIS 系统里有些报表查询很慢可以单独给那个接口设更长超时。这样改完你再换一个业务系统只需要改basePath和成功码判断其余逻辑不用动。5.2 用 json 驱动表单渲染减少重复代码HIS 里大量表单结构相似只是字段名和校验规则不同。与其每个页面手写 html不如用 json 描述表单然后写一个渲染函数。比如挂号表单和收费表单字段不同但布局逻辑一致。// 表单配置 json var formConfig [ { label: 患者姓名, name: name, type: text, required: true }, { label: 身份证号, name: idCard, type: text, required: true }, { label: 科室, name: dept, type: select, options: [内科, 外科, 儿科] } ]; // 渲染函数 function renderForm(config, container) { var html ; config.forEach(function(item) { html div classform-item; html label item.label /label; if (item.type select) { html select name item.name ; item.options.forEach(function(opt) { html option value opt opt /option; }); html /select; } else { html input typetext name item.name ; if (item.required) html required; html ; } html /div; }); $(container).html(html); }这段代码的价值在于你把业务字段抽成 json 后新增一个表单只需要加配置不用复制 html。参数上required控制是否必填options只在 select 类型下生效。验证方法很简单改formConfig数组刷新页面看表单是否跟着变。如果没变检查renderForm的调用时机是否在 dom 加载之后。5.3 验证改造是否成功的三个硬指标改完代码怎么判断真的成了我一般看三个指标。第一Network 面板里所有 ajax 请求的响应时间稳定没有反复重试。第二控制台没有任何红色报错包括跨域、解析、未定义。第三把 mock 数据换成另一组边界值比如空列表、超长字符串、特殊字符页面不崩、不乱码、不白屏。这三个指标过了这套 HIS 源码才算真正被你吃透。从那以后我每次拿到类似源码包都强制先跑 mock、再切真实接口、最后做边界测试不再一上来就改业务逻辑。希望帮到你。本文还有配套的精品资源点击获取 HIS系统源码实战：ajax请求json与前端数据流解析
简介这份HIS系统前端源代码及说明面向医疗信息化初学者与前端开发者帮助理解医院信息系统中挂号、病历、药方等核心业务界面的实现方式。压缩包共42个文件约736KB包含9个HTML页面、8个JavaScript脚本、6个CSS样式表、8张JPG与5张PNG图片、2个JSON数据文件及1份说明文档覆盖页面结构、交互逻辑、样式设计与数据资源等层面。代码中运用jQuery处理DOM操作与事件监听并通过Ajax异步获取JSON数据实现挂号、病历、药方等信息的局部刷新CSS目录负责界面布局与配色图片资源用于图标与背景展示。已有2808人学习下载适合作为前端综合练习或课程设计参考读者可借此掌握多页面组织、异步通信与静态资源管理的完整流程并了解医疗信息系统的设计思路。1. 从一份 HIS 系统源码包说起它到底能跑出什么HIS 系统全称 Hospital Information System医院信息系统。这份HIS系统源代码及说明.rar不是一份只供阅读的文档而是一套带前端交互、带数据结构的完整工程源码。它最直接的用途是让开发者能在一个真实业务场景里把 ajax、json、javascript 这套前端数据流跑通而不是停留在写几个孤立 demo 的层面。我见过太多人拿到源码包第一反应是解压、找 index.html、双击打开然后发现页面空白或者按钮没反应就断定“这代码是坏的”。问题往往不在代码而在于 HIS 这类系统天然依赖后端接口返回 json 数据前端只是消费方。这份资源的价值恰恰在于它把“前端如何用 ajax 请求 json、如何渲染表格、如何处理增删改查”这条链路完整保留了下来。适合谁适合正在做医疗信息化项目、需要参考真实业务表单结构的前端也适合想拿一套完整工程练手 ajax 异步交互的后端转全栈。你不需要把它当成生产级系统直接上线但完全可以把它当成一个可拆解、可改造的实战样本。2. 拆包先看目录HIS 源码里哪些文件值得先读2.1 解压后的典型目录结构与文件职责拿到 rar 包别急着全局搜索。先按目录层级判断这套 HIS 的技术形态。常见做法是根目录下会有WebRoot、src、WebContent或直接以模块名命名的文件夹。前端资源通常集中在js、css、images三个目录业务页面则散落在pages、modules、views这类路径下。我一般会先找三类文件入口页面、公共 js、以及带ajax字样的脚本。入口页面通常是login.html、index.html或main.jsp它决定了系统启动后第一个加载的视图。公共 js 往往叫common.js、util.js、public.js里面封装了 ajax 请求方法、日期格式化、表单校验这些复用逻辑。带 ajax 的脚本则是理解数据流的关键因为 HIS 的挂号、收费、医嘱、药房这些模块几乎每一个操作都要向后端发请求。目录/文件典型作用优先阅读理由js/common.js封装 ajax、弹窗、校验看懂请求怎么发、参数怎么拼pages/register/挂号业务页面表单字段最全适合学结构pages/charge/收费业务页面涉及金额计算与 json 回填css/main.css全局样式判断页面布局方式WEB-INF/web.xml后端路由配置确认接口路径前缀这张表不是让你全读而是告诉你优先级。先读公共 js再读一个完整业务页面最后看配置。顺序反了很容易陷进某个具体页面的细节里出不来。2.2 用浏览器开发者工具定位 ajax 请求链路源码是静态的但数据流是动态的。要真正理解 HIS 前端怎么工作必须把页面跑起来打开浏览器开发者工具切到 Network 面板过滤 XHR 或 Fetch。然后手动触发一个业务操作比如点击“查询患者”或“保存挂号”。这时候你会看到一条请求记录点开它重点看四个位置Request URL、Request Method、Request Payload、Response。Request URL 告诉你接口路径Request Method 告诉你用的是 GET 还是 POSTRequest Payload 告诉你前端传了哪些参数Response 则是后端返回的 json 结构。把这四个位置和源码里的 ajax 调用一一对应你就能还原出完整的数据契约。// 典型 HIS 前端 ajax 调用片段基于 jQuery 风格 $.ajax({ url: basePath /patient/query, // 接口路径basePath 通常由公共 js 注入 type: POST, // HIS 查询多用 POST避免 URL 长度限制 dataType: json, // 明确期望返回 json否则 jQuery 可能按文本解析 data: { name: $(#patientName).val(), // 从表单读取患者姓名 idCard: $(#idCard).val(), // 身份证号用于精确匹配 page: 1, // 分页参数HIS 列表几乎必带 rows: 20 // 每页条数常见默认值 }, success: function(res) { if (res.code 200) { // 业务状态码不是 HTTP 状态码 renderTable(res.data); // 拿到数据后渲染表格 } else { alert(res.msg); // 失败时提示后端返回的错误信息 } }, error: function(xhr) { console.log(请求失败, xhr.status); // 网络层或服务层异常 } });这段代码的逻辑很直白拼参数、发请求、判状态、渲染或报错。参数说明上basePath是项目根路径通常由后端在页面头部注入避免硬编码dataType: json是关键如果后端返回的 json 格式不合法jQuery 会直接进 error 回调res.code是业务状态码和 HTTP 状态码是两回事HIS 里常见 200 表示成功、500 表示业务异常。你改代码时最先要确认的就是这三个参数是否和你的运行环境匹配。3. 让 HIS 前端跑起来ajax 请求 json 的完整复现步骤3.1 本地环境准备与静态资源路径修正这份源码大概率不是开箱即用的。常见情况是它原本跑在某个应用服务器下路径里带了项目名比如/his/。你直接双击 html 文件浏览器用的是file://协议ajax 请求会因为跨域或路径错误全部失败。我一般会先起一个本地静态服务器把源码根目录作为服务目录。用 Python 的话一行命令就够# 在源码根目录执行端口按需改 python -m http.server 8080然后浏览器访问http://localhost:8080/找到入口页面。如果页面能加载但样式错乱检查 css 和 js 的引用路径是不是绝对路径比如/his/js/common.js。这种路径在本地服务器下会 404需要改成相对路径./js/common.js或者js/common.js。这一步没有捷径只能看控制台报错哪个资源 404 就改哪个。提示如果源码里大量使用绝对路径不要一个个手改。常见做法是用编辑器的全局替换把/his/替换成/但替换前先备份避免误伤接口路径。3.2 构造 mock json 数据打通前端渲染后端没跑起来之前ajax 请求必然失败。这时候不要干等直接上 mock。思路很简单在本地写一个 json 文件然后用工具拦截 ajax 请求把响应指向这个文件。常见做法是用浏览器插件或者本地 node 脚本但我更推荐直接改前端代码里的 url临时指向一个静态 json。// 临时 mock把接口指向本地 json 文件 $.ajax({ url: mock/patient-list.json, // 静态文件路径和页面同域 type: GET, // 静态文件用 GET 即可 dataType: json, success: function(res) { renderTable(res.data); // 只要 json 结构对渲染逻辑不用改 } });对应的mock/patient-list.json内容要贴合原接口结构{ code: 200, msg: success, data: [ { id: 1, name: 张三, idCard: 110101199001011234, dept: 内科 }, { id: 2, name: 李四, idCard: 110101199202022345, dept: 外科 } ] }逻辑说明mock 的目的是验证前端渲染逻辑是否正确而不是验证后端。只要 json 的字段名和原接口一致表格就能正常渲染。参数上code和msg是业务约定data是列表数组。你改 mock 数据时重点改data里的字段值观察页面表格、分页、搜索框是否联动。这一步跑通说明前端代码本身是健康的问题只在后端接口。3.3 从 mock 切回真实接口的检查清单mock 跑通后切回真实接口往往还会翻车。我踩过的坑包括接口路径多了或少了一层、请求方法从 GET 变成 POST 但后端没改、json 字段名大小写不一致、日期格式从字符串变成时间戳。每次切换按下面这个清单过一遍能省很多时间。确认url前缀和真实后端路由一致注意http://和https://的区别。确认type与后端RequestMapping或路由定义匹配。用浏览器 Network 面板对比 mock 响应和真实响应的 json 结构逐字段核对。检查dataType是否仍为json如果后端返回的是字符串包裹的 json需要加JSON.parse。查看控制台是否有跨域报错如果有需要后端加响应头或走同域部署。这套流程走下来你对 HIS 前端的数据流就不再是黑匣子而是能定位到具体某一层的问题。4. 避坑与排查HIS 源码改造中最容易翻车的五个点4.1 页面空白但控制台无报错现象打开页面一片空白Network 面板也没有失败请求。原因通常是入口页面本身没有触发任何 ajax而是依赖后端模板渲染比如 jsp 或 php 直接输出 html。你拿到的是纯静态资源缺少服务端渲染层。解决找到入口页面的源码看是否有类似% %或?php ?的模板语法如果有说明必须配合后端运行不能纯静态打开。4.2 ajax 请求返回 200 但页面不更新现象Network 显示请求成功响应 json 也有数据但表格就是不动。原因多半是success回调里的判断条件不匹配比如后端返回code: 0表示成功而前端写的是code 200。解决在success回调第一行加console.log(res)看实际返回结构然后调整判断条件。HIS 系统里不同模块的成功码可能不统一这是血泪经验。4.3 中文乱码导致 json 解析失败现象响应内容里中文变成乱码JSON.parse直接抛异常。原因通常是后端响应头Content-Type没有指定charsetutf-8或者前端页面编码和接口编码不一致。解决先确认后端响应头再确认 html 的meta charset两边统一成 utf-8。如果后端改不了前端可以在 ajax 里加beforeSend设置编码但治标不治本。4.4 分页参数传了但后端不认现象列表只显示第一页点击下一页没反应。原因可能是前端传的是page和rows后端期望的是pageNum和pageSize。解决打开 Network 面板对比前端实际发送的参数名和后端接口文档改前端data里的字段名。这种命名不一致在 HIS 源码里非常常见因为不同模块可能由不同人开发。4.5 修改 js 后浏览器缓存导致不生效现象明明改了代码刷新页面还是旧逻辑。原因就是浏览器缓存了 js 文件。解决开发者工具 Network 面板勾选Disable cache或者用强制刷新Ctrl Shift R。更彻底的做法是在引用 js 时加版本号比如common.js?v2每次改完递增。这个坑不致命但特别耗时间我一般会在开发阶段一直开着禁用缓存。5. 进阶用法把 HIS 源码改造成可复用的前端模板5.1 抽离公共 ajax 封装与统一错误处理HIS 源码里最值得复用的不是某个具体页面而是 ajax 的调用模式。你可以把common.js里的请求逻辑抽成一个独立函数统一处理 basePath、超时、错误提示和 loading 状态。这样后续做任何管理后台都能直接套用。// 统一 ajax 封装返回 Promise 便于链式调用 function request(url, data, method) { return new Promise(function(resolve, reject) { $.ajax({ url: basePath url, // 统一拼接根路径 type: method || POST, // 默认 POST符合 HIS 习惯 dataType: json, data: data, timeout: 10000, // 超时 10 秒避免无限等待 success: function(res) { if (res.code 200) { resolve(res.data); // 只把业务数据抛出去 } else { alert(res.msg || 操作失败); reject(res); // 业务失败也走 reject } }, error: function(xhr) { alert(网络异常请稍后重试); reject(xhr); } }); }); }逻辑说明这个封装把成功和失败的分支都收敛到一处页面里只需要request(/patient/query, {...}).then(renderTable)。参数上basePath仍然由外部注入timeout按项目实际调整HIS 系统里有些报表查询很慢可以单独给那个接口设更长超时。这样改完你再换一个业务系统只需要改basePath和成功码判断其余逻辑不用动。5.2 用 json 驱动表单渲染减少重复代码HIS 里大量表单结构相似只是字段名和校验规则不同。与其每个页面手写 html不如用 json 描述表单然后写一个渲染函数。比如挂号表单和收费表单字段不同但布局逻辑一致。// 表单配置 json var formConfig [ { label: 患者姓名, name: name, type: text, required: true }, { label: 身份证号, name: idCard, type: text, required: true }, { label: 科室, name: dept, type: select, options: [内科, 外科, 儿科] } ]; // 渲染函数 function renderForm(config, container) { var html ; config.forEach(function(item) { html div classform-item; html label item.label /label; if (item.type select) { html select name item.name ; item.options.forEach(function(opt) { html option value opt opt /option; }); html /select; } else { html input typetext name item.name ; if (item.required) html required; html ; } html /div; }); $(container).html(html); }这段代码的价值在于你把业务字段抽成 json 后新增一个表单只需要加配置不用复制 html。参数上required控制是否必填options只在 select 类型下生效。验证方法很简单改formConfig数组刷新页面看表单是否跟着变。如果没变检查renderForm的调用时机是否在 dom 加载之后。5.3 验证改造是否成功的三个硬指标改完代码怎么判断真的成了我一般看三个指标。第一Network 面板里所有 ajax 请求的响应时间稳定没有反复重试。第二控制台没有任何红色报错包括跨域、解析、未定义。第三把 mock 数据换成另一组边界值比如空列表、超长字符串、特殊字符页面不崩、不乱码、不白屏。这三个指标过了这套 HIS 源码才算真正被你吃透。从那以后我每次拿到类似源码包都强制先跑 mock、再切真实接口、最后做边界测试不再一上来就改业务逻辑。希望帮到你。本文还有配套的精品资源点击获取