JSP 简单入门与 IDEA 开发环境配置

发表于 2019-11-23

数据库课程画风一转来到了GUI的构建上

关于Serverlet这类东西我了解的确实不多，一开始上手确实头大，连基本的运行逻辑都没弄明白

然后发现这玩意还挺有意思的，真香

什么是JSP？

动态网页技术标准
能把Java代码嵌入静态的页面中
JSP编译器把JSP文件编译成Java写的Servlet，再交由Java编译器

<html>
    <title>Hello world!</title>
    <body>
        <%=out.println("Hello world!")%>
    </body>
</html>

环境配置

语言环境：JDK
网页服务器：Tomcat
IDE：IntelliJ IDEA / Eclipse

前两点非常简单不再赘述。

老师竟然说JSP没什么好用的编辑器只能在记事本中写（黑人问号

明明Eclipse和IDEA都可以…

这里记录一下IDEA如何配置JSP的开发环境

IntelliJ IDEA Configuration

新建一个Java Enterprise项目，下面Application Server选择新建，

选择Tomcat Server，设置Tomcat Home(安装目录)

这里需要注意IDEA可能会没有权限访问Tomcat的目录，导致无法读取Tomcat，需要手动访问一次该目录提权：

Windows：资源管理器直接访问，会提示需要管理员权限，点继续就OK了

Linux：chmod 777
下面Additional Libraries and Frameworks选择Web Application，

点Next，改名创建，得到如下图所示结构的项目
打开index.jsp

打开右上角Edit Configuration

选择Application server

URL一般是

http://localhost:8080/JSP_war_exploded/index.jsp

其中JSP为项目名字，_war_exploded为自动生成的后缀，需要保留
打开Deployment，界面应如下图

如果这个war_exploded没有出现在里面的话点击右边加号自己加进去

简单写一下index.jsp

比如下面实现了一个简单的Hello world的页面

<html>
    <title>Hello world!</title>
    <body>
        <%=out.println("Hello world!")%>
    </body>
</html>

点击右上角Run，开始运行

Question & Solution

运行之后会大概率出现以下问题，不要问我怎么知道的…

端口超界，不能为-1

原因：Tomcat安装的默认Shutdown端口为-1，需要修改一下

解决：打开Tomcat安装目录下的server.xml，类似如下路径
1
D:\Program Files\Apache Software Foundation\Tomcat 9.0\conf\server.xml
修改shutdown port为任一未被占用的端口(1024 - 65535)，如图中”6311”位置
端口8080已被占用

原因：Tomcat运行中并占用了8080端口

解决：打开刚才的Edit Configuration，修改Tomcat Server Settings中的HTTP port为任一未被占用的端口(1024 - 65535)，如图中”8088”，同时别忘修改上面的URL的端口
output输出乱码

原因：Tomcat根据你的操作系统默认语言使用了GBK编码

解决：打开Tomcat安装目录下的logging.properties，类似如下路径
1
D:\Program Files\Apache Software Foundation\Tomcat 9.0\conf\logging.properties
修改大约第51行的

java.util.logging.ConsoleHandler.encoding = UTF-8

为

java.util.logging.ConsoleHandler.encoding = GBK
打开网页404

原因：URL写错了，定位不到文件

解决：Edit Configuration中检查一下URL是否与端口设置一致，是否正确定位了文件路径
输出一堆红色字

正常现象，开发者选色鬼才
网页调试的方法

运行之后修改了代码，怎么才能重新看到修改后的网页呢？

无需终止Tomcat重新运行，只需在左下这个位置点击Deploy，然后刷新网页就可以啦

如果没有问题此时应该可以正确运行啦，开始在IDE中愉快的写JSP吧（雾

基本语法

因为了解不深，详细的就不多说了。

除了特别的这几个，其他的都和HTML与Java语法规则差不多。

脚本

1
2
3

<%
    //在这里编写你的Java代码
%>

任何文本、HTML标签、JSP元素必须写在脚本程序的外面

声明

1
2
3

<%!
    //Java
%>

用于声明变量、方法，要写函数只能在这里面

必须先声明才可以使用

表达式

1	<%= //Java %>

表达式里面的代码可以不写分号

注释

1
2
3

<%-- 该部分注释在网页中不会被显示 --%> 

