开发工具,IDEA
IDEA中,一个web项目会对应一个Tomcat,每次创建一个项目都需要设置Tomcat
配置过程如下
一个简单的JavaWeb项目就搭建好了
会自动帮你生成下面的类:
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
public class LoginServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
此时就可以运行项目了,只不过在打开的浏览器中什么都没有,因为默认访问的index.jsp页面中什么也没有写
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
Servlet
Hello world!
运行项目,此时点击提交,就会跳转一个空白页面,因为什么都没有写
在刚才建立的LoginServlet中可以添加一个输出,在IDEA的控制台中就可以看到输出了
package com.review;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
public class LoginServlet extends HttpServlet {
//当有POST请求时,该函数会执行
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("doPost........"); //控制台打印
}
//当有GET请求时,该函数会执行
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("doGet........"); //控制台打印
}
}
在建立的LoginServlet中的添加如下代码
//当有GET请求时,该函数会执行
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("doGet........"); //控制台打印
String userName = request.getParameter("userName");
String password = request.getParameter("password");
System.out.println(userName+"-->"+password);
//form表单提交以及页面跳转
if(password.equals("123456")){
request.getRequestDispatcher("success.jsp").forward(request,response);
}else{
request.getRequestDispatcher("index.jsp").forward(request,response);
}
}
再次运行项目,输入内容,点击提交,后端就可以打印前端输入的值
同时再与index.jsp同级的目录下建立一个success.jsp的文件,如果你输入的密码为123456,页面就会跳转到success.jsp页面
数据通过表单提交,会出现页面的跳转,
以登录为主:
成功:servlet跳转到登录成功页面
失败:servlet跳转到登录页面
存在的问题:
(1)点击提交,会出现页面的跳转
(2)登录页面上的内容丢失了
(3)前端和后端没有脱离,有关系
页面的跳转:是不是前端的问题,但是现在页面跳转有后端帮我做了,
如果是C/S:是移动端,有怎么实现页面的跳转呢。
怎么解决:
使用异步加载:ajax
前后端分离:后台只处理并返回数据,数据,数据,即可。
使用
首先,前端虚引用JQuery包,目录结构如下
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
Servlet
Hello world!
用户名:
密 码:
package com.review;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
public class LoginServlet extends HttpServlet {
//当有POST请求时,该函数会执行
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("doPost........"); //控制台打印
}
//当有GET请求时,该函数会执行
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("doGet........"); //控制台打印
String userName = request.getParameter("userName");
String password = request.getParameter("password");
System.out.println(userName+"-->"+password);
response.setContentType("text/html;charset=utf-8");
PrintWriter writer = response.getWriter();
if(password.equals("123456")){
writer.print("欢迎"+userName);
}
else{
writer.print("密码错误!");
}
writer.flush();
writer.close();
}
}
此时运行代码,就可以正常跳转和提示了
在项目开发的过程中,可能会遇到以下问题
前端运行时,输入了数据,提交之后却没有结果返回
后端说我的代码没有问题,那么,到底如何判断是谁的问题
方法如下,首先看前端的数据到底有没有传入后端
以这次的代码为案例,在doGet方法出设置一个断点,前端输入数据后提交,会卡在断点处
此时就可以查看前端的数据到底有没有传入,方法如下
此处我的前端没有问题,数据都传入了,那么如何查看后端结果有没有返回呢?
方法如下,首先在前端浏览器中设置断点,然后点击提交,就可以看到后台返回的结果了,此处后端数据正确返回,所以可以进行页面跳转
用以上方法可以很方便的区分到底是前端的问题还是后端的问题,可以让你更快的找到出现错误的地方
在上面的案例中,虽然可以看到项目执行的效果,倒是数据传输的格式还是非常不规范的
为了规范的传输数据的格式,可以使用JSON
这里使用到了阿里巴巴的一个控件FastJSON,它可以很好的帮助你使用JSON
下载地址如下 官方下载地址
目录结构如下,web包下的lib是为jsp提供相关jar包的,而WEB-INF中的lib是为了class类提供相关工具jar包的
为什么不放到src目录下呢?你可以查看out文件夹,就知道原因了
此处可以看到你的类,因为项目没有刷新,所有fastjson.jar没有加载
添加依赖的方式如上面的案例一样,选择的是jar包
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
Servlet
Hello world!
用户名:
密 码:
package com.review;
import com.alibaba.fastjson.JSONObject;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
public class LoginServlet extends HttpServlet {
//当有POST请求时,该函数会执行
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("doPost........"); //控制台打印
}
//当有GET请求时,该函数会执行
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("doGet........"); //控制台打印
String userName = request.getParameter("userName");
String password = request.getParameter("password");
System.out.println(userName+"-->"+password);
response.setContentType("text/html;charset=utf-8");
PrintWriter writer = response.getWriter();
JSONObject jsonObject = new JSONObject();
if(password.equals("123456")){
jsonObject.put("code",0);
jsonObject.put("msg","密码正确");
JSONObject user = new JSONObject();
user.put("userName",userName);
jsonObject.put("data",user);
}
else{
jsonObject.put("code",1);
jsonObject.put("msg","密码错误");
}
String result = jsonObject.toJSONString();
writer.print(result);
writer.flush();
writer.close();
}
}
此时可以运行项目,并进行相关提示
当你加载页面时,你的项目中会出现一个out文件夹,这个文件夹会将你的项目打包好,并在浏览器中显示
所以,你查看的网页其实是在out文件夹中的,但当项目中导入JQuery包,out文件夹中并没有及时的将JQuery包导入,
所以就会出现上述问题,解决方案有两个:
1:重新启动项目
2:如果重新启动项目后还是会出现错误,那么就删除out文件夹中的内容,再次运行项目,就可以了
注意,out文件夹不要删除!
接收到的结果,是一个JSON字符串,那么,如果接收到的结果不是一个JSON字符串,会出现什么问题?
会出现以下的错误:
但执行下面的语句,就不会出错:
它只出现了undefined,并没有报错,是可以通过编译的,但是上面的语句连编译都不会通过
所以当你返回的result不是一个json对象时,问题2中的代码可以为你解决这个问题,这是一个项目的优化点
现在将接收到的JSON字符串转换为JSON对象,那么,如果想要取出JSON对象中的值,该如何操作
先来分析一下项目中JSON对象的组成
var json = {
code : 0 ,//code为不同的数字,不同的数字代表不同的含义
msg : "message",//msg为不同的信息,即当code取不同的值时,msg有不同的内容
data :{
userId :"xxxxxx",
userMEssage : {
uname : "zx",
usex : "male"
}
} //data,数据,此处包含了前端需要的数据,该数据由后端返回,data中也可以理解为
//data内容有多个,而且可以嵌套下去
}
那么,如何获取JSON对象的值,方法如下
JSON中的数据是以键值对的形式存放的,如上面的案例,键为 code 值为 0
想要获取值,可以使用自带的 json.code 来获取
如果想要获取data中的值,可以使用一下方法 json.data['key'].value 来获取
以此类推,想要获取上述案例data中的usex,可以使用 json.data['userMEssage']['usex'].value
这样就可以获取到JSON对象中自己想要的值