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

最新推荐文章于 2022-12-08 16:06:58 发布
最新推荐文章于 2022-12-08 16:06:58 发布
阅读量135 收藏
点赞数
文章标签： 4 grid中添加图片不居中
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_34254848/article/details/112591526
版权

ccaf4f36bb4030add06c4b7f30c23c0c.png

1、项目介绍

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

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

需要在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
c2ae1f7bf264e40fa50abd26286591f8.png
  • 简易场景实现自适应：浮动、页面居中、元素宽度设置百分比自动匹配
  • 复杂场景需求：也多套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
17cf0c971582350c3d9462986c2140e9.png

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
569ffe28078fd267b4abe49a9dcb028f.png

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

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

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

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

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

前端拦截器_前端_qq_36709020的博客-CSDN博客​blog.csdn.net
970cfc1dc09577dca0c7346afc801ee3.png
vue axios拦截器介绍 - 栖息地 - 博客园​www.cnblogs.com

axios拦截器

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

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

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

11、axios和ajax的区别

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

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
b822830a71dd8aa57a0cc7d17683aa5d.png
前端解决跨域问题的8种方案_前端_蜗牛不会跑-CSDN博客​blog.csdn.net
b822830a71dd8aa57a0cc7d17683aa5d.png

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

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

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

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

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

垂直居中​www.jianshu.com
5eadac7cbf90719127623404387f244b.png

垂直居中

  • 不超过一行的文本：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
b822830a71dd8aa57a0cc7d17683aa5d.png

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的值

