Vue 移动端 实战九 编辑用户资料、修改呢称、生日、性别、头像、以及头像的剪裁器依赖使用、Content-Type 要求的 multipart/form-data 格式

· 2021/6/26 17:40:54 · 次浏览

编辑用户资料

1.0 创建组件并配置路由

1、创建 views/user/index.vue

<template>
  <div>
    <van-nav-bar title="个人信息" left-arrow right-text="保存" />
    <van-cell-group>
      <van-cell title="头像" is-link>
        <van-image
          round
          width="30"
          height="30"
          fit="cover"
          src="http://toutiao.meiduo.site/FgSTA3msGyxp5-Oufnm5c0kjVgW7"
        />
      </van-cell>
      <van-cell title="昵称" value="abc" is-link />
      <van-cell title="性别" value="男" is-link />
      <van-cell title="生日" value="2019-9-27" is-link />
    </van-cell-group>
  </div>
</template>

<script>
  export default {
    name: "UserIndex"
  };
</script>

2、将该页面配置到根路由

{
  name: 'user-profile',
  path: '/user/profile',
  component: () => import('@/views/user-profile')
}

2.0 页面布局

<template>
  <div class="user-profile">
    <!-- 导航栏 -->
    <van-nav-bar
      class="page-nav-bar"
      title="个人信息"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- /导航栏 -->

    <!-- 个人信息 -->
    <van-cell class="avatar-cell" title="头像" is-link center>
      <van-image
        class="avatar"
        round
        fit="cover"
        src="https://img.yzcdn.cn/vant/cat.jpeg"
      />
    </van-cell>
    <van-cell title="昵称" value="内容" is-link />
    <van-cell title="性别" value="内容" is-link />
    <van-cell title="生日" value="内容" is-link />
    <!-- /个人信息 -->
  </div>
</template>

