UniApp实现美食推荐与餐厅预订的实现指南

<template><view><uni-list><uni-list-item v-for="item in list"><image :src="item.image"></image><text>{{ item.name }}</text><text>{{ item.rating }}</text></uni-list-item></uni-list></view></template><script>export default {  data() {    return {      list: [] // 美食推荐列表数据    }  },  mounted() {    // 获取美食推荐列表数据    this.getList()  },  methods: {    getList() {      // 调用后端API获取美食推荐列表数据      // 使用uni.request()函数发送HTTP请求      uni.request({        url: 'http://localhost:3000/api/recommendation',        method: 'GET',        success: (res) => {          this.list = res.data        },        fail: (err) => {          console.log(err)        }      })    }  }}</script>

<template><view><uni-grid><uni-grid-item v-for="item in restaurant.images" :key="item"><image :src="item"></image></uni-grid-item></uni-grid><text>{{ restaurant.name }}</text><text>{{ restaurant.address }}</text><text>{{ restaurant.telephone }}</text><uni-list><uni-list-item v-for="review in restaurant.reviews"><text>{{ review.content }}</text><text>{{ review.rating }}</text></uni-list-item></uni-list></view></template><script>export default {  data() {    return {      restaurant: {} // 餐厅详情数据    }  },  mounted() {    // 获取餐厅详情数据    this.getRestaurant()  },  methods: {    getRestaurant() {      // 调用后端API获取餐厅详情数据      // 使用uni.request()函数发送HTTP请求      uni.request({        url: 'http://localhost:3000/api/restaurant/1', // 1表示餐厅的ID        method: 'GET',        success: (res) => {          this.restaurant = res.data        },        fail: (err) => {          console.log(err)        }      })    }  }}</script>

const express = require('express')const app = express()app.get('/api/recommendation', (req, res) => {  // 查询数据库获取美食推荐列表数据  // 使用res.json()函数返回数据  const list = [    { id: 1, name: '美食A', image: 'xxx', rating: 4.5 },    { id: 2, name: '美食B', image: 'xxx', rating: 4.8 },    { id: 3, name: '美食C', image: 'xxx', rating: 4.2 }  ]  res.json(list)})app.listen(3000, () => {  console.log('Server is running on port 3000')})

app.get('/api/restaurant/:id', (req, res) => {  const id = req.params.id  // 根据餐厅ID查询数据库获取餐厅详情数据  // 使用res.json()函数返回数据  const restaurant = {    id: 1,    name: '餐厅A',    images: ['xxx', 'xxx', 'xxx'],    address: 'xxx',    telephone: 'xxx',    reviews: [      { id: 1, content: '好吃啊', rating: 4.5 },      { id: 2, content: '太棒了', rating: 4.8 },      { id: 3, content: '一般般', rating: 4.2 }    ]  }  res.json(restaurant)})

<button>预订餐厅</button>

methods: {  book() {    // 跳转到预订页面，并传递餐厅ID    uni.navigateTo({      url: '/pages/booking?id=' + this.restaurant.id    })  }}

<template><view><uni-form><uni-form-item label="姓名"><uni-input v-model="name"></uni-input></uni-form-item><uni-form-item label="电话"><uni-input v-model="phone"></uni-input></uni-form-item></uni-form><uni-button>提交</uni-button></view></template><script>export default {  data() {    return {      name: '',      phone: '',      restaurantId: ''    }  },  onLoad(options) {    this.restaurantId = options.id  },  methods: {    submit() {      // 调用后端API进行预订操作      // 使用uni.request()函数发送HTTP请求      uni.request({        url: 'http://localhost:3000/api/booking',        method: 'POST',        data: {          name: this.name,          phone: this.phone,          restaurantId: this.restaurantId        },        success: (res) => {          if (res.data.success) {            uni.showToast({              title: '预订成功'            })          } else {            uni.showToast({              title: '预订失败'            })          }        },        fail: (err) => {          console.log(err)        }      })    }  }}</script>

app.post('/api/booking', (req, res) => {  const { name, phone, restaurantId } = req.body  // 处理预订操作，例如保存预订信息到数据库  // 使用res.json()函数返回预订结果  const success = true  res.json({ success })})