家庭点餐小程序开发

最新推荐文章于 2025-09-04 23:12:33 发布

原创最新推荐文章于 2025-09-04 23:12:33 发布 · 1.1k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

该文章已生成可运行项目，

家庭菜品点单小程序开发与部署指南（Java技术栈）

一、开发环境搭建

1. 开发工具选择

后端开发

IntelliJ IDEA：主流Java开发工具，支持Spring Boot快速开发（下载地址：https://www.jetbrains.com/idea/）
Maven：项目构建工具，需配置本地仓库和阿里云镜像加速

前端开发

微信开发者工具：小程序官方开发工具（下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html）
Vant Weapp：免费开源小程序UI组件库（官网：https://vant-contrib.gitee.io/vant-weapp）

2. 环境配置

Java环境

安装 JDK 17+，配置环境变量 JAVA_HOME
验证安装：java -version 应显示版本信息

数据库

安装 MySQL 8.0+，创建数据库 family_food_order

创建初始用户表（示例）：

CREATE TABLE users (
  openid VARCHAR(128) PRIMARY KEY,
  nickname VARCHAR(50),
  role ENUM('aunt', 'member'),
  family_id VARCHAR(36)
);

二、后端开发（Spring Boot）

1. 项目初始化

在IDEA中创建Spring Boot项目，添加依赖：

<!-- Spring Web -->
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- MySQL驱动 -->
<dependency>
  <groupId>mysql</groupId>
  <artifactId>mysql-connector-java</artifactId>
</dependency>
<!-- MyBatis-Plus -->
<dependency>
  <groupId>com.baomidou</groupId>
  <artifactId>mybatis-plus-boot-starter</artifactId>
  <version>3.5.3</version>
</dependency>

配置数据库连接（application.properties）：

spring.datasource.url=jdbc:mysql://localhost:3306/family_food_order?useSSL=false&serverTimezone=Asia/Shanghai
spring.datasource.username=root
spring.datasource.password=your_password
mybatis-plus.mapper-locations=classpath*:mapper/*.xml

2. 核心功能开发

菜品管理接口

创建实体类 Dish.java：

@Data
@TableName("dishes")
public class Dish {
  @TableId(type = IdType.AUTO)
  private Long id;
  private String name;
  private JSONArray ingredients; // 食材列表
  private JSONArray seasonings; // 调料列表
  private JSONArray steps; // 步骤说明
  private String creatorOpenid;
}

编写Mapper和Service层（使用MyBatis-Plus）：

public interface DishMapper extends BaseMapper<Dish> {}

@Service
public class DishService extends ServiceImpl<DishMapper, Dish> {
  public List<Dish> getDishesByCreator(String openid) {
    return lambdaQuery().eq(Dish::getCreatorOpenid, openid).list();
  }
}

订单处理接口

创建订单实体 Order.java：

@Data
@TableName("orders")
public class Order {
  @TableId(type = IdType.AUTO)
  private Long id;
  private String userId;
  private JSONArray dishList;
  private Integer status; // 0-待确认 1-已确认 2-已完成
  private LocalDateTime createTime;
}

实现订单汇总逻辑（云函数示例）：

@RestController
@RequestMapping("/api/order")
public class OrderController {
  @Autowired
  private OrderService orderService;

  @PostMapping("/submit")
  public Result submitOrder(@RequestBody Order order) {
    order.setCreateTime(LocalDateTime.now());
    orderService.save(order);
    return Result.success();
  }
}

三、前端开发（微信小程序）

1. 引入Vant Weapp组件

初始化npm环境：

npm init -y
npm install @vant/weapp --save

配置小程序 app.json：

{
  "usingComponents": {
    "van-button": "@vant/weapp/button/index",
    "van-card": "@vant/weapp/card/index",
    "van-list": "@vant/weapp/list/index"
  }
}

2. 核心页面开发

菜品列表页（成员端）

页面结构（dishes.wxml）：

<van-list
  loading="{{loading}}"
  finished="{{finished}}"
  bindload="onLoad"
>
  <van-card
    wx:for="{{dishList}}"
    wx:key="id"
    title="{{item.name}}"
    thumb="{{item.steps[0].image}}"
  >
    <view slot="footer">
      <van-button type="primary" bindtap="placeOrder">点单</van-button>
    </view>
  </van-card>
</van-list>

数据请求逻辑（dishes.js）：

Page({
  data: {
    dishList: [],
    loading: false,
    finished: false
  },
  onLoad() {
    wx.request({
      url: 'https://your-api-domain/api/dish/list',
      success: (res) => {
        this.setData({
          dishList: res.data.data
        });
      }
    });
  }
});

订单管理页（阿姨端）

使用Vant的 van-checkbox-group 实现批量操作：

<van-checkbox-group bindchange="onCheckChange">
  <van-checkbox wx:for="{{orderList}}" wx:key="id" value="{{item.id}}">
    {{item.dishList[0].name}} - {{item.status === 0 ? '待确认' : '已确认'}}
  </van-checkbox>
</van-checkbox-group>
<van-button type="primary" bindtap="confirmOrders">批量确认</van-button>

四、程序部署

1. 后端部署（阿里云服务器示例）

环境准备

购买阿里云ECS实例（推荐配置：2核4G，CentOS 8.5）
开放安全组端口：80（HTTP）、443（HTTPS）、3306（MySQL）

部署步骤

上传项目jar包到服务器：

scp target/family-food-order.jar root@your-ip:/opt/

使用Nginx反向代理（配置文件 /etc/nginx/conf.d/food.conf）：

server {
  listen 80;
  server_name your-domain.com;
  location / {
    proxy_pass http://localhost:8080;
    proxy_set_header Host $host;
  }
}

启动应用：

nohup java -jar family-food-order.jar --server.port=8080 &

2. 前端部署

在微信开发者工具中配置服务器域名：
- 登录小程序管理后台 → 开发管理 → 开发设置 → 服务器域名
- 添加API域名：https://your-domain.com
上传代码并发布：
- 开发者工具中点击「上传」，填写版本号和备注
- 登录管理后台 → 开发管理 → 开发版本 → 提交审核 → 发布

五、关键技术点

1. 权限控制

在后端接口中校验用户角色：

@Interceptor
public class AuthInterceptor implements HandlerInterceptor {
  @Override
  public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) {
    String openid = request.getHeader("X-Openid");
    User user = userService.getById(openid);
    if (user.getRole().equals("member") && request.getRequestURI().startsWith("/api/aunt")) {
      response.sendError(HttpServletResponse.SC_FORBIDDEN);
      return false;
    }
    return true;
  }
}

2. 数据加密传输

申请阿里云免费SSL证书，配置Nginx启用HTTPS：

server {
  listen 443 ssl;
  server_name your-domain.com;
  ssl_certificate /etc/nginx/cert/fullchain.pem;
  ssl_certificate_key /etc/nginx/cert/privkey.pem;
}

3. 前端性能优化

使用Vant的 van-lazyload 实现图片懒加载：

<van-image
  lazy-load
  src="{{item.steps[0].image}}"
/>

六、成本分析

项目	云服务器方案（年）	本地服务器方案
服务器成本	阿里云入门级约500元	自备电脑/树莓派
域名费用	约50元	无需
SSL证书	免费（阿里云）	需自签名
运维成本	低（托管服务）	高（自行维护）