搭建一个网站平台需要多少钱第十八届杭州动漫展

当前位置： 首页 > news >正文

搭建一个网站平台需要多少钱,第十八届杭州动漫展,wordpress form 美化,四川省重庆市文章目录 SpringMVC - 05整合 SSM 下篇一、设计页面1. 首页#xff1a;index.jsp2. 展示书页面#xff1a;showBooks.jsp3. 增加书页面#xff1a;addBook.jsp4. 修改书页面#xff1a;updateBook.jsp5. 总结 二、控制层1. 查询全部书2. 增加书3. 修改书4. 删除书5. 搜索书… 文章目录 SpringMVC - 05整合 SSM 下篇一、设计页面1. 首页index.jsp2. 展示书页面showBooks.jsp3. 增加书页面addBook.jsp4. 修改书页面updateBook.jsp5. 总结 二、控制层1. 查询全部书2. 增加书3. 修改书4. 删除书5. 搜索书 三、总结四、说明注意 SpringMVC - 05 整合 SSM 下篇 在上篇的基础上对界面进行优化并添加新的功能如增加书、修改书、删除书、以及搜索书。 前端页面的设计由前端开源工具库 Bootstrap 完成官网点此进入。 一、设计页面

1. 首页index.jsp 功能提供一个链接进入展示书的页面。 % page contentTypetext/html;charsetUTF-8 languagejava % html headtitle首页/titlestylea {text-decoration: none;color: green;font-size: 18px;}h1 {width: 180px;height: 38px;margin: 100px auto;text-align: center;line-height: 38px;background: lightgoldenrodyellow;border-radius: 5px;}/style /head bodyh1a href\({pageContext.request.contextPath}/wed/select进入书籍页面/a/h1 /body /html效果 2. 展示书页面showBooks.jsp 功能展示所有书并且提供增加书、修改书以及搜索书的链接。 % taglib prefixc urihttp://java.sun.com/jsp/jstl/core % % page contentTypetext/html;charsetUTF-8 languagejava %!doctype html html langzh-CN head!-- 必须的 meta 标签 --meta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1, shrink-to-fitno!-- Bootstrap 的 CSS 文件 --link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/bootstrap4.6.2/dist/css/bootstrap.min.css integritysha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HIN crossoriginanonymoustitle主页面/title /head body div classcontainerdiv classrowdiv classcol-md-12 columnbrdiv classalert alert-success rolealerth3书的清单 -- 显示所有书的信息/h3/divbrnav classnavbar navbar-light bg-lightdiv classcontainer-fluidform classform-inlinea classbtn btn-primary href\){pageContext.request.contextPath}/wed/toAdd增加书/anbsp;nbsp;a classbtn btn-primary href\({pageContext.request.contextPath}/wed/select查看全部书/a/formform action\){pageContext.request.contextPath}/wed/search methodget classform-inline my-2 my-lg-0span stylecolor: red;font-weight: bold\({error}/spannbsp;nbsp;input classform-control mr-sm-2 typesearch placeholder填入要查找的书 namesearchBookName aria-labelSearchbutton classbtn btn-outline-success my-2 my-sm-0 typesubmit查找/button/form/div/navtable classtable table-hover table-stripedtheadtrth书的编号/thth书的名称/thth书的数量/thth详情放置位置/thth操作/th/tr/theadtbodyc:forEach varbook items\){booksList}trtd\({book.bookID}/tdtd\){book.bookName}/tdtd\({book.bookCounts}/tdtd\){book.detail}/tdtda href\({pageContext.request.contextPath}/wed/toUpdate/\){book.bookID}修改/anbsp; | nbsp;a href\({pageContext.request.contextPath}/wed/delete/\){book.bookID}删除/a/td/tr/c:forEach/tbody/table/div/div /divscript srchttps://cdn.jsdelivr.net/npm/jquery3.5.1/dist/jquery.slim.min.js integritysha384-DfXdz2htPH0lsSSs5nCTpuj/zy4COGpamoFVy38MVBnEIbbVYUewOrCXaRkfj crossoriginanonymous/script script srchttps://cdn.jsdelivr.net/npm/bootstrap4.6.2/dist/js/bootstrap.bundle.min.js integritysha384-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiAE0F3zPrJQQtQ82gQ1HPY3QIVtztVua crossoriginanonymous/script/body /html效果 3. 增加书页面addBook.jsp 功能增加书。 % page contentTypetext/html;charsetUTF-8 languagejava %!doctype html html langzh-CN head!– 必须的 meta 标签 –meta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1, shrink-to-fitno!– Bootstrap 的 CSS 文件 –link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/bootstrap4.6.2/dist/css/bootstrap.min.css integritysha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HIN crossoriginanonymoustitle增加书/title /head body div classcontainerdiv classrow clearfixdiv classcol-md-12 columnbrdiv classalert alert-primary rolealerth3增加书/h3/divbrform action\({pageContext.request.contextPath}/wed/add methodgetdiv classform-grouplabel forbookName书的名称/labelinput typetext classform-control namebookName idbookName required/divdiv classform-grouplabel forbookCounts书的数量/labelinput typetext classform-control namebookCounts idbookCounts required/divdiv classform-grouplabel fordetail详情放置位置/labelinput typetext classform-control namedetail iddetail required/divdiv classform-group form-checkinput typecheckbox classform-check-input idcheck requiredlabel classform-check-label forcheck核对信息/label/divinput typesubmit classbtn btn-primary value提交/form/div/div /divscript srchttps://cdn.jsdelivr.net/npm/jquery3.5.1/dist/jquery.slim.min.js integritysha384-DfXdz2htPH0lsSSs5nCTpuj/zy4COGpamoFVy38MVBnEIbbVYUewOrCXaRkfj crossoriginanonymous/script script srchttps://cdn.jsdelivr.net/npm/bootstrap4.6.2/dist/js/bootstrap.bundle.min.js integritysha384-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiAE0F3zPrJQQtQ82gQ1HPY3QIVtztVua crossoriginanonymous/script/body /html效果 4. 修改书页面updateBook.jsp 功能修改书。 % page contentTypetext/html;charsetUTF-8 languagejava %!doctype html html langzh-CN head!-- 必须的 meta 标签 --meta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1, shrink-to-fitno!-- Bootstrap 的 CSS 文件 --link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/bootstrap4.6.2/dist/css/bootstrap.min.css integritysha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HIN crossoriginanonymoustitle修改信息/title /head body div classcontainerdiv classrow clearfixdiv classcol-md-12 columnbrdiv classalert alert-primary rolealerth3修改信息/h3/divbrform action\){pageContext.request.contextPath}/wed/update methodget!– 隐藏域 –input typehidden namebookID value\({Ubook.bookID}div classform-grouplabel forbookName书的名称/labelinput typetext classform-control namebookName value\){Ubook.bookName} idbookName required/divdiv classform-grouplabel forbookCounts书的数量/labelinput typetext classform-control namebookCounts value\({Ubook.bookCounts} idbookCounts required/divdiv classform-grouplabel fordetail详情放置位置/labelinput typetext classform-control namedetail value\){Ubook.detail} iddetail required/divinput typesubmit classbtn btn-primary value修改提交/form/div/div /divscript srchttps://cdn.jsdelivr.net/npm/jquery3.5.1/dist/jquery.slim.min.js integritysha384-DfXdz2htPH0lsSSs5nCTpuj/zy4COGpamoFVy38MVBnEIbbVYUewOrCXaRkfj crossoriginanonymous/script script srchttps://cdn.jsdelivr.net/npm/bootstrap4.6.2/dist/js/bootstrap.bundle.min.js integritysha384-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiAE0F3zPrJQQtQ82gQ1HPY3QIVtztVua crossoriginanonymous/script/body /html效果 5. 总结 超链接a href\({pageContext.request.contextPath}/请求路径xxx内容/a 以按钮的样式实现超链接a classbtn btn-primary href\){pageContext.request.contextPath}/请求路径xxx内容/a 其中 btn-primary 指定按钮的颜色 行内元素span stylecolor: green;font-weight: bold${键}/span 可以指定值显示的样式如颜色、粗细等如果没有取到值则不显示 将表单、表格等都放在容器的栅格中div classcontainer-fluid 在容器中可以进行 Bootstrap 的栅格系统设置学习链接点此进入 设置导航栏 navbar 时可以在导航栏中放置容器 container再在容器中放置表单 form 通过 form classform-inline 可以使得表单下的内容是在一行的如果表单要提交则 form 中一定要有 action 和 method 属性用来指定表单提交的路径以及提交方式并且还要有提交的按钮input typesubmit classbtn btn-primary value提交 或 button typesubmit classbtn btn-outline-success提交/button 隐藏域前端不显示数据但是也会将数据提交给后台 空格nbsp; 换行br 在前端页面取值用 EL 表达式{键} 所需要的组件可以随时去前端开源工具库 Bootstrap 查找。 二、控制层 控制层作用先调用业务层执行业务后跳转页面。 用户进行的每一个操作都有控制类中的一个方法相对应。
2. 查询全部书 // 查询全部的书籍并且返回到页面 RequestMapping(/select) public String select(Model model) {ListBooks booksList booksService.selectAllBooks();model.addAttribute(booksList, booksList);return showBooks; }说明 对象调用业务层 selectAllBooks 方法查询到全部书存放在集合中用 Model 对象封装要传递给前端的数据这样前端页面中就可以通过 EL 表达式 {booksList} 来取到集合对象。
3. 增加书 // 跳转到增加书籍页面 RequestMapping(/toAdd) public String toAdd() {return addBook; }// 添加书籍并且跳转到主页面 RequestMapping(/add) public String add(Books books) {booksService.addBook(books);return redirect:/wed/select; }说明 当用户在页面点击【增加书】时执行第一个请求跳转到增加书的页面用户填写完书的信息后点【提交】执行第二个请求先执行增加业务后重定向到查询全部书的请求增加完书后再查询一次全部书。
4. 修改书 // 跳转到修改信息页面 RequestMapping(/toUpdate/{bookID})public String toUpdate(PathVariable int bookID, Model model) {Books books booksService.selectBook(bookID);model.addAttribute(Ubook, books);return updateBook; }// 修改书籍并且跳转到主页面 RequestMapping(/update) public String update(Books books) {booksService.updateBook(books);return redirect:/wed/select; }说明 当用户在页面点击【修改】时执行第一个请求跳转到修改的页面 这里需要知道要修改哪一本书因此前端要把书的编号信息作为参数传递给后端这里使用 RestFul 风格传参跳转页面时将要修改的书的全部信息封装后传递给要跳转的页面这样在修改书的页面中就可以取到并显示原有的信息。 用户修改完书的信息后点【修改提交】执行第二个请求先执行修改业务后重定向到查询全部书的请求修改完书后再查询一次全部书。
5. 删除书 // 删除书籍 RequestMapping(/delete/{bookID}) public String delete(PathVariable int bookID) {booksService.deleteBook(bookID);return redirect:/wed/select; }说明 当用户在页面点击【删除】时执行该请求先执行删除业务后重定向到查询全部书的请求删除完书后再查询一次全部书这里需要知道要删除哪一本书因此前端要把书的编号信息作为参数传递给后端这里使用 RestFul 风格传参。
6. 搜索书 添加新功能时要从底层开始依次增加dao 接口 – 实现类编写 sql 语句 – 业务接口 – 业务实现类 – 控制类。 dao 接口定义方法 // 搜索 ListBooks searchBooksByName(Param(bookName) String bookName);dao 接口实现类sql 语句使用模糊查询 select idsearchBooksByName parameterTypejava.lang.String resultTypeBooksselect * from ssmbuild.books where bookName like #{bookName} /select业务接口 // 搜索 ListBooks searchBooksByName(String bookName);业务实现类实现业务方法 public ListBooks searchBooksByName(String bookName) {return mapper.searchBooksByName(% bookName %); }控制类 // 搜索书籍 RequestMapping(/search) public String search(RequestParam(searchBookName) String bookName, Model model) {ListBooks booksList booksService.searchBooksByName(bookName);if (booksList.isEmpty()) {model.addAttribute(error, 未查到);}model.addAttribute(booksList, booksList);return showBooks; }说明 当用户在页面搜索框内搜索时执行该请求执行搜索业务后将搜索到的书存放在集合中用 Model 对象封装要传递给前端的数据这样前端页面中就可以通过 EL 表达式 {booksList} 来取到集合对象在没有搜索到数据时用 Model 对象封装 error 数据这样在前端页面中就可以通过 EL 表达式 \({error} 来显示“未查到”。 查到书的实现效果 未查到书的实现效果 三、总结 前端页面给后端传递数据 如果是页面中已经存在的数据可以用 RestFul 风格传参 前端请求地址为/路径/参数的值 后端请求地址为/路径/{方法中的参数名} 并且方法的参数前需要加注解 PathVariable 声明。 如果是需要用户输入后通过表单提交的数据 前端请求地址为/路径 不需要加参数但是输入的数据必须要有 name 属性后端请求地址为/路径 不需要加参数但是方法的参数前需要加注解 RequestParam(“name的值”) 声明如果参数是一个对象则可以直接在方法的参数中定义一个对象即可。 后端给前端页面传递数据用 Model 对象封装要传递给前端的数据这样前端页面中就可以通过 EL 表达式 \){键} 来取到数据。添加新功能时要从底层开始依次增加dao 接口 – 实现类编写 sql 语句 – 业务接口 – 业务实现类 – 控制类。控制类的方法中重定向不用写项目名。重定向不能直接访问 WEB-INF 下的资源但可以通过重定向到请求地址来间接访问如return redirect:/wed/select 。在 SSM 的项目中在服务器开启时如果手动更改了数据库的数据前端显示数据不能同步更新使用 SpringBoot 可以解决。要可以看懂前端的代码。上篇中主要是搭框架中篇是对上篇的优化总结下篇中是进行了具体的开发开发时要逐步完善功能不断进行改进。 四、说明 整合 SSM 上篇点此进入 整合 SSM 中篇点此进入 注意 前端开源工具库 Bootstrap 官网https://v4.bootcss.com/注意使用 Bootstrap 有特定的要求可以通过中文文档进行学习和使用。