如何把JSP移到后端改造成Servlet-IDEA

林月_y

已于 2022-10-31 21:56:55 修改

阅读量828

点赞数

文章标签： intellij-idea java ide

于 2022-10-29 15:00:40 首次发布

本文链接：https://blog.csdn.net/qq_54636388/article/details/127580801

版权

一、辛老师教程

一、idea运行web项目的设置

二、如何把JSP移到后端改造成Servlet-IDEA

一、辛老师教程

一、idea运行web项目的设置

选择框架：
1. 【File】【new】【project】
2. [java]_[project sdk:选择自己的jdk]__[java EE:勾选web application]
配置：
1. tomcat的配置
  1. 【run】[edit configuaration]：左上角+；添加【tomcat server】：修改【name】, [application server: 选择自己的tomcat]
  2. 下面的fix直接点
  3. deployment：【application context:删到只剩 /】
2. 给web添加directory：classes和lib
3. 【file】【project structure】
  1. 【modules】：paths__[Use module compile output path：两个选项框都选择本项目的classes路径]
特别注意：
1. tomcat先退出，因为idea会接管tomcat，不退出会导致端口占用
2. 如果直接拖进来的项目乱码，现在外面另存为utf-8格式；或者直接重新把正常内容复制一份进来

二、如何把JSP移到后端改造成Servlet-IDEA

在初始化页面index.jsp中添加跳转页面

<script>
  window.location.href="front.html";
</script>

添加servlet:
1. 新建包：在【src】中new一个package，【gps】；再在gps包上new一个package【monitor】
2. 添加servlet：在【monitor】添加；取名【ServletAction】
  1. 结果：【ServletAction】自动生成一段代码；【web.xml】自动生成一段代码
开始调试【ServletAction】
1. 在这个代码里：service函数是整个代码的入口，前面的函数不会起作用，除非调用（相当于main函数）
2. 修改【web.xml】中的内容，添加：
```
<servlet-mapping>
        <servlet-name>ServletAction</servlet-name>
        <url-pattern>/gps_monitor_servlet_action</url-pattern>
    </servlet-mapping>

//url-pattern完全对应浏览器的输入；；；相当于只是浏览器中的另一个名字而已，可以换

//https://blog.csdn.net/woshizoe/article/details/7696367
```
3. 在前端页面修改url：为上述<url-pattern>中的名字：这样就把前端数据传输到servlet中去了
4. 在【ServletAction】中添加之前后端界面的东西，最好在service函数里面再创造函数，容易调试
5. 前端页面的初始查询数据有问题，修改即可
代码提示红色：
1. 没有servlet方法：【file】【project structure】【dependencies】添加tomcat的公共library（一整个加进去）
2. 其他：创建类即可

二、梳理前端框架

一、前端界面：front.html

前端代码

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script>
function getMyData(){
	var deviceId=document.getElementById("device_id").value;
	var gpsTimeFrom=document.getElementById("gps_time_from").value;
	var gpsTimeTo=document.getElementById("gps_time_to").value;

	gpsTimeFrom=encodeURI(gpsTimeFrom);
	gpsTimeTo=encodeURI(gpsTimeTo);
	var url="/gps_monitor_servlet_action?device_id="+deviceId+"&gps_time_from="+gpsTimeFrom+"&gps_time_to="+gpsTimeTo+"&action=get_gps_record";
	alert("构造的URL是："+url);
	//showWaitTip();	//显示等待动画
	$.post(url,function(data){
		// hideWaitTip();
		//显示在content中
		document.getElementById("json").value=data;
		var json=eval("("+data+")");
		var list=json.record_list;
		var obj=document.getElementById("content");
		obj.value="返回的消息是："+json.result_msg+"\r\n";
		obj.value=obj.value+"返回的代码是："+json.result_code+"\r\n";
		obj.value=obj.value+"返回的action是："+json.action+"\r\n";
		obj.value=obj.value+"返回的长度是："+list.length+"\r\n";
		var count=list.length;
		for (var i=0;i<count;i++){
			obj.value=obj.value+"设备ID："+list[i].device_id+"，GPS时间："+list[i].gps_time+"，接收时间："+list[i].recv_time+"，经度："+list[i].longitude+"，纬度："+list[i].latitude+"\r\n";
		}
	});
}
</script>


