20240612前端问题总结
给定固定大小的父 子盒子，要实现子盒子上下左右居中
使用calc()计算，子绝父相和子元素调整位置，flex弹性盒布局，transform，table-cell，浮动六种方法展示子元素垂直水平居中。
<div class="big">
<div class="small"></div>
</div>
calc()计算
.big {
background-color: blue;
width: 600px;
height: 600px;
overflow: hidden;
}
.small {
background-color: burlywood;
height: 200px;
width: 200px;
margin: calc((600px - 200px) / 2);
}
如果父元素和子元素宽高不等,下面代码同样没有问题
.big {
background-color: blue;
width: 600px;
height: 500px;
overflow: hidden;
}
.small {
background-color: burlywood;
height: 300px;
width: 200px;
margin: calc((500px - 300px) / 2) calc((600px - 200px) / 2);
}
注意margin后面两个值的时候，第一个值代表上下外边距的值，第二个值代表左右外边距的值，所以calc先计算上下高度再计算宽度。
子绝父相+子元素调整位置
父元素相对定位，子元素绝对定位，调整子元素使其垂直水平居中
.big {
width: 600px;
height: 500px;
background-color: blue;
position: relative;
}
.small {
height: 300px;
width: 200px;
background-color: burlywood;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: auto;
}
flex弹性盒布局
display：flex弹性盒布局设置元素水平垂直居中对齐
.big {
width: 600px;
height: 500px;
background-color: blue;
display: flex;
justify-content: center;
align-items: center;
}
.small {
height: 300px;
width: 200px;
background-color: burlywood;
}
子绝父相+transform
.big {
width: 600px;
height: 500px;
background-color: blue;
position: relative;
}
.small {
height: 300px;
width: 200px;
background-color: burlywood;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
单元格table-cell布局
.big {
width: 600px;
height: 500px;
background-color: blue;
display: table-cell;
vertical-align: middle;
}
.small {
height: 300px;
width: 200px;
background-color: burlywood;
vertical-align: middle;
margin: 0 auto;
}
浮动
给子元素设置左浮动使其脱离文档流，然后计算父元素和子元素的宽高差除以2设置上外边距和左外边距
<style>
.big {
width: 600px;
height: 500px;
background-color: blue;
}
.small {
height: 300px;
width: 200px;
background-color: burlywood;
float: left;
margin-top: 100px;
margin-left: 200px;
}
</style>
给定一个对象数组，找到id为1的所有元素，返回一个新的数组
这个问题尝试用数组的常用方法解决，filter，splice，slice，concat，find，includes。
以下面的数组对象为例
var students = [
{ id: 1, name: "张三", age: 18, gender: "男" },
{ id: 1, name: "李四", age: 19, gender: "女" },
{ id: 1, name: "王五", age: 20, gender: "男" },
{ id: 2, name: "阿狗", age: 18, gender: "男" },
{ id: 3, name: "阿猫", age: 19, gender: "女" },
{ id: 4, name: "刘柳", age: 20, gender: "男" }
];
使用filter过滤元素返回一个新数组
var result = students.filter(function (student) {
return student.id == 1
})
console.log(result)
箭头函数
const result = students.filter(students => students.id === 1)
console.log(result)
reduce函数解决
var result = students.reduce((acc, student) => {
if (student.id === 1) {
acc.push(student);
}
return acc;
}, []);
console.log(result);
后端一次性给定全部数据量，前端实现分页，描述实现逻辑。
基于vue2和element-ui实现，代码提取自简历中的信贷后台管理项目信贷申请核心代码。
封装请求后端数据的接口并调用
// 在IndexView中调用loan.js
// 定义获取申请列表的接口
export const getLoanList = (params) => {
return request({
url: '/loan/list',
method: 'get',
params
})
}
//页面加载就请求表格数据(异步获取数据)
mounted() {
this.getLoanList();
}
在vue2的data中定义数据
data() {
return {
rows: 0,
value:false,//数据只有一页隐藏分页
updateForm: {
id: 0,
name: "",
sex: "",
mobile_phone:"",
},
pageOptions: {
pageNo: 1,//当前页面
pageSize: 10,//页面显示数据条数
},
query: "",//名称
//表格数据
tableData: [],
columns: [
{
label: "姓名",
prop: "name",
width: "80",
},
{
label: "出生日期",
prop: "birthday",
width: "160",
},
{
label: "性别",
prop: "sex",
},
{
label: "教育程度",
prop: "education",
},
{
label: "居住地址",
prop: "address1",
},
{
label: "手机号",
prop: "mobile_phone",
},
{
label: "申请状态",
prop: "status",
},
{
label: "操作",
width: "280",
prop: "opts",
},
],
}
},
获取当前页需要显示的数据，使用elemen-ui的table组件在模板中渲染接收到的后端的数据
<!--tableData是表格数据-->
<el-table :data="tableData" >
<el-table-column type="index" label="序号"></el-table-column>
<el-table-column
v-for="(item,index) in columns"
:key="index"
:label="item.label"
:prop="item.prop"
:width="item.width"
align="center"
>
</el-table-column>
</el-table>
使用element-ui的分页组件，之后关于分页遇见调用的方法在methods里面写
<!-- 分页功能 -->
<!-- size-change处理页码大小；current-change事件处理当前页变动时候触发的事件。 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:hide-on-single-page="value"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageOptions.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="rows">
</el-pagination>
在method里面写关于分页的方法
handleSizeChange(val) {
this.pageOptions.pageSize = val;
this.getLoanList();
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
this.pageOptions.pageNo = val;
this.getLoanList();
console.log(`当前页: ${val}`);
},
绑定当前页面页数和当前页面显示数据条数，调用后端数据请求接口请求数据返回
vue2实现
在Vue组件中定义数据：
data() {
return {
allData: [], // 后端一次性给定的全部数据量
pageSize: 10, // 每页显示的数据条数
currentPage: 1 // 当前页数
};
}
创建计算属性来获取当前页需要显示的数据：
computed: {
paginatedData() {
const startIndex = (this.currentPage - 1) * this.pageSize;
const endIndex = startIndex + this.pageSize;
return this.allData.slice(startIndex, endIndex);
}
}
在模板中渲染分页数据：
<div v-for="data in paginatedData" :key="data.id">
<!-- 显示每页数据的内容 -->
</div>
添加分页功能，包括上一页和下一页的按钮：
<button @click="goToPage(currentPage - 1)" :disabled="currentPage === 1">上一页</button>
<button @click="goToPage(currentPage + 1)" :disabled="currentPage * pageSize >= allData.length">下一页</button>
实现跳转到指定页数的方法：
methods: {
goToPage(page) {
this.currentPage = page;
}
}
如何实现一个父页面的弹窗功能，描述显隐和传参的实现逻辑
我的简历项目中的实现
简历中的信贷后台管理中有弹窗功能，在当前页面（父页面）中使用弹窗组件。弹窗使用了element的dailog组件。visible和close设置弹窗的显示隐藏
<el-dialog title="编辑页面弹窗" :visible="dialogVisible" @close="dialogVisible = false" >
<div class="form-box">
编辑表格
</div>
</el-dialog>
通过data返回数据传参
data() {
return {
dialogVisible: false, //是否显示对话框
rows: 0,
value:false,//数据只有一页隐藏分页
}
}
method写关于编辑的操作
//编辑操作
async editApplication(row) {
this.dialogVisible = true;
this.$nextTick(() => {
this.updateForm.id = row.id;
this.updateForm.name = row.name;
this.updateForm.sex = row.sex;
this.updateForm.mobile_phone = row.mobile_phone;
});
},
简单vue2实现
上面是基于element框架实现的，若不使用element，实现一个父页面的弹窗功能可以使用Vue2中的slot（插槽）和props（属性）来实现
<template>
<div>
<button @click="showModal = true">打开弹窗</button>
<modal :is-show="showModal" :message="modalMessage" @close="showModal = false">
<!-- 弹窗内容 -->
</modal>
</div>
</template>
<script>
import Modal from './Modal.vue';
export default {
components: {
Modal
},
data() {
return {
showModal: false,
modalMessage: '这是父页面传递给弹窗组件的参数'
}
}
}
</script>
在父组件的模板中，通过modal标签引入弹窗组件，并传递了is-show和message两个props，用来控制弹窗的显隐状态和传递参数。同时，通过插入标签，可以在父组件中自定义弹窗的内容。
在弹窗组件中接收和使用父组件传递的props：
<template>
<div class="modal-mask" :class="{ 'is-show': isShow }">
<div class="modal-close" @click="$emit('close')">×关闭</div>
<div class="modal-body">
<p>{{ message }}</p>
<slot></slot>
</div>
</div>
</template>
<script>
export default {
props: {
isShow: {
type: Boolean,
default: false
},
message: {
type: String,
default: ''
}
}
}
</script>
在弹窗组件中，通过props接收父组件传递的is-show和message，并使用v-bind绑定到相应的HTML元素上进行显示。同时，在关闭弹窗时通过 $emit 触发一个close事件，用来向父组件传递弹窗关闭的通知。
![[Alogithm][动态规划][背包问题][组合总和IV][不同的二叉搜索树]详细讲解](https://img-blog.csdnimg.cn/direct/4d8c2ba17b0a4641be91c451634e4d12.png)
