Java教程

用 IDEA 部署一个 Servlet 用户登录的 JavaWeb 项目到远程 Tomcat 服务器(虚拟机 Ubuntu 环境)

本文主要是介绍用 IDEA 部署一个 Servlet 用户登录的 JavaWeb 项目到远程 Tomcat 服务器(虚拟机 Ubuntu 环境)，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

这是一篇记录模拟远程部署用户登录项目的笔记。这是一个测试项目，目的是熟悉相关部署流程，并没有使用真实的服务器做项目部署，而是以虚拟机 Ubuntu 系统作为服务端。在本地（主机）的 IDEA 上远程部署项目到远程（虚拟机Ubuntu） 的 Tomcat 服务器上。环境配置为：

  • 本地环境：Windows 10、Tomcat 8.5.34、Java 11.0.13、IDEA 2020.2.3
  • 服务器环境： Ubuntu 18.04.6 LTS、Tomcat 8.5.34、Java 11.0.13、MySQL 8.0

注意：须保证本地环境中的 Tomcat 版本和服务器环境中一致，来自 IDEA 官方提醒（When working with a remote server, the same server version must be available locally.）且 Tomcat 须在 5 或以上的版本才能支持远程部署（Deployment Tab-Note that deployment to a remote server is supported only for Tomcat 5 or later versions.）。Java 版本也最好保持一致会少踩很多坑。

1. 配置与启动 Tomcat

远程部署需要修改配置，找到 Tomcat 的安装路径（.../apache-tomcat-8.5.34)，在该路径下的 bin 目录下，找到 catalina.sh 脚本，这就是远程部署需要的 Tomcat 启动脚本（ 不需要远程部署的情况下一般是通过执行 startup.sh 脚本启动 Tomcat）。

image

接下来需要向 catalina.sh 添加配置，IDEA 官方文档中同样给出了说明（Deployment Tab- Also note that to be able to deploy applications to a remote Tomcat server, enable JMX support on the server. To do that, pass the following VM options to the server Java proces），配置如下。

CATALINA_OPTS="-Dcom.sun.management.jmxremote \
-Dcom.sun.management.jmxremote.port=1099 \
-Dcom.sun.management.jmxremote.ssl=false \
-Dcom.sun.management.jmxremote.authenticate=false \
-Djava.rmi.server.hostname=<IPAddress>"
export CATALINA_OPTS

其中 替换为远程服务器的 IP 地址，比如这里我的虚拟机服务器地址为 192.168.137.111。1099 是端口号，配置前需要检查下是否被占用，可以使用netstat命令查看netstat -tunlp | grep 1099，如果被占用则换其他端口号。注意使用\连接换行的字符串，表示它们属于名为 CATALINA_OPTS 的同一段字符串。

我们可以直接将这段代码写到 catalina.sh 脚本文件中，就像下面这样，

image

不过在 catalina.sh 中的说明文本中给出了配置环境变量的建议方式：不要直接放在该脚本中，为了分开自定义配置，应该将你的配置代码放在 CATALINA_BASE/bin 路径下的 setenv.sh 脚本中，其中CATALINA_BASE 变量在默认情况下指的就是 Tomcat 的安装路径，如下图。

image

默认情况下在 bin 目录下没有 setenv.sh 脚本，那么直接创建一个就好，注意添加可执行权限（chmod)，并将上面的配置代码复制到该脚本文件中，使 catalina.sh 脚本保持其默认内容。

image

这样就配置好了，接下来执行 catalina.sh 脚本启动 Tomcat，启动命令为：

./catalina.sh run > /dev/null 2>&1 &

其中> /dev/null 2>&1 &的作用是把标准输出和出错处理都丢弃掉，这样就免得一大堆输出占领你的屏幕。我们可以使用 jps 命令查看当前 Java 进程，检查是否启动成功。

image

此时说明启动成功了，这是就可以到本地（主机）浏览器中输入“http://192.168.137.111:8080”访问 Tomcat 主页，这样就可以看到了那只小公猫了。

image

2. 项目资源准备（数据库、网页、Servlet）

