工作概览:
1、实现通过用户id搜索特定用户信息的功能
2、学习使用git
3、黑名单管理模块中实现信息展示的功能
工作详情、遇到的问题及解决方案:
1、实现搜索特定用户的功能
在表格中搜索某一用户并显示在表格中可以使用filter()数组过滤方法来实现。但由于表格也设置了分页的功能,两者都使用data属性,会出现冲突,因此经过多次尝试一直都没能实现。经过查询相关资料以及一系列的尝试,最终找到解决方案。
使用compute进行监听,通过搜索框绑定的属性search_input,监控此值的变化,如果变化则执行
搜索功能,获取查询的结果,把数组长度赋值给 分页组件中的total;如果没有变化则单纯的分页。实现代码:
computed: {
table_data() {
let search = this.search_input;
// 搜索功能
if (search){
let list =this.userData.filter(data => !search || data.user_openid.toLowerCase().includes(search.toLowerCase()));
let fenye = list.slice((this.currentPage-1)*this.pagesize,this.currentPage*this.pagesize);
// 获取查询的结果,把数组长度赋值给 分页组件中的total
this.tableData_length = fenye.length;
return list,fenye
}
// 分页功能
else {
//所有数据的长度 赋值给分页组件中的total
this.tableData_length = this.userData.length;
let fenye = this.userData.slice((this.currentPage-1)*this.pagesize,this.currentPage*this.pagesize)
return fenye
}
}
},
实现效果:
(1)未搜索时:
(2)进行搜索时:
2、学习使用git
(1)首先使用git clone命令,将项目下载下来
(2)使用git status命令,查看当前状态,红色字体显示的是当前修改了的文件
(3)使用git add .命令或git add xxx(文件名)
git add .是提交全部修改过的文件;如果不想要全部提交,可以通过git add xxx提交指定的文件
遇到的问题:
git add和commit都没能成功,后来通过查找资料发现是由于我最开始提交代码在没有完成时强制停掉了,再次提交时就一直不成功(如图)。
解决方案:
删除.git文件夹下的index.lock文件即可。
(4)使用git commit -m "注释" 推送修改到本地git库中
(5)使用git pull <远程主机名> <远程分支名> 取回远程主机某个分支的更新,再与本地的指定分支合并
(6)git push <远程主机名> <远程分支名> 把当前提交到git本地仓库的代码推送到远程主机的某个远程分之上
3、黑名单管理模块中实现信息展示的功能
与用户管理信息展示的方法类似,此处不再赘述,实现代码:
created() {
this.$axios.get("http://grandland.gl-data.com:14332/manage/usermanage/getblacklist")//向后端发送get请求
.then((res) => {
this.userData=res.data;
})
.catch((err) => {
console.log("failed");
})
},
实现效果: