微信小程序 ---- 慕尚花坊 商品管理

news2024/9/23 7:27:13

商品管理

01. 配置商品管理分包

思路分析：

随着项目功能的增加，项目体积也随着增大，从而影响小程序的加载速度，影响用户的体验。

因此我们需要将 商品列表 和 商品详情 功能配置成一个分包，

当用户在访问设置页面时，还预先加载 商品列表 和 商品详情 所在的分包

在分包后，通过查看代码依赖查看是否分包完成

📌 注意事项：

  1. 在配置好 商品列表 和 商品详情 的分包以后，需要更改页面中的跳转路径
  2. PS：可以利用项目全局搜索的功能，进行批量更改

实现步骤：

  1. 在 modules 目录下创建 goodModule 文件夹，用来存放商品管理分包
  2. 在 app.json 的 subpackages 进行商品管理分包配置
  3. 在 app.json 的 preloadRule 进行商品管理分包配置

落地代码：

➡️ app.json

{
  "subPackages": [
    {
      "root": "modules/settingModule",
      "name": "settingModule",
      "pages": [
        "pages/address/add/index",
        "pages/address/list/index",
        "pages/profile/profile"
      ]
    },
+     {
+       "root": "modules/goodModule",
+       "name": "goodModule",
+       "pages": ["pages/goods/list/list", "pages/goods/detail/detail"]
    }
  ],
  "preloadRule": {
    "pages/settings/settings": {
      "network": "all",
      "packages": ["settingModule"]
    },
+     "pages/category/category": {
+       "network": "all",
+       "packages": ["goodModule"]
+     }
  }
}

02. 封装商品模块接口 API

思路分析：

为了方便后续进行商品管理模块的开发，我们在这一节将商品管理所有的接口封装成接口 API 函数

落地代码：

➡️ api/goods.js

import http from '../utils/http'

/**
 * @description 获取商品列表
 * @return Promise
 */
export const reqGoodsList = ({ limit, page, ...reset }) => {
  return http.get(`/mall-api/goods/list/${page}/${limit}`, reset)
}

/**
 * @description 获取商品详情
 * @param {*} goodsId 商品Id
 * @returns Promise
 */
export const reqGoodsInfo = (goodsId) => {
  return http.get(`/mall-api/goods/${goodsId}`)
}

03. 商品列表-准备列表请求参数

思路分析：

当用户点击了商品分类以后，需要获取对应分类的商品列表信息，因此我们需要先获取到该分类的 id，只要获取到 id 以后，才能向服务器获取对应分类的商品列表信息。同时我们需要查看接口文档，查看是否需要使用其他参数，我们提前将参数准备好。

首先熟悉接口文档：获取商品分页列表

参数名称参数说明是否必须
limit每页记录数true
page当前页码true
category1Id一级分类的 Id (从首页导航分类区域点击进入)false
category2Id二级分类的 Id (从分类页面点击进入二级分类进入)false

通过接口文档得知，我们需要以上的参数，我们先将参数提前声明，然后在发起请求获取商品列表的数据

实现步骤：

  1. 在商品列表的 data 字段中，根据接口文档，定义商品列表接口需要使用的字段
  2. 在商品列表的 onLoad 钩子函数中接收请求的参数，并将请求参数进行合并

落地代码：

➡️ /modules/goodsModule/pages/list/list.js

Page({
  // 页面的初始数据
  data: {
    goodsList: [], // 商品列表数据
    isFinish: false, // 判断数据是否加载完毕

+     // 接口请求参数
+     requestData: {
+       page: 1, // 页码
+       limit: 10, // 每页请求多少条数据
+       category1Id: '', // 一级分类 id
+       category2Id: '' // 二级分类 id
+     }
  },

+     // 生命周期函数--监听页面加载
+     onLoad(options) {
+       // 接收传递的参数
+       Object.assign(this.data.requestData, options)
+     }
})

04. 商品列表-获取商品列表数据并渲染

思路分析：

在准备商品列表的请求参数以后，

