Question

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

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

Answer 1

我认为ivoszz的想法在您的情况下是最好的。如果你想获得一个数据库和PHP，你将需要一种方法将数据存入数据库本身，这将打开一个全新的蠕虫病毒。当然，数据库+服务器端前端是行业标准，但我觉得它超出了您的要求。

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

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

如果有人必须在您缺席的情况下更新网站，他们所需要的只是Excel，转换工具（很小）和服务器密码。我在本回答结尾处发布了转换工具的代码。

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

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

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

我没有做任何关于哪些行无法读取的信息，因为它们太短。您可以将其附加到文件，或使用警告交换其内容。然后进行转换的人将不得不使用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;
        }
    }
}

Answer 2

最简单的方法是使用PHP和mySQL数据库。您可以使用CSV文件添加/覆盖数据库，但从长远来看，您最好开发一个简单的输入表单来更新数据库，而不是通过手动覆盖/更新mysql数据库的任务。 CSV文件。

Answer 3

你不需要开始学习PHP来做这么简单的事情。如果您稍微了解jQuery，只需将JSON文件添加到您的服务器，例如。 events.json具有以下结构：

[
  {
     "event": "Event name",
     "description": "description of the event",
     "dates": [
       {
         "date": "20131028",
         "place": "Dublin"
       }, {
         "date": "20131030",
         "place": "London"
       }
     ]
   }, {
       ... another event here with the same structure...
   }
]

使用jquery.get加载它，使用一些模板库（例如underscore）并在页面内创建简单模板以显示事件和详细信息。最后，您将只有2页（或者可能只有一页），home.html用于显示事件列表，event.html用于显示有关事件的详细信息。

现在，编辑events.json会在主页和详细信息页面上添加和更改事件。这只是一个粗略的例子，需要根据您的要求进行定制。

Answer 4

Ajax是一种技术，它允许客户端脚本和服务器端脚本之间的对话。所以为了使用它，你将不得不研究一些服务器端的东西。 JQuery是一个客户端脚本，这意味着它只能在浏览器的客户端计算机上运行。

我建议你从php开始，学习和使用更简单。只需阅读文件就可以轻松学习。

如何在静态页面中添加一些简单的动态元素？

4 个答案: