创建Java Web项目并实现前后端交互

目录

一：使用工具

二：创建Java Web项目

三：编写代码

一：使用工具

Eclipse

版本如下：

 注：不同版本的eclipse创建的项目基础目录可能会有所不同。

二：创建Java Web项目

1.  File --> New --> Dynamic Web Project

 2. 输入项目名称 --> 配置Tomcat --> Next --> Next -->勾选Generate Web.xml deployment descriptor --> Finish 

 

 到这里一个基础的JavaWeb项目就已经创建好啦。

创建完成后是这样的：

 

 接下来就需要我们去填充它来实现一些基本的功能。

三：编写代码

1.用HTML编写一个简单的前端界面

首先在WebContent目录下新建一个html文件（注意是在WebContent目录下，而不是在meta-INF或WEB-INF目录下）。

创建好之后是这样的：

 先写一个最简单的登录界面：

    账号：


	密码：


	

之后我们还需要在web.xml中的下面新增一行代码来让浏览器读取这个html文件。

login.html

然后我们来测试一下。

测试方法：

项目总文件右键 --> Run As --> Run On server

现在就出来了下面的样子。

  为了测试方便，我们可以修改页面显示的地方。

这里可以随意修改，可以使用1 系统浏览器，也可以选择3 Chrome。

修改之后一定要记得重新启动Eclipse。

2.用Java编写后端

同上，我们还是得建一个Servlet文件，先在Java Resources里的src包里新建一个包，然后在包里再新建Servlet文件。

先建包是为了给后端的代码分类，方便后期管理。

 3.前后端实现交互

前端代码：

	账号：


	密码：


	

 在写前端代码的时候我们用到了jQuery，所以我们需要把它加进来，放在这里。 

js源码可自行百度。

后端代码：

package com.Mango;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


@WebServlet("/LoginServlet") //引号内的为前端引用时的名称，可任意修改
public class LoginServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

    
    public LoginServlet() {
        // TODO Auto-generated constructor stub
    }

	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//设置前端传过来的数据字符编码
		request.setCharacterEncoding("utf-8");
		
		//设置后端传给前端响应数据的字符编码
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/json;charset=utf-8");
		//接收前端传过来的数据
		String username = request.getParameter("username");
		String password = request.getParameter("password");
		System.out.println("前端传过来的账号："+username);
		System.out.println("前端传过来的密码："+password);
		
		//后端给前端相应json字符串
		
		String json = "{"username":"" + username + "","password":"" + password + ""}";
		response.getWriter().write(json);
	}

	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

这样的话一个简单的Java Web项目就建好啦。