自建前端页面用于测试中台接口代码

最新推荐文章于 2023-12-05 20:12:36 发布

maksim keyboarder

最新推荐文章于 2023-12-05 20:12:36 发布

阅读量421

点赞数

文章标签：前端 ajax javascript

本文链接：https://blog.csdn.net/dip12315/article/details/125970822

版权

项目使用前后端分离，我们开发基本是使用postman工具来测试，现在自己写一个简单的前端页面来测试中台接口，也顺便熟悉下前端的的基本写法。

需求

中台已经写好了一个单选下拉框的接口，先写个前端来测试该接口

遇到的问题

跨域问题：前端测试页面是单独开的项目，访问应用地址时会报跨域问题。

 	进入Chrome安装文件夹，新建一个chrome快捷方式，右键“属性”，“快捷方式”选项卡里选择“目标”，添加  --args --disable-web-security --user-data-dir=C:\MyChromeDevUserData 
通过快捷方式打开谷歌浏览器

token统一配置的问题: 将token单独配置，所有页面都可以用。配置在了根目录的config/header.json文件中。

1）header.json:
{
  "jwtToken":"eyJhbGciOiJIUzUxMiJ9.xxxxxx"
}

ajax同步请求：使用 $. g e t J SON 来获取 j so n 文件中的数据，但该请求默认为异步请求，通过$ .ajaxSettings.async将其设置为同步请求。

var token = "";
//token： token配置在了本地的json文件中，使用同步ajax的方式去获取token
//之后考虑使用拦截器的方式来添加token
$.ajaxSettings.async = false;  // ajax设置为同步请求
$.getJSON("./config/header.json",function (data) {
token = data;  //获取返回的json数据
});
$.ajaxSettings.async = true; // ajax恢复为异步请求默认值

前端页面代码

样式使用了layui。页面代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<script src=""></script>
<div class="layui-container">
    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">报告类型</label>
            <div class="layui-input-block">
                <select name="disaster" id="disaster"></select>
            </div>
        </div>
    </form>
</div>

<script src="./layui/layui.js"></script>
<script>
    layui.use(['layer','jquery','form'],function () {
        var layer = layui.layer;
        var $ = layui.jquery;
        var form = layui.form;

        var data = {type:"earlyWarning"};
        var token = "";
        //token： token配置在了本地的json文件中，使用同步ajax的方式去获取token
        //之后考虑使用拦截器的方式来添加token
        $.ajaxSettings.async = false;  // ajax设置为同步请求
        $.getJSON("./config/header.json",function (data) {
            token = data;  //获取返回的json数据
        });
        $.ajaxSettings.async = true; // ajax恢复为异步请求默认值

		//请求中台接口
        $.ajax({
            type:"POST",
            url:"http://x.x.x.x:8080/getConfigByType",
            data:"{\"type\":\"reportType\"}",
            contentType:"application/json",
            dataType:"json",
            //设置请求头
            headers:{jwtToken:token.jwtToken},
            success:function (d) {
                // console.log(d);
                if (d.responseCode == "10") {
                    layer.msg(d.errorMessage);
                }else if (d.status != 0){
                    layer.msg(d.statusText);
                }else{
                    var list = d.data;
                    var str = "<option value=\"\"></option>";
                    for (var i=0;i<list.length;i++){
                        str+="<option value=\""+list[i].code+"\">"+list[i].name+"</option>";
                    }
                    $("#disaster").html(str);
                    form.render('select');
                }
            }
        });
    })

</script>