请输入：
<form >
<input type="text" id="device_id" name="device_id" value="381215032027883" />
<input type="text" id="gps_time_from" name="gps_time_from" value="2015-9-20" />
<input type="text" id="gps_time_to" name="gps_time_to" value="2015-9-22 16:03:01" />
<input type="button" value="查询" onclick="getMyData();"/><hr>
返回的：
<input type="text" id="action" name="action" value="这里是action"/><br>
<textarea id="json" name="json" style="width:100%;height:300px;">这里是原始json</textarea><br>
<textarea id="content" name="content" style="width:100%;height:300px;">这里是解析的json</textarea>
</form>

<!--<iframe id="ifra_head" style="filter:alpha(opacity=0);position:absolute;width:expression(this.nextSibling.offsetWidth);height:expression(this.nextSibling.offsetHeight);top:expression(this.nextSibling.offsetTop);left:expression(this.nextSibling.offsetLeft);" frameborder="0" ></iframe>-->
<!--<div  id="LoadProcess_head" style="visibility:hidden;position:absolute; left:40%; top:111px; width:280px; height:50px; z-index:1;z-index:11;"> -->
<!--	<div align=center style="color:#000000;border:1px solid #ffffff;height:50px;padding:5px 0px 0px 0px" id="id2"><img src="wait.gif"><span id="waitTip">请稍候......</span></div>-->
<!--</div>-->



<!--<script>-->
<!--function hideWaitTip(){-->
<!--	document.all('LoadProcess_head').style.visibility ="hidden";-->
<!--	document.all('ifra_head').style.visibility = "hidden";-->
<!--}-->
<!--function showWaitTip(){-->
<!--	document.all('LoadProcess_head').style.visibility ="visible";-->
<!--	document.all('ifra_head').style.visibility = "visible";-->
<!--}-->
<!--</script>-->

框架

头文件：静态页面的配置

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

js代码插入

<script>
function getMyData(){
	var deviceId=document.getElementById("device_id").value;
	var gpsTimeFrom=document.getElementById("gps_time_from").value;
	var gpsTimeTo=document.getElementById("gps_time_to").value;
	gpsTimeFrom=encodeURI(gpsTimeFrom);
	gpsTimeTo=encodeURI(gpsTimeTo);
	var url="/gps_monitor_servlet_action?device_id="+deviceId+"&gps_time_from="+gpsTimeFrom+"&gps_time_to="+gpsTimeTo+"&action=get_gps_record";
	alert("构造的URL是："+url);
	//showWaitTip();	//显示等待动画
	$.post(url,function(data){

//https://www.runoob.com/jquery/ajax-post.html

		//hideWaitTip();
		//显示在content中
		document.getElementById("json").value=data;
		var json=eval("("+data+")");
		var list=json.record_list;
		var obj=document.getElementById("content");
		obj.value="返回的消息是："+json.result_msg+"\r\n";
		obj.value=obj.value+"返回的代码是："+json.result_code+"\r\n";
		obj.value=obj.value+"返回的action是："+json.action+"\r\n";
		obj.value=obj.value+"返回的长度是："+list.length+"\r\n";
		var count=list.length;
		for (var i=0;i<count;i++){
			obj.value=obj.value+"设备ID："+list[i].device_id+"，GPS时间："+list[i].gps_time+"，接收时间："+list[i].recv_time+"，经度："+list[i].longitude+"，纬度："+list[i].latitude+"\r\n";
		}
	});
}
</script>

前端显示代码

请输入：
<form action="back.jsp">
//action="back.jsp"可以删掉；back.jsp文件也可以直接删除
<input type="text" id="device_id" name="device_id" value="381215032027883" />
<input type="text" id="gps_time_from" name="gps_time_from" value="2015-9-20" />
<input type="text" id="gps_time_to" name="gps_time_to" value="2015-9-22 16:03:01" />
<input type="button" value="查询" onclick="getMyData();"/><hr>
返回的：
<input type="text" id="action" name="action" value="这里是action"/><br>
<textarea id="json" name="json" style="width:100%;height:300px;">这里是原始json</textarea><br>
<textarea id="content" name="content" style="width:100%;height:300px;">这里是解析的json</textarea>
</form>

