Skip to content

S05-02 Library-jQuery-项目:贝壳

[TOC]

接口文档

目录结构

image-20250821141139880

baseURL

js
http://123.207.32.32:9060/beike/api

GET 首页数据

请求方法 : GET

接口地址 : /homePageInfo

必选参数 :

image-20250918150943513

GET 搜索接口

请求方法 : GET

接口地址 : /sug/headerSearch

必选参数 :

js
?cityId=440100&cityName=广州&channel=site&keyword=白云山&query=白云山

GET 热门推荐

请求方法 : GET

接口地址 : /site/rent

必选参数 :

GET 城市数据

请求方法 : GET

接口地址 : /city

必选参数 :

封装网络请求

js
;(function(window, $) {

  function request(config) {
    // 返回一个Promise
    return $.ajax({
      timeout: config.timeout || 5000,
      url: config.url || '',
      method: config.method || 'GET',
      data: config.data || {},
      headers: config.headers || {}
    })
  }

  function get(url, data = {}, config = {}) {
    // 返回一个Promise
    return request({
      url,
      method: 'GET',
      data,
      ...config
    })
  }

  function post(url, data = {}, config = {}) {
    return request({
      url,
      method: 'POST',
      data,
      ...config
    })
  }


  window.HyReq = {
    request,
    get,
    post
  }

})(window, jQuery)

Home

初始化页面

image-20250918174109049

热门推荐

1、基本操作:发送网络请求,并渲染到页面

image-20250918174745752

2、优化:映射请求到的数组为一个简单的数组

image-20250918175003203

3、优化:每次渲染前清除上次渲染内容

image-20250918175228994

4、优化:失去/获取焦点时隐藏/显示搜索提示

image-20250918175650878

image-20250918175648564

5、性能优化:缓存网络请求,同时抽取渲染页面逻辑

image-20250918180843442

搜索房源

网络请求

1、网络请求:发送网络请求获取数据,并渲染页面

image-20250929111727381

2、动态参数:动态设置网络请求参数

image-20250929112155825

image-20250929112521469

聚焦时行为

如果 input 有关键字,搜索关键字;如果 input 没有关键字,搜索热门数据

image-20250929113501069

渲染搜索栏

image-20250929113930129

image-20250929130651917

发送网络请求获取首页数据,渲染搜索栏

image-20250929130950367

搜索栏切换

image-20250929113930129

思路:通过事件委托监听搜索栏点击,在事件处理函数中做以下事情:

  1. 修改 li 的高亮
  2. 移动底部箭头
  3. 修改 placeholder
  4. 获取 li 中绑定的 key

image-20250929115225244

channel 参数

1、搜索栏切换时保存,当前搜索项

image-20250929131451882

2、搜索网络请求时动态设置 channel 参数

image-20250929131621020

防抖优化

image-20250929131918555