测试效果如下:
本实验主要分为如下几个步骤:
一、安装数据库
二、安装PHP+Apache
三、编辑微信小程序代码
前两项的简单介绍在如下连接:
PHP+Apache
四、本文主要介绍第三项的内容
需要用到的文件如下:
1、新建微信小程序工程
2、在index/index.js中操作如下:
Page({
data:{
data:[] //添加变量,用于前端页面显示
}
})
onLoad() {
let that = this;
wx.request({
url: 'http://localhost/api.php',
data:{},
method:'GET',
header:{
'content-Type':'application/json'
},
success:function(res){
that.setData({
data:res.data,
});
}
})
}
3、在index.wxml中添加如下内容
<!--index.wxml-->
<view class="container">
<view wx:for="{{data}}">
{{item}}
</view>
</view>
4、在Apache软件的路径下的C:\Apache24\htdocsphp放置如下php文件
selectData.php
<?php
$sername = "localhost";//服务名称
$uname = "root";//数据库访问用户名
$pwd = "mima";//数据库密码
$dbname = "db2";//建立的数据库
//创建连接
$conn = new mysqli($sername,$uname,$pwd,$dbname);
$conn->set_charset("utf8");
if($conn->connect_error)
{
die("连接失败:".$conn->connect_error);
}
$sql = "SELECT id, type FROM tab1";//数据查询指令
$result = $conn->query($sql);
$data = $result->fetch_all();
echo json_encode($data);//json格式输出
?>
在Apache24目录C:\Apache24\htdocs下放置如下php文件
connSql.php
<?php
$mysql =new mysqli("localhost","root","mima","db2");
if ( !$mysql){
die('数据库链接失败!'.$mysql->connection_error);
}
echo '<h1 style="color:red">数据库链接成功!</h1>';
?>
5、启动Mysql、apache
管理员打开cmd
net start mysql 指令启动mysql
主要用到的数据库指令如下:
create database 数据库名
drop database 数据库名 (空数据库)
创建表:create table tab1(id int auto_increment not null primary key, type varchar(40) not null);
insert into tab1 values(序号,类型);
select *from tab1;
net start apache指令启动apache
建立如下图数据库
测试apache启动成功与否,成功如下所示:
浏览器测试连接数据库,在浏览器输入
浏览器查看数据库内容如下:
微信小程序查看数据库内容下:
四、插入数据到本地数据库,模拟云端数据库
<?php
$sername = "127.0.0.1:3306";
$uname = "root";
$pwd = "mima";
$dbname = "db2";
//创建连接
$conn = new mysqli($sername,$uname,$pwd,$dbname);
$conn->set_charset("utf8");
if($conn->connect_error)
{
die("连接失败:".$conn->connect_error);
}
$sql = "insert into tab2 (telphone,pwd)values(17700006613,1213)";//插入数据到本地电脑数据库
$result = $conn->query($sql);
$data = $result->fetch_all();
echo json_encode($data);
?>