520到了，教你做个JavaWeb表白墙小项目

最新推荐文章于 2024-06-14 15:02:13 发布

2401_84103512

最新推荐文章于 2024-06-14 15:02:13 发布

阅读量307

点赞数 4

分类专栏：程序员文章标签： java 学习经验分享

本文链接：https://blog.csdn.net/2401_84103512/article/details/139133249

版权

程序员专栏收录该内容

247 篇文章 0 订阅

订阅专栏

}




> **注意：** @Setter 和 @Getter 会自动生成所有的get和set方法。



3.2 创建工具类

---------



创建 DBUtils 类，用于连接数据库。



DBUtil 类主要实现以下功能:



*   创建 MysqlDataSource 实例,设置 URL , username , password 等属性.

*   提供 getConnection 方法,和MySQL服务器建立连接.

*   提供 close 方法,用来释放必要的资源.

public class DBUtils {

private DBUtils() {

}



private static volatile MysqlDataSource mysqlDataSource;

private static volatile Connection connection;



private static MysqlDataSource getMysqlDataSource() {

    if (mysqlDataSource == null) {

        synchronized (DBUtils.class) {

            if (mysqlDataSource == null) {

                mysqlDataSource = new MysqlDataSource();

                mysqlDataSource.setURL("jdbc:mysql://127.0.0.1:3306/messagewall?character=utf8&useSSL=true");

                mysqlDataSource.setUser("root");

                mysqlDataSource.setPassword("12345678");

            }

        }

    }

    return mysqlDataSource;

}



// 1.get connect

public static Connection getConnection() {

    if (connection == null) { // 首次访问

        synchronized (DBUtils.class) {

            if (connection == null) {

                try {

                    MysqlDataSource dataSource = getMysqlDataSource();

                    connection = dataSource.getConnection();

                } catch (SQLException throwables) {

                    throwables.printStackTrace();

                }

            }

        }

    }

    return connection;

}



// 2.提供关闭资源的方法

public static void close(ResultSet resultSet, PreparedStatement statement) throws SQLException {

    if (resultSet != null) {

        resultSet.close();

    }

    if (statement != null) {

        statement.close();

    }

}

}




创建 StringUtils 类，用于判空：

public class StringUtils {

public static boolean hasLength(String str) {

    return !(str == null || str.length() == 0);

}

}




3.3 添加信息类（AddMessage）

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



        用于向服务器提交信息。

@WebServlet(“/message/add”)

public class AddMessage extends HttpServlet {

@SneakyThrows

@Override

protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

    int result = -1;

    // 1.得到前端参数并效验

    String from = req.getParameter("from");

    String to = req.getParameter("to");

    String msg = req.getParameter("msg");

    if (StringUtils.hasLength(from) && StringUtils.hasLength(to)

            && StringUtils.hasLength(msg)) {

        // 2.将表白对象加入到集合

        // 2.1 得到 Connection

        Connection connection = DBUtils.getConnection();

        // 2.2 拼接 sql，创建执行器

        String sql = "insert into messages(`from`,`to`,`message`) values(?,?,?)";

        PreparedStatement statement = connection.prepareStatement(sql);

        statement.setString(1, from);

        statement.setString(2, to);

        statement.setString(3, msg);

        // 2.3 执行执行器，并返回结果

        result = statement.executeUpdate();

        // 2.4 关闭资源

        DBUtils.close(null, statement);

    }

    resp.setContentType("text/html; charset=utf-8");

    resp.getWriter().println(result);

}

}




3.4 查询信息类（MessageList）

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



        用于获取服务器上所有信息。

@WebServlet(“/message/list”)

public class MessageList extends HttpServlet {

@SneakyThrows

@Override

protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

    // 查询数据库中的表白列表

    List<Message> list = new ArrayList<>();

    // 1.得到 connection

    Connection connection = DBUtils.getConnection();

    // 2.拼接SQL，创建执行器

    String sql = "select * from messages";

    PreparedStatement statement = connection.prepareStatement(sql);

    // 3.执行SQL，返回 resultSet 并循环将数据添加到 list 中

    ResultSet resultSet = statement.executeQuery();

    while (resultSet.next()) {

        String from = resultSet.getString("from");

        String to = resultSet.getString("to");

        String message = resultSet.getString("message");

        list.add(new Message(from, to, message));

    }

    // 4.关闭资源

    DBUtils.close(resultSet, statement);

    resp.setContentType("application/json; charset=utf-8");

    ObjectMapper objectMapper = new ObjectMapper();

    resp.getWriter().println(objectMapper.writeValueAsString(list));

}

}




4\. 前端代码

========

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>表白墙</title>

