|
JavaScript直接连数据库?数据别想了。浏览器端跑的库数是JS,但数据库在服务器上,数据中间隔着HTTP协议,库数还有一堆安全策略。数据真正的库数做法是:JS发请求,后端语言(PHP、数据Node、库数Java)去查库,数据再返回JSON给前端。库数 我见过太多新手卡在这一步。数据他们写var data = mysql.query("SELECT * FROM users"),库数然后一脸懵——这行代码根本跑不通。数据为啥?库数因为浏览器里的JS压根没有权限去碰你服务器上的MySQL。这不是数据语法问题,是架构问题。 拿我最近帮朋友调的一个项目举例。他做一个内部工具,非要前端直连数据库,说“这样快”。我打开他的代码,好家伙,数据库用户名密码全写在JS里,等于把家门钥匙挂在门口。后来我给他改成Node后端提供API,前端用fetch请求,半小时搞定,他还觉得“多此一举”。但安全性和可维护性,完全不是一个量级。 具体实现路径就三条: 1. 后端写接口,前端fetch或axios调用 2. 用现成的BaaS服务(比如Supabase、Firebase),前端SDK直接操作 3. 如果非要“看起来像直连”,用WebSocket建立持久连接,但本质还是走后端转发 说说最常见的方案一。假设你有一个Node后端,用Express搭个路由: app.get('/api/users', async (req, res) => { const data = await db.query('SELECT id, name FROM users'); res.json(data); }); 前端JS这样写: fetch('/api/users') .then(res => res.json()) .then(users => { console.log(users); // 这才是你“拿到”的数据 }); 注意那个async/await和.then——JS是异步的,你不能像写Python那样同步等待结果。很多人卡在“为什么console.log打印出来是Promise”,这就是原因。 有个细节容易被忽略:跨域问题。如果你前端跑在localhost:3000,后端跑在localhost:8080,浏览器会拦截请求。这时候要么后端配CORS,要么用代理。我建议开发时直接用Vite或Webpack的proxy配置,省得每次都要改后端头信息。 再聊个实际场景。上周我帮一个电商项目排查性能问题,他们前端一次性拉取5000条商品数据,页面直接卡死。解决方案不是优化SQL,而是改前端逻辑——分页加载、懒加载、或者用虚拟滚动。你看,数据拿到手只是第一步,怎么处理才是真功夫。 有时候我也会用第二种方案,特别是做原型验证的时候。Supabase自带Postgres数据库和REST API,前端只要引入它的JS库: import { createClient } from '@supabase/supabase-js'; const supabase = createClient(URL, KEY); const { data } = await supabase.from('products').select('*'); 看起来像直连,但底层还是走HTTPS请求。好处是不用自己写后端,坏处是逻辑复杂了不好控制。 最后说句掏心窝的话:别追求“纯前端拿数据”这种炫技。真实项目里,数据安全、权限控制、请求频率限制,这些都得靠后端把关。JS只是展示层,把数据渲染成用户能看的东西,这才是它的本分。你要是真想在浏览器里直接跑数据库,那得用SQLite WASM版本,但那种场景少之又少——除非你做个纯离线的工具,数据不离开用户设备。 写代码这事儿,清楚边界比什么都重要。知道哪些事是JS该干的,哪些该交给后端,你就已经超过一半的人了。 |