uniapp+node.js前后端平台的小区指引列表,小区指引详情(社区管理平台的小程序)

@TOC


👍 点赞,你的认可是我创作的动力!

⭐️ 收藏,你的青睐是我努力的方向!

✏️ 评论,你的意见是我进步的财富!


0前提

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

1.一些准备

1.1表

指引表guide

字段名称 类型(长度) 允许空 主键 外键 自增 唯一 说明
id int 指引id
title varchar(20) 标题
content varchar(20) 内容
images varchar(20) 详情表
adminId int 管理员id
communityId int 小区id
creatTime timestamp 创建时间
updateTime timestamp 更新时间

1.2总体思路

描述:在平台上有多个小区,每个小区都有自己的小区指引,小区指引包括小区介绍、小区附近交通、小区附近医院、小区物业电话等等,放一下关于小区的指引信息,帮助用户在平台小区上更加了解小区。小区指引由小区管理员进行发布和管理的,可以进行实时更新修改。

实现:当用户在首页点击小区指引时就跳转到小区指引列表页,在页面加载时去获取用户所在的当前小区存在的指引列表,当用户点击指引之后将指引id传入指引详情页,指引详情页获取指引id在页面加载时去获取到对应的指引详情

2.前端

前端:当用户在首页点击小区指引时就跳转到小区指引列表页,里面列出这个小区存在哪一些指引,当用户点击指引之后就跳转到对应的指引详情页

代码实现:

     goDetails(id) {
      uni.navigateTo({
        url: '/pages/zhiyinDetails/zhiyinDetails?id=' + id
      });
    },
    // 获取指引列表
    async guideList() {
      try {
        const res = await this.$myRequest({
          method: 'get',
          url: '/guideList?communityId=' + this.$store.state.communityId
        });
        console.log(res.data.data);
        // 假设后端返回错误时包含一个名为 'error' 的字段
        if (res.error) {
          this.$message.error(res.error);
        } else {
          //提取属性
          this.zhiyinList = res.data.data;
        }
      } catch (error) {
        // 捕获异常,显示通用错误消息或者其他处理
        console.error('请求发生错误:', error);
      }
    }
//获取指引详情的信息
async guideDetails(guideId) {
  try {
    const res = await this.$myRequest({
      method: 'get',
      url: `/guideDetails?guideId=${guideId}`
    });
    console.log(res.data.data);
    // 假设后端返回错误时包含一个名为 'error' 的字段
    if (res.error) {
      this.$message.error(res.error);
    } else {
      //提取属性
      this.guide = res.data.data;
    }
  } catch (error) {
    // 捕获异常,显示通用错误消息或者其他处理
    console.error('请求发生错误:', error);
  }
}

3.后端

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

// 获取指引信息列表  
app.get('/guideList', (req, res) => {
  const communityId = req.query.communityId
  console.log(communityId);
  const query = `SELECT * from guide where communityId=? ORDER BY createTime DESC`; // 根据创建时间降序排序  
  connection.query(query, [communityId], (err, results) => {
    if (err) {
      console.log(err);
      return res.json({
        error: '获取热点列表失败请稍后重试',
      });
    }

    // 返回处理后的结果集  
    res.json({
      data: results,
    });
  });
});
// 获取指引详情
app.get('/guideDetails', (req, res) => {
  console.log(req.query);
  const guideId = req.query.guideId
  const query = `SELECT * from  guide where id=? ORDER BY createTime DESC`; // 根据创建时间降序排序  
  connection.query(query, [guideId], (err, results) => {
    if (err) {
      console.log(err);
      return res.json({
        error: '获取热点信息失败请稍后重试',
      });
    }
    // 返回处理后的结果集  
    res.json({
      data: results[0],
    });
  });
});

4.验证结果

uniapp+node.js前后端平台的小区指引列表,小区指引详情(社区管理平台的小程序)

uniapp+node.js前后端平台的小区指引列表,小区指引详情(社区管理平台的小程序)

5.每日一题:

介绍一下面对对象的三大特征

面对对象编程(OOP)的三大特征主要包括:封装、继承和多态。

  1. 封装:封装是面向对象编程的核心思想,它强调的是把对象的属性和方法结合成一个独立的单位,并尽可能隐藏对象的内部细节,只对外提供一些公共的方法来访问该对象。封装的主要目的是增强安全性和简化编程,使用者只能通过对象对外提供的有限的方法来访问对象,这就隐藏了对象内部的复杂逻辑,使得代码更易于管理和使用。封装还有助于实现代码的模块化和信息隐藏,提高程序的可维护性和可重用性。
  2. 继承:继承是一种层次模型,它表示类型之间的父子关系。通过继承,子类可以自动拥有父类的属性和方法,这有助于我们实现代码的复用。子类可以在继承父类的基础上添加新的属性和方法,或者覆盖父类的某些方法,以满足特定的需求。继承不仅使得代码结构更加清晰,也提高了代码的可维护性和可扩展性。
  3. 多态:多态是指允许将父对象设置成为和一个或更多的他的子对象相等的技术,赋值之后,父对象就可以根据当前赋值给它的子对象的特性以不同的方式运作。简单来说,就是允许将子类类型的指针赋值给父类类型的指针。多态的主要作用在于消除了类型之间的耦合关系,使得代码更加灵活和可扩展。通过多态,我们可以编写更加通用和灵活的代码,以适应不同的需求和场景。

原文链接:https://juejin.cn/post/7351649413402656820 作者:云边散步

(0)
上一篇 2024年3月30日 下午4:23
下一篇 2024年3月30日 下午4:28

相关推荐

发表评论

登录后才能评论