魏金华
关注
2020.10.20英语前端电话面试总结
爱玲姐姐的博客
10-24 4600
2020.10.20英语前端电话面试总结 人生第二次前端面试，这次面的这个前端岗位是需要有很好的英语口语沟通能力的，我英语很差，面试官让我用英语自我介绍几句就说了解到了我的水平了，嘤嘤嘤···所以英语这方面就没什么好说的了，我也知道自己英语差~ 所以还是记录一下问到的技术方面的题目吧 1. 对函数式编程的理解 【我的回答】：函数式编程是一种编程范式，相同的输入永远得到相同的输出，不会产生副作用。 【面试官】：嗯··· （我答得不是很全面） 参考答案： 阮一峰老师《函数式编程初探》： "函数式编程"是一种"
2021-6月面试总结-vue，uniapp，小程序，h5，更新中
m0_67266787的博客
02-24 826
**一、**vue 2.6.11 vue****页面的生命周期？ 总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。 创建前/后： 在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在∗∗created∗∗阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在**created**阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在∗∗cre
Grid图片加载
dangyongping
04-18 1371
Glide是一款图片加载框架，可以在Android平台上以简单的方式加载和展示图片。 ? 1 2 3 dependencies {   compile 'com.github.bumptech.glide:glide:3.7.0' } 在清单文件中加入权限
bootstrap经典网页布局_用Grid和Flex，十分钟快速制作登陆网页
weixin_39586683的博客
11-23 282
全文共3787字，预计学习时长8分钟制作登陆引导页的模板和教程非常少，而且大多数都过于复杂或是添加了太多设计(如多个页面和表格等)，但多数情况下一些非常简洁的设计就足矣。本文将介绍在不用老式CSS库(如 bootstrap)的情况下，如何以CSS(Grid和Flex)为主要工具创建响应式用户界面。那么就开始吧！本文所要构建引导页的基本布局主要聚焦于一些基础部件，以便读者自己制作引导页时可以直接从中...
css 图片自适应_一行 CSS 代码实现响应式布局 使用 Grid 实现的响应式布局
weixin_39621774的博客
11-29 404
在这篇文章中，我将教你如何使用 CSS Grid(网格) 布局来创建一个超酷的图像网格，它会根据屏幕的宽度改变列的数量，以实现响应式布局。而这篇文章中最漂亮的部分是：添加一行 CSS 代码即可实现响应式布局。这意味着我们不必通过丑陋的类名(即col-sm-4，col-md-8)来混淆 HTML ，或者为每一个屏幕尺寸创建媒体查询。现在就让让我们开始吧！设置对于本文，我们将继续使用5分...
小激动！！！van-grid最后一行居中显示
最新发布
weixin_48451943的博客
12-08 467
事情是这样的，有一个小需求，在van-grid的基础上，对每一行的小格子进行居中处理。所以可以直接使用justify-content: center;对于和column-num成倍数关系的item，是不受影响的。由于van-grid内部是display: flex;这样，最后就会空出一小格子。问了指导老师，新知识get。
码匠编程：CSS让元素绝对居中，你知道几种方法？
web前端技术交流群：457188470
11-06 552
经常碰到有同学在问，如何让一个元素上下左右都居中呢？ 相信大家在面试的时候也会经常碰到这个问题，一下列出来几种方式以供大家参考，如有不足之处，请大家补充 问题描述： 给定两个元素，这两个元素是父子级关系。并且两个元素的大小都是不确定的，那么这时候如何让子级在父级中上下左右都居中？（暂且设定父级比子级要大一些） 第一种：利用定位 先上代码及效果： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT
整理大厂高频核心前端面试题，五万多字，面试必考
猫老板的豆
09-13 2547
如果 Vue 组件中的 data 是个对象，那么所有复用这个组件的地方，都在使用这个组件里面唯一的一个 data，所有使用组件的地方的 data 都会指向栈内这一个 data 的地址，那么会造成。等待执行栈和微任务队列都执行完毕才会执行，并且在执行完每一个宏任务之后，会去看看微任务队列有没有新添加的任务，如果有，会先将微任务队列中的任务清空，才会继续执行下一个宏任务。异步：是指不进入主线程，而进入任务队列的任务，只有任务队列通知主线程，某个异步任务可以执行了，该任务才会进入主线程。
CSS不限宽高的居中方式（9种最全）
qq_44947631的博客
07-31 876
前言 垂直居中，在 CSS 中是一个老生常谈的问题，面试的时候也会时常被提及。所以，今天我们就来聊聊 9 种不同的居中方法。有常见的 flex、transform、absolute 等等。也有 CSS3 的网格布局。还有伪元素的方法，是的，你没有看错，::after 和 ::before 也可以实现居中。 9 种方法呈现 1、flex 大家的第一反应，可能就是 flex 了。因为它的写法够简单直观，兼容性也没什么问题。是手机端居中方式的首选。 <div class="wrapper flex-cent
css grid随页面大小_Grid 布局学习
weixin_39883260的博客
11-29 323
Grid 布局学习Grid布局是微软在2010年提出来的一种新的布局方式，到2016年的时候提交了该布局的草案，经过这三四年的发展，grid布局慢慢变的成熟，兼容性也越来越好，可以适当学起来用起来了本次学习的几个点：CSS布局发展过程Grid布局的优点以及相关术语介绍Grid布局的使用注意事项、备注参考资料在我们开始学习前，先了解下它能用在什么情况下例如这个页面就是用grid布局的:Grid布局网...
CSS篇 -- 居中和Grid布局
u012149906的博客
08-08 7655
水平垂直居中：法①：绝对定位+margin:auto position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 200px; height: 200px; margin: auto; 法②:display:inline-block 和vertical-align:middle和伪元素:after或:before .conta...
小程序解决icon图片与文字不居中问题
hjj_flowers的博客
12-12 4871
在项目中其实这种小问题很常见，那就是图片和文字不是自己想要的那种居中效果，经常一上一下的很难看，这当然是不行的了，所以该怎么解决呢？使用flex布局可以解决这个问题。关键就在 align-items: center 1.wxml: <!-- 投票 --> <view class="vote" style="background:pink"> <v...
HTMLCSS学习笔记（二十三）GRID布局
关注我！带你一路 "狂飙" 到底！
11-24 484
则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。有一定的相似性，都可以指定容器内部多个项目的位置。划分网格的线，称为"网格线"。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。6、设置单元格内容在单元格内 水平 | 垂直 的对齐方式。7、设置整个内容区域在容器里面的水平 | 垂直 对齐方式。容器里面的水平区域称为"行"，垂直区域称为"列"。行和列的交叉区域，称为"单元格"。
WPF Grid内控件布局方法
Stay Hungry
06-23 5948
代码如下： window下默认grid，gird有两行，然后分别加了一个button 和一个textblock public MainWindow() { InitializeComponent(); //为gird添加两行 grid.RowDefinitions.Add(new RowDefiniti...
C++ 入門指南 - QGridLayout
ZXL工作室
06-30 2211
C++ 入門指南 - QGridLayout QGridLayout 的作法是把視窗分成一個一個的格子 (grid) ，然後把小工具 (widget) 放到選定的格子中，可依視窗元件的大小設定佔用的格子數 當建立 QGridLayout 排版物件 (object) 後，利用 addWidget() 方法加入小工具物件時，第一個參數 (parameter) 為小工
布局篇-Grid布局
linshixina的专栏
08-26 911
特点： 1）可以定义任意数量的行和列 2）行的高度和列的宽度可以使用绝对值、相对比例或自动调整的方式，可设置最大值和最小值 3）内部元素可以设置自己所在的行、列，还可以设置跨越几行、几列 4）可以设置内部元素的对齐方向 Grid类具有ColumnDefinitions和RowDefinitions两个属性，它们分别是ColumnDefinition和RowDefinition的集
Extjs4 Grid分页与动态刷新功能实现
"本篇文章主要介绍了如何在Extjs4中实现Grid的分页功能以及如何实现自动刷新。首先，我们构建了一个带有视口（Viewport）布局的应用，其中包含了北部和南部的固定区域，以及一个中心的tabpanel用于展示多个内容区域...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值