当初第一次试html如何连接数据库，以为在html文件里面写几句代码就能直接连上，本地开个页面刷新一下，数据就能读出来。抱着这个想法折腾了大半天，浏览器控制台一堆红色报错，当时完全摸不清问题到底出在哪。
随便找了网上贴的几段代码，直接粘贴进html文件，里面写了数据库地址、账号密码，还有查询语句。保存之后双击打开html，页面加载出来了，但是数据半点都没有。点开控制台，一堆跨域相关的提示，那时候看不懂这个提示代表什么，只觉得奇怪，账号密码明明核对过好几遍，数据库服务也已经启动，为什么就是访问不到。
后来还怀疑是数据库配置的问题，去数据库里新建了一个专门的用户，放开访问权限，防火墙临时关掉，再刷新页面，还是不行。甚至把数据库改成允许外部IP访问，反复重启服务，每改一次就刷新一次浏览器，来来回回耗掉一整个晚上。
有人在论坛里跟我说，html本身只是前端页面，单纯的静态html根本没办法直接连接数据库。看到这句话的时候愣了好久，之前完全没分清前端和后端的边界，以为页面代码就能直接和数据库打交道。一直以为数据库就跟本地文件一样，页面想读就能读。
那段时间试了好几种办法。先是想在script标签里面写数据库连接代码，运行之后浏览器直接拦截请求。又去找一些前端的数据库库，尝试引入进来，写连接字符串，依旧弹出报错。那时候还在纠结，明明数据库就在本机上跑着，怎么页面就碰不到。
翻了不少帖子才慢慢明白，浏览器里面运行的html和js代码，出于安全限制，不能直接去访问数据库。数据库一般是放在服务端，不能把账号密码写在前端代码里，一旦写进去，任何人打开页面查看源代码，全部信息都会暴露，风险大到没法想象。
那时候不太愿意接受这个结论，总觉得肯定存在某种办法绕过限制。继续搜例子，看到有人用websql，兴冲冲写了一小段测试代码，跑起来倒是能存一点数据，可那只是浏览器本地的存储，并不是我自己搭建的那个数据库，根本不是一回事。
折腾到半夜，才意识到得搭一层后端。用简单的脚本写接口，由后端程序去连接数据库，html页面只负责发送请求，接收后端返回的数据。换了这个思路之后，重新调整整个流程，html不再写任何数据库账号和连接语句，只写请求接口的代码。
接口启动之后，再刷新html页面，这次控制台不再报之前那种错误，页面终于拿到了数据库里的数据。看着页面上加载出来的那几行测试记录，心里有种说不清的感觉，原来从一开始的方向就错了。
这件事之后，再看到有人问html如何连接数据库，第一反应就想起那天晚上反复刷新页面，盯着红色报错发呆的样子。静态页面本身没有办法直接建立数据库连接，所有直接在html里面写数据库连接的写法，要么行不通，要么隐患很大。
我当时只是想快速做个简单页面展示数据库里内容，没考虑安全和架构的问题，踩了这个大坑。仅代表我个人当时的经历，不同开发场景下的实现方式会有差别，不是所有需求都能用一样的思路处理。
关掉本地服务的时候，窗外已经天微微亮。保存好改过的html文件，没有再继续往下扩展功能，只是静静看着页面上读出来的那几条测试数据。