S14-06 SSR-Next13-项目：mr-ssr-next13-ts-music-mall

[TOC]

接口文档

TIP

baseURL：http://codercba.com:9060/music-next/api

GET 搜索建议

说明 : 调用此接口 , 获取首页搜索建议

请求方法 : GET

接口地址 : /searchsuggest/get

必选参数 : 无

调用例子 : baseURL + /searchsuggest/get

json

{
    "code": 200,
    "data": {
        "id": 30001,
        "defaultKey": "蓝牙耳机",
        "configKey": [
            {
                "1": "迪士尼Q2"
            },
            {
                "2": "日常元素"
            }
        ]
    }
}

GET 首页信息

说明 : 调用此接口 , 获取首页商品信息

请求方法 : GET

接口地址 : /home/info

必选参数 : 无

调用例子 : baseURL + /home/info

json

{
    "code": 200,
    "data": {
        "banners":[
            
        ],
        "categorys":[
            
        ]
    }
}

GET 热门商品

说明 : 调用此接口 , 获取热门商品

请求方法 : GET

接口地址 : /hotproduct_v2/gets

必选参数 : 无

调用例子 : baseURL + /hotproduct_v2/gets

json

{
    "code": 200,
    "data": {
        "count": 8,
        "hasMore": false,
        "hotProduct"：[
        
        ]
    }
}

GET 所有商品

说明 : 调用此接口 , 获取所有商品

请求方法 : GET

接口地址 : /allProduct/gets

必选参数 : 无

调用例子 : baseURL + /allProduct/gets

json

{
    "code": 200,
    "data": {
        "count": 150,
        "allProduct"：[
        ]
    }
}

GET 商品详情信息

说明 : 调用此接口 , 获取商品详情信息

请求方法 : GET

接口地址 : /special/getdetail

必选参数 :

json

specialTopicId: 商品id （ 目前只有 55001 和  68001 两个商品的详情 ）

调用例子 : baseURL + /special/getdetail?specialTopicId=68001

json

{
    "code": 200,
    "data": {
        "id": 55001,
        "name": "热销爆品",
        "linkedUrl": null,
        "specialTopicProducts":[]，
        "products"： [],
         .....
    }
}

POST 搜索商品

说明 : 调用此接口 , 获取商品详情信息

请求方法 : POST

接口地址 : /store/api/product/searchl

请求头信息 :

json

{
   "Content-Type": "application/x-www-form-urlencoded",
}

必选参数 :

json

limit: 60
offset: 0
key: 真无线

调用例子 : baseURL + /special/getdetail?specialTopicId=68001

json

{
    "code": 200,
    "data": {
        "id": 55001,
        "name": "热销爆品",
        "linkedUrl": null,
        "specialTopicProducts":[]，
        "products"： [],
         .....
    }
}

环境搭建

项目初始化

注意： 不同与nuxt，next的项目可以在中文路径中创建。

pnpm dlx create-next-app@latest

最新版(next15)

集成-样式

~~依赖包：~~

normalize.css
- 安装：pnpm i normalize.css
sass
- 安装：pnpm i sass
classnames
- 安装：pnpm i classnames

~~配置：~~

在tsconfig.json中通过baseUrl和paths配置@别名

~~自定义全局样式：~~

normalize.css

1、安装依赖包

2、在pages/_app.tsx中全局引入 normalize.css

variables.scss

1、定义全局样式变量

2、在global.scss中使用@import导入样式

global.scss

1、定义全局样式global.scss

2、在pages/_app.tsx中导入，使全局有效

SEO

可以在_document.js中添加Head，并在其中进行SEO配置

集成-RTK

Redux Toolkit 是官方推荐的编写 Redux 逻辑的方法。

在前面我们学习Redux的时候应该已经发现，redux的编写逻辑过于的繁琐和麻烦。
并且代码通常分拆在多个文件中（虽然也可以放到一个文件管理，但是代码量过多，不利于管理）；
Redux Toolkit包旨在成为编写Redux逻辑的标准方式，从而解决上面提到的问题；
在很多地方为了称呼方便，也将之称为“RTK”；

安装

~~依赖包：~~

next-redux-wrapper：将服务端redux存储的数据同步一份到客户端上。
- 安装：pnpm i next-redux-wrapper
- 可以避免在访问服务器端渲染页面时store的重置
- 该库提供了HYDRATE调度操作
  - 当用户访问动态路由或后端渲染的页面时，会执行Hydration来保持两端数据状态一致
  - 比如：每次当用户打开使用了getStaticProps或getServerSideProps函数生成的页面时，HYDRATE将执行调度操作。
@reduxjs/toolkit、react-redux
- 安装：pnpm i @reduxjs/toolkit react-redux

集成过程

1、创建store：configureStore()

  import { configureStore } from '@reduxjs/toolkit'
  import counterReducer from './features/counter'
  import homeReducer from './features/home'

+  const store = configureStore({
+    reducer: {
+      counter: counterReducer,
+      home: homeReducer
+    }
+  })

  export default store

2、创建reducer片段：createSlice()

  import { createSlice } from "@reduxjs/toolkit";

+  const counterSlice = createSlice({
+    name: 'counter',
+    initialState: {
+      counter: 100
+    },
+    reducers: {
+      addCounter(state, action) {
+		 state.counter += action.payload
+      },
+      subCounter(state, action) {
+        state.counter -= action.payload
+      }
+    }
+  })

+  export const { addCounter, subCounter } = counterSlice.actions
+  export default counterSlice.reducer

3、Next：添加 HYDRATE 操作，保证服务端和客户端数据的一致性

4、Next：通过 createWrapper() 方法包裹一个通过函数返回的store并导出

5、TS类型：为模块的initialState添加TS类型

6、TS类型：为store的dispatch、state添加TS类型

7、在_app.tsx中挂载store到app上

8、在组件中使用 useSelector() 获取store中的数据

6、在组件中使用 useDispatch() 修改store中的数据

7、效果

异步操作

1、在home.ts中发送异步请求

+  export const fetchHomeMultidataAction = createAsyncThunk('home/multidata', async () => {
    const res = await axios.get('http://123.207.32.32:8000/home/multidata')
    return res.data.data
  })

  const homeSlice = createSlice({
    name: 'home',
    initialState: {
      banners: [],
      recommends: []
    },
+    extraReducers(builder) {
+      builder
+        .addCase(fetchHomeMultidataAction.fulfilled, (state, { payload }) => {
          state.banners = payload.banner.list
          state.recommends = payload.recommend.list
        })
+        .addCase(fetchHomeMultidataAction.rejected, (state) => {
          console.log('fetchHomeMultidataAction.rejected')
        })
    }
  })