前端页面构建逻辑

1.搜索框里面的逻辑
   

搜索栏  （istext=''有文本和无文本） isshow=false

1.搜索结果           v-if='isshow'     用三个组件显示  如果为真，显示搜索结果，为假下一个判断
2.联想建议           v-else-if='istext' 搜索框是否输入了内容，有内容为真，显示建议组件，为假，                                下一步判断  
3.搜索历史记录    v-else  如果前面2个全为假，这里的组件就显示，默认就是显示历史记录组件
                           在搜索框点击确认，isshow设置为真true,显示搜索结果
                            搜索框聚集焦点的时候，将isshow设置为假

当搜索框输入内容的时候，就将搜索框的内容，组件传值传给子组件，子组件随时监听数据的变化，watch:{ searchText:{handler(){},immediate:true}}  immediate:true 这个非常重要，页面在回调监听的开始之后立即调用
缺点就是，每次数据变化都会立即发送数据请求，浪费资源，解决方法
使用函数防抖，就是一秒或者200毫秒之后在触发，使用lodash里面的debounce方法
watch：{
  searchText:{
    handler: debounce(function(value){
                      数据处理逻辑发送请求
    },200)
}
}

当搜索框输入内容时候，下面的搜索记录里面包含搜索内容的文本高亮显示
例如输入 he 搜索记录里面有hello ，he就高亮显示，
方法：将要修改的he 文本添加html样式，使用v-html=函数（文本）
在函数里面把这个文本修改为html标签
text 是数据请求回来数据里面里面显示的每一条数据
函数（text）{
  const aa = `<span class='color:red'>${搜索框中的内容}</span>`
  字符串的替换
 动态修改text 的值，使用原生的正则表达式
 const reg = new RegExp(搜索框中的内容，‘gi’)全局忽略大小写
  return text.replace(reg，aa)  replace 不会修改原来的数据
}
 

2.数据请求失败

当发送数据请求的时候，请求的路径没有错误，但是报错了，有一种可能性就是请求的参数需要id,这个id超范围了，数字的范围是2个23次方，超出之后就不精确了，后几位就会变化，那么就会出错，解决的方法：
使用包解决
npm i json-bigint
var JSONbig = require('json-bigint')
JSONbig.parse(数据)  解析成原来的数据，不变格式
JSONbig.stringfy(数据)  整成json格式

axios 里面的transformResponse:[functin(data){return JSONbig.parse(data)}]
专门用来处理后端返回的数据，处理格式的，自定义后端返回的原始数据，先将数据处理好在给前端使用，就不会报错了

3.点击图片放大预览

注意点：1.使用vant 组件自带的图片预览，要注意的是，当数据请求成功之后，不会立马渲染视图，可以使用定时器 setTimeout(()=>{this.previewImage()},0) 0秒之后触发，调用自写的函数
2.要用v-html=' 里面是包含文本和标签的数据信息'  ref='article'绑定实例，这个标签里面包含所有的文本内容和图片等资源，在函数里面，var aa = this.$refs['article']
const tupian = []
const imgs = aa.querySelectorAll(‘img’)  得到所有的img标签
imgs.forEach((img)=>{
         tupian.push(img.src)
         img.onclick = ()=>{
                图片点击的时候，使用vant自带的图片点击预览组件
                ImagePreview({
                    images,startPostion:1  图片的起始位置
            
              })
}
})  遍历所有的图片标签，将里面的src路径添加到图片列表中

4.点击按钮节流请求

点击按钮进行发送数据请求的时候，为了防止一直点击一直发送请求，

可以进行控制，选择一个属性值，当点击完，没有得到数据，没有请求成功之前，设置按钮禁用，不允许点击，只有得到响应之后在进行true  false 的切换

5.父子组件传值

当子组件使用this.$emit('事件名'，传参) 向父组件发布事件的时候  父组件使用 @事件名=‘$event’
模板中的$event 是传过来的事件的参数，当传递给子组件的数据既要使用又要修改的时候，、
可以使用v-model改写   默认绑定的是value值，监听的是input值
子组件 this.$emit('input')，

在props: 要设置value:{type:string,requried:true} 设置value的值，子组件才可以使用
与父组件没有关系，只在子组件里面修改

v-model 不是一定要绑定input 事件 value 值，可以进行修改官网上有

默认值 default 1 ""
如果要给对象和数组设置默认值，要 default ：function（）{ return {}} 或者 return[]
 

max-width: unset; 取消掉最大的限制宽度

如果样式不起作用 使用  /deep/  深度监听解决

 flex-shrink: 0; 让盒子参与宽度的计算 flex 不会压缩这个盒子 ，默认是1

6.时间处理

  1小时前 显示这种相对时间 使用第三方处理时间的库  day.js  moment.js

  es6的里面 要使用 import    github里面是require()

  import dayjs from 'dayjs'

  修改过来

  加载中文的语言包  dayjs.locale('zh-cn')

  有个插件 relativeTime 处理成相对时间

  import relativeTime from 'dayjs/plugin/relativeTime'

  使用插件  dayjs.extend(relativeTime)

  import vue from 'vue'

  处理时间 这种 可以使用vue.filter('aa',(value)=>{return dayjs().to(dayjs(value))}) 过滤器，因为其他页面也有可能会用到 使用管道运算

现在的时间相对于 value 时间过去了多久

7.如果ui没有给标题段落等格式，包可以自动生成样式

npm i github-markdown-css  然后引入，也可以只下载他的css样式，放到文件中，引入使用，把第一个类名，添加到要格式化样式的那个最大的盒子上面包裹

8.  图文排版

的时候，将可能出现的样式布局都写出来，用v-if 来根据情况进行筛选显示

9.  <meta name='referrer' content='no-referrer'> referrer指的是当用户发数据请求的时候，有可能里面有一些数据资料例如图片是网上的或者爬虫拿到的，发请求的时候别人不认识你当前的网站，就会报错，位置在请求头里面携带这个referr,解决方法就是 设置 meta 里面设置，让不发送这个referr

 &：not（：last-child）{padding-right:4px} 不包括最后一个外边距

token 设置在vuex 中 同时设置在本地

  单位 px  rem  

  vh（是当前视口的大小，可以是vw宽度或者vh高度）

  要解决的问题：在一个盒子里面数据加载了很多的时候，向下滑动到一个位置，当再次返回的时候，能够继续保持在这个位置，使用vh单位，测出具体的高度大小

安装vant 失败 执行 npm i vant@latest-v2 -S --legacy-peer-deps

适配rem  npm i amfe-flexible -D --legacy-peer-deps    

       import "amfe-flexible"

将px 转rem   npm i postcss-pxtorem -D --legacy-peer-deps

px  rem 适配