个人网站的搭建（三）——留言功能（springboot+mysql）

最新推荐文章于 2023-12-08 16:57:55 发布
最新推荐文章于 2023-12-08 16:57:55 发布
阅读量7.7k 收藏 46
点赞数 6
分类专栏： boke
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42074377/article/details/80739524
版权

    个人网站的页面上有一个留言功能，现在实现一下。

    一、设计数据库

    1.mysql数据库，新建boke库。

        目前只有一张留言的数据表，比较简单。

CREATE TABLE `message` (
  `id` varchar(32) NOT NULL COMMENT '主键',
  `fullName` varchar(128) DEFAULT NULL COMMENT '用户姓名',
  `phoneNumber` varchar(32) DEFAULT NULL COMMENT '电话',
  `emailAddress` varchar(32) DEFAULT NULL COMMENT '邮箱',
  `subject` varchar(256) DEFAULT NULL COMMENT '简要信息',
  `message` varchar(1024) DEFAULT NULL COMMENT '留言信息',
  `user_ip` varchar(128) DEFAULT NULL COMMENT '用户ip',
  `create_user` varchar(32) DEFAULT NULL COMMENT '创建者',
  `create_time` timestamp NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `del_flag` int(1) DEFAULT '0' COMMENT '数据状态',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8

    二、工程配置

    1.引入依赖包

                <!--mybatis -->
		<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
		</dependency>
		<dependency>
			<groupId>org.mybatis</groupId>
			<artifactId>mybatis</artifactId>
			<version>3.4.4</version>
		</dependency>

		<dependency>
			<groupId>org.mybatis.spring.boot</groupId>
			<artifactId>mybatis-spring-boot-starter</artifactId>
			<version>1.1.1</version>
		</dependency>

		<!--druid -->
		<!--DRUID是阿里巴巴开源平台上一个数据库连接池实现，它结合了C3P0、DBCP、PROXOOL等DB池的优点，同时加入了日志监控，-->
		<!--可以很好的监控DB池连接和SQL的执行情况，可以说是针对监控而生的DB连接池(据说是目前最好的连接池,不知道速度有没有BoneCP快)。-->
		<dependency>
			<groupId>com.alibaba</groupId>
			<artifactId>druid</artifactId>
			<version>1.0.28</version>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-devtools</artifactId>
			<scope>runtime</scope>
		</dependency>

    注：这里用到了阿里的数据库连接池。

    2.application-dev.yml文件

    我们为数据库连接专门写一个配置文件，命名为application-dev.yml。如下：

spring:
  datasource:
    type: com.alibaba.druid.pool.DruidDataSource
    driverClassName: com.mysql.jdbc.Driver
    url: jdbc:mysql://localhost:3306/boke?useUnicode=true&characterEncoding=utf8
    username: root
    password: 1234
    initialSize: 1
    minIdle: 3
    maxActive: 20
    # 配置获取连接等待超时的时间
    maxWait: 60000
    # 配置间隔多久才进行一次检测，检测需要关闭的空闲连接，单位是毫秒
    timeBetweenEvictionRunsMillis: 60000
    # 配置一个连接在池中最小生存的时间，单位是毫秒
    minEvictableIdleTimeMillis: 30000
    validationQuery: select 'x'
    testWhileIdle: true
    testOnBorrow: false
    testOnReturn: false
    # 打开PSCache，并且指定每个连接上PSCache的大小
    poolPreparedStatements: true
    maxPoolPreparedStatementPerConnectionSize: 20
    # 配置监控统计拦截的filters，去掉后监控界面sql无法统计，'wall'用于防火墙
    filters: stat,wall,slf4j
    # 通过connectProperties属性来打开mergeSql功能；慢SQL记录
    connectionProperties: druid.stat.mergeSql=true;druid.stat.slowSqlMillis=5000
    3.在application.yml文件中增加数据库配置。 
spring:
  profiles:
    active: dev

    4.使用mabatis+generator插件生成相关代码。具体的操作步骤：

    https://blog.csdn.net/weixin_42074377/article/details/80743529

    5.设计一个RestUtil.java。用于返回信息。如下：

    

public class RestUtil {

    private int status;

    private  String msg;
    private Object data;

    public int getStatus() {
        return status;
    }

    public void setStatus(int status) {
        this.status = status;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public Object getData() {
        return data;
    }

    public void setData(Object data) {
        this.data = data;
    }

    @Override
    public String toString() {
        return "RestUtil{" +
                "status=" + status +
                ", msg='" + msg + '\'' +
                ", data=" + data +
                '}';
    }
}

    5.这里生成的代码还需要完善一下，自己编写MessageControlle、MessageService极其实现类。如下:

@RestController
@RequestMapping("/message")
public class MessageControlle {

  
    @Autowired
    private MessageService messageService;

 

    @PostMapping("/insert")
    public RestUtil insert(HttpServletRequest request, Message message) throws Exception{
        RestUtil restUtil = new RestUtil();
        String IP = IPUtil.getIpAddr(request);
        message.setUserIp(IP);
        if (messageService.insertSelective(message) > 0) {
            restUtil.setMsg("我会尽快回复您的留言");
            restUtil.setStatus(20000);

        } else {
            restUtil.setMsg("未知错误，请联系中边");
            restUtil.setStatus(20001);
            restUtil.setData(message);
        }
        return restUtil;
    }
}
public interface MessageService {

    int insertSelective(Message record);

}

@Service
public class MessageServiceImpl implements MessageService{

    @Autowired
    private MessageMapper messageMapper;

    @Override
    public int insertSelective(Message record) {

        return messageMapper.insertSelective(record);
    }

}

    6.mapper.xml文件增加自增配置

 <insert id="insertSelective" parameterType="com.byk.myboke.boke.entity.Message" >
    <selectKey keyProperty="id" resultType="string" order="BEFORE">
      select replace(uuid(), '-', '') as id from dual
    </selectKey>
    insert into message
    <trim prefix="(" suffix=")" suffixOverrides="," >
      <if test="id != null" >
        id,
      </if>
      <if test="fullname != null" >
        fullName,
      </if>
      <if test="phonenumber != null" >
        phoneNumber,
      </if>
      <if test="emailaddress != null" >
        emailAddress,
      </if>
      <if test="subject != null" >
        subject,
      </if>
      <if test="message != null" >
        message,
      </if>
      <if test="userIp != null" >
        user_ip,
      </if>
      <if test="createUser != null" >
        create_user,
      </if>
      <if test="createTime != null" >
        create_time,
      </if>
      <if test="delFlag != null" >
        del_flag,
      </if>
    </trim>
    <trim prefix="values (" suffix=")" suffixOverrides="," >
      <if test="id != null" >
        #{id,jdbcType=VARCHAR},
      </if>
      <if test="fullname != null" >
        #{fullname,jdbcType=VARCHAR},
      </if>
      <if test="phonenumber != null" >
        #{phonenumber,jdbcType=VARCHAR},
      </if>
      <if test="emailaddress != null" >
        #{emailaddress,jdbcType=VARCHAR},
      </if>
      <if test="subject != null" >
        #{subject,jdbcType=VARCHAR},
      </if>
      <if test="message != null" >
        #{message,jdbcType=VARCHAR},
      </if>
      <if test="userIp != null" >
        #{userIp,jdbcType=VARCHAR},
      </if>
      <if test="createUser != null" >
        #{createUser,jdbcType=VARCHAR},
      </if>
      <if test="createTime != null" >
        #{createTime,jdbcType=TIMESTAMP},
      </if>
      <if test="delFlag != null" >
        #{delFlag,jdbcType=INTEGER},
      </if>
    </trim>
  </insert>

    三、前端界面相关

    1.index.heml文件修改

    因为是留言功能，所以主要修改的是留言区域，我这里增加了一个电话号码的填写。

<fieldset id="contact_form">
          <div id="msgs"> </div>
          <form id="cform" name="cform" method="post" action="">
            <input type="text" id="name" name="fullname" value="姓名*" onFocus="if(this.value == '姓名*') this.value = ''" οnblur="if(this.value == '') this.value = '姓名*'" />
            <input type="text" id="email" name="emailaddress" value="邮箱*" onFocus="if(this.value == '邮箱*') this.value = ''" οnblur="if(this.value == '') this.value = '邮箱*'" />
            <input type="text" id="phonenumber" name="phonenumber" value="手机号码*" onFocus="if(this.value == '手机号码*') this.value = ''" οnblur="if(this.value == '') this.value = '手机号码*'" />
            <input type="text" id="subject" name="subject" value="摘要*" onFocus="if(this.value == '摘要*') this.value = ''" οnblur="if(this.value == '') this.value = '摘要*'" />
            <textarea id="msg" name="message" value="正文（200字以内）*" onFocus="if(this.value == '正文（200字以内）*') this.value = ''" οnblur="if(this.value == '') this.value = '正文（200字以内）*'"  MaxLength="400">正文（200字以内）*</textarea>
            <button id="submit" class="button" > 留言</button>
          </form>
        </fieldset>

    2.setup.js文件

  • 手机号码校验
  • 信息填写错误的提示
  • 留言完成以后刷新页面
    如下： 
function checkPhone(phonenumber) {
    var check = /^[1][2,3,4,5,6,7,8,9][0-9]{9}$/;
    if (!check.test(phonenumber)) {
        return false;
    }
    return true;
}

function sendMessage() {
    // receive the provided data
    var name = $("input#name").val();
    var email = $("input#email").val();
    var subject = $("input#subject").val();
    var msg = $("textarea#msg").val();
    var phonenumber =$("input#phonenumber").val();
    // check if all the fields are filled
    if (name == '' || name == '姓名*' || email == '' || email == '邮箱*'|| phonenumber == ''|| phonenumber == '手机号码*' || subject == '' || subject == '摘要*' || msg == '' || msg == '正文（200字以内）*') {
        $("div#msgs").html('<p class="warning">请完整的填写您的信息</p>');

        return false;
    }

    // verify the email address
    if (!checkEmail(email)) {
        $("div#msgs").html('<p class="warning">请填写正确的邮箱格式</p>');
        return false;
    }

    if (!checkPhone(phonenumber)) {
        $("div#msgs").html('<p class="warning">请填写正确的手机号码</p>');
        return false;
    }

    // make the AJAX request
    var dataString = $('#cform').serialize();
    $.ajax({
        type: "POST",
        url: '/message/insert',
        data: dataString,
        dataType: 'json',
        success: function (restUtil) {
            if (restUtil.status == 20001) {
                var errors = '<ul><li>';
                if (data.message.fullname != '')
                    errors += data.message.fullname + '</li>';
                if (data.message.emailaddress != '')
                    errors += '<li>' + data.message.emailaddress + '</li>';
                if (data.message.phonenumber != '')
                    errors += '<li>' + data.message.phonenumber + '</li>';
                if (data.message.subject != '')
                    errors += '<li>' + data.message.subject + '</li>';
                if (data.message.message != '')
                    errors += '<li>' + data.message.message + '</li>';
                $("div#msgs").html('<p class="error" >无法完成您的请求。请参阅下面的错误!</p>' + errors);
            }
            else if (restUtil.status  == 20000) {
                $("div#msgs").html('<p class="error" >留言已收到，我们会尽快回复您。</p>');
                $('#cform').empty();
                var str = '';
                str += '<input type="text" id="name" name="fullname" value="Full Name*" onFocus="if(this.value == \'Full Name*\') this.value = \'\'" οnblur="if(this.value == \'\') this.value = \'Full Name*\'" />';
                str += '<input type="text" id="email" name="emailaddress" value="Email Address*" onFocus="if(this.value == \'Email Address*\') this.value = \'\'" οnblur="if(this.value == \'\') this.value = \'Email Address*\'" />';
                str += '<input type="text" id="phonenumber" name="phonenumber" value="Phone Number*" onFocus="if(this.value == \'Phone Number*\') this.value = \'\'" οnblur="if(this.value == \'\') this.value = \'Phone Number*\'" />';
                str += '<input type="text" id="subject" name="subject" value="Subject*" onFocus="if(this.value == \'Subject*\') this.value = \'\'" οnblur="if(this.value == \'\') this.value = \'Subject*\'" />';
                str += '<textarea id="msg" name="message" onFocus="if(this.value == \'200字以内\') this.value = \'\'" οnblur="if(this.value == \'\') this.value = \'200字以内\'"  MaxLength="400">200字以内</textarea>';
                str += '<button id="submit" class="button" οnclick="sendup();"> 留言</button>';
                $('#cform').append(str);
            }

        },
        error: function () {
            $("div#msgs").html('<p class="error">未知错误，请联系中边！</p>');
        }
    });

    return false;
}

四、功能测试

    启动项目，浏览器进行访问。

    

    查看数据库，信息已经写入。

    如果页面信息填写不完善，会有相关的提醒。

    

    



稚子候门
关注
  • 6
    点赞
  • 踩
  • 46
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
微信小程序实现留言功能
12-29
需求：留言可以点赞，点过赞之后图标变化，没人只能点赞一次，留言可以在留言 index.wxml <view class='liuyanbox'> <view class='ly-title clear'> <view class='llt-left fl'>邻居评论（{{yanlist.count}}）</view> <view class='llt-right fr' data-id=0 data-user={{list.user_id}} bindtap='liuynChange'>我要留言</view> </view> <view> <view class='
基于springMVC+mybatis+easyui的留言板源码
07-15
模仿QQ留言板的简单例子，简单实用，从前端静态页面到后端实现接口一整套代码的资源，供大家参考，学习交流
Vue+ElementUI实现简易的留言板功能
最新发布
qq_57490170的博客
12-08 911
这里的路径使用你自己下载的路径。
springboot+mybatis+thymeleaf实现简单的留言板
渡目成书
07-26 1750
springboot+mybatis+thymeleaf实现简单的留言板。
MyBatis入门
SongZhengxing_的博客
06-27 608
下载地址：https://github.com/mybatis/mybatis-3打开地址后选择 zip 文件下载 添加mybatis配置文件 新建 mybatis-config.xml ,名称自定义，内容直接复制将该文件放在 resources 文件下中 创建mapper接口 首先数据库中新建 t_user 表创建对应的实体类 创建 UserMapper 接口 创建MyBatis映射文件 相关概念：ORM（Object Relationship Mapping）对象关系映射。 对象：Java的实体类对象
Java+Springboot+Mybatis+Mysql+Bootstrap+Maven实现网上商城系统
06-09
Java+Springboot+Mybatis+Mysql+Bootstrap+Maven实现网上商城系统，需要配置Maven环境，系统经多次测试，运行无误，请大家放心下载。
基于Spring boot + Mybatis-Plus+Thymeleaf+Bootstrap 开发的 JavaWeb 留言板
江小举的博客
04-13 2087
JavaWeb 留言板 项目采用的技术 业务层和业务层是基于Springboot整合的SSM 持久层采用的Mybatis-Plus，连接池采用的是Druid 模板引擎采用的是Thymeleaf。 前端框架采用的是Bootstrap 项目功能 注册：可以通过邮箱发送验证码进行验证注册。 防盗链：未登录状态无法查看留言 留言提醒：留言可以选择消息提醒功能，开启后每当有评论，则会通过邮件的方式提醒。 网易云插件：可以在网...
Java学习指南21 MyBatis框架
08-15
一、课程简介   『Java学习指南系列』的第21篇教程 ，MyBatis 篇，是Java系列的高级课程。本篇介绍 MyBatis 的使用方法，使用 MyBatis 进行数据库开发的相关技术。     MyBatis 是一个基于JDBC的数据库工具框架，使用它可以快速地实现对数据库的访问操作。与之相似的框架还有 af-sql 和 Hibernate。 二、主要内容  本篇主要包含以下内容： * 在项目中加入 MyBatis 支持 * 基于 MyBatis 的查询 * 基于 MyBatis 的插入，自增主键的配置 * 基于 MyBatis 的更新与删除操作 * ResultMap 自定义结果映射 * Dynamic SQL 动态可变的SQL * 注解方式的 Mapper定义 * MyBatis 在Web项目中的应用，全局工厂实例的定义 * 添加Log4j支持，输出MyBatis的日志 三、课程体系 〖Java学习指南系列〗：包含入门与进阶语法，Swing桌面开发，安卓开发，JavaFX开发，网络通信Socket，数据结构与算法等课程。 〖网站开发系列〗：包含网页基础、网站入门、数据库、网站中级、FreeMarker、网站高级、项目应用、MyBatis、Redis等课程。
使用Spring+SpringMVC+Mybatis实现留言板的增删改查
almira1223的博客
02-27 4821
使用Spring+SpringMVC+Mybatis实现留言板的增删改查
springboot+springMVC+mybatis+mysql搭建项目
07-17
本文章通过idea搭建项目，使用springboot+springmvc+mybatis+mysql，并使用mybatis逆向工程生成java实体类和mapper的xml文件，其中有很多地方需要优化调整，后续持续补充，但是基本功能可用，留存方便自己后续参考...
社区系统源码：基于 SpringBoot + MyBatis + MySQL + Redis + Kafka
05-08
数据库：MySQL 5.7 分布式缓存：Redis 本地缓存：Caffeine 消息队列：Kafka 2.13-2.7.0 搜索引擎：Elasticsearch 6.4.3 安全：Spring Security 邮件任务：Spring Mail 分布式定时任务：Spring Quartz 日志：SLF4J...
基于SpringBoot+MySQL+Vue的在线考试系统（源码+论文).zip
05-31
基于SpringBoot+MySQL+Vue的在线考试系统（源码+论文).zip 基于SpringBoot+MySQL+Vue的在线考试系统（源码+论文).zip 基于SpringBoot+MySQL+Vue的在线考试系统（源码+论文).zip 基于SpringBoot+MySQL+Vue的在线...
前后端分离开发，基于springboot+mysql+mybatis+原生安卓开发的工资管理系统
06-20
前后端分离开发，基于springboot+mysql+mybatis+原生安卓开发的工资管理系统，可以直接部署使用，有后端和安卓端，后端采用springboot框架，mybatis框架，redis缓存机制，Rest接口开发风格等技术，前端采用原生安卓...
百度AI开放平台文字之身份证识别的实现
稚子候门
07-20 3992
一、准备工作 一、获取百度的开发权鉴 百度AI开放平台地址：https://console.bce.baidu.com/?_=1532076508921&amp;fromai=1#/aip/overview 和其他平台接口的使用一样，首先要获取相关的key值。登录百度账号之后进入控制台，依次点击：  创建应用。保存相关的Key。 二、准备一张身份证照片 我的是在网上找的，保存在...
高德API的使用 | java 获取天气预报信息
稚子候门
07-16 3779
    本来是在网上看一下地图和天气，结果沉迷于高德地图无法自拔，想着自己也做一个简单的地图。后来发现高德还有天气预报的接口，于是加了一个天气预报模块。    高德API的使用    说实话这个怎么使用，高德自己的文档比我说的清楚，我再说也是狗尾续貂。简单来说就是申请key，在&lt;script&gt;标签中写清楚自己的key，然后在另外一个&lt;script&gt;标签中写js函数，直接复制...
