请选择 进入手机版 | 继续访问电脑版

石家庄老站长

点击联系客服
客服QQ:509006671 客服微信:mengfeiseo
 找回密码
 立即注册
查看: 24|回复: 0

用于前后交互的简单计算器3354 html、CSS、servlet、Tomcat

[复制链接]

1

主题

1

帖子

-7

积分

限制会员

积分
-7
发表于 2021-4-1 22:46:15 | 显示全部楼层 |阅读模式
前后端交互计算器

在做到这一点之前,首先要创建一个servlet项目,之前介绍了博客,我们就在这里开始吧。

第一步

创建Html文件





以下是在webapp目录下上创建代码的注意事项

!DOCTYPE  html

Html  lang='en  '

头(电影)

meta  charset=' utf-8 '

标题内计算器/标题

/
pan>head>
body>
form method="get" action="calc">
    div style="text-align: center">
h1>计算器h1>
数字1:input id="n1" name="number1" type="number" >p>p>
数字2:input id="n2" name="number2" type="number" >p>p>
input type="submit" value="提交">
    div>
form>
body>
html>

注意事项:

[ol]
  • 这里整个html文件是一个form表单
  • 提交键类型是"submit",不再是"button",button和后端连接不起来[/ol]
    第二步

  • 创建.java文件,写后端代码
    创建过程之前已经展示过,这里直接上代码

    直接五步蛇操作

    [ol]
  • 重写doGet,doPost方法,直接在post里面调用get
  • 设置编码格式
  • 设置返回类型
  • 接收前端数据
  • 给前端返回结果[/ol]
    注意事项

    [ol]
  • 设置编码格式的时候:大小写不敏感,UTF-8和utf-8都是可以的
  • 设置返回类型的时候共有四种:text/html,text/css,application/javascript,image/png
  • 设置编码格式和返回类型要在获得输出流(getWriter())之前
  • 在接收前端数据时用到的是name,不是id[/ol]
    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 calculator extends HttpServlet {
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            //1.设置编码格式
            resp.setCharacterEncoding("utf-8");
            //2.设置返回类型
            resp.setContentType("text/html");
            //3.接收前端数据
            int num1=Integer.parseInt(req.getParameter("number1"));
            int num2=Integer.parseInt(req.getParameter("number2"));
            int total=num1+num2;
            //4.给前端返回结果
            PrintWriter printWriter=resp.getWriter();
            printWriter.println(String.format("计算结果为:%d",total));
        }
        @Override
        protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            this.doGet(req,resp);
        }
    }

    第三步

  • 配置路由(web.xml)
    注意事项全在代码中了

    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_3_1.xsd"
             version="3.1"
             metadata-complete="true">
      
      servlet>
        servlet-name>longservlet-name>
       
        servlet-class>calculatorservlet-class>
      servlet>
      
      servlet-mapping>
       
        servlet-name>longservlet-name>
       
        url-pattern>/calcurl-pattern>
      servlet-mapping>
    web-app>

    第四步

  • 在idea里面配置Tomcat








    选择第一个war包,点击OK



    点击OK,配置完成


    这样子就配置成功了


    全部操作完成之后,直接点击运行即可
    稍等片刻,会弹出浏览器如下界面


    然后在url后添加html文件的名字和后缀就可以访问到了


    点击提交之后,会跳转到另一个页面


    这样子已经成功的进行了一次前后端交互

    这是页面整体提交,页面部分提交功能会在后续更新!!!
  • 回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|无图版|手机版|小黑屋|石家庄@IT精英团

    GMT+8, 2021-5-10 15:31 , Processed in 0.077383 second(s), 25 queries .

    Powered by Discuz! X3.4

    © 2001-2021 Comsenz Inc.

    快速回复 返回顶部 返回列表