微信小程序——从后台获取数据库数据并在前台显示(前端+后端+数据库)

因为人工测试的时候需要统计数据都在纸上,统计起来很麻烦。所以我想做个小程序来辅助我测试,但我之前没学过小程序,所以就一点一点搞吧。今天这篇主要讲从后台获取数据库数据并在前台显示(类似背单词小程序的点击下一个会显示数据库的下一个数据)

1.效果图:

在这里插入图片描述

2.wxml文件:

<view class="container">
   <text>{{id}}</text>
</view>
 <view wx:for="{{list}}" wx:key="list" class="cmd-box" >
 <view class="cmd">{{item.cmd}}</view>
</view>
<view wx:if="{{!(showDaan)}}" class="content">
   <view class="button-1" bindtap="choice" id="{{da1}}">
      <text class="cmd-result" >{{da1}}</text>
    </view>
    <view class="button-2" bindtap="choice" id="{{da2}}" >
      <text class="cmd-result" >{{da2}}</text>
    </view>
        <view class="button-3" bindtap="choice" id="{{da3}}" >
      <text class="cmd-result" >{{da3}}</text>
    </view>
        <view wx:if="{{!(complete)}}" class="button-4" bindtap="next" >
      <text class="cmd-result" >下一个</text>
    </view>
</view>

3.js文件:

//获取应用实例
const app = getApp()
Page({
  data: {
     id:'1',
     da1:"正确识别",
     da2: "错误识别",
     da3: "未识别",
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var th = this;
    var formData = this.data.id; //获取name=id的值 
    wx.request({
      url: 'http://localhost/test/index.php?id='+formData,
      data:formData,
      method:'GET',
      header: { 'Content-Type': 'application/json' },
      success: function (res) {
        console.log(res)
        th.setData({
          list: res.data, 
        });
      },
      fail:function(res){
        console.log("-------fail------")
      }
    })
  },
  next(){
    var formData = this.data.id; //获取name=id的值 
    formData++;
    this.setData({ id:formData})
      var th = this;
      var formData = this.data.id; //获取name=id的值 
      wx.request({
        url: 'http://localhost/test/index.php?id='+formData,
        data:formData,
        method:'GET',
        header: { 'Content-Type': 'application/json' },
        success: function (res) {
          console.log(res)
          th.setData({
            list: res.data, 
          });
        },
        fail:function(res){
          console.log("-------fail------")
        }
      })
    }
})

4.php文件

<?php
header("Content-type:text/json;charset=utf8");
//定义参数
$id = $_GET["id"];
//表单验证
if(empty($id)){
    echo "[{\"result\":\"表单为空...\"}]";
    
}else{
    
    //连接数据库
    $con = mysql_connect("localhost","root","root");
    //设置数据库字符集  
    mysql_query("SET NAMES UTF8");
    //查询数据库
    mysql_select_db("mysql", $con);
    $result = mysql_query("SELECT * FROM lyj WHERE id = $id");
    $results = array();
    while($row = mysql_fetch_assoc($result))
    {
        $results[] = $row;
        // 将数组转成json格式
        echo json_encode($results, JSON_UNESCAPED_UNICODE);
    }
    //关闭数据库连接
    mysql_close($con);
}
?>

5.为请求的url配置服务器域名:点击开发者工具右上角的详情——本地设置——勾选不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书,如图:

在这里插入图片描述

6.多说些:由于我是从小白过来的,刚开始看了几篇关于前端+后端+数据库的博客,但他们的博客都是默认我会php搭建后端环境,但我没接触过后端。所以不知道php文件该放哪,怎么用。所以说下如何搭建并部署后端php+mysql后端环境

1.下载并安装phpstudy2018:https://www.xp.cn/download.html
2.下载并安装mysql5.7.22:https://downloads.mysql.com/archives/community/(不建议下载8.0版本,因为8.0版本的字符集是utf8mb4,5.7版本的字符集是utf8.我之前安装的就是8.0,出了一堆问题,所以卸载了8.0,改装5.7了)
3.安装好phpstudy,检测环境搭建是否成功:浏览器访问 http://localhost/,得到“hello world”则证明搭建的php环境已经成功了。
4.在phpstudy2018的安装目录的PHPTutorial下的WWW文件夹下新建一个test文件夹,test文件夹内新建一个index.php文件,然后在该文件写入上面贴出的php代码。如下图:
在这里插入图片描述
5.数据库里的lyj表设计,一共有两个字段,一个是id(类型:int),一个是cmd(类型varchar),所以test.wxml里面也有两个值,你想显示,你就把id或cmd改成你数据库的对应的字段。

<view class="container">
   <text>{{id}}</text>
</view>
 <view wx:for="{{list}}" wx:key="list" class="cmd-box" >
 <view class="cmd">{{item.cmd}}</view>
</view>

6.对下一个做了两个操作,点击下一个按钮,字段id实现+1,当id+1变2,使用wx.request({})的方法与后台数据库交互,找到id=2的字段并显示

next(){
    var formData = this.data.id; //获取name=id的值 
    formData++;//实现字段id+1
    this.setData({ id:formData})
      var th = this;
      var formData = this.data.id;
      wx.request({
        url: 'http://localhost/test/index.php?id='+formData,
        data:formData,
        method:'GET',
        header: { 'Content-Type': 'application/json' },
        success: function (res) {
          console.log(res)
          th.setData({
            list: res.data, 
          });
        },
        fail:function(res){
          console.log("-------fail------")
        }
      })
    }
已标记关键词 清除标记
相关推荐
微信程序系统教程[初级阶段],微信程序0基础学起,讲解微信程序开发的基础知识。 微信程序系统教程共有“微信程序系统教程[初级阶段]”、“微信程序系统教程[中级阶段]——核心技术”、“微信程序系统教程[阶段]客服消息+微信支付+九宝电商系统”。 “微信程序系统教程[阶段]全套课程”包含: 1.微信程序系统教程[阶段]_客服消息 2.微信程序系统教程[阶段]_微信支付 3.微信程序系统教程[阶段]_九宝电商系统 学习“微信程序系统教程[阶段]”要求有微信程序的基础。建议先学习“微信程序系统教程[初级阶段]”、“微信程序系统教程[中级阶段]”,后在报名“微信程序系统教程[阶段]”。 阶段讲解的客服消息,是针对小程序的。后台程序用接近底层的技术,没有使用三方技术。这样降低同学们学习成本。 微信支付,这部分课程很有难度,要求同学们认真听讲,有不会的技术问题可以请教老师。购买课程后请联系老师,提供单号,给你源程序。 九宝电商系统是一套十分适和学习、项目的课程。既可以系统的学习微信程序相关知识,还可以修改后上线。 “微信程序系统教程[中级阶段]——核心技术”重点讲解微信程序事件、组件、API 微信程序系统教程[初级阶段],微信程序0基础学起,讲解微信程序开发的基础知识。 购买课程的同学,可赠送就九宝老师编写的《微信程序开发宝典》。 购课请咨询qq2326321088
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页