从集中式文件动态更新Web内容的更好解决方案?

时间:2019-07-19 00:19:36

标签: javascript templates

我在我工作的大学中管理旧版应用程序。该Web应用程序每个位置包含5-7个网页。大约有53个位置(并且还在不断增加),我正在寻找一种改进的集中式方法来对文本内容和标题进行简单的调整。

(我目前在第2部分中虽然有些笨拙的解决方案,但仍能正常工作) 预先感谢。

为了使事情尽可能集中,我在每个页面中创建了一个JSON文件的ajax调用。我将路径的一部分和文件名作为导航键进行了拼接,然后将这些值拉入了网页。我的目的是只需要对JSON文件中的某个值进行编辑,以进行频繁的页面更新。

我知道这不是很优雅,但是有一种更好的方法。谁能指出我正确的方向???

我有点受阻,因为该系统上的所有内容都是旧版。我无法利用PHP访问数据库。我无法在Web服务器上安装节点。我正在做的修补程序必须是客户端魔术。

我对您的集体天才完全开放。

谢谢-J

/* J.Hunt 2019 */
/* Injection Script, dynamic eSARS pages */

/* Establish window / environment variables */

var url = window.location.pathname; //full URL
var path = url.substring(1, url.lastIndexOf('/')); //path folder
url.lastIndexOf('.')); //filename

console.log(` Injection.js = ${url} = ${path} filename = ${filename} `)

/*  Object Structure for injecting html
    esarsObject   [location]  
                    [page]
                        [elementID : HTML Markup],
                        [elementID : HTML Markup]

    // Add to the object for each location 
    // The element ID must preexist before markup injection.
*/

// esars Object START
// esarsTest = ex locaiton
// studentLogin, MainMenu ..etc are filenames

var esars = {
    "esarsTest": {
        "studentLogin": [
            {"title1":"Test Main Header"},
            {"title2":"Sub Header"},
            {"title3":"Detail Line"},
        ],
    "MainMenu":[
        {"title1":"MainMenu Header"},
        {"title2":"MM Sub Header"},
        {"title3":"A Detail line for Main Menu"},
        {"details": "This is the detail line."},
        {"notes":"Here are some <b>notes</b>. <br/> ...and some more."}
    ],
    "ConGroupSel":[
        {"title1":"ConGroupSel Header"},
        {"title2":"CGS Sub Header"},
    ],
    "ApptQuery":[
        {"title1":"Appt Query  Header"},
        {"title2":"Appt Query Sub Header"},
        {"detail1":"ApptQuery Detail 1"},
        {"detail2":"ApptQuery Detail 2"},
    ]
},
}



let locale = esars;
locale = locale[path][filename];
console.log(locale);

$.each( locale, function( key, value ) {
    console.log(Object.keys(value));
    console.log(Object.values(value));

    $('#'+Object.keys(value)).html(Object.values(value));
});

0 个答案:

没有答案