在页面调用 API 函数获取商品列表的数据，在获取到数据以后，使用后端返回的数据对页面进行渲染。

实现步骤：

  1. 在 /pages/goods/list/list.js 中导入封装好的获取商品列表的 API 函数
  2. 页面数据在页面加载的时候进行调用，在 onLoad 钩子函数中调用 reqGoodsList 方法
  3. 在获取到数据以后，使用后端返回的数据对页面进行渲染

落地代码：

➡️ /modules/goodsModules/pages/list/list.js

+ import { reqGoodsList } from '../../../../../api/good'

Page({
  // 页面的初始数据
  data: {
    goodsList: [], // 商品列表数据
+     total: 0, // 数据总条数
    isFinish: false, // 判断数据是否加载完毕
    // 接口请求参数
    requestData: {
      page: 1, // 页码
      limit: 10, // 每页请求多少条数据
      category1Id: '', // 一级分类 id
      category2Id: '' // 二级分类 id
    }
  },

+   // 获取商品列表的数据
+   async getGoodsList() {
+     // 调用 API 获取数据
+     const { data } = await reqGoodsList(this.data.requestData)
+ 
+     // 将返回的数据赋值给 data 中的变量
+     this.setData({
+       goodsList: data.records,
+       total: data.total
+     })
+   },

  // 生命周期函数--监听页面加载
  onLoad(options) {
    // 接收传递的参数
    Object.assign(this.data.requestData, options)

+    // 获取商品列表的数据
+    this.getGoodsList()
  }
})

➡️ /modules/goodsModule/pages/list/list.wxml


<view class="container">
  <!-- 商品列表功能 -->
+   <view class="goods-list" wx:if="{{ goodsList.length }}">
+     <block wx:for="{{ goodsList }}" wx:key="id">
+       <goods-card goodItem="{{ item }}"></goods-card>
+     </block>

    <!-- 数据是否加载完毕 -->
    <view class="finish" hidden="{{ !isFinish }}">数据加载完毕~~~</view>
  </view>

+   <!-- 商品为空的时候展示的结构 -->
+   <van-empty wx:else description="该分类下暂无商品，去看看其他商品吧～">
+     <van-button round type="danger" class="bottom-button" bindtap="gotoBack">
+       查看其他商品
+     </van-button>
+   </van-empty>
</view>

05. 商品列表-实现上拉加载更多功能

思路分析：

当用户从下向上滑动屏幕时，需要加载更多的商品数据。

首先需要在 .js 文件中声明 onReachBottom 方法监听用户是否进行了上拉

当用户上拉时，需要对 page 页码进行加 1，代表要请求下一页的数据

当参数发生改变后，需要重新发送请求，拿最新的 page 向服务器发送请求获取数据。

在下一页的商品数据返回以后，将最新的数据和之前的数据进行合并

实现步骤：

  1. list.js 文件中声明 onReachBottom 事件处理函数，监听用户的上拉行为
  2. 在 onReachBottom 函数中加 page 进行加 1 的操作，同时发送请求获取下一页数据
  3. 在 getGoodsList 函数中，实现参数的合并

落地代码：

➡️ /modules/goodsModule/pages/list/list.js

import { reqGoodsList } from '../../../api/goods'

Page({

  // coding...

  // 获取商品列表的数据
  async getGoodsList() {
    // 调用 API 获取数据
    const { data } = await reqGoodsList(this.data.params)

    // 将返回的数据赋值给 data 中的变量
    this.setData({
+       goodsList: [...this.data.goodsList, ...data.records],
      total: data.total
    })
  },

  // coding...

+   // 监听页面的上拉操作
+   onReachBottom() {
+     let { page } = this.data.requestData
+ 
+     // 页码 + 1
+     this.setData({
+       requestData: { ...this.data.requestData, page: page + 1 }
+     })
+ 
+     // 重新发送请求
+     this.getGoodsList()
+   }

})

06. 商品列表-判断数据是否加载完毕

思路分析：

上一节我们实现了上拉加载功能。

