示例:
1.JQ方式
示例: 通过父传子获取
JS代码
/*JQ入口函数*/
$(function () {
/*初始页码*/
let currentPage = 1;
/*页面显示条数*/
let pageSize = 5;
/*分页条件查询*/
searchByPage();
function searchByPage() {
$.post("/book/searchByPage?currentPage=" + currentPage + "&pageSize=" + pageSize,
$("#searchForm").serialize(), function (response) {
let str = '';
for (let responseKey of response.data) {
str += `<tr bookId=${responseKey.bookId}>
<td>${responseKey.bookId}</td>
<td>${responseKey.bookName}</td>
<td>${responseKey.authorName}</td>
<td>${responseKey.firstTypeName}</td>
<td>${responseKey.secondTypeName}</td>
<td><img src=${responseKey.imgUrl} width="35px" height="35px"/></td>
<td>
<button class="btn btn-sm btn-info editBtn" data-toggle="modal"
data-target="#modal-default">
编辑
</button>
<button class="btn btn-sm btn-warning deleteBtn" data-toggle="modal" data-target="#delModal">
删除
</button>
</td>
</tr>`
}
$("tbody").html(str)
console.log(response.total)
initPage(response.total)
setClickUpdateDelete();
})
}
/*查询所有*/
/* function findAll() {
$.get("/book/page?currentPage="+currentPage+"&pageSize="+pageSize+"" , function (response){
let str='';
/!*遍历响应response*!/
/!*let rer = response.data;
for (let datum of rer) {
console.log(datum)
}*!/
for (let responseKey of response.data) {
str+=`<tr>
<td>${responseKey.bookId}</td>
<td>${responseKey.bookName}</td>
<td>${responseKey.authorName}</td>
<td>${responseKey.firstTypeName}</td>
<td>${responseKey.secondTypeName}</td>
<td><img src=${responseKey.imgUrl} width="35px" height="35px"/></td>
<td>
<button class="btn btn-sm btn-info" data-toggle="modal"
data-target="#modal-default">
编辑
</button>
<button class="btn btn-sm btn-warning" data-toggle="modal" data-target="#delModal">
删除
</button>
</td>
</tr>`
}
$("tbody").html(str)
console.log(response.total)
initPage(response.total)
})
}
findAll();*/
/*获取全部数量*/
/*初始化分页插件*/
function initPage(total) {
/*分页*/
$("#pagination").pagination(total, //分布总数量，必须参数
{
callback: pageChangeHandle, //pageChangeHandle() 为翻页调用次函数。
prev_text: "« 上一页",
next_text: "下一页 »",
items_per_page: pageSize, //每一页的大小
num_edge_entries: 2, //两侧首尾分页条目数
num_display_entries: 5, //连续分页主体部分分页条目数
current_page: currentPage - 1, //当前页索引
load_first_page: false //不执行回调函数,避免死循环
});
}
/*点击分页页码回调函数*/
function pageChangeHandle(index) {
currentPage = index + 1;
searchByPage();
console.log("当前页码索引:" + index);
}
/*通过父id查询分类*/
function findTypeByParentId(pid) {
$.get("/type/findByParentId?parentId=" + pid, (response) => {
if (response.status==2000){
if (pid == 0) {
// console.log(response);
let str = '<option value="-1">一级分类</option>'
response.data.forEach(item => {
// console.log("条件:"+item.typeName);
str += `<option value="${item.typeId}">${item.typeName}</option>`
})
$("#firstType2").html(str);
$("#firstType").html(str);
} else {
// console.log(response);
let str = '<option value="-1">二级分类</option>'
response.data.forEach(item => {
// console.log("条件:"+item.typeName);
str += `<option value="${item.typeId}">${item.typeName}</option>`
})
$("#secondType2").html(str);
$("#secondType").html(str);
}
}
})
}
findTypeByParentId(0);
/*给select设置change切换*/
function setChangeListener() {
/**
* 一二级分类
*/
$("#firstType2").change(function () {
console.log("change方法执行了")
console.log($(this).val())
findTypeByParentId($(this).val())
})
$("#firstType").change(function () {
console.log("change方法执行了")
console.log($(this).val())
findTypeByParentId($(this).val())
})
/**
* 给searchBtn搜索按钮设置点击事件
*/
$("#searchBtn").click(function () {
/*分页查询*/
searchByPage();
})
/**
* 给头像文件上传选择框设置change事件
* 我们在 ajax 中 contentType 设置为 false 是为了避免 JQuery
* 对其操作，从而失去分界符，而使服务器不能正常解析文件。
* processData:false,如果要发送 DOM树信息或其它不希望转换的信息,设置为 false
*/
$("#avatar").change(function (e) {
//有2种方式 第一种：创建一个文件的虚拟路径
// 第二种： 创建文件的Base64格式字符串
// 第一种：
// var s = URL.createObjectURL(e.target.files[0]);
// $(".bookimage").attr("src", s);
//第二种： 把选中的文件创建base64格式字符串
// var fileReader = new FileReader();
// fileReader.readAsDataURL(e.target.files[0]);
// fileReader.onload=function (result) {
// $(".bookimage").attr("src", result.target.result);
// }
var formData = new FormData();
/*设置key/value*/
formData.append("avatar", e.target.files[0]);
console.log("进入ajax")
$.ajax({
url: "/upload",
type: "post",
contentType: false,
processData: false,
data: formData,
success: function (response) {
let s = response.data;
console.log(s);
/*添加图片路径*/
$(".bookimage").attr("src", s);
$("#imgUrl").val(response.data);
}
})
})
/**
* 添加或者修改按钮点击事件
*/
$("#addOrEdit").click(function () {
//添加功能
$.post("/book/addOrEdit",$("#addorEidtForm").serialize(),function () {
/*添加成功刷新前端页面*/
searchByPage();
})
})
}
setChangeListener();
/**
* 重置表单
*/
/*添加按钮点击事件*/
function resetFrom() {
$("#addorEidtForm").get(0).reset();
$(".bookimage").attr("src","");
$(".addBookBtn").click(function () {
resetFrom();
})
}
resetFrom();
/**
*设置修改删除的点击事件
*/
function setClickUpdateDelete() {
$(".editBtn").click(function () {
/*获取id*/
findBookByBookId($(this).parent().parent().attr("bookId"));
console.log("编辑按钮点击了!");
})
$(".deleteBtn").click(function () {
let id = $(this).parent().parent().attr("bookId")
console.log("外层:"+$(this).parent().parent().attr("bookId"))
$(".delSure").click(function () {
console.log("里层:"+id)
delectableBookId(id);
console.log("删除按钮点击了!");
searchByPage();
})
})
}
/**
* 删除
*/
function delectableBookId(id) {
$.get("/book/deleteBookId?bookId="+id , function (response) {
})
}
/**
* 查询条目id
*/
function findBookByBookId(id) {
$.get("/book/findById?bookId="+id , function (response) {
if (response.status==2000){
// console.log(response.data);
findTypeByParentId(response.data.firstTypeId);
setTimeout(function () {
setFromData(response.data)
},300)
}
})
}
/**
* 设置编辑表单数据会写
*/
function setFromData(item) {
$("#imgUrl").val(item.imgUrl);
$("#bookId").val(item.bookId);
$("#bookName").val(item.bookName);
$("#authorName").val(item.authorName);
$("#firstType").val(item.firstTypeId);
$("#secondType").val(item.secondTypeId);
$("#description").val(item.description);
$("#bookimage").attr("src",item.imgUrl);
}
})HTML代码
<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>图书管理</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="../css/font-awesome.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="../css/AdminLTE.min.css">
<!-- AdminLTE Skins. We have chosen the skin-blue for this starter
page. However, you can choose any other skin. Make sure you
apply the skin class to the body tag so the changes take effect. -->
<link rel="stylesheet" href="../css/_all-skins.min.css">
<link rel="stylesheet" href="../css/index.css">
<link rel="stylesheet" href="../css/dialog.css">
<link rel="stylesheet" href="../css/pagination.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
<!-- jQuery 3 -->
<script src="../js/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="../js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="../js/adminlte.min.js"></script>
<!--JQ分页-->
<script src="../js/jquery.pagination.js"></script>
<script src="../js/book.js"></script>
<script src="../js/baseAjax.js"></script>
<body class="hold-transition skin-red sidebar-mini">
<div class="wrapper" id="huige">
<header class="main-header">
<a href="#" class="logo">
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>图书管理</b></span>
</a>
<nav class="navbar navbar-static-top" role="navigation">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
<span class="sr-only">Toggle navigation</span>
</a>
<div style="float: right;height: 50px;line-height: 50px;margin-right:25px ">
<a href="" class="btn btn-danger">退出登录</a>
</div>
</nav>
</header>
<aside class="main-sidebar">
<!-- Sidebar Menu -->
<ul class="sidebar-menu" data-widget="tree">
<li class="header">上山打老虎</li>
<li class="active"><a href="#"><i class="fa fa-link"></i> <span>图书管理</span></a></li>
<li><a href="type.html"><i class="fa fa-link"></i> <span>分类管理</span></a></li>
</ul>
</aside>
<div class="content-wrapper">
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-header">
<div class="form-group form-inline">
<div class="btn-group">
<button type="button" class="btn btn-danger addBookBtn" data-toggle="modal"
data-target="#modal-default">添加书籍
</button>
</div>
</div>
</div>
<div class="fa-pull-right clearfix" style="margin-right: 20px;margin-bottom: 20px">
<form id="searchForm">
<div class="form-inline">
<span style="margin-right: 10px">条件查询:</span>
<select class="form-control" name="firstTypeId" id="firstType2">
<option value="-1">一级分类</option>
</select>
<select class="form-control" name="secondTypeId" id="secondType2">
<option value="-1">二级分类</option>
</select>
<input type="text" class="form-control" placeholder="请输入搜索的内容" name="search">
<a href="javascript:void(0)" class="btn btn-danger" id="searchBtn">搜索</a>
</div>
</form>
</div>
<div class="box-body">
<table id="example2" class="table table-bordered table-hover">
<thead>
<tr>
<th>书籍id</th>
<th>书籍名称</th>
<th>作者</th>
<th>一级分类</th>
<th>二级分类</th>
<th>封面图片</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>上山打老虎</td>
<td>上山打老虎</td>
<td>上山打老虎</td>
<td>上山打老虎</td>
<td>上山打老虎</td>
<td>上山打老虎</td>
<td>
<button class="btn btn-sm btn-info" data-toggle="modal"
data-target="#modal-default">
编辑
</button>
<button class="btn btn-sm btn-warning" data-toggle="modal" data-target="#delModal">
删除
</button>
</td>
</tr>
</tbody>
</table>
<!--分页插件-->
</div>
<!--分页插件-->
<div id="pagination" style="text-align: right">
</div>
</div>
</div>
</div>
</div>
</div>
<!--编辑或者新建弹出框-->
<div class="modal fade" id="modal-default">
<div class="modal-dialog modal-lg edit-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title title">书籍操作</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form class="form-horizontal" id="addorEidtForm">
<!--隐藏域,虚拟位置保存传过来的头像url-->
<input type="hidden" name="imgUrl" id="imgUrl">
<input type="hidden" name="bookId" id="bookId">
<div class="card-body">
<div class="form-group row">
<label class="col-sm-2 col-form-label">书籍名称:</label>
<div class="col-sm-10">
<input type="text" id="bookName" class="form-control" placeholder="请输入书籍名称"
name="bookName">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">作者名称:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="authorName" placeholder="请输入作者名称"
name="authorName">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">选择分类:</label>
<div class="col-sm-10">
<div class="form-inline">
<select class="form-control" name="firstTypeId" id="firstType">
<option value="-1">一级分类</option>
</select>
<select class="form-control" name="secondTypeId" id="secondType">
<option value="-1">二级分类</option>
</select>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">书籍简介:</label>
<div class="col-sm-10">
<textarea class="form-control" rows="3" placeholder="输入商品简介" name="description"
id="description"></textarea>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">封面图片</label>
<div class="col-sm-10">
<label class="btn btn-success"><input type="file" style="display:none;"
id="avatar" accept="image/*"> 上传图片</label>
<!--显示图片-->
<img src="" alt="" width="100px" height="100px" class="bookimage" id="bookimage">
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-success" data-dismiss="modal" id="addOrEdit">确定</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!--删除弹出确认框-->
<div class="modal fade" id="delModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">温馨提示</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
你确定要删除吗?
</div>
<!--justify-content-between-->
<div class="modal-footer ">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-success delSure" data-dismiss="modal">确定</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</body>
</html>Java-Controller代码
package com.sm.controller;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.sm.entity.Book;
import com.sm.entity.SearchBean;
import com.sm.httpEnum.AjaxResult;
import com.sm.service.BookService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@ResponseBody+@RequestMapping()=@RequestController()*/
@Controller
@ResponseBody
@RequestMapping("book")
public class BookController {
@Autowired
private BookService bookService;
/*一代目*/
/*@GetMapping("findAll")
public List<Book> findAll(){
return bookService.findAll();
}*/
/*二代目*/
/*@GetMapping("page")
public Map<String,Object> page(int currentPage , int pageSize){
//表示开启分页功能
//注意:这行代码后面的第一个代码将会分页,后面的就不会再分页了
PageHelper.startPage(currentPage,pageSize);
List<Book> page = bookService.page();
PageInfo<Book> bookPageInfo = new PageInfo<>(page);
long total = bookPageInfo.getTotal();//总条目数
Map<String,Object> map = new HashMap<>();
map.put("data",page);
map.put("total",total);
return map;
}*/
/*三代目*/
/*@GetMapping("page")
*//*给个默认值,避免不传值*//*
public AjaxResult page(@RequestParam(defaultValue = "1") int currentPage, @RequestParam(defaultValue = "5") int pageSize) {
//表示开启分页功能
//注意:这行代码后面的第一个代码将会分页,后面的就不会再分页了
PageHelper.startPage(currentPage, pageSize);
List<Book> page = bookService.page();
PageInfo<Book> bookPageInfo = new PageInfo<>(page);
long total = bookPageInfo.getTotal();//总条目数
return AjaxResult.success(page, total);
}*/
@PostMapping("searchByPage")
public AjaxResult searchByPage(int currentPage, int pageSize, SearchBean searchBean){
//表示开启分页功能
//注意:这行代码后面的第一个代码将会分页,后面的就不会再分页了
PageHelper.startPage(currentPage, pageSize);
List<Book> books = bookService.searchByPage(searchBean);
PageInfo<Book> bookPageInfo = new PageInfo<>(books);
long total = bookPageInfo.getTotal();//总条目数
return AjaxResult.success(books, total);
}
/**
* 添加
*/
@PostMapping("addOrEdit")
public AjaxResult addOrEdit(Book book){
if (book.getBookId()==null){
int row = bookService.addBook(book);
if (row>0){
return AjaxResult.success();
}else {
return AjaxResult.error();
}
}else {
int row = bookService.editBook(book);
if (row>0){
return AjaxResult.success();
}else {
return AjaxResult.error();
}
}
}
/**
* 通过id查询编辑
*/
@GetMapping("findById")
public AjaxResult findById(int bookId){
Book book = bookService.findById(bookId);
return AjaxResult.success(book);
}
/**
* 删除
*/
@GetMapping("deleteBookId")
public AjaxResult deleteBookId(int bookId){
int book = bookService.deleteBookId(bookId);
return AjaxResult.success(book);
}
}
2.Vue方式
示例: 通过绑定事件获取
JS代码
let vue = new Vue({
el:"#app",
data:{
formData: {},
tableData: []
},
created(){
this.findAll();
},
methods:{
findAll(){
axios.get(`http://localhost:8088/person`).then(response => {
console.log("进入了axios")
this.tableData=response.data;
});
},
importExcel(){
},
updatePerson(e){
console.log("当前id"+e)
},
deletePerson(e){
console.log("删除了"+e)
}
}
})HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<link rel="stylesheet" href="./plugins/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="./dist/css/adminlte.min.css">
<link rel="stylesheet" href="./myjs/zpageNav.css">
<body>
<div id="app">
<div class="card-header">
<div class="execute-entity" style="float: left">
<div class="btn-group">
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal"
data-target="#addOrEdit"
@click="formData={},imgUrl='../dist/img/avatar.png'">新建
</button>
<a href="http://localhost:8088/person/exportExcel" class="btn btn-warning btn-sm ">导出Excel</a>
<label style="margin: 0" class="btn btn-danger btn-sm"><input type="file" style="display: none" @change="importExcel"/>导入Excel</label>
</div>
</div>
</div>
<div>
<table class="table table-bordered table-hover ">
<thead>
<tr>
<th style="width: 20px">#</th>
<th>用户id</th>
<th>用户名称</th>
<th>用户密码</th>
<th>用户地址</th>
<th>用户手机</th>
<th>用户生日</th>
<th>用户头像</th>
<th style="width: 150px">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in tableData" :key="index">
<td><input type="checkbox"/></td>
<td>{{item.id}}</td>
<td>{{item.personName}}</td>
<td>{{item.personPwd}}</td>
<td>{{item.personAddress}}</td>
<td>{{item.personPhone}}</td>
<td>{{item.personBirthday}}</td>
<td>{{item.personImg}}</td>
<td>
<button type="button" class="btn-sm btn-warning" @click="updatePerson(item.id)">修改</button>
<button type="button" class="btn-sm btn-danger" @click="deletePerson">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--UI的-->
<script src="./plugins/jquery/jquery.min.js"></script>
<script src="./plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="./dist/js/adminlte.min.js"></script>
<!--自己的-->
<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/Excel.js"></script>
</body>
Java-Controller代码
package com.shangma.cn.Tools;
import com.shangma.cn.entity.Person;
import com.shangma.cn.entity.User;
import com.shangma.cn.service.IPersonService;
import com.shangma.cn.service.IUserService;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.annotation.Resource;
import java.util.List;
/**
* <p>
* 前端控制器
* </p>
* MybatisPlus代码生成器生成
*/
@RestController
@RequestMapping("person")
public class PersonController {
@Resource
private IPersonService iPersonService;
@GetMapping
public List<Person> personList(){
return iPersonService.list();
}
}
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/192914.html
