前端部分使用功能代码

手撕防抖

html部分:

<input type="text" id="inp">

js代码部分：

 <script>
        function MyDebounce(func,delay){
            let timer = ''
            return function(){
                //console.log(this)
                let t = this
                let a = arguments  //argument 能接取一个函数的所有的参数
                //timer 上一次的定时器
                clearTimeout(timer)
                timer = setTimeout(()=>{
                    //利用apply 修改 search的this指向 
                    func.apply(t,a)
                },delay)            
            }
        }
        let inp = document.getElementById("inp")
        let count = 1
        inp.oninput = MyDebounce(search, 1000) 
        function search(e){
            console.log("事件源",this)
            console.log("事件对象",e)
            console.log('第'+count+"次请求服务器")
            count++
        }
    </script>

手撕节流:

js部分:

  function Mytrottle(func,delay){
            let ctime = 0
            return function(){
                let t = this
                let a = arguments
                //每一次点击 都获取当前的时间戳
                //时间戳 用于事件的判断和比较    3天前的数据 xxx 
                //1238912758912 - 3*24*60*60*1000 
                let ntime = new Date().getTime()
                if (ntime - ctime >= delay) {
                    func.apply(t,a)              
                    ctime = ntime
                }                
            }
        }
        let inp = document.getElementById("inp")
        let count = 1
        inp.oninput = Mytrottle(search, 1000) 
        function search(e){
            console.log("事件源",this)
            console.log("事件对象",e)
            console.log('第'+count+"次请求服务器")
            count++
        }

vue中封装axios请求

首先在项目目录src文件夹下创建一个request文件夹，在内部创建一个request.js文件，代码如下:

import axios from "axios"
const  ins = axios.create({
    baseURL:'请求路径地址',
    timeout:5000,//请求超时时间
})
//设置请求拦截器
ins.interceptors.request.use(config => {
    console.log('请求拦截器执行');
   let token= localStorage.getItem("token")
   if(token){
    config.headers['X-Nideshop-Token']='token'
   }
    return  config;
})
//设置响应拦截器
ins.interceptors.response.use(res=>{
    console.log('响应时拦截');
    return res;
}
)
export default  ins;//对外部开放

在创建一个api.js文件，代码如下：

import request from"./request.js";
export  const BannerList = () =>request.get("/index/index");

小程序中封装数据请求

与vue中封装请求类似，但是小程序中涉及到了跨域，以下代码已解决：
request.js文件夹代码如下:

const baseurl="请求路径";
export default function request(url,params={}){
  return new Promise((resolve,reject)=>{
    wx.request({
      url: baseurl+url,//设置请求路径可以为空
      data:params.data || {},//设置可以传入的默认参数
      header:params.header ||{},//配置请求头，可以为空
      method:params.method ||"GET",//配置请求，默认请求为GET请求
      timeout:5000,//设置请求超时时间
      dataType:"json",
      //成功与失败返回的回调函数
      success:(res)=>{
        console.log(res);
        resolve(res.data)
      },fail:(err)=>{
        console.log(err);
      }
    })
  })
}

api.js文件夹代码如下：

//引入request文件
import request from"./request"
//请求home也数据
export const GetHomeList=  ( )=>request("请求路径下的文件夹目录");

vue解决跨域（代理）

1、（后端）服务器配置CORS(跨域资源共享)

2） （后端）node.js或nginx,反向代理，把跨域改造成同域

3）（前端）将JSON升级成JSONP,在JSON的基础上，利用script 标签可以跨域的特性，加上头设置
以下为代理代码(在vue.config.js文件中配置)：

devServer: {
      proxy: {
        '/test': {//请求前缀，有这个前缀(紧跟端口号)的才会走代理
          target: 'http://localhost:4000',
          pathRewrite:{"^/test":""},//pathRewrite的key写一个正则的匹配条件,匹配以test开头的路径，把test替换为空字符串
          ws: true,//用于支持websocket
          changeOrigin: true//是否对告诉真实服务器真实的源，false不改变源(真实的源) true(改变源)-----用于控制请求头中的host值
        },
        '/demo': {
          target: 'http://localhost:4000',
          pathRewrite:{"^/demo":""}
        }
      }
    }
  };

解决接口返回数据是富文本代码问题

在需要展示内容的div中加入以下代码，此方法只是用于展示，并不能修改接口返回的富文本代码

dangerouslySetInnerHTML={{__html: 接口返回的富文本数据}}