在这一节，我们需要相关的优化：判断数据是否已经加载完，如果加载已经加载完毕，需要给用户进行提示。

如何判断数据是否加载完成 ❓

可以使用后端返回的 total 和 goodsList 进行对比，如果 total 大于等于 goodsList ，说明商品列表数据没有加载完，可以继续上拉加载更多。

在模板中，我们通过 total 和 goodsList 进行对比，决定是否展示对应的文案

实现步骤：

  1. 在数据返回以后，将数据中的 total 赋值给 data 中的变量 total
  2. 在 onReachBottom 中进行 total 和 goodsList 进行对比
  3. 模板中使用 total 和 goodsList 进行对比

落地代码：

➡️ /modules/goodsModule/pages/list/list.js

import { reqGoodsList } from '../../../api/goods'

Page({
    
  // coding...
    
  // 监听页面的上拉操作
  onReachBottom() {
+     // 从 data 中解构数据
+     const { total, goodsList, requestData } = this.data
+     let { page } = requestData
+ 
+     // 判断数据是否加载完毕
+     if (total === goodsList.length) {
+       // 如果相等，数据数据加载完毕
+       // 如果数据加载完毕，需要给用户提示，同时不继续加载下一个数据
+       this.setData({
+         isFinish: true
+       })
+ 
+       return
+     }

    // 页码 + 1
    this.setData({
      requestData: { ...this.data.requestData, page: (page += 1) }
    })

    // 重新发送请求
    this.getGoodsList()
  }
})

07. 商品列表-节流阀进行列表节流

在用户网速很慢的情况下，如果用户在距离底部来回的进行多次滑动，可能会发送一些无意义的请求、造成请求浪费的情况，因此需要给上拉加载添加节流功能。

我们使用节流阀来给商品列表添加节流功能。

在 data 中定义节流阀状态 isLoading，默认值是 false。

在请求发送之前，将 isLoading 设置为 true，表示请求正在发送。

在请求结束以后，将 isLoading 设置为 false，表示请求已经完成。

在 onReachBottom 事件监听函数中，对 isLoading 进行判断，如果数据正在请求中，不请求下一页的数据。

落地代码：

➡️ /modules/goodsModule/pages/list/list.js

import { reqGoodsList } from '../../../../../api/good'

Page({
  // 页面的初始数据
  data: {
    goodsList: [], // 商品列表数据
    isFinish: false, // 判断数据是否加载完毕
+     isLoading: false, // 判断数据是否记载完毕
    total: 0, // 列表总数据量
    // 接口请求参数
    requestData: {
      page: 1, // 页码
      limit: 10, // 每页请求多少条数据
      category1Id: '', // 一级分类 id
      category2Id: '' // 二级分类 id
    }
  },

  // 获取商品列表的数据
  async getGoodsList() {
+     // 数据真正请求中
+     this.data.isLoading = true

    // 调用 API 获取数据
    const { data } = await reqGoodsList(this.data.requestData)

+     // 数据加载完毕
+     this.data.isLoading = false

    // 将返回的数据赋值给 data 中的变量
    this.setData({
      goodsList: [...this.data.goodsList, ...data.records],
      total: data.total
    })
  },

  // 监听页面的上拉操作
  onReachBottom() {
    // 从 data 中解构数据
    const { total, goodsList, requestData, isLoading } = this.data
    let { page } = requestData

+    // 判断是否加载完毕，如果 isLoading 等于 true
+    // 说明数据还没有加载完毕，不加载下一页数据
+    if (isLoading) return

    // 判断数据是否加载完毕
    // coding...
  }
})

08. 商品列表-实现下拉刷新功能

下拉刷新是小程序中常见的一种刷新方式，当用户下拉页面时，页面会自动刷新，以便用户获取最新的内容。

小程序中实现上拉加载更多的方式：

  1. 在页面.json 中开启允许下拉，同时可以配置 窗口、loading 样式等

  2. 在页面.js 中定义 onPullDownRefresh 事件监听用户下拉刷新

落地代码：

➡️ /modules/goodsModule/pages/list/list.json