<iframe id="ifra_head" style="filter:alpha(opacity=0);position:absolute;width:expression(this.nextSibling.offsetWidth);height:expression(this.nextSibling.offsetHeight);top:expression(this.nextSibling.offsetTop);left:expression(this.nextSibling.offsetLeft);" frameborder="0" ></iframe>
<div  id="LoadProcess_head" style="visibility:hidden;position:absolute; left:40%; top:111px; width:280px; height:50px; z-index:1;z-index:11;"> 
	<div align=center style="color:#000000;border:1px solid #ffffff;height:50px;padding:5px 0px 0px 0px" id="id2"><img src="wait.gif"><span id="waitTip">请稍候......</span></div>
</div>

<textarea> 标签定义多行的文本输入控件。

文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。HTML <textarea> 标签 (w3school.com.cn)

步骤解读：
1. 显示基本界面（可以输入查询信息的表单）
2. 构造url post查询数据给servlet
  1. jQuery – AJAX get() 和 post() 方法 | 菜鸟教程 (runoob.com)
  2. eval函数作用：去掉两边的大括号（特指这里）js中的 json和eval函数_codercv的博客-CSDN博客_json和eval
3. data数据返回，显示在前端界面
idea 启动成功后会运行lib文件夹下的index.jsp文件如何更改：在【web.xml】插入以下代码
```
<welcome-file-list>
        <welcome-file>front.html</welcome-file> //自己的前端网页
</welcome-file-list>
```
1. else
else

二、所需文件(只有三个)

front,html
jquery-1.8.3.min.js
- jQuery 安装 | 菜鸟教程 (runoob.com)
- else
ServletAction

三、后端文件（servlet）

代码

package gps.monitor;

