【景途无忧微信小程序】——零基础手把手带你实现，既能连接数据库，又能实现多项功能的前后端交互的微信小程序设计（下）

最新推荐文章于 2025-04-02 23:14:02 发布

Y小夜

最新推荐文章于 2025-04-02 23:14:02 发布

阅读量817

点赞数 25

分类专栏：微信小程序文章标签：微信小程序小程序

本文链接：https://blog.youkuaiyun.com/shsjssnn/article/details/144895798

版权

微信小程序专栏收录该内容

3 篇文章

订阅专栏

🎼个人主页：【Y小夜】

😎作者简介：一位双非学校的大三学生，编程爱好者，

专注于基础和实战分享，欢迎私信咨询！

🎆入门专栏：🎇【MySQL，Java基础，Rust】

🎈热门专栏：🎊【Python，Javaweb，Springboot】

感谢您的点赞、关注、评论、收藏、是对我最大的认可和支持！❤️

🎈AI小助手界面

🎊百度智能云平台

这里我们在百度智能云平台，上注册一个自己的智能体，用于微信小程序的调用。

百度智能云千帆AppBuilder

点击个人空间，再点击创建应用，在点击自主规划agent

填写相关的设定

进行发布

发布后，查看调用API文档

先进行新建对话id，

点击调试，生成conversation_id

再点击对话，填写conversation_id

测试后点击实例代码。再点击node.js，然后用AI将语言转为微信开发者工具，就完成了。

🎊前端服务

🎄功能展示

🎁myAI,js

Page({
  data: {
    question: "",
    conversation: [] // 用于存储对话的数组
  },

  // 获取文本框中的内容
  quesInput(e) {
    this.setData({
      question: e.detail.value
    });
  },

  // 发送问题
  send(e) {
    const userMessage = this.data.question;
    if (userMessage.trim() === "") return; // 如果输入为空则不处理

    // 添加用户消息到对话数组
    this.setData({
      conversation: [...this.data.conversation, { role: 'user', message: userMessage }],
      question: ""
    });

    this.getAnswer(userMessage);
  },

  // 接口函数
  getAnswer: function (userMessage) {
    const that = this;
    wx.request({
      url: 'https://qianfan.baidubce.com/v2/app/conversation/runs', // 接口地址
      method: 'POST',
      data: {
        "app_id": "*********",
        "query": userMessage,
        "conversation_id": "****",
        "stream": false
      },
      header: {
        'Content-Type': 'application/json',
        'X-Appbuilder-Authorization': 'Bearer bce*******' // 实际的授权令牌
      },
      success: function (res) {
        console.log(res.data);
        // 处理请求成功的情况
        that.setData({
          conversation: [...that.data.conversation, { role: 'bot', message: res.data.answer }]
        });
      },
      fail: function (error) {
        console.error(error);
        // 处理请求失败的情况
        wx.showToast({
          title: '请求失败',
          icon: 'none'
        });
      }
    });
  }
});

🎁myAI,wxml

<!-- pages/myAI/myAI.wxml -->
<view class="content">
  <text class="title">景途无忧小助手</text>
  <view class="chat">
    <block wx:for="{{conversation}}" wx:key="index">
      <view class="message {{item.role === 'user' ? 'user-message' : 'bot-message'}}">
        {{item.message}}
      </view>
    </block>
  </view>
  <input bindinput="quesInput" value="{{question}}" placeholder="请输入您的问题"/>
  <button bindtap="send">发送</button>
</view>

🎄页面展示

🎈数据库

🎊数据库设计

数据库是由多个相互关联的数据表组成,本数据库利用MySQL实现并完成数据库的设计，在本系统中包括如下：确定数据库内所有数据表的名称及表内所含字段的名称、类型、长度、主键及是否为空；确定数据库文件是否需要建立索引、是否具有外键等等。

🎄数据库表设计

1.用户表（user）用于存储用户相关信息内容，如表2-1所示：

表2-1 用户表

序号	字段名称	字段说明	类型	位数	属性
1	uid_id	用户编号	int	10	必填,非空,主键、自增
2	username	账号名称	varchar	100	必填,默认NULL
3	password	密码	varchar	100	必填,默认NULL
4	phone	电话号	varchar	100	必填,默认NULL
5	address	地址	varchar	100	必填,默认NULL

2.景点票价信息表（ticket）用于存储景点票价的相关信息，如表2-2所示：

表2-2 景点票价信息表

序号	字段名称	字段说明	类型	位数	属性
1	id	编号	int	10	必填,主键、自增
2	name	景点名称	varchar	100	必填,默认NULL
3	price	票价	int	10	必填,默认NULL
4	url	图片地址	varchar	100	必填,默认NULL

3.订单表（orders）用于用户购买门票的订单相关信息，如表2-3所示：

表2-3 订单表

序号	字段名称	字段说明	类型	位数	属性
1	id	编号	int	10	必填,主键,自增
2	t_id	门票编号	int	100	必填,非空
3	u_name	用户名	varchar	100	必填,非空
4	time	购票时间	datatime	100	必填,非空