<script>
export default {
  name: 'UserProfile',
  components: {},
  props: {},
  data () {
    return {}
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {}
}
</script>

<style scoped lang="less">
.user-profile {
  .avatar-cell {
    .van-cell__value {
      display: flex;
      flex-direction: row-reverse;
    }
    .avatar {
      width: 60px;
      height: 60px;
    }
  }
}
</style>

3.0 展示用户信息

思路：

  • 找到数据接口
  • 封装请求方法
  • 请求获取数据
  • 模板绑定

1、在 api/user.js 中添加封装数据接口

/**
 * 获取当前登录用户的个人资料
 */
export const getUserProfile = target => {
    return request({
        method: 'GET',
        url: '/app/v1_0/user/profile'
    })
}

2、在 views/user/index.vue 组件中请求获取数据

import { getUserProfile } from '@/api/user'

  created () {
    this.loadGetUserProfile()
  },
 methods: {
    async loadGetUserProfile() {
      try {
        const { data } = await getUserProfile()
        this.user = data.data
      } catch (err) {
        this.$toast('获取数据失败')
      }
    }
  }

    <van-cell class="avatar-cell" title="头像" is-link center>
      <van-image
        class="avatar"
        round
        fit="cover"
        :src="user.photo"
      />
    </van-cell>
    <van-cell title="昵称" :value="user.name" is-link />
    <van-cell title="性别" :value="user.gender === 0 ? '男' : '女'" is-link />
    <van-cell title="生日" :value="user.birthday" is-link />

4.0 修改昵称

一、准备弹出层

<van-cell title="昵称" :value="user .name" is-link @click="isUpdateNameShow = true"/>

    <!-- 修改名称弹出层 -->
    <van-popup v-model="isUpdateNameShow" position="bottom" style="height: 100%">
      <update-name 
      v-if="isUpdateNameShow"
       @close="isUpdateNameShow = false"
       v-model="user.name"
      ></update-name>
    </van-popup>

二、封装组件

<template>
  <div class="update-name">
    <!-- 导航栏 -->
    <van-nav-bar
      class="page-nav-bar"
      title="设置呢称"
      left-text="取消"
      right-text="完成"
      @click-left="$emit('close')"
      @click-right="loadUpdateUserProfile"
    />
    <!-- /导航栏 -->

    <!-- 输入栏 -->
    <div class="field-wrap">
     <van-field
      v-model="localName"
      rows="2"
      autosize
      type="textarea"
      maxlength="7"
      placeholder="请输入呢称"
      show-word-limit
    />
    </div>
  </div>
</template>

<script>
import { updateUserProfile } from '@/api/user'

export default {
  props: {
    value: {
      type: String,
      required: true,
    }
  },
  data() {
    return {  
      localName: this.value,
    }
  },
  created() {
    this.loadUpdateUserProfile
  }, 
  methods: {
    async loadUpdateUserProfile() {
      this.$toast.loading({
        duration: 0,
        forbidClick: true, // 禁止背景点击
        message: '保存中----'
      })

      try {
        if(!this.localName.length) {
          this.$toast('呢称不能为空')
          return
        }
        await updateUserProfile({name: this.localName})
        this.$emit('input', this.localName)
        this.$emit('close')
        this.$toast.success('更新名称成功')
      } catch(err) {
        this.$toast.fail('修改名称失败')
      }
    }
  }
}
</script>

<style lang='less' scoped>
  .update-name {
    /deep/.van-nav-bar__text {
      color: #fff;
    }
    .field-wrap {
      padding: 20px;
    }
  }
</style>

5.0 修改性别

一、准备弹出层

<van-cell title="性别" :value="user.gender === 0 ? '男' : '女'" is-link @click="isUpdateGenderShow = true"/>

    <!-- 编辑性别 -->
    <van-popup v-model="isUpdateGenderShow" position="bottom">
      <update-gender v-if="isUpdateGenderShow" v-model="user.gender" @close="isUpdateGenderShow = false">

      </update-gender>
    </van-popup>

二、封装组件

<template>
  <div class="update-gender">
    <van-picker
      title="标题"
      show-toolbar
      :columns="columns"
      :default-index="value"
      @confirm="onConfirm"
      @cancel="$emit('close')"
      @change="onPickerChange"
   />
  </div>
</template>

<script>
import { updateUserProfile } from '@/api/user'

export default {
  props: {
    value: {
      type: Number,
      required: true,
    }
  },
  data() {
    return {
      columns:['男','女'],
      localGender: this.value

    }
  },
  methods: {
    onPickerChange(picker, value, index) {
      this.localGender = index
    },
    async onConfirm() {
      this.$toast.loading({
        duration: 0,
        forbidClick: true, // 禁止背景点击
        message: '保存中----'
      })
      try {
        await updateUserProfile({gender: this.localGender})
        this.$emit('input', this.localGender)
        this.$emit('close')
        this.$toast.success('更新名称成功')
      } catch(err) {
        this.$toast.fail('修改名称失败')
      }
    }
  }
}
</script>

<style>

</style>

6.0 修改生日

一、准备弹出层

 <van-cell title="生日" :value="user.birthday" is-link @click="isUpdateBirthdayShow = true" />

    <!-- 编辑生日 -->
    <van-popup v-model="isUpdateBirthdayShow" position="bottom">
      <update-birthday v-if="isUpdateBirthdayShow" v-model="user.birthday" @close="isUpdateGenderShow = false">

      </update-birthday>
    </van-popup>

二、封装组件

<template>
  <div class="update-birthday">
    <van-datetime-picker
      v-model="currentDate"
      type="date"
      title="选择年月日"
      :min-date="minDate"
      :max-date="maxDate"
      @cancel="$emit('close')"
      @confirm="onConfirm"
     />
  </div>
</template>

<script>
import { updateUserProfile } from '@/api/user'
import dayjs from 'dayjs'

export default {
  props: {
    value: {
      type: String,
      required: true,
    }
  },
  data() {
    return {
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(this.value),
    }
  },
  methods: {
    async onConfirm() {
      this.$toast.loading({
        duration: 0,
        forbidClick: true, // 禁止背景点击
        message: '保存中----'
      })
      try {
        const currentDate = dayjs(this.currentDate).format('YYYY-MM-DD')
        await updateUserProfile({birthday: currentDate})
        this.$emit('input', currentDate)
        this.$emit('close')
        this.$toast.success('更新日期成功')
      } catch(err) {
        this.$toast.fail('修改日期失败')
      }
    }
  }
}
</script>

<style>

</style>

7.0 修改头像

一、准备弹出层

<input type="file" hidden ref="file" @change="onFileChange">

<van-cell class="avatar-cell" title="头像" is-link center @click="$refs.file.click()">
	<van-image
        class="avatar"
        round
        fit="cover"
        :src="user.photo"
      />
</van-cell>

    <!-- 编辑照片 -->
    <van-popup v-model="isUpdatePhotoShow" position="bottom" style="height: 100%">
      <update-photo v-if="isUpdatePhotoShow" :img="img" @close="isUpdatePhotoShow = false"
      @update-photo="user.photo = $event">
      </update-photo>
    </van-popup>
   
 import UpdatePhoto from './components/update-photo.vue'
 isUpdatePhotoShow: false,
 img: null,
  
      onFileChange() {
      	// 获取文件对象
       const file = this.$refs.file.files[0]
       // 基于文章对象获取 blob 数据
       this.img = window.URL.createObjectURL(file)
       this.isUpdatePhotoShow = true
       
       // file-inpit 如果选了同一个文件不会触发 change 事件
       // 解决办法就是每次使用完毕， 把 它的 value 清空
       this.$refs.file.value = ''
    }

二、封装组件

 这里要用到 cropperjs 这个第三方的库 https://github.com/fengyuanchen/cropperjs
1. npm install cropperjs

2. <link  href="/path/to/cropper.css" rel="stylesheet">
<script src="/path/to/cropper.js"></script>
或者 vue 中导入方式
import 'cropperjs/dist/cropper.css'
import Cropper from 'cropperjs'

3. img 外面必须包裹一个 div容器
<div>
  <img id="image" src="picture.jpg">
</div>

4.img {  // img 必须配置这两个属性
  display: block;
  max-width: 100%;
}

5.// import 'cropperjs/dist/cropper.css';
import Cropper from 'cropperjs';
<img class="img" :src="img" alt="" ref="img"> // 添加一个 ref
        
  mounted() {  // 这里要用 mounted 操作 dom 元素
    const image = this.$refs.img
    const cropper = new Cropper(image, {
       aspectRatio: 16 / 9,
       crop(event) {
          console.log(event.detail.x);
          console.log(event.detail.y);
          console.log(event.detail.width);
          console.log(event.detail.height);
          console.log(event.detail.rotate);
          console.log(event.detail.scaleX);
          console.log(event.detail.scaleY);
        },
    })
  },
6. 删除原本的配置 ， 自定义配置
data() {
    retrue {
        cropper: null
    }
}

  mounted() {  // 这里要用 mounted 操作 dom 元素
    const image = this.$refs.img
    this.cropper = new Cropper(image, {  // 这里设置为 this.
     viewMode: 1, // 定义裁纸器的查看模式 
     dragMode: 'move',  // 拖动模式
     aspectRatio: 1,  // 截图比例  默认是 16 | 9
     autoCropArea: 1, // 自动截取区域， 
     cropBoxMovable: false, // 截图区域是否可以移动，改为false就是 使画布移动
     cropBoxResizable: false, // 是否可以缩放
     background: false, // 不需要背景
     movable: true  // 这个默认就是 true， 就是画布是否可以移动， 可以不写
    })
  },

7. 获取结果的两种方式

onConfirm() {
    // 基于服务端的裁切使用 getData 方法获取裁切参数 , 这个没兼容问题，主要是后端来做
    // console.log(this.cropper.getData())
    
    // 纯客户端的裁切使用 getCroppedCanvas 获取裁切的文件对象  这个有兼容问题， 客户端慎用
    this.cropper.getCroppedCanvas().toBlob(blob => {
         this.updateUserPhoto(blob)
    })
}

8. 封装保存更新的函数
<update-photo 
v-if="isUpdatePhotoShow" 
:img="img" 
@close="isUpdatePhotoShow = false"
@update-photo="user.photo = $event">
  </update-photo>
import { updateUserPhoto } from '@/api/user'


    async updateUserPhoto(blob) {
      this.$toast.loading({
        message:'保存中----',
        forbidClick: true,
        duration:0
      })
       // 如果 Content-Type 要求是	application/json	，则 data 传普通对象 {}
        // 如果 Content-Type 要求是	multipart/form-data	，则 data 传 FormData 对象
        // 纵观所有数据接口，你会发现大多数的接口都要求 Content-Type 要求是	application/json
        // 一般只有涉及到文件上传的数据接口才要求Content-Type 要求是	multipart/form-data
        // 这个时候传递一个 FormData 对象
      try {
        const formData = new FormData()
        formData.append('photo', blob)
        
        const { data } = await updateUserPhoto(formData)
        this.$emit('close')
        this.$emit('update-photo', data.data.photo)
        this.$toast.success('更新成功')
      } catch (err) {
        this.$toast.fail('保存失败')
      }
    }

全部代码

<template>
  <div class="update-photo">
    <img class="img" :src="img" alt="" ref="img">
    <div class="toolbar">
       <div class="cancel" @click="$emit('close')">取消</div>
       <div class="confirm" @click="onConfirm">完成</div>
    </div>
  </div>
</template>

<script>
import 'cropperjs/dist/cropper.css'
import Cropper from 'cropperjs'
import { updateUserPhoto } from '@/api/user'

export default {

  data() {
    return {
      cropper: null,
    }
  },
  props: {
    img: {
      type: [String,Object],
      required: true,
    }
  },
  mounted() {
    const image = this.$refs.img
    this.cropper = new Cropper(image, {
      viewMode: 1,
      dragMode: 'move', 
      aspectRatio: 1,
      autoCropArea: 1,
      cropBoxMovable: false,
      cropBoxResizable: false,
      background: false,
      movable: true
    })
  },
  methods: {
    onConfirm() {
    // 基于服务端的裁切使用 getData 方法获取裁切参数 , 这个没兼容问题，主要是后端来做
    // console.log(this.cropper.getData())
    
    // 纯客户端的裁切使用 getCroppedCanvas 获取裁切的文件对象  这个有兼容问题， 客户端慎用
    this.cropper.getCroppedCanvas().toBlob(blob => {
        this.updateUserPhoto(blob)
    })
    },
    async updateUserPhoto(blob) {
      this.$toast.loading({
        message:'保存中----',
        forbidClick: true,
        duration:0
      })
       // 如果 Content-Type 要求是	application/json	，则 data 传普通对象 {}
        // 如果 Content-Type 要求是	multipart/form-data	，则 data 传 FormData 对象
        // 纵观所有数据接口，你会发现大多数的接口都要求 Content-Type 要求是	application/json
        // 一般只有涉及到文件上传的数据接口才要求Content-Type 要求是	multipart/form-data
        // 这个时候传递一个 FormData 对象
      try {
        const formData = new FormData()
        formData.append('photo', blob)
        
        const { data } = await updateUserPhoto(formData)
        this.$emit('close')
        this.$emit('update-photo', data.data.photo)
        this.$toast.success('更新成功')
      } catch (err) {
        this.$toast.fail('保存失败')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.update-photo {
  background-color: #000;
  height: 100%;
  .img {
    display: block;
    max-width: 100%;
  }
  .toolbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    .cancel, .confirm {
      width: 90px;
      height: 90px;
      font-size: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
    }
  }
}
</style>

8.0 index全部内容

<template>
  <div class="user-profile">
    <!-- 导航栏 -->
    <van-nav-bar
      class="page-nav-bar"
      title="个人信息"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- /导航栏 -->

    <input type="file" hidden ref="file" @change="onFileChange">

    <!-- 个人信息 -->
    <van-cell class="avatar-cell" title="头像" is-link center @click="$refs.file.click()">
      <van-image
        class="avatar"
        round
        fit="cover"
        :src="user.photo"
      />
    </van-cell>
    <van-cell title="昵称" :value="user .name" is-link @click="isUpdateNameShow = true"/>
    <van-cell title="性别" :value="user.gender === 0 ? '男' : '女'" is-link @click="isUpdateGenderShow = true"/>
    <van-cell title="生日" :value="user.birthday" is-link @click="isUpdateBirthdayShow = true" />
    <!-- /个人信息 -->

    <!-- 修改名称弹出层 -->
    <van-popup v-model="isUpdateNameShow" position="bottom" style="height: 100%">
      <update-name 
      v-if="isUpdateNameShow"
       @close="isUpdateNameShow = false"
       v-model="user.name"
      ></update-name>
    </van-popup>

    <!-- 编辑性别 -->
    <van-popup v-model="isUpdateGenderShow" position="bottom">
      <update-gender v-if="isUpdateGenderShow" v-model="user.gender" @close="isUpdateGenderShow = false">

      </update-gender>
    </van-popup>

    <!-- 编辑生日 -->
    <van-popup v-model="isUpdateBirthdayShow" position="bottom">
      <update-birthday v-if="isUpdateBirthdayShow" v-model="user.birthday" @close="isUpdateGenderShow = false">

      </update-birthday>
    </van-popup>

    <!-- 编辑照片 -->
    <van-popup v-model="isUpdatePhotoShow" position="bottom" style="height: 100%">
      <update-photo v-if="isUpdatePhotoShow" :img="img" @close="isUpdatePhotoShow = false"
      @update-photo="user.photo = $event">
      </update-photo>
    </van-popup>
  </div>
</template>

<script>
import { getUserProfile } from '@/api/user'
import UpdateName from './components/update-name.vue'
import UpdateGender from './components/update-gender.vue'
import UpdateBirthday from './components/update-birthday.vue'
import UpdatePhoto from './components/update-photo.vue'

export default {
  name: 'UserProfile',
  components: { 
    UpdateName,
    UpdateGender,
    UpdateBirthday,
    UpdatePhoto,
  },
  props: {},
  data () {
    return {
      user: {}, // 个人信息
      isUpdateNameShow: false, // 名称弹出层
      isUpdateGenderShow: false, // 年龄
      isUpdateBirthdayShow: false, // 生日
      isUpdatePhotoShow: false, // 照片
      img: null,

    }
  },
  computed: {},
  watch: {},
  created () {
    this.loadGetUserProfile()
  },
  mounted () {},
  methods: {
    async loadGetUserProfile() {
      try {
        const { data } = await getUserProfile()
        this.user = data.data
      } catch (err) {
        this.$toast('获取数据失败')
      }
    },
    onFileChange() {
      	// 获取文件对象
       const file = this.$refs.file.files[0]
       // 基于文章对象获取 blob 数据
       this.img = window.URL.createObjectURL(file)
       this.isUpdatePhotoShow = true
       
       // file-inpit 如果选了同一个文件不会触发 change 事件
       // 解决办法就是每次使用完毕， 把 它的 value 清空
       this.$refs.file.value = ''
    }
  }
}
</script>

<style scoped lang="less">
.user-profile {
  .van-popup {
    background-color: #f5f7f9;
  }
    .page-nav-bar {
      /deep/.van-icon {
        color: #fff;
      }
    }
  .avatar-cell {
    .van-cell__value {
      display: flex;
      flex-direction: row-reverse;
    }
    .avatar {
      width: 60px;
      height: 60px;
    }
  }
}
</style>

热门文章

暂无图片
编程学习 ·
2022/1/17 17:38:14

那些年让我们目瞪口呆的bug

程序员一生与bug奋战&#xff0c;可谓是杀敌无数&#xff0c;见怪不怪了&#xff01;在某知识社交平台中&#xff0c;一个“有哪些让程序员目瞪口呆的bug”的话题引来了6700多万的阅读&#xff0c;可见程序员们对一个话题的敏感度有多高。 1、麻省理工“只能发500英里的邮件” …
暂无图片
编程学习 ·
2022/1/17 17:28:10

redis的下载与安装

下载redis wget http://download.redis.io/releases/redis-5.0.0.tar.gz解压redis tar -zxvf redis-5.0.0.tar.gz编译 make安装 make install快链方便进入redis ln -s redis-5.0.0 redis
暂无图片
编程学习 ·
2022/1/17 17:18:09

《大话数据结构》第三章学习笔记--线性表（一）

线性表的定义 线性表&#xff1a;零个或多个数据元素的有限序列。 线性表元素的个数n定义为线性表的长度。n为0时&#xff0c;为空表。 在比较复杂的线性表中&#xff0c;一个数据元素可以由若干个数据项组成。 线性表的存储结构 顺序存储结构 可以用C语言中的一维数组来…
暂无图片
编程学习 ·
2022/1/17 17:08:07

对象的扩展

文章目录对象的扩展属性的简洁表示法属性名表达式方法的name属性属性的可枚举性和遍历可枚举性属性的遍历super关键字对象的扩展运算符解构赋值扩展运算符AggregateError错误对象对象的扩展 属性的简洁表示法 const foo bar; const baz {foo}; baz // {foo: "bar"…
暂无图片
编程学习 ·
2022/1/17 16:58:05

让程序员最头疼的5种编程语言

世界上的编程语言&#xff0c;按照其应用领域&#xff0c;可以粗略地分成三类。 有的语言是多面手&#xff0c;在很多不同的领域都能派上用场。大家学过的编程语言很多都属于这一类&#xff0c;比如说 C&#xff0c;Java&#xff0c; Python。 有的语言专注于某一特定的领域&…
暂无图片
编程学习 ·
2022/1/17 16:47:42

写论文注意事项

参考链接 给研究生修改了一篇论文后&#xff0c;该985博导几近崩溃…… 重点分析 摘要与结论几乎重合 这一条是我见过研究生论文中最常出现的事情&#xff0c;很多情况下&#xff0c;他们论文中摘要部分与结论部分重复率超过70%。对于摘要而言&#xff0c;首先要用一小句话引…
暂无图片
编程学习 ·
2022/1/17 16:37:40

安卓 串口开发

上图&#xff1a; 上码&#xff1a; 在APP grable添加 // 串口 需要配合在项目build.gradle中的repositories添加 maven {url "https://jitpack.io" }implementation com.github.licheedev.Android-SerialPort-API:serialport:1.0.1implementation com.jakewhart…
暂无图片
编程学习 ·
2022/1/17 16:27:38

2021-2027年中国铪市场调研与发展趋势分析报告

2021-2027年中国铪市场调研与发展趋势分析报告 本报告研究中国市场铪的生产、消费及进出口情况&#xff0c;重点关注在中国市场扮演重要角色的全球及本土铪生产商&#xff0c;呈现这些厂商在中国市场的铪销量、收入、价格、毛利率、市场份额等关键指标。此外&#xff0c;针对…
暂无图片
编程学习 ·
2022/1/17 16:07:32

Aggressive cows题目翻译

描述&#xff1a; Farmer John has built a new long barn, with N (2 < N < 100,000) stalls.&#xff08;John农民已经新建了一个长畜棚带有N&#xff08;2<N<100000&#xff09;个牛棚&#xff09; The stalls are located along a straight line at positions…
暂无图片
编程学习 ·
2022/1/17 15:47:28

剖析组建PMO的6个大坑︱PMO深度实践

随着事业环境因素的不断纷繁演进&#xff0c;项目时代正在悄悄来临。设立项目经理转岗、要求PMP等项目管理证书已是基操&#xff0c;越来越多的组织开始组建PMO团队&#xff0c;大有曾经公司纷纷建造中台的气质&#xff08;当然两者的本质并不相同&#xff0c;只是说明这个趋势…
暂无图片
编程学习 ·
2022/1/17 15:37:20

Flowable入门系列文章118 - 进程实例 07

1、获取流程实例的变量 GET运行时/进程实例/ {processInstanceId} /变量/ {变量名} 表1.获取流程实例的变量 - URL参数 参数需要值描述processInstanceId是串将流程实例的id添加到变量中。变量名是串要获取的变量的名称。 表2.获取流程实例的变量 - 响应代码 响应码描述200指…
暂无图片
编程学习 ·
2022/1/17 15:27:13

微信每天自动给女[男]朋友发早安和土味情话

微信通知&#xff0c;每天给女朋友发早安、情话、诗句、天气信息等~ 前言 之前逛GitHub的时候发现了一个自动签到的小工具&#xff0c;b站、掘金等都可以&#xff0c;我看了下源码发现也是很简洁&#xff0c;也尝试用了一下&#xff0c;配置也都很简单&#xff0c;主要是他有一…
暂无图片
编程学习 ·
2022/1/17 15:17:12

C语言二分查找详解

二分查找是一种知名度很高的查找算法&#xff0c;在对有序数列进行查找时效率远高于传统的顺序查找。 下面这张动图对比了二者的效率差距。 二分查找的基本思想就是通过把目标数和当前数列的中间数进行比较&#xff0c;从而确定目标数是在中间数的左边还是右边&#xff0c;将查…
暂无图片
编程学习 ·
2022/1/17 14:57:08

项目经理，你有什么优势吗？

大侠被一个问题问住了&#xff1a;你和别人比&#xff0c;你的优势是什么呢? 大侠听到这个问题后&#xff0c;脱口而出道&#xff1a;“项目管理能力和经验啊。” 听者抬头看了一下大侠&#xff0c;显然听者对大侠的这个回答不是很满意&#xff0c;但也没有继续追问。 大侠回家…
暂无图片
编程学习 ·
2022/1/17 14:47:06

nginx的负载均衡和故障转移

#注&#xff1a;proxy_temp_path和proxy_cache_path指定的路径必须在同一分区 proxy_temp_path /data0/proxy_temp_dir; #设置Web缓存区名称为cache_one&#xff0c;内存缓存空间大小为200MB&#xff0c;1天没有被访问的内容自动清除&#xff0c;硬盘缓存空间大小为30GB。 pro…
暂无图片
编程学习 ·
2022/1/17 14:27:02

业务逻辑漏洞

身份认证安全 绕过身份认证的几种方法 暴力破解 测试方法∶在没有验证码限制或者一次验证码可以多次使用的地方&#xff0c;可以分为以下几种情况︰ (1)爆破用户名。当输入的用户名不存在时&#xff0c;会显示请输入正确用户名&#xff0c;或者用户名不存在 (2)已知用户名。…