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

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

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------")
        }
      })
    }
    原文作者:zkw_1998
    原文地址: https://blog.csdn.net/zkw_1998/article/details/105393827
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