JavaWeb開(kāi)發(fā)實(shí)現(xiàn)備忘錄
更新時(shí)間：2022年06月22日 10:24:41 作者：陸鳴笙
這篇文章主要為大家詳細(xì)介紹了JavaWeb開(kāi)發(fā)實(shí)現(xiàn)備忘錄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JavaWeb開(kāi)發(fā)實(shí)現(xiàn)備忘錄的具體代碼，供大家參考，具體內(nèi)容如下
所用技術(shù)
HTML，CSS，JavaScript，Servlet，Tomcat 8.5.60，Mysql 5.7
數(shù)據(jù)庫(kù)表
開(kāi)發(fā)工具
IDEA，MySQL Workbench
功能
1、添加未完成事項(xiàng)
2、完成事項(xiàng)
項(xiàng)目演示截圖
前端設(shè)計(jì)
<!DOCTYPE html> <html lang="en" > <head> ? <meta charset="UTF-8"> ? <title>To-Do-List設(shè)計(jì)</title> ? <link rel="stylesheet" href="./style.css" > </head> <body> <section class="container"> ? <div class="heading"> ? ? <img class="heading_img" src="girl.svg"> ? ? <h1 class="heading_title">To-Do List</h1> ? </div> ? <form class="form"> ? ? <div> ? ? ? <label class="form_label" for="todo">~ Today I want to do ~</label> ? ? ? <input class="form_input" ? ? ? ? ? ?type="text"? ? ? ? ? ? ?id="todo"? ? ? ? ? ? ?name="to-do" ? ? ? ? ? ?size="30" ? ? ? ? ? ?required> ? ? ? <button class="button" type="type"><span>Submit</span></button> ? ? </div> ? </form> ? <div> ? ? <ul class="toDoList"></ul> ? </div> </section> <!-- partial --> ? <script src="./script.js"></script> </body> </html>
body {
? ? background-color: #f7d3c1;
? ? min-height: 70vh;
? ? padding: 1rem;
? ? box-sizing: border-box;
? ? display: flex;
? ? justify-content: center;
? ? align-items: center;
? ? color: #494a4b;
? ? font-family: "Gochi Hand", cursive;
? ? text-align: center;
? ? font-size: 130%;
}
@media only screen and (min-width: 500px) {
? ? body {
? ? ? ? min-height: 100vh;
? ? }
}
.container {
? ? width: 100%;
? ? height: auto;
? ? min-height: 500px;
? ? max-width: 500px;
? ? min-width: 250px;
? ? background: #f1f5f8;
? ? background-image: radial-gradient(#bfc0c1 7.2%, transparent 0);
? ? background-size: 25px 25px;
? ? border-radius: 20px;
? ? box-shadow: 4px 3px 7px 2px #000000;
? ? padding: 1rem;
? ? box-sizing: border-box;
}
.heading {
? ? display: flex;
? ? align-items: center;
? ? justify-content: center;
? ? margin-bottom: 1rem;
}
.heading_title {
? ? transform: rotate(2deg);
? ? padding: 0.2rem 1.2rem;
? ? border-radius: 20% 5% 20% 5%/5% 20% 25% 20%;
? ? background-color: lightpink;
? ? font-size: 1.5rem;
}
@media only screen and (min-width: 500px) {
? ? .heading_title {
? ? ? ? font-size: 2rem;
? ? }
}
.heading_img {
? ? width: 24%;
}
.form_label {
? ? display: block;
? ? margin-bottom: 0.5rem;
}
.form_input {
? ? box-sizing: border-box;
? ? background-color: transparent;
? ? padding: 0.7rem;
? ? border-bottom-right-radius: 15px 3px;
? ? border-bottom-left-radius: 3px 15px;
? ? border: solid 3px transparent;
? ? border-bottom: dashed 3px #95a9ea;
? ? font-family: "Gochi Hand", cursive;
? ? font-size: 1rem;
? ? color: rgba(63, 62, 65, 0.7);
? ? width: 70%;
? ? margin-bottom: 20px;
}
.form_input:focus {
? ? outline: none;
? ? border: solid 3px #95a9ea;
}
@media only screen and (min-width: 500px) {
? ? .form_input {
? ? ? ? width: 60%;
? ? }
}
.button {
? ? padding: 0;
? ? border: none;
? ? transform: rotate(4deg);
? ? transform-origin: center;
? ? font-family: "Gochi Hand", cursive;
? ? text-decoration: none;
? ? padding-bottom: 3px;
? ? border-radius: 5px;
? ? box-shadow: 0 2px 0 #494a4b;
? ? transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
? ? background-image: url("data:image/gif;base64,R0lGODlhBAAEAIABAAAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjEgNjQuMTQwOTQ5LCAyMDEwLzEyLzA3LTEwOjU3OjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo5NUY1OENCRDdDMDYxMUUyOTEzMEE1MEM5QzM0NDVBMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo5NUY1OENCRTdDMDYxMUUyOTEzMEE1MEM5QzM0NDVBMyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk1RjU4Q0JCN0MwNjExRTI5MTMwQTUwQzlDMzQ0NUEzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjk1RjU4Q0JDN0MwNjExRTI5MTMwQTUwQzlDMzQ0NUEzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAQAAAQAsAAAAAAQABAAAAgYEEpdoeQUAOw==");
? ? background-color: rgba(0, 119, 255, 0.7);
}
.button span {
? ? background: #f1f5f8;
? ? display: block;
? ? padding: 0.5rem 1rem;
? ? border-radius: 5px;
? ? border: 2px solid #494a4b;
}
.button:active, .button:focus {
? ? transform: translateY(4px);
? ? padding-bottom: 0px;
? ? outline: 0;
}
.toDoList {
? ? text-align: left;
}
.toDoList li {
? ? position: relative;
? ? padding: 0.5rem;
}
.finish{
? ? text-decoration: line-through wavy #fb8524b6;
}
.toDoList li:hover {
? ? text-decoration: line-through wavy #fb8524b6;
}var htmlRoot = document.querySelector("html");
var ulTodoList = document.querySelector("ul.toDoList");
var input = document.querySelector("input#todo");
function finishTodoItem() {
? ? //this 就是觸發(fā)事件的元素（就是用戶點(diǎn)擊的元素）
? ? var id = this.dataset.id;
? ? var url = "/finish?id=" + id;
? ? var xhr = new XMLHttpRequest();
? ? var self = this;
? ? xhr.open("get",url);
? ? xhr.send();
? ? xhr.onload = function () {
? ? ? ? self.classList.add("finish");
? ? ? ? self.onclick = null;
? ? }
}
function appendTodo(todo) {
? ? var todoLi = document.createElement("li");
? ? todoLi.innerText = todo.todo;
? ? if(todo.state == true){
? ? ? ? todoLi.classList.add("finish");
? ? }else{
? ? ? ? todoLi.onclick = finishTodoItem;
? ? ? ? todoLi.dataset.id = todo.id;
? ? }
? ? ulTodoList.appendChild(todoLi);
}
//為"submit"按鈕綁定save函數(shù)
function save() {
? ? var todoInput = input.value;
? ? var url = "/save?todo=" + encodeURI(todoInput);
? ? var xhr = new XMLHttpRequest();
? ? function success() {
? ? ? ? var todo = {
? ? ? ? ? ? "id":parseInt(xhr.responseText),
? ? ? ? ? ? "todo":todoInput,
? ? ? ? ? ? "state":0,
? ? ? ? };
? ? ? ? appendTodo(todo);
? ? }
? ? xhr.onload = success;
? ? xhr.open("get",url);
? ? xhr.send();
}
var submitBtn = document.querySelector(".button");
submitBtn.onclick = ?save;
//頁(yè)面加載完成之后，請(qǐng)求列表資源
function LoadTodoList() {
? ? var xhr = new XMLHttpRequest();
? ? function success() {
? ? ? ? if (xhr.status != 200){
? ? ? ? ? ? htmlRoot.innerHTML = xhr.responseText;
? ? ? ? ? ? return;
? ? ? ? }
? ? ? ? //1、JS進(jìn)行JSON的反序列化
? ? ? ? var todoList = JSON.parse(xhr.responseText);
? ? ? ? //遍歷每一項(xiàng)，添加到DOM樹(shù)中
? ? ? ? for (var todo of todoList){
? ? ? ? ? ? appendTodo(todo);
? ? ? ? }
? ? }
? ? xhr.onload = success;
? ? xhr.open("get","/list");
? ? xhr.send();
}
LoadTodoList();后端設(shè)計(jì)
@WebServlet("/finish")
public class FinishServlet extends HttpServlet {
? ? @Override
? ? protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
? ? ? ? //1、獲取用戶點(diǎn)擊事項(xiàng)的id
? ? ? ? req.setCharacterEncoding("utf-8");
? ? ? ? String id = req.getParameter("id");
? ? ? ? //進(jìn)行數(shù)據(jù)庫(kù)表的更新
? ? ? ? try (Connection c = DBUtil.connection()) {
? ? ? ? ? ? String sql = "UPDATE item set state = 1 WHERE id=?";
? ? ? ? ? ? try (PreparedStatement s = c.prepareStatement(sql)) {
? ? ? ? ? ? ? ? s.setString(1, id);
? ? ? ? ? ? ? ? s.executeUpdate();
? ? ? ? ? ? }
? ? ? ? } catch (SQLException exc) {
? ? ? ? ? ? throw new ServletException(exc);
? ? ? ? }
? ? }
}@WebServlet("/list")
public class ListServlet extends HttpServlet {
? ? @Override
? ? protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
? ? ? ? //1、從數(shù)據(jù)庫(kù)中查出List<待辦事項(xiàng)>todolist
? ? ? ? List<TodoItem> todolist = new ArrayList<>();
? ? ? ? try (Connection c = DBUtil.connection()){
? ? ? ? ? ? String sql = "SELECT id,todo,state FROM item ORDER BY id";
? ? ? ? ? ? try(PreparedStatement s = c.prepareStatement(sql)){
? ? ? ? ? ? ? ? try (ResultSet rs = s.executeQuery()){
? ? ? ? ? ? ? ? ? ? while(rs.next()){
? ? ? ? ? ? ? ? ? ? ? ? TodoItem todo = new TodoItem();
? ? ? ? ? ? ? ? ? ? ? ? todo.id = rs.getInt("id");
? ? ? ? ? ? ? ? ? ? ? ? todo.todo = rs.getString("todo");
? ? ? ? ? ? ? ? ? ? ? ? todo.state = rs.getBoolean("state");
? ? ? ? ? ? ? ? ? ? ? ? todolist.add(todo);
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? } catch (SQLException exc) {
? ? ? ? ? ? throw new ServletException(exc);
? ? ? ? }
? ? ? ? //2、把todolist序列化成JSON格式的字符串
? ? ? ? ObjectMapper objectMapper = new ObjectMapper();
? ? ? ? String s = objectMapper.writeValueAsString(todolist);
? ? ? ? //3、進(jìn)行響應(yīng)輸出
? ? ? ? resp.setCharacterEncoding("utf-8");
? ? ? ? resp.setContentType("application/json");
? ? ? ? resp.getWriter().println(s);
? ? }
}@WebServlet("/save")
public class SaveServlet extends HttpServlet {
? ? @Override
? ? protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
? ? ? ? //1、讀取用戶填寫(xiě)的內(nèi)容
? ? ? ? req.setCharacterEncoding("utf-8");
? ? ? ? String todo = req.getParameter("todo");
? ? ? ? //2、執(zhí)行SQL,把內(nèi)容寫(xiě)入表中
? ? ? ? int id;
? ? ? ? try (Connection c = DBUtil.connection()){
? ? ? ? ? ? String sql = "INSERT INTO item(todo)VALUES(?)";
? ? ? ? ? ? try (PreparedStatement s = c.prepareStatement(sql,Statement.RETURN_GENERATED_KEYS)){
? ? ? ? ? ? ? ? s.setString(1,todo);
? ? ? ? ? ? ? ? s.executeUpdate();
? ? ? ? ? ? ? ? try(ResultSet rs = s.getGeneratedKeys()){
? ? ? ? ? ? ? ? ? ? rs.next();
? ? ? ? ? ? ? ? ? ? id = rs.getInt(1);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? } catch (SQLException exc) {
? ? ? ? ? ? throw new ServletException(exc);
? ? ? ? }
? ? ? ? //3、手動(dòng)寫(xiě)一個(gè)JSON成功
? ? ? ? resp.setCharacterEncoding("utf-8");
? ? ? ? resp.setContentType("application/json");
? ? ? ? resp.getWriter().println(id);
? ? }
}public class TodoItem {
? ? public Integer id;
? ? public String todo;
? ? public boolean state;
}以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
Springboot項(xiàng)目保存本地系統(tǒng)日志文件的實(shí)現(xiàn)方法
這篇文章主要介紹了Springboot項(xiàng)目保存本地系統(tǒng)日志文件的實(shí)現(xiàn)方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04
SpringBoot整合Redis時(shí)遇到連接問(wèn)題的解決方法
在使用Spring Boot整合Redis的過(guò)程中,經(jīng)常會(huì)遇到連接問(wèn)題,尤其是當(dāng)Redis服務(wù)部署在遠(yuǎn)程服務(wù)器上時(shí),所以本文給大家介紹了SpringBoot整合Redis遇到連接問(wèn)題的解決方法,需要的朋友可以參考下2024-11-11
Java基礎(chǔ)之查找文本特定內(nèi)容后進(jìn)行修改
這篇文章主要介紹了Java基礎(chǔ)之查找文本特定內(nèi)容后進(jìn)行修改,文中有非常詳細(xì)的代碼示例,對(duì)正在學(xué)習(xí)java基礎(chǔ)的小伙伴們有非常好的幫助,需要的朋友可以參考下2021-04-04
Springboot項(xiàng)目刪除項(xiàng)目同步target文件問(wèn)題解決方案
這篇文章主要介紹了Springboot項(xiàng)目刪除項(xiàng)目同步target文件問(wèn)題解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-12-12
這篇文章主要給大家介紹了如何通過(guò)一篇文章弄懂Java和Kotlin的泛型難點(diǎn)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
Java簡(jiǎn)單數(shù)據(jù)加密方法DES實(shí)現(xiàn)過(guò)程解析
這篇文章主要介紹了Java簡(jiǎn)單數(shù)據(jù)加密方法DES實(shí)現(xiàn)過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
springboot項(xiàng)目整合注冊(cè)功能模塊開(kāi)發(fā)實(shí)戰(zhàn)
這篇文章主要介紹了springboot項(xiàng)目整合注冊(cè)功能模塊開(kāi)發(fā)實(shí)戰(zhàn),在用戶的注冊(cè)是首先需要查詢當(dāng)前的用戶名是否存在，如果存在則不能進(jìn)行注冊(cè)，相當(dāng)于一個(gè)查詢語(yǔ)句，本文通過(guò)實(shí)例代碼詳細(xì)講解，需要的朋友可以參考下2022-11-11
在Maven項(xiàng)目中,依賴傳遞可能導(dǎo)致Jar包版本沖突,常見(jiàn)的解決策略包括依賴排除、版本鎖定和使用maven-shade-plugin插件,本文就來(lái)介紹一下這三種解決方法,感興趣的可以了解一下2024-10-10
這篇文章主要介紹了RabbitMQ消息拒絕如何解決問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
本文主要介紹了SpringBoot返回html界面的使用示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-11-11