如何通过Controller在AngularJS前端展示MySQL数据库中的数据

嘿，我懂你现在的困扰——后端已经能从MySQL拉到登录用户的数据了，但就是不知道怎么把这些数据递给AngularJS的Controller，让前端页面显示出来。咱们先从你的后端代码找问题，再一步步搞定前端的对接。

先看后端代码的核心问题 #

你现在的后端登录接口在查询到用户数据后，直接用res.redirect('/dashboard')跳转到仪表盘页面，但这个操作不会把查询到的result用户数据传递给前端。重定向只是告诉浏览器跳转到新页面，没法附带接口返回的数据，这也是你前端拿不到数据的核心原因。

你的原后端代码：

module.exports = function(app) { 
  app.post('/login', function(req, res) { 
    var email = req.body.email; 
    var password = req.body.password; 
    console.log(password); 
    if (email && password) { 
      connection.query('select * from user where email = ? and password = ?', [email, password], function(err, result) { 
        console.log(result); 
        if (err) res.send(err); 
        res.redirect('/dashboard'); 
      }); 
    } 
  }); 
}

后端代码修改方案（两种可选） #

针对AngularJS这类前端框架，更推荐用API返回JSON数据的方式，或者把数据存在Session中提供接口获取，下面分别说明：

方案1：直接返回JSON数据（推荐，适合单页应用） #

修改后端接口，验证成功后返回用户的JSON数据，由前端自己处理页面跳转：

module.exports = function(app) { 
  app.post('/login', function(req, res) { 
    var email = req.body.email; 
    var password = req.body.password; 
    // 先校验参数是否为空
    if (!email || !password) {
      return res.status(400).json({error: '邮箱和密码不能为空'});
    }
    connection.query('select * from user where email = ? and password = ?', [email, password], function(err, result) { 
      // 处理数据库错误
      if (err) {
        console.error(err);
        return res.status(500).json({error: '数据库查询失败'});
      }
      // 检查是否查询到用户
      if (result.length === 0) {
        return res.status(401).json({error: '邮箱或密码错误'});
      }
      // 移除敏感的密码字段，只返回必要信息
      const user = {...result[0]};
      delete user.password;
      // 返回成功信息和用户数据
      res.json({success: true, user: user});
    }); 
  }); 
}

方案2：用Session存储用户数据，提供接口获取 #

如果还是想保留重定向的逻辑，可以把用户数据存在Session，然后新增一个接口让前端获取：

module.exports = function(app) { 
  // 登录接口：将用户数据存入Session
  app.post('/login', function(req, res) { 
    var email = req.body.email; 
    var password = req.body.password; 
    if (!email || !password) {
      return res.status(400).send('邮箱和密码不能为空');
    }
    connection.query('select * from user where email = ? and password = ?', [email, password], function(err, result) { 
      if (err) {
        console.error(err);
        return res.status(500).send('数据库查询失败');
      }
      if (result.length === 0) {
        return res.status(401).send('邮箱或密码错误');
      }
      const user = {...result[0]};
      delete user.password;
      req.session.currentUser = user; // 存入Session
      res.redirect('/dashboard'); 
    }); 
  }); 

  // 新增接口：获取当前登录用户数据
  app.get('/getUser', function(req, res) {
    if (req.session.currentUser) {
      res.json(req.session.currentUser);
    } else {
      res.status(401).json({error: '未登录'});
    }
  });
}

前端AngularJS对接实现 #

现在后端能正确返回数据了，咱们写Controller来获取并展示数据：

假设前端页面结构 #

<!-- 登录页面 -->
<div ng-app="myApp" ng-controller="LoginController">
  <form ng-submit="login()">
    <input type="email" ng-model="user.email" placeholder="请输入邮箱" required>
    <input type="password" ng-model="user.password" placeholder="请输入密码" required>
    <button type="submit">登录</button>
  </form>
</div>

<!-- 仪表盘页面（登录成功后跳转） -->
<div ng-app="myApp" ng-controller="DashboardController">
  <div ng-if="currentUser">
    <h2>欢迎回来，{{currentUser.name}}！</h2>
    <p>你的邮箱：{{currentUser.email}}</p>
    <p>用户ID：{{currentUser.id}}</p>
  </div>
  <div ng-if="!currentUser">
    <p>请先登录</p>
    <a href="/login">去登录</a>
  </div>
</div>

AngularJS模块和Controller代码 #

// 定义AngularJS模块
var myApp = angular.module('myApp', []);

// 登录Controller：处理登录请求，保存用户数据
myApp.controller('LoginController', function($scope, $http, $location) {
  $scope.user = { email: '', password: '' };

  $scope.login = function() {
    $http.post('/login', $scope.user)
      .then(function(response) {
        // 登录成功，把用户数据存在localStorage（或者$rootScope，适合单页应用）
        localStorage.setItem('currentUser', JSON.stringify(response.data.user));
        // 跳转到仪表盘页面
        $location.path('/dashboard');
      }, function(error) {
        // 登录失败，提示错误信息
        alert(error.data.error || '登录失败，请稍后重试');
      });
  };
});

// 仪表盘Controller：获取用户数据并展示
myApp.controller('DashboardController', function($scope, $http) {
  // 方案1：从localStorage读取数据（对应后端方案1）
  var savedUser = JSON.parse(localStorage.getItem('currentUser'));
  if (savedUser) {
    $scope.currentUser = savedUser;
  } else {
    // 未登录则跳回登录页
    window.location.href = '/login';
  }

  // 方案2：调用/getUser接口获取数据（对应后端方案2）
  // $http.get('/getUser')
  //   .then(function(response) {
  //     $scope.currentUser = response.data;
  //   }, function(error) {
  //     window.location.href = '/login';
  //   });
});

关键注意点 #

• 敏感数据处理：绝对不要把用户的密码等敏感信息返回给前端，一定要在后端删除这些字段
• 状态维护：登录状态可以用localStorage（持久化）或者Session（会话级）来维护，根据你的需求选择
• 错误处理：前后端都要做好错误校验和提示，提升用户体验

内容的提问来源于stack exchange，提问作者Anamika modi