黑马程序员前端 Vue3 小兔鲜电商项目——（九）购物车

news2024/12/29 13:36:12

文章目录

    • 本地购物车
      • 添加购物车
      • 头部购物车
        • 模板代码
        • 渲染数据
      • 删除功能实现
      • 购物车统计信息
      • 列表购物车-基础内容渲染
        • 模版代码
        • 路由配置
        • 渲染列表
      • 列表购物车-单选功能实现
      • 列表购物车-全选功能实现
      • 列表购物车-统计数据功能实现
    • 接口购物车
      • 加入购物车
      • 删除购物车
    • 退出登录-清空购物车
    • 购物车合并

image-20230625134052235

本地购物车

添加购物车

基础思想：购物车数据存储在 pinia 中，如果已经添加过相同的商品，就在其数量 count 上加一，如果没有添加过，就直接push到购物车列表中。

  1. 在 src\stores\cartStore.js 中封装 cartStore，存储购物车列表：

    import { ref } from 'vue'
import { defineStore } from 'pinia'

export const useCartStore = defineStore('cart', () => {
    //1.定义state - cartList
    const cartList = ref([])
    //2.定义action - addCart
    const addCart = async (goods) => {
        // 添加购物车操作
        // 已添加过 - count + 1
        // 没有添加过 - 直接push
        // 思路：通过匹配传递过来的商品对象中的skuId能不能在cartList中找到，找到了就是添加过
        const item = cartList.value.find((item) => goods.skuId === item.skuId)
        if (item) {
            // 找到了
            item.count++
        } else {
            // 没找到
            cartList.value.push(goods)
        }
    }
    return {
        cartList,
        addCart
    }

}, {
    persist: true
})

  2. 在 src\views\Detail\index.vue 中添加数据组件并绑定相关事件：

    <!-- sku组件 -->
<XtxSku :goods="goods" @change="skuChange"/>

<!-- 数据组件 -->
<el-input-number :min="1" v-model="count" @change="countChange" />

<!-- 按钮组件 -->
<div>
  <el-button size="large" class="btn" @click="addCart">
    加入购物车
  </el-button>
</div>

  3. 编辑事件触发逻辑：

    import { ElMessage } from 'element-plus'
import { useCartStore } from '@/stores/cartStore';

const cartStore = useCartStore()

//sku规格被操作时
let skuObj = {}
const skuChange = (sku) => {
    console.log(sku);
    skuObj = sku
}

//count
const count = ref(1)
const countChange = (count) => {
    console.log(count);
}
//添加购物车
const addCart = () => {
    if (skuObj.skuId) {
        //规格已经选择 触发action
        cartStore.addCart({
            id: goods.value.id,
            name: goods.value.name,
            picture: goods.value.mainPictures[0],
            price: goods.value.price,
            count: count.value,
            skuId: skuObj.skuId,
            attrsText: skuObj.specsText,
            selected: true
        })
    } else {
        //规格没有选择 提示用户
        ElMessage.warning('请选择规格')
    }
}

头部购物车

模板代码

创建 src\views\Layout\components\HeaderCart.vue 文件，添加以下代码：

<script setup>

</script>

<template>
  <div class="cart">
    <a class="curr" href="javascript:;">
      <i class="iconfont icon-cart"></i><em>2</em>
    </a>
    <div class="layer">
      <div class="list">
        <!--
        <div class="item" v-for="i in cartList" :key="i">
          <RouterLink to="">
            <img :src="i.picture" alt="" />
            <div class="center">
              <p class="name ellipsis-2">
                {{ i.name }}
              </p>
              <p class="attr ellipsis">{{ i.attrsText }}</p>
            </div>
            <div class="right">
              <p class="price">&yen;{{ i.price }}</p>
              <p class="count">x{{ i.count }}</p>
            </div>
          </RouterLink>
          <i class="iconfont icon-close-new" @click="store.delCart(i.skuId)"></i>
        </div>
        -->
      </div>
      <div class="foot">
        <div class="total">
          <p>共 10 件商品</p>
          <p>&yen; 100.00 </p>
        </div>
        <el-button size="large" type="primary" >去购物车结算</el-button>
      </div>
    </div>
</div>
</template>

<style scoped lang="scss">
.cart {
  width: 50px;
  position: relative;
  z-index: 600;

  .curr {
    height: 32px;
    line-height: 32px;
    text-align: center;
    position: relative;
    display: block;

    .icon-cart {
      font-size: 22px;
    }

    em {
      font-style: normal;
      position: absolute;
      right: 0;
      top: 0;
      padding: 1px 6px;
      line-height: 1;
      background: $helpColor;
      color: #fff;
      font-size: 12px;
      border-radius: 10px;
      font-family: Arial;
    }
  }

  &:hover {
    .layer {
      opacity: 1;
      transform: none;
    }
  }

  .layer {
    opacity: 0;
    transition: all 0.4s 0.2s;
    transform: translateY(-200px) scale(1, 0);
    width: 400px;
    height: 400px;
    position: absolute;
    top: 50px;
    right: 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    background: #fff;
    border-radius: 4px;
    padding-top: 10px;

    &::before {
      content: "";
      position: absolute;
      right: 14px;
      top: -10px;
      width: 20px;
      height: 20px;
      background: #fff;
      transform: scale(0.6, 1) rotate(45deg);
      box-shadow: -3px -3px 5px rgba(0, 0, 0, 0.1);
    }

    .foot {
      position: absolute;
      left: 0;
      bottom: 0;
      height: 70px;
      width: 100%;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      background: #f8f8f8;
      align-items: center;

      .total {
        padding-left: 10px;
        color: #999;

        p {
          &:last-child {
            font-size: 18px;
            color: $priceColor;
          }
        }
      }
    }
  }

  .list {
    height: 310px;
    overflow: auto;
    padding: 0 10px;

    &::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }

    &::-webkit-scrollbar-track {
      background: #f8f8f8;
      border-radius: 2px;
    }

    &::-webkit-scrollbar-thumb {
      background: #eee;
      border-radius: 10px;
    }

    &::-webkit-scrollbar-thumb:hover {
      background: #ccc;
    }

    .item {
      border-bottom: 1px solid #f5f5f5;
      padding: 10px 0;
      position: relative;

      i {
        position: absolute;
        bottom: 38px;
        right: 0;
        opacity: 0;
        color: #666;
        transition: all 0.5s;
      }

      &:hover {
        i {
          opacity: 1;
          cursor: pointer;
        }
      }

      a {
        display: flex;
        align-items: center;

        img {
          height: 80px;
          width: 80px;
        }

        .center {
          padding: 0 10px;
          width: 200px;

          .name {
            font-size: 16px;
          }

          .attr {
            color: #999;
            padding-top: 5px;
          }
        }

        .right {
          width: 100px;
          padding-right: 20px;
          text-align: center;

          .price {
            font-size: 16px;
            color: $priceColor;
          }

          .count {
            color: #999;
            margin-top: 5px;
            font-size: 16px;
          }
        }
      }
    }
  }
}
</style>

渲染数据

  1. 在 src\views\Layout\components\LayoutHeader.vue 中引入购物车组件：

    import HeaderCart from './HeaderCart.vue'

  2. 插入组件：

    <!-- 头部购物车 -->
<HeaderCart/>

  3. 在 src\views\Layout\components\HeaderCart.vue 中获取购物车数据：

    import { useCartStore } from '@/stores/cartStore'
const cartStore = useCartStore()

  4. 渲染数据：

    <div class="item" v-for="i in cartStore.cartList" :key="i">
  <RouterLink to="">
    <img :src="i.picture" alt="" />
    <div class="center">
      <p class="name ellipsis-2">
        {{ i.name }}
      </p>
      <p class="attr ellipsis">{{ i.attrsText }}</p>
    </div>
    <div class="right">
      <p class="price">&yen;{{ i.price }}</p>
      <p class="count">x{{ i.count }}</p>
    </div>
  </RouterLink>
  <i class="iconfont icon-close-new" @click="store.delCart(i.skuId)"></i>
</div>

删除功能实现

  1. src\stores\cartStore.js 中添加删除 action 函数：

    export const useCartStore = defineStore('cart', () => {
    //1.定义state - cartList
    const cartList = ref([])
    //2.定义action - addCart
    const addCart = async (goods) => {
      ...
    }
    // 删除购物车
    const delCart = async (skuId) => {
        // 思路：
        // 1. 找到要删除项的下标值 - splice
        // 2. 使用数组的过滤方法 - filter
        const idx = cartList.value.findIndex((item) => skuId === item.skuId)
        cartList.value.splice(idx, 1)
    }
    return {
        cartList,
        addCart,
        delCart
    }
}, {
    persist: true
})

  2. src\views\Layout\components\HeaderCart.vue 绑定组件触发action函数并传递参数

     <i class="iconfont icon-close-new" @click="cartStore.delCart(i.skuId)"></i>

