当前位置：首页 > news >正文

AngularJS SQL

news 2026/4/22 19:09:59

AngularJS + SQL 学习笔记

⚠️核心概念澄清：
AngularJS (前端框架) 不能直接连接或操作 SQL 数据库。
AngularJS运行在浏览器中，负责 UI 展示和用户交互。
SQL运行在后端服务器数据库中（如 MySQL, PostgreSQL, SQL Server）。
中间层：必须通过后端 API（Node.js/Express, Java/Spring, Python/Django, PHP/Laravel等）作为桥梁。
📌学习路径：AngularJS (前端)→HTTP请求 ($http/$resource)→后端API (RESTful)→后端逻辑→SQL数据库

🏗️ 一、整体架构流程

📡 二、AngularJS 如何与后端通信

1. 使用`$http`服务（基础方式）

angular.module('app').controller('UserCtrl',function($http){varvm=this;vm.users=[];// ✅ 获取数据 (SELECT)vm.loadUsers=function(){$http.get('/api/users').then(function(response){vm.users=response.data;// 假设后端返回 JSON 数组}).catch(function(error){console.error('加载失败:',error);});};// ✅ 创建数据 (INSERT)vm.createUser=function(newUser){$http.post('/api/users',newUser).then(function(response){alert('创建成功！ID: '+response.data.id);vm.loadUsers();// 刷新列表});};// ✅ 更新数据 (UPDATE)vm.updateUser=function(user){$http.put('/api/users/'+user.id,user).then(function(){alert('更新成功');});};// ✅ 删除数据 (DELETE)vm.deleteUser=function(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){varvm=this;// 查询所有 (GET /api/users)vm.users=UserService.query();// 保存新用户 (POST /api/users)vm.save=function(user){UserService.save(user,function(response){vm.users.push(response);// 添加到本地列表});};// 删除 (DELETE /api/users/123)vm.remove=function(user){UserService.delete({id:user.id},function(){varindex=vm.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-parser

2. 后端代码 (`server.js`)

constexpress=require('express');constmysql=require('mysql2/promise');// 支持 Promiseconstcors=require('cors');constapp=express();app.use(cors());// 允许跨域（开发环境必需）app.use(express.json());// 数据库连接池constpool=mysql.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 语句和执行结果。