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

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

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/download.html
2.下载并安装mysql5.7.22：https://downloads.mysql/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------")
        }
      })
    }