大余网站建设,全国工程建设系统网站,软件开发与网站开发,免费的个人主页网站阿华代码#xff0c;不是逆风#xff0c;就是我疯 你们的点赞收藏是我前进最大的动力#xff01;#xff01; 希望本文内容能够帮助到你#xff01;#xff01; 目录
一#xff1a;项目实现准备
1#xff1a;需求
#xff08;1#xff09;登录
2#xff1a;准备… 阿华代码不是逆风就是我疯 你们的点赞收藏是我前进最大的动力 希望本文内容能够帮助到你 目录
一项目实现准备
1需求
1登录
2准备工作
二约定前后端交互接口
1需求分析
1 账号密码校验接⼝
2图书列表
2接口定义
1登录接⼝
2图书列表
3字段说明
三服务器代码实现
1创建图书类BookInfo
2创建UserController
3 创建模拟dao包
四完善前端代码
1添加登录处理逻辑
2删除代码
3完善获取图书方法
五测试 一项目实现准备
1需求
1登录
⽤⼾输⼊账号,密码完成登录功能2 列表展⽰
展⽰图书 2准备工作
放入前端代码注代码顺序如下jscsspicture自行准备 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title添加图书/titlelink relstylesheet hrefcss/bootstrap.min.csslink relstylesheet hrefcss/add.css/headbodydiv classcontainerdiv classform-inlineh2 styletext-align: left; margin-left: 10px;svg xmlnshttp://www.w3.org/2000/svg width40fill#17a2b8 classbi bi-book-half viewBox0 0 16 16pathdM8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z //svgspan添加图书/span/h2/divform idaddBookdiv classform-grouplabel forbookName图书名称:/labelinput typetext classform-control placeholder请输入图书名称 idbookName namebookName/divdiv classform-grouplabel forbookAuthor图书作者/labelinput typetext classform-control placeholder请输入图书作者 idbookAuthor nameauthor //divdiv classform-grouplabel forbookStock图书库存/labelinput typetext classform-control placeholder请输入图书库存 idbookStock namecount//divdiv classform-grouplabel forbookPrice图书定价/labelinput typenumber classform-control placeholder请输入价格 idbookPrice nameprice/divdiv classform-grouplabel forbookPublisher出版社/labelinput typetext idbookPublisher classform-control placeholder请输入图书出版社 namepublish //divdiv classform-grouplabel forbookStatus图书状态/labelselect classcustom-select idbookStatus namestatusoption value1 selected可借阅/optionoption value2不可借阅/option/select/divdiv classform-group styletext-align: rightbutton typebutton classbtn btn-info btn-lg onclickadd()确定/buttonbutton typebutton classbtn btn-secondary btn-lg onclickjavascript:history.back()返回/button/div/form/divscript typetext/javascript srcjs/jquery.min.js/scriptscriptfunction add() {alert(添加成功);location.href book_list.html;}/script
/body/html
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title图书列表展示/titlelink relstylesheet hrefcss/bootstrap.min.csslink relstylesheet hrefcss/list.cssscript typetext/javascript srcjs/jquery.min.js/scriptscript typetext/javascript srcjs/bootstrap.min.js/scriptscript srcjs/jq-paginator.js/script/headbodydiv classbookContainerh2图书列表展示/h2div classnavbar-justify-betweendivbutton classbtn btn-outline-info typebutton onclicklocation.hrefbook_add.html添加图书/buttonbutton classbtn btn-outline-info typebutton onclickbatchDelete()批量删除/button/div/divtabletheadtrtd选择/tdtd classwidth100图书ID/tdtd书名/tdtd作者/tdtd数量/tdtd定价/tdtd出版社/tdtd状态/tdtd classwidth200操作/td/tr/theadtbodytrtdinput typecheckbox nameselectBook value1 idselectBook classbook-select/tdtd1/tdtd大秦帝国第一册/tdtd我是作者/tdtd23/tdtd33.00/tdtd北京出版社/tdtd可借阅/tdtddiv classopa hrefbook_update.html?bookId1修改/aa hrefjavascript:void(0) onclickdeleteBook(1)删除/a/div/td/trtrtdinput typecheckbox nameselectBook value1 idselectBook classbook-select/tdtd2/tdtd大秦帝国第二册/tdtd我是作者/tdtd23/tdtd33.00/tdtd北京出版社/tdtd可借阅/tdtddiv classopa hrefbook_update.html?bookId2修改/aa hrefjavascript:void(0) onclickdeleteBook(2)删除/a/div/td/trtrtdinput typecheckbox nameselectBook value1 idselectBook classbook-select/tdtd3/tdtd大秦帝国第三册/tdtd我是作者/tdtd23/tdtd33.00/tdtd北京出版社/tdtd可借阅/tdtddiv classopa hrefbook_update.html?bookId3修改/aa hrefjavascript:void(0) onclickdeleteBook(3)删除/a/div/td/trtrtdinput typecheckbox nameselectBook value1 idselectBook classbook-select/tdtd4/tdtd大秦帝国第四册/tdtd我是作者/tdtd23/tdtd33.00/tdtd北京出版社/tdtd可借阅/tdtddiv classopa hrefbook_update.html?bookId4修改/aa hrefjavascript:void(0) onclickdeleteBook(4)删除/a/div/td/tr/tbody/tablediv classdemoul idpageContainer classpagination justify-content-center/ul/divscriptgetBookList();function getBookList() {}//翻页信息$(#pageContainer).jqPaginator({totalCounts: 100, //总记录数pageSize: 10, //每页的个数visiblePages: 5, //可视页数currentPage: 1, //当前页码first: li classpage-itema classpage-link首页/a/li,prev: li classpage-itema classpage-link hrefjavascript:void(0);上一页\/a\/li,next: li classpage-itema classpage-link hrefjavascript:void(0);下一页\/a\/li,last: li classpage-itema classpage-link hrefjavascript:void(0);最后一页\/a\/li,page: li classpage-itema classpage-link hrefjavascript:void(0);{{page}}\/a\/li,//页面初始化和页码点击时都会执行onPageChange: function (page, type) {console.log(第page页, 类型:type);}});function deleteBook(id) {var isDelete confirm(确认删除?);if (isDelete) {//删除图书alert(删除成功);}}function batchDelete() {var isDelete confirm(确认批量删除?);if (isDelete) {//获取复选框的idvar ids [];$(input:checkbox[nameselectBook]:checked).each(function () {ids.push($(this).val());});console.log(ids);alert(批量删除成功);}}/script/div
/body/html !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title修改图书/titlelink relstylesheet hrefcss/bootstrap.min.csslink relstylesheet hrefcss/add.css
/headbodydiv classcontainerdiv classform-inlineh2 styletext-align: left; margin-left: 10px;svg xmlnshttp://www.w3.org/2000/svg width40fill#17a2b8 classbi bi-book-half viewBox0 0 16 16pathdM8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z //svgspan修改图书/span/h2/divform idupdateBookinput typehidden classform-control idbookId nameiddiv classform-grouplabel forbookName图书名称:/labelinput typetext classform-control idbookName namebookName/divdiv classform-grouplabel forbookAuthor图书作者/labelinput typetext classform-control idbookAuthor nameauthor//divdiv classform-grouplabel forbookStock图书库存/labelinput typetext classform-control idbookStock namecount//divdiv classform-grouplabel forbookPrice图书定价/labelinput typenumber classform-control idbookPrice nameprice/divdiv classform-grouplabel forbookPublisher出版社/labelinput typetext idbookPublisher classform-control namepublish//divdiv classform-grouplabel forbookStatus图书状态/labelselect classcustom-select idbookStatus namestatusoption value1 selected可借阅/optionoption value2不可借阅/option/select/divdiv classform-group styletext-align: rightbutton typebutton classbtn btn-info btn-lg onclickupdate()确定/buttonbutton typebutton classbtn btn-secondary btn-lg onclickjavascript:history.back()返回/button/div/form/divscript typetext/javascript srcjs/jquery.min.js/scriptscriptfunction update() {alert(更新成功);location.href book_list.html}/script
/body/html
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet hrefcss/bootstrap.min.csslink relstylesheet hrefcss/login.cssscript typetext/javascript srcjs/jquery.min.js/script
/headbodydiv classcontainer-logindiv classcontainer-picimg srcpic/computer.png width350px/divdiv classlogin-dialogh3登陆/h3div classrowspan用户名/spaninput typetext nameuserName iduserName classform-control/divdiv classrowspan密码/spaninput typepassword namepassword idpassword classform-control/divdiv classrowbutton typebutton classbtn btn-info btn-lg onclicklogin()登录/button/div/div/divscript srcjs/jquery.min.js/scriptscriptfunction login() {location.href book_list.html;}/script
/body/html
二约定前后端交互接口
1需求分析
后端需要提供两个接⼝ 1 账号密码校验接⼝
根据输⼊⽤⼾名和密码校验登录是否通过
2图书列表
提供图书列表信息
2接口定义
1登录接⼝ [URL]
POST /user/login
[请求参数]
nameadminpasswordadmin
[响应] true //账号密码验证成功 false//账号密码验证失败
2图书列表
[URL] POST /book/getList [请求参数] ⽆
[响应]——JSON的形式返回 返回图书列表 [ { id: 1, bookName: 活着, author: 余华, count: 270, price: 20, publish: 北京⽂艺出版社, status: 1, statusCN: 可借阅 }, ... ]
3字段说明 三服务器代码实现
1创建图书类BookInfo
Data
public class BookInfo {private Integer ID;private String bookName;private String author;private Integer num;private BigDecimal price;private String publishName;private Integer status;private String statusCN;
}2创建UserController
实现登录验证接⼝
RequestMapping(/user)
RestController
public class UserController {RequestMapping(/login)public String login(String userName , String password , HttpSession session){//1:校验参数if(!StringUtils.hasLength(userName)|| !StringUtils.hasLength(password)){return 用户名或者密码为空;}//2验证账户和密码if(!admin.equals(userName) || !admin.equals(password)){return 账户名错误或密码错误;}//3返回响应结果return 登录成功;}
创建BookController,获取图书列表
RequestMapping(/book)
RestController
public class BookController {Autowiredprivate BookService bookService;//注入依赖RequestMapping(/getBookList)//mock数据模拟造假数据public ListBookInfo getBookList(){//BookService bookService new BookService();ListBookInfo bookInfos bookService.getBookList();return bookInfos;}
}
3 创建模拟dao包
注数据采⽤mock的⽅式,实际数据应该从数据库中获取
此处创建⼀个虚拟的对象或者数据样本⽤来辅助开发或者测试⼯作
在dao包下创建BookDao类
Configuration
public class BookDao {//数据层理论上应该从数据库中获取当前采用mock的方式进行获取public ListBookInfo mockData(){ListBookInfo bookInfos new ArrayList();for(int i 0; i 15; i) {BookInfo bookInfo new BookInfo();bookInfo.setID(i);bookInfo.setBookName(图书i);bookInfo.setAuthor(作者i);bookInfo.setNum(i*21);bookInfo.setPrice(new BigDecimal(i*3));bookInfo.setPublishName(出版社i);if (i%50){bookInfo.setStatus(2);//bookInfo.setStatusCN(不可借阅);状态信息是业务逻辑放到service中进行处理}else{bookInfo.setStatus(1);//bookInfo.setStatusCN(可借阅);}bookInfos.add(bookInfo);}return bookInfos;}
}四完善前端代码
1添加登录处理逻辑
scriptfunction login() {//发起ajax请求$.ajax({url: user/login,type: post,data: {userName: $(#userName).val(),password: $(#password).val(),},success: function(result){//三种返回的http响应都是成功的if(result 登录成功){location.href book_list.html;}else{alert(result);}}});}/script
2删除代码 删除前端伪造的代码从后端获取数据并渲染到⻚⾯上
tabletheadtrtd选择/tdtd classwidth100图书ID/tdtd书名/tdtd作者/tdtd数量/tdtd定价/tdtd出版社/tdtd状态/tdtd classwidth200操作/td/tr/theadtbody/tbody/table
3完善获取图书方法
function getBookList() {$.ajax({url:/book/getBookList,type: get,success:function(books){var finnalHtml ;for(var book of books){//用单引号拼接避免转义finnalHtml tr;finnalHtml tdinput typecheckbox nameselectBook valuebook.id id selectBook classbook-select/td;finnalHtml tdbook.id/td;finnalHtml tdbook.bookName/td;finnalHtml tdbook.author/td;finnalHtml tdbook.num/td;finnalHtml tdbook.price/td;finnalHtml tdbook.publishName/td;finnalHtml tdbook.statusCN/td;finnalHtml td;finnalHtml div classop;finnalHtml a hrefbook_update.html?bookIdbook.id修改/a;finnalHtml a hrefjavascript:void(0) onclickdeleteBook(4)删除/a;finnalHtml /div;finnalHtml /td;finnalHtml /tr;}$(tbody).html(finnalHtml);}});}
五测试
访问:http://127.0.0.1:8080/login.html,输⼊账号密码:adminadmin,登录成功,跳转到图书列表⻚ 界⾯展⽰
