ant design + egg (Node.js + React）开发web前后台

最新推荐文章于 2025-03-04 11:37:41 发布

HugoWang

最新推荐文章于 2025-03-04 11:37:41 发布

阅读量7.1k

点赞数

分类专栏： VS Code React 文章标签： nodejs react ant.design egg

本文链接：https://blog.youkuaiyun.com/hugowang/article/details/82621936

版权

本文介绍了如何利用蚂蚁金服的Ant Design（React UI库）和Egg.js（Node.js企业级框架）来搭建一个前后端分离的Web应用。详细步骤包括：搭建前台环境，通过create-react-app创建项目并引入Ant Design；搭建后台环境，使用Egg.js快速入门创建服务；设置并运行项目，分别通过npm run dev和npm start启动后台和前台；最后，提供了后台与前台的VS Code调试配置，助你顺利进行代码调试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

接下来我采用蚂蚁金服开源的前后台框架搭建非Java的微服务。
前台：Ant Design（基于Node.js & React）
后台：egg（基于Node.js & Koa）

搭建前台环境

创建项目（详细过程见在 create-react-app 中使用），执行“安装和初始化”和“引入antd”的步骤
用VS Code打开文件夹。
在package.json中增加：

"proxy": "http://localhost:7001"

重写App.js

import React, { Component } from 'react';
import './App.css';

class App extends Component {
   
  constructor(props) {
    super(props);
    this.state = {
      echo: '',
    };
  }
  componentDidMount() {
    fetch('/index').then((res