【vue脚手架配置代理+github用户搜索案例+vue项目中常用的发送Ajax请求的库+slot插槽】

news2024/11/23 19:49:40

vue脚手架配置代理+github用户搜索案例+vue项目中常用的发送Ajax请求的库+slot插槽

  • 1 vue脚手架配置代理
  • 2 github用户搜索案例
    • 2.1 静态列表
    • 2.2 列表展示
    • 2.3 完善案例
  • 3 vue项目中常用的发送Ajax请求的库
    • 3.1 xhr
    • 3.2 jQuery
    • 3.3 axios
    • 3.4 fetch
    • 3.5 vue-resource
  • 4 slot 插槽
    • 4.1 效果
    • 4.2 理解

1 vue脚手架配置代理

  • 下载axios
    在这里插入图片描述
  • 引用axios：import axios from 'axios'
  • 解决跨域方法：
    1> cors：http://t.csdnimg.cn/VdMIT
    在这里插入图片描述
    2> jsonp：用的少，只能解决get请求的跨域问题
    3> 配置一个代理服务器
    在这里插入图片描述
  • 配置一个代理服务器方式一：
    开启8080代理服务器方式：nginx(较复杂，需借助后端知识) 、vue-cli(重点)。
    1> 第一步：先通过cmd打开两台服务器
    在这里插入图片描述
    打开结果如下图所示：
    在这里插入图片描述
    如忘记打开，终端将会出现GET http://localhost:8081/students 500 (Internal Server Error)错误。
    2> 第二步：在vue.config.js文件里面，加入此语句
    在这里插入图片描述
    3> 第三步：更改App.vue文件中的端口号
    在这里插入图片描述
    4> 第四步：点击按钮后，请求结果如下
    在这里插入图片描述
工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）
优点：配置简单，请求资源时直接发给前端（8080）即可。
缺点：1.不能配置多个代理
     2.不能灵活控制走不走代理
  • 配置一个代理服务器方式二：
    1> 第一步：依旧先通过cmd打开两台服务器
    2> 第二步：在vue.config.js文件里面，加入此语句
    在这里插入图片描述
    changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000 changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080 changeOrigin默认值为true
    3> 第三步：更新App.vue文件中的内容
    在这里插入图片描述
    4> 第四步：点击按钮后，请求结果如下
    在这里插入图片描述
优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
缺点：配置略微繁琐，请求资源时必须加前缀。

2 github用户搜索案例

在这里插入图片描述

2.1 静态列表

  • 目录展示：
    在这里插入图片描述
  • App.vue:
    在这里插入图片描述
  • Search.vue:
    在这里插入图片描述
  • List.vue:
    在这里插入图片描述
  • index.html:
    在这里插入图片描述

2.2 列表展示

  • List组件和Search组件为兄弟组件，可使用全局事件总线、消息订阅与发布、把数据交给最外侧App等方式实现数据传递。
  • main.js:
    在这里插入图片描述
  • Search.vue：
<template>
    <section class="jumbotron">
        <h3 class="jumbotron-heading">Search Github Users</h3>
        <div>
            <input type="text" placeholder="enter the name you search" v-model="keyWord"/>&nbsp;
            <button @click="searchUsers">Search</button>
        </div>
    </section>
</template>

<script>
    // 引入axios
    import axios from 'axios'

    export default {
        name:'Search',
        data() {
            return {
                keyWord:''
            }
        },
        methods: {
            searchUsers() {
                // 模板字符串
                axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
                    response => {
                        console.log('请求成功了');
                        this.$bus.$emit('getUsers',response.data.items)
                    },
                    error => {
                        console.log('请求失败了',error.message);
                    }
                )
            }
        }
    }
</script>
  • List.vue:
<template>
    <div class="row">
        <div class="card" v-for="user in users" :key="user.login">
            <a :href="user.html_url" target="_blank">
                <img :src="user.avatar_url" style='width: 100px'/>
            </a>
            <p class="card-text">{{user.login}}</p>
        </div>
        
    </div>
</template>

<script>
    export default {
        name:'List',
        data() {
            return {
                users:[]
            }
        },
        // 利用全局事件总线
        mounted() {
            this.$bus.$on('getUsers',(users)=>{
                console.log('我是List组件，收到了数据：',users);
                this.users = users
            })
        }
    }
</script>

<style>
    .album {
        min-height: 50rem; /* Can be removed; just added for demo purposes */
        padding-top: 3rem;
        padding-bottom: 3rem;
        background-color: #f7f7f7;
    }   
    .card {
        float: left;
        width: 33.333%;
        padding: .75rem;
        margin-bottom: 2rem;
        border: 1px solid #efefef;
        text-align: center;
    }   
    .card > img {
        margin-bottom: .75rem;
        border-radius: 100px;
    }   
    .card-text {
        font-size: 85%;
    }
</style>
  • 效果展示(点击头像跳转到用户github主页)：
    在这里插入图片描述

2.3 完善案例

  • 以上展示了请求成功时的呈现(users)，还需对其它三种展示进行完善。
  • 1> 添加一个欢迎词(welcome)
  • 2> 当内容未加载出来时添加一个加载中(loading)
  • 3> 添加一个请求失败时的呈现(error)
  • List.vue:
<template>
    <div class="row">
        <!-- 展示用户列表 -->
        <div v-show="info.users.length" class="card" v-for="user in info.users" :key="user.login">
            <a :href="user.html_url" target="_blank">
                <img :src="user.avatar_url" style='width: 100px'/>
            </a>
            <p class="card-text">{{user.login}}</p>
        </div>
        <!-- 展示欢迎词 -->
        <h1 v-show="info.isFirst">欢迎使用！</h1>
        <!-- 展示加载中 -->
        <h1 v-show="info.isLoading">加载中....</h1>
        <!-- 展示错误信息 -->
        <h1 v-show="info.errMsg">{{info.errMsg}}</h1>
    </div>
</template>

<script>
    export default {
        name:'List',
        data() {
            return {
                info:{
                    isFirst:true, // 是否为初次展示
                    isLoading:false, // 是否处于加载中
                    errMsg:'', // 存储错误信息
                    users:[]
                }
            }
        },
        // 利用全局事件总线
        mounted() {
            // this.$bus.$on('updateListData',(isFirst,isLoading,errMsg,users)=>{
            this.$bus.$on('updateListData',(dataObj)=>{
                // console.log('我是List组件，收到了数据：',users);
                /* this.isFirst = isFirst
                this.isLoading = isLoading
                this.errMsg = errMsg
                this.users = users */
                // this.info = dataObj // 此写法没错 但由于isFirst后续不再变化没有书写 会弄丢isFirst数据
                // 因此通过字面量的形式去合并对象
                this.info = {...this.info,...dataObj}
            })
        }
    }
</script>

<style>
    .album {
        min-height: 50rem; /* Can be removed; just added for demo purposes */
        padding-top: 3rem;
        padding-bottom: 3rem;
        background-color: #f7f7f7;
    }   
    .card {
        float: left;
        width: 33.333%;
        padding: .75rem;
        margin-bottom: 2rem;
        border: 1px solid #efefef;
        text-align: center;
    }   
    .card > img {
        margin-bottom: .75rem;
        border-radius: 100px;
    }   
    .card-text {
        font-size: 85%;
    }
</style>
  • Search.vue：
<template>
    <section class="jumbotron">
        <h3 class="jumbotron-heading">Search Github Users</h3>
        <div>
            <input type="text" placeholder="enter the name you search" v-model="keyWord"/>&nbsp;
            <button @click="searchUsers">Search</button>
        </div>
    </section>
</template>

<script>
    // 引入axios
    import axios from 'axios'

    export default {
        name:'Search',
        data() {
            return {
                keyWord:''
            }
        },
        methods: {
            searchUsers() {
                // 请求前先更新List的数据
                this.$bus.$emit('updateListData',{isFirst:false,isLoading:true,errMsg:'',users:[]}) 
                // 发送请求
                // 模板字符串
                axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
                    response => {
                        console.log('请求成功了');
                        // this.$bus.$emit('getUsers',response.data.items)
                        // 请求成功后更新List的数据
                        // 因为isFirst后续不再发生变化 故可删掉
                        this.$bus.$emit('updateListData',{isLoading:false,errMsg:'',users:response.data.items})
                    },
                    error => {
                        console.log('请求失败了',error.message);
                        // 请求失败后更新List的数据
                        this.$bus.$emit('updateListData',{isLoading:false,errMsg:error.message,users:[]})
                    }
                )
            }
        }
    }
</script>
  • 效果展示：
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

3 vue项目中常用的发送Ajax请求的库

3.1 xhr

3.2 jQuery

3.3 axios

  • 通用的 Ajax 请求库, 官方推荐，使用广泛。

3.4 fetch

3.5 vue-resource

  • vue插件库, vue1.x 使用广泛，官方已不维护。
  • 安装：npm i vue-resource
  • 引入与使用：
    在这里插入图片描述
  • github用户搜索案例的Search.vue组件需改为：
    在这里插入图片描述

4 slot 插槽

4.1 效果

在这里插入图片描述
App.vue:

<template>
  <div class="container">
    <Category title="美食" :listData="foods"/>
    <Category title="游戏" :listData="games"/>
    <Category title="电影" :listData="films"/>
  </div>
</template>

<script>
  import Category from './components/Category.vue'
  
  export default {
    name:'App',
    components:{Category},
    data() {
      return {
        foods:['火锅','烧烤','小龙虾','牛排'],
        games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
        films:['《教父》','《拆弹专家》','《你好，李焕英》','《米奇妙妙屋》']
      }
    }
  }
</script>

<style lang="css">
  .container {
    display: flex;
    justify-content: space-around;
  }
</style>

Category.vue:

<template>
    <div class="category">
        <h3>{{title}}分类</h3>
        <ul>
            <li v-for="(item,index) in listData" :key="index">{{item}}</li>
        </ul>
    </div>
</template>

<script>
    export default {
        name:'Category',
        props:['listData','title']
    }
</script>

<style>
    .category {
        background-color: skyblue;
        width: 200px;
        height: 300px;
    }
    h3 {
        text-align: center;
        background-color: orange;
    }
</style>

在这里插入图片描述
App.vue:

<template>
  <div class="container">
    <Category title="美食">
      <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
    </Category>

    <Category title="游戏">
      <ul>
        <li v-for="(g,index) in games" :key="index">{{g}}</li>
      </ul>
    </Category>

    <Category title="电影">
      <video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
    </Category>
  </div>
</template>

<script>
  import Category from './components/Category.vue'
  
  export default {
    name:'App',
    components:{Category},
    data() {
      return {
        foods:['火锅','烧烤','小龙虾','牛排'],
        games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
        films:['《教父》','《拆弹专家》','《你好，李焕英》','《米奇妙妙屋》']
      }
    },
  }
</script>

<style scoped>
  .container {
    display: flex;
    justify-content: space-around;
  }
  img {
    width: 100%;
  }
  video {
    width: 100%;
  }
</style>

Category.vue:

<template>
    <div class="category">
        <h3>{{title}}分类</h3>
        <!-- 定义一个插槽(挖个坑，等着组件的使用者进行填充) -->
        <slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
        
    </div>
</template>

<script>
    export default {
        name:'Category',
        props:['title']
    }
</script>

<style>
    .category {
        background-color: skyblue;
        width: 200px;
        height: 300px;
    }
    h3 {
        text-align: center;
        background-color: orange;
    }
</style>

在这里插入图片描述
App.vue:

<template>
  <div class="container">
    <Category title="美食">
      <img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
      <a slot="footer" href="https://home.meishichina.com/recipe.html">更多美食</a>
    </Category>

    <Category title="游戏">
      <ul slot="center">
        <li v-for="(g,index) in games" :key="index">{{g}}</li>
      </ul>
      <div class="foot" slot="footer">
        <a href="https://www.baidu.com/">单机游戏</a>
        <a href="https://www.baidu.com/">网络游戏</a>
      </div>
    </Category>

    <Category title="电影">
      <video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
      <!-- 写法一 -->
      <!-- <template slot="footer"> -->
      <!-- 写法二 -->
      <template v-slot:footer>
        <div class="foot">
          <a href="https://www.baidu.com/">经典</a>
          <a href="https://www.baidu.com/">热门</a>
          <a href="https://www.baidu.com/">推荐</a>
        </div>
        <h4>欢迎前来观影！</h4>
      </template>
    </Category>
  </div>
</template>

<script>
  import Category from './components/Category.vue'
  
  export default {
    name:'App',
    components:{Category},
    data() {
      return {
        foods:['火锅','烧烤','小龙虾','牛排'],
        games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
        films:['《教父》','《拆弹专家》','《你好，李焕英》','《米奇妙妙屋》']
      }
    },
  }
</script>

