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

最新推荐文章于 2025-04-01 17:13:59 发布

Y小夜

最新推荐文章于 2025-04-01 17:13:59 发布

阅读量1.3k

点赞数 36

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

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

版权

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

3 篇文章

订阅专栏

🎼个人主页：【Y小夜】

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

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

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

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

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

🎈系统设计

🎊系统的功能模块

景途无忧小程序主要分为首页、AI小助手、订单、我的四大页面部分。微信用户首先看到的登录界面，如果已有账号，则可以直接进行登录，若无账号，可以点击注册，进行新用户注册，然后再进行登录。用户登录后，跳转到首页，首页对数据库中的景点数据进行展示，并且用户可以根据景点名称对感兴趣的景点进行搜索，用户也可以对景点的门票进行购买，加入订单中。进入小助手页面，本页面是调用智能云平台创建的旅游小助手智能体，用于对用户提出的关于旅游的问题进行回答。在订单页面，用户可以查看自己购买的门票，并且可以对订单进行取消操作。在我的页面，用户可以进行查看个人信息、快速注册、退出登录或查看关于我们的界面。系统的功能模块如图所示：

🎊系统总体设计

登录界面 index

此界面是用户输入用户名、密码进行登录的界面。

注册界面 regist

用户通过账号、输入密码、电话号、地址进行快速注册的界面。

主要界面pages

主要存储主界面和分界面的设计。

🎊接口设计

1.数据库中数据操作sql_server_api

“数据库操作”接口：使用node.js搭建本地服务器进行数据库的连接。进行景点查询、订单查询、增加、删除等操作。

编写：BaseDB.js文件进行数据库的连接，其中使用createConnection函数。

2.程序中的数据操作

(1)“经典的功能操作”接口：pages

该接口具有的方法如下：

login()方法用于检查用户输入的用户名与密码是否匹配数据库中的用户信息，从而确定能否登录系统。
regist()方法用于用户将输入的账户、密码、手机号、住址插入导数据库中，实现新用户的注册。
select()方法用于对用户输入景点名称进行搜索，将搜索后的数据在页面进行展示。
createOrder()方法用于用户对景区门票进行购买。
send()方法是用于用户发送问题，AI小助手对其问题进行回答。
delOrder()方法用于删除订单操作。

🎈主页

🎊后端服务端

🎄搜索功能

router.post("/ticket/select",(res,resp)=>{
    //获取参数
    let name=res.body.name
    //编写sql
    let sql=`
        select * from ticket where name like '%${name}%'
    `
    //执行sql
    db.query(sql,(err,res)=>{
        //错误
        if(err){
            resp.send(result.fail(err))
        }else{
            resp.send(result.success(res))
        }
    })
})

🎄景区展示

//所有门票的展示
router.get("/ticket/list",(req,resp)=>{
    //定义sql
    let sql=`
        select * from ticket   
    `
    //执行sql
    db.query(sql,(err,res)=>{
        //发生错误
        if(err){
            resp.send(result.fail(err))
        }else{
            resp.send(result.success(res))
        }
    })
})

🎄购买门票

router.post('/ticket/buy',(res,resp)=>{
    //获取参数
    let t_id=res.body.t_id
    let u_name=res.body.u_name
    //编写sql
    let sql=`
        insert into orders(t_id,u_name) values(?,?)`  
    //定义参数
    let params=[t_id,u_name]
    //执行sql
    db.query(sql,params,(err,res)=>{
        if(err){
            resp.send(result.fail(err))
        }else{
            resp.send(result.success(res))
        }
    })  
})

🎊前端服务

🎄功能展示

🎁home.js

// pages/home/home.js
const app=getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    //轮播图
    lunbo_images:[
      "/images/one.jpg",
      "/images/two.jpg",
      "/images/three.jpg",
      "/images/four.jpg"
    ],
    // 票价列表
    ticket_list:[],
    //输入的景区名
    name:""
  },
//搜索输入框
input(e){
  let name=e.detail.value
  this.setData({
    name:name
  })
},
//执行搜索命令
select(e){
  wx.request({
    url: app.globalData.baseUrl+'/ticket/select',
    method:'POST',
    data:{
      "name":this.data.name
    },
    success:(res)=>{
      //设置数据
      this.setData({
        ticket_list:res.data.data
      })
      //查不到数据的情况
      if(res.data.code==0&&res.data.data.length==0){
        // 给出提示，并重新加载本页面
        setTimeout(()=>{
          wx.showToast({
            title: '没有相关景区',
            icon:'error',
          },3000)
        })
      }
    }
  })
},
  // 创建订单
  createOrder(e){
    //获取要下单id
    let ticketid = e.currentTarget.dataset.ticketid
    //购买询问
    wx.showModal({
      title: '提醒',
      content: '您确定购买吗？',
      success(res){
        if (res.confirm) {
        //得到全局用户名
        let username=app.globalData.username
        // console.log(ticketid,username)
        // 购买请求
        wx.request({
          url: app.globalData.baseUrl+'/ticket/buy',
          method:"POST",
          data:{
            "u_name":username,
            "t_id":ticketid
          },
          success:(res)=>{
            if(res.data.code==0){
              wx.showToast({
                title: '购买成功',
                icon:'success'
              })
            }
          }
        })
        }
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    wx.request({
      url: app.globalData.baseUrl +"/ticket/list",
      method:"GET",
      success:(res)=>{
        //设置数据
        this.setData({
          ticket_list:res.data.data
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    wx.request({
      url: app.globalData.baseUrl +"/ticket/list",
      method:"GET",
      success:(res)=>{
        //设置数据
        this.setData({
          ticket_list:res.data.data
        })
      }
    })
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

🎁home.wxml

<!--pages/home/home.wxml-->
<view class="contant">
<!-- 标题 -->
<text class="one">景途无忧</text>
  <!-- 轮播图 -->
  <view class="lunbo">
    <swiper autoplay="true" indicator-dots="true" interval="2500" circular="ture">
      <swiper-item wx:for="{{lunbo_images}}" wx:key="*this">
        <image src="{{item}}" />
      </swiper-item>
    </swiper>
  </view>
  <view class="select">
<input class="s1" type="text" bind:input="input" placeholder="请输入景区名称"/> 
<button class="s2" bind:tap="select">搜索</button>
</view>
  <!-- 旅游票 -->
  <view class="ticket_content">
    <view class="ticket_list" wx:for="{{ticket_list}}" wx:key="id">
      <image class="img" src="{{item.url}}" />
      <view>
        <text>{{item.name}}</text>
        <text>{{item.price}}￥/张</text>
        <button class="btn" bind:tap="createOrder" data-ticketid="{{item.id}}">购买</button>
      </view>
    </view>
  </view>
</view>

🎄页面展示

🎈订单页

🎊后端服务器

🎄订单查询

//订单的展示
router.post("/select/order",(res,resp)=>{
    //获取参数
    let u_name = res.body.u_name;
    //编写sql
    let sql = `
        select o.id,o.time,t.name,t.url from orders o,ticket t where o.t_id=t.id and o.u_name=?`;
    //定义参数
    let params = [u_name];
    //执行sql
    db.query(sql, params, (err, res) => {
        if (err) {
            resp.send(result.fail(err));
        } else {
            resp.send(result.success(res));
        }
    })
})

🎄订单取消

//取消订单
router.post("/del/order",(res, resp)=>{
    //获取参数
    let id = res.body.id;
    console.log(id)
    //编写sql
    let sql = `delete from orders where id=?`;
    //定义参数
    let params = [id];
    //执行sql
    db.query(sql, params, (err, res) => {
        if (err) {
            resp.send(result.fail(err));
        } else {
            resp.send(result.success(res));
        }
    })
})

🎊前端服务

🎄功能展示

🎁order.js

// pages/order/order.js
const app=getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    order_list:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {    
    wx.request({
      url: app.globalData.baseUrl +"/select/order",
      method:"POST",
      data:{
        "u_name":app.globalData.username
      },
      success:(res)=>{
        this.setData({
          order_list:res.data.data
        })
      }
    })
  },
  //删除订单
  delOrder(e){
    //获取要订单id
    let orderid = e.currentTarget.dataset.orderid
    console.log(orderid)
    //购买询问
    wx.showModal({
      title: '提醒',
      content: '您确定取消订单吗？',
      success(res){
        if (res.confirm) {
        // 购买请求
        wx.request({
          url: app.globalData.baseUrl+'/del/order',
          method:"POST",
          data:{
            "id":orderid
          },
          success:(res)=>{
            if(res.data.code==0){
              wx.showToast({
                title: '取消成功',
                icon:'success'
              })
            }
          }
        })
        }
      }
    })
    },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    wx.request({
      url: app.globalData.baseUrl +"/select/order",
      method:"POST",
      data:{
        "u_name":app.globalData.username
      },
      success:(res)=>{
        this.setData({ 
          order_list:res.data.data
        })
      }
    })
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

🎁order.wxml

<view class="contant">
  <!-- 标题 -->
  <text class="one">我的订单</text>
  <!-- 订单 -->
  <view class="order_content">
    <view class="order_list" wx:for="{{order_list}}" wx:key="id">
      <image class="img" src="{{item.url}}" />
      <view class="order_info">
        <text class="order_name">{{item.name}}</text>
        <text class="order_time">{{item.time}}</text>
      </view>
      <button class="btn" bindtap="delOrder" data-orderid="{{item.id}}">取消</button>
    </view>
  </view>
</view>

🎄页面展示

🎈我的页面

🎊前端服务

🎄myself.js

const app = getApp();
Page({
  /**
   * 页面的初始数据
   */
  data: {
    login: {
      show: true,
      avatar:"/images/touxiang.png",
    }
  },
  //微信登录监听
  chooseAvatar(e) {
    this.setData({
      login: {
        show: true,
        avatar: e.detail.avatarUrl,
      }
    })
  },
  //个人信息
  me(e){
    wx.navigateTo({
      url: '/pages/me/me',
    })
  },
  //注册界面
  regist(e){
    wx.navigateTo({
      url: '/pages/regist/regist',
    })
  },
  sleep(numberMillis) { 
    var now = new Date(); 
    var exitTime = now.getTime() + numberMillis; 
    while (true) { 
    now = new Date(); 
    if (now.getTime() > exitTime) 
    return; 
    } 
    },
  // 退出监听
  exitClick() {
    let that = this;
    wx.showModal({
      title: '提示',
      content: '确定退出登录吗？',
      success(res){
        if (res.confirm) {
          that.setData({
            login: {
              show: false,
              avatar: '/images/touxiang.png',
            }
          })
         //设置全局用户名
        app.globalData.username=that.data.username
        wx.showToast({
          title: '退出成功',
          icon:'success'
        })
        that.sleep(200)
        wx.redirectTo({
          url: '/pages/index/index',
        })
        }
      }
    })
  },
  //跳转到关于我们界面
  our(){
    wx.navigateTo({
      url: '/pages/our/our',
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

🎄myself.wxml

<!--pages/myself/myself.wxml-->
<view class="top-bg"></view>
  <view class="box">
    <!-- 头像 -->
    <view class="head-box">
      <button open-type="chooseAvatar" class="avatar" bindchooseavatar="chooseAvatar">
        <image class="head-img" src="{{login.avatar}}" mode="widthFix"></image>
      </button>
      <view class="tip">{{login.show?'欢迎使用':'当前未登录，请登录！'}}</view>
    </view>
    <!-- 四部分 -->
    <view class="lower-box">
      <view class="menu" bind:tap="me">
        <image src="/images/self.png"></image>
        <text>个人信息</text>
      </view>
      <view class="menu"  bind:tap="regist">
        <image src="/images/regist.png"></image>
        <text>用户注册</text>
      </view>
      <view class="menu" bindtap="exitClick">
        <image src="/images/exit.png"></image>
        <text>退出登录</text>
      </view>
      <view class="menu" bind:tap="our">
        <image src="/images/our.png"></image>
        <text>关于我们</text>
      </view>
    </view>
  </view>