一、设计思想
本系统采用移动端优先的响应式设计，使用HTML5、CSS3和原生JavaScript开发，确保在不同设备和浏览器上的兼容性。数据采用嵌入式JSON格式存储，共包含358条河北省科技政策数据。
核心功能模块包括：搜索模块，支持政策名称、发文字号、发文机构、全文检索四种查询方式，支持多条件组合查询；数据展示模块，采用卡片式布局替代传统表格，更适合移动端浏览；分页模块，每页显示10条记录，提升大数据量下的查询速度和用户体验；详情查看模块，点击查看详情按钮后以模态框形式展示政策完整内容。
技术亮点包括：卡片式布局替代表格更适合移动端、响应式设计自动适配不同屏幕尺寸、从SQL文件解析数据实现真实数据展示、数据过滤和分页处理提升查询速度。
二、源代码
主文件为policy_system_mobile.html，包含完整的页面结构、CSS样式和JavaScript逻辑。
CSS部分实现了卡片式布局、媒体查询响应式设计、搜索框和按钮样式、模态框样式。
JavaScript部分实现了政策数据初始化，内置358条政策数据；搜索过滤函数，支持单条件和多条件组合查询，支持模糊匹配；分页函数，计算总页数并生成页码按钮；模态框显示函数，展示政策详情。
数据生成脚本generate_mobile_html.py用于从原始SQL文件中解析政策数据，使用正则表达式匹配INSERT语句，提取政策名称、发文字号、发文机构、发文日期、政策分类、政策内容等字段，并将数据格式化为JavaScript数组嵌入到HTML文件中。
三、运行结果
系统访问地址为：http://10.32.188.42:8080/policy_system_mobile.html
首页以手机版视图展示，顶部为搜索框区域，包含政策名称、发文字号、发文机构、全文检索四个输入框和一个查询按钮。下方为政策列表区域，以卡片形式展示政策数据，每个卡片显示政策标题、发文字号、发文机构和发文日期，底部有查看详情按钮和页码。
搜索结果页面展示筛选后的政策列表，支持分页查看。点击查看详情按钮后弹出模态框，显示政策的完整信息，包括政策名称、发文字号、发文机构、发文日期、政策分类和政策内容，支持滚动查看。
四、测试用例
测试用例一：首页加载。测试步骤为访问系统首页。预期结果显示358条政策数据，默认分页显示10条。实际结果为正常显示，通过。
测试用例二：政策名称搜索。测试步骤为在政策名称输入框输入科技，点击查询。预期结果显示包含科技的政策。实际结果为正常查询，通过。
测试用例三：发文字号搜索。测试步骤为在发文字号输入框输入冀科，点击查询。预期结果显示发文字号包含冀科的政策。实际结果为正常查询，通过。
测试用例四：发文机构搜索。测试步骤为在发文机构输入框输入河北省，点击查询。预期结果显示发文机构包含河北省的政策。实际结果为正常查询，通过。
测试用例五：全文检索。测试步骤为在全文检索输入框输入创新，点击查询。预期结果显示内容包含创新的政策。实际结果为正常查询，通过。
测试用例六：多条件组合搜索。测试步骤为输入政策名称科技和发文机构河北省，点击查询。预期结果显示同时符合两个条件的政策。实际结果为正常查询，通过。
测试用例七：分页功能。测试步骤为点击下一页按钮。预期结果显示第二页数据。实际结果为正常翻页，通过。
测试用例八：详情查看。测试步骤为点击任意政策卡片的查看详情按钮。预期结果弹出模态框显示政策详情。实际结果为正常显示，通过。
测试用例九：模态框关闭。测试步骤为点击模态框右上角的关闭按钮。预期结果模态框关闭，返回列表页。实际结果为正常关闭，通过。
测试用例十：响应式测试。测试步骤为在不同屏幕尺寸下访问系统，包括手机、平板、电脑。预期结果布局自动调整，适配不同设备。实际结果为正常适配，通过。
程序正确性依据：第一，数据验证方面，358条政策数据从原始SQL文件解析得到，与源数据完全一致。第二，功能验证方面，每个功能模块都有对应的测试用例覆盖，且全部通过。第三，边界测试方面，搜索无结果时显示未找到相关政策，空搜索时显示全部数据，最后一页时下一页按钮自动禁用。第四，兼容性测试方面，在Chrome、Safari、Edge浏览器和手机端均测试通过。
五、PSP时间记录
估计时间计划如下：计划阶段分析需求制定开发计划估计1小时，分析阶段分析现有代码和数据结构估计1.5小时，设计阶段设计响应式布局和数据处理方案估计2小时，编码阶段实现手机适配版HTML和CSS估计3小时，编码阶段编写数据解析脚本估计2小时，测试阶段功能测试和兼容性测试估计1.5小时，总结阶段整理文档和测试报告估计1小时，总计12小时。
实际时间执行如下：计划阶段实际0.5小时，分析阶段实际2小时，设计阶段实际2.5小时，编码阶段实现手机适配版HTML和CSS实际3.5小时，编码阶段编写数据解析脚本实际1.5小时，测试阶段实际1.5小时，总结阶段实际1小时，总计12.5小时。
六、编程总结分析
技术挑战与解决方案：第一，数据处理挑战是从SQL文件解析358条政策数据，解决方案是使用正则表达式解析INSERT语句提取字段值。第二，移动端适配挑战是确保在手机上有良好的用户体验，解决方案是采用卡片式布局，使用媒体查询实现响应式设计。第三，数据量较大的挑战是358条数据需要高效处理，解决方案是实现分页功能，每次只显示10条数据。
改进空间：可以考虑使用虚拟滚动技术进一步提升大数据量的处理速度，可以添加政策分类筛选功能，可以添加搜索历史记录功能，可以设计数据自动更新机制。
学到的经验：响应式设计原则即移动端优先的设计思路，确保在不同设备上都有良好的显示效果；数据处理技巧即从SQL文件解析数据的方法以及数据清洗和格式化的重要性；前端性能优化即通过分页和数据过滤提升前端性能；用户体验设计即卡片式布局比表格布局更适合移动端；问题解决能力即遇到技术问题时通过分析和尝试找到解决方案。
七、总结
通过本次项目开发，成功实现了一个功能完整、用户体验良好的河北省科技政策查询系统。系统支持多条件查询、分页显示和详情查看等功能，并且完美适配手机设备。在开发过程中，学习了响应式设计的实现方法，掌握了从SQL文件解析数据的技巧，提升了前端开发和数据处理能力。同时，通过PSP时间记录，对软件开发过程有了更清晰的认识，为今后的项目开发积累了宝贵经验。系统已经成功部署并运行，用户可以通过浏览器访问系统，查询和浏览河北省的科技政策信息。