其实不一定要等到项目资源都准备好了才进行远程部署，可以先部署一个简单的静态网页，然后再慢慢添加功能。所以可以先跳到第 3 步做远程部署配置，配置好了再回来准备项目资源。

2.1 数据库（MySQL）

使用 IDEA 远程连接服务端 MySQL，为此需要先创建一个数据库新用户 dabule 用于远程登录，然后在数据库 testdb 中创建一个 users 表存放登录信息（账号和密码），并给予 dabule 操作 users 表的查询权限。

CREATE USER dabule@'%' IDENTIFIED BY 'your password';
GRANT SELECT ON testdb.users TO dabule;

这样就可以远程通过 dabule 用户访问数据库中 users 表中的账户信息数据，在收到前端的登录请求时，比对账号密码确定登录是否有效，并返回前端登录结果（成功或失败）。

我们可以从本地环境的命令行中登录 MySQL 测试远程连接的有效性，如下图，

image

也可以从本地 IDEA 中配置并数据库连接，这样可以很方便地在 IDEA 中测试 SQL 语句，配置过程如下图，

image

image

image

数据库连接失败可以参考文末的链接进行检查。接下来就可以在 IDEA 中测试数据库语句了，点击这里即可，

image

接下里就可以使用 JDBC 建立数据库访问模块，确保 JDBC 驱动版本同样也是 8.x 版本的，否则很可能会出现驱动加载问题。驱动配置文件 db.properties 内容如下：

driverclass=com.mysql.cj.jdbc.Driver
url=jdbc:mysql://192.168.137.111:3306/testdb?serverTimezone=UTC&characterEncoding=utf-8&userSSL=false
username=dabule
password=xxxxxxx

接下来编写 JDBC 与数据库的连接程序，

public class DBUtils {
    // 1. 定义变量
    private static String url;
    private static String username;
    private static String password;
    private Connection connection;
    private PreparedStatement pps;
    private ResultSet resultSet;

    // 2. 加载驱动
    static {
        try {
            InputStream is = DBUtils.class.getClassLoader().getResourceAsStream("db.properties");
            Properties properties = new Properties();
            properties.load(is);
            String driverName = properties.getProperty("driverclass");
            url = properties.getProperty("url");
            username = properties.getProperty("username");
            password = properties.getProperty("password");
            Class.forName(driverName);
        } catch (ClassNotFoundException | IOException e) {
            e.printStackTrace();
        }
    }

    // 3. 获得连接
    protected Connection getConnection() throws SQLException {
        connection = DriverManager.getConnection(url, username, password);
        return connection;
    }

    // 4. 得到预状态通道
    protected void getPreparedStatement(String sql) throws SQLException {
        pps = getConnection().prepareStatement(sql);
    }

    // 5. 确定参数
    protected void setParameters(List list) throws SQLException {
        if (list != null && list.size() != 0) {
            for (int i = 0; i < list.size(); i++) {
                pps.setObject(i + 1, list.get(i));
            }
        }
    }

    // 7. 查询
    protected ResultSet query(String sql, List list) throws SQLException {
        getPreparedStatement(sql);
        setParameters(list);
        resultSet = pps.executeQuery();
        return resultSet;
    }

    // 8. 关闭资源
    protected void closeAll(){
        try {
            Objects.requireNonNull(resultSet).close();
            Objects.requireNonNull(pps).close();
            Objects.requireNonNull(connection).close();
        } catch (SQLException e) {
            // e.printStackTrace();
            System.out.println("Closing failed!");
        } catch (NullPointerException ignored) {
        }
    }
}

在 DBUtils 类的基础上，编写获取用户信息的数据访问对象（DAO）如下，

public class UserInfoDaoImpl extends DBUtils implements UserInfoDao {
    @Override
    public User getUserInfoByName(String name, String password) {
        try {
            String sql = "select * from users where username=? and password=?";
            List<Object> list = Arrays.asList(name, password);
            ResultSet res = query(sql, list);
            if (res.next()) {
                return new User(res.getInt("user_id"), name, res.getString("password"));
            }
            return null;
        } catch (SQLException e) {
            // e.printStackTrace();
            System.out.println("Querying failed!");
        } finally {
            closeAll();
        }
        return null;
    }
    @Override
    public User getUesrInfoByTele(String telephoneNo, String password) {
        ...
    }
	@Override
    public User getUesrInfoByEmail(String emailAddress, String password) {
       	...
    }
}

