idea servlet 前后端分离实例

╰半橙微兮° 2022-12-19 13:10 114阅读 0赞

第一步：在idea下建一个javaWEB工程；

第二步：新建一个工程，不需要在web下写些前端，因为想在HBuild中写前端；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbnRpbmdibw_size_16_color_FFFFFF_t_70][]

第三步：在controller包下新建一个servlet，我这里命名叫Servlet1,代码如下：

protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        String name=request.getParameter("name");
        System.out.println(name);
        PrintWriter out = response.getWriter();
        try{
            out.write(name);
            out.flush();
        }catch (Exception e){
            e.printStackTrace();
        }finally {
            out.close();
        }
    }

第三步：打开HBuilder编辑器，新建一个html项目，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbnRpbmdibw_size_16_color_FFFFFF_t_70 1][]

index2.html的代码如下：

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<meta http-equiv="X-UA-Compatible" content="ie=edge">  
<title>Title</title>  
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">  
$(function()\{  
$("\#btn").click(function()\{  
var name=$('\#name').val();  
if(name=="")\{  
alert("姓名不能为空！");  
return;  
\}  
$.ajax(\{  
url: "http://localhost:8080/servlet2\_war\_exploded/xxx", //向这个网址进行提交，这个网址是先运行后端后从浏览器地址栏拷贝过来的。  
data: \{"name": name\},  
type:'post',

//dataType:'json', //这一句在此处不能要，因为我这里返回的是一个string，所以要了后反而在前端收不到后端发送过来的数据。  
success: function (data) \{  
$('\#h1').text(data);  
\},  
error: function () \{  
console.log("error")  
\}  
\});  
\});  
\});  
</script>  
</head>  
<body>  
<form id="form1">  
请输入姓名：<input type="text" name="name" id="name"><br/>  
<input type="button" name="btn" id="btn" value="提交" />  
<input type="reset" name="rebtn" id="rebtn" value="重置">  
</form>  
<h1 id="h1"></h1>  
</body>  
</html>

第四步：要想后端的数据能正常返给前端，还后端还必须建一个Filter类，让它能跨域，没有这个后端的数据返不到前端。

package serviceImp;
    
    
    import javax.servlet.*;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    
    public class HeaderFilter implements Filter {
        @Override
        public void init(FilterConfig filterConfig) throws ServletException {
        }
        @Override
        public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
            HttpServletResponse response = (HttpServletResponse) servletResponse;
            response.setHeader("Access-Control-Allow-Origin", "*"); //解决跨域访问报错
            response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
            response.setHeader("Access-Control-Max-Age", "3600"); //设置过期时间
            response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, client_id, uuid, Authorization");
            response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // 支持HTTP 1.1.
            response.setHeader("Pragma", "no-cache"); // 支持HTTP 1.0. response.setHeader("Expires", "0");
            filterChain.doFilter(servletRequest, servletResponse);
        }
        @Override
        public void destroy() {
        }
    }

第五步：仅仅是做好上面的是不行的，还要把前端和后端用web.xml联系起来

<?xml version="1.0" encoding="UTF-8"?>
    <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
             xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
             version="4.0">
    
        <filter>
            <filter-name>HeaderFilter</filter-name>
            <filter-class>serviceImp.HeaderFilter</filter-class>
        </filter>
        <filter-mapping>
            <filter-name>HeaderFilter</filter-name>
            <url-pattern>/*</url-pattern>
        </filter-mapping>
    
        <servlet>
            <servlet-name>Servlet1</servlet-name>
            <servlet-class>controller.Servlet1</servlet-class>
        </servlet>
        <servlet-mapping>
            <servlet-name>Servlet1</servlet-name>
            <url-pattern>/xxx</url-pattern>
        </servlet-mapping>
    </web-app>

第六步：先运行后端，得知后端的URL后，把它填到前端的ajax的URL中，在前端中提交数据，就可以发送到java后台；java后台处理后，就可以再返到前端了，完美解决。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbnRpbmdibw_size_16_color_FFFFFF_t_70 2][]

参考网址：[https://blog.csdn.net/qinyf2015/article/details/79426227][https_blog.csdn.net_qinyf2015_article_details_79426227]

[https://blog.csdn.net/u012972294/article/details/103717259?utm\_medium=distribute.pc\_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel\_param&depth\_1-utm\_source=distribute.pc\_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel\_param][https_blog.csdn.net_u012972294_article_details_103717259_utm_medium_distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param_depth_1-utm_source_distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param]

[https://www.cnblogs.com/JavaMVC/articles/6943624.html][https_www.cnblogs.com_JavaMVC_articles_6943624.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbnRpbmdibw_size_16_color_FFFFFF_t_70]: /images/20221120/28c49f6086bb4c15b94f4ed8ddd25bf4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbnRpbmdibw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201107175338545.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbnRpbmdibw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbnRpbmdibw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201107180434912.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbnRpbmdibw==,size_16,color_FFFFFF,t_70
[https_blog.csdn.net_qinyf2015_article_details_79426227]: https://blog.csdn.net/qinyf2015/article/details/79426227
[https_blog.csdn.net_u012972294_article_details_103717259_utm_medium_distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param_depth_1-utm_source_distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param]: https://blog.csdn.net/u012972294/article/details/103717259?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param
[https_www.cnblogs.com_JavaMVC_articles_6943624.html]: https://www.cnblogs.com/JavaMVC/articles/6943624.html