我的编程空间,编程开发者的网络收藏夹
学习永远不晚

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

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

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

目录

1.配置 Maven 项目

1.1 创建 Maven 项目

1.2 引入相关依赖

1.3 项目总结构

2. 约定前后端交互接口

3.服务端代码

3.1 创建Message类

3.2 创建工具类

3.3 添加信息类(AddMessage)

3.4 查询信息类(MessageList)

4. 前端代码

5.创建数据库

6.部署项目

7.效果展示


 

1.配置 Maven 项目

1.1 创建 Maven 项目

ad0705fbcbe3402dbe2bc4b2f25cc845.png

之后就是选择存放路径和命名,比较简单,就不做过多赘述啦!

 

1.2 引入相关依赖

在 pom.xml 中引入引⼊ servlet , jackson ,mysql-connector 和 lombok 依赖:

  4.0.0  org.example  message_wall  1.0-SNAPSHOT  war  message_wall Maven Webapp    http://www.example.com      UTF-8    1.7    1.7                  org.projectlombok      lombok      1.18.22      provided                      com.fasterxml.jackson.core      jackson-databind      2.13.2.1                  mysql      mysql-connector-java      5.1.49                  javax.servlet      javax.servlet-api      3.1.0      provided              junit      junit      4.11      test            message_wall                            maven-clean-plugin          3.1.0                                  maven-resources-plugin          3.0.2                          maven-compiler-plugin          3.8.0                          maven-surefire-plugin          2.22.1                          maven-war-plugin          3.2.2                          maven-install-plugin          2.5.2                          maven-deploy-plugin          2.8.2                    

 

1.3 项目总结构

91822168bd3d40d6bf9c09a07d84fdc6.png

 

2. 约定前后端交互接口

        所谓 “前后端交互接口” 是进行 Web 开发中的关键环节,具体来说:就是允许页面给服务器发送哪些 HTTP 请求,并且每种请求预期获取什么样的 HTTP 响应。

  1. 从服务器上获取全部信息
    请求:GET
    响应:JSON 格式
  2. 向服务器提交信息
    请求:JSON 格式
    响应:JSON 格式

3.服务端代码

3.1 创建Message类

@Setter@Getterpublic class Message {    private String from;    private String to;    private String message;    public Message(String from, String to, String message) {        this.from = from;        this.to = to;        this.message = message;    }}

 

注意: @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 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. 前端代码

                表白墙            

表白墙

   给他/她留下一句话吧!

谁:
对谁:
说:

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,需要先下载一个插件:

3e092578ec494cde96c5e5e405e95f09.png

(2)然后点击 Add Configuration

18435bd7f23c4fef9680505e98517819.png

 (3)选择Tomcat

9137b6acaf514f2c9643112e40ce35e0.png

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

5bba343fcfed467ca640dc0c13748bca.png

 (5)启动Tomcat

b168023b588c4d82a58ac13e73360f21.png

 这样就说明启动成功啦!

(6)在浏览器输入项目对应URL

6633017cae8d4102b44716a1ba154fdd.png

 成功访问!

 

7.效果展示

初始界面:

ed5f0f7f5c2147389a0fec8ec3881b73.png

查询数据库:

 deaf1f7e23d14934881981cbf64baab6.png

数据库为空! 

输入信息并点击表白:

3c1426bf9d8041768ea7cddcf776da82.png

 提示表白成功!并从服务器获取信息展示在下方:

380e622116b644078f21b597a549cbbb.png

 查询数据库中信息:

e056e69a952047adbb9f17c080f8ca8f.png

 

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

 

结束啦!祝大家度过一个快乐的520 !

 

来源地址:https://blog.csdn.net/m0_59140023/article/details/124871328

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

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

下载Word文档到电脑,方便收藏和打印~

下载Word文档

编程热搜

目录