目錄
0.需求
1.創(chuàng)建Maven項(xiàng)目
2.給pom.xml內(nèi)引入三個(gè)依賴
3.完善目錄，并補(bǔ)充web.xml中的內(nèi)容
4.編寫代碼
后端代碼
?編輯前端代碼
5.引入數(shù)據(jù)庫
創(chuàng)建message表
創(chuàng)建工具類?
往MessageServlet類中添加方法
0.需求
前面寫好了表白墻頁面，但存在問題：
1.刷新/重開頁面，之前輸入的數(shù)據(jù)會(huì)消失
2.只能在本機(jī)輸入和看見，其他機(jī)器看不見
解決思路：讓服務(wù)器存儲(chǔ)用戶提交的數(shù)據(jù)，由服務(wù)器保存。有新的瀏覽器打開頁面的時(shí)候，從服務(wù)器獲取數(shù)據(jù)（服務(wù)器存檔和讀檔）
前后端交互：
1.點(diǎn)擊提交，瀏覽器把表白信息發(fā)到服務(wù)器
2.頁面加載，瀏覽器從服務(wù)器獲取到表白信息
存檔和讀檔：
存檔：每次點(diǎn)擊提交按鈕，觸發(fā)一次存檔操作，把用戶輸入的內(nèi)容存儲(chǔ)到服務(wù)器（存一條）
讀檔：每次加載頁面/刷新頁面，觸發(fā)一次讀檔操作，把之前服務(wù)器上存儲(chǔ)的所有記錄展示到當(dāng)前頁面中（讀所有）
1.創(chuàng)建Maven項(xiàng)目
2.給pom.xml內(nèi)引入三個(gè)依賴
<dependencies>
<!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
<scope>provided</scope>
</dependency>
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.14.3</version>
</dependency>
<!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.49</version>
</dependency>
</dependencies>3.完善目錄，并補(bǔ)充web.xml中的內(nèi)容
<!DOCTYPE web-app PUBLIC
"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd" >
<web-app>
<display-name>Archetype Created Web Application</display-name>
</web-app>4.編寫代碼
讀取的數(shù)據(jù)和響應(yīng)的數(shù)據(jù)都是json格式，對(duì)應(yīng)著：
objectMapper.readValue和objectMapper.writeValue方法完成轉(zhuǎn)換
Post方法把message存到List中，Get方法把L響應(yīng)到服務(wù)器中。
objectMapper.readValue把Json格式的message轉(zhuǎn)換成Java對(duì)象，objectMapper.writeValue把List中的Java對(duì)象轉(zhuǎn)換成Json格式的字符串。
這是一個(gè)演示json的轉(zhuǎn)換的代碼
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
class Student{
public int classId;
public int studentId;
}
//對(duì)Json的使用的舉例
public class TestJackson {
public static void main(String[] args) throws JsonProcessingException {
ObjectMapper objectMapper=new ObjectMapper();
//readValue是把Jackson對(duì)象轉(zhuǎn)換成Java對(duì)象
String s="{\"classId\":10,\"studentId\":20}";
//readValue的第一個(gè)參數(shù)可以直接填一個(gè)String，也可以寫InputStream
Student student=objectMapper.readValue(s,Student.class);
System.out.println(student.studentId);
System.out.println(student.classId);
System.out.println();
//writeValue/writeValueAsString是把Java對(duì)象轉(zhuǎn)換成json字符串
Student student1 = new Student();
student1.classId=10;
student1.studentId=20;
String s1=objectMapper.writeValueAsString(student1);
System.out.println(s1);
}
}
后端代碼
在表白墻后端中所對(duì)應(yīng)的代碼：
import com.fasterxml.jackson.databind.ObjectMapper;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
class Message{
public String from;
public String to;
public String message;
}
@WebServlet("/message")
public class MessageServlet extends HttpServlet {
//使用list變量保存所有消息
private List<Message> messageList=new ArrayList<>();
private ObjectMapper objectMapper=new ObjectMapper();
//向服務(wù)器提交數(shù)據(jù)
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//把body里的內(nèi)容解析出來，成為一個(gè)message對(duì)象
Message message=objectMapper.readValue(req.getInputStream(),Message.class);
//保存
messageList.add(message);
//狀態(tài)碼可以省略，默認(rèn)是200
resp.setStatus(200);
}
//從服務(wù)器獲取數(shù)據(jù)
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//告訴瀏覽器，數(shù)據(jù)是json格式，字符集是utf8
resp.setContentType("application/json;charset=utf8");
//把Java對(duì)象轉(zhuǎn)成json字符串和把字符串寫到響應(yīng)對(duì)象中
objectMapper.writeValue(resp.getWriter(),messageList);
}
}用postman進(jìn)行post和get進(jìn)行操作查看上述代碼實(shí)現(xiàn)：
前端代碼
Post是點(diǎn)擊提交按鈕的時(shí)候發(fā)起的，Get是頁面加載的時(shí)候發(fā)起的。
對(duì)之前寫好的前端頁面代碼進(jìn)行補(bǔ)充
1.引入jQuery
2.對(duì)提交按鈕中添加：給服務(wù)器發(fā)起post請(qǐng)求，把上述數(shù)據(jù)提交到服務(wù)器
通過Ajax構(gòu)造：
上述存檔流程：
讀檔
讓瀏覽器ajax發(fā)送get請(qǐng)求
讀檔前后端交互過程
當(dāng)前數(shù)據(jù)是在內(nèi)存中保存的，重啟服務(wù)器就沒有了，要想持久化保存，就要寫入到文件中（硬盤）
1.直接使用流對(duì)象寫入文本文件
2.借助數(shù)據(jù)庫
創(chuàng)建數(shù)據(jù)表
此處只有一個(gè)表 message（from，to,message)
5.引入數(shù)據(jù)庫
創(chuàng)建message表
在MySQL中創(chuàng)建表message(from,to,message)
在創(chuàng)建時(shí)，由于from和to是MySQL中的關(guān)鍵字，需要加上反引號(hào) (`)（鍵盤上Tab鍵上方）
創(chuàng)建工具類?
對(duì)數(shù)據(jù)庫連接和關(guān)閉資源的工具類
import com.mysql.jdbc.jdbc2.optional.MysqlDataSource;
import javax.sql.DataSource;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
//通過這個(gè)類把數(shù)據(jù)庫連接過程封裝
//把這個(gè)類作為一個(gè)工具類，提供static方法供其他代碼調(diào)用
public class DBUtil {
//靜態(tài)成員跟隨類對(duì)象，類對(duì)象在整個(gè)進(jìn)程中只有一份
//靜態(tài)成員也相當(dāng)于唯一的實(shí)例（單例模式，餓漢模式）
private static DataSource dataSource =new MysqlDataSource();
static {
//使用靜態(tài)代碼塊，針對(duì)dataSource進(jìn)行初始化操作
((MysqlDataSource)dataSource).setUrl("jdbc://127.0.0.1:3306/java106?characterEncoding=utf8&useSSL=false");
((MysqlDataSource)dataSource).setUser("root");
((MysqlDataSource)dataSource).setPassword("318318");
}
//通過這個(gè)方法來建立連接
public static Connection getConnection() throws SQLException {
return dataSource.getConnection();
}
//通過這個(gè)方法斷開連接，釋放資源
public static void close(Connection connection, PreparedStatement statement, ResultSet resultSet){
if(resultSet!=null){
try {
resultSet.close();
}catch (SQLException e){
e.printStackTrace();
}
}
if(statement!=null){
try {
statement.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if(connection!=null){
try {
connection.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
}往MessageServlet類中添加方法
save（）：往數(shù)據(jù)庫中存一條消息
load（）：從數(shù)據(jù)庫獲取所有消息文章來源：http://www.zghlxwxcb.cn/news/detail-740343.html
//往數(shù)據(jù)庫中存一條消息
private void save(Message message){
//JDBC操作
Connection connection=null;
PreparedStatement statement= null;
//1.建立連接
try {
//2.構(gòu)造SQL語句
String sql="insert into message values(?,?,?)";
statement.setString(1,message.from);
statement.setString(2,message.to);
statement.setString(3,message.message);
//3.執(zhí)行sql
statement.executeUpdate();
} catch (SQLException e) {
e.printStackTrace();
}finally {
//4.關(guān)閉連接
DBUtil.close(connection,statement,null);
}
}
//從數(shù)據(jù)庫獲取所有消息
private List<Message> load(){
List<Message> messageList=new ArrayList<>();
Connection connection=null;
PreparedStatement statement=null;
ResultSet resultSet=null;
try {
//1.和數(shù)據(jù)庫建立連接
connection=DBUtil.getConnection();
//2.構(gòu)造SQL
String sql="select * from message";
statement= connection.prepareStatement(sql);
//3.執(zhí)行sql
resultSet=statement.executeQuery();
//4.遍歷結(jié)果集合
while(resultSet.next()){
Message message=new Message();
message.from=resultSet.getNString("from");
message.to= resultSet.getNString("to");
message.message=resultSet.getNString("message");
messageList.add(message);
}
return messageList;
}catch (SQLException e){
e.printStackTrace();
}finally {
//5.釋放資源，斷開連接
DBUtil.close(connection,statement,resultSet);
}
return messageList;
}
}此時(shí)在頁面輸入的數(shù)據(jù)將會(huì)保存在數(shù)據(jù)庫中。文章來源地址http://www.zghlxwxcb.cn/news/detail-740343.html
到了這里，關(guān)于表白墻（服務(wù)器）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
