16. 开发在线点餐功能（三）

2074 字约 5 分钟读完711 次阅读更新于 2026/5/3

我们点餐的数据存储在页面上，没有存到数据库，所以页面刷新会清空数据
所以点餐的过程中不能刷新页面，要一次性点餐完成，然后下单

订单模块SQL

CREATE TABLE `orders` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'ID',
  `content` varchar(1000) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '菜单内容',
  `total` decimal(10,0) DEFAULT NULL COMMENT '总价',
  `user_id` int(11) DEFAULT NULL COMMENT '点餐人',
  `time` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '点餐时间',
  `status` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '订单状态',
  `order_no` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '订单编号',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='订单信息';

前端下单的逻辑

// 下单逻辑
const save = () => {
  if (data.orderList.length === 0) {
    ElMessage.warning('请选择餐品')
    return
  }
  let content = ''
  data.orderList.forEach(item => {
    content += item.name + 'x' + item.num + '，'
  })
  content = content.substring(0 , content.length - 1)  //  理论上来说 最后会多出一个逗号，所以我们去掉最后一个逗号即可 菜单的内容： 腊肠炒芹菜x1, 糖醋排骨x2
  let orderData = {  content:  content, total: data.orderTotal, userId: data.user.id, status: '待出餐'}
  request.post('/orders/add', orderData).then(res => {
    if (res.code === '200') {  // 下单成功
      ElMessage.success('下单成功，请在我的订单里查看订单状态')
      data.dialogShow = false
    } else {
      ElMessage.error(res.msg)
    }
  })
}

后台下单逻辑

public void add(Orders orders) {
    // 设置唯一的订单号
    String orderNo = IdUtil.fastSimpleUUID();
    orders.setOrderNo(orderNo);
    orders.setTime(DateUtil.now());  // 当前的年月日 时分秒
    ordersMapper.insert(orders);
}

排查问题，页面不显示某个字段的数据怎么办？

image.png

  1. 看页面，页面的表格的字段写的对不对

image.png

  1. 看网络，看网络有没有返回数据

image.png

  1. 看后台，看看你的接口是怎么写的，看看你的sql有没有报错

image.png

最后解决问题：实体类缺少了字段
image.png

用户只能看到自己的订单

<select id="selectAll" resultType="com.example.entity.Orders">
    select orders.*, user.name userName from orders
    left join user on orders.user_id = user.id
    <where>
        <if test="userName != null">
            and user.name like concat('%', #{userName}, '%')
        </if>
        <if test="userId != null">
            and orders.user_id = #{userId}
        </if>
    </where>
    order by orders.id desc
</select>

前端查询的时候做条件判断，只有用户登录查询的时候，才传userId数据

const load = () => {
  request.get('/orders/selectPage', {
    params: {
      pageNum: data.pageNum,
      pageSize: data.pageSize,
      userName: data.userName,
      userId: data.user.role === 'USER' ? data.user.id : null
    }
  }).then(res => {
    data.tableData = res.data?.list || []
    data.total = res.data.total
  })
}