14. 开发在线点餐功能（一）

2037 字约 5 分钟读完768 次阅读更新于 2026/5/3

普通用户可见菜单和管理员区分开

展示所有的餐品

通过调用后端的接口拿到餐品的数据，然后进行渲染
404说明每调用成功，没找到这个接口

问题的根源是你的url写错了

404是一个极其简单的极其容易出现的问题，但是它不是什么大问题，它的解决方法也很简单，只要你的url写对了，后台有这个接口，并且可以访问，它就不会出现什么问题

宝贵的经验

拥有这个经验，就不用再百度了

.line1 {
    overflow: hidden; /* 确保超出容器的文本被裁剪 */
    white-space: nowrap; /* 确保文本在一行内显示 */
    text-overflow: ellipsis; /* 使用省略号表示文本超出 */
}

.line2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden; /* 确保超出容器的文本被裁剪 */
    text-overflow: ellipsis; /* 使用省略号表示文本超出 */
}

来个花里胡哨的绿

<el-tooltip :content="item.descr" placement="bottom" effect="customized">
  <div style="margin: 5px; color: #666" class="line1">{{ item.descr }}</div>
</el-tooltip>

<style>
.el-popper.is-customized {
  /* Set padding to ensure the height is 32px */
  padding: 6px 12px;
  background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
}

.el-popper.is-customized .el-popper__arrow::before {
  background: linear-gradient(45deg, #b2e68d, #bce689);
  right: 0;
}
</style>

本节课完成内容

本节课代码

<template>
  <div>
    <div class="card" style="margin-bottom: 5px">
      <div v-if="data.table.no">
        <div style="display: flex; align-items: center">
          <div style="flex: 1">
            <span style="margin-right: 10px">餐桌号：{{ data.table.no }}  开始点餐</span>
            <el-button type="primary" plain>已点餐品</el-button>
          </div>
          <el-button type="primary" @click="removeOrder">退桌</el-button>
        </div>
      </div>
      <div style="color:#666;" v-else>
        您还未选餐桌，请先 <a href="/home">选择餐桌</a> 再点餐
      </div>
    </div>

    <!-- 展示餐品-->
    <el-row :gutter="10">
      <el-col :span="6" v-for="item in data.foodsList" :key="item.id">
        <div class="card">
          <img :src="item.img" alt="" style="width: 100%; height: 280px">
          <div style="margin: 5px; color: #000; font-size: 18px">{{ item.name }}</div>
          <div style="margin: 5px; color: #666">
            <el-tooltip :content="item.descr" placement="bottom" effect="customized" v-if="item.descr.length >= 20">
              <div class="line1">{{ item.descr }}</div>
            </el-tooltip>
            <div v-else>{{ item.descr }}</div>
          </div>
          <div style="margin: 10px 0; text-align: right">
            <el-input-number :min="1" v-model="item.num" style="margin-right: 5px"></el-input-number>
            <el-button type="primary">点餐</el-button>
          </div>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script setup>
import {reactive} from "vue";
import request from "@/utils/request";
import router from "@/router";
import {ElMessage} from "element-plus";

const data = reactive({
  table: {},
  user: JSON.parse(localStorage.getItem('canteen-user') || '{}'),
  foodsList: []
})

const loadTable = () => {
  request.get('/tables/selectByUserId/' + data.user.id).then(res => {
    data.table = res.data || {}
  })
}
loadTable()

const removeOrder = () => {
  request.put('/tables/removeOrder', data.table).then(res => {
    if (res.code === '200') {
      ElMessage.success('退桌成功')
      loadTable()
    } else {
      ElMessage.error(res.msg)
    }
  })
}

const loadFoods = () => {
  request.get('/foods/selectAll').then(res => {
    data.foodsList = res.data || []
    data.foodsList.forEach(item => item.num = 1)
  })
}
loadFoods()
</script>

<style>
.el-popper.is-customized {
  /* Set padding to ensure the height is 32px */
  padding: 6px 12px;
  background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
}

.el-popper.is-customized .el-popper__arrow::before {
  background: linear-gradient(45deg, #b2e68d, #bce689);
  right: 0;
}
</style>