AngularJS SQL

AngularJS SQL 学习笔记⚠️核心概念澄清AngularJS (前端框架) 不能直接连接或操作 SQL 数据库。AngularJS运行在浏览器中负责 UI 展示和用户交互。SQL运行在后端服务器数据库中如 MySQL, PostgreSQL, SQL Server。中间层必须通过后端 APINode.js/Express, Java/Spring, Python/Django, PHP/Laravel等作为桥梁。学习路径AngularJS (前端)→HTTP请求 ($http/$resource)→后端API (RESTful)→后端逻辑→SQL数据库️ 一、整体架构流程1. HTTP GET/POST2. 执行 SQL3. 返回数据4. JSON响应用户界面AngularJS后端 APINode/Java/PythonSQL DatabaseMySQL/PostgreSQL 二、AngularJS 如何与后端通信1. 使用$http服务基础方式angular.module(app).controller(UserCtrl,function($http){varvmthis;vm.users[];// ✅ 获取数据 (SELECT)vm.loadUsersfunction(){$http.get(/api/users).then(function(response){vm.usersresponse.data;// 假设后端返回 JSON 数组}).catch(function(error){console.error(加载失败:,error);});};// ✅ 创建数据 (INSERT)vm.createUserfunction(newUser){$http.post(/api/users,newUser).then(function(response){alert(创建成功ID: response.data.id);vm.loadUsers();// 刷新列表});};// ✅ 更新数据 (UPDATE)vm.updateUserfunction(user){$http.put(/api/users/user.id,user).then(function(){alert(更新成功);});};// ✅ 删除数据 (DELETE)vm.deleteUserfunction(id){if(confirm(确定删除)){$http.delete(/api/users/id).then(function(){vm.loadUsers();});}};// 初始化加载vm.loadUsers();});2. 使用$resource服务RESTful 风格更简洁需引入ngResource模块。// 定义资源工厂angular.module(app).factory(UserService,function($resource){return$resource(/api/users/:id,{id:id},{update:{method:PUT}// 默认没有 PUT需自定义});});// Controller 中使用angular.module(app).controller(UserCtrl,function(UserService){varvmthis;// 查询所有 (GET /api/users)vm.usersUserService.query();// 保存新用户 (POST /api/users)vm.savefunction(user){UserService.save(user,function(response){vm.users.push(response);// 添加到本地列表});};// 删除 (DELETE /api/users/123)vm.removefunction(user){UserService.delete({id:user.id},function(){varindexvm.users.indexOf(user);if(index-1)vm.users.splice(index,1);});};});✅优势$resource自动处理 URL 拼接和 CRUD 方法代码更语义化。 三、后端 API 示例以 Node.js Express MySQL 为例这是 AngularJS 调用的“另一端”。你需要编写后端代码来接收请求并执行 SQL。1. 安装依赖npminstallexpress mysql2 cors body-parser2. 后端代码 (server.js)constexpressrequire(express);constmysqlrequire(mysql2/promise);// 支持 Promiseconstcorsrequire(cors);constappexpress();app.use(cors());// 允许跨域开发环境必需app.use(express.json());// 数据库连接池constpoolmysql.createPool({host:localhost,user:root,password:password,database:my_app_db});// ✅ GET /api/users - SELECT * FROM usersapp.get(/api/users,async(req,res){try{const[rows]awaitpool.execute(SELECT * FROM users ORDER BY id DESC);res.json(rows);}catch(err){res.status(500).json({error:err.message});}});// ✅ POST /api/users - INSERT INTO usersapp.post(/api/users,async(req,res){const{name,email}req.body;try{const[result]awaitpool.execute(INSERT INTO users (name, email) VALUES (?, ?),[name,email]);res.json({id:result.insertId,name,email});}catch(err){res.status(500).json({error:err.message});}});// ✅ PUT /api/users/:id - UPDATE users SET ...app.put(/api/users/:id,async(req,res){const{id}req.params;const{name,email}req.body;try{awaitpool.execute(UPDATE users SET name?, email? WHERE id?,[name,email,id]);res.json({success:true});}catch(err){res.status(500).json({error:err.message});}});// ✅ DELETE /api/users/:id - DELETE FROM usersapp.delete(/api/users/:id,async(req,res){const{id}req.params;try{awaitpool.execute(DELETE FROM users WHERE id?,[id]);res.json({success:true});}catch(err){res.status(500).json({error:err.message});}});app.listen(3000,()console.log(Server running on port 3000));安全提示永远不要在前端拼接 SQL 字符串后端必须使用参数化查询Prepared Statements如上例中的?占位符防止SQL 注入。️ 四、常见安全问题与最佳实践1. SQL 注入防护❌危险做法后端// 绝对禁止用户输入直接拼接到 SQL 中pool.execute(SELECT * FROM users WHERE name ${userName});✅正确做法// 使用参数化查询pool.execute(SELECT * FROM users WHERE name ?,[userName]);2. CORS 跨域问题如果 AngularJS 运行在http://localhost:8080后端在http://localhost:3000浏览器会阻止请求。解决后端添加 CORS 头如上例使用cors中间件或配置 Nginx 反向代理。3. 错误处理前端始终捕获$http的.catch()或.error()给用户友好提示。后端统一错误响应格式如{ success: false, message: 用户名已存在 }。4. 数据验证前端验证使用ng-required,ng-pattern提升用户体验。后端验证必须再次验证前端验证可被绕过后端是最后一道防线。 五、完整 CRUD 示例结构project/ ├── frontend/ # AngularJS 前端 │ ├── index.html │ ├── app.js # 模块定义 │ ├── controllers/ │ │ └── UserCtrl.js # 控制器调用 $http/$resource │ ├── services/ │ │ └── UserService.js # 服务封装 API 调用推荐 │ └── views/ │ └── user-list.html # 模板ng-repeat 展示表格 ├── backend/ # 后端 API │ ├── server.js # Express 服务器 │ ├── routes/ │ │ └── users.js # 路由处理 /api/users │ └── db/ │ └── connection.js # 数据库连接配置 └── database/ └── schema.sql # SQL 建表语句schema.sql示例CREATEDATABASEmy_app_db;USEmy_app_db;CREATETABLEusers(idINTAUTO_INCREMENTPRIMARYKEY,nameVARCHAR(100)NOTNULL,emailVARCHAR(150)UNIQUENOTNULL,created_atTIMESTAMPDEFAULTCURRENT_TIMESTAMP); 六、学习建议先掌握 SQL 基础SELECT,INSERT,UPDATE,DELETE,JOIN,WHERE。再学后端 API 开发选择一门后端语言Node.js 最容易上手因为也是 JavaScript。最后整合 AngularJS重点学习$http或$resource如何与 API 交互。调试技巧浏览器 DevTools → Network 标签页查看请求是否发出、状态码、响应内容。后端日志打印 SQL 语句和执行结果。❓ 常见问题Q: AngularJS 能直接连 MySQL 吗A:不能。浏览器出于安全考虑不允许前端代码直接访问数据库。必须通过后端 API。Q: 为什么我的$http.get返回空数组A: 检查后端 API 是否正常返回 JSON是否有 CORS 错误Console 中看红色报错数据库中是否有数据后端 SQL 查询是否正确Q: 如何处理分页A:前端传递page和pageSize参数给后端。后端SQL 使用LIMIT offset, countMySQL或OFFSET/FETCHSQL Server。前端收到数据后用ng-repeat渲染当前页。