{
  "usingComponents": {
    "goods-card": "/components/goods-card/goods-card"
  },

  "navigationBarTitleText": "商品列表",
  "enablePullDownRefresh": true,
  "backgroundColor": "#f7f4f8",
  "backgroundTextStyle": "dark"
}

➡️ /modules/goodsModule/pages/list/list.js

// 监听页面的下拉刷新
onPullDownRefresh() {
  // 将数据进行重置
  this.setData({
    goodsList: [],
    total: 0,
    isFinish: false,
    requestData: { ...this.data.requestData, page: 1 }
  })

  // 重新获取列表数据
  this.getGoodsList()
}

09. 商品详情-获取并渲染商品详情

思路分析：

点击首页轮播图以及点击商品列表商品的时候，需要跳转到商品详情页面

在跳转时将商品的id 传递到了商品详情页面，只需要使用 id 向后端服务器请求数据，获取对应商品的详情数据

在获取到数据以后，使用后端返回的数据对页面进行渲染。

实现步骤：

  1. 在 /pages/goods/detail/detail.js 中导入封装好的获取商品列表的 API 函数
  2. 页面数据在页面加载的时候进行调用，在 onLoad 钩子函数中调用 reqGoodsInfo 方法
  3. 在获取到数据以后，使用后端返回的数据对页面进行渲染

落地代码：

➡️ /modules/goodsModule/pages/detail/detail.js

+ import { reqGoodsInfo } from '../../../api/goods'

Page({

  // 页面的初始数据
  data: {
    goodsInfo: {}, // 商品详情
    show: false, // 控制加入购物车和立即购买弹框的显示
    count: 1, // 商品购买数量，默认是 1
    blessing: '' // 祝福语
  },

+   // 获取商品的详情
+   async getGoodsInfo() {
+     // 调用接口、传入参数、获取商品详情
+     const { data: goodsInfo } = await reqGoodsInfo(this.goodsId)
+ 
+     // 将商品详情数据赋值给 data 中的变量
+     this.setData({
+       goodsInfo
+     })
+   },

+   // 生命周期函数--监听页面加载
+   onLoad(options) {
+     // 将商品 id 挂载到页面实例上
+     this.goodsId = options.goodsId ? options.goodsId : ''
+ 
+     // 获取商品详情的数据
+     this.getGoodsInfo()
+   }

  // coding...
})

➡️ /modules/goodsModule/pages/detail/detail.html

<view class="container goods-detail">
  <!-- 商品大图 -->
  <view class="banner-img">
+     <image class="img" src="{{ goodsInfo.imageUrl }}" />
  </view>

  <!-- 商品的基本信息 -->
  <view class="content">
    <view class="price">
+       <view class="price-num">¥{{ goodsInfo.price }}</view>
+       <view class="price-origin-num">¥{{ goodsInfo.marketPrice }}</view>
    </view>
+     <view class="title">{{ goodsInfo.name }}</view>
+     <view class="desc">{{ goodsInfo.material }}</view>
  </view>

  <!-- 商品的详细信息 -->
  <view class="detail">
    <image
+       wx:for="{{ goodsInfo.detailList}}"
+       wx:key="index"
+       src="{{ item }}"
      class="img"
      mode="widthFix"
    />
  </view>

  <!-- 商品的底部商品导航 -->
  <van-goods-action>
    <!-- 代码略... -->
  </van-goods-action>

  <!-- 加入购物车、立即购买弹框 -->
  <!-- show 控制弹框的隐藏和展示 -->
  <!-- bind:close 点击关闭弹框时触发的回调 -->
  <van-action-sheet show="{{ show }}" bind:close="onClose">
    <view class="sheet-wrapper">
      <view class="goods-item">
        <!-- 需要购买的商品图片 -->
        <view class="mid">
+           <image class="img" src="{{ goodsInfo.imageUrl }}" />
        </view>

        <!-- 商品基本信息 -->
        <view class="right">
          <!-- 商品名字 -->