import org.json.JSONException;
import org.json.JSONObject;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.*;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class ServletAction extends javax.servlet.http.HttpServlet {
//    protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
//
//    }
//
//    protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
//        try {
//            processGpsGetRecord(request,response);
//        } catch (JSONException e) {
//            e.printStackTrace();
//        }
//    }
protected void service(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
    System.out.println("执行了 service");
    try {
        processGpsGetRecord(request,response);
    } catch (JSONException e) {
        e.printStackTrace();
    }
}




    protected void processGpsGetRecord(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException, JSONException, JSONException, JSONException
    {
        System.out.println("执行了 service");
        response.setContentType("text/xml;charset=utf-8");
        response.setCharacterEncoding("utf-8");
        response.setHeader("Cache-Control", "no-cache");
        String deviceId=request.getParameter("device_id");
        String gpsTimeFrom=request.getParameter("gps_time_from");
        String gpsTimeTo=request.getParameter("gps_time_to");
        String action=request.getParameter("action");
        System.out.println("获得的参数是：action="+action+",device_id="+deviceId+",gps_time_from="+gpsTimeFrom+",gps_time_to="+gpsTimeTo);
        //开始查询数据库
        List jsonList = new ArrayList();
        try {
            Class.forName("com.mysql.jdbc.Driver");
        } catch (ClassNotFoundException classnotfoundexception) {
            classnotfoundexception.printStackTrace();
        }
        try {
            Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test?user=root&password=955240&useUnicode=true&characterEncoding=UTF-8");
            Statement statement = conn.createStatement();
            System.out.println("连接数据库Ok！！！");
            //构造sql语句，根据传递过来的查询条件参数，目前是deviceId和gpsTime
            String sql="select * from gps_history where gpstime>'"+gpsTimeFrom+"' and gpstime<'"+gpsTimeTo+"' and deviceId='"+deviceId+"' order by gpstime";
            System.out.println("构造出来的sql语句是："+sql);
            ResultSet rs = statement.executeQuery(sql);
            while (rs.next()) {
                Map map = new HashMap();
                map.put("device_id",rs.getString("deviceId"));
                map.put("gps_time",rs.getString("gpstime"));
                map.put("recv_time",rs.getString("recvtime"));
                map.put("longitude",rs.getString("longitude"));
                map.put("latitude",rs.getString("latitude"));
                jsonList.add(map);
            }
            statement.close();
            conn.close();
            System.out.println("数据库关闭了！！！");
        } catch (SQLException sqlexception) {
            sqlexception.printStackTrace();
        }
        //数据库查询完毕，得到了json数组jsonList//
        //下面开始构建返回的json
        JSONObject json=new JSONObject();
        try {
            json.put("record_list",jsonList);
        } catch (JSONException e) {
            e.printStackTrace();
        }
        try {
            json.put("action",action);
        } catch (JSONException e) {
            e.printStackTrace();
        }
        try {
            json.put("result_msg","ok");	//如果发生错误就设置成"error"等
        } catch (JSONException e) {
            e.printStackTrace();
        }
        try {
            json.put("result_code",0);	//返回0表示正常，不等于0就表示有错误产生，错误代码
        } catch (JSONException e) {
            e.printStackTrace();
        }
        System.out.println("最后构造得到的json是："+json.toString());
        response.setContentType("text/html; charset=UTF-8");
        try {
            response.getWriter().print(json);
            response.getWriter().flush();
            response.getWriter().close();
        } catch (IOException e) {
            e.printStackTrace();
        }
        System.out.println("返回结果给调用页面了。");
    }


}

框架

service里面构建函数
```
processGpsGetRecord(request,response);
```

设置编码________得到数据

 response.setContentType("text/xml;charset=utf-8");
 response.setCharacterEncoding("utf-8");
 response.setHeader("Cache-Control", "no-cache");

 String deviceId=request.getParameter("device_id");
 String gpsTimeFrom=request.getParameter("gps_time_from");
 String gpsTimeTo=request.getParameter("gps_time_to");
 String action=request.getParameter("action");

json
```
List jsonList = new ArrayList();
```

开始查询数据库（加载驱动）

try {
            Class.forName("com.mysql.jdbc.Driver");
        } catch (ClassNotFoundException classnotfoundexception) {
            classnotfoundexception.printStackTrace();
        }

查询数据库（数据库查询完毕，得到了json数组jsonList）

try {
            Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test?user=root&password=955240&useUnicode=true&characterEncoding=UTF-8");
            Statement statement = conn.createStatement();
            System.out.println("连接数据库Ok！！！");
            //构造sql语句，根据传递过来的查询条件参数，目前是deviceId和gpsTime
            String sql="select * from gps_history where gpstime>'"+gpsTimeFrom+"' and gpstime<'"+gpsTimeTo+"' and deviceId='"+deviceId+"' order by gpstime";
            System.out.println("构造出来的sql语句是："+sql);
            ResultSet rs = statement.executeQuery(sql);
            while (rs.next()) {
                Map map = new HashMap();
                map.put("device_id",rs.getString("deviceId"));
                map.put("gps_time",rs.getString("gpstime"));
                map.put("recv_time",rs.getString("recvtime"));
                map.put("longitude",rs.getString("longitude"));
                map.put("latitude",rs.getString("latitude"));
                jsonList.add(map);
            }
            statement.close();
            conn.close();
            System.out.println("数据库关闭了！！！");
        } catch (SQLException sqlexception) {
            sqlexception.printStackTrace();
        }

构建返回的json：

JSONObject按put顺序排放与输出：JSONObject按put顺序排放与输出_两两翅膀的博客-CSDN博客_jsonobject put
json.put()：实例化一个JSONObject 对象，用put() 方法将数据写入JsonObject是什么-js教程-PHP中文网
-------------------------------------------------------------------------------------------
else

JSONObject json=new JSONObject();
        try {
            json.put("record_list",jsonList);
        } catch (JSONException e) {
            e.printStackTrace();
        }
        try {
            json.put("action",action);
        } catch (JSONException e) {
            e.printStackTrace();
        }
        try {
            json.put("result_msg","ok");	//如果发生错误就设置成"error"等
        } catch (JSONException e) {
            e.printStackTrace();
        }
        try {
            json.put("result_code",0);	//返回0表示正常，不等于0就表示有错误产生，错误代码
        } catch (JSONException e) {
            e.printStackTrace();
        }
        System.out.println("最后构造得到的json是："+json.toString());
        response.setContentType("text/html; charset=UTF-8");
        try {
            response.getWriter().print(json);
            response.getWriter().flush();
            response.getWriter().close();
        } catch (IOException e) {
            e.printStackTrace();
        }

else

流程
1. service写函数
2. 写函数
  1. 编码问题
  2. 得到参数
  3. 加载驱动，连接数据库
  4. 得到json数据，为了得到返回的data
    1. 通过构造的sql语句查找到响应语句，每一组（序列数组）存入一个map对象，每一个map对象对应一整条信息（id，time,......）
    2. new 一个json对象：这个就包含要返回给前端的全部数据，包括大括号也将会返回
特别提醒