目錄
初始前端代碼
網(wǎng)頁初始效果?
一、確定接口
?二、編寫代碼
2.1 創(chuàng)建項目七步走
1、創(chuàng)建Maven項目?
?2、引入依賴
3、構建目錄
4、編寫代碼
5、打包、部署???編輯
7、驗證代碼?
三、具體的代碼邏輯
3.1 服務器——兩個服務接口
?3.2 前端頁面的代碼
3.2.1 前端存檔代碼
3.2.2? 前端讀檔代碼
初始前端代碼
<!DOCTYPE html>
<html lang="en">
<head>
<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>
</head>
<body>
<!-- 通過內(nèi)部樣式style標簽，引入CSS樣式 -->
<style>
*{
/* 首先先去除瀏覽器樣式 */
/* 將 內(nèi)外邊距設置為0,設置盒子模型為向內(nèi)擠壓 */
margin: 0;
padding: 0;
box-sizing: border-box;
}
.containner{
width: 100%;
}
h3{
/* 文本居中 */
text-align: center;
/* 上下邊距為 20px，左右邊距為0 */
padding: 20px 0;
font-size: 24px;
}
p{
text-align: center;
color: #666;
padding: 10px 0;
}
.row{
width: 400px;
height: 50px;
/* 上下外邊距為零，左右外邊距自適應 */
/* 就是元素水平居中操作 */
margin: 0 auto;
/* 彈性布局 */
display: flex;
/* 水平居中 */
justify-content: center;
/* 垂直居中 */
align-items: center;
}
.row span{
width: 60px;
font-size: 17px;
}
.row input{
width: 300px;
height: 40px;
line-height: 40px;
font-size: 20px;
text-indent: 0.5em;
outline: none;
}
.row #submit{
width: 360px;
height: 40px;
font-size: 20px;
line-height: 40px;
margin: 0 auto;
color: white;
background-color: orange;
border: none;
border-radius: 15px;
outline: none;
}
/* 當鼠標點擊按鈕的時候，會改變按鈕顏色 */
.row #submit:active{
background-color: grey;
}
</style>
<div class="container">
<h3>表白墻</h3>
<p>輸入后點擊提交，會將信息顯示在表格中</p>
<br>
<div class="row">
<span>誰: </span>
<input type="text">
</div>
<div class="row">
<span>對誰: </span>
<input type="text">
</div>
<div class="row">
<span>說什么: </span>
<input type="text">
</div>
<div class="row">
<button id="submit">提交</button>
</div>
</div>
<script>
let submitBtn = document.querySelector('#submit');
submitBtn.onclick = function(){
// 1、獲取 3個input 文本框中的數(shù)據(jù)
let inputs = document.querySelectorAll('input');
let from = inputs[0].value;
let to = inputs[1].value;
let say = inputs[2].value;
if(from == ''|| to == '' || say == ''){
// 用戶填寫的數(shù)據(jù)，并不完整。所以不提交。
return;
}
// 2、生成一個新的 div，內(nèi)容就是 三個 input 文本框的內(nèi)容拼接
// 再把這個 元素，掛在DOM樹上。
let newDiv = document.createElement('div');
newDiv.innerHTML = from + "對" + to +"說：" + say;
newDiv.className = 'row';
// 將新建節(jié)點，掛在 container 這個節(jié)點下面
let container = document.querySelector('.container');
container.appendChild(newDiv);
}
</script>
</body>
</html>
網(wǎng)頁初始效果?
之前已經(jīng)寫了表白墻頁面.
有非常嚴重的問題:
????????1.如果刷新頁面/關閉頁面重開,之前輸入的消息就不見了!!
????????2.如果一個機器上輸入了數(shù)據(jù),第二個機器上是看不到的(這些數(shù)據(jù)都是在本地瀏覽器中)解決思路:
????????讓服務器來存儲用戶提交的數(shù)據(jù). 由服務器保存當有新的瀏覽器打開頁面的時候,從服務器獲取數(shù)據(jù)。因為當下的信息記錄，只是保存在 頁面 / 內(nèi)存 里，因此 信息記錄是及其容易丟失的。想要做到真正持久化存儲，我們需要將其信息記錄 存入到 服務器 當中。
一、確定接口
首先我們要明白 這個頁面（客戶端） 該如何 與 服務器 進行交互。
進一步來說：約定前后端交互的接口。?
- 請求是啥樣的
- 響應是啥樣的
- 瀏覽器啥時候發(fā)這個請求
- 瀏覽器按照啥樣的格式來解析.....
這個操作過程，其實就是在自定義應用層協(xié)議。
我們既然是搞一個服務器，服務器就得提供一些服務。?
哪些環(huán)節(jié)涉及到前后端交互?
????????1.點擊提交瀏覽器把表白信息發(fā)到服務器這里????????2.頁面加載瀏覽器從服務器獲取到表白信息
?第一個接口服務的觸發(fā)條件：
當用戶點擊 “提交按鈕” 的時候，就會給 發(fā)送一個 HTTP 請求。
讓服務器 把這個信息 存下來。
?
約定好，為了實現(xiàn)這個效果，客戶端發(fā)送一個什么樣的 HTTP 請求，服務器返回一個什么樣的 HTTP 響應。
第二個接口服務的觸發(fā)條件：
當頁面加載的時候，就需要從服務器獲取到曾經(jīng)存儲的的消息內(nèi)容。
?二、編寫代碼
確定好接口之后，就可以編寫代碼了。
現(xiàn)在的我們即需要編寫后端代碼，也需要編寫前端代碼。
在實際工作中，一個項目，前端和后端是“兩個人 / 兩個小組”分別負責的。
此時兩個人就是在并行的開發(fā)，前端的負責前端，后端的負責后端。
兩邊代碼一寫完，放在一起，測試一下，俗稱 “聯(lián)調(diào)” 。
如果 聯(lián)調(diào)的結果，沒有問題，那么這個項目也就完成了。?
為了避免程序雜亂。我們新建一個項目來完成“表白墻”。
還記得那7個步驟嘛？
2.1 創(chuàng)建項目七步走
1、創(chuàng)建Maven項目?
?2、引入依賴
<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.1</version>
</dependency>
</dependencies>
<packaging>war</packaging>
<build>
<finalName>MessageWall</finalName>
</build>3、構建目錄
<!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、編寫代碼
@WebServlet("/message")
public class MessageServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.getWriter().write("dopost");
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.getWriter().write("doget");
}
}
5、打包、部署??
注意：
Smart Tomcat 并不是真的把 項目 打包了?。。?br> 其實是把 webapp 目錄 作為 Tomcat 啟動的一個參數(shù)，給設定進去了。
讓Tomcat 直接從這個指定目錄中加載 webapp。
?
這么說吧：讓Tomcat直接從 webapps 中 加載 war包，不是唯一的出路！
Smart Tomcat 相當于是走了一個捷徑，從而節(jié)省了打包的過程。
?
就比如現(xiàn)在，我使用了 Smart Tomcat 進行 打包 和 部署。
照理來說：此時 MessageWall的 war包，應該處于 Tomcat目錄中的 webapps 路徑底下存在？?
你會發(fā)現(xiàn) MessageWall 的 war 包，壓根就不在這個 目錄底下?。?！?
?
其實 這兩步是可以省略的至于 Context Path，配置 Smart Tomcat 的時候，不是有默認的路徑嗎？
直接用就行了！只要你輸入上下文路徑的時候，別輸入錯誤就行??！
至于 第一行的名字，這個你可以隨便去個名字，它不影響代碼的執(zhí)行！?
7、驗證代碼?
三、具體的代碼邏輯
既然代碼執(zhí)行起來沒有問題，我們實現(xiàn)具體的代碼邏輯
3.1 服務器——兩個服務接口
?
?3.2 前端頁面的代碼
3.2.1 前端存檔代碼
此時，服務器的兩個服務接口，我們就完成了。?
下面，我們就來編寫前端頁面的代碼:
1、把前面寫的前端頁面代碼拷貝過來
??2、再在之前的代碼基礎上，加上ajax的操作。(關鍵操作)
引入jquery：
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
?但是這里網(wǎng)頁一刷新，下面的內(nèi)容還是會消失
這是因為我們只有客戶端發(fā)給服務器的代碼（存檔），沒有服務器寫給客戶端的代碼（讀檔）
3.2.2? 前端讀檔代碼
接下來讓我們實現(xiàn)一下讀檔的代碼~~~
讓瀏覽器ajax發(fā)送一個GET請求
問題：?
當前數(shù)據(jù)是在內(nèi)存(變量) 中保存的，只要重啟服務器數(shù)據(jù)就又沒了
要想持久化保存,就需要寫入文件中(硬盤)????????1.直接使用 流對象 寫入文本文件文章來源：http://www.zghlxwxcb.cn/news/detail-417123.html
????????2.借助數(shù)據(jù)庫.（后面再寫一篇博客~~）文章來源地址http://www.zghlxwxcb.cn/news/detail-417123.html
到了這里，關于實現(xiàn)服務器版本的表白墻的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
