JavaWeb開發(fā)實現(xiàn)備忘錄
更新時間：2022年06月22日 10:24:41 作者：陸鳴笙
這篇文章主要為大家詳細介紹了JavaWeb開發(fā)實現(xiàn)備忘錄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaWeb開發(fā)實現(xiàn)備忘錄的具體代碼，供大家參考，具體內(nèi)容如下
所用技術
HTML，CSS，JavaScript，Servlet，Tomcat 8.5.60，Mysql 5.7
數(shù)據(jù)庫表
開發(fā)工具
IDEA，MySQL Workbench
功能
1、添加未完成事項
2、完成事項
項目演示截圖
前端設計
<!DOCTYPE html> <html lang="en" > <head> ? <meta charset="UTF-8"> ? <title>To-Do-List設計</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ā)事件的元素（就是用戶點擊的元素）
? ? 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;
//頁面加載完成之后，請求列表資源
function LoadTodoList() {
? ? var xhr = new XMLHttpRequest();
? ? function success() {
? ? ? ? if (xhr.status != 200){
? ? ? ? ? ? htmlRoot.innerHTML = xhr.responseText;
? ? ? ? ? ? return;
? ? ? ? }
? ? ? ? //1、JS進行JSON的反序列化
? ? ? ? var todoList = JSON.parse(xhr.responseText);
? ? ? ? //遍歷每一項，添加到DOM樹中
? ? ? ? for (var todo of todoList){
? ? ? ? ? ? appendTodo(todo);
? ? ? ? }
? ? }
? ? xhr.onload = success;
? ? xhr.open("get","/list");
? ? xhr.send();
}
LoadTodoList();后端設計
@WebServlet("/finish")
public class FinishServlet extends HttpServlet {
? ? @Override
? ? protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
? ? ? ? //1、獲取用戶點擊事項的id
? ? ? ? req.setCharacterEncoding("utf-8");
? ? ? ? String id = req.getParameter("id");
? ? ? ? //進行數(shù)據(jù)庫表的更新
? ? ? ? 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ù)庫中查出List<待辦事項>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、進行響應輸出
? ? ? ? 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、讀取用戶填寫的內(nèi)容
? ? ? ? req.setCharacterEncoding("utf-8");
? ? ? ? String todo = req.getParameter("todo");
? ? ? ? //2、執(zhí)行SQL,把內(nèi)容寫入表中
? ? ? ? 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、手動寫一個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;
}以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
springcloud使用profile實現(xiàn)多環(huán)境配置方式
這篇文章主要介紹了springcloud使用profile實現(xiàn)多環(huán)境配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要給大家介紹了關于Spring boot中Jackson操作的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-11-11
這篇文章主要給大家介紹了關于java對接微信小程序(登錄&獲取用戶信息)的相關資料,我們在開發(fā)微信小程序時經(jīng)常需要獲取用戶微信用戶名以及頭像信息,微信提供了專門的接口API用于返回這些信息,需要的朋友可以參考下2023-08-08
詳解Java多線程編程中互斥鎖ReentrantLock類的用法
Java多線程并發(fā)的程序中使用互斥鎖有synchronized和ReentrantLock兩種方式,這里我們來詳解Java多線程編程中互斥鎖ReentrantLock類的用法:2016-07-07
@Accessors用于改變@Data生成的getter和setter方法的生成結(jié)果，下面這篇文章主要給大家介紹了關于Java?@Accessors注解的相關資料,需要的朋友可以參考下2023-02-02
這篇文章主要為大家詳細介紹了java實現(xiàn)FTP文件上傳與文件下載的相關資料，通過以下兩種方式實現(xiàn)，通過JDK自帶的API實現(xiàn)，二是通過Apache提供的API是實現(xiàn)，感興趣的小伙伴們可以參考一下2016-04-04
jackson 實體轉(zhuǎn)json 為NULL或者為空不參加序列化(實例講解)
下面小編就為大家?guī)硪黄猨ackson 實體轉(zhuǎn)json 為NULL或者為空不參加序列化(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
java常用工具類 Random隨機數(shù)、MD5加密工具類
這篇文章主要為大家詳細介紹了Java常用工具類，Random隨機數(shù)工具類、MD5加密工具類，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
這篇文章主要介紹了JAVA中三種常用的循環(huán)語句詳解,包括格式和執(zhí)行流程，本文結(jié)合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-06-06
Java多線程Callable和Future接口區(qū)別
這篇文章主要介紹了Java多線程Callable和Future接口區(qū)別,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-04-04