使用node.js中的react实现有关鲜花商城的网页
时间: 2024-05-01 12:22:03 浏览: 168
首先,需要安装node.js和npm。然后,使用以下命令创建一个新的React项目:
```
npx create-react-app flower-shop
cd flower-shop
```
接下来,可以使用以下命令启动React项目:
```
npm start
```
在开始编写代码之前,需要安装一些必要的依赖项:
```
npm install react-router-dom axios
```
现在,可以开始编写代码了。可以使用React Router来创建路由,并使用Axios库从后端API获取数据。以下是一个示例:
```javascript
import React, { useState, useEffect } from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import axios from "axios";
function App() {
const [flowers, setFlowers] = useState([]);
useEffect(() => {
axios.get("http://localhost:5000/flowers").then((response) => {
setFlowers(response.data);
});
}, []);
return (
<Router>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/flowers">Flowers</Link>
</li>
</ul>
</nav>
<Switch>
<Route path="/" exact>
<h1>Welcome to the Flower Shop!</h1>
</Route>
<Route path="/about">
<h2>About Us</h2>
<p>We are a family-owned flower shop dedicated to providing beautiful arrangements for any occasion.</p>
</Route>
<Route path="/flowers">
<h2>Flowers</h2>
<ul>
{flowers.map((flower) => (
<li key={flower.id}>
<Link to={`/flowers/${flower.id}`}>{flower.name}</Link>
</li>
))}
</ul>
</Route>
<Route path="/flowers/:id">
<Flower />
</Route>
</Switch>
</Router>
);
}
function Flower() {
const [flower, setFlower] = useState({});
const { id } = useParams();
useEffect(() => {
axios.get(`http://localhost:5000/flowers/${id}`).then((response) => {
setFlower(response.data);
});
}, [id]);
return (
<div>
<h2>{flower.name}</h2>
<p>{flower.description}</p>
<p>Price: ${flower.price}</p>
</div>
);
}
export default App;
```
在这个示例中,我们创建了一个包含三个路由的导航栏:Home、About和Flowers。在Flowers路由中,我们使用Axios从后端API获取了一组花卉,并在页面上显示它们的名称。单击花卉名称时,将导航到一个新的路由,该路由显示有关该花卉的详细信息。
最后,需要启动后端API服务器,以便React应用程序可以从中获取数据。可以使用Express框架和MongoDB数据库来创建一个简单的REST API。以下是一个示例:
```javascript
const express = require("express");
const cors = require("cors");
const mongoose = require("mongoose");
const app = express();
app.use(cors());
app.use(express.json());
mongoose.connect("mongodb://localhost/flower-shop", { useNewUrlParser: true, useUnifiedTopology: true });
const flowerSchema = new mongoose.Schema({
name: String,
description: String,
price: Number,
});
const Flower = mongoose.model("Flower", flowerSchema);
app.get("/flowers", async (req, res) => {
const flowers = await Flower.find();
res.send(flowers);
});
app.get("/flowers/:id", async (req, res) => {
const flower = await Flower.findById(req.params.id);
res.send(flower);
});
app.listen(5000, () => {
console.log("Server started on port 5000");
});
```
在这个示例中,我们创建了一个名为“Flower”的Mongoose模型,并使用Express创建了两个路由:一个用于获取所有花卉的列表,另一个用于获取单个花卉的详细信息。
希望这个示例可以帮助你入门使用React来创建一个简单的鲜花商城网页。
阅读全文