Angular项目点击爱心时如何从MySQL获取并展示点击量？

嘿，我来帮你搞定这个需求！你要的是点击爱心图标时从MySQL拉取最新点赞数并展示，不用写回数据库对吧？咱们分后端和前端两部分一步步来：

Angular没法直接连接MySQL，得先搞个后端接口来帮你查询数据库。这里我用Node.js + Express举例子，你也可以用Java Spring Boot、PHP等其他后端技术，思路是一样的：

1. 先确保你的MySQL里有存储点赞数的表，比如建个likes表：

CREATE TABLE likes (
  id INT AUTO_INCREMENT PRIMARY KEY,
  post_id INT NOT NULL,
  count INT DEFAULT 0,
  UNIQUE KEY (post_id)
);

（post_id对应你的帖子ID，count就是点赞数）

2. 写后端接口，提供一个GET请求来根据帖子ID获取点赞数：

const express = require('express');
const mysql = require('mysql2/promise');
const cors = require('cors'); // 解决跨域问题用
const app = express();

// 启用CORS，允许Angular前端请求
app.use(cors());

// 数据库连接配置，替换成你的MySQL信息
const dbConfig = {
  host: 'localhost',
  user: 'your_mysql_username',
  password: 'your_mysql_password',
  database: 'your_database_name'
};

// 获取指定帖子的点赞数接口
app.get('/api/likes/:postId', async (req, res) => {
  try {
    const connection = await mysql.createConnection(dbConfig);
    // 根据post_id查询点赞数
    const [rows] = await connection.execute(
      'SELECT count FROM likes WHERE post_id = ?',
      [req.params.postId]
    );
    connection.end();

    // 返回结果，如果没有对应帖子的数据，默认返回0
    res.json({ likeCount: rows.length > 0 ? rows[0].count : 0 });
  } catch (error) {
    console.error('查询点赞数失败:', error);
    res.status(500).json({ error: 'Failed to fetch like count' });
  }
});

// 启动后端服务，端口3000
app.listen(3000, () => {
  console.log('Backend server running on http://localhost:3000');
});

安装依赖后启动服务：npm install express mysql2 cors，然后node server.js

接下来在Angular里调用这个后端接口，实现点击爱心刷新点赞数的功能：

1. 先创建一个服务来封装HTTP请求（推荐做法，解耦组件和API调用）：
   运行命令生成服务：ng generate service like
   然后在like.service.ts里写请求方法：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class LikeService {
  // 后端API地址，替换成你的后端地址
  private apiBaseUrl = 'http://localhost:3000/api/likes';

  constructor(private http: HttpClient) { }

  // 根据帖子ID获取点赞数
  getLikeCount(postId: number): Observable<{ likeCount: number }> {
    return this.http.get<{ likeCount: number }>(`${this.apiBaseUrl}/${postId}`);
  }
}

2. 创建点赞组件，比如ng generate component like
   在组件的TS文件like.component.ts里：

import { Component } from '@angular/core';
import { LikeService } from '../like.service';

@Component({
  selector: 'app-like',
  templateUrl: './like.component.html',
  styleUrls: ['./like.component.css']
})
export class LikeComponent {
  likeCount = 0;
  // 假设当前帖子ID是1，你可以改成动态传入的，比如用@Input()
  currentPostId = 1;

  constructor(private likeService: LikeService) {
    // 组件初始化时先获取一次点赞数
    this.refreshLikeCount();
  }

  // 点击爱心时触发的方法
  onHeartClick() {
    this.refreshLikeCount();
  }

  // 封装获取点赞数的逻辑
  private refreshLikeCount() {
    this.likeService.getLikeCount(this.currentPostId).subscribe({
      next: (response) => {
        this.likeCount = response.likeCount;
      },
      error: (err) => {
        console.error('获取点赞数失败:', err);
      }
    });
  }
}

3. 组件的HTML模板like.component.html：

<div class="like-wrapper">
  <!-- 点击爱心按钮触发刷新 -->
  <button class="heart-btn" (click)="onHeartClick()">
    <!-- 这里用Font Awesome的爱心图标，你也可以用其他图标 -->
    <i class="fa-solid fa-heart"></i>
  </button>
  <!-- 展示当前点赞数 -->
  <span class="like-count">{{ likeCount }}</span>
</div>

4. 别忘了在app.module.ts里导入HttpClientModule，否则HTTP请求用不了：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http'; // 导入这个

import { AppComponent } from './app.component';
import { LikeComponent } from './like/like.component';

@NgModule({
  declarations: [
    AppComponent,
    LikeComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule // 添加到这里
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

• 跨域问题：如果你的Angular前端（默认端口4200）和后端端口不同，一定要在后端配置CORS，就像我上面Node.js代码里用的cors包那样，不然浏览器会拦截请求。
• 图标使用：如果要用Font Awesome图标，需要先安装依赖：npm install @fortawesome/angular-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons，然后在组件里导入爱心图标并使用。
• 动态帖子ID：如果是多帖子场景，可以给组件加个@Input() postId!: number;，这样父组件可以把不同的帖子ID传递过来，实现每个帖子独立的点赞数展示。

内容的提问来源于stack exchange，提问作者Đồng Duy