我需要一些指导/建议。我决定构建一个Web应用程序，但是我很难将所有组件放在一起。
我过去制作过基本网站但却忘了很多。我过去学习过JavaScript和Java，但是我有点生疏，所以如果你决定回复，请像对待这一切的人一样对待我。
基本上我很难理解整个Web应用程序的后端和前端以及我需要什么。我做过一些研究发现我需要MySQL，Tomcat服务器或者Apache？ （我不明白这一部分），Spring Tool Suite，Java和AngularJS的前端知识。我有基本的SQL知识。我很难将所有这些绑定在一起。
我试图创建的应用程序是原型，因此不是完整的应用程序。我希望能够将数据输入到文本框中，然后在图形/图表上直观地显示。我知道AngularJS能够实现这一目标。 AngularJS和JavaScript一样吗？ Java在哪里都有这个？我认为需要一种Web编程语言，为什么要使用Java呢？ Java是否用于后端？ MySQL将用于什么以及Tomcat或Apache服务器？如果可能的话，我更喜欢坚持使用JavaScript / Angular和Java，因为我还没有学过任何其他语言，如PHP或C.
如果有人在想，我正在Mac上工作。我的机器上已经安装了以下内容：
有谁可以请尽可能为我澄清这个问题？我认为理解这一切并不需要太多，因为我对计算有所了解，但是因为我上次使用它已经有一段时间了，所以我有点生疏了。
非常感谢任何帮助！
答案 0 :(得分：5)
这个问题包含了很多内容。我会尝试全部回答，但请耐心等待。因为我希望涵盖这么多理由，请记住，我所说的很多内容都是不精确的，你一定要仔细阅读这些主题。如果您喜欢它，您即将进入一个全新的编程世界，所以请花点时间尝试按照自己的节奏将其全部浸泡。
首先，介绍一些关于Web技术的基础知识。这里理解的最基本的事情可能是客户端和服务器之间的分离。这些术语广泛用于软件讨论中，用于指代处理，存储和提供数据的事物（服务器）以及允许用户请求，查看，交互和更改该数据（客户端）的事物。客户端和服务器的确切内容会因您所讨论的上下文而有所不同，但在Web开发领域：
通常假定客户端是Web浏览器。有很多不同的网络浏览器（例如Chrome，Firefox，Safari，Internet Explorer / Edge，Opera，...），它们各有各的怪癖，但总的来说，如果你不尝试任何太花哨的东西，您坚持使用最新版本的浏览器，无论您使用哪种浏览器查看您的网页，您的结果都将基本相同。
在谈论＆＃34;服务器＆＃34;时，你可以根据你使用它的句子来指代一些东西：你写的服务器端代码（更多关于这一点在一分钟内） ），处理服务器端代码并为您的网页提供服务的软件（这将是Apache或Tomcat），或运行上述软件的铝，硅和塑料的物理集合（即，电脑，从笔记本电脑到专用机器的任何东西。出于本讨论的目的，我们将坚持前两个。
正如我之前所说，客户端/服务器区别最重要的部分是呈现和启用与客户端上的数据交互以及处理和存储之间的关注点分离em>服务器上的数据。尽可能地保持那些分开;从长远来看，它会让你的生活更轻松。客户端代码不应该知道如何存储或处理数据;这是服务器的工作，客户不应该知道。同样，您在服务器上编写的代码至少不关心数据的格式化和呈现给用户的方式。相反，它应该尝试以一种易于以多种不同方式处理的格式提供数据。
但我领先于自己。首先，我们需要谈谈您提出的技术问题。所以让我们深入了解一下。
通常，服务器和客户端 1 使用不同的编程语言。浏览器中使用了三种主要语言，每种语言都有一个与其他两种语言相同的目的。原谅我（并且随意撇去或跳过）如果我已经踩过你已经被覆盖的地方;我在这里为初学者写作，所以我想确保涵盖所有基础。
HTML（超文本标记语言）是构建网页的绝对基础。 HTML的工作是描述页面结构和其中显示的数据。 HTML将事物分成几个部分，包括页眉，页脚，文章，段落，旁白和其他类似的容器。 HTML还告诉浏览器有关图像，视频和Flash游戏的内容，哪些文本或图片应该是指向网络中其他位置的链接，哪些文字应该强调或者您正在制作<强>强点。它可以包含包含各种输入设备的表单，并且可以告诉浏览器在您提交表单时将表单的内容发送到何处。换句话说，它描述了文档的组成，内容各部分之间的关系，以及某种程度上文档 2 的某些部分的用途。
HTML看起来像这样：
<html>
<head>
<title>A Sample Web Page</title>
</head>
<body>
<header>
<h1>Sample Code FTW!</h1>
</header>
<main>
<section id="introduction">
<h1>Introduction</h1>
<h2>Where it all begins...</h2>
<p>
This is the first paragraph of the intro.
</p>
<p>This is the second one.</p>
</section>
<section id="picture-show">
<h1>Pictures</h1>
<h2>They're fun!</h2>
<p>Here is a cat:</p>
<img src="https://i.imgur.com/MQHYB.jpg" />
<p>Here are some more (the internet is full of these things):</p>
<img src="https://i.imgur.com/sHQQJG5.gif" />
</section>
</main>
<footer>
<small>© KenB 2015; All rights reserved. (just kidding, do what you want with it)</small>
</footer>
</body>
</html>
这是一个链接，可以看到上面的操作：http://codepen.io/kenbellows/pen/GZvmVy
如果您点击该链接，您可以在技术上制作一个只有HTML的整个网页。问题是，它很无聊。首先，它非常简单;这是因为 HTML不包含格式信息。它有结构，但没有布局，颜色，字体，边框或任何其他与演示相关的信息;这是CSS 3 的工作。其次，它完全是静态的;这是因为 HTML不是用来描述动态内容或行为。 HTML是故意静态的。如果您想要根据动态计算显示任何动态内容，那么您需要移动，更改或响应用户交互。
在此处详细了解HTML：https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/HTML_basics
CSS（层叠样式表）解决格式问题。如果您每次加载页面时都在编写一个只显示相同内容的静态页面，并且不需要任何用户交互，例如博客文章，那么您可能只需要HTML和CSS。
这里只是我在那里发布的HTML的一点点CSS：
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #333;
background-color: #ccc;
}
header, main, footer {
margin: 1em auto;
width: 60%;
padding: 1em;
}
header {
text-align: center;
}
header > h1 {
font-size: 4em;
}
main {
background-color: #fff;
}
main h1 {
font-size: 2.5em;
margin-bottom: 0;
}
main h2 {
font-size: 1.5em;
margin-top: 0;
}
一个链接：http://codepen.io/kenbellows/pen/wGqewE
看看文档可以做些什么样的风格？
了解有关CSS的更多信息：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started
JavaScript支持网页 4 的所有动态部分。这是您正在谈论的图表内容中最重要的部分。与HTML和CSS不同，JavaScript是一种真正的，适当的编程语言，Turing-complete和所有内容，具有您期望从现代语言中获得的所有常用分支，循环，函数和面向对象的结构。因此，它比HTML或CSS复杂得多，并且掌握的时间与其他任何成熟的编程语言一样长。
在此处详细了解JavaScript：https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/JavaScript_basics
与任何其他现代语言一样，JavaScript为其编写了大量的库和框架，以帮助您处理编写Web应用程序时的许多杂乱无章，更糟糕的部分。 Angular.js，你提到的那个，目前是一个特别受欢迎的框架，但你应该知道它只是众多框架中的一个。但是，不要误解我，这是一个不错的选择。但是请注意以下事项：如果您刚开始使用JavaScript作为一种语言，那么首先进入框架可能不是最好的主意。首先，你只需要复合你起床和跑步所需的知识量;对于另一个，这非常重要，你应该在开始使用框架之前自己学习语言，以避免依赖于该框架。我知道有太多开发人员马上开始使用Angular，然后一年后他们没有充分掌握代码行为方式的原因，因为他们没有采用是时候深入了解语言基础知识了。 Angular很精彩，我一直都在使用它，但是再一次，帮自己一个忙，至少要通过上面链接的JavaScript的MDN教程，尝试编写几个玩具应用程序，然后再进入Angular。
我实际上认为，就您的应用而言，您根本不需要服务器，除非您决定将其发布在网络上或公司的内部网上，一些东西。我将在下面简要讨论服务器以回答您的问题，但实际上，如果只需要接收一些用户数据并以图表的形式实时显示，您只需使用一些JavaScript即可。 Angular肯定会有所帮助，因为您听起来像是想要实时更新图表。你应该研究一些基于Angular的图表/图表库，例如： https://jtblin.github.io/angular-chart.js/
通常，服务器处理数据处理和存储。不要像我为客户那样进入理论，让我直接回答你的问题：
Tomcat和Apache - Tomcat和Apache HTTP Server是Web服务器的两个选项。 （这些人适合第二个定义＆＃34;服务器＆＃34;我在上面给出了。）他们绝对是受欢迎的选择，虽然Apache在生产服务器上更受欢迎，而Tomcat在开发设置中更受欢迎（根据我的经验;人们认为关于这一直）。
Spring - Spring，包括其所有各种模块和工具（SpringMVC，Spring Security，Spring Tool Suite等），是一个帮助您编写服务器代码的Java框架（服务器）定义＃1）。在我个人看来（值得你付出的代价），Spring非常适合具有大量移动部件的大型复杂应用程序，但对于像你所描述的那样的简单应用程序来说，这是不必要的复杂。
< / LI>MySQL - 与所有类型的SQL一样，MySQL是一个数据库程序。它将数据存储在表中，并提供一个界面供您以各种方便的方式查询数据。数据库非常棒，MySQL是一个受欢迎的选择，但确定您的项目是否需要数据库非常重要。您是否计划存储用户输入的数据以供日后使用？如果没有，请跳过数据库。
其他语言 - 可以使用您可以在命令行上运行的任何语言编写Web服务器代码。如果您喜欢Java而且您擅长Java，那就坚持使用Java。如果您想要冒险，可以查看Node.js，一个JavaScript服务器解决方案;你还在学习JavaScript，对吧？这完全取决于个人偏好以及将为您完成工作的内容。不需要学习PHP（并且肯定不需要学习C，好上帝;请不要用C编写你的服务器代码）只是为了一个简单的应用程序编写后端，就像你的那个＃39;得到了。听起来你已经为这个项目学到了很多东西;无需在你的盘子里添加更多东西。
1。（在您完成上述所有操作后，最好再次阅读此脚注。）一个值得注意的例外是，使用JavaScript会越来越受欢迎服务器端使用Node.js。如果你在客户端尝试JavaScript并坠入爱河（就像我们许多人一样），也许给Node一个机会。
2。在了解了HTML工作原理的基础知识后，请阅读semantic markup。
3。为了更准确一点，HTML 不应该包含任何此类信息，尽管技术上可以包含一些它的。这是从90年代末/早期的CSS之前的日子开始的延续，当时许多尺寸，字体和颜色信息都存储在标记中。请帮个忙：将格式保留给CSS。
4。除了一些更高级的CSS规则，您可以使用它来获得非常基本的悬停效果和简单的动画。对于涉及计算，迭代，逻辑的任何事情来说，JavaScript仍然是必需的，基本上任何事情都是非平凡的。
答案 1 :(得分：1)
您正在构建的内容通常称为“全栈”Web应用程序。
Apache与Tomcat一起用于在应用程序的前端和后端之间传输数据。具体来说，Tomcat是您的Java代码将以Servlet和JSP（Java Server Pages）的形式存在的地方。 Java（如PHP）只能在后端找到，用于将网页“粘合”在一起。后端负责连接＆amp;与数据库（MySQL）交谈，用于存储数据以及将数据从一个地方移动到另一个地方。
您的前端是应用程序的所有HTML，CSS和JavaScript。它将HTTP请求发送到后端，以便向/从后端发送/接收数据。通常，您只需在用户提交表单或需要加载更多信息（使用AJAX）或甚至只是整个新页面时引用后端。
AngularJS是一种特殊的生物。它是 JavaScript，因此它存在于前端并且做前端类型的事情，但是（除了与数据库通信之外）它几乎取代了后面的 - 在现代Web应用程序中结束。 AngularJS是一个用于创建“单页面应用程序”的工具。这意味着当您通常从后端请求新页面时，您将要求修改当前页面。