+           <view class="title"> {{ goodsInfo.name }} </view>
          <!-- 商品价格 -->
          <view class="buy">
            <view class="price">
              <view class="symbol">¥</view>
+               <view class="num">{{ goodsInfo.price }}</view>
            </view>

            <!-- 购买数量弹框 -->
            <view class="buy-btn">
              <!-- Stepper 步进器，由增加按钮、减少按钮和输入框组成，控制购买数量 -->
              <van-stepper value="{{ count }}" bind:change="onChangeGoodsCount" />
            </view>
          </view>
        </view>
      </view>

      <!-- 祝福语输入框 -->
      <view class="time-wraper">
        <!-- 代码略... -->
      </view>

      <!-- 取消、确定弹框 -->
      <view class="sheet-footer-btn">
        <van-button block type="primary" round> 确定 </van-button>
      </view>
    </view>
  </van-action-sheet>
</view>

10. 商品详情-详情图片预览功能

思路分析：

当点击商品的图片时，需要将图片进行全屏预览

如果想实现该功能，需要使用小程序提供的 API：wx.previewImage()，用来在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。语法如下：

wx.previewImage({
  current: '', // 当前显示图片的 http 链接
  urls: [] // 需要预览的图片 http 链接列表
})

实现步骤：

  1. 给展示大图的 image 组件绑定点击事件，同时通过自定义属性的方式，传递当前需要显示的图片http 链接
  2. 同时商品详情的数组数据传递给 urls 数组即可

落地代码：

➡️ /pages/goods/detail/detail.html

<!-- 商品大图 -->
<view class="banner-img">
  <image
     class="img"
     src="{{ goodsInfo.imageUrl }}"
     bindtap="previewImg"
  />
</view>

➡️ /pages/goods/detail/detail.js

// 预览商品图片
previewImg() {
  // 调用预览图片的 API
  wx.previewImage({
    urls: this.data.goodsInfo.detailList
  })
}

优化：配置 @ 路径别名优化访问路径

在对小程序进行分包时，如果访问小程序根目录下的文件，那么访问的路径就会很长。

在 Vue 中，可以使用 @ 符号指向源码目录，简化路径，小程序也给提供了配置的方式。

在小程序中可以在 app.json 中使用 resolveAlias 配置项用来自定义模块路径的映射规则。

官方文档： resolveAlias

{
  "resolveAlias": {
    "@/*": "/*"
  }
}

