如何将URL反映回查询构建器

Question

我正在使用OData查询构建器js库生成adhoc报告,并使用OData生成的报告URL及其标题将它们保存到数据库.

以上工作完美 - 客户可以选择表格,条件和过滤器来创建临时报告并将其保存到数据库.

问题

当我的客户回来查看他们创建的报告时,我可以使用报告的URL查询JSON数据,但我不确定如何选择或添加他们为该特定报告选择的表,条件和过滤器.

例如,报告网址可以像这样简单,

1 -  www.example.com/Table1&$format=json  // this will return a simple table

对于上面的示例,我可以使用JS在此场景中获取第一个表名"Table1",并在查询构建器中选择它.

但对于复杂的网址......像这样,

http://services.odata.org/Northwind/Northwind.svc/Customers？$ filter = replace(CompanyName,'','')eq'AlfredsFutterkiste'

将其解析回HTML非常困难.

提问时间

如何将URL转换回HTML以选择用户选择的表,他们添加的条件和过滤器等...(最好使用我在开始时提到的JS库)

一个肮脏的工作是将URL与URL一起保存,然后在用户想要编辑自定义报告时将其显示回来,但这听起来太脏了.

这就是我想要生成的内容,首先是URL

Answer 1

正如我所说，我不知道你的图书馆。

但这是我的理解：

用户在页面 GUI 中输入多个选项，然后您使用该库生成报告。该库返回该报告的 URL。如果用户返回到该页面，您希望他们能够插入 URL，并且 GUI 将返回到生成报告时的状态（所有选定的项目和内容都保持原样）。

最好的解决方案，如果可能的话

如果 URL 或某些内容以某种方式包含数据，您可以解析这些字段形式，这可能是最好的。

如果您有后端，另一个解决方案

您可以在数据库中存储一个带有“url”的表，并为每个字段存储一列。当他们生成报告时，它会向后端发出请求，然后后端会在表中插入一行，其中包含生成的 URL 和他们输入的值。

当他们返回页面并输入 URL 时，只需向后端发出请求，返回与 URL 匹配的行。（例如，从 generated_reports 中选择 *，其中 url='queryUrl'）

如果您的应用程序只是前端应用程序（没有后端）

您可以将其存储在浏览器本地存储中：

例子：

var assigned_fields = {
    tables_selected: ["user", "cats", "dogs"]
}
var report_url = "http://not-really.com"
window.localStorage.setItem("report_"+report_url, JSON.stringify(assigned_fields))

function getAssignedFieldsFromURL(url) {
    return JSON.parse(window.localStorage.getItem("report_"+url))
}

请注意，如果您在控制台中运行此 javascript，则可以使用：

getAssignedFieldsFromURL("http://not-really.com")

即使页面刷新后，这也会返回该对象。

如果他们使用不同的浏览器或不同的计算机，此解决方案将不起作用。

您可以使用您选择的库或本机 javascript 来填充分配的字段对象，并从该对象填充 GUI。如果您想了解有关该步骤的更多信息，请发表评论，我会添加它。

解析网址

我从以下内容得到这个：How do I parse a URL queryparameters, in Javascript?

我将其更改为将 url 作为参数

function getJsonFromUrl(str) {
    var query

    var pos = str.indexOf("?")

    if (pos !== -1)
        query = str.substr(pos+1)

    else
        query = str

    var result = {}
    query.split("&").forEach(function(part) {

        if (!part)
            return
        part = part.split("+").join(" ") // replace every + with space, regexp-free version

        var eq = part.indexOf("=")
        var key = eq>-1 ? part.substr(0,eq) : part
        var val = eq>-1 ? decodeURIComponent(part.substr(eq+1)) : ""

        var from = key.indexOf("[")

        if (from == -1)
            result[decodeURIComponent(key)] = val
        else {
            var to = key.indexOf("]")
            var index = decodeURIComponent(key.substring(from+1,to))
            key = decodeURIComponent(key.substring(0,from))
            if(!result[key]) result[key] = []
            if(!index) result[key].push(val)
            else result[key][index] = val
        }
    })
    return result
}

用法示例：

getJsonFromUrl("http://google.com?test=5&cat=3")

返回：对象 {test: "5", cat: "3"}

这样你就有希望从查询参数中获得你想要的信息

注意： 您可能想确保解析正确。我注意到它将所有“+”转换为“”和其他一些东西。