<style scoped>
  .container,.foot {
    display: flex;
    justify-content: space-around;
  }
  img {
    width: 100%;
  }
  video {
    width: 100%;
  }
  h4 {
    text-align: center;
  }
  a {
    display: block;
    text-align: center;
  }
</style>

Category.vue:

<template>
    <div class="category">
        <h3>{{title}}分类</h3>
        <!-- 定义一个插槽(挖个坑，等着组件的使用者进行填充) -->
        <slot name="center">我是一些默认值，当使用者没有传递具体结构时，我会出现1</slot>
        <slot name="footer">我是一些默认值，当使用者没有传递具体结构时，我会出现2</slot>
    </div>
</template>

<script>
    export default {
        name:'Category',
        props:['title']
    }
</script>

<style>
    .category {
        background-color: skyblue;
        width: 200px;
        height: 300px;
    }
    h3 {
        text-align: center;
        background-color: orange;
    }
</style>

在这里插入图片描述
App.vue:

<template>
  <div class="container">
    <Category title="游戏">
      <template scope="atguigu">
        <ul>
          <li v-for="(g,index) in atguigu.games" :key="index">{{g}}</li>
        </ul>
      </template>
    </Category>
      
    <Category title="游戏">
      <!-- <template scope="atguigu">
        <ol>
          <li v-for="(g,index) in atguigu.games" :key="index">{{g}}</li>
        </ol>
      </template> -->
      <!-- 解构赋值写法 -->
      <template scope="{games}">
        <ol>
          <li v-for="(g,index) in games" :key="index">{{g}}</li>
        </ol>
      </template>
    </Category>

    <Category title="游戏">
      <!-- <template scope="atguigu"> -->
      <template slot-scope="{games}">
        <h4 v-for="(g,index) in games" :key="index">{{g}}</h4>
      </template>
    </Category>
  </div>
</template>

<script>
  import Category from './components/Category.vue'
  
  export default {
    name:'App',
    components:{Category},
    
  }
</script>

<style scoped>
  .container,.foot {
    display: flex;
    justify-content: space-around;
  }
  img {
    width: 100%;
  }
  video {
    width: 100%;
  }
  h4 {
    text-align: center;
  }
  a {
    display: block;
    text-align: center;
  }
</style>

Category.vue:

<template>
    <div class="category">
        <h3>{{title}}分类</h3>
        <slot :games="games">我是默认的一些内容</slot>
    </div>
</template>

<script>
    export default {
        name:'Category',
        props:['title'],
        data() {
            return {
                games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
            }
        },
    }
</script>

<style>
    .category {
        background-color: skyblue;
        width: 200px;
        height: 300px;
    }
    h3 {
        text-align: center;
        background-color: orange;
    }
</style>

4.2 理解

  • 父组件向子组件传递带数据的标签，当一个组件有不确定的结构时, 就需要使用slot 技术，注意：插槽内容是在父组件中编译后，再传递给子组件的。
  • 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件 ——> 子组件。
  • 分类：默认插槽、具名插槽、作用域插槽
  • 使用方式：
    1> 默认插槽：
    在这里插入图片描述
    2> 具名插槽：
    在这里插入图片描述
    3> 作用域插槽：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）
    在这里插入图片描述

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

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

相关文章

【嵌入式】开源shell命令行的移植和使用（1）——nr_micro_shell

【嵌入式】开源shell命令行的移植和使用（1）——nr_micro_shell

目录 一 背景说明 二 移植准备 三 移植过程 四 实际使用 一 背景说明 在进行调试和维护时&#xff0c;常常需要与单片机进行交互&#xff0c;获取、设置某些参数或执行某些操作&#xff0c;nr_micro_shell正是为满足这一需求&#xff0c;针对资源较少的MCU编写的基本命令行…
阅读更多...
VT-MRPA1-151-1X/V0/0控制2FRE16模块式模拟放大器

VT-MRPA1-151-1X/V0/0控制2FRE16模块式模拟放大器

适用于控制带有电气位置反馈的直动式比例减压阀&#xff08;DBETR- 1X 类型&#xff09;或带有电气位置反馈的比例流量控制阀&#xff08;2FRE... 类型&#xff09;&#xff1b;控制值输入 1 0 V&#xff08;差动输入&#xff09;&#xff1b; 可分别调节“上/下”斜坡时间的斜…
阅读更多...
计算机网络：快速了解网络框架