个人网站的搭建（四）——利用SpringBoot发送邮件
稚子候门
06-20 1292
开放stmp配置引入依赖包工具类实用工具类
个人网站的搭建（二）——java获取访客ip
稚子候门
06-19 1120
获取访客ip当前在线人数历史访问人数
IDEA搭建springboot+jsp +MySQL
05-23
以下是在 IDEA 中搭建 springboot+jsp+MySQL 的步骤： 1.创建一个新的 Spring Boot 项目。 2.在 pom.xml 文件中添加 JSP 支持和 MySQL 驱动依赖： ```xml <dependency> <groupId>org.apache.tomcat.embed</groupId> <artifactId>tomcat-embed-jasper</artifactId> <scope>provided</scope> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> </dependency> ``` 3.在 application.properties 文件中配置 MySQL 数据库连接信息： ```properties spring.datasource.url=jdbc:mysql://localhost:3306/dbname?useUnicode=true&characterEncoding=utf-8&useSSL=false spring.datasource.username=root spring.datasource.password=password spring.datasource.driver-class-name=com.mysql.jdbc.Driver ``` 4.创建一个 JSP 页面。在 resources/templates 目录下创建 index.jsp 文件： ```jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <title>Spring Boot with JSP</title> </head> <body> <h1>Hello, World!</h1> </body> </html> ``` 5.创建一个 Controller 类，并在其中添加处理请求的方法： ```java @Controller public class HomeController { @RequestMapping("/") public String index() { return "index"; } } ``` 6.运行项目并访问 http://localhost:8080/，应该会看到 Hello, World! 的字样。 这样就完成了在 IDEA 中搭建 springboot+jsp+MySQL 的步骤。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值