public interface UserInfoDao {
    User getUserInfoByName(String name, String password);
    User getUesrInfoByTele(String telephoneNo, String password);
    User getUesrInfoByEmail(String emailAddress, String password);
}

UserInfoDaoImpl 中的三个方法实现方式基本相同，差别只在查询语句和返回的 User 对象包含的信息。User 类是一个简单的 Java 对象（POJO），即只包含属性及其 getter/setter 方法的类。

关于数据库连接方面的其他可能出现的问题以及在 Ubuntu 上 MySQL 的卸载与安装（8.x）可以参考文末的链接。

2.2 前端网页

编写一个简单的登录页面，像这样，

image

当用户填写账号（名称/电话/邮箱）和密码，点击登录后，后端会返回简单的登录结果，像这样，

image

或者像这样，

image

登录页 index.jsp 如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>用户登录</title>
        <script src="./js/jquery-1.11.1.js"></script>
        <script type="text/JavaScript" src="./js/bootstrap.js"></script>
        <script src="./js/loginValidation.js"></script>
        <link rel="stylesheet" href="./css/bootstrap.css" />
        <link rel="stylesheet" href="./css/login.css" />
    </head>

    <body>
        <div class="container login" style="width: 500px; margin: 24px auto">
        <div class="form-group">
        	<h2 class="title">用户登录</h2>
        </div>
        <form id="regForm" class="form-horizontal" role="form" action="login_request"
            method="post" autocomplete="on">
            <div class="form-group">
                <div class="col-sm-2 col-xs-2" style="padding: 0 0 0 30px">
                    <select id="ac_type" class="form-control input-element"
                    style="padding: 6px 0" name="account_type">
                    <option value="0">名称</option>
                    <option value="1">电话</option>
                    <option value="2">邮箱</option>
                    </select>
                </div>
                <div class="col-sm-9 col-xs-6">
                    <input id="ac" class="form-control input-element" type="text"
                    name="account" placeholder="名称" />
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 col-xs-2 control-label" for="ps">密码</label>
                <div class="col-sm-9 col-xs-6">
                	<input id="ps" class="form-control input-element" type="password"
                name="password" placeholder="密码" />
                </div>
            </div>
            <div class="form-group item-align">
                <button type="submit" class="btn btn-info" value="登录">登录</button>
                <button name="clear" class="btn btn-warning" value="清除">清除</button>
            </div>
        </form>
        </div>
    </body>
</html>

自定义样式文件 ./css/login.css 代码如下：

a {
    text-decoration: none;
    color: grey;
    font-size: 16px;
}

.login {
    padding: 0 0;
    background-color: rgb(235, 235, 235);
    border-radius: 5px;
}

.title {
    height: 60px;
    line-height: 60px;
    margin: 0 auto;
    padding: 0;
    color: #2c2c2c;
    text-align: center;
    background-color: rgb(127, 214, 255);
    border-radius: 5px 5px 0 0;
}

.select-font {
    font-size: 16px;
}

.input-element {
    background: rgb(235, 235, 235);
}

.item-align {
    text-align: center;
}

button:hover {
    font-size: large;
}

.text-format {
    display: block;
    /* width: 20%; */
    margin: 0 auto;
    font-size: 16px;
    text-align: center;
}

.text-format:hover {
    color: rgb(88, 173, 145);
    font-size: 18px;
}

自定义 JavaScript 文件 ./js/loginValidation.js 代码如下：

function addErrorStyle(ele) {
    ele.css("color", "red");
    ele.parent().parent().addClass("has-error");
}
function rmErrorStyle(ele) {
    ele.parent().parent().removeClass("has-error");
    ele.css("color", "#666666");
}