购物车统计信息

  1. src\views\Layout\components\HeaderCart.vue 中使用计算属性统计购物车信息：

    // 计算属性
// 1. 总的数量 所有项的count之和
const allCount = computed(() => cartList.value.reduce((a, c) => a + c.count, 0))
// 2. 总价 所有项的count*price之和
const allPrice = computed(() => cartList.value.reduce((a, c) => a + c.count * c.price, 0))

return {
  cartList,
  allCount,
  allPrice,
  addCart,
  delCart
}

  2. 修改 src\views\Layout\components\HeaderCart.vue 代码：

    <div class="total">
  <p>共 {{ cartStore.allCount }} 件商品</p>
  <p>&yen; {{cartStore.allPrice}} </p>
</div>

列表购物车-基础内容渲染

模版代码

创建 src\views\CartList\index.vue 文件：

<script setup>

</script>

<template>
  <div class="xtx-cart-page">
    <div class="container m-top-20">
      <div class="cart">
        <table>
          <thead>
            <tr>
              <th width="120">
                <el-checkbox/>
              </th>
              <th width="400">商品信息</th>
              <th width="220">单价</th>
              <th width="180">数量</th>
              <th width="180">小计</th>
              <th width="140">操作</th>
            </tr>
          </thead>
          <!-- 商品列表 -->
          <tbody>
            <tr v-for="i in cartList" :key="i.id">
              <td>
                <el-checkbox />
              </td>
              <td>
                <div class="goods">
                  <RouterLink to="/"><img :src="i.picture" alt="" /></RouterLink>
                  <div>
                    <p class="name ellipsis">
                      {{ i.name }}
                    </p>
                  </div>
                </div>
              </td>
              <td class="tc">
                <p>&yen;{{ i.price }}</p>
              </td>
              <td class="tc">
                <el-input-number v-model="i.count" />
              </td>
              <td class="tc">
                <p class="f16 red">&yen;{{ (i.price * i.count).toFixed(2) }}</p>
              </td>
              <td class="tc">
                <p>
                  <el-popconfirm title="确认删除吗?" confirm-button-text="确认" cancel-button-text="取消" @confirm="delCart(i)">
                    <template #reference>
                      <a href="javascript:;">删除</a>
                    </template>
                  </el-popconfirm>
                </p>
              </td>
            </tr>
            <tr v-if="cartList.length === 0">
              <td colspan="6">
                <div class="cart-none">
                  <el-empty description="购物车列表为空">
                    <el-button type="primary">随便逛逛</el-button>
                  </el-empty>
                </div>
              </td>
            </tr>
          </tbody>

        </table>
      </div>
      <!-- 操作栏 -->
      <div class="action">
        <div class="batch">
          共 10 件商品，已选择 2 件，商品合计：
          <span class="red">¥ 200.00 </span>
        </div>
        <div class="total">
          <el-button size="large" type="primary" >下单结算</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.xtx-cart-page {
  margin-top: 20px;

  .cart {
    background: #fff;
    color: #666;

    table {
      border-spacing: 0;
      border-collapse: collapse;
      line-height: 24px;

      th,
      td {
        padding: 10px;
        border-bottom: 1px solid #f5f5f5;

        &:first-child {
          text-align: left;
          padding-left: 30px;
          color: #999;
        }
      }

      th {
        font-size: 16px;
        font-weight: normal;
        line-height: 50px;
      }
    }
  }

  .cart-none {
    text-align: center;
    padding: 120px 0;
    background: #fff;

    p {
      color: #999;
      padding: 20px 0;
    }
  }

  .tc {
    text-align: center;

    a {
      color: $xtxColor;
    }

    .xtx-numbox {
      margin: 0 auto;
      width: 120px;
    }
  }

  .red {
    color: $priceColor;
  }

  .green {
    color: $xtxColor;
  }

  .f16 {
    font-size: 16px;
  }

  .goods {
    display: flex;
    align-items: center;

    img {
      width: 100px;
      height: 100px;
    }

    >div {
      width: 280px;
      font-size: 16px;
      padding-left: 10px;

      .attr {
        font-size: 14px;
        color: #999;
      }
    }
  }

  .action {
    display: flex;
    background: #fff;
    margin-top: 20px;
    height: 80px;
    align-items: center;
    font-size: 16px;
    justify-content: space-between;
    padding: 0 30px;

    .xtx-checkbox {
      color: #999;
    }

    .batch {
      a {
        margin-left: 20px;
      }
    }

    .red {
      font-size: 18px;
      margin-right: 20px;
      font-weight: bold;
    }
  }

  .tit {
    color: #666;
    font-size: 16px;
    font-weight: normal;
    line-height: 50px;
  }

}
</style>

