4 grid中添加图片不居中_面试总结（4）

最新推荐文章于 2022-12-08 16:06:58 发布

魏金华

最新推荐文章于 2022-12-08 16:06:58 发布

阅读量129

点赞数

文章标签： 4 grid中添加图片不居中

本文链接：https://blog.csdn.net/weixin_34254848/article/details/112591526

版权

1、项目介绍

2、element-ui做下拉框搜索动态数据展示如何实现

element ui实现下拉框远程搜索，请求后台获取数据并展示下拉内容blog.csdn.net

需要在el-select中绑定几个属性，通过remote-method来实现事实发起搜索请求

     <el-select  v-model="searchByName" 
              filterable 
              placeholder="请输入企业名称/姓名" 
              remote
              clearable
              @change="currentSel"
              reserve-keyword
              :remote-method="Tolikesearch">
              <el-option
                v-for="item in likesearch"
                :key="item.userId"
                :label="item.realName"
                :value="item.userId">
             </el-option>
    </el-select>

js部分代码

  //获取select option选中的值
        currentSel(selVal) {
         this.selectid=selVal
        },
   //搜索发起请求 传入值为当前select输入的值
        Tolikesearch(query){
          enterpriseOrUserList({name:query}).then(res=>{
              this.likesearch=res.data
          })
        },

3、前端页面导入导出表格如何实现

js-xlsx插件

4、前端打印表单等如何实现

js可实现

前端js实现表格打印www.cnblogs.com

5、根据页面大小自适应如何实现

自适应页面的实现方式 - 前端开发 - SegmentFault 思否segmentfault.com

简易场景实现自适应：浮动、页面居中、元素宽度设置百分比自动匹配
复杂场景需求：也多套css代码，用媒体查询技术，让页面根据不同屏幕尺寸来加载不同代码模块
响应式布局：根据不同屏幕尺寸调整页面显示效果自适应。响应式布局一般有栅格系统布局，flex布局

css媒体查询 media queries

flex布局：

flex container容器的6个属性
1.flex-direction 方向 row(行排列默认)/row-reverse/column(纵向)/column-reverse
flex-direction:row时主轴为X方向/column时主轴为Y方向

2.flex-wrap 换行 nowrap(默认不换行)/wrap/

3.flex-flow 上面两个属性的简写 flex-flow:row wrap 上面两个属性可写成一行

4.justify-content 主轴对齐方式 :
*space-between(多余空间放中间)
space-around(多余空间放两边)
flex-start(item元素靠近主轴起点)
flex-end(item元素靠近主轴终点)
center(item元素居中)*

5.align-items 交叉轴对齐方式
*stretch伸展(默认值，前提是item元素宽/高度不确定)，所有元素宽/高度都撑满整个container
flex-start(item元素靠近交叉轴起点)
flex-end(item元素靠近交叉轴终点)
center(item元素居中)
baseline (item元素第一行文字的baseline对齐)*

6.align-content 多轴线在交叉轴方向的对齐方式（多行/多列），为什么不是主轴，因为已经换行了是多行啊。
flex-start item靠近交叉轴起点
flex-end item元素靠近交叉轴终点
center item元素靠近交叉轴中心点
space-between item元素与交叉轴两端对齐
space-around item元素每根轴线两侧间隔相等，轴线之间的间隔比轴线与边框的间隔大一倍
stretch (默认值)item元素占满整个交叉轴

flex item的6个属性
order item元素的顺序

flex-grow 有多余空间item元素分配比例，默认为0即不放大

flex-shrink 空间不够时item元素收缩比例，默认为1即缩小一倍

flex-basis 指定item元素在分配多余空间之前占用主轴大小main size（px/%）,默认auto即项目本身大小

flex 上面三个属性的简写，注意顺序

align-self 指定单个item元素自身的对齐方式，可覆盖align-item属性，默认auto继承align-item的属性
*flex-start
flex-end
center
baseline
stretch*

栅格系统：

1.将页面中每行布局分成12个等份，每一等份即一个grid。1个grid占1/12，2个grid占2/12，依此类推。页面上所有grid由父容器container包裹，所有grid设置浮动或者设置成行内元素保持在一行，一行排列不下时自动换行。所有grid设置成border-box。

2.定义不同屏幕尺寸时grid不同的css class名称，比如:
默认屏幕尺寸时使用:grid-df-1,grid-df-2
屏幕小尺寸使用：grid-sm-1,grid-sm-2
屏幕中等尺寸使用：grid-md-1,grid-md-2
屏幕大尺寸使用：grid-lg-1,grid-lg2

6、用vue-router如何实现前端路由功能

浅析使用vue-router实现前端路由的两种方式 - 西风瘦码 - 博客园www.cnblogs.com

前端路由的原理核心之一：更新视图但不重新请求页面。实现方式有两种：

利用URL中的hash（“#”）
利用History interface在h5中新增的方法

vue-router中的一个参数：mode，可选值有：“hash”“history”“abstract”

const router = new VueRouter({
    mode: 'history',
    routes: [...]
})

vue-router中默认使用hash，不存在兼容问题；

history方法需要调用history.pushState()，存在兼容性问题

如果不考虑兼容问题，pushState比只修改hash值更强大，因为可以设置同源URL

7、对vuex的理解，用vuex有什么好处

对vuex的理解 - guo&qi - 博客园www.cnblogs.com

VUEX是一个专为vue.js应用程序开发的状态管理模式，其五大核心属性：

state：存储数据，存储状态
getter：获取state中的数据
mutation：操作state完成数据更改
action：发布任务，让mutation来操作state
module：分割成模块

数据传递流程：

