如影随形贴心陪护 - 我的移动端点单App

前端

2023-11-29 17:09:39

点单，看似简单，却是在餐饮业不可或缺的重要环节。它连接着顾客与餐厅，是实现顾客点餐和餐厅出餐的关键。如今，随着移动互联网的快速发展，移动端点单App应运而生，为顾客带来了更加便捷、高效的点餐体验。

Vue3和React都是当今备受欢迎的前端框架，它们拥有强大的功能和丰富的生态系统，能够满足不同场景下的开发需求。在本文中，我们将介绍如何使用Vue3和ReactV6来构建一个移动端点单App，帮助您快速上手并掌握相关技术。

一、项目初始化

Vue3版本
- 创建Vue3项目：```bash
  vue create vue3-point-app
ReactV6版本
- 创建ReactV6项目：```bash
  npx create-react-app react-point-app

二、安装依赖

Vue3版本
- 安装FastMock：```bash
  npm install fastmock --save
ReactV6版本
- 安装FastMock：```bash
  npm install fastmock --save

三、配置FastMock

Vue3版本
- 在项目根目录创建mock文件夹，并在其中创建index.js文件。
- 在index.js文件中配置FastMock：```javascript
  const Mock = require('fastmock');
  Mock.config.mockRandom = true;
ReactV6版本
- 在项目根目录创建mock文件夹，并在其中创建index.js文件。
- 在index.js文件中配置FastMock：```javascript
  const Mock = require('fastmock');
  Mock.config.mockRandom = true;

四、创建页面

Vue3版本
- 在src文件夹中创建pages文件夹，并在其中创建Home.vue文件。
- 在Home.vue文件中创建页面模板：```html
```
- ReactV6版本
  - 在src文件夹中创建pages文件夹，并在其中创建Home.jsx文件。
  - 在Home.jsx文件中创建页面模板：```jsx
    import React, { useState, useEffect } from 'react';
    import FastMock from 'fastmock';
  const Home = () => {
  const [menu, setMenu] = useState([]);
  const [cart, setCart] = useState([]);
  const [totalPrice, setTotalPrice] = useState(0);
  
  useEffect(() => {
  FastMock.mock('/api/menu', {
  'code': 200,
  'data': [
  {
  'id': 1,
  'name': '汉堡',
  'price': 10
  },
  {
  'id': 2,
  'name': '薯条',
  'price': 5
  },
  {
  'id': 3,
  'name': '可乐',
  'price': 3
  }
  ]
  });
  FastMock.get('/api/menu').then(res => {
  setMenu(res.data);
  });
  }, []);
  
  const addToCart = (item) => {
  const newCart = [...cart];
  const index = newCart.findIndex(i => i.id === item.id);
  if (index > -1) {
  newCart[index].quantity++;
  } else {
  newCart.push({...item, quantity: 1});
  }
  setCart(newCart);
  calculateTotalPrice();
  };
  
  const calculateTotalPrice = () => {
  let total = 0;
  cart.forEach(item => {
  total += item.price * item.quantity;
  });
  setTotalPrice(total);
  };
  
  const checkout = () => {
  alert('结账成功！');
  };
  
  return (
  移动端点单App
  {menu.map(item => (
  
  {item.name}
  {item.price}
  <button onClick={() => addToCart(item)}>+
  
  ))}
  {cart.map(item => (
  
  {item.name}
  {item.price}
  {item.quantity}
  
  ))}
  
  总计：{totalPrice}
  );
  };
  
  export default Home;

五、模拟接口数据

Vue3版本
- 在mock文件夹中的index.js文件中，创建以下模拟接口：```javascript
  Mock.mock('/api/menu', {
  'code': 200,
  'data': [
  {
  'id': 1,
  'name': '汉堡',
  'price': 10
  },
  {
  'id': 2,
  'name': '薯条',
  'price': 5
  },
  {
  'id': 3,
  'name': '可乐',
  'price': 3
  }
  ]
  });
ReactV6版本
- 在mock文件夹中的index.js文件中，创建以下模拟接口：```javascript
  Mock.mock('/api/menu', {
  'code': 200,
  'data': [
  {
  'id': 1,
  'name': '汉堡',
  'price': 10
  },
  {
  'id': 2,
  'name': '薯条',
  'price': 5
  },
  {
  'id': 3,
  'name': '可乐',
  'price': 3
  }
  ]
  });