路由配置

src\router\index.js 中进行路由配置：

import CartList from '@/views/CartList/index.vue'

{
  path: 'cartlist',
  component: CartList
}

渲染列表

src\views\CartList\index.vue 中渲染数据：

<script setup>
import { useCartStore } from '@/stores/cartStore'
const cartStore = useCartStore()
</script>

<template>
  <div class="xtx-cart-page">
    <div class="container m-top-20">
      <div class="cart">
        <table>
          <thead>
            <tr>
              <th width="120">
                <el-checkbox />
              </th>
              <th width="400">商品信息</th>
              <th width="220">单价</th>
              <th width="180">数量</th>
              <th width="180">小计</th>
              <th width="140">操作</th>
            </tr>
          </thead>
          <!-- 商品列表 -->
          <tbody>
            <tr v-for="i in cartStore.cartList" :key="i.id">
              <td>
                <!-- 单选框 -->
                <el-checkbox/>
              </td>
              <td>
                <div class="goods">
                  <RouterLink to="/"><img :src="i.picture" alt="" /></RouterLink>
                  <div>
                    <p class="name ellipsis">
                      {{ i.name }}
                    </p>
                  </div>
                </div>
              </td>
              <td class="tc">
                <p>&yen;{{ i.price }}</p>
              </td>
              <td class="tc">
                <el-input-number v-model="i.count" />
              </td>
              <td class="tc">
                <p class="f16 red">&yen;{{ (i.price * i.count).toFixed(2) }}</p>
              </td>
              <td class="tc">
                <p>
                  <el-popconfirm title="确认删除吗?" confirm-button-text="确认" cancel-button-text="取消" @confirm="delCart(i)">
                    <template #reference>
                      <a href="javascript:;">删除</a>
                    </template>
                  </el-popconfirm>
                </p>
              </td>
            </tr>
            <tr v-if="cartStore.cartList.length === 0">
              <td colspan="6">
                <div class="cart-none">
                  <el-empty description="购物车列表为空">
                    <el-button type="primary">随便逛逛</el-button>
                  </el-empty>
                </div>
              </td>
            </tr>
          </tbody>

        </table>
      </div>
      <!-- 操作栏 -->
      <div class="action">
        <div class="batch">
          共 10 件商品，已选择 2 件，商品合计：
          <span class="red">¥ 200.00 </span>
        </div>
        <div class="total">
          <el-button size="large" type="primary" >下单结算</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

列表购物车-单选功能实现

核心思路：单选的核心思路就是始终把单选框的状态和Pinia中store对应的状态保持同步。

注意事项：v-modl双向绑定指令不方便进行命令式的操作（因为后续还需要调用接口)，所以把 v-model 回退到一般模式，也就是：model-value和@change的配合实现。

  1. src\stores\cartStore.js 中添加单选功能：

    // 单选功能
const singleCheck = (skuId, selected) => {
  // 通过skuId找到要修改的那一项 然后把它的selected修改为传过来的selected
  const item = cartList.value.find((item) => item.skuId === skuId)
  item.selected = selected
}

  2. src\views\CartList\index.vue 中触发action函数：

    <script setup>
// 单选回调
const singleCheck = (i, selected) => {
  console.log(i, selected)
  // store cartList 数组 无法知道要修改谁的选中状态？
  // 除了selected补充一个用来筛选的参数 - skuId
  cartStore.singleCheck(i.skuId, selected)
}
</script>

<template>
  <td>
    <!-- 单选框 -->
    <el-checkbox :model-value="i.selected" @change="(selected) => singleCheck(i, selected)" />
  </td>
</template>

列表购物车-全选功能实现

基础思想：

  1. 全选状态决定单选框状态 - 遍历cartList把每一项的selected都设置为何全选框状态一致
  2. 单选框状态决定全选状态 - 只有所有单选框的selected都为true, 全选框才为true

  1. src\stores\cartStore.js 中添加全选功能和计算属性：

    // 全选功能action