计算机网络：快速了解网络框架

文章目录 前言一、什么是Internet&#xff1f;1.从具体构成角度什么是协议&#xff1f; 2.从服务角度3小结 二、网络边缘1.采用网络设施面向连接服务&#xff08;TCP&#xff09;2.采用基础设施的无连接服务&#xff08;UDP&#xff09; 三、网络的核心1.电路交换2.分组交换3.分…
阅读更多...
vue2 el-table 封装

vue2 el-table 封装

vue2 el-table 封装 在 custom 文件夹下面创建 tableList.vue直接上代码&#xff08;代码比较多&#xff0c;复制可直接用&#xff09; <template><div class"mp-list"><el-tableref"multipleTable"class"mp-custom-table":dat…
阅读更多...
一起学docker系列之十二什么是dockerfile

一起学docker系列之十二什么是dockerfile

目录 1 基本概念2 语法规则3 Dockerfile构建步骤4 Dockerfile、Docker镜像和Docker容器的关系5 保留字介绍5.1 FROM5.2 MAINTAINER5.3 RUN5.4 EXPOSE5.5 WORKDIR5.6 USER5.7 ENV5.8 ADD5.9 COPY5.10 VOLUME5.11 CMD5.12 ENTRYPOINT 6 总结7 参考地址 1 基本概念 Dockerfile是一…
阅读更多...
cpu飙升问题排查以及解决

cpu飙升问题排查以及解决

