Web程序設(shè)計(jì)課件：MVC

MVC2025/5/211本章課程目標(biāo)知識(shí)目標(biāo)掌握MVC基本工作原理與開(kāi)發(fā)過(guò)程；理解JSP、JavaBean、Servlet在MVC模式中的角色和工作；能力要求：能根據(jù)需求編寫(xiě)JSP+JavaBean+Servlet的模塊MVC實(shí)現(xiàn)能根據(jù)需要設(shè)計(jì)MVC各個(gè)模塊間恰當(dāng)?shù)臄?shù)據(jù)傳遞方式2025/5/21《Web程序設(shè)計(jì)》2主要內(nèi)容2025/5/21《Web程序設(shè)計(jì)》31JSP開(kāi)發(fā)模式2MVC模式3JSP+JavaBean+Servlet實(shí)現(xiàn)MVC4綜合實(shí)例JSP作為一種動(dòng)態(tài)網(wǎng)頁(yè)編程技術(shù)，既可以有效地融合HTML、CSS等前端編程技術(shù)，還可以通過(guò)嵌入Java代碼實(shí)現(xiàn)所需的業(yè)務(wù)邏輯。因此，就JSP本身而言，可以獨(dú)立完整地實(shí)現(xiàn)任何實(shí)際業(yè)務(wù)模塊。然而，在進(jìn)行實(shí)際業(yè)務(wù)系統(tǒng)模塊開(kāi)發(fā)時(shí)，JSP本身的缺點(diǎn)也是顯而易見(jiàn)的。2025/5/21《Web程序設(shè)計(jì)》4JSP缺點(diǎn)可讀性差既包含HTML、CSS、Javascript前端技術(shù)代碼，也包含了Java代碼、JSP標(biāo)簽等服務(wù)器端代碼，容易造成頁(yè)面上代碼冗長(zhǎng)，代碼可讀性差?？删S護(hù)性差由于各種代碼混雜在一起，各種前后端語(yǔ)言的注釋方式不一致，造成后期維護(hù)時(shí)，代碼不易理解，代碼之間的關(guān)聯(lián)性大，頁(yè)面上前后代碼間的耦合不易察覺(jué)，容易造成維護(hù)時(shí)帶來(lái)很多新BUG，降低系統(tǒng)可用性和用戶(hù)體驗(yàn)。可重用性差特別是JSP中的Java代碼與JSP標(biāo)簽庫(kù)，在業(yè)務(wù)邏輯近似或相同的情況下，代碼重用只能通過(guò)復(fù)制粘貼等簡(jiǎn)單方式，在維護(hù)時(shí)極為不便?？蓴U(kuò)展性差JSP頁(yè)面的功能具體由Java、HTML、JSP標(biāo)簽等元素共同完成，因此，在系統(tǒng)擴(kuò)展功能時(shí)，需要先找到相應(yīng)位置，可能會(huì)有多個(gè)，再分別插入擴(kuò)展功能的代碼，不僅容易造成遺漏，還可能帶來(lái)潛在的BUG。2025/5/21《Web程序設(shè)計(jì)》5較為典型的是JSP開(kāi)發(fā)模式有兩種，一是Model1模式，使用JSP+JavaBean技術(shù)；另一種是Model2模式，也即MVC模式，使用Jsp+JavaBean+Servlet技術(shù)。Model1模式，使用JSP與JavaBean技術(shù)，將頁(yè)面顯示和業(yè)務(wù)邏輯處理分開(kāi)，用JSP實(shí)現(xiàn)頁(yè)面顯示，JavaBean對(duì)象用來(lái)保存數(shù)據(jù)和實(shí)現(xiàn)業(yè)務(wù)邏輯，在JSP中使用JavaBean來(lái)實(shí)現(xiàn)相應(yīng)業(yè)務(wù)邏輯。2025/5/21《Web程序設(shè)計(jì)》6Model12025/5/21《Web程序設(shè)計(jì)》7Model1模式的特點(diǎn)如下：1）優(yōu)點(diǎn)：架構(gòu)較為簡(jiǎn)單，容易上手，比較適合小型項(xiàng)目開(kāi)發(fā)。2）缺點(diǎn)：JSP的職責(zé)過(guò)多，承擔(dān)工作復(fù)雜，不利于維護(hù)與擴(kuò)展。2025/5/21《Web程序設(shè)計(jì)》8主要內(nèi)容2025/5/21《Web程序設(shè)計(jì)》91JSP開(kāi)發(fā)模式2MVC模式3JSP+JavaBean+Servlet實(shí)現(xiàn)MVC4綜合實(shí)例MVC是一種經(jīng)典的設(shè)計(jì)模式，把交互系統(tǒng)分解成模型（Model）、視圖（View）、控制器（Controller）三種組件。三種組件分別完成相應(yīng)的職責(zé)，通過(guò)三者之間的交互，實(shí)現(xiàn)業(yè)務(wù)系統(tǒng)。這種模式強(qiáng)制性地使應(yīng)用程序的輸入、處理和輸出分開(kāi)，實(shí)現(xiàn)了系統(tǒng)間組件解耦、模塊代碼復(fù)用、可擴(kuò)展易維護(hù)等特性。2025/5/21《Web程序設(shè)計(jì)》10模型（Model）是軟件所處理問(wèn)題邏輯在獨(dú)立于外在顯示內(nèi)容和形式情況下的內(nèi)在抽象，封裝了問(wèn)題的核心數(shù)據(jù)、邏輯和功能的計(jì)算關(guān)系，它獨(dú)立于具體的界面表達(dá)和I/O操作。視圖（View）是表示模型數(shù)據(jù)及邏輯關(guān)系和狀態(tài)的信息，以特定的形式展示給用戶(hù)。它從模型獲得需要顯示的信息，允許多個(gè)視圖存在，即對(duì)相同的信息可以有多個(gè)不同的顯示形式?？刂破鳎–ontroller）是用來(lái)處理用戶(hù)與軟件的交互操作，主要職責(zé)是控制提供模型中任何變化的傳播，確保用戶(hù)界面及時(shí)展示模型的結(jié)果信息；它接受用戶(hù)的輸入，將輸入反饋給模型，進(jìn)而實(shí)現(xiàn)對(duì)模型的計(jì)算控制，是使模型和視圖協(xié)調(diào)工作的組件。通常一個(gè)視圖對(duì)應(yīng)一個(gè)控制器。2025/5/21《Web程序設(shè)計(jì)》11工作過(guò)程Controller接受用戶(hù)在View上發(fā)送的請(qǐng)求，解析請(qǐng)求的路徑、參數(shù)以及表達(dá)的意圖，找到處理該請(qǐng)求的具體Controller；Controller根據(jù)請(qǐng)求的意圖和參數(shù)，向Model層調(diào)用相關(guān)的業(yè)務(wù)邏輯模塊，并將參數(shù)傳遞給這個(gè)模塊；Model層接受Controller層的調(diào)用，以及傳遞的參數(shù)，訪(fǎng)問(wèn)數(shù)據(jù)庫(kù)或計(jì)算數(shù)據(jù)計(jì)算，返回結(jié)果給Controller層。Controller層接收到Model層返回的相關(guān)數(shù)據(jù)結(jié)果，組裝數(shù)據(jù)和表示形成View.View層根據(jù)Controller返回的數(shù)據(jù)視圖，解析數(shù)據(jù)和內(nèi)容，將這些結(jié)果以特定的格式展現(xiàn)給用戶(hù)。2025/5/21《Web程序設(shè)計(jì)》12MVC模式的優(yōu)點(diǎn)在于：Model、View、Controller每層負(fù)責(zé)各自的事情，符合單一職責(zé)原則，使得代碼更加易于維護(hù)和優(yōu)化。

