天天看點

任務卡_06-JavaWEB_MVC

目錄

​​一,MVC 模式下實作 CRUD​​

​​1,任務概述​​

​​2,任務過程​​

​​3,編碼過程​​

​​3.1 資料庫設計​​

​​3.2 項目結構​​

​​3.3 編碼思路​​

​​3.4 運作結果​​

​​ 3.5 注意​​

一,MVC 模式下實作 CRUD

1,任務概述

軟體工程師小亮在編寫企業門戶網站時發現,由于項目體積越來越大,現 有代碼錯綜複雜,不好梳理,雖然功能實作了,但是傳回來看代碼時亂七八糟, 現在迫切需要學習 MVC 和三層架構的思想來解決問題。

2,任務過程

1. 了解 mvc 概念 

2. 建立包結構,并了解每一層的作用 

3. 添加各層代碼 

4. 實作前後端的通路

3,編碼過程

先簡單回顧一下兩個重要概念:MVC,三層架構,CRUD

MVC
  • M(Model) 模型:應⽤程式的核⼼功能,管理這個子產品中⽤的資料和值(bean,dao);
  • V(View )視圖:視圖提供模型的展示,管理模型如何顯示給⽤戶,它是應⽤程式的外觀;(jsp/html)
  • C(Controller)控制器:對⽤戶的輸⼊做出反應,管理⽤戶和視圖的互動,是連接配接模型和視圖的樞紐。(servlet/service)
三層架構
  • 表現層(UI):通俗講就是展現給⽤戶的界⾯,即⽤戶在使⽤⼀個系統的時候他的所⻅所得。jsp/html
  • 業務邏輯層(BLL):針對具體問題的操作,也可以說是對資料層的操作,對資料業務邏輯處理。servlet,service
  • 資料通路層(DAL):該層所做事務直接操作資料庫,針對資料的增添、删除、修改、更新、查找等。dao
CRUD
  • 增加(Create)
  • 讀取查詢(Retrieve)
  • 更新(Update)
  • 删除(Delete)

3.1 資料庫設計

沿用之前的使用者表

任務卡_06-JavaWEB_MVC

3.2 項目結構

任務卡_06-JavaWEB_MVC

3.3 編碼思路

完整項目在這裡​​https://gitee.com/goodbyefirefly/java-course/tree/master/Chapter7/MVCTaskCard​​

使用一個jsp頁面,三個form表單各自占一行分别表示添加Create,更新Update,查詢Retrieve。

一個table元件展示使用者資訊,每行最右側含有删除連結(a标簽),點選即可删除該條資料。

index.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
  </head>
  <body>
    <form action="userServlet?method=create" method="post">
        <div>
            賬戶:<input type="text" name="username">
            密碼:<input type="text" name="password">
            積分:<input type="text" name="score">
            <input type="submit" value="添加">
        </div>
    </form>
    <form action="userServlet?method=update" method="post">
        <div>
            賬戶:<input type="text" name="username">
            新密碼:<input type="text" name="password">
            新積分:<input type="text" name="score">
            <input type="submit" value="更新">
        </div>
    </form>
    <form action="userServlet?method=retrieve" method="post">
        <div>
            賬戶:<input type="text" name="username">
            <input type="submit" value="查詢">
        </div>
    </form>
    <table border="1px" width="300px" >
        <tr>
            <th>賬戶</th>
            <th>密碼</th>
            <th>積分</th>
            <th>操作</th>
        </tr>
        <c:forEach items="${list}" var="u">
            <tr>
                <td>${u.username}</td>
                <td>${u.password}</td>
                <td>${u.score}</td>
                <td>
                    <a href="userServlet?method=delete&username=${u.username}">删除</a>
                </td>
            </tr>
        </c:forEach>
    </table>
  </body>
</html>      

使用一個servlet即可。用method參數差別不同的方法。servlet中識别出這些方法後,調用service中提供的服務。service中的服務是由dao中的一個個基本操作組成。

通過實時更新table中的清單,來展示操作是否成功。

UserServlet.jsp

package com.xrh.servlet;

import com.xrh.bean.User;
import com.xrh.service.UserService;
import com.xrh.service.impl.UserServiceImpl;

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;

@WebServlet("/userServlet")
public class UserServlet extends HttpServlet {
    private UserService userService = new UserServiceImpl();
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("UTF-8");
        String method = req.getParameter("method");
        ArrayList<User> list = new ArrayList<>();
        if(method.equals("create")) {
            String username = req.getParameter("username");
            String password = req.getParameter("password");
            String score = req.getParameter("score");
            userService.create(username, password, score);
            list = userService.getAll();
        } else if (method.equals("retrieve")) {
            String username = req.getParameter("username");
            User user = userService.retrieve(username);
            list.add(user);

        } else if (method.equals("update")) {
            String username = req.getParameter("username");
            String password = req.getParameter("password");
            String score = req.getParameter("score");
            userService.update(username, password, score);
            list = userService.getAll();
        } else if (method.equals("delete")) {
            String username = req.getParameter("username");
            userService.delete(username);
            list = userService.getAll();
        } else if (method.equals("getAll")) {
            list = userService.getAll();
        }
        req.setAttribute("list", list);
        req.getRequestDispatcher("index.jsp").forward(req, resp);
    }
}      

3.4 運作結果

任務卡_06-JavaWEB_MVC
任務卡_06-JavaWEB_MVC
任務卡_06-JavaWEB_MVC

 3.5 注意

form表單的action中,如果想要通過位址傳遞參數的方式,需要設定method為POST,否則action中添加的參數不會被拼接到最後的連結位址中的

任務卡_06-JavaWEB_MVC