网页源代码下载图片,seo查询徽号{lotlek}出本词效果,自己做的网站网站搜索,网络推广电话销售技巧和话术目录
一、准备工作
二、约定前后端交互接口
1、需求分析
2、接口定义
#xff08;1#xff09;登录接口
#xff08;2#xff09;图书列表接口
三、服务器代码
#xff08;1#xff09;创建一个UserController类#xff0c;实现登录验证接口
#xff…目录
一、准备工作
二、约定前后端交互接口
1、需求分析
2、接口定义
1登录接口
2图书列表接口
三、服务器代码
1创建一个UserController类实现登录验证接口
2创建一个BookController类实现获取图书列表接口
四、调整前端页面代码
1登录页面
2图书列表展示
五、运行测试 需求1、登录用户输入完账号密码完成登录功能2、列表展示图书
登录页面如下 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
图书列表页面如下 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 注意这不是最终版本的后续的学习会继续将这个项目完善下面也不会用到数据库的操作因为是初学后面会继续更新博客完善项目。
一、准备工作 创建新的Spring Boot项目把前端代码复制进项目中。如图 二、约定前后端交互接口
1、需求分析 图书管理系统是一个相对较大的案例我们先实现这两种功能用户登录、图书列表展示也就是上面需求那的两张图。 根据需求得到后端需要两个接口 1、账号密码校验接口根据输入用户名和密码校验登录是否通过。 2、图书列表提供图书列表信息。 2、接口定义
1登录接口 URL/user/login 请求参数userNamepassword 返回结果响应成功 / 失败 String类型成功返回 空字符串失败返回失败原因 2图书列表接口 URL/book/getBookList 请求参数无 返回结果响应图书列表 [{}, {}, {}, .....] 图书列表的字段说明 id图书IDbookName图书名称author作者num数量price定价publish图书出版社status图书状态1-可借阅 2-不可借阅statusCN图书状态中文含义 三、服务器代码 创建一个图书类代码如下
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;//1-可借阅 2-不可借阅private String statusCN;//状态的中文含义
}
1创建一个UserController类实现登录验证接口 代码如下
RestController
RequestMapping(/user)
public class UserController {RequestMapping(/login)public String login(String userName, String password, HttpSession session) {//1、校验参数//2、校验密码是否正确//3、返回响应结果if(!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)) {return 用户名或者密码为空;}if(!admin.equals(userName) || !admin.equals(password)) {return 账号或密码错误;}session.setAttribute(userName, userName);return ;}
}2创建一个BookController类实现获取图书列表接口
RestController
RequestMapping(/book)
public class BookController {ListBookInfo bookInfos new ArrayList();RequestMapping(/getBookList)public ListBookInfo getBookList() {for (int i 1; i 15; i) {BookInfo bookInfo new BookInfo();bookInfo.setId(i);bookInfo.setBookName(图书 i);bookInfo.setAuthor(作者 i);bookInfo.setNum(i * 2 1);bookInfo.setPrice(new BigDecimal(i * 3));bookInfo.setPublishName(出版社 i);if(i % 5 0) {bookInfo.setStatus(2);bookInfo.setStatusCN(不可借阅);} else {bookInfo.setStatus(1);bookInfo.setStatusCN(可借阅);}bookInfos.add(bookInfo);}return bookInfos;}
}
注意这里的数据采用mock的方式实际数据应该从数据库中拿但这里直接放在内存了这里的数据也不是真实的数据。 mock模拟的假的 在开发和测试过程中由于环境不稳定或者协同开发的同事未完成等情况下有些数据不容易构造或者不容易获取就会创建一个虚拟的对象或者数据样本用来辅助开发或者测试工作。这些数据简单的来说也就是假数据。 四、调整前端页面代码 主要逻辑都在JS里的ajax请求中。
1登录页面 代码如下
!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() {var userName $(#userName).val();var password $(#password).val();$.ajax({url: /user/login,type: post,data: {userName: $(#userName).val(),password: $(#password).val()},success: function(result) {if(result ) {location.href book_list.html;} else{alert(result);}}});}/script
/body/html
2图书列表展示 代码如下
!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/theadtbody/tbody/tablediv classdemoul idpageContainer classpagination justify-content-center/ul/divscriptgetBookList();function getBookList() {$.ajax({url: /book/getBookList,type: post,success: function(books) {console.log(拿到参数)var finalHtml ;for(book of books) {finalHtml tr;finalHtml tdinput typecheckbox nameselectBook value1 id book.id classbook-select/tdfinalHtml td book.id /td;finalHtml tdbook.bookName/td;finalHtml td book.author /td;finalHtml td book.num /td;finalHtml td book.price /td;finalHtml td book.publishName /td;finalHtml td book.statusCN /td;finalHtml td;finalHtml div classop;finalHtml a hrefbook_update.html?bookId book.id 修改/a;finalHtml a hrefjavascript:void(0) onclickdeleteBook( book.id )删除/a;finalHtml /div;finalHtml /td;finalHtml /tr;}$(tbody).html(finalHtml);}});}//翻页信息$(#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 五、运行测试 浏览器访问http://127.0.0.1:8080/login.html页面如下 直接点击登录页面如下 输入错误的用户名或者密码页面如下 输入正确的用户名、密码 页面会跳转到 http://127.0.0.1:8080/book_list.html 页面如下 都看到这了点个赞再走吧谢谢谢谢谢