<!-- 该部分注释在网页源代码中会被显示 -->

指令

1
2
3

<%@ page 页面属性 %>
<%@ include 包含文件 %>
<%@ taglib 标签 %>

模板

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
    <title>网页标题</title>
</head>
<body>

<%!
    //定义变量
%>

<%!
    //定义函数
%>

<%
    //脚本
%>

<!-- 在这里定义其他网页上展示的组件 -->

</body>
</html>

示例：计算N的阶乘

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Calc</title>
</head>
<body>
<div style="text-align: center;"/>
<h1>
  Calculate N!
</h1>
<form action="Calc.jsp"/>
<input type="number" name="num"/><br/><br/>
<input type="submit"/><br/><br/>
<form/>

<%!
    private int n = -1;
%>
<%!
    public int fac(int n) {
        if (n < 0) {
            return n;
        } else if (n == 0) {
            return 1;
        } else {
            int product = 1;
            for (int i = 1; i <= n; i++) {
                product *= i;
                if (product < 0) {
                    break;
                }
            }
            return product;
        }
    }
%>
<%
    try {
        int n = fac(Integer.parseInt(request.getParameter("num")));
        if (n < 0) {
            out.print("<h2>invalid</h2>");
        } else {
            out.print("<h2>"+n+"</h2>");
        }
    } catch (Exception e) {
        //ignore java.lang.NumberFormatException: null
    }
%>

</body>
</html>

示例：数据库查询系统

依赖包：mysql-connector-java-5.1.*.jar
可能需要将jar包拷贝到项目路径下的WEB-INF/lib中（不存在就新建）

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.sql.*" %>
<%@ page import="java.io.*" %>
<html>
<head>
    <title>Database Query System</title>
</head>
<body>
<div style="text-align: center;">
    <h1>Database Query System</h1>
    <h2>powered by bipy</h2><br/>
    <form method="post">
        <textarea name="SQL_statement" rows=10 cols=100></textarea><br/>
        <input type="submit" name="Submit"/>
        <input type="reset" name="Clear"/>
    </form>
</div>
<br/>
</body>
<%!
    private Statement statement;
    private String sql_input;
    private Connection connection;
    private boolean status = false;
%>
<%!
    //判断SQL语句类型，并返回结果（影响个数/报错/结果集）
    public Object process(String sql) {
        try {
            if (sql.toLowerCase().matches("^(update|create|use|drop|delete|insert).*$")) {
                return statement.executeUpdate(sql);
            } else if (sql.toLowerCase().matches("^(show|select).*$")) {
                return statement.executeQuery(sql);
            } else {
                return "Not Supported";
            }
        } catch (SQLException e) {
            e.printStackTrace();
            return "SQL syntax error";
        }
    }
%>
<%
    try {
        //避免重新建立连接而丢弃前面步骤
        if (!status) {
            Class.forName("com.mysql.jdbc.Driver");
            connection = DriverManager.getConnection("jdbc:mysql://localhost", "root", "123");
            statement = connection.createStatement();
            status = true;
        }
    } catch (Exception e) {
        e.printStackTrace();
    }
%>
<div style="text-align: center">
    <%
        //结果输出
        sql_input = request.getParameter("SQL_statement");
        if (sql_input != null) {
            Object rt = process(sql_input);
            if (rt instanceof String) {
                out.print("<h2>" + rt.toString() + "</h2>");
            } else if (rt instanceof Integer) {
                out.print("<h2>" + "Query OK. " + rt + " effected." + "</h2>");
            } else {
                ResultSet rs = (ResultSet) rt;
                ResultSetMetaData rsmd = rs.getMetaData();
                out.println("<table align=\"center\" border=\"1\">");
                out.println("<tr>");
                for (int i = 1; i <= rsmd.getColumnCount(); ++i)
                    out.println("<th>" + rsmd.getColumnName(i) + "</th>");
                out.println("<tr>");
                while (rs.next()) {
                    out.println("<tr>");
                    for (int i = 1; i <= rsmd.getColumnCount(); ++i)
                        out.println("<td>" + rs.getString(i) + "</td>");
                    out.println("</tr>");
                }
                out.println("</table>");
            }
        }
    %>
</div>
</html>