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

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

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+1this.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------")}})}