📌：注意事项：

  1. resolveAlias 进行的是路径匹配，其中的 key 和 value 须以 /* 结尾

  2. 如果在 project.config.json 中指定了 miniprogramRoot，则 /* 指代的根目录是 miniprogramRoot 对应的路径，而不是开发者工具项目的根目录

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1483982.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【c语言】基础数据类型

【c语言】基础数据类型

文章目录 1、什么数据类型2、常量3、变量4、整型数据5、浮点型数据6、字符型数据7、字符串数据 1、什么数据类型 ​ 在生活中&#xff0c;裁缝做衣服需要用到不同的化纤、棉花、丝绸等布料&#xff0c;炒不同的菜需要油、盐等不同的配方&#xff0c;而程序员在编写程序时也需要…
阅读更多...
我在代码随想录|写代码Day31 | 贪心算法总结篇 | 贪心终结一题

我在代码随想录|写代码Day31 | 贪心算法总结篇 | 贪心终结一题

&#x1f525;博客介绍&#xff1a; 27dCnc &#x1f3a5;系列专栏&#xff1a; <<数据结构与算法>> << 算法入门>> << C项目>> &#x1f3a5; 当前专栏: << 算法入门>> 专题 : 数据结构帮助小白快速入门算法 &#x1f4…
阅读更多...
对程序、进程、线程、并发、并行、高并发概念的讲解

对程序、进程、线程、并发、并行、高并发概念的讲解

一、概述 程序、进程、线程、并发、并行和高并发是计算机科学领域中非常重要的概念。 了解进程、线程、并发和并行的概念&#xff0c;可以更好地利用计算机的多核处理器和并行计算能力&#xff0c;提高计算机性能。 了解进程和线程为操作系统中的资源管理提供了基础&#xff…
阅读更多...
VMwareWorkstation17.0搭建深度Deepin23Beta3系统虚拟机（完整安装步骤详细图文教程）

VMwareWorkstation17.0搭建深度Deepin23Beta3系统虚拟机（完整安装步骤详细图文教程）

VMwareWorkstation17.0搭建深度Deepin23Beta3系统虚拟机&#xff08;完整安装步骤详细图文教程&#xff09; 一、Deepin23Beta3深度操作系统1. Deepin深度操作系统介绍2.Deepin官网3.Deepin深度操作系统的下载地址3.1 Deepin20.9深度操作系统3.1 Deepin V23 Beta3(Unstable)深度…
阅读更多...
java项目打包运行报异常：xxxxx-1.0-SNAPSHOT.jar中没有主清单属性

java项目打包运行报异常：xxxxx-1.0-SNAPSHOT.jar中没有主清单属性

pom.xml中加入这段话即可 <build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><version>2.4.4</version><executions><execution><…
阅读更多...
Siamrpn++论文中文翻译（详细！）

Siamrpn++论文中文翻译（详细！）

SiamRPN: Evolution of Siamese Visual Tracking with Very Deep Networks SiamRPN&#xff1a;具有非常深度网络的Siamese视觉跟踪的进化 【siamrpn论文地址】 https://arxiv.org/abs/1812.11703 摘要 基于Siamese网络的跟踪器将跟踪表示为目标模板和搜索区域之间的卷积特征…
阅读更多...
基于ssm疫情期间高校防控系统+vue论文

基于ssm疫情期间高校防控系统+vue论文

摘 要 传统信息的管理大部分依赖于管理人员的手工登记与管理&#xff0c;然而&#xff0c;随着近些年信息技术的迅猛发展&#xff0c;让许多比较老套的信息管理模式进行了更新迭代&#xff0c;学生信息因为其管理内容繁杂&#xff0c;管理数量繁多导致手工进行处理不能满足广大…
阅读更多...
贪吃蛇（C语言）步骤讲解

贪吃蛇（C语言）步骤讲解

一&#xff1a;文章大概 使用C语言在windows环境的控制台中模拟实现经典小游戏 实现基本功能&#xff1a; 1.贪吃蛇地图绘制 2.蛇吃食物的功能&#xff08;上&#xff0c;下&#xff0c;左&#xff0c;右方向控制蛇的动作&#xff09; 3.蛇撞墙死亡 4.计算得分 5.蛇身加…
阅读更多...
【LeetCode:230. 二叉搜索树中第K小的元素 + 二叉树 + 递归】

【LeetCode:230. 二叉搜索树中第K小的元素 + 二叉树 + 递归】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…
阅读更多...
YOLOv9：Learning What You Want to Learn Using Programmable Gradient Information

YOLOv9：Learning What You Want to Learn Using Programmable Gradient Information

YOLOv9&#xff1a;Learning What You Want to Learn Using Programmable Gradient Information 摘要 今天的深度学习方法关注的是如何设计最合适的目标函数&#xff0c;使模型的预测结果最接近ground truth的真实情况。同时&#xff0c;必须设计一个适当的体系结构&#xff…
阅读更多...
CSS 【详解】响应式布局（含 rem 详解）

CSS 【详解】响应式布局（含 rem 详解）

响应式布局&#xff1a; 同一页面在不同的屏幕上有不同的布局&#xff0c;即一套代码自适应不同的屏幕。 为什么 rem 能用于实现响应式布局&#xff1f; px 绝对长度单位&#xff0c;不同客户端表现都相同&#xff0c;不具有响应式em 相对长度单位&#xff0c;相对于父元素的 f…
阅读更多...
【博图TIA-Api】通过Excel自动新建文件夹和导入FB块

【博图TIA-Api】通过Excel自动新建文件夹和导入FB块

【博图TIA-Api】通过Excel自动新建文件夹和导入FB块 说明思路准备获取Excel表格内文件名和FB块名等信息新建文件夹部分筛分获取的文件夹数据&#xff0c;去掉重复内容创建文件夹 导入FB块导出FB块的xml文件查找需要放置的文件夹导入块 说明 续上一篇文章&#xff0c;这次是根据…
阅读更多...
Python爬虫——Urllib库-3

Python爬虫——Urllib库-3

目录 ajax的get请求 获取豆瓣电影第一页的数据并保存到本地 获取豆瓣电影前十页的数据 ajax的post请求 总结 ajax的get请求 获取豆瓣电影第一页的数据并保存到本地 首先可以在浏览器找到发送数据的接口 那么我们的url就可以在header中找到了 再加上UA这个header 进行请…
阅读更多...
【Easyx】easyx从入门到精通 — 初步入门

【Easyx】easyx从入门到精通 — 初步入门

easyx 初步入门 1 安装easyx图形库2 如何使用Easyx3 效果初试4 基本图形绘制4.1 绘制点4.2 绘制直线4.3 绘制圆形4.4 绘制矩形4.5 绘制椭圆4.6 绘制圆角矩形4.7 绘制扇形 Thanks♪(&#xff65;ω&#xff65;)&#xff89;谢谢阅读&#xff01;&#xff01;&#xff01;下一篇…
阅读更多...
mTSL: netty单向/双向TLS连接

mTSL: netty单向/双向TLS连接

创建证书 不管是单向tls还是双向tls(mTLS)&#xff0c;都需要创建证书。 创建证书可以使用openssl或者keytool&#xff0c;openssl 参考 mTLS: openssl创建CA证书 单向/双向tls需要使用到的相关文件: 文件单向tls双向tlsServer端Client端备注ca.key----需要保管好&#xff0…
阅读更多...
Linux高负载排查最佳实践

Linux高负载排查最佳实践

在Linux系统中&#xff0c;经常会因为负载过高导致各种性能问题。那么如何进行排查&#xff0c;其实是有迹可循&#xff0c;而且模式固定。 本次就来分享一下&#xff0c;CPU占用过高、磁盘IO占用过高的排查方法。 还是那句话&#xff0c;以最佳实践入手&#xff0c;真传一句话…
阅读更多...
mysql 常用命令练习

mysql 常用命令练习

管理表格从表中查询数据从多个表查询修改数据sql变量类型 管理表格 创建一个包含三列的新表 CREATE TABLE products (id INT,name VARCHAR(255) NOT NULL,price INT DEFAULT 0,PRIMARY KEY(id) // 自增 ); 从数据库中删除表 DROP TABLE product; 向表中添加新列 ALTER TAB…
阅读更多...
使用Xftp连接CentOS 7进行文件的传输

使用Xftp连接CentOS 7进行文件的传输

一、查看虚拟机IP地址 在虚拟机中打开终端输入 ifconfig &#xff1a; 我的虚拟机IP为192.168.23.131 二、打开XFtp 7连接虚拟机 其余设置为默认&#xff0c;点击连接后输入你的用户名和密码&#xff1a; 输入密码后弹出如下界面表示连接成功~ 三、传输文件 传输文件只需用鼠…
阅读更多...
【Linux杂货铺】调试工具gdb的使用

【Linux杂货铺】调试工具gdb的使用

目录 &#x1f308;前言&#x1f308; &#x1f4c1;背景介绍 &#x1f4c1; 使用 list [行号] / [函数名] run/r break/b [行号] / [函数名] info break disable break enable break delete break [断点编号] next/n step/s continue/c finish print/p [变量…
阅读更多...
Leetcode438. 找到字符串中所有字母异位词 -hot100

Leetcode438. 找到字符串中所有字母异位词 -hot100

题目&#xff1a; 代码(首刷看解析 2024年3月2日&#xff09;&#xff1a; 感觉自己这个ac率根本不可能找得到实习 class Solution { public:vector<int> findAnagrams(string s, string p) {int plen p.size(), slen s.size();if (slen < plen) return {};vector…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023