const acInvalid = "不能为空！";
let isAcWrong = false; // 账号信息为空时，认为信息错误
function inputAccount() {
    const account = $(this);
    if (isAcWrong) {
        isAcWrong = false;
        account.val("");
        account.attr("placeholder", $("#ac_type option[value="+acTypeVal+"]").text());
        rmErrorStyle(account);
    }
}
function isValidAccount() {
    const account = $("#ac");
    if (account.val() === "") {
        isAcWrong = true;
        account.attr("placeholder", $("#ac_type option[value="+acTypeVal+"]").text()+acInvalid);
        addErrorStyle(account);
        return false;
    }
    return !isAcWrong;
}

let acTypeVal = 0;
function changeAcType() {
    const acType = $("#ac_type");
    acTypeVal = acType.val();
    const option = acType.find("option[value=" + acTypeVal + "]");
    $("#ac").attr("placeholder", option.text());
}

const psInvalid = "密码不能为空！";
let isPsWrong = false; // 密码为空时，认为出现错误
function inputPassword() {
    const password = $(this);
    if (isPsWrong) {
        isPsWrong = false;
        password.val("");
        password.attr("placeholder", "密码");
        rmErrorStyle(password);
    }
}
function isValidPassword() {
    const password = $("#ps");
    if (password.val() === "") {
        isPsWrong = true;
        password.attr("placeholder", psInvalid);
        addErrorStyle(password);
        return false;
    }
    return !isPsWrong;
}

const regForTelCode = /^1[0-9]{10}$/;
const regForEmail = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
function isTeleCode(str) {
    return regForTelCode.test(str)
}
function isEmailAdress(str) {
    return regForEmail.test(str);
}

$(function() {
    const acType = $("#ac_type");
    const account = $("#ac");
    const password = $("#ps");
    acType.change(changeAcType);
    acType.blur(isValidAccount);
    account.click(inputAccount);
    account.blur(isValidAccount);
    password.click(inputPassword);
    password.blur(isValidPassword);
    $("#regForm").submit(function() {
        if (!isValidAccount() || !isValidPassword()) {
            return false;
        }
        if (isTeleCode(acVal)) {
            $("#ps").val("T-" + password.val());
        } else if (isEmailAdress(acVal)) {
            $("#ps").val("E-" + password.val());
        }
        return true;
    });
    $("button[name='clear']").click(function() {
        acType.get(0).selectedIndex = acTypeVal;
        account.val("");
        password.val("");
        rmErrorStyle(account);
        rmErrorStyle(password);
    });
});

2.3 Servlet 使用

前面准备好了数据库的连接程序和前端网页文件，现在需要将他们放到一个 Java 项目中，并使用 Servlet 将它们关联起来。在 IDEA 中通过创建一个 JavaWeb 项目的方式将它们整合在一起。但较新版本 IDEA 的 New Project 中默认情况下没有创建 Web Application 项目的选项，这是需要将其重新加入到项目类型列表中，方法如下图，到 Help->Find Action 中输入 “Maintenance”（可以看到由相应的快捷键ctrl+alt+shift+/），勾选图中项，就可以创建 Web Application 项目了。

image

image

image

得到的项目相比于普通的 Java 项目多出了一个 web 目录，像这样，

image

接下来将之前的文件加入到项目中，数据库访问类仍然放到 src 目录下，网页文件放入 web 目录下，如下图，

image

其中 control 目录下的 LoginControl 类中实现了 Servlet 的请求处理，即接收前端请求，访问数据库，实现请求处理与返回逻辑，代码如下，

@WebServlet(urlPatterns="/login_request",
            initParams = {@WebInitParam(name="encoding", value="utf-8")}
)
public class LoginControl extends HttpServlet {
    private final UserInfoDao uid;
    private String encoding;

    public LoginControl() {
        uid = new UserInfoDaoImpl();
    }