当组件进行数据修改的时候我们需要调用Dispatch来触发Actions里面的方法。
actions里面的每个方法中都会有一个commit方法，当方法执行的时候会通过commit来触发mutations里面的方法进行数据的修改。　　
mutations里面的每个函数都会有一个state参数，这样就可以在mutations里面进行state的数据修改，当数据修改完毕后，会传导给页面。页面的数据也会发生改变。

vuex的优缺点 - shansally - 博客园www.cnblogs.com

VUEX的优点：

解决了非父子组件的消息传递（将数据存在state中）
减少了AJAX的请求次数，有些情景可以直接从内存中的state获取

缺点：

刷新浏览器，vuex中的state会重新变为初始状态（解决：配合计算属性和sessionStorage实现）

8、vuex是如何实现状态管理的

使用vuex简单的实现系统中的状态管理 - huan的学习记录 - ITeye博客www.iteye.com

在项目中，各个父组件和子组件之间有些状态需要项目共享，比如用户在父组件登录后，在各个子组件中需要获取到登录信息。

state：父子组件中需要共享的状态，即共享的数据，比如用户的登录信息等

action：执行的动作，可以执行一些逻辑的判断，判断最终需要提交的mutation

mutation：可以进行state中的修改，其余地方不建议进行修改

9、有没有用过前端的拦截器

前端拦截器_前端_qq_36709020的博客-CSDN博客blog.csdn.net

vue axios拦截器介绍 - 栖息地 - 博客园www.cnblogs.com

axios拦截器

请求拦截器：在请求发送前进行一些操作，如在请求体加上token
响应拦截器：在接收到响应后进行一些操作，例如在服务器返回登录状态失效，需要重新登录时，跳转到登录页

10、前端在登录功能中如何判断token已经失效

Vue刷新token，判断token是否过期、失效的最简便的方法_javascript_qq_35430000的博客-CSDN博客blog.csdn.net

11、axios和ajax的区别

ajax和axios、fetch的区别www.jianshu.com

axios：是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，它本身具有以下特征：
1.从浏览器中创建 XMLHttpRequest
2.支持 Promise API
3.客户端支持防止CSRF攻击
4.提供了一些并发请求的接口（重要，方便了很多的操作）
5.从 node.js 创建 http 请求
6.拦截请求和响应
7.转换请求和响应数据
8.取消请求
9.自动转换JSON数据

Ajax：传统 Ajax 指的是 XMLHttpRequest（XHR），最早出现的发送后端请求技术，隶属于原始js中，核心使用XMLHttpRequest对象，多个请求之间如果有先后关系的话，就会出现回调地狱。

12、什么是跨域？前端如何解决跨域的问题

什么是跨域？怎么解决跨域问题？_php_L瑜-CSDN博客blog.csdn.net

前端解决跨域问题的8种方案_前端_蜗牛不会跑-CSDN博客blog.csdn.net

跨域，指浏览器不能执行其他网站的脚本，由浏览器的同源策略造成，是浏览器的安全机制。

同源，指域名、协议、端口号相同，其中有一个不同就会造成跨域。

解决办法：（协议和端口造成的跨域问题前台无法解决）

JSONP：JSONP包括两部分（回调函数和数据），回调函数是当响应来到时要放在当前页面被调用的函数，数据是传入回调函数中的json数据，也就是回调函数的参数
CORS
动态创建script：script标签不受同源策略的限制

13、div中的元素如何实现垂直居中

垂直居中www.jianshu.com

垂直居中

不超过一行的文本：height = line-height
多行文本：使用table布局，或自己设置display:table-cell;vertical-align:middle&&父级设置display:table；
block高度已知：top:50%,margin-top:-height/2；
block高度未知：top:50%,tranform:translateY(-50%)；
flex布局：父级设置display:flex;justify-content:center;flex-direction:column;

水平居中

行内元素：inline或line-block的元素，父级设置text-align:center；
块级元素：margin:auto；
多个块级元素：父级display:flex;justify-content:center;或自己inline:block&&父级text-align:center

水平垂直居中（父级relative，子级absolute）

固定宽高：left:50%;top:50%;margin-left:-width/2;margin-top:-height/2;
不固定宽高：left:50%;top:50%;transform:translateX(-50%) translateY(-50%);
flex布局：父级display:flex;justify-content:center;align-items:center;
margin:auto;left:0;right:0;top:0;bottom:0;

14、用递归实现1到100求和

function getSum(n）{
    if（n==1){
        return 1;
    }
    return n+getSum(n-1);
}

15、get和post的区别

Get与Post的区别？（面试官最想听到的答案）_面试_思研之博-CSDN博客blog.csdn.net

get数据获取

post数据创建

put数据修改

delete数据删除

get是从服务器上获取数据，post是向服务器传送数据。Get请求返回request-URL 所指出的任意信息；POST请求用来发送电子邮件、新闻或发送能由交互用户填写的表格。这是唯一需要在请求中发送body的请求。使用post请求时需要在报文首部content-length字段中指出body的长度
get是把参数数据队列加到提交表单的 ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。Post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址，用户看不到这个过程
对应get方式，服务器端用 request.queryString获取变量的值，对于 post方式服务器端用request.form获取提交的数据
Get传送的数据量小，不能大于2KB。Post 传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。用IIS过滤器的只接受get参数，所以一般大型搜索引擎都是用get方式
Get安全性非常低，post安全性相对较高。如果这些数据是中文数据而且是非敏感数据，那么get；如果用户输入的数据不是中文字符而且包含敏感数据，那么还是使用post为好

总结：1.get是获取数据，post是提交数据；2.post安全性比get高；3.get数据显示在地址栏中，post数据在请求头中；4.get传送的数据量不能大于2KB，post默认不受限制；5.服务端用request.queryString获取get变量的值，用request.form获取post的值