目标
- 列表功能
- 分页功能
列表功能
第一步 新增加FindAllUser.vue文件
第二步 添加路由地址定义：
import FindAllUser from '@/components/user/FindAllUser'
{
path:'/findAllUser',
name:'FindAllUser',
component:FindAllUser
}
第三步 修改菜单链接menu.vue
<el-menu-item index="findAllUser">用户管理</el-menu-item>
第三步 开发列表页
列表选择
image.png
对应的代码拷贝到 FindAllUser.vue页面里
<template>
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
label="日期"
width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column
prop="address"
label="地址"
show-overflow-tooltip>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-03',
name: '张三',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
multipleSelection: []
}
},
methods: {
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleSelectionChange(val) {
this.multipleSelection = val;
}
}
}
</script>
<style></style>
分析页面组成
1、数据放到tableData里
2、tableData里的属性与页面通过prop="name"来绑定
接下来的工作至少需要两步
1）页面加载时查询后台获取列表数据
2） 页面获取响应，更新页面
- 页面
<template>
<div>
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="userName"
label="用户名"
width="120">
</el-table-column>
<el-table-column
prop="email"
label="邮箱"
width="200">
</el-table-column>
<el-table-column
prop="idCard"
label="身份证号"
width="200">
</el-table-column>
</el-table>
<div style="margin-top: 20px">
<el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
<el-button @click="toggleSelection()">取消选择</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
multipleSelection: []
}
},
mounted(){
//调用查询所有用户的方法
this.findAll();
},
methods: {
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
findAll(){
//请求后台，查询所有用户
this.$axios.get("http://localhost:8082/vue-servlet/findAllUser")
.then(response=>{
let data=response.data;//后台的responseBean
//用响应数据去更新
this.tableData=data.list;
})
.catch()
}
}
}
</script>
<style>
</style>
后台servlet关键代码
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//查询数据库表t_user里的所有数据，返回list
IUserService us=new UserServiceImpl();
try {
//将list放入响应对象 ResponseBean里
List<User> userList=us.findAll();
ResponseBean resp=new ResponseBean();
resp.setCode("0");
resp.setMsg("查询成功");
resp.setList(userList);
//转成json，给前台
ObjectMapper om=new ObjectMapper();//转成json，给前台
String json=om.writeValueAsString(resp);
response.getWriter().write(json);
} catch (ClassNotFoundException | SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
目前效果：
image.png
加分页功能
关键代码
参考element-ui->pagnation分页-带背景的分页
<el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize" @current-change="changePage">
</el-pagination>
对应的绑定事件-获取当前页并重新请求
changePage:function(currentPage){
//alert("下一页");
//更新当前页页码
this.currentPage=currentPage;
//再重新请求后台
this.findAll();
}
data部分新增加了几个属性
data() {
return {
......
//以下三个是分页相关的属性
total:0,//查询得到
pageSize:2,//每页条数
currentPage:1
}
},
axios成功的回调函数里更新数据
findAll(){
//用axios请求后台，查询所有数据
this.$axios.get('http://localhost:8082/vue-servlet/findAllUser',{params: {
currentPage: this.currentPage,
pageSize: this.pageSize
}})
.then(response=>{
//如果响应成功，把列表数据放到tableData里
//alert(response);
this.tableData = response.data.list;
this.total = response.data.page.count;
})
}
后台关键代码
- 后台/admin/findAllUserServlet
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 查询数据库表t_user里的所有数据，返回list
IUserService us = new UserServiceImpl();
// 从前台获取当前请求页码和每页条数
String currentPage = request.getParameter("currentPage");// 当前面码
String pageSize = request.getParameter("pageSize");// 每页条数
// step1 调用service的count，汇总一下总条数
// select count(*) from t_user
int count = 0;
try {
count = us.count();
} catch (ClassNotFoundException | SQLException e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
// step 2 新建一个pageBean，传到前台,供前台以后调用
PageBean pb = new PageBean();
pb.setPageSize(Integer.parseInt(pageSize));//
pb.setCount(count);// 需要查询数据库 这条很关键
pb.setCurrentPage(Integer.parseInt(currentPage));
try {
// 将list放入响应对象 ResponseBean里
List<User> userList = us.findAll(pb.getPageSize(), pb.getCurrentPage());
ResponseBean resp = new ResponseBean();
resp.setCode("0");
resp.setMsg("查询成功");
resp.setList(userList);
resp.setPage(pb);
// 转成json，给前台
ObjectMapper om = new ObjectMapper();// 转成json，给前台
String json = om.writeValueAsString(resp);
response.getWriter().write(json);
} catch (ClassNotFoundException | SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
- 后台dao
@Override
public int count() {
int count=0;
conn=DBUtil.getConnection();
try {
ps=conn.prepareStatement("select count(*) from t_user ");
rs=ps.executeQuery();
if(rs.next()){//如果有该用户
count=rs.getInt(1);
}
} catch (SQLException e) {
e.printStackTrace();
}
DBUtil.closeConnection(rs, ps, conn);
return count;
}
@Override
public List<User> findAllUser(int curPage, int pageSize) {
conn=DBUtil.getConnection();
List<User> userList=new ArrayList();
try {
ps=conn.prepareStatement("select * from t_user limit ?,?");
ps.setInt(1, (curPage-1)*pageSize);
ps.setInt(2, pageSize);
rs=ps.executeQuery();
while(rs.next()){
User user=new User();
//把从数据库查询到的记录封装到对象里
user.setId(rs.getInt("user_id"));
user.setUserName(rs.getString("user_name"));
user.setUserPwd(rs.getString("user_pwd"));
user.setEmail(rs.getString("user_email"));
user.setPower(rs.getInt("user_power"));
user.setIdCard(rs.getString("user_idcard"));
//把对象放到list里
userList.add(user);
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
DBUtil.closeConnection(rs, ps, conn);
return userList;
}
-
改造过的responseBean-
public class ResponseBean<T> { private int code; private String msg; // 携带的数据 private List<T> list; private PageBean page; ...... }
目前效果：
image.png
前台完整代码
<template>
<div>
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="userName"
label="用户名"
width="120">
</el-table-column>
<el-table-column
prop="email"
label="邮箱"
width="200">
</el-table-column>
<el-table-column
prop="idCard"
label="身份证号"
width="200">
</el-table-column>
</el-table>
<el-pagination
background
layout="prev, pager, next"
:total="total"
:page-size="pageSize"
@current-change="changePage">
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
multipleSelection: [],
//以下三个是分页相关的属性
total:0,//查询得到
pageSize:2,//每页条数
currentPage:1
}
},
mounted(){
//调用查询所有用户的方法
this.findAll();
},
methods: {
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
findAll(){
//请求后台，查询所有用户
this.$axios.get("http://localhost:8082/vue-servlet/findAllUser",
{params:{currentPage:this.currentPage,pageSize:this.pageSize}})
.then(response=>{
let data=response.data;//后台的responseBean
//用响应数据去更新
this.tableData=data.list;
this.total=data.page.count;
})
.catch()
},
changePage:function(currentPage){
//alert(`当前页${currentPage}`);
this.currentPage=currentPage;
this.findAll();
}
}
}
</script>
<style>
</style>
测试
image.png
网友评论