Web应用程序前端和后端的误解 [英] Web Application front-end and back-end misunderstanding

查看：76
本文介绍了Web应用程序前端和后端的误解的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我需要一些指导/建议.我已决定构建一个Web应用程序，但是很难将所有组件组合在一起.

我过去曾经做过基本网站，但忘记了很多.过去我曾经学习过JavaScript和Java，但是我有些生疏，因此，如果您决定回复，请像对待这一切的新手一样对待我.

基本上，我很难理解整个Web应用程序的后端和前端以及我到底需要什么.我进行了一些研究，发现我需要MySQL，Tomcat服务器或Apache? (我不理解这部分)，Spring工具套件，有关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)，或者运行上述软件的铝，硅和塑料的物理集合(即计算机，范围从您的笔记本电脑安装到专用计算机上).出于讨论的目的，我们将坚持前两个.

正如我之前所说，客户端/服务器区别的最重要部分是在呈现和启用与客户端上的数据的交互以及处理和存储之间的关注点分离. em>服务器上的数据.尽可能将它们分开；从长远来看，它将使您的生活更加轻松.客户代码不应该知道如何存储或处理数据.那是服务器的工作，客户端不需要知道.同样，您在服务器上编写的代码也不必在乎数据的格式和呈现给用户的方式.相反，它应尝试以易于以许多不同方式处理的格式提供数据.

但是我要超越自己.首先，我们需要谈论您提出的技术问题.因此，让我们深入了解一下.

客户

通常，服务器和客户端上使用不同的编程语言 1 .浏览器中使用三种主要语言，每种语言都有其独特的目的，与其他两种语言的目的互补.如果我踩到地面，您已经被遮住了，请原谅我(可以随意浏览或跳过)；我在这里是为初学者写的，所以我想确保所有基础都已覆盖.

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不包含格式信息.它具有结构，但没有布局，颜色，字体，边框或任何其他与演示相关的信息；这就是CSS 3 的工作.其次，它是完全静态的；这是因为 HTML并非用于描述动态内容或行为. HTML是有意静态的.如果您希望任何东西移动，更改或对用户交互做出反应，或者要基于动态计算显示任何动态内容，那么您就需要JavaScript.

在此处了解有关HTML的更多信息: https://developer.mozilla.org/zh-CN/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/zh-CN/docs/Web/Guide/CSS/Getting_started

JavaScript

JavaScript是网页的所有动态部分的动力 4 .对于您正在讨论的图表而言，这是最重要的部分.与HTML和CSS不同，JavaScript是一种真正的，适当的编程语言，是图灵完备的一切，它具有您希望从现代语言中获得的所有常规分支，循环，函数和面向对象的构造.因此，它比HTML或CSS复杂得多，并且掌握任何其他成熟的编程语言都可能需要花费很长的时间.

在此处了解有关JavaScript的更多信息: https://developer.mozilla.org/zh-CN/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.如果您想冒险，可以考虑一下JavaScript服务器解决方案Node.js.您还是在学习JavaScript，对吗?这完全取决于个人喜好以及为您完成工作的方式.无需学习PHP(当然，当然也无需学习C，天哪；请不要用C编写服务器代码)，而只需编写一个简单应用程序的后端，例如您所拥有的应用程序得到.听起来您已经为该项目学习了很多东西；无需在盘子里添加更多东西.


1.(完成以上所有操作之后，最好重新阅读此脚注.)一个越来越流行的值得注意的例外是在服务器端使用 Node.js .如果您在客户端尝试使用JavaScript并爱上了我们(就像我们中的许多人一样)，也许可以给Node做个尝试.

2..一旦完成，请在语义标记上进行阅读.了解了HTML的工作原理.

3.为准确起见，HTML 不应包含任何此类信息，尽管从技术上讲可以包含其中一些信息.这是从90年代末/2000年代初的CSS之前的时期开始的，当时在标记中存储了许多大小，字体和颜色信息.请帮个忙:将格式保留为CSS.

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

I need a bit of guidance/advice. I have decided to build a web application but I’m having difficulty putting all the components together.

I’ve made basic websites in the past but have forgotten a lot of it. I studied JavaScript and Java in the past but I’m a little rusty so if you decide to reply please treat me like a person that’s new to all of this.

Basically I am having difficulty understanding the backend and front end of the whole web application and what exactly I will need. I’ve done some research found out that I will need MySQL, Tomcat server or Apache? (I don’t understand this part), Spring Tool Suite, knowledge of Java and AngularJS for the front-end. I have basic SQL knowledge. I’m having difficulty binding all this together.