const allCheck = (selected) => {
  // 把cartList中的每一项的selected都设置为当前的全选框状态
  cartList.value.forEach(item => item.selected = selected)
}

// 是否全选计算属性
const isAll = computed(() => cartList.value.every((item) => item.selected))

  2. src\views\CartList\index.vue 中触发action函数：

    <script setup>
const allCheck = (selected) => {
  cartStore.allCheck(selected)
}

</script>

  
<template>
  <!-- 全选框 -->
  <el-checkbox :model-value="cartStore.isAll" @change="allCheck" />
</template>

列表购物车-统计数据功能实现

在 src\stores\cartStore.js 文件中添加计算属性：

// 3. 已选择数量
const selectedCount = computed(() => cartList.value.filter(item => item.selected).reduce((a, c) => a + c.count, 0))
// 4. 已选择商品价钱合计
const selectedPrice = computed(() => cartList.value.filter(item => item.selected).reduce((a, c) => a + c.count * c.price, 0))

src\views\CartList\index.vue 中渲染数据：

<div class="batch">
  共 {{ cartStore.allCount }} 件商品，已选择 {{ cartStore.selectedCount }} 件，商品合计：
  <span class="red">¥ {{ cartStore.selectedPrice }} </span>
</div>

接口购物车

加入购物车

新建 src\apis\cart.js 文件，接口封装

import http from '@/utils/http'

// 加入购物车
export const insertCartAPI = ({ skuId, count }) => {
    return http({
        url: '/member/cart',
        method: 'POST',
        data: {
            skuId,
            count
        }
    })
}

//获取最新的购物车列表
export const findNewCartListAPI = () => {
    return http({
        url: '/member/cart'
    })
}

修改 src\stores\cartStore.js 文件的加入购物车方法：

import { useUserStore } from './user'
import { insertCartAPI } from '@/apis/cart'

