前端实用开发与调试教程

最新推荐文章于 2022-09-29 17:44:14 发布

我该叫什么名字好呢？

最新推荐文章于 2022-09-29 17:44:14 发布

阅读量289

点赞数

分类专栏： Android开发

本文链接：https://blog.csdn.net/shendan00/article/details/106566980

版权

Android开发专栏收录该内容

38 篇文章 0 订阅

订阅专栏

前端实用开发与调试教程

1.Vue开发
2 跨域调用
- 2.1 jsonp
3. 后端Api接口设计
- 3.1 PhalApi
- 3.2 PhpStrom 2020.1

1.Vue开发

1.1 环境配置

安装必要的
node.js
VSCode

配置环境变量。

1.2 新建工程

选择某个文件夹，使用命令创建一个脚手架工程。

vue init webpack-simple projectname
npm install
npm run dev

此时应该可以在浏览器看到一个运行的界面。

1.3 WebView调试

安装插件Android WebView Debugging
手机正常adb连接，VSCode启用调试，选择app对应的webview
app代码设置：

 WebView.setWebContentsDebuggingEnabled(true);

1.4 内网穿透

可以使用ngrok进行内网穿透
vue工程中页需要配置禁止host验证 disableHostCheck: true

module.exports = {
     // 配置 webpack-dev-serve 行为
    devServer: {
        host: '0.0.0.0',
        disableHostCheck: true
    },

1.5 双网卡设置

有时候使用双网卡，分别连接内、外网，可以这么设置。
1.外网网卡动态分配路由即可。
2.内网网卡设置固定IP和掩码，默认网关不填。
3.配置路由表

//打印路由表
route print -4
//添加内网IP, 指定内网的出口网关和路由接口
route add 128.192.0.0 mask 255.255.0.0 192.168.0.1 if 20 -p
//最后删除0.0.0.0
route delete 0.0.0.0
//设置请求从外网出去
route add 0.0.0.0 mask 0.0.0.0 192.168.1.1
//这样就可以分流请求。

1.6 js的native调用设计

2 跨域调用

2.1 jsonp

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
以下为简单的例子：
客户端

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP 实例</title>
</head>
<body>
<div id="divCustomers"></div>
<script type="text/javascript">
function callbackFunctio(result, methodName)
{
    console.log(methodName);
    var html = '<ul>';
    for(var i = 0; i < result.length; i++)
    {
        html += '<li>' + result[i] + '</li>';
    }
    html += '</ul>';
    document.getElementById('divCustomers').innerHTML = html;
}
</script>
<script type="text/javascript" src="http://localhost/a/index.php?jsoncallback=callbackFunction"></script>
</body>
</html>

服务端：

<?php
header('Content-type: application/json');
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json数据
$json_data = '["customername1","customername2"]';
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";
?>