The application I am trying to create is a prototype so not a full application. I’d like to be able to enter data into text boxes which is then visually represented on graphs/charts. I understand that AngularJS is capable of achieving this. Is AngularJS the same as JavaScript? Where does Java come in all of this? I thought a web programming language is needed so why is Java used? Is Java used for the backend? What will MySQL be used for and the Tomcat or Apache server also? I prefer to stick to JavaScript/Angular and Java if possible because I haven’t learned any other languages like PHP or C.

I am working on a Mac if anyone is wondering. I have the following already installed on my machine:

  • Latest JDK
  • Spring Tool Suite
  • MySQL

Could anyone please clarify this for me as best as possible? I don’t think it will take a lot for me to understand it all as I do have knowledge in computing but I’m a bit rusty since it’s been a while since I last used it all.

Any help is greatly appreciated!

解决方案

There's a lot packed into this question. I'll try to answer it all, but bear with me. Because I hope to cover so much ground, keep in mind that a lot of what I say will be imprecise, and you should definitely read up some more on these topics. You're on the verge of entering a whole new world of programming possibilities if you enjoy it, so take your time and try to soak it all in at your own pace.

First, some basics on web technologies. Possibly the most fundamental thing to understand here is the separation between the client and the server. These terms are broadly used in software discussions to refer to the thing processing, storing, and providing data (the server) and the thing allowing the user to request, view, interact with, and make changes to that data (the client) . What exactly the client and server are will vary widely based on what sort of context you're talking about, but in the world of web development:

  • The client is generally assumed to be a web browser. There are lots of different web browsers (e.g. Chrome, Firefox, Safari, Internet Explorer/Edge, Opera, ...) and they each have their own quirks, but by and large if you don't try anything too fancy and you stick to recent version of browsers your results will be basically the same no matter which browser you use to view your web page.

  • When talking about "the server", you can be referring to a few things depending on the sentence you use it in: the server-side code you write (more on this in a minute), the piece of software that handles your server-side code and serves your web pages (this would be Apache or Tomcat), or the physical collection of aluminum, silicon, and plastic on which the above software is running (that is, a computer, anything ranging from your laptop to a dedicated machine). For the purposes of this discussion we'll stick to the first two.

As I said earlier, the most important part of the client/server distinction is in the separation of concerns between presenting and enabling interaction with data on the client and processing and storing data on the server. As much as possible, try to keep those separate; it will make your life much easier in the long run. The client code shouldn't have any idea how the data is stored or processed; that's the server's job, and the client shouldn't need to know. Similarly, the code you write on the server shouldn't care in the least how the data is being formatted and presented to the user. Instead, it should try to provide data in a format that is easy to deal with in lots of different ways.

But I'm getting ahead of myself. First we need to talk about the technology questions you asked. So let's drill down a bit.

The Client

Usually, different programming languages are used on the server and the client1. There are three primary languages used in the browser, and each has a distinct purpose that compliments the purpose of the other two. Forgive me (and feel free to skim or skip) if I tread ground you've already covered; I'm writing for the beginner here, so I want to make sure all the bases are covered.

HTML

HTML (the HyperText Markup Language) is the absolute foundation on which web pages are built. HTML's job is to describe the structure of the page and the data being presented in it. HTML separates things into sections, including headers, footers, articles, paragraphs, asides, and other such containers. HTML also tells the browser about images, videos, and flash games, which text or picture should be a link to somewhere else in the web, which text should be emphasized or where you're making a strong point. It can contain forms containing various sorts of input devices, and it can tell the browser where to send that form's content when you submit the form. Put another way, it describes the composition of your document, the relationships between sections of your content, and, to some degree, the purpose of certain sections of the document2.

HTML looks something like this:

<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>

Here's a link to see the above in action: http://codepen.io/kenbellows/pen/GZvmVy

As seen if you clicked that link, you can technically make a whole web page with just HTML. The thing is, it's pretty boring. First, it's very plain; this is because HTML contains no formatting information. It has structure, but no layout, color, typeface, border, or any other presentation-related information; that's the job of CSS3. Second, it's entirely static; this is because HTML isn't made to describe dynamic content or behaviors. HTML is intentionally static. If you want anything to move, change, or react to user interaction, if you want to display any dynamic content based on calculations made on the fly, that's where you need JavaScript.

Learn more about HTML here: https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/HTML_basics

CSS

