web学习笔记（六十七）项目总结

目录

1.使用弹性布局来实现元素水平垂直居中

2. 实现vant组件样式穿透 

 3.通过请求返回的数据动态设置类名

 4.设置元素溢出隐藏为省略号

5. z-index的使用

 6.利用弹性布局实现横向滚动 

7.盒子内的两个元素无法实现底部对齐

 8.如何设置文本显示两行，且在第二行结尾处实现溢出隐藏的省略号

 9.如何实现按下回车触发对应的事件

10.如何解决跨域的问题

11.接口返回数据是数组和对象的区别

12.如何实现点击商品跳转到对应的页面

1.使用弹性布局来实现元素水平垂直居中

 display: flex;
  justify-content: center;
  align-items: center;

2. 实现vant组件样式穿透 

通常我们组件的标签名就是默认的样式名，可以拿来进行组件穿透，或者在控制台进行检查，然后复制类名进行样式穿透，如果设置样式穿透不起效的话可以尝试在外层再包裹父元素的样式穿透。

::v-deep(.van-sidebar-item) {
  height: 1.3333rem;
  width: 2.2933rem;
  color: #333;
  font-size: 0.3467rem;
}

 3.通过请求返回的数据动态设置类名

我们可以通过判断请求返回数据的某一项是否等于某个值来设置类名。

      <div :class="{
                  Receivediv: true,
                  isvip: item.receive_type == 4,
                  isuse: item.is_use == 1
                }"></div>

 4.设置元素溢出隐藏为省略号

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

5. z-index的使用

z-index需要搭配定位使用，通常搭配相对定位使用。

.bardiv {
  position: relative;
  z-index: 3000;
}

 6.利用弹性布局实现横向滚动 

.couposdiv {
  width: 9.4667rem;
  height: 1.6267rem;
  display: flex;
  flex-wrap: nowrap;//不换行
  overflow-x: scroll;//x方向滚动
}

7.盒子内的两个元素无法实现底部对齐

在排版时如果个别元素总是无法到达理想的位置，此时可以使用transform: translateX(-0.2rem) translateY(0.2667rem);进行微调。

 8.如何设置文本显示两行，且在第二行结尾处实现溢出隐藏的省略号

   .textdiv {
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      word-wrap: break-word;
      word-break: break-all;
      white-space: normal;
      overflow: hidden;
      font-size: 14px;
      color: #282828;
    }

 9.如何实现按下回车触发对应的事件

<div  @keydown.enter="searcheventone"></div>
  <!-- 当需要阻止冒泡时可以直接在时间名后加.stop -->
<div  @keydown.enter.stop="searcheventtwo"></div>

10.如何解决跨域的问题

在vite.config.js页面中配置跨域代码。

server: {//这是一个对象，用于配置服务器的选项。
        proxy: {// 这是服务器代理的配置项，用于指定代理规则。
        //   /api表示服务器要监听的前端请求接口路径，监听的是路径开头，不包含域名和端口。整体意思是：代理服务器监听接口路径是否以/api开头的，是就走这个代理服务器，解决跨域。不是以/api开头就不走代理服务器
            // 浏览器发请求，如果没有携带域名，默认浏览器会把当前服务器域名加上，当前域名是http://localhost::5173
          "/api": {//这是一个路径匹配规则，表示所有以"/api"开头的请求都将被代理到目标服务器。
            target: "https://v5.crmeb.net/",//目标域名：代理服务器localhost::5173换成target域名，服务器之间的请求时不存在跨域的。   这是目标服务器的地址，所有匹配到的请求将被转发到这个地址。
            changeOrigin: true,//允许切换域名   这个选项指定是否改变请求头中的"Origin"字段为目标服务器的地址。这通常用于解决跨域请求时的一些问题，允许请求头中的Origin与目标服务器的地址不一致。
            }
        },
      }

11.接口返回数据是数组和对象的区别

（1）当接口返回数据是数组时可以用v-for进行遍历，当返回数据是对象时也可以进行遍历，注意当遍历对象时就不可以写index了，需要遍历key，然后用来绑定key。

（2）当返回数据是对象在页面使用时直接打点调用对应属性即可，不需要再遍历使用item来进行操作（会报错）。

12.如何实现点击商品跳转到对应的页面

这个地方要用到路由传参，有两种方式，可以去复习一下笔记六十四，这里我们用到的是路由传参query。首先在首页给商品设置点击事件

import { useRouter } from 'vue-router'
// useRouter 跳转页面 useRoute传参
const router = useRouter() //获取路由对象。调用方法跳转
const getDetail = (id) => {
  router.push(`/derail?id=${id}`)
}

然后在商品详情页通过query来获取对应的id，通过id再去发请求。 

import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.query.id)