angularjs – Web应用程序的前端和后端误解

发布时间：2020-12-17 08:51:11 所属栏目：安全来源：网络整理

导读：我需要一些指导/建议.我已经决定构建一个Web应用程序,但是我很难将所有组件放在一起. 我过去制作了基本网站,但已经忘记了很多.我过去学习过JavaScript和Java,但是我有点生疏,所以如果你决定回复,请像对待这一切的人一样对待我. 基本上我很难理解整个Web应用

我需要一些指导/建议.我已经决定构建一个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上工作.我的机器上已经安装了以下内容：

>最新的JDK
> Spring Tool Suite
> MySQL

有谁可以请尽可能为我澄清这个问题？我认为理解这一切并不需要太多,因为我对计算有所了解,但是因为我上次使用它已经有一段时间了,所以我有点生疏了.

任何帮助是极大的赞赏！

这个问题有很多内容.我会尽力回答这一切,但请耐心等待.因为我希望涵盖这么多理由,请记住,我所说的很多内容都是不精确的,你一定要仔细阅读这些主题.如果您喜欢它,您即将进入一个全新的编程世界,所以请花点时间尝试按照自己的节奏浸泡一切.

首先,一些Web技术的基础知识.这里理解的最基本的东西可能是客户端和服务器之间的分离.这些术语广泛用于软件讨论中,用于指代处理,存储和提供数据的事物(服务器)以及允许用户请求,查看,交互和更改该数据(客户端)的事物.根据您所讨论的上下文,但在Web开发领域,客户端和服务器的确切内容会有很大差异：

>通常假定客户端是Web浏览器.有很多不同的网络浏览器(例如Chrome,Firefox,Safari,Internet Explorer / Edge,Opera,…),它们各有各的怪癖,但总的来说,如果你不尝试任何太花哨的东西,你坚持对于最新版本的浏览器,无论您使用哪种浏览器查看您的网页,您的结果都将基本相同.
>在谈论“服务器”时,您可以根据您使用的句子来引用一些内容：您编写的服务器端代码(一分钟内更多内容),处理服务器的软件代码并提供您的网页(这将是Apache或Tomcat),或运行上述软件的铝,硅和塑料的物理集合(即计算机,从笔记本电脑到专用的任何东西)机).出于本讨论的目的,我们将坚持前两个.

正如我之前所说,客户端/服务器区别最重要的部分是在呈现和启用与客户端上的数据交互以及在服务器上处理和存储数据之间分离关注点.尽可能地保持那些分开;从长远来看,它会让你的生活更轻松.客户端代码不应该知道如何存储或处理数据;这是服务器的工作,客户端不应该知道.同样,您在服务器上编写的代码至少不应该关注数据的格式化和呈现给用户的方式.相反,它应该尝试以一种易于以多种不同方式处理的格式提供数据.

但我领先于自己.首先,我们需要谈谈您提出的技术问题.那么让我们深入了解一下.

客户端

通常,在服务器和client1上使用不同的编程语言.浏览器中使用了三种主要语言,每种语言都有不同的目的,这与其他两种语言的目的相称.原谅我(并且随意撇去或跳过)如果我踏上你已经覆盖的地面;我在这里为初学者写作,所以我想确保涵盖所有基础.

HTML

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>&copy; 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不包含格式信息.它有结构,但没有布局,颜色,字体,边框或任何其他与演示相关的信息;这是CSS3的工作.其次,它完全是静态的;这是因为HTML不是用来描述动态内容或行为. HTML是故意静态的.如果您想要移动,更改或响应用户交互,如果您希望根据动态计算显示任何动态内容,那么您就需要使用JavaScript.

在此处了解有关HTML的更多信息：https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/HTML_basics

CSS

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的

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.

想一想你的应用创意

我实际上认为,对于您的应用程序而言,除了托管它之外,您根本不需要服务器,如果您决定在Web上或公司的Intranet上发布它.我将在下面简要讨论服务器以回答您的问题,但实际上,如果您只需要接收一些用户数据并以图表的形式实时显示,那么您只需使用一些JavaScript即可. Angular肯定会有所帮助,因为您听起来像是想要实时更新图表.你应该研究一些基于Angular的图表/图表库,例如： https://jtblin.github.io/angular-chart.js/

服务器

通常,服务器处理数据处理和存储.不要像我为客户那样进入理论,让我直接回答你的问题：

> Tomcat和Apache – Tomcat和Apache HTTP Server是Web服务器的两个选项. (这些人适合我上面提到的“服务器”的第二个定义.)他们绝对是受欢迎的选择,虽然Apache在生产服务器上更受欢迎,而Tomcat更适合开发设置(根据我的经验;人们一直在争论这个问题) ).
> Spring – Spring,包括其所有各种模块和工具(SpringMVC,Spring Security,Spring Tool Suite等),是一个帮助您编写服务器代码的Java框架(服务器定义#1).在我个人看来(值得为此付出代价),Spring非常适合具有大量移动部件的大型复杂应用程序,但对于像您所描述的那样的简单应用程序来说却不必要地复杂化.
> MySQL – 与所有SQL版本一样,MySQL是一个数据库程序.它将数据存储在表中,并提供一个界面供您以各种方便的方式查询数据.数据库非常棒,MySQL是一个受欢迎的选择,但重要的是要弄清楚你的项目是否需要数据库.您是否计划存储用户输入的数据以供日后使用？如果没有,请跳过数据库.
>其他语言 – Web服务器代码可以使用您可以在命令行上运行的任何语言编写.如果你喜欢Java并且你很擅长Java,那么坚持使用Java.如果您想要冒险,可以查看Node.js,这是一个JavaScript服务器解决方案;你还在学习JavaScript,对吧？这完全取决于个人偏好以及将为您完成工作的内容.不需要学习PHP(绝对不需要学习C,好上帝;请不要在C中编写您的服务器代码)只是为了一个简单的应用程序编写后端,就像你已经得到的那样.听起来你已经为这个项目学到了很多东西;无需为您的盘子添加更多.

1.(在完成上述所有操作后,最好再次阅读此脚注.)一个值得注意的例外是使用Node.js在服务器端使用JavaScript.如果您在客户端尝试使用JavaScript并坠入爱河(就像我们许多人一样),也许给Node一个机会.

2.一旦掌握了HTML的工作原理,请阅读semantic markup.

3.为了更准确一点,HTML不应包含任何此类信息,尽管从技术上讲它可以包含其中的一些信息.这是90年代末/ 21世纪初的CSS前几天的延续,当时大量的尺寸,字体和颜色信息都存储在标记中.请帮个忙：将格式保留给CSS.

除了一些更高级的CSS规则,您可以使用它来获得非常基本的悬停效果和简单的动画.对于涉及计算,迭代,逻辑的任何事情,JavaScript仍然是必需的,基本上任何事情都是非平凡的.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!