<style>

    body {

        background-image: url(image/wall.jpeg);

        background-repeat: no-repeat;

        background-size: cover;

    }



    * {

        margin: 0;

        padding: 0;

    }



    .container {

        width: 400px;

        margin: 0 auto;

    }



    h1 {

        text-align: center;

        padding: 20px 0;

        color: rgb(11, 213, 248);

    }



    p {

        color: rgb(226, 87, 129);

        text-align: center;

        font-size: 14px;

        padding: 10px 0;

    }

必看视频！获取2024年最新Java开发全套学习资料备注Java

    .row {

        height: 40px;

        width: 350px;

        display: flex;

        justify-content: center;

        align-items: center;

    }



    .row1 {

        height: 40px;

        display: flex;

        justify-content: center;

        align-items: center;

        padding-left: 20px;

    }



    span {

        width: 70px;

        line-height: 40px;

    }



    .edit {

        color: rgb(41, 227, 134);

        text-align: center;

        width: 261px;

        height: 30px;

        padding-right: 15px;

    }



    .submit {

        width: 280px;

        height: 40px;

        color: white;

        background-color: orange;

        border: none;

    }



    .submit:active {

        background-color: #666;

    }



    .msg {

        width: 100%;

        height: 25px;

        color: rgb(48, 66, 227);

        justify-content: center;

        align-items: center;

        text-align: center;

        padding-top: 10px;

    }

</style>

<script src="js/jquery-1.9.1.min.js"></script>

<div class="container">

    <h1>表白墙</h1>

    <p>&nbsp;&nbsp;&nbsp;给他/她留下一句话吧！</p>

    <div class="row">

        <span style="color: rgb(236, 10, 244)">谁: </span>

        <input id="from" class="edit" type="text">

    </div>

    <div class="row">

        <span style="color: rgb(236, 10, 244)">对谁: </span>

        <input id="to" class="edit" type="text">

    </div>

    <div class="row">

        <span style="color: rgb(236, 10, 244)">说: </span>

        <input id="message" class="edit" type="text">

    </div>

    <div class="row1">

        <input type="button" value="表白" class="submit" onclick="mySubmit()">

    </div>

</div>

<div id="allMsg"></div>



