HIS系统源码实战：ajax+json+javascript交互解析与部署指南

简介这份HIS系统前端源代码包面向医疗信息化开发者与前端学习者围绕医院信息系统常见的用户端功能展开包含登录注册、预约挂号、病历查询和药方管理等页面可帮助读者快速建立医疗系统前端功能模块的整体认知。资源共42个文件以HTML页面、CSS样式、JavaScript脚本、JSON数据文件为主辅以图片素材和txt说明文档压缩包大小约736KB按页面与样式分类存放查找方便。已有2806人学习下载。代码中大量使用jQuery处理DOM操作与事件绑定并通过Ajax异步获取后台JSON数据实现不刷新页面的局部更新CSS负责页面布局与配色图片用于图标和界面展示说明文档对数据交互方式也有补充。通过对照这些页面和脚本可以掌握登录、挂号、病历、药方等场景下的前端实现思路练习从界面搭建到异步请求的完整流程适合作为医疗信息化相关课程或项目的参考资料。1. HIS系统源代码包一份能跑的医院前端样本我拆过不少号称“完整项目”的压缩包多数是空壳架子打开源码全是hello world。这份HIS系统源代码及说明.rar不一样它是一套可以直接复现的医院信息系统前端工程技术栈就是关键词里那三样ajax、json、javascript。三甲医院信息科的老系统不少就是这类架构没有vue和react全是原生代码一刀一枪写出来的。对想了解医院业务系统长什么样、想练手ajax和json交互的前端从业者来说这份源码包比看十篇博客都管用。它不是给你讲概念的是让你看到真实业务下javascript如何调度ajax请求、解析json数据、渲染出挂号、收费、医嘱这些页面。下文我会带你把源码包从解压到跑起来走一遍再把几个容易翻车的地方按经验拆开讲。2. 源码结构这把钥匙业务模块与ajaxjson选型逻辑2.1 HIS系统的业务模块地图挂号、收费、医嘱、药房医院信息系统简称HIS核心不是技术是业务闭环。这套源码包里的模块划分也遵循医院实际工作流。你解压后会发现目录命名基本对应业务线比如register挂号、outpatient门诊、pharmacy药房、fee收费、doctor医嘱处理这些。每个业务目录下是独立的页面集合页面之间通过患者ID、就诊流水号串联。比如挂号模块生成一个就诊号门诊医生站通过这个就诊号拉取患者基本信息开医嘱后收费模块根据医嘱条目计算费用药房模块依据处方发药。整条链路里每个环节的页面都要从服务器拿数据拿数据的方式就是ajax发请求、json回传、javascript渲染。这跟普通后台管理系统有个明显区别HIS系统的页面状态非常依赖上下文。同一个页面在不同环节下的行为不一样比如收费页面在门诊和住院场景下的计费逻辑就不同。源码包里的页面拆得越细越能看出业务边界。这也是我建议你先从模块地图入手看代码的原因不先理清业务直接看js会一头雾水。2.2 为什么这套前端坚持用ajaxjsonjavascript这套源码没有用现代前端框架选型逻辑符合老牌HIS的常见做法。医院内网环境复杂很多终端是老机器、老浏览器兼容性优先。javascript原生ajax也就是XMLHttpRequest对象在IE8时代就能跑不需要额外构建步骤。改一个js文件刷新页面就能生效这对医院这种怕折腾的生产环境来说太重要了。json作为数据交换格式在这套系统里的角色很纯粹服务器返回结构化数据前端解析后动态拼装DOM。相比XMLjson更轻量解析性能更好javascript原生支持不需要额外的解析库。源码包里能看到大量这样的交互模式页面加载时发一个ajax请求后端返回一层患者信息json前端按字段填充到表格或表单里。这种架构的优点是边界清晰前端只负责展示和交互业务逻辑留在后端。缺点是前端代码重复度高每个页面都要写一遍请求逻辑。这恰恰是初学者能学到东西的地方看看老程序员是怎么用公共函数收敛重复逻辑的比自己从零琢磨效率高得多。2.3 说明文档里真正值钱的内容压缩包里那份说明文档不是摆设。医院项目的说明文档跟互联网项目完全是两个风格它不会教你写代码而是告诉你系统怎么部署、数据库怎么初始化、有哪些账号可以登录。文档里最值得看的三块内容数据库初始化脚本的说明、部署路径的约定、测试账号清单。数据库初始化脚本是关键。HIS系统通常自带建库脚本和基础数据比如科室表、员工表、药品字典。没有这些基础数据系统启动后登录账号都没有。说明文档会写明这些脚本的执行顺序千万不能乱。顺序错了外键约束直接导致建表失败。部署路径的约定也很重要。老系统的静态资源引用方式多半是相对路径部署的上下文根必须跟代码里写的一致。文档里如果有“部署到webapps/xxx”这类描述照做就对了。测试账号这块一般会列出医生站、护士站、收费员等角色的账号和密码方便你登录不同角色看不同界面。3. 把代码包跑起来环境搭建与登录流程复现3.1 解压与梳理目录先分清源码和部署包拿到rar文件第一步不是找代码编辑器打开而是解压后先看整体结构。我一般的做法是解压后先列目录树确认哪些是源码目录、哪些是部署目录、哪些是文档。HIS系统的rar包通常混着两种东西一种是开发态的源码带页面文件和js一种是部署态的war包或者整个web目录。这两者的使用方式完全不同。bash进入解压目录后先看两层结构cd HIS系统源代码及说明 ls -la find . -maxdepth 2 -type d | sort这段命令的目的是快速摸清包内结构不要一上来就点开某个js文件看。源码目录的特征是包含WEB-INF、js、css、html或jsp这类文件夹部署态的特征是直接就是可运行的web根目录。区分清楚之后你要复现的是部署态那一套源码目录留给后期读代码用。3.2 准备运行环境数据库、JDK、Web容器三件套HIS系统跑起来需要三件套数据库、JDK和Web容器。数据库多为MySQL或Oracle这套代码从json交互来看后端大概率是Java体系的Servlet配合MySQL。JDK版本建议按说明文档里写的来常见的是JDK 7或8。Web容器用Tomcat版本别太新Tomcat 8.5这类兼容性较稳。bash以MySQL 5.7为例建库并导入初始化脚本mysql -uroot -p sql/init_db.sql mysql -uroot -p sql/init_data.sql这两条命令执行的是建库和灌基础数据。init_db.sql负责创建数据库和业务表init_data.sql负责写入科室、用户、药品字典等基础数据。执行时必须保证init_db.sql先跑完再跑init_data.sql否则表不存在第二条命令必然报错。导入完成后用select语句抽查用户表确认测试账号是否存在。3.3 修改配置与启动Tomcat环境就绪后需要改配置文件把数据库连接信息对上。老HIS系统的数据库连接配置一般写在properties文件或xml文件里。重点改三处数据库地址、用户名、密码。如果Tomcat端口被占用还需要改server.xml或直接换一个端口。javadb.properties 常见配置项jdbc.drivercom.mysql.jdbc.Driver jdbc.urljdbc:mysql://127.0.0.1:3306/his_db?characterEncodingutf-8 jdbc.usernameroot jdbc.password123456这段配置是最常见的数据库连接写法。characterEncodingutf-8这行别删HIS系统中文乱串的根源常常就是这里漏了编码参数。改完后把整个web目录拷到Tomcat的webapps下命名一个访问路径然后启动Tomcat。启动后日志里没有报错就能在浏览器访问登录页了。4. 前端交互的三个关键动作ajax请求、json解析、界面渲染4.1 登录验证的数据流从账号输入到session写入这套HIS系统的登录页是最能体现ajax、json、javascript三者配合的样本。登录表单提交时页面不刷新而是通过ajax把用户名和密码送到后端验证接口后端返回json前端根据返回结果决定跳转或提示。整个过程分三步走。javascript // 登录表单的ajax提交逻辑 var loginForm document.getElementById(loginForm); loginForm.onsubmit function(event) { event.preventDefault(); // 阻止表单默认刷新行为 var username document.getElementById(username).value; var password document.getElementById(password).value; var xhr new XMLHttpRequest(); xhr.open(POST, login.do, true); xhr.setRequestHeader(Content-Type, application/x-www-form-urlencoded); xhr.onreadystatechange function() { if (xhr.readyState 4 xhr.status 200) { var res JSON.parse(xhr.responseText); if (res.success true) { window.location.href main.html; } else { alert(res.message); // 登录失败只弹提示不刷新页面 } } }; xhr.send(username encodeURIComponent(username) password encodeURIComponent(password)); };这段代码的关键细节有两个。第一表单的submit事件被拦截了阻止了页面整体刷新这是ajax交互的起点。第二后端返回的json结构success字段是布尔值message字段是提示信息。如果登录成功前端不关心用户信息直接跳转主页用户信息已经由后端写进了session。4.2 数据字典与下拉框联动json数组的动态渲染登录进去后第一个高频交互就是下拉框数据加载。比如挂号页面的科室选择、医生选择都是从后端接口拉json数组然后前端用javascript动态生成option。HIS系统里这类交互非常多涉及的数据量不大用json数组完全够用。javascript // 拉取科室列表并渲染到下拉框 function loadDepartments() { var xhr new XMLHttpRequest(); xhr.open(GET, department/list.do, true); xhr.onreadystatechange function() { if (xhr.readyState 4 xhr.status 200) { var data JSON.parse(xhr.responseText); var select document.getElementById(deptSelect); select.innerHTML ; // 清空已有选项避免重复添加 for (var i 0; i data.length; i) { var opt document.createElement(option); opt.value data[i].deptId; opt.text data[i].deptName; select.appendChild(opt); } if (data.length 0) { var event document.createEvent(HTMLEvents); event.initEvent(change, true, false); select.dispatchEvent(event); // 触发联动加载下级数据 } } }; xhr.send(); }这段代码里有一个容易被忽略的点就是最后手动触发了change事件。科室下拉框变化时通常要联动加载该科室下面的医生列表。如果只是填充了option而不触发change医生列表就不会更新。老手写的代码里经常有这种细节新手抄代码时容易把最后那几行删掉导致联动失效。4.3 请求参数与返回格式设计前后端约定要看懂读懂这套系统的关键在于看懂接口的入参和出参约定。HIS系统里约定俗成的json返回格式一般包含三层信息状态、消息、数据体。这套源码包里的封装模式也类似。javascript // 典型的后端json返回格式 { success: true, message: 操作成功, data: { patientId: P001, name: 张三, age: 45, deptName: 心内科 } }success字段用于前端判断业务请求成功还是失败message字段提供人可读的信息data字段放业务数据。前端拿到这个结构后先看success再看data去渲染页面。理解这个约定后你调试接口时就能快速定位问题是请求没到后端还是后端返回了success:false但前端没处理message。这套源码包里的每一个页面都在跟这个结构打交道。5. 复现过程中的几个坑从编码到会话的常见问题5.1 走坑一登录成功后页面无法跳转现象输入正确的测试账号前端alert弹提示信息说明登录接口通了success字段也是true但页面始终停在登录页。更奇怪的是手动在浏览器地址栏输入main.html可以正常打开一刷新就弹回登录页。原因后端判断用户是否已登录看的是session里有没有对应的登录标记。前端虽然收到了success:true但后端可能没有把用户信息写入session或者写入的key跟拦截器检查的key不一致。还有一种可能就是后端的session没有持久的保存每次请求sessionId都变了。解决抓一下登录接口的响应头看Set-Cookie里有没有JSESSIONID。如果有再检查前端跳转后的页面请求是否携带了这个Cookie。一般是代码里用了不同的session key或者拦截器配置把登录请求也拦截了。我在实际排查时会先把后端的登录成功代码打日志确认session.setAttribute有没有执行到。5.2 走坑二中文全部显示成问号现象页面加载出来了科室名称、患者姓名、诊断描述凡是中文的地方全是乱码或者问号。浏览器控制台里看ajax返回的json中文也是\u格式的乱码序列。原因编码链路的三个环节至少有一个断了。数据库连接url里没加characterEncodingutf-8后端接口返回json时没有设置Content-Type的charset前端页面本身没有声明UTF-8。这三个环节任何一个不对中文就会在路上变形。解决先改数据库连接url再检查后端接口的响应头再确认页面meta标签里的charset设置。我习惯一次性把三处都对齐成UTF-8。改完后清掉浏览器缓存再试因为旧页面缓存的编码声明可能还在干扰。5.3 走坑三页面能开但是样式全丢现象登录页能显示但布局混乱css的排版效果完全没有图片图标全是裂图页面像是纯HTML裸奔状态。原因静态资源引用路径不对。HIS系统的页面里引用css和js时用的通常是相对路径比如css/style.css。当页面在多级目录下时相对路径解析会跟着浏览器地址栏的路径变化。如果你部署时改了访问根目录原来的一级相对路径就全偏了。解决打开浏览器开发者工具看Network面板找到css请求失败的URL对照源码目录里的实际路径确认差在哪一段。最快的修复方式是把页面的静态资源引用改为以斜杠开头的绝对路径比如/ his/css/style.css。但要同步改所有页面工作量大。如果只在本地复现也可以直接按文档要求的部署路径来不改代码。5.4 走坑四数据列表翻页或者查询特别慢现象患者列表、收费明细这些页面第一次打开很慢点下一页也要转圈很久。数据量其实只有几千条看后端日志SQL执行也不慢。原因前端一次性加载了全部数据渲染时又动态创建了大量DOM节点浏览器执行时间全耗在拼接和插入上了。HIS系统的列表页如果数据量大正确的做法是分页加载但老代码里常见一次性拉全量的写法。另一种可能是ajax是同步请求阻塞了页面渲染。解决如果源码里列表是用for循环塞了所有行先改成limit分页每次只加载当前页数据。同步请求改成异步也就是XMLHttpRequest的第三个参数从false改成true。如果改动成本太高至少在前端做延迟渲染先显示前100条滚动到底部再加载下一批。6. 一个小改造把ajax调用统一收口顺带验证整套系统读完前面这些你应该已经把这套HIS系统跑起来了。最后一个阶段我建议你做一个很小的改造把散落在各页面的重复ajax逻辑收拢成一个公共方法。这个动作既练手又能帮你验证对整套系统请求流程的理解是否到位。改造思路很直接。观察源码里每个页面写ajax的代码几乎都是同样的模式创建XMLHttpRequest、设置回调、判断readyState和status、解析json。把这个模式抽成一个js文件里的公共函数参数化请求地址、请求参数、回调函数。javascript // ajax公共方法封装 function request(url, params, callback, method) { var xhr new XMLHttpRequest(); var httpMethod method || GET; var queryString ; if (params) { var arr []; for (var key in params) { arr.push(key encodeURIComponent(params[key])); } queryString arr.join(); } if (httpMethod GET queryString) { url url ? queryString; } xhr.open(httpMethod, url, true); if (httpMethod POST) { xhr.setRequestHeader(Content-Type, application/x-www-form-urlencoded); } xhr.onreadystatechange function() { if (xhr.readyState 4) { if (xhr.status 200) { var res JSON.parse(xhr.responseText); if (res.success true callback) { callback(res.data); } else { alert(res.message || 请求失败); } } else if (xhr.status 302) { window.location.href login.html; // 会话过期跳登录 } } }; xhr.send(httpMethod POST ? queryString : null); }封装完这个公共方法后把登录页的ajax调用改成新写法做验证。你会发现改动后在浏览器里重新走一遍登录、选科室、查患者三个操作流程依然顺畅。改完这个你也顺带完成了对整套系统的第一轮健康检查能跑通说明环境、数据、前后端交互链路全是对的状态。从那以后我每次拿到老项目的源码包都会先做一次统一收口改造来验证对系统的理解再决定接下来是二次开发还是只做研究。这套思路对HIS系统适用对其他老项目同样管用希望帮到你。本文还有配套的精品资源点击获取