简介这是一份基于ASPAccessEChartsIIS搭建的数据可视化应用完整源码压缩包专为Web开发入门者、课程设计学习者以及需要快速实现动态图表展示的程序员准备。压缩包共7个文件大小仅1.31MB包含负责业务逻辑的ASP脚本、存取数据的Access数据库及其锁文件、ECharts图表库和用于本地启动服务的exe工具目录结构简单明了既能直接部署体验也适合逐文件剖析学习。目前已有789人学习/下载。通过这份资源可以看清一条完整链路Access存储数据、ASP读取并处理数据、ECharts在浏览器端渲染交互式图表、IIS负责托管整个应用尤其适合用来理解传统Web开发与现代可视化库的融合方式。资源中还涵盖了数据库连接、图表初始化、IIS部署等关键代码细节可帮助快速搭建出柱状图、折线图、饼图等常见数据展示页面是完成小型项目或毕业设计的实用参考。1. 一个被嫌弃的老技术栈为什么我还在用它搭数据看板你可能会觉得“aspaccessechartsiis”这个组合是上考古课才会出现的名词。实际上直到现在我还在用这套技术栈给某公司的设备维保部门搭月度报表看板。原因很直白部署成本极低一台 Windows 服务器就能全跑起来Access 单文件数据库对中小规模的数据量完全撑得住ECharts 把图表观感拉回现代水准前端不会像上世纪产物。它适合并发低、单表数据量在几十万行以内、日常维护由非专业 IT 人员负责的内部系统。如果你正纠结怎么把这类遗留系统救活这篇就是按我自己的落地路径写的踩过的坑都标出来了。2. 先让 IIS 把 ASP 跑起来环境安装与站点骨架配置ASP 不装上等于后面全白搭。IIS 默认不启用 ASP 功能很多人在这第一步就翻车装完 IIS 后放了一个 .asp 文件进去浏览器里看到的是源码或直接 404。下面从零到一过一遍照着做就能把运行环境立住。2.1 开启 IIS 与 ASP 功能的最小操作我一般建议直接用 PowerShell 命令装速度快而且能在不同机器上复用同一段脚本。以 Windows Server 系的服务器为例管理员身份打开 PowerShell 执行Install-WindowsFeature Web-Server -IncludeManagementTools Install-WindowsFeature Web-ASP第一条命令把 IIS 装好第二条单独把 ASP 模块补上。Web-ASP是 ASP 这个应用程序开发功能的名字注意区分Web-Asp-Net那属于 ASP.NET跟经典 ASP 完全是两码事。等命令跑完可以顺手看一眼服务状态Get-Service W3SVC如果是纯客户端 Windows 系统做开发机就得走“控制面板 - 启用或关闭 Windows 功能 - Internet Information Services - 万维网服务 - 应用程序开发功能”把 ASP 勾上。装完这一步IIS 管理器里才会出现“ASP”这个功能图标没有它你的 .asp 文件就只会被当成纯文本下载。2.2 创建站点和应用池时的几个关键选项站点骨架我直接命令行做避免在管理器里点错。下面这段创建了一个名叫 report_site 的应用池和站点物理路径指向D:\web\reportNew-WebAppPool -Name report_site -ManagedRuntimeVersion New-Website -Name report_site -PhysicalPath D:\web\report -ApplicationPool report_site -Port 8088ManagedRuntimeVersion给空字符串是因为经典 ASP 不走 .NET 托管管道不需要指定 CLR 版本。端口我习惯用 8088 这类非 80 端口省得跟其他站点抢监听。真正关键的是接下来两处坑第一个坑是应用池的“启用 32 位应用程序”。如果你用的是 Jet 驱动连 Access而系统又是 64 位的默认 64 位进程加载不了 32 位驱动报错会非常诡异。应对方法是把 32 位开关打开Set-ItemProperty IIS:\AppPools\report_site -Name enable32BitAppOnWin64 -Value $true第二个坑是“经典”与“集成”托管管道模式。经典 ASP 是两个模式都能跑但我遇到过一次在集成模式下 ASP 返回 500 的情况切换成经典模式就恢复了。稳妥起见直接切到经典模式Set-ItemProperty IIS:\AppPools\report_site -Name managedPipelineMode -Value Classic这两个参数在 IIS 管理器里同样能找到应用池的高级设置里“启用 32 位应用程序”和“托管管道模式”。如果后续连接 Access 报找不到 Provider回头检查这里准没错——这是这个技术栈里最常被忽略的元凶。2.3 为什么 Access 数据库文件不能放在可直接下载的目录很多人把data.mdb放在站点根目录下这是大忌。IIS 默认允许静态文件直接下载换而言之任何访问者只要猜对文件名就能把整个数据库拖回家。正确的做法是把 Access 文件放在站点物理路径之外的目录比如D:\data\report.accdb站点路径是D:\web\report两者不重叠。但 ASP 要访问站外文件还得在站点下建一个虚拟目录做映射否则Server.MapPath指不过去。创建虚拟目录的命令如下New-WebVirtualDirectory -Site report_site -Name db -PhysicalPath D:\data然后连接串里用Server.MapPath(/db/report.accdb)来定位。有些场景下文件必须放站点目录内那就退而求其次用请求筛选把数据库扩展名封死configuration system.webServer security requestFiltering fileExtensions add fileExtension.mdb allowedfalse / add fileExtension.accdb allowedfalse / /fileExtensions /requestFiltering /security /system.webServer /configuration这段 XML 放到站点根目录的web.config里IIS 会直接拒绝 .mdb 和 .accdb 扩展名的请求。两种方案我优先推荐站外目录因为哪怕扩展名封了备份文件.bak、临时副本之类总有遗漏的可能直接放在站点外面最省心。2.4 用最小页面验证 ASP 能真正执行环境装完放一个最简单的探针页确认 ASP 真的在跑而不是 IIS 把你文件当静态内容吐给你。新建test.asp保存成 UTF-8 编码% LanguageVBScript CodePage65001 % % Response.Write ASP Run OK, time Now() %浏览器访问http://服务器IP:8088/test.asp看到ASP Run OK带当前时间就说明 ASP 模块已经被 IIS 接管了。注意编码文件保存编码和CodePage65001必须一致否则后面中文会乱码这一步就开始用 UTF-8 能少踩很多坑。探针页再深一层把父路径支持也验证掉。ASP 里经常会写../这样的相对路径IIS 出于安全默认禁止不提前放开后面全是 500Set-WebConfigurationProperty -Filter system.webServer/asp -Name enableParentPaths -Value $true -PSPath IIS:\Sites\report_site到这里 IIS 这边的骨架就稳了接下来才轮到 Access 的数据链路。我给团队培训和写交接文档时通常把上面这些命令原样丢给运维照着执行基本不会出岔子。3. 打通数据链路ASP 连 Access 的连接串与查询封装ASP 本身只是个脚本宿主真正干活的是 ADO 这个数据访问组件。把 ADO 跟 Access 之间的连接串写对数据链路就通了一半。这一章把连接串的选择、通用查询函数的封装和调试方法一次讲完。3.1 Access 连接串JET 驱动与 ACE 驱动怎么选连接 Access 常见的是两类 OLEDB 驱动Jet OLEDB 和 ACE OLEDB。JET 4.0 对应老式的 .mdb 文件ACE 对应新式的 .accdb 文件ACE 也能读 .mdb。选型的判断标准有三条项目Jet OLEDB 4.0ACE OLEDB 12.0 / 16.0支持的库格式仅 .mdb.mdb 和 .accdb 都支持系统自带情况老旧 Windows 自带需要手动安装 ACE 驱动64 位支持原生不支持有 64 位版本适合场景遗留系统维护、无外网环境新项目、.accdb 库我这边的新项目基本固定用 ACE 驱动连接代码长这样% Dim conn Set conn Server.CreateObject(ADODB.Connection) conn.Open ProviderMicrosoft.ACE.OLEDB.12.0;Data Source Server.MapPath(/db/report.accdb) ;User IDAdmin;Password; %Data Source后面接的是 Access 文件的完整物理路径Server.MapPath(/db/report.accdb)的作用是把站点的虚拟路径翻译成服务器上的物理路径这样代码里不用写死D:\data\report.accdb换服务器也不用改代码。User IDAdmin;Password是 Access 的默认安全模型一般保持默认就行除非你给数据库另外设过密码。驱动版本我踩过一次坑某台新服务器装的是 ACE 16.0但代码里写死 12.0连上去就报“未找到提供程序”。后来把连接串里的Microsoft.ACE.OLEDB.12.0改成Microsoft.ACE.OLEDB.16.0才通。如果你的机器上不确定装的是哪一版可以在注册表编辑器里查HKEY_CLASSES_ROOT\下以Microsoft.ACE.OLEDB.开头的项看到哪个版本就写哪个版本这是最稳的判断方式。3.2 封装一个通用的查询函数每页都写一遍创建连接、打开、执行、关闭的套路代码很快就没法看了。我把这套逻辑抽成一个common.asp项目里所有页面引入它就能直接用% Dim conn Sub OpenDB() Set conn Server.CreateObject(ADODB.Connection) conn.Open ProviderMicrosoft.ACE.OLEDB.12.0;Data Source Server.MapPath(/db/report.accdb) End Sub Function Query(sql) Dim rs Set rs Server.CreateObject(ADODB.Recordset) rs.Open sql, conn, 1, 3 Set Query rs End Function Sub CloseDB() Set conn Nothing End Sub Function EscapeJSON(str) If IsNull(str) Then EscapeJSON Else EscapeJSON Replace(str, \, \\) EscapeJSON Replace(EscapeJSON, , \) EscapeJSON Replace(EscapeJSON, vbCrLf, \n) End If End Function %OpenDB负责把连接打开Query接收一条 SQL 返回 Recordset 对象rs.Open里的第二个参数是连接对象第三个参数1表示游标类型为向前只读第四个参数3表示只读锁定这两个取值最适合报表查询保证查询不被其他写操作阻塞。EscapeJSON是留着给后面章节做 JSON 输出用的它把字符串里的反斜杠、双引号和换行转成 JSON 合法形式防止前端JSON.parse时爆掉。实际使用长这样!--#include filecommon.asp-- % OpenDB Set rs Query(SELECT dept, COUNT(*) AS cnt FROM t_record GROUP BY dept) Do While Not rs.EOF Response.Write rs(dept) : rs(cnt) br rs.MoveNext Loop CloseDB %!--#include filecommon.asp--是 ASP 的静态包含指令它在页面被解释前就把公共代码合并进来所以OpenDB、Query这些函数和conn变量都能直接用。这里有个细节OpenDB后必须成对地调用CloseDB哪怕页面中途报错也要保证连接释放。Access 是文件型数据库连接不关会导致文件被锁后面其他页面写入时会报“数据库被锁定”这个是高频问题下一章专门讲。3.3 数据链路调试三板斧开发期数据查不出来别急着翻代码按下面三个顺序排查效率最高。第一步把 SQL 原文输出来确认是不是 SQL 写错Response.Write DEBUG SQL: sql hr Response.EndResponse.End会立刻终止页面后续执行相当于调试断点SQL 文本直接显示在浏览器里拿它去 Access 查询设计器里跑一遍语法问题当场能定位。排查完删掉这两行即可。第二步捕获 ADO 的错误信息。ADO 默认错误会被吞掉只显示空白页面必须主动打开错误捕获On Error Resume Next conn.Open ... If Err.Number 0 Then Response.Write 连接失败: Err.Description Response.End End IfOn Error Resume Next让脚本出错后不中断Err.Description里是驱动返回的原始错误描述比如Provider cannot be found、Cannot open database。这比对着空白页面猜原因靠谱一百倍。第三步确认 Access 文件权限。ASP 默认以应用池身份访问文件系统数据库文件所在目录必须给这个账户读写权限否则报“无法更新。数据库或对象为只读。”。右键目录属性 - 安全 - 添加应用池账户名字一般是IIS APPPOOL\report_site勾上完全控制。这一步很多人漏掉尤其是在把数据库放到D:\data这种非站点目录之后。4. 接上 ECharts让 ASP 按接口吐 JSON图表前端渲染ECharts 跟 ASP 的整合方式有两种一种是在 ASP 页面里直接输出 HTML 标签和初始化的 JavaScript另一种是 ASP 只提供数据接口前端页面独立渲染。我强烈建议走第二种也就是接口化的方式。把数据逻辑和展示逻辑分开接口用浏览器直接访问就能看到数据图表出问题能立刻知道是数据错还是渲染错。4.1 为什么不让 ASP 直接吐 HTML 图表而是吐 JSONASP 直接吐图表 HTML 的做法初期看着省事后面维护全是泪。数据格式一变要改 ASP 页面图表配置一变又要改 ASP 页面前端想要加个联动筛选ASP 页面里拼 JavaScript 字符串拼到怀疑人生。接口化之后ASP 只负责输出 JSON 数据图表的一切变化都发生在纯前端文件里改配置不用碰服务器代码。接口化的另一个好处是可调试性。浏览器里直接访问show_data.asp看到的是结构清晰的 JSON 文本拿它跟前端渲染结果对照问题边界立刻清晰[{name:A车间,value:238},{name:B车间,value:185}]如果是前端渲染错误数据接口没问题专注调 ECharts如果接口返回就是错的那问题在 SQL 或数据转换不用碰前端代码。这种分层排查在实战中能省下很多时间。4.2 把 Recordset 转成 JSON 的 VBScript 代码核心逻辑是遍历 Recordset把每一行记录组装成 JSON 对象。下面是show_data.asp的完整实现!--#include filecommon.asp-- % Response.ContentType application/json Response.Charset utf-8 OpenDB Set rs Query(SELECT dept, COUNT(*) AS cnt FROM t_record GROUP BY dept) Dim firstRow firstRow True Response.Write [ Do While Not rs.EOF If Not firstRow Then Response.Write , Response.Write {name: EscapeJSON(rs(dept)) ,value: rs(cnt) } firstRow False rs.MoveNext Loop Response.Write ] CloseDB %Response.ContentType application/json和Response.Charset utf-8这两行决定了浏览器把返回内容当 JSON 解析而不是当 HTML 文本。JSON 字符串里双引号必须转义VBScript 里用两个连续的双引号表示一个双引号字符所以name拼出来的实际内容是name。如果不用连续双引号拼出来的字符串结构就是坏的前端解析必然报错。EscapeJSON函数在这里处理的是 dept 字段的中文内容和可能出现的特殊字符车间名里如果带引号或反斜杠不转义直接拼进去JSON 结构就废了。数值字段cnt不需要转义直接拼进去。MoveNext推动游标向下移动不能漏否则死循环。4.3 前端用 ECharts 拉取接口并渲染前端页面我习惯用原生XMLHttpRequest拉数据不引入 jQuery减少依赖。页面代码拆成三块HTML 容器、ECharts 初始化、数据加载!DOCTYPE html html head meta charsetutf-8 title车间维保看板/title script srcecharts.min.js/script /head body div idchart stylewidth:800px;height:400px;/div script var chart echarts.init(document.getElementById(chart)); var xhr new XMLHttpRequest(); xhr.open(GET, show_data.asp, true); xhr.onreadystatechange function () { if (xhr.readyState 4 xhr.status 200) { var data JSON.parse(xhr.responseText); var names []; var values []; for (var i 0; i data.length; i) { names.push(data[i].name); values.push(data[i].value); } chart.setOption({ title: { text: 各车间维保次数 }, tooltip: {}, xAxis: { data: names }, yAxis: {}, series: [{ type: bar, data: values }] }); } }; xhr.send(); /script /body /htmlecharts.init必须在容器元素已经出现在页面里之后调用所以这行代码放在 div 后面顺序反了会拿到空容器。JSON.parse把接口字符串转成数组再拆成 x 轴数据和 y 轴数据两个数组。图表类型由series里的type字段控制改成line就是折线图改成pie就是饼图数据不用动。这就是接口化的好处图表形态随便切ASP 那边完全不知道。把echarts.min.js放在同目录下是本地部署的做法不依赖外网加载内网环境尤其合适。版本选择上不用追新能支持bar、line、pie这些基础图表的版本足够内部看板用。5. 避坑清单这个组合里最常翻车的五个现场把这套技术栈在真实项目中趟过的坑集中写出来每一条都是可以直接照方抓药的现场记录。网上能搜到的是标准答案下面这些是我实际撞墙撞出来的血泪经验。5.1 数据库被锁Microsoft JET Database Engine error 80004005现象页面间歇性报80004005错误描述类似Operation must use an updatable query或Could not use file。多发在多用户同时访问、且页面里有写入操作的时候。原因Access 对并发写入支持差连接没有及时关闭导致文件锁或者查询产生了只读冲突。最常见的是写代码时OpenDB之后忘了CloseDB连接挂在那儿不放第二个请求再写就被锁死。解决所有打开连接的页面必须保证释放。我在common.asp的CloseDB里加了一步容错代码不管之前执行到哪页面结束前强制关闭Sub CloseDB() If IsObject(conn) Then conn.Close Set conn Nothing End If End Sub页面底部无条件调用CloseDB出错分支也要调用。如果并发仍然高把数据库拆分读操作走一个库写操作走另一个库Access 能扛住的量就到此为止这是它的物理上限。5.2 中文乱码输出 JSON 后前端全是问号现象浏览器直接访问接口中文全是问号或者乱码。前端图表里 X 轴标签显示成???。原因三层编码不一致。ASP 文件保存成 ANSI 编码但页面声明 UTF-8或者页面没写Response.Charset或者CodePage设了但文件本身没按 UTF-8 保存。解决把三处统一。第一处ASP 文件用编辑器另存为 UTF-8 带 BOM 格式第二处页面头部写% LanguageVBScript CodePage65001 %第三处输出 JSON 前写Response.Charset utf-8。三处齐了中文不乱。另外注意HTML 页面本身的meta charsetutf-8也要保留前端这里统一了后端才统一。5.3 64 位 IIS 上找不到 Access 驱动现象连接 Access 时报Provider cannot be found. It may not be properly installed.或者未找到提供程序。代码在 32 位开发机上是好的部署到 64 位服务器就挂。原因默认 64 位应用池进程加载不了 32 位 OLEDB 驱动。Jet 驱动只有 32 位版本ACE 驱动虽然两个版本都有很多服务器只装了其中一个位宽的版本。解决两个方向二选一。方向一应用池启用 32 位应用程序然后把 32 位 ACE 驱动装上这也是最兼容老代码的方案。方向二保持 64 位应用池装 64 位 ACE 驱动并把连接串里的驱动名改成对应版本号。我推荐先查驱动装没装再改应用池位宽两步顺序别反。5.4 JSON 拼接时的引号与日期格式坑现象接口返回在浏览器里看着正常前端JSON.parse(xhr.responseText)直接抛异常。仔细看多了一个双引号或者换行符。原因VBScript 拼字符串时没有对特殊字符做转义。比如车间名称里带引号或者日期字段直接rs(create_time)拼进去产生了2024/6/1这种带斜杠的格式斜杠本身没事但时间字段里如果有换行JSON 就断了。解决所有字符串字段拼 JSON 前都必须过转义函数。日期字段单独处理统一格式化Dim dateStr If IsNull(rs(create_time)) Then dateStr Else dateStr Year(rs(create_time)) - Right(0 Month(rs(create_time)), 2) - Right(0 Day(rs(create_time)), 2) End IfRight(0 Month(...), 2)这个写法是 VBScript 补零的惯用技巧月份是 6 变成06月份是 12 还是12。日期统一成yyyy-mm-dd格式前端new Date()解析不会出歧义。5.5 部署后访问接口报 500 / 404现象本机测试正常部署到服务器后访问.asp接口直接 500有的机器直接 404。iis 日志里能看到500 0 0这种错误码。原因三类。500通常是 ASP 功能没装齐全或者父路径未启用404通常是默认文档没配置或者站点路径不对还有一种是数据库文件路径不存在Server.MapPath指向的目录没建导致连接失败被包装成 500。解决先确认 ASP 功能装了再确认enableParentPaths是True。数据库路径问题直接在浏览器访问接口看错误描述连接失败的错误信息里会包含路径信息。最后检查站点物理路径和虚拟目录是否都指到实际存在的目录。这套组合排查完200 就出来了。6. 把最后一块拼图补上带日期范围的统计接口与验证很多内部看板不只是要一个静态数据还要能按日期范围筛选。给接口加上start和end两个参数就是完整的可交付形态。改造show_data.asp从请求参数里读日期范围拼进 SQL!--#include filecommon.asp-- % Response.ContentType application/json Response.Charset utf-8 Dim startDate, endDate startDate Request(start) endDate Request(end) If Not IsDate(startDate) Then startDate DateAdd(m, -1, Date()) If Not IsDate(endDate) Then endDate Date() Dim sql sql SELECT dept, COUNT(*) AS cnt FROM t_record sql sql WHERE create_time # startDate # AND create_time # endDate # sql sql GROUP BY dept OpenDB Set rs Query(sql) Dim firstRow firstRow True Response.Write [ Do While Not rs.EOF If Not firstRow Then Response.Write , Response.Write {name: EscapeJSON(rs(dept)) ,value: rs(cnt) } firstRow False rs.MoveNext Loop Response.Write ] CloseDB %Request(start)把 URL 参数start取出来IsDate校验参数是不是合法日期不是就回退到默认值这样接口不会因为参数缺失直接报错。Access 的日期条件要用#包起来这是 Jet/ACE 引擎的日期字面量语法跟 SQL Server 不一样。这段 SQL 在 Access 里执行确认过没问题的。前端把日期选择器接上就完成了完整闭环var startInput document.getElementById(start); var endInput document.getElementById(end); function loadData() { var url show_data.asp?start startInput.value end endInput.value; xhr.open(GET, url, true); xhr.send(); } document.getElementById(btnQuery).onclick loadData;最后教一个我自己的验证习惯接口上线前先浏览器直接访问show_data.asp确认 JSON 结构再带参数访问show_data.asp?start2024-06-01end2024-06-30确认日期过滤生效然后才打开前端页面看图表。三步走完任何一层出问题都能立刻判断是哪一段的锅。这套组合我从第一次接项目用到现在最大的感悟是老技术栈不等于不能用关键是把边界搞清楚。Access 撑住几十万行的内部报表没问题ASP 输出 JSON 干净利落ECharts 负责让老板觉得这系统挺现代。我现在拿到这类遗留系统第一件事永远是确认 ASP 功能、驱动位宽、文件权限三件事再谈别的。只要守住连接串、JSON 转义、日期格式这几个关键点这个方向投入的时间完全值得。希望帮到你。本文还有配套的精品资源点击获取