通過(guò)Controller層，將視圖和業(yè)務(wù)邏輯進(jìn)行了解耦，將數(shù)據(jù)展示和數(shù)據(jù)生成放到了不同的模塊中，易于維護(hù)與擴(kuò)展。需要注意的，在實(shí)際工程中，如果采用MVC模式但沒(méi)有統(tǒng)一的開(kāi)發(fā)框架，可能導(dǎo)致項(xiàng)目的開(kāi)發(fā)周期變長(zhǎng)，建議采用SpringMVC、SSM或類(lèi)似的典型開(kāi)發(fā)框架，提高開(kāi)發(fā)效率、加速項(xiàng)目進(jìn)度。2025/5/21《Web程序設(shè)計(jì)》13主要內(nèi)容2025/5/21《Web程序設(shè)計(jì)》141JSP開(kāi)發(fā)模式2MVC模式3JSP+JavaBean+Servlet實(shí)現(xiàn)MVC4綜合實(shí)例Model2在JSP開(kāi)發(fā)模式中，MVC模式也稱(chēng)為Model2模式，主要由JSP+JavaBean+Servlet實(shí)現(xiàn)。Servlet主要實(shí)現(xiàn)了Controller的職責(zé)，負(fù)責(zé)接受用戶(hù)在瀏覽器上的請(qǐng)求；JavaBean主要實(shí)現(xiàn)了Model的職責(zé)，根據(jù)Controller傳遞的參數(shù)進(jìn)行數(shù)據(jù)操作，與數(shù)據(jù)庫(kù)連接；JSP主要實(shí)現(xiàn)了View的職責(zé)，將Controller返回的數(shù)據(jù)結(jié)果，形成最終展示在瀏覽器上的頁(yè)面。2025/5/21《Web程序設(shè)計(jì)》152025/5/21《Web程序設(shè)計(jì)》16主要內(nèi)容2025/5/21《Web程序設(shè)計(jì)》171JSP開(kāi)發(fā)模式2MVC模式3JSP+JavaBean+Servlet實(shí)現(xiàn)MVC4綜合實(shí)例項(xiàng)目背景及需求假設(shè)MySql數(shù)據(jù)庫(kù)book_db中有一個(gè)圖書(shū)表（t_book），和一個(gè)圖書(shū)類(lèi)型表（t_book_type）,主要存儲(chǔ)網(wǎng)上商城中的圖書(shū)基本信息，主要的字段及類(lèi)型說(shuō)明如下2025/5/21《Web程序設(shè)計(jì)》18業(yè)務(wù)流程2025/5/21《Web程序設(shè)計(jì)》19（1）查詢(xún)展示圖書(shū)（1）功能需求該模塊的主要功能為根據(jù)輸入的字段查詢(xún)圖書(shū)資料信息，將結(jié)果以表格的形式展現(xiàn)在頁(yè)面上。查詢(xún)展示數(shù)據(jù)的操作流程如下：1)點(diǎn)擊“圖書(shū)查詢(xún)”頁(yè)面，進(jìn)入到該頁(yè)面，顯示所有圖書(shū)列表信息；2)輸入某個(gè)查詢(xún)字符，如圖書(shū)名稱(chēng)，圖書(shū)編號(hào)，點(diǎn)擊查詢(xún)；3)從數(shù)據(jù)表中查詢(xún)與該查詢(xún)字段匹配的圖書(shū)記錄，顯示在頁(yè)面上的表格中。2025/5/21《Web程序設(shè)計(jì)》20BookVO2025/5/21《Web程序設(shè)計(jì)》21publicclassBookVO{privateintid;/*自增長(zhǎng)ID*/privateStringbookName=null;/*圖書(shū)名稱(chēng)*/privateStringbarCode=null;/*圖書(shū)條形碼*/privateStringpublish=null;/*圖書(shū)出版社*/privateDatepublishDate=null;/*圖書(shū)出版日期*/privatefloatprice;/*圖書(shū)價(jià)格*/privateintcount;/*圖書(shū)庫(kù)存量*/privateStringcoverPic=null;/*圖書(shū)封面*/privateintbookType;/*圖書(shū)類(lèi)型ID*/privateStringbookTypeName=null;/*圖書(shū)類(lèi)型名稱(chēng)*//*構(gòu)造方法*/publicBookVO(){}.......BookDAO.java2025/5/21《Web程序設(shè)計(jì)》22publicclassBookDAO{/***根據(jù)條件查詢(xún)圖書(shū)信息*@paramparams參數(shù)列表，Map的key為參數(shù)名稱(chēng)（pName|pBarCode|pPublish）*，value為參數(shù)的值*@return返回符合條件的圖書(shū)信息列表*/publicList<BookVO>listBook(Map<String,String>params){Connectionconn=DbUtil.getConnection();Stringsql="select*fromt_bookbleftjoint_book_typetonb.bookType=t.typeIdwhere1=1";PreparedStatementpstmt=null;ResultSetrs=null;List<BookVO>list=newVector<BookVO>();......book_list.jsp2025/5/21《Web程序設(shè)計(jì)》23<%StringpCode=(String)request.getAttribute("pBarCode");StringpName=(String)request.getAttribute("pName");StringpPublish=(String)request.getAttribute("pPublish");%><divid="container"><divid="location">當(dāng)前位置：圖書(shū)模塊》查詢(xún)圖書(shū)信息</div><divid="buttons"><inputtype="button"value="新增圖書(shū)"onclick="location.href='/book/edit?optype=add'"></div><divid="queryArea"><formname="frmMain"action="/book/list"method="post"><span>圖書(shū)名稱(chēng)：<inputtype="text"name="pName"value="<%=pName%>"></span><span>圖書(shū)編號(hào)：<inputtype="text"name="pCode"value="<%=pCode%>"></span><span>出版社：<inputtype="text"name="pPublish"value="<%=pPublish%>"></span><span><inputtype="submit"value="查詢(xún)"><inputtype="reset"value="清空"></span></form></div>BookListServlet.java2025/5/21《Web程序設(shè)計(jì)》24@WebServlet("/book/list")publicclassBookListServletextendsHttpServlet{privatestaticfinallongserialVersionUID=1L;protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{doPost(request,response);}protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{//獲取查詢(xún)參數(shù)StringbookName=StringUtil.ToCN(request.getParameter("pName"));StringbarCode=StringUtil.ToCN(request.getParameter("pBarCode"));Stringpublish=StringUtil.ToCN(request.getParameter("pPublish"));......（2）編輯圖書(shū)編輯圖書(shū)主要分為：添加圖書(shū)，修改圖書(shū)，刪除圖書(shū)。其功能主要是提供一個(gè)共用的圖書(shū)信息編輯頁(yè)面（book_edit.jsp），該頁(yè)上以表單和字段的形式提供用戶(hù)編輯，填寫(xiě)完成后，將此操作提交到BookEditServlet.java，由該控制器向數(shù)據(jù)庫(kù)提交這些圖書(shū)信息。主要功能需求為：點(diǎn)擊添加圖書(shū)按鈕，將用戶(hù)輸入的圖書(shū)信息提交至數(shù)據(jù)庫(kù)t_book表中。點(diǎn)擊修改按鈕，將用戶(hù)修改的圖書(shū)信息提交至數(shù)據(jù)庫(kù)t_book表中。點(diǎn)擊刪除按鈕，將數(shù)據(jù)庫(kù)t_book表中的圖書(shū)信息刪除。2025/5/21《Web程序設(shè)計(jì)》25BookTypeDAO.java2025/5/21《Web程序設(shè)計(jì)》26Stringsql="select*fromt_book_typewhere1=1";PreparedStatementpstmt=null;ResultSetrs=null;List<BookTypeVO>list=newVector<BookTypeVO>();try{//如果parentId為空，則表示查詢(xún)一級(jí)分類(lèi)，否則查詢(xún)二級(jí)分類(lèi)if(StringUtil.isNullOrEmpty(parentId))parentId="0";sql+="andparentId=?";pstmt=conn.prepareStatement(sql);pstmt.setString(1,parentId);rs=pstmt.executeQuery();while(rs.next()){BookTypeVOobj=newBookTypeVO();obj.setTypeId(rs.getInt("typeId"));obj.setTypeName(rs.getString("typeName"));obj.setParentId(rs.getInt("parentId"));list.add(obj);}}BookTypeListServlet.java2025/5/21《Web程序設(shè)計(jì)》27@WebServlet("/booktype/listtype")publicclassBookTypeListServletextendsHttpServlet{protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{Stringpid=request.getParameter("pid");BookTypeDAOdao=newBookTypeDAO();List<BookTypeVO>typeList=dao.listBookType(pid);StringBuilderstr=newStringBuilder("[");for(BookTypeVOt:typeList){if(str.length()>1)str.append(",");str.append("{\"id\":\"").append(t.getTypeId()).append("\",");str.append("\"name\":\"").append(t.getTypeName()).append("\"}");}str.append("]");response.setContentType("text/html;charset=utf-8");PrintWriterout=response.getWriter();out.println(str.toString());......Book_edit.jsp2025/5/21《Web程序設(shè)計(jì)》28<formname="frmMain"action="/book/save"method="post"><tablewidth="600"border="0"><caption><h2>填寫(xiě)圖書(shū)信息</h2></caption><tr><td>圖書(shū)名稱(chēng)：</td><td><inputtype="text"name="book_name“value="<%=book.getBookName()==null?"":book.getBookName()%>"></td></tr><tr><td>圖書(shū)條形碼：</td><td><inputtype="text"name="bar_code“value=“<%=book.g