项目的基本流程

一：创建一个项目

通过前几章的学习，我们已经对html有了一个基本的了解了。现在我们用html做一个简单的登录页面，样式如下：

（验证码为额外知识，可以先不写）

用最基础的方法来制作就是：将上面页面分成9个模块，分别用<div></div>的标签包裹，然后再对其加css来进行样式的完善。当然了，为了让页面跟好看，也可以尝试用其他标签来进行编写。

接下来进入本章的重点：如何进行前后端交互。

什么是前后端交互呢，以上面的登入页面为例。当你输入账号和密码后，点击登录按钮，电脑会将账号和密码的值传给后端，后端会对该数据进行处理的过程我们称为前后端交互。

大概了解后，我们来讲解一下一个简单项目的基本运行流程。

首先，我用的是以下两个软件，没有的可以查找相关课程来完成对环境的编译。

我们先来讲第一个软件：eclipse。

进入软件后我们首先需要在图示区域建立一个我们要做到项目。

我们需要做的是一个动态页面项目，所以创建过程如下：（在空白处鼠标右键）

然后命名：

现在我们已经创建了一个属于我们的项目，名字我们设为：contentManage_202312。

在这个项目中，我们可以简单的认为：第一部分为存放前后端交互的代码，第二部分为存放前端页面的代码。

有了以上了解，我们就可以基本了解了一个项目的基本运行流程了：

在2中，我们可以得到一个简单的页面，通过点击页面中的按钮，我们将页面中的信息传到1中，1中的代码进行一系列的处理后，将数据传到数据库中（即软件Navicat Preminum 12里），数据库判断完成后再将信息传回给1，最后1再将信息传回给页面。

二：如何进行前后端交互

我们将所写的页面信息放入2中后，我们怎么将页面中的信息传给1呢？

首先我们需要在js里面储存前端所传来的信息。以账号为例：我们在账号的输入框<input type="
text" calss="account">中输入数据后，我们在js中通过一下代码存储账号输入框内的值。

var  account = $(".account").val()

通过js存储完前端的信息后，我们要怎么把它传到后端呢？那么就要引出接下来的概念：ajax。

基本架构如下：

url:"add"

其中"add"为你所想要传给后端的名字，url后面写什么，前端就会找到.java文件中与之对应的名称然后传入数据

type: "post"

这个目前可以不用管，知道如果为post，那么数据将会传到.java文件里的doPost。如果为get，数据就会传到.java文件里的doGet即可。

data: {

                account:account

            },

data里面就是你所想要传给后端的数据。

success: function(data) {

                alert("666")

            }

 success: function(data){} 里面就是后端给前端反馈的数据，其中这里面的alert("666")为弹框的意思，弹框的内容为“666”