export const useCartStore = defineStore('cart', () => {
  const userStore = useUserStore()
  const isLogin = computed(() => userStore.userInfo.token)
  //1.定义state - cartList
  const cartList = ref([])
  // 2. 定义action - addCart
  const addCart = async (goods) => {
    const { skuId, count } = goods
    if (isLogin.value) {
      // 登录之后的加入购车逻辑
      await insertCartAPI({ skuId, count })
      const res = await findNewCartListAPI()
      cartList.value = res.result
    } else {
      // 添加购物车操作
      // 已添加过 - count + 1
      // 没有添加过 - 直接push
      // 思路：通过匹配传递过来的商品对象中的skuId能不能在cartList中找到，找到了就是添加过
      const item = cartList.value.find((item) => goods.skuId === item.skuId)
      if (item) {
        // 找到了
        item.count++
      } else {
        // 没找到
        cartList.value.push(goods)
      }
    }
  }
  ...
}

删除购物车

src\apis\cart.js 中封装删除购物车的接口：

// 删除购物车
export const delCartAPI = (ids) => {
  return request({
    url: '/member/cart',
    method: 'DELETE',
    data: {
      ids
    }
  })
}

src\stores\cartStore.js 修改删除购物车的方法：

  // 删除购物车
  const delCart = async (skuId) => {
    if (isLogin.value) {
      // 调用接口实现接口购物车中的删除功能
      await delCartAPI([skuId])
      const res = await findNewCartListAPI()
      cartList.value = res.result
    } else {
      // 思路：
      // 1. 找到要删除项的下标值 - splice
      // 2. 使用数组的过滤方法 - filter
      const idx = cartList.value.findIndex((item) => skuId === item.skuId)
      cartList.value.splice(idx, 1)
    }
  }

退出登录-清空购物车

在用户退出登录时，除了清除用户信息之外，也需要把购物车数据清空。

在购物车store中补充清除购物车的action业务：

//清除购物车
const clearCart = () => {
  cartList.value = []
}

userStore中找到退出登录 action 执行清除：

// 退出时清除用户信息
const clearUserInfo = () => {
  userInfo.value = {}
  //执行清除购物车的action
  cartStore.clearCart
}

购物车合并

在用户登录时，把本地的购物车数据和服务端购物车数据进行合并操作。

src\apis\cart.js 中添加登录时调用合并购物车接口：

// 合并购物车
export const mergeCartAPI = (data)=>{
    return http({
        url: '/member/cart/merge',
        method: 'POST',
        data
    })
}

src\stores\user.js 中修改代码：

const getUserInfo = async ({ account, password }) => {
  const res = await loginAPI({ account, password })
  userInfo.value = res.result
  //合并购物车的操作
  mergeCartAPI(cartStore.cartList.map(item => {
    return {
      skuId: item.skuId,
      selected: item.selected,
      count: item.count
    }
  }))
  //获取最新的购物车列表
  cartStore.updateNewList()
}

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

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

相关文章

Matplotlib - 绘制 带有对角线的散点图 (Diagonal Scatter Plots) 函数源码

Matplotlib - 绘制 带有对角线的散点图 (Diagonal Scatter Plots) 函数源码

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://blog.csdn.net/caroline_wendy/article/details/131384440 Matplotlib 是一个用于绘制二维图形的 Python 库&#xff0c;提供了一个 pyplot 模块&#xff0c;用于创建各种类型的图表。其…
阅读更多...
实战经验---好用的Midjourney提示词

实战经验---好用的Midjourney提示词

说明&#xff1a;本文基于Midjourney&#xff08;下称MJ&#xff09;官方说明书整理&#xff0c;分2篇文章发布&#xff0c;这是第1篇。内容主要包括绘画指令&#xff08;Prompt&#xff09;、提示、参数、设置、模型选择等。 由于是整理文本&#xff0c;过程中个别地方为了显…
阅读更多...
应对流量损耗：提升APP广告变现效果的关键策略！

应对流量损耗：提升APP广告变现效果的关键策略！

​引言&#xff1a; 在APP广告变现的过程中&#xff0c;流量损耗是一个常见的问题&#xff0c;它不可避免地会发生。尽管开发者可以在合理的范围内承受这种损耗&#xff0c;但如果出现大范围的损耗&#xff0c;那就意味着在广告变现过程中出现了一些问题&#xff0c;限制了开发…
阅读更多...
ThreadPoolExecutor的有参构造

ThreadPoolExecutor的有参构造

核心要点 通过查看ThreadPoolExecutor里面的构造方法可以发现都是调用了方法参数最多的那个。 参数最多的构造方法展示 映入眼帘的是一些健壮性校验corePoolSize < 0&#xff1b;可以发现这个判断是核心线程的个数不能小于零。但是也就说明核心线程的个数可以等于零。maxim…
阅读更多...
LLM - 搭建 DrugGPT 与药物分子领域结合的 ChatGPT 系统

LLM - 搭建 DrugGPT 与药物分子领域结合的 ChatGPT 系统

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://blog.csdn.net/caroline_wendy/article/details/131384199 论文&#xff1a;DrugChat: Towards Enabling ChatGPT-Like Capabilities on Drug Molecule Graphs DrugChat&#xff0c;基…
阅读更多...
【简单认识Nginx服务性能与安全优化】

【简单认识Nginx服务性能与安全优化】

文章目录 Nginx隐藏版本相关信息1.隐藏版本号2.修改版本号及相关信息 二、修改Nginx运行时的属主和属组三、配置Nginx网页缓存时间四、配置Nginx站点日志分割五、设置Nginx长连接及超时时间六、配置Nginx网页压缩七、配置Nginx防盗链1.模拟盗链2.配置防盗链并测试 Nginx隐藏版本…
阅读更多...
【算法】数学相关知识总结

【算法】数学相关知识总结

文章目录 gcd 和 lcm取模运算 %求一个点和一片矩形区域之间的最短距离 本文用于记录一些关于算法题中偶尔被使用到的数学相关知识。 gcd 和 lcm gcd 和 lcm 分别是 最大公约数&#xff08;Greatest common divisor&#xff09; 和 最小公因数&#xff08;Least Common Multip…
阅读更多...
Nginx-redis【会话保持】

Nginx-redis【会话保持】

什么是会话保持 当用于登录一个网站服务器&#xff0c; 网站服务器会将用户的登录信息存储下来&#xff08;存储session&#xff09;&#xff0c;以保证我们能一直处于登录在线的状态 为什么要做会话保持 由于我们使用的是负载均衡轮询机制&#xff0c;会导致用户请求分散在…
阅读更多...
nginx页面优化

nginx页面优化

文章目录 nginx页面优化一.nginx优化1.版本号1.1查看版本号1.2修改版本号1.2.1修改配置文件1.2.2修改源码文件&#xff0c;重新编译安装 2.nginx的日志分割2.1 写日志分割的脚本2.2给脚本执行权限、执行2.3创建定时任务可以每个月固定分割一次 3.nginx的页面压缩3.1配置3.2验证…
阅读更多...
第1讲 Camera Sensor Driver课程简介

第1讲 Camera Sensor Driver课程简介

更多资源&#xff1a; 资源描述在线课程极客笔记在线课程知识星球星球名称&#xff1a;深入浅出Android Camera 星球ID: 17296815Wechat极客笔记圈 课程内容介绍 目标&#xff1a; 课程主要帮助大家理解camera sensor基本概念及原理知识&#xff0c;理解高通camera sensor驱…
阅读更多...
前端开发——常用案例分享

前端开发——常用案例分享

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…
阅读更多...
美one，不想只做李佳琦背后的MCN

美one，不想只做李佳琦背后的MCN

文 | 螳螂观察 作者 | 青月 今年618&#xff0c;处在消费提振的关键时期&#xff0c;又面临着行业竞争日趋激烈&#xff0c;各大电商平台都希望能交出一份让市场满意的“期中答卷”&#xff0c;直播不可避免的成为了“兵家必争之地”。 京东请来了罗永浩与“交个朋友”入驻&a…
阅读更多...
抖音seo矩阵系统源码|需求文档编译说明（二）

抖音seo矩阵系统源码|需求文档编译说明（二）

目录 1.抖音seo矩阵系统文档开发流程 2.各平台源码编译方式说明 3.底层技术功能表达式 1.抖音seo矩阵系统文档开发流程 ①产品原型 ②需求文档 ③产品流程图 ④部署方式说明 ⑤完整源码 ⑥源码编译方式说明 ⑦三方框架和SDK使用情况说明和代码位置 ⑧平台操作文档 ⑨程序架…
阅读更多...
完美外贸企业邮箱签名设置指南：提升专业形象，优化商务沟通

完美外贸企业邮箱签名设置指南：提升专业形象，优化商务沟通

邮箱签名是一个很好的方式&#xff0c;让您的外贸企业觉得你的公司比较专业。它可以包括公司名称和标志&#xff0c;联系信息和其他相关信息。以下是一些指导原则&#xff0c;可以帮助您创建适合您业务的邮箱签名: 第一步:选择一个合适的Logo 选择一个适合你的企业的标志是很重…
阅读更多...
踏响新中国钢铁工业的铿锵足音《淬火丹心》湖北卫视热血开播

踏响新中国钢铁工业的铿锵足音《淬火丹心》湖北卫视热血开播

由湖北省广播电视局、湖北广播电视台、湖北长江华晟影视有限责任公司等联合摄制&#xff0c;向勇执导&#xff0c;唐曾、吕一、王雨、董晴等主演的大型现代工业题材剧《淬火丹心》&#xff0c;将于6月25日登陆湖北卫视长江剧场开播。该剧以年轻一代中国钢铁人的励志成长为主线&…
阅读更多...
python包 配置镜像源

python包 配置镜像源

阅读更多...
排序算法——计数排序

排序算法——计数排序

计数排序 以升序排序为例 文章目录 计数排序什么是计数排序实现思路具体步骤实现代码时间复杂度和局限性时间复杂度局限性 什么是计数排序 计数排序是一个非基于比较的排序算法&#xff0c;该算法于1954年由 Harold H. Seward 提出基本思想&#xff1a;是对于给定的输入序列中…
阅读更多...
运算放大器（一）：电压跟随器

运算放大器（一）：电压跟随器

一、电压跟随器 电压跟随器&#xff08;单位增益放大器、缓冲放大器或隔离放大器&#xff09;是一种电压放大倍数为 1 的运算放大器&#xff0c;能够将输入信号的电压放大到同样的幅度并输出&#xff0c;同时保持输入输出电阻不变&#xff08;电压跟随器的输入电阻很大&#x…
阅读更多...
Python网络编程:socket包的用法

Python网络编程:socket包的用法

持续补充 1 网络编程 网络编程&#xff0c;主要用于两台或多台计算机之间的通信&#xff0c;也可以是同一台计算机内不同进程之间的通信。Socket套接字可以用来实现网络通信。关于Socket套接字&#xff0c;需要注意以下几点&#xff1a; Socket是网络通信中应用层和传输层之间…
阅读更多...
安装numpy

安装numpy

pip install numpy1.21.6 -i https://mirrors.aliyun.com/pypi/simple/ 最外面的python.exe 是默认版本 下载包----第二种方式
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023