一、网络连接

首先确保电脑和手机在同一个局域网内。

注：

手机打开热点给电脑连接也算在同一局域网内，但电脑打开热点给手机连接数据可能会传输失败。

二、开放端口

以win10为例，找到如下防火墙，win7用户可在控制面板中找到该文件。

点击高级设置：

 点击入站规则中的新建规则：

 选择端口，然后下一步

开放读取数据时用的端口，我用的是vue和express，express的默认端口是3000，vue打开时默认端口是8080，当8080被占用时可能会往后递增如8081，所以我需要开放8080-8088,3000的端口，以保证手机能读取到该端口的内容

 选择允许连接，然后下一步

 选择域和专用，别勾选公用，也是出于安全考虑

 名称随意，然后点击完成

 

 三、微信开发者工具设置

勾选 详情 中的 本地设置 中的如下内容

 点击设置中的代理设置，选择不使用代理

真机调试时点击局域网模式

 四、更改连接的host地址

express的使用参考文章：uniapp使用express连接mysql数据库_不拉屎的派大星的博客-CSDN博客

更改连接数据库时的host地址，查询ip地址自行百度。

 var mysql = require('mysql');
var connection = mysql.createConnection({
    host: '10.101.11.123',//host地址，尽可能写ip地址，写localhost在手机调试的时候连不上
    port:3306,//端口号
    dateStrings:true,
    user: 'root',//连接数据库时的账号
    password: '123456',//连接数据库时的密码
    database: 'wordman'//需要连接的数据库
});
module.exports = connection;

五、更改前端页面读取的url地址

如下更改url地址

             uni.request({

                //原本是 url: "http://localhost3000/words",
                url: "http://10.101.11.123:3000/words",
                method: 'get',
                success: res => {
                    console.log(res);
                }
            })

注：

脸上同一个网络时，记得在电脑中将该网络变成专用网络，因为在前几步的端口设置中，若网络是公用的是没有权限读取到相应端口中的内容的

 

 

2022.11.3更新

还有个点，就是没有权限读取mysql 数据库里的内容，更改方法如下

在终端中启动mysql，输入完账号密码之后：

mysql -uroot -p
输入数据库密码后回车
use mysql;
select user, host from user;
update user set host = '%' where host = 'localhost';
select user, host from user; （当此时查出来的结果如图时，就代表成功了）
quit;