微信小程序连接mysql(微信小程序连接Mysql数据库步骤)

刚开始学小程序没多久,这么一个简单的过程整了一个礼拜,关键是没人指导啊啊啊啊啊……心累,翻阅了n个书籍,查看了m个网站,亲测可以正常连接。现在终于明白了学习效率:培训班>看视频>自学。好啦,不多说了,进入正题!

1、数据库插入数据。Mysql数据库我没有放在本地,是放在远程服务器的,其实最终就是IP地址的问题。首先数据库里插入四条语句,如下图所示,


微信小程序连接mysql(微信小程序连接Mysql数据库步骤)(1)

2、tomcat部署php。过程步骤如下,

1)首先下载php程序,是一个zip的压缩包。如下图所示,


微信小程序连接mysql(微信小程序连接Mysql数据库步骤)(2)

2)将下载的php压缩包解压到tomcat的安装路径下,并重命名为php,如下图所示,


微信小程序连接mysql(微信小程序连接Mysql数据库步骤)(3)

3)查看电脑中是否已安装php的方法:计算机-属性-高级设置中点击“环境变量”,添加PATH环境变量,可以添加Admin环境变量,也可以添加系统环境变量,看个人需求,将php解压路径添加到PATH中。之后打开cmd,输入php -v或 php –version,如下图所示,


微信小程序连接mysql(微信小程序连接Mysql数据库步骤)(4)


微信小程序连接mysql(微信小程序连接Mysql数据库步骤)(5)

4)将php路径下的php.ini-development 复制,将副本改名php.ini,之后用记事本打开php.ini。(可以看出;为其注释符)修改其中两项设置:

①去掉extension_dir = "ext"前面的“;”,并且将extension_dir = "ext"修改为绝对路径,

②cgi.force_redirect修改为0,并去掉前面的“;”,即 cgi.force_redirect = 0

如下图,


微信小程序连接mysql(微信小程序连接Mysql数据库步骤)(6)

5)打开tomcat的conf文件夹。

选择context.xml文件,在<Context >加上属性privileged="true",如下图所示,


微信小程序连接mysql(微信小程序连接Mysql数据库步骤)(7)

6)仍在tomcat的conf文件夹中。

修改web.xml文件,在<web-app>中加入如下的<servlet>


微信小程序连接mysql(微信小程序连接Mysql数据库步骤)(8)

插入代码如下:

<servlet>

<servlet-name>php</servlet-name>

<servlet-class>org.apache.catalina.servlets.CGIServlet</servlet-class>

<init-param>

<param-name>clientInputTimeout</param-name>

<param-value>200</param-value>

</init-param>

<init-param>

<param-name>debug</param-name>

<param-value>0</param-value>

</init-param>

<init-param>

<param-name>executable</param-name>

<param-value>D:\tomcat\php\php-cgi.exe</param-value>

</init-param>

<init-param>

<param-name>passShellEnvironment</param-name>

<param-value>true</param-value>

</init-param>

<init-param>

<param-name>cgiPathPrefix</param-name>

<param-value>WEB-INF/phpbin</param-value>

</init-param>

<load-on-startup>5</load-on-startup>

</servlet>

7)在<web-app>中加入如下的<servlet-mapping>,表示php脚本路径。


微信小程序连接mysql(微信小程序连接Mysql数据库步骤)(9)

代码如下:

<servlet-mapping>

<servlet-name>php</servlet-name>

<url-pattern>/phpbin/*</url-pattern>

</servlet-mapping>

8)新建一个api.php文件,文件内容如下。

在webapps\ROOT\WEB-INF下新建一个phpbin的文件夹,并将api.php放置其中,如下图,


微信小程序连接mysql(微信小程序连接Mysql数据库步骤)(10)

$sql="select * from persons";

$res=$link->query($sql);

$data=$res->fetch_all();

echo json_encode($data);

?>

api.php脚本代码如下(新建txt文件,修改后缀名为php即可):

<?php

$link = new mysqli('10.103.20.54','root','abcdefg','test');

$link->set_charset("utf8");

if($link->connect_error){

die("连接失败:".$link->connect_error);

}

9)打开tomcat(在bin文件夹下,双击startup.bat,苹果系统双击startup.sh文件即可打开tomcat服务)。

打开浏览器,输入localhost:8080/phpbin/index.php,看到如下页面,表明配置php配置成功!


微信小程序连接mysql(微信小程序连接Mysql数据库步骤)(11)

3、微信小程序端。

1)新建一个项目,在index.wxml里输入:

<view wx:for="{{data}}">

{{item}}

</view>

2)index.js里输入:

onLoad: function() {

let that = this;

wx.request({

url: 'http://localhost:8080/phpbin/api.php',

method: 'GET',

header: {

'Content-Type': 'application/json',

},

data: {


},

success: function (res) {

console.log(res)

that.setData({

data:res.data,

})

},

fail: function () {

console.log("请求数据失败");

},

complete: function () {


}

})


}

3)预览一下,成功!


微信小程序连接mysql(微信小程序连接Mysql数据库步骤)(12)


,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页