1、查看内存占用排行 top -c 2、查看服务器内存使用情况 free -h 3、查看文件夹磁盘空间大小 Linux 查看各文件夹大小命令du -h --max-depth1 (1)查看文件目录一级目录磁盘空间 du -h --max-depth1 (2&#xff09;查看指定文件目录 du sh home --max-depth2 4、Linux下…
阅读更多...
Linux系统---环境变量+内核进程调度队列(选学)

Linux系统---环境变量+内核进程调度队列(选学)

顾得泉&#xff1a;个人主页 个人专栏&#xff1a;《Linux操作系统》 《C/C》 键盘敲烂&#xff0c;年薪百万&#xff01; 一、环境变量 1.基本概念 环境变量(environment variables)一般是指在操作系统中用来指定操作系统运行环境的一些参数&#xff0c;如: 我们在编写CI/…
阅读更多...
Java-多线程基本知识学习总结

Java-多线程基本知识学习总结

多线程 前言一、线程的创建1、继承Thread类2、实现Runnable接口 二、线程的生命周期三、操作线程的方法1、线程的休眠2、线程的加入3、线程的礼让4、线程的优先级 四、线程同步End 前言 Java是支持多线程的编程语言&#xff0c;所谓多线程就是程序能够同时完成多种操作。 计算…
阅读更多...
MSB3541 Files 的值“＜＜＜＜＜＜＜ HEAD”无效。路径中具有非法字符。

MSB3541 Files 的值“＜＜＜＜＜＜＜ HEAD”无效。路径中具有非法字符。

MSB3541 Files 的值“<<<<<<< HEAD”无效。路径中具有非法字符。 一般来说出现这个问题是因为使用git版本控制工具合并代码出现了问题&#xff0c;想要解决也很简单。 如图点击错误后定位到文件&#xff0c;发现也没有什么问题。 根据错误后边的提示&a…
阅读更多...
GoWeb学习-第二天

GoWeb学习-第二天

文章目录 从零开始学Go web——第二天一、安装Go语言二、建立web目录2.1 创建GO语言包目录2.2 创建Go web文件 三、编译并运行Go web应用3.1 编译并运行3.2 查看结果 从零开始学Go web——第二天 ​ 第一天我们了解了与web息息相关的HTTP协议&#xff0c;聊了聊Go与web的关系等…
阅读更多...
深度解读：为什么要做数据合规？如何做到数据合规？

深度解读：为什么要做数据合规？如何做到数据合规？

数据资源“入表”在即&#xff0c;企业更需筑牢数据合规防线。但企业主企业购买数据、获取数据到底是否合法合规&#xff0c;入表如何防范合规风险&#xff1f;上周三&#xff0c;亿信华辰邀请到北京鑫诺律师事务所高级合伙人、管委会副主任武婕将和大家分享《数据入表法律合规…
阅读更多...
扩散模型DDPM学习笔记

扩散模型DDPM学习笔记

扩散模型DDPM 文章目录 扩散模型DDPM如何运作基本概念训练过程推理过程&#xff1a; 目标损失函数推导评估标准 论文地址&#xff1a; Denoising Diffusion Probabilistic Models (DDPM) 如何运作 ​ 从guassian distribution进行采样得到一个噪声的图片&#xff0c;图片大小…
阅读更多...
使字符串的单词倒序输出表示

使字符串的单词倒序输出表示

题目 任务描述 本关任务&#xff1a;请实现函数 revWordoder&#xff0c;能够将 pa 指向的单词表字符串中的所有单词&#xff0c;按相反顺序放入 pb&#xff0c;同时去除多余的空格&#xff0c;单词之间只留一个空格. 例如 pa 中为 red blue, 则调用函数后&#xff0c;pb 中为b…
阅读更多...
如何通过Portal实现消息集成

如何通过Portal实现消息集成

在数字化时代浪潮下&#xff0c;信息的流通与交互已变得至关重要&#xff0c;不论是在企业内部日常协作&#xff0c;还是与外部客户的紧密沟通&#xff0c;信息的快速、准确、实时传递都成为了确保业务顺畅进行的关键因素、决策精准的核心要素。 为了满足这种日益增长的需求&a…
阅读更多...
学生护眼灯怎么选？2023备考护眼台灯推荐

学生护眼灯怎么选？2023备考护眼台灯推荐

近期&#xff0c;许多“护眼台灯是否是智商税”的帖子频繁出现&#xff0c;引起了许多群众的关注&#xff0c;作为一名护眼台灯资深使用者&#xff0c;在这里声明一下&#xff0c;护眼台灯绝对不是智商税。护眼台灯是通过调节光线亮度和色温&#xff0c;降低蓝光辐射&#xff0…
阅读更多...
苹果提醒事项怎么用？几个简单步骤就能学会！

苹果提醒事项怎么用？几个简单步骤就能学会！

苹果提醒事项可以帮助你轻松管理待办事项&#xff0c;让你更好地安排自己的时间和工作。但是&#xff0c;有些小伙伴可能对如何使用这个功能还有一些疑问。苹果提醒事项怎么用&#xff1f;不要担心&#xff0c;小编将为大家提供使用提醒事项的方法&#xff0c;帮助你学会如何使…
阅读更多...
代码随想录算法训练营第四十九天【动态规划part10】 | 121. 买卖股票的最佳时机、122.买卖股票的最佳时机II

代码随想录算法训练营第四十九天【动态规划part10】 | 121. 买卖股票的最佳时机、122.买卖股票的最佳时机II

121. 买卖股票的最佳时机 题目链接&#xff1a; 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 求解思路&#xff1a; 动规五部曲 确定dp数组及其下标含义&#xff1a;使用一个二维数组dp[i][2]&#xff0c;dp[i][0]代表持有股票的最大收益&…
阅读更多...
【VRTK】【VR开发】【Unity】9-瞬移

【VRTK】【VR开发】【Unity】9-瞬移

课程配套学习资源下载 https://download.csdn.net/download/weixin_41697242/88485426?spm=1001.2014.3001.5503 【移动的种类】 瞬移只是VR中移动的一种种类，其它还有连续移动，物理移动，摔臂移动等等。 瞬移自身也有多个分类，本篇介绍： 即时瞬移冲刺瞬移定点瞬移【瞬…
阅读更多...
一篇教会你java内存图怎么画

一篇教会你java内存图怎么画

首先我们要知道&#xff1a; 线程的本质是栈&#xff1b;程序执行时&#xff0c;在java栈中&#xff0c;成立一个线程栈&#xff0c;调用方法时方法不断压栈出栈&#xff0c;这个压栈出栈的过程就是线程执行的过程。方法执行 拷贝入栈 &#xff0c;执行完成 出栈&#xff0c;从…
阅读更多...
leetcode刷题详解十一

leetcode刷题详解十一

⭕️583. 两个字符串的删除操作 思路&#xff1a;核心代码就是最长公共子序列&#xff0c;但是需要注意的是结果 就是如果说公共子序列为0&#xff0c;则需要两个字符串长度的才行 如果有&#xff0c;就是 n m ∗ 2 d p [ n ] [ m ] nm*2dp[n][m] nm∗2dp[n][m] int minDist…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023