0前提

温馨提示：我做的思路可能是复杂化了或者说代码写的不规范，如果你觉得可以更加简便的话欢迎分享到评论区或者自己改写一下我的代码，我的后端是写的很简单的没有什么路由分发是直接写的，你可以自由优化，以及在需要验证用户是否登录和验证用户token是否正确的我没有进行验证，你们可以自行添加 小程序的其他部分你可以看看我往期的文章

1.一些准备

1.1表

反馈表feedback

字段名称	类型（长度）	允许空	主键	外键	自增	唯一	说明
id	int	否	是	否	是	是	反馈id
title	varchar(20)	否	否	否	否	否	标题
content	varchar(20)	否	否	否	否	否	内容
images	varchar(200)	否	否	否	否	否	详情表
userId	int	否	否	是	否	否	用户id
communityId	int	否	否	是	否	否	小区id
creatTime	timestamp	否	否	是	否	否	创建时间
updateTime	timestamp	否	否	是	否	否	更新时间

1.2总体思路

描述：在平台上有多个小区，每个小区都有一个小区反馈的小区反馈页，用户可以在小区反馈页进行反馈小区存在的问题以及平台存在的问题，这些反馈将由超级管理员和小区管理在后台管理端进行查看（进一步的写法是这个小区反馈还可以进行回复，就是像一个个工单，用户进行反馈，管理员在管理端进行回复，用户在管理员回复之后可以查看这个反馈被回复的信息）

实现：反馈的内容有反馈标题，反馈内容和反馈图片，标题和内容就用v-model双向绑定就好了，反馈图片的话就需要用到uniapp本身提供的图片上传功能（这个图片上传功能进一步完善是需要开启一下cos储存，将图片储存你的云仓库里面去，这样子公网才能进行访问），同时反馈的下方还可以加入联系平台的方式，让这个反馈页面更加具有帮助性

2.前端

前端：用户填写完标题和内容以及上传图片之后，点击发布反馈，发布反馈时检查一下内容是否填写，用户填写了之后才能进行发布请求

代码实现：

   
    // 选择图片进行上传
    chooseImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePaths = res.tempFilePaths;
          this.images.push(tempFilePaths[0]);
        }
      });
    },
    // 提交反馈
    async submitFeedback() {
      if (!this.feedback.title || !this.feedback.content) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none'
        });
        return;
      }
      this.feedback.images = this.images.join(',');
      const res = await this.$myRequest({
        method: 'post',
        url: '/fafankui',
        data: {
          title: this.feedback.title,
          content: this.feedback.content,
          images: this.feedback.images,
          userId: this.$store.state.user.id,
          communityId: this.$store.state.communityId
        }
      });
      uni.showToast({
        title: '反馈提交成功',
        icon: 'success'
      });
      // 清空表单数据和已上传图片
      this.feedback.title = '';
      this.feedback.content = '';
      this.feedback.images = '';
      this.images = [];
      setTimeout(() => {
        uni.navigateBack();
      }, 1000); // 延迟1秒（1000毫秒）后执行navigateBack
    }

3.后端

后端：接受前端用户传来小区反馈信息，保存到小区反馈表里面（接口编写逻辑：接口名字-接收前端传值-sql语句-sql操作-返回信息）代码实现：

// 发布反馈的接口
app.post('/fafankui', (req, res) => {
  // 从请求体中获取反馈数据
  const {
    title,
    content,
    images,
    userId,
    communityId
  } = req.body;

  // 将反馈数据插入到数据库中
  const query = 'INSERT INTO feedback (title, content, images, userId, communityId) VALUES (?, ?, ?, ?, ?)';
  connection.query(query, [title, content, images, userId, communityId], (err, results) => {
    if (err) {
      console.log(err);
      return res.json({
        error: '提交反馈失败，请稍后重试',
      });
    }
    // 返回成功消息
    res.json({
      success: '反馈提交成功',
    });
  });
});

4.验证结果

在这里插入图片描述

uniapp+node.js前后端平台的小区反馈（社区管理平台的小程序）

0前提