個人網站的搭建（三）——留言功能（springboot+mysql）
阿新 • • 發佈：2019-01-10
個人網站的頁面上有一個留言功能，現在實現一下。
一、設計資料庫
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。如下：
3.在application.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
spring:
profiles:
active: dev4.使用mabatis+generator外掛生成相關程式碼。具體的操作步驟：
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 = ''" onblur="if(this.value == '') this.value = '姓名*'" />
<input type="text" id="email" name="emailaddress" value="郵箱*" onFocus="if(this.value == '郵箱*') this.value = ''" onblur="if(this.value == '') this.value = '郵箱*'" />
<input type="text" id="phonenumber" name="phonenumber" value="手機號碼*" onFocus="if(this.value == '手機號碼*') this.value = ''" onblur="if(this.value == '') this.value = '手機號碼*'" />
<input type="text" id="subject" name="subject" value="摘要*" onFocus="if(this.value == '摘要*') this.value = ''" onblur="if(this.value == '') this.value = '摘要*'" />
<textarea id="msg" name="message" value="正文（200字以內）*" onFocus="if(this.value == '正文（200字以內）*') this.value = ''" onblur="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 = \'\'" onblur="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 = \'\'" onblur="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 = \'\'" onblur="if(this.value == \'\') this.value = \'Phone Number*\'" />';
str += '<input type="text" id="subject" name="subject" value="Subject*" onFocus="if(this.value == \'Subject*\') this.value = \'\'" onblur="if(this.value == \'\') this.value = \'Subject*\'" />';
str += '<textarea id="msg" name="message" onFocus="if(this.value == \'200字以內\') this.value = \'\'" onblur="if(this.value == \'\') this.value = \'200字以內\'" MaxLength="400">200字以內</textarea>';
str += '<button id="submit" class="button" onclick="sendup();"> 留言</button>';
$('#cform').append(str);
}
},
error: function () {
$("div#msgs").html('<p class="error">未知錯誤，請聯絡中邊！</p>');
}
});
return false;
}四、功能測試
啟動專案，瀏覽器進行訪問。
檢視資料庫，資訊已經寫入。
如果頁面資訊填寫不完善，會有相關的提醒。
