React项目打造-使用npm run mock启动服务模拟数据

2023-12-18 17:47:17

让我们从零开始构建一个React项目，并一步一步地学习如何使用npm run mock命令来模拟数据。

首先，我们需要创建一个新的React项目。我们可以使用以下命令来创建一个名为my-app的项目：

npx create-react-app my-app

然后，我们需要安装必要的依赖项。我们可以使用以下命令来安装：

cd my-app
npm install axios

接下来，我们需要在src目录下创建一个名为home.js的文件。该文件将包含我们的模拟数据。

// home.js
const data = [
  {
    id: 1,
    name: "John Doe",
    email: "johndoe@example.com",
  },
  {
    id: 2,
    name: "Jane Smith",
    email: "janesmith@example.com",
  },
  {
    id: 3,
    name: "Michael Jones",
    email: "michaeljones@example.com",
  },
];

export default data;

现在，我们需要在src目录下创建一个名为App.js的文件。该文件将包含我们的React组件。

// App.js
import React, { useState } from "react";
import data from "./home.js";

const App = () => {
  const [users, setUsers] = useState(data);

  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

最后，我们需要在package.json文件中添加一个脚本命令来启动服务。

// package.json
{
  "scripts": {
    "start": "react-scripts start",
    "mock": "json-server --watch db.json --port 3000"
  }
}

现在，我们可以使用以下命令来启动服务：

npm run mock

这将启动一个JSON服务器，并监听3000端口。该服务器将提供模拟数据，我们可以使用axios来获取这些数据。

// App.js
import React, { useState, useEffect } from "react";
import axios from "axios";

const App = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios.get("http://localhost:3000/users").then((res) => {
      setUsers(res.data);
    });
  }, []);

  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;