CSS (Cascading Style Sheets) solve the formatting problem. If you're writing a static page that just displays the same content every time you load the page and doesn't require any user interaction, like a blog post, you probably only need HTML and CSS.

Here's just a little CSS for that HTML I posted up there:

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;
}

And a link: http://codepen.io/kenbellows/pen/wGqewE

See what just a little styling can do for a document?

Learn more about CSS: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started

JavaScript

JavaScript is what powers all the dynamic parts of a web page4. This is the most important section for the chart stuff you were talking about. JavaScript, unlike HTML and CSS, is a real, proper programming language, Turing-complete and everything, with all the usual branching, looping, function, and object oriented constructs you would expect from a modern language. Because of this, it's a lot more complex than either HTML or CSS, and it can take as long to master as any other full-fledged programming language.

Learn more about JavaScript here: https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/JavaScript_basics

Frameworks

Like any other modern language, JavaScript has plenty of libraries and frameworks written for it to help you handle a lot of the messier, boilerplatier parts of writing a web application. Angular.js, the one you mentioned, is a particularly popular framework at the moment, but you should know that it's only one of many, many frameworks. Don't get me wrong, though, it's a good one. But here's something to keep in mind: if you're just starting out with JavaScript as a language, it might not be the best idea to jump head first into a framework. For one, you're just compounding the amount of knowledge you'll need to get up and running; for another, and this is very important, you should probably learn the language in its own right before you start with a framework, to avoid becoming dependent on that framework. I've known a few too many developers who started with Angular right away, then a year later didn't have a solid grasp of why the code was behaving the way it was because they didn't take the time to get a firm understanding of the language fundamentals. Angular is wonderful, I use it all the time, but again, do yourself a favor and at least go through the MDN tutorial on JavaScript I linked above and try writing a couple toy applications before jumping into Angular.

A thought on your app idea

I actually think that for the purposes of your application, you don't need the server at all, other than for hosting it if you decide to publish it on the web or on your company's intranet or something. I'll talk about the server briefly below to answer your questions, but really, if all you need is to take in some user data and show it in real-time as a chart, you can do that with just some JavaScript. Angular would definitely be helpful since you sound like you want real-time updating charts. There are a few Angular-based chart/graph libraries out there that you should look into, e.g. https://jtblin.github.io/angular-chart.js/

The Server

Generally, the server handles data processing and storage. Instead of going into theory like I did for the client, let me answer your questions directly:

  • Tomcat and Apache - Tomcat and the Apache HTTP Server are two options for web servers. (These guys fit the second definition of "server" I gave above.) They are definitely popular choices, though Apache tends to be more popular for production servers, and Tomcat for development setups (in my experience; people argue about this all the time).

  • Spring - Spring, including all its various modules and tooling (SpringMVC, Spring Security, Spring Tool Suite, etc), is a Java framework to help you write your server code (server definition #1). In my personal opinion (worth what you're paying for it), Spring is great for large, complex applications with lots of moving parts, but is unnecessarily complicated for a simple app like the one you described.

  • MySQL - MySQL, like all flavors of SQL, is a database program. It stores data in tables and provides an interface for you to query that data in all sorts of convenient ways. Databases are great, and MySQL is a popular choice, but it's important to figure out whether you need a database for your project. Are you planning to store the data entered by the user for later use? If not, skip the database.

  • Other languages - Web server code can be written in any language you can run on the command line. If you like Java and you're good at it, stick with Java. If you want to be adventurous, maybe look into Node.js, a JavaScript server solution; you're learning JavaScript anyway, right? It's all about personal preference and what will get the job done for you. No need to learn PHP (and definitely no need to learn C, good god; please don't write your server code in C) just to write the backend for a simple app like the one you've got. Sounds like you're already learning a lot for this project; no need to add more to your plate.


1. (Might be best to read this footnote again after you're done with everything above.) One notable exception that's becoming more popular is the use of JavaScript on the server-side using Node.js. If you try JavaScript on the client-side and fall in love (like many of us do), maybe give Node a shot.

2. Read up on semantic markup once you've got the basics of how HTML works.

3. To be slightly more accurate, HTML shouldn't contain any of this information, although it technically can contain some of it. This is a holdover from the pre-CSS days of the late-90s/early-2000s, when a lot of sizing, font, and color information was stored in the markup. Please, do yourself a favor: leave formatting to CSS.

4. With the exception of some more advanced CSS rules you can use to get pretty basic hover-effects and simple animation. JavaScript is still necessary for anything involving calculations, iteration, logic, basically anything non-trivial.

这篇关于Web应用程序前端和后端的误解的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