当前位置：首页 > 数据库 > 正文

AngularJS入门教程SQL实例详解，如何连接与操作数据库？

admin
数据库
2025-11-04
3780

在AngularJS入门教程中,SQL实例的讲解是连接前端框架与后端数据存储的关键环节，AngularJS作为一款经典的前端MVC框架，其数据绑定和依赖载入特性使得与后端SQL数据库的交互变得简洁高效，本文将通过一个完整的用户管理实例，详细解析如何在AngularJS中实现SQL数据的增删改查操作，帮助初学者理解前后端数据交互的核心逻辑。

环境准备与项目初始化

在开始SQL实例之前,需确保已搭建基础开发环境，首先安装Node.js和npm，然后通过npm初始化一个AngularJS项目，需要引入AngularJS核心库、一个简化HTTP请求的$http服务，以及用于处理JSON数据的插件，后端部分可选择Node.js+Express框架，结合SQLite数据库（无需独立安装，轻量级适合演示），项目结构应包含前端HTML文件、AngularJS控制器脚本、后端路由文件及数据库初始化模块。

数据库设计与后端接口实现

数据库表结构设计

以用户管理为例,设计一个简单的users表，包含以下字段：

id：主键，自增长
username：用户名，唯一且非空
email：邮箱，符合邮箱格式
created_at：创建时间，默认当前时间

使用SQLite创建表的SQL语句如下：

AngularJS入门教程SQL实例详解，如何连接与操作数据库？第1张

后端API接口实现

在Express框架中,需实现以下RESTful接口：

GET /api/users：获取所有用户列表
GET /api/users/:id：根据ID获取单个用户
POST /api/users：创建新用户
PUT /api/users/:id：更新指定用户信息
DELETE /api/users/:id：删除指定用户

以获取用户列表接口为例,后端代码片段如下：

app.get('/api/users', (req, res) => { const db = new sqlite3.Database('./database.sqlite'); db.all('SELECT * FROM users', (err, rows) => { if (err) { res.status(500).json({ error: err.message }); return; } res.json(rows); }); db.close(); });

前端AngularJS控制器与数据绑定

模块与控制器的初始化

在HTML文件中引入AngularJS库并定义应用模块：

AngularJS入门教程SQL实例详解，如何连接与操作数据库？第2张

在JavaScript文件中初始化模块和控制器：

angular.module('userApp', []) .controller('UserController', ['$http', function($http) { var vm = this; vm.users = []; vm.newUser = { username: '', email: '' }; // 初始化时加载数据 vm.loadUsers = function() { $http.get('/api/users') .then(function(response) { vm.users = response.data; }) .catch(function(error) { console.error('Error loading users:', error); }); }; vm.loadUsers(); }]);

数据展示与表格渲染

使用AngularJS的ng-repeat指令将后端返回的用户数据渲染为表格：

<table border="1" cellpadding="5"> <thead> <tr> <th>ID</th> <th>用户名</th> <th>邮箱</th> <th>创建时间</th> <th>操作</th> </tr> </thead> <tbody> <tr ng-repeat="user in vm.users"> <td>{{ user.id }}</td> <td>{{ user.username }}</td> <td>{{ user.email }}</td> <td>{{ user.created_at }}</td> <td> <button ng-click="vm.editUser(user)">编辑</button> <button ng-click="vm.deleteUser(user.id)">删除</button> </td> </tr> </tbody> </table>

CRUD操作的AngularJS实现

创建用户（Create）

在控制器中添加创建用户的方法：

vm.createUser = function() { $http.post('/api/users', vm.newUser) .then(function(response) { vm.users.push(response.data); vm.newUser = { username: '', email: '' }; // 清空表单 }) .catch(function(error) { console.error('Error creating user:', error); }); };

前端表单绑定：

AngularJS入门教程SQL实例详解，如何连接与操作数据库？第3张

更新用户（Update）

编辑用户时需先加载数据到表单,提交后发送PUT请求：

vm.editUser = function(user) { vm.currentUser = angular.copy(user); }; vm.updateUser = function() { $http.put('/api/users/' + vm.currentUser.id, vm.currentUser) .then(function(response) { var index = vm.users.findIndex(u => u.id === vm.currentUser.id); if (index !== -1) { vm.users[index] = response.data; } vm.currentUser = null; // 关闭编辑表单 }) .catch(function(error) { console.error('Error updating user:', error); }); };

删除用户（Delete）

vm.deleteUser = function(userId) { if (confirm('确定要删除该用户吗？')) { $http.delete('/api/users/' + userId) .then(function() { vm.users = vm.users.filter(u => u.id !== userId); }) .catch(function(error) { console.error('Error deleting user:', error); }); } };