    @Override
    public void init(ServletConfig config) {
        encoding = config.getInitParameter("encoding");
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        super.doGet(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        req.setCharacterEncoding(encoding);
        User user;
        String account = req.getParameter("account");
        String password = req.getParameter("password");
        int accountType = Integer.parseInt(req.getParameter("account_type"));
        if (accountType == 1) {
            // 客户端输入的是电话号码
            user = uid.getUesrInfoByTele(account, password);
        } else if(accountType == 2) {
            // 客户端输入的是邮箱
            user = uid.getUesrInfoByEmail(account, password);
        } else  {
            // accountType == 0,客户端输入的是用户名
            user = uid.getUserInfoByName(account, password);
        }
        if (user == null) {
            resp.sendRedirect("./failure.html");
        } else {
            resp.sendRedirect("./success.html");
        }
    }
}

这里采取了 @WebServlet 注解的方式配置 Servlet，还有一种方式是使用 web.xml 文件进行配置，它在 web/WEB_INF 目录下，

image

上面的注解配置等价于在 web.xml 中进行如下 6~17 行的配置，

<?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">
    <servlet>
        <servlet-name>name1</servlet-name>
        <servlet-class>xxx.LoginControl</servlet-class>
        <context-param>
            <param-name>encoding</param-name>
            <param-value>utf-8</param-value>
    	</context-param>
    </servlet>
    <servlet-mapping>
        <servlet-name>name1</servlet-name>
        <url-pattern>/login_request</url-pattern>
    </servlet-mapping>
</web-app>

两者可以同时存在，当在 头中添加metadata-complete="true"属性值时，web.xml 就会不支持同时使用注释配置，该参数不些的情况些默认为 “false”。

注意到上图中 Servlet 和 JDBC 的依赖包被添加到了 WEB_INF 目录下，这样做可以避开一个在 Servlet 中使用 JDBC 出现找不到 Driver 的异常，详情参考这里。当然移动依赖包后记得在项目配置一下依赖路径，像这样：

image

image

3. IDEA 远程部署 Tomcat 项目

项目文件准备好了，接下来就剩下部署了。进入 IDEA 的 Run/Debug Configuration 配置 Tomcat 远程服务器，进入后选择添加远程 Tomcat，如下图：

catalina.sh路径 catalina.sh路径

然后开始在 Run/Debug Configuration->Server 中配置具体内容，如下图；

image

其中，点击 Remote staging->Host 后面的配置键，进入远程服务器连接的配置，如下图。选择 SFTP 连接（基于 SSH 协议），正确填入你的远程服务器 IP 地址、用户名以及登录密码，点击 Test Connection 测试连接，弹窗提示成功连接就 OK 了。

image

接下来到 Run/Debug Configuration->Deployment 中配置需要部署的项目包，本地项目文件通过 war 包的发送到远程 Tomcat 服务器中的指定位置，即 Run/Debug Configuration->Server 中配置的 webapps 路径下。

image

在这里我们可以设置项目的访问路径，它会被添加在在“http://192.168.137.111:8080”后面，组成完整的外部访问路径，默认情况为 IDEA 项目的名称，这里我配置为“/login”表示这是一个登录入口。当只有一个项目需要部署时，可以直接简化为“/”或空字符串，这样“http://192.168.137.111:8080”访问到的就是我们的项目主页而不是之前的 Tomcat 默认主页了。

image

最后，来看看部署到远程 Tomcat 服务器上的项目文件结构是什么样的，

image

可以看到原本的项目结构被调整了，前端页面被放到了一级目录下，后端文件被放到了 WEB_INF 目录下。

参考

  1. Run/Debug Configuration: Tomcat Server

    这是官方帮助文档，根据 IDEA 的版本有所区别，可以到自己 IDEA 的 Run/Debug Configuration 界面的点击下方❔(help)到对应版本的帮助页，或者直接把连接中的 2021.2 改成需要的版本号即可。

  2. idea部署项目到远程tomcat

  3. 在 Idea 中配置远程 tomcat 并部署

  4. 远程连接mysql失败了怎么办

  5. The last packet sent successfully to the server was 0 milliseconds ago. The driver has not received

  6. Ubuntu彻底卸载MySQL，彻底！亲测！

  7. Ubuntu安装MySQL8.0

  8. IDEA 中没有 web Application

  9. tomcat上运行servlet使用jdbc java.lang.ClassNotFoundException: com.mysql.jdbc.Driver

这篇关于用 IDEA 部署一个 Servlet 用户登录的 JavaWeb 项目到远程 Tomcat 服务器(虚拟机 Ubuntu 环境)的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航