<script>

    // 过滤前端参数

    function replaceStr(a) {

        a = a.replace(/(<br[^>]*>| |\s*)/g, '')

            .replace(/\&/g, "&amp;")

            .replace(/\"/g, "&quot;")

            .replace(/\'/g, "&#39;")

            .replace(/\</g, "&lt;")

            .replace(/\>/g, "&gt;");

        return a;

    }



    // 添加表白信息

    function mySubmit() {

        var from = jQuery("#from");

        var to = jQuery("#to");

        var msg = jQuery("#message");

        // 1.非空效验

        if (jQuery.trim(from.val()) == "" || jQuery.trim(to.val()) == "" || jQuery.trim(msg.val()) == "") {

            alert("请输入表白信息！")

            if (jQuery.trim(from.val()) == "") {

                from.focus();

            }

            if (jQuery.trim(to.val()) == "") {

                to.focus();

            }

            if (jQuery.trim(msg.val()) == "") {

                msg.focus();

            }

            return;

        }

        // 2.ajax 提交数据给后端

        jQuery.ajax({

            url: "message/add",   // 提交到后端的地址

            type: "POST", // 提交类型

            data: {

                from: replaceStr(from.val()),

                to: replaceStr(to.val()),

                msg: replaceStr(msg.val())

            }, // 参数

            success: function (result) { // 后端返回给前端的数据

                if (result != null && result > 0) {

                    alert("表白成功！");

                    from.val('');

                    to.val('');

                    msg.val('');

                    // 刷新表白列表

                    getAllMsg();

                } else {

                    alert("表白失败！");

                }

            }

        });

    }



    // 查询所有的表白信息

    function getAllMsg() {

        jQuery.ajax({

            url: "message/list",

            type: "GET",

            data: {},

            success: function (result) {

                if (result != null && result.length > 0) {

                    // 表示有表白数据

                    var msgHtml = "";

                    for (var i = 0; i < result.length; i++) {

                        msgHtml += '<div class="msg">' +

                            result[i].from + '对' +

                            result[i].to + '说: ' +

                            result[i].message + '</div>';

                    }

                    jQuery("#allMsg").html(msgHtml);

                } else if (result != null && result.length == 0) {

                    // 没有表白数据

                    console.log("没有表白信息");

                } else {

                    alert("访问出错！");

                }

            }

        });

    }

    getAllMsg(); // 执行方法



</script>




5.创建数据库

=======



        创建数据库，并添加 messages 表.

– 设置编码格式

set character_set_database=utf8;

set character_set_server=utf8;

– 创建数据库

create database if not exists messagewall;

– 使用数据库

use messagewall;

– 创建messages表

drop table if exists messages;

create table messages (from varchar(255), to varchar(255), message

varchar(2048));




6.部署项目

======



（1）在IDEA中配置Tomcat，需要先下载一个插件：



![](https://img-blog.csdnimg.cn/3e092578ec494cde96c5e5e405e95f09.png)



（2）然后点击 Add Configuration



![](https://img-blog.csdnimg.cn/18435bd7f23c4fef9680505e98517819.png)



 （3）选择Tomcat



![](https://img-blog.csdnimg.cn/9137b6acaf514f2c9643112e40ce35e0.png)



 （4）如果Tomcat Server没有Tomcat，可以点右边三个点，找到tomcat文件夹然后将tomcat文件夹加进来。添加成功后就是下面这样，也可以改下Name。



![](https://img-blog.csdnimg.cn/5bba343fcfed467ca640dc0c13748bca.png)



 （5）启动Tomcat



![](https://img-blog.csdnimg.cn/b168023b588c4d82a58ac13e73360f21.png)



 **这样就说明启动成功啦！**



（6）在浏览器输入项目对应URL



![](https://img-blog.csdnimg.cn/6633017cae8d4102b44716a1ba154fdd.png)



 **成功访问！**



7.效果展示

======



**初始界面：**



![](https://img-blog.csdnimg.cn/ed5f0f7f5c2147389a0fec8ec3881b73.png)



**查询数据库：**



 ![](https://img-blog.csdnimg.cn/deaf1f7e23d14934881981cbf64baab6.png)



**数据库为空！** 



**输入信息并点击表白：**



![](https://img-blog.csdnimg.cn/3c1426bf9d8041768ea7cddcf776da82.png)



 **提示表白成功！并从服务器获取信息展示在下方：**



![](https://img-blog.csdnimg.cn/380e622116b644078f21b597a549cbbb.png)



 **查询数据库中信息：**



![](https://img-blog.csdnimg.cn/e056e69a952047adbb9f17c080f8ca8f.png)



**可以看到成功将数据写入数据库中！** 





# **结尾**

![查漏补缺：Java岗 千+道面试题Java基础+全家桶+容器+反射+异常等](https://img-blog.csdnimg.cn/img_convert/ffb2a284c2285270ebb4b9fbe657a7be.webp?x-oss-process=image/format,png)

这不止是一份面试清单，更是一种”被期望的责任“，因为有无数个待面试者，希望从这篇文章中，找出通往期望公司的”钥匙“，所以上面每道选题都是结合我自身的经验于千万个面试题中经过艰辛的两周，一个题一个题筛选出来再次对好答案和格式做出来的，面试的答案也是再三斟酌，深怕误人子弟是小，影响他人仕途才是大过，也希望您能把这篇文章分享给更多的朋友，让他帮助更多的人，帮助他人，快乐自己，最后，感谢您的阅读。

**由于细节内容实在太多啦，在这里我花了两周的时间把这些答案整理成一份文档了，在这里只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！**


**初始界面：**



![](https://img-blog.csdnimg.cn/ed5f0f7f5c2147389a0fec8ec3881b73.png)



**查询数据库：**



 ![](https://img-blog.csdnimg.cn/deaf1f7e23d14934881981cbf64baab6.png)



**数据库为空！** 



**输入信息并点击表白：**



![](https://img-blog.csdnimg.cn/3c1426bf9d8041768ea7cddcf776da82.png)



 **提示表白成功！并从服务器获取信息展示在下方：**



![](https://img-blog.csdnimg.cn/380e622116b644078f21b597a549cbbb.png)



 **查询数据库中信息：**



![](https://img-blog.csdnimg.cn/e056e69a952047adbb9f17c080f8ca8f.png)



**可以看到成功将数据写入数据库中！** 





# **结尾**

[外链图片转存中...(img-WxaWsEvN-1716399356490)]

这不止是一份面试清单，更是一种”被期望的责任“，因为有无数个待面试者，希望从这篇文章中，找出通往期望公司的”钥匙“，所以上面每道选题都是结合我自身的经验于千万个面试题中经过艰辛的两周，一个题一个题筛选出来再次对好答案和格式做出来的，面试的答案也是再三斟酌，深怕误人子弟是小，影响他人仕途才是大过，也希望您能把这篇文章分享给更多的朋友，让他帮助更多的人，帮助他人，快乐自己，最后，感谢您的阅读。

**由于细节内容实在太多啦，在这里我花了两周的时间把这些答案整理成一份文档了，在这里只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！**