爱猫程序员给自家小猪咪做了一个上门喂养小程序

🐱前言

每次一到节假日，都好想和好朋友们一起出去玩，但是心里总放不下家里的小猪咪，于是心想能不能找一个喂养师上门喂养呢。于是找了几个上门喂养的平台，并最终下单了服务。

真的不得不说，上门喂养的小姐姐真的非常用心和专业。她们来到我家期间，全情投入地照顾着我的毛孩子，让它吃得饱饱的，看起来胖乎乎的。更令我感动的是，她们还全程录像了照料过程，并将视频发送给我，让我能够时刻了解小猪咪的情况。

分享下小猪咪美照👇

🤔️思考

我也是程序员，为什么我不能自己也做一个上门喂养的小程序呢，于是经过调研，发现了其他的几个平台各有各的弊端和优点，然后诞生出了最初的想法如何做一个把其他平台的弊端去除掉，做一个最好的上门喂养平台。

🎨开始设计

于是开始琢磨figma～～～

因为任何c端都是通过首页再去衍生出其他页面 整体样式的，所以先着手制作首页，只要首页定好了其他页面都好说。

一周后....开始着手设计🤔️...思考...参考....初版定稿

由于刚入门设计一开始丑丑的，不忍直视～～～

再经过几天的琢磨思考...改版...最终确定首页

经过不断的练习琢磨参考最后定稿，给大家推荐下我经常参考我素材网站花瓣

N天之后......其他页面陆续出炉

由于页面太多了就不一一展示啦～～～

最满意的设计页面

给各大掘友分享一下我最满意的设计页面

签到

结合了猫咪的元素统一使用了同一只猫咪素材～整体效果偏向手绘风格。

抽奖扭蛋

这个扭蛋机真是一笔一画画了一天才出来的，真的哭😭啦～，由于AE动画太过麻烦所以每一个扭蛋球球的滚动都用代码去实现～～

💻编程

技术选型

uniapp + nestjs + mysql

NestJS是一个基于Node.js的开发框架，它提供了一种构建可扩展且模块化的服务端应用程序的方式，所以对于前端而言是最好上手的一门语法。

Nestjs学习推荐

给各大掘友推荐一下本人从0到1上手nestjs的教程，就是一下小册就是以下这本，初级直接上手跟着写一遍基本就会啦

建议学习到 61章左右就可以开始写后端项目啦

小程序端基本使用逻辑

用户下单-服务人员上门服务完成-用户检查完成后确认订单完成-订单款项打款到服务人员钱包
用户注册成为服务人员-设置服务范围-上线开始服务-等待用户给服务人员下单

下单流程

选择服务地点-选择服务人员-点击预约-添加服务宠物-付款

服务人员认证流程

根据申请流程逐步填写，由于服务人员是平台与用户产生信任的标准，所以我们加大了通过审核的门槛，把一些只追求利益，而不是真正热爱宠物的人员拒之门外，保护双方利益。

后端Nestjs部署

后端代码写完之后我们需要把服务部署到腾讯云，以下是具体步骤

1.腾讯云创建镜像仓库

前往腾讯云创建容器镜像服务，这样我们就可以把本地docker镜像推送到腾讯云中了，这个容器镜像服务个人版是免费的

2.打包Nestjs

通过执行docker 命令部署到本地的docker

👇以下是具体docker代码

js 复制代码

FROM --platform=linux/amd64 node:18-alpine3.14 as build-stage

WORKDIR /app

COPY package.json .
COPY cert .
COPY catdogship.com_nginx .
COPY ecosystem.config.js .

RUN npm config set registry https://registry.npmmirror.com/

RUN npm install

COPY . .

# 第一个镜像执行 build
RUN npm run build

# FROM 继承 node 镜像创建一个新镜像
FROM --platform=linux/amd64 node:18-alpine3.14  as production-stage

# 通过 COPY --from-build-stage 从那个镜像内复制 /app/dist 的文件到当前镜像的 /app 下
COPY --from=build-stage /app/package.json /app/package.json
COPY --from=build-stage /app/ecosystem.config.js /app/ecosystem.config.js

COPY --from=build-stage /app/dist /app/src/
COPY --from=build-stage /app/cert /app/cert/
COPY --from=build-stage /app/public /app/public/
COPY --from=build-stage /app/static /app/static/
COPY --from=build-stage /app/catdogship.com_nginx /app/catdogship.com_nginx/

WORKDIR /app

# 切到 /app 目录执行 npm install --production 只安装 dependencies 依赖
RUN npm install --production

RUN npm install pm2 -g

EXPOSE 443

CMD ["pm2-runtime", "/app/ecosystem.config.js"]

3.推送到腾讯云

本地打包完成之后我们需要把本地的docker 推送到腾讯云中，所以我们本地写一个sh脚本执行推送

sh 复制代码

#!/bin/bash

# 生成当前时间
timestamp=$(date +%Y-%m-%d-%H-%M)

# Step 1: 构建镜像
docker build -t hello:$timestamp .

# Step 2: 查找镜像的标签
image_id=$(docker images -q hello:$timestamp)

# Step 3: 为镜像添加新的标签
docker tag $image_id 你的腾讯云镜像地址:$timestamp

docker push 你的腾讯云镜像地址:$timestamp

4.部署到服务器

由于我使用的是轻量级应用服务器，所以直接使用自动化助手去进行部署（PS：可能有一些小伙伴会问为什么用轻量级应用服务器呢，因为目前用户量不是很多，轻量级应用服务器足够支撑，后面用户量起来会考虑转为k8s集群）

然后我们去创建一个自动化执行命令，去执行服务器的docker部署

创建命令

执行命令

👇以下是命令代码

js 复制代码

# 停止服务
docker stop hello

# 删除容器
docker rm hello

# 拉取镜像
docker pull 你的腾讯云镜像地:{{key}}

#读取image名称
image_id=$(docker images -q 你的腾讯云镜像地:{{key}})

# 运行容器
docker run -d -p 443:443 -e TZ=Asia/Shanghai --name hello $image_id

5.部署完成

命令返回执行结果显示执行完成，说明已经部署成功了

6.Nestjs服务器端的管理

由于node是一个单线程，所以我们使用的是pm2去进行管理node，它可以把node变成一个多线程并进行管理

由于nestjs中使用到了定时任务，而定时任务只需要开一条线程去做就好了，所以我增加了一个环境变量NODE_ENV来对定时任务进行管理

js 复制代码

module.exports = {
  apps: [
    {
      name: 'wx-applets',
      // 指定要运行的应用程序的入口文件路径
      script: '/app/src/main.js',
      exec_mode: 'cluster',
      // 集群模式下的实例数-启动了2个服务进程
      instances: 4,
      // 如果设置为 true，则避免使用进程 ID 为日志文件添加后缀
      combine_logs: true,
      // 如果服务占用的内存超过300M，会自动进行重启。
      // max_memory_restart: '1000M',
      env: {
        NODE_ENV: 'production',
      },
    },
    {
      name: 'wx-applets-scheduled-tasks',
      script: '/app/src/main.js',
      instances: 1,
      // 采用分叉模式，创建一个单独的进程
      exec_mode: 'fork',
      env: {
        NODE_ENV: 'tasks',
      },
    },
  ],
};