jsp案例：计算矩形、圆形面积

清疚 2022-02-28 01:40 400阅读 0赞

**目录**

1.要求

2.实现步骤

3.细节

4.效果图

5.总结

--------------------

### 1.要求 ###

编写两个Tag文件Rect.tag和Circle.tag。Rect.tag负责计算并显示矩形的面积，Circle.tag负责计算并显示圆的面积。编写一个JSP页面lianxi6.jsp，该JSP页面使用Tag标记调用Rect.tag和Circle.tag。调用Rect.tag时，向其传递矩形的两个边的长度；调用Circle.tag时，向其传递圆的半径。

### 2.实现步骤 ###

2.1 **lianxi6.jsp**

<%@ page contentType = "text/html;charset = gb2312" %>
    <%@ taglib tagdir = "/WEB-INF/tags" prefix="computer" %>
    <HTML>
    <BODY>
        <form action="" method=get name=form>
        <h3>计算矩形面积：</h3>
                    <table>
                        <tr>
                            <td>长：</td>
                            <td><input type="text" name="a"></td>
                        </tr>
                        <tr>
                            <td>宽：</td>
                            <td><input type="text" name="b"></td>
                        </tr>
                        <h3>计算圆形面积</h3>
                        <tr>
                            <td>半径：</td>
                            <td><input type="text" name="r"></td>
                        </tr>
                    </table>
                    <br> <input type="submit" value="计算" name=submit>
                </form>
                <%    String a=request.getParameter("a");
                      String b=request.getParameter("b");
                      String r=request.getParameter("r");
                      if(a==null||b==null||r==null){
                         a="0";
                         b="0";
                         r="0";
                      }
                      if(a.length()>0&&b.length()>0&&r.length()>0){
                  %>   <computer:Rect sideA="<%=a%>" sideB="<%=b%>"/>
                       <computer:Circle radius="<%=r%>"/>
                       <br> 矩形面积：
                       <br> <%=area1 %>
                       <br> 圆形面积：
                       <br> <%=area2 %>
                  <% }
                  %>
    </BODY>
    </HTML>

2.2 **Rect.tag   计算矩形面积**

<%@ tag pageEncoding="gb2312" %>
        <%@ attribute name = "sideA" required = "true" %>
        <%@ attribute name = "sideB" required = "true" %>
        <%@ variable name-given="area1" variable-class="java.lang.Double" scope="AT_END" %>
        <%!
            public double getArea(double a,double b){
                if(a>0&&b>0){
                    double area = a*b;
                    return area;
                }else{
                    return -1;
                }
            }
        %>
    
        <%  try{  
                double a = Double.parseDouble(sideA);
                double b = Double.parseDouble(sideB);
                double result = getArea(a,b);
                jspContext.setAttribute("area1",new Double(result));         
            }
            catch(Exception e){
                jspContext.setAttribute("area1",new Double(-1.0));
            }
        %>

2.3 **Circle.tag    计算圆形面积**

<%@ tag pageEncoding="gb2312" %>
        <%@ attribute name="radius" required="true" %>
        <%@ variable name-given="area2" variable-class="java.lang.Double" scope="AT_END" %>
        <%!
            public  double getArea(double r){
                if(r>0){
                    double area=Math.PI * r * r;
                    return area;
                }else{
                    return -1;
                }
            }
        %>
    
        <%  try{  
                double r=Double.parseDouble(radius);
                double result1=getArea(r);
                jspContext.setAttribute("area2",new Double(result1));         
            }
            catch(Exception e){
                jspContext.setAttribute("area2",new Double(-1.0));
            }
        %>

### 3.细节 ###

*  Tag文件要保存到 web服务目录\\WEB\_INF\\tags
 *  Tag文件必须使用ANSI编码保存
 *  由于我用webstorm写的代码，保存文件后，不管是使用utf-8、gb2312编码都会出现乱码，解决方法是：新建一个txt文本，将代码复制进去，再点“另存为”，在右下角“编码”处选择合适的即可
 *  不要打错字
 *  不要随便加空格！（为了使代码看起来美观整洁，在一些类似于普通的赋值语句=前后加了空格，double area = Math.PI \* r \* r; 但是会导致数据一直无法传递，去掉了所有代码里的空格后才能正常使用）

### 4.效果图 ###

1.初始状态：

![20190323225542918.png][]

2.计算：

![20190323225607585.png][]

### 5.总结 ###

多思考，多总结，总能越来越好！

[20190323225542918.png]: /images/20220228/f82784275b9c4f4fbcaab6cbc9113f7d.png
[20190323225607585.png]: /images/20220228/596e2dc24ba2488a99ad9e6d717e23ef.png