javascript - 如何向静态页面添加一些简单的动态元素？

Question

我正在改造一个允许预订每年举办的事件的网站。每个事件都有自己的页面，该页面目前完全是静态的:每个页面都包含标题、描述和按地点排序的日期列表。每年当新日期可用时，就必须有人进入并手动更改每个日期的 HTML，这显然是一项艰巨的任务。

我想通过有一个存储日期的 CSV 文件(可以逐个添加)来稍微自动化该过程，然后页面在加载时从那里获取相关日期。我对服务器端的东西没有经验，但我对 jQuery 有一点了解，我觉得我应该能够使用 AJAX 或类似的东西来做到这一点——但是怎么做呢？

Answer 1

我认为 ivoszz 的想法最适合您的情况。如果你想获得数据库和 PHP，你将需要一种方法将你的数据放入数据库本身，这会打开一个全新的蠕虫 jar 头。当然，数据库+服务器端前端是行业标准，但我觉得它对您的要求来说太大了。

从简单的文本文件中读取 JSON 时，学习如何使用 jQuery 显示 JSON 会更容易。您只需编写一次此代码。

然后，只要有变化，您就可以使用一个简单的工作流程:您可以使用 Excel 使用预先记录的格式输入事件。然后将 Excel 文件导出为 .csv。使用小程序读取 CSV 并将其序列化为 JSON。将输出复制到服务器上的预定位置。一切都准备好了。

如果其他人必须在您不在的情况下更新网站，他们只需要 Excel、转换工具(很小)和服务器密码。我在这个答案的末尾发布了转换工具的代码。

或者，您可以使用代码创建一个 ASP .NET WebForms 项目。您可以制作一个 .aspx 页面并使用服务器端代码在其上显示数据，而不是序列化代码创建的对象。然而，这有一些缺点。

• .net webforms 的学习曲线比 JavaScript 更陡峭，生成的代码可能会使用服务器端控件，除非您知道如何正确地做，否则很难用 CSS 设置样式。
• 如果您使用的是便宜的托管包而不是您自己的服务器，则必须确保提供商在其服务器上安装了所需的 .net 版本。此外，由于 .net Web 项目中通常包含所有库，它可能会占用更多空间。
• 如果输入数据的结构永远不变，您可以编译一次转换器并将其视为黑盒。对内容显示方式的任何更改都可以在 JSON 读取代码中进行，并直接在浏览器中进行调试。对于 .net 解决方案，您必须安装 Visual Studio。
• .net webforms 不是面向 future 的技能。 Microsoft 已经创建了一种新的、更方便的 Web 技术 .NET MVC，我不建议现在就开始学习旧技术。另一方面，如果你已经有一堆现有的静态页面，那么将这个项目制作成 MVC 并不是一个好主意，因为 MVC 不能轻易地混合静态和动态页面。您可能能够使用这些内容，但必须重写整个路由系统并替换每个内部链接。

---

这是将 csv 转换为 JSON 的 C# 应用程序的代码。编译后，将 .exe 放在与 csv 相同的目录中，称为 DataSource.csv。双击它。它将在同一目录中生成一个名为 autoOutput.json 的新文件。 .csv 文件中的每一行都必须在 事件名称中构建； field ；日期;成本; 格式。您可以在 Excel 中的 cost 右侧添加注释或类似内容，它们将被丢弃。行的顺序无关紧要。只要事件名称是唯一的，所有以它开头的地点和日期都将被解释为属于该事件。只要事件名称和地点的组合是唯一的，所有日期都将被解释为与该地点的事件有关。

关于哪些行太短而无法读取的信息，我没有做任何事情。您可以将其附加到文件，或将其内容与警告交换。然后进行转换的人将不得不摆弄 csv 直到没有警告，或者您可以尝试将其保留在文件中，但在加载显示时忽略它。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.IO;
using System.Web.Script.Serialization; 

namespace ElendilEvents2JSON
{
    public class Event
    {
        public String Name { get; set; }
        public List<EventInVenue> venues { get; set; }

    }

    public class EventInVenue 
    {
        public String VenueName { get; set; }
        public List<EventInstance> Dates { get; set; }
    }

        public class EventInstance
    {
        public String When { get; set; }
        public String Cost { get; set; }

    }

    class Program
    {
        static void Main(String[] args)
        {
            //read the file 
            List<int> unreadable;
            List<Event> events = readFile(@".\SourceData.csv", out unreadable);

            //write the file using the normal JSON serializer. Will output just everything as a single line. If the data structure is changed, it will output in the new structure. 
            string autoOutput;
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            autoOutput = serializer.Serialize(events); 
            File.WriteAllText(@".\autoOutput.json", autoOutput); 
        }

         public static List<Event> readFile(string path, out List<int> unreadableLines)
        {
            //get the contents out of the file
            var lines = System.IO.File.ReadLines(path);
            // split each line into an array of strings
            var csv = lines
                .Select(line => line.Split(';'))
                .ToArray();

            //will hold all events 
            List<Event> events = new List<Event>();
            //will hold the numbers of all lines which were OK
            List<int> unreadable = new List<int>();

            //read each line, if you want to skip header lines, change the zero
            for (int lineCounter = 0; lineCounter < csv.Length; lineCounter++)
            {
                string[] line = csv[lineCounter];

                if (line.Length >= 4)
                {
                    string eventName = line[0];

                    Event currentEvent;
                    //if we haven't yet created the event, create it now and add it to the dictionary 
                    if (!events.Select(ev => ev.Name).Contains(eventName))
                    {
                        currentEvent = new Event { Name = eventName };
                        //the venues of the new event are still empty
                        currentEvent.venues = new List<EventInVenue>();
                        events.Add(currentEvent);
                    }
                    else currentEvent = events.Where(ev => ev.Name == eventName).Single();

                    // the same as above: we have the event now, if the current venue isn't yet on its list, enter it, else use the old one
                    string venueName = line[1];
                    EventInVenue currentVenue;
                    if (!currentEvent.venues.Select(ven => ven.VenueName).Contains(venueName))
                    {
                        currentVenue = new EventInVenue { VenueName = venueName };
                        currentVenue.Dates = new List<EventInstance>();
                        currentEvent.venues.Add(currentVenue);
                    }
                    else currentVenue = currentEvent.venues.Where(ven => ven.VenueName == venueName).Single(); 

                    string date = line[2];
                    string cost = line[3];

                    EventInstance currentEventInstance = new EventInstance { When = date, Cost = cost };
                    currentVenue.Dates.Add(currentEventInstance);
                }
                else
                    //if the line was too short
                    unreadable.Add(lineCounter + 1);

            }
            unreadableLines = unreadable;
            return events;
        }
    }
}