vue-3

news2024/11/28 20:34:30

一、文章内容概括

1.生命周期

  1. 生命周期介绍
  2. 生命周期的四个阶段
  3. 生命周期钩子
  4. 声明周期案例

2.工程化开发入门

  1. 工程化开发和脚手架
  2. 项目运行流程
  3. 组件化
  4. 组件注册

二、Vue生命周期

思考：什么时候可以发送初始化渲染请求？（越早越好）什么时候可以开始操作dom？（至少dom得渲染出来）

Vue生命周期：就是一个Vue实例从创建 到 销毁 的整个过程。

生命周期四个阶段：① 创建 ② 挂载 ③ 更新 ④ 销毁

1.创建阶段：创建响应式数据

2.挂载阶段：渲染模板

3.更新阶段：修改数据，更新视图

4.销毁阶段：销毁Vue实例

在这里插入图片描述

三、Vue生命周期钩子

Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】→ 让开发者可以在【特定阶段】运行自己的代码

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="app">
    <h3>{{ title }}</h3>
    <div>
      <button @click="count--">-</button>
      <span>{{ count }}</span>
      <button @click="count++">+</button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count: 100,
        title: '计数器'
      },
      // 1. 创建阶段（准备数据）
      beforeCreate () {
        console.log('beforeCreate 响应式数据准备好之前', this.count)
        // 此时this.count为undefind
      },
      created () {
        console.log('created 响应式数据准备好之后', this.count)
        // this.数据名 = 请求回来的数据
        // 可以开始发送初始化渲染的请求了
      },

      // 2. 挂载阶段（渲染模板）
      beforeMount () {
           // 结果：{{ title }}
        console.log('beforeMount 模板渲染之前', document.querySelector('h3').innerHTML)
      },
      mounted () {
          // 结果："计数器"
        console.log('mounted 模板渲染之后', document.querySelector('h3').innerHTML)
        // 可以开始操作dom了
      },

      // 3. 更新阶段(修改数据 → 更新视图)
      beforeUpdate () {
        console.log('beforeUpdate 数据修改了，视图还没更新', document.querySelector('span').innerHTML)
      },
      updated () {
        console.log('updated 数据修改了，视图已经更新', document.querySelector('span').innerHTML)
      },

      // 4. 卸载阶段
      beforeDestroy () {
        console.log('beforeDestroy, 卸载前')
        console.log('清除掉一些Vue以外的资源占用，定时器，延时器...')
      },
      destroyed () {
        console.log('destroyed，卸载后')
      }
    })
  </script>
</body>
</html>

四、生命周期钩子小案例

1.在created中发送数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .news {
            display: flex;
            height: 120px;
            width: 600px;
            margin: 0 auto;
            padding: 20px 0;
            cursor: pointer;
        }

        .news .left {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding-right: 10px;
        }

        .news .left .title {
            font-size: 20px;
        }

        .news .left .info {
            color: #999999;
        }

        .news .left .info span {
            margin-right: 20px;
        }

        .news .right {
            width: 160px;
            height: 120px;
        }

        .news .right img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>

<body>

    <div id="app">
        <ul>
            <li v-for="(item, index) in list" :key="item.id" class="news">
                <div class="left">
                    <div class="title">{{ item.title }}</div>
                    <div class="info">
                        <span>{{ item.source }}</span>
                        <span>{{ item.time }}</span>
                    </div>
                </div>
                <div class="right">
                    <img :src="item.img" alt="">
                </div>
            </li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        // 接口地址：http://hmajax.itheima.net/api/news
        // 请求方式：get
        const app = new Vue({
            el: '#app',
            data: {
                list: []
            },
            async created() {
                // 1. 发送请求获取数据
                const res = await axios.get('http://hmajax.itheima.net/api/news')
                // 2. 更新到 list 中，用于页面渲染 v-for
                this.list = res.data.data
            }
        })
    </script>
</body>

</html>

2.在mounted中获取焦点

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例-获取焦点</title>
    <!-- 初始化样式 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset.css@2.0.2/reset.min.css">
    <!-- 核心样式 -->
    <style>
        html,
        body {
            height: 100%;
        }

        .search-container {
            position: absolute;
            top: 30%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }

        .search-container .search-box {
            display: flex;
        }

        .search-container img {
            margin-bottom: 30px;
        }

        .search-container .search-box input {
            width: 512px;
            height: 16px;
            padding: 12px 16px;
            font-size: 16px;
            margin: 0;
            vertical-align: top;
            outline: 0;
            box-shadow: none;
            border-radius: 10px 0 0 10px;
            border: 2px solid #c4c7ce;
            background: #fff;
            color: #222;
            overflow: hidden;
            box-sizing: content-box;
            -webkit-tap-highlight-color: transparent;
        }

        .search-container .search-box button {
            cursor: pointer;
            width: 112px;
            height: 44px;
            line-height: 41px;
            line-height: 42px;
            background-color: #ad2a27;
            border-radius: 0 10px 10px 0;
            font-size: 17px;
            box-shadow: none;
            font-weight: 400;
            border: 0;
            outline: 0;
            letter-spacing: normal;
            color: white;
        }

        body {
            background: no-repeat center /cover;
            background-color: #edf0f5;
        }
    </style>
</head>

<body>
    <div class="container" id="app">
        <div class="search-container">
            <img src="https://www.itheima.com/images/logo.png" alt="">
            <div class="search-box">
                <input type="text" v-model="words" id="inp">
                <button>搜索一下</button>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                words: ''
            },
            // 核心思路：
            // 1. 等input框渲染出来 mounted 钩子
            // 2. 让input框获取焦点 inp.focus()
            mounted() {
                document.querySelector('#inp').focus()
            }
        })
    </script>

</body>

</html>

五、案例-小黑记账清单

1.需求图示：

在这里插入图片描述

2.需求分析

1.基本渲染

2.添加功能

3.删除功能

4.饼图渲染

3.思路分析

1.基本渲染

  • 立刻发送请求获取数据 created
  • 拿到数据，存到data的响应式数据中
  • 结合数据，进行渲染 v-for
  • 消费统计 —> 计算属性

2.添加功能

  • 收集表单数据 v-model，使用指令修饰符处理数据
  • 给添加按钮注册点击事件，对输入的内容做非空判断，发送请求
  • 请求成功后，对文本框内容进行清空
  • 重新渲染列表

3.删除功能

  • 注册点击事件，获取当前行的id
  • 根据id发送删除请求
  • 需要重新渲染

4.饼图渲染

  • 初始化一个饼图 echarts.init(dom) mounted钩子中渲染
  • 根据数据试试更新饼图 echarts.setOptions({…})

4.代码准备

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- CSS only -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" />
    <style>
        .red {
            color: red !important;
        }

        .search {
            width: 300px;
            margin: 20px 0;
        }

        .my-form {
            display: flex;
            margin: 20px 0;
        }

        .my-form input {
            flex: 1;
            margin-right: 20px;
        }

        .table> :not(:first-child) {
            border-top: none;
        }

        .contain {
            display: flex;
            padding: 10px;
        }

        .list-box {
            flex: 1;
            padding: 0 30px;
        }

        .list-box a {
            text-decoration: none;
        }

        .echarts-box {
            width: 600px;
            height: 400px;
            padding: 30px;
            margin: 0 auto;
            border: 1px solid #ccc;
        }

        tfoot {
            font-weight: bold;
        }

        @media screen and (max-width: 1000px) {
            .contain {
                flex-wrap: wrap;
            }

            .list-box {
                width: 100%;
            }

            .echarts-box {
                margin-top: 30px;
            }
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="contain">
            <!-- 左侧列表 -->
            <div class="list-box">

                <!-- 添加资产 -->
                <form class="my-form">
                    <input v-model.trim="name" type="text" class="form-control" placeholder="消费名称" />
                    <input v-model.number="price" type="text" class="form-control" placeholder="消费价格" />
                    <button @click="add" type="button" class="btn btn-primary">添加账单</button>
                </form>

                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>编号</th>
                            <th>消费名称</th>
                            <th>消费价格</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) in list" :key="item.id">
                            <td>{{ index + 1 }}</td>
                            <td>{{ item.name }}</td>
                            <td :class="{ red: item.price > 500 }">{{ item.price.toFixed(2) }}</td>
                            <td><a @click="del(item.id)" href="javascript:;">删除</a></td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="4">消费总计： {{ totalPrice.toFixed(2) }}</td>
                        </tr>
                    </tfoot>
                </table>
            </div>

            <!-- 右侧图表 -->
            <div class="echarts-box" id="main"></div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        /**
         * 接口文档地址：
         * https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058
         * 
         * 功能需求：
         * 1. 基本渲染
         *    (1) 立刻发送请求获取数据 created
         *    (2) 拿到数据，存到data的响应式数据中
         *    (3) 结合数据，进行渲染 v-for
         *    (4) 消费统计 => 计算属性
         * 2. 添加功能
         *    (1) 收集表单数据 v-model
         *    (2) 给添加按钮注册点击事件，发送添加请求
         *    (3) 需要重新渲染
         * 3. 删除功能
         *    (1) 注册点击事件，传参传 id
         *    (2) 根据 id 发送删除请求
         *    (3) 需要重新渲染
         * 4. 饼图渲染
         *    (1) 初始化一个饼图 echarts.init(dom)  mounted钩子实现
         *    (2) 根据数据实时更新饼图 echarts.setOption({ ... })
         */
        const app = new Vue({
            el: '#app',
            data: {
                list: [],
                name: '',
                price: ''
            },
            computed: {
                totalPrice() {
                    return this.list.reduce((sum, item) => sum + item.price, 0)
                }
            },
            created() {
                // const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
                //   params: {
                //     creator: '小黑'
                //   }
                // })
                // this.list = res.data.data

                this.getList()
            },
            mounted() {
                this.myChart = echarts.init(document.querySelector('#main'))
                this.myChart.setOption({
                    // 大标题
                    title: {
                        text: '消费账单列表',
                        left: 'center'
                    },
                    // 提示框
                    tooltip: {
                        trigger: 'item'
                    },
                    // 图例
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    // 数据项
                    series: [
                        {
                            name: '消费账单',
                            type: 'pie',
                            radius: '50%', // 半径
                            data: [
                                // { value: 1048, name: '球鞋' },
                                // { value: 735, name: '防晒霜' }
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                })
            },

            methods: {
                async getList() {
                    const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
                        params: {
                            creator: '小黑'
                        }
                    })
                    this.list = res.data.data

                    // 更新图表
                    this.myChart.setOption({
                        // 数据项
                        series: [
                            {
                                // data: [
                                //   { value: 1048, name: '球鞋' },
                                //   { value: 735, name: '防晒霜' }
                                // ]
                                data: this.list.map(item => ({ value: item.price, name: item.name }))
                            }
                        ]
                    })
                },
                async add() {
                    if (!this.name) {
                        alert('请输入消费名称')
                        return
                    }
                    if (typeof this.price !== 'number') {
                        alert('请输入正确的消费价格')
                        return
                    }

                    // 发送添加请求
                    const res = await axios.post('https://applet-base-api-t.itheima.net/bill', {
                        creator: '小黑',
                        name: this.name,
                        price: this.price
                    })
                    // 重新渲染一次
                    this.getList()

                    this.name = ''
                    this.price = ''
                },
                async del(id) {
                    // 根据 id 发送删除请求
                    const res = await axios.delete(`https://applet-base-api-t.itheima.net/bill/${id}`)
                    // 重新渲染
                    this.getList()
                }
            }
        })
    </script>
</body>

</html>

六、工程化开发和脚手架

1.开发Vue的两种方式

  • 核心包传统开发模式：基于html / css / js 文件，直接引入核心包，开发 Vue。
  • 工程化开发模式：基于构建工具（例如：webpack）的环境中开发Vue。

在这里插入图片描述

工程化开发模式优点：

提高编码效率，比如使用JS新语法、Less/Sass、Typescript等通过webpack都可以编译成浏览器识别的ES3/ES5/CSS等

工程化开发模式问题：

  • webpack配置不简单
  • 雷同的基础配置
  • 缺乏统一的标准

为了解决以上问题，所以我们需要一个工具，生成标准化的配置

2.脚手架Vue CLI

基本介绍：

Vue CLI 是Vue官方提供的一个全局命令工具

可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】

好处：
  1. 开箱即用，零配置
  2. 内置babel等工具
  3. 标准化的webpack配置
使用步骤：
  1. 全局安装（只需安装一次即可） yarn global add @vue/cli 或者 npm i @vue/cli -g
  2. 查看vue/cli版本： vue --version
  3. 创建项目架子：vue create project-name(项目名不能使用中文)
  4. 启动项目：yarn serve 或者 npm run serve(命令不固定，找package.json)

七、项目目录介绍和运行流程

1.项目目录介绍

在这里插入图片描述

虽然脚手架中的文件有很多，目前咱们只需人事三个文件即可

  1. main.js 入口文件
  2. App.vue App根组件
  3. index.html 模板文件

2.运行流程

在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <!-- 兼容：给不支持js的浏览器一个提示 -->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>

    <!-- Vue所管理的容器：将来创建结构动态渲染这个容器 -->
    <div id="app">
      <!-- 工程化开发模式中：这里不再直接编写模板语法，通过 App.vue 提供结构渲染 -->
    </div>

    <!-- built files will be auto injected -->
  </body>
</html>

main.js

// 文件核心作用：导入App.vue，基于App.vue创建结构渲染index.html
// 1. 导入 Vue 核心包
import Vue from 'vue'

// 2. 导入 App.vue 根组件
import App from './App.vue'

// 提示：当前处于什么环境 (生产环境 / 开发环境)
Vue.config.productionTip = false

// 3. Vue实例化，提供render方法 → 基于App.vue创建结构渲染index.html
new Vue({
  // el: '#app', 作用：和$mount('选择器')作用一致，用于指定Vue所管理容器
  // render: h => h(App),
  render: (createElement) => {
    // 基于App创建元素结构
    return createElement(App)
  }
}).$mount('#app')

八、组件化开发

​ 组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为。

​ 好处：便于维护，利于复用 → 提升开发效率。

​ 组件分类：普通组件、根组件。

​ 比如：下面这个页面，可以把所有的代码都写在一个页面中，但是这样显得代码比较混乱，难易维护。咱们可以按模块进行组件划分

在这里插入图片描述

总结：

组件化的好处是什么？

组件的分类？

九、根组件 App.vue

1.根组件介绍

整个应用最上层的组件，包裹所有普通小组件

在这里插入图片描述

2.组件是由三部分构成

  • 语法高亮插件

在这里插入图片描述

  • 三部分构成

    • template：结构 （有且只能一个根元素）
    • script: js逻辑
    • style： 样式 (可支持less，需要装包)

  • 让组件支持less

    （1） style标签，lang=“less” 开启less功能

    （2） 装包: yarn add less less-loader -D 或者npm i less less-loader -D

    -D ：开发依赖，–save-dev的简写

3.总结

App组件包含哪三部分？

十、普通组件的注册使用-局部注册

1.特点：

只能在注册的组件内使用

2.步骤：

  1. 创建.vue文件（三个组成部分）
  2. 在使用的组件内先导入再注册，最后使用

3.使用方式：

当成html标签使用即可 <组件名></组件名>

4.注意：

组件名规范 —> 大驼峰命名法， 如 HmHeader

5.语法：

在这里插入图片描述

// 导入需要注册的组件
import 组件对象 from '.vue文件路径'
import HmHeader from './components/HmHeader'

export default { 
    // 局部注册
  components: {
   '组件名': 组件对象,
    HmHeader:HmHeaer,
    HmHeader
  }
}

6.练习

在App组件中，完成以下练习。在App.vue中使用组件的方式完成下面布局

在这里插入图片描述

HmHeader.vue

<template>
  <div class="hm-header">
    我是hm-header
  </div>
</template>

<script>
export default {

}
</script>

<style>
.hm-header {
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 30px;
  background-color: #8064a2;
  color: white;
}
</style>

HmMain.vue

<template>
  <div class="hm-main">
    我是hm-main
  </div>
</template>

<script>
export default {

}
</script>

<style>
.hm-main {
  height: 400px;
  line-height: 400px;
  text-align: center;
  font-size: 30px;
  background-color: #f79646;
  color: white;
  margin: 20px 0;
}
</style>

HmFooter.vue

<template>
  <div class="hm-footer">
    我是hm-footer
  </div>
</template>

<script>
export default {

}
</script>

<style>
.hm-footer {
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 30px;
  background-color: #4f81bd;
  color: white;
}
</style>

App.vue

<template>
  <div class="App">
    <!-- 头部组件 -->
    <HmHeader></HmHeader>
    <!-- 主体组件 -->
    <HmMain></HmMain>
    <!-- 底部组件 -->
    <HmFooter></HmFooter>

    <!-- 如果 HmFooter + tab 出不来 → 需要配置 vscode
         设置中搜索 trigger on tab → 勾上
    -->
  </div>
</template>

<script>
import HmHeader from './components/HmHeader.vue'
import HmMain from './components/HmMain.vue'
import HmFooter from './components/HmFooter.vue'
export default {
  components: {
    // '组件名': 组件对象
    HmHeader: HmHeader,
    HmMain,
    HmFooter
  }
}
</script>

<style>
.App {
  width: 600px;
  height: 700px;
  background-color: #87ceeb;
  margin: 0 auto;
  padding: 20px;
}
</style>

7.总结

  • A组件内部注册的局部组件能在B组件使用吗
  • 局部注册组件的步骤是什么
  • 使用组件时 应该按照什么命名法

十一、普通组件的注册使用-全局注册

1.特点：

全局注册的组件，在项目的任何组件中都能使用

2.步骤

  1. 创建.vue组件（三个组成部分）
  2. main.js中进行全局注册

3.使用方式

当成HTML标签直接使用

<组件名></组件名>

4.注意

组件名规范 —> 大驼峰命名法， 如 HmHeader

5.语法

Vue.component(‘组件名’, 组件对象)

例：

// 导入需要全局注册的组件
import HmButton from './components/HmButton'
Vue.component('HmButton', HmButton)

6.练习

在以下3个局部组件中是展示一个通用按钮

在这里插入图片描述

HmButton.vue

<template>
  <button class="hm-button">通用按钮</button>
</template>

<script>
export default {

}
</script>

<style>
.hm-button {
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  background-color: #3bae56;
  border-radius: 5px;
  color: white;
  border: none;
  vertical-align: middle;
  cursor: pointer;
}
</style>

main.js

import Vue from 'vue'
import App from './App.vue'
// 编写导入的代码，往代码的顶部编写(规范)
import HmButton from './components/HmButton.vue'

Vue.config.productionTip = false

// 进行全局注册 → 在所有的组件范围内都能直接使用
// Vue.component(组件名，组件对象)
Vue.component('HmButton', HmButton)

new Vue({
  render: h => h(App),
}).$mount('#app')

在其中某个组件中使用，比如HmMain.vue（当成HTML标签直接使用）

<template>
  <div class="hm-main">
    我是hm-main
    <HmButton></HmButton>
  </div>
</template>

<script>
export default {};
</script>

<style>
.hm-main {
  height: 400px;
  line-height: 400px;
  text-align: center;
  font-size: 30px;
  background-color: #f79646;
  color: white;
  margin: 20px 0;
}
</style>

7.总结

1.全局注册组件应该在哪个文件中注册以及语法是什么？

2.全局组件在项目中的任何一个组件中可不可以使用？

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

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

相关文章

二叉搜索树的初步认识

二叉搜索树的初步认识

二叉搜索树与常见的查找算法有什么区别&#xff1f; 首先&#xff0c;如果有同学不知道有哪些查找算法可以查看&#xff1a;常见查找算法_加瓦不加班的博客-CSDN博客 如果还有一些不了解的&#xff0c;请查看加瓦不加班_数据结构,链表,递归-CSDN博客 接下来&#xff0c;我们来…
阅读更多...
玄子Share- IDEA 2023 SpringBoot 热部署

玄子Share- IDEA 2023 SpringBoot 热部署

玄子Share- IDEA 2023 SpringBoot 热部署 修改 IDEA 部署设置 IDEA 勾选如下选项 新建 SpringBoot 项目 项目构建慢的将 Spring Initializr 服务器 URL 改为阿里云&#xff1a;https://start.aliyun.com/ 在这里直接勾选Spring Boot Devtools插件即可 测试 切出 IDEA 项目文…
阅读更多...
「专题速递」AR协作、智能NPC、数字人的应用与未来

「专题速递」AR协作、智能NPC、数字人的应用与未来

元宇宙是一个融合了虚拟现实、增强现实、人工智能和云计算等技术的综合概念。它旨在创造一个高度沉浸式的虚拟环境&#xff0c;允许用户在其中交互、创造和共享内容。在元宇宙中&#xff0c;人们可以建立虚拟身份、参与虚拟社交&#xff0c;并享受无限的虚拟体验。 作为互联网大…
阅读更多...
2023年H1汽车社媒营销趋势报告

2023年H1汽车社媒营销趋势报告

2023上半年车市“内卷”&#xff0c;汽车营销玩法越来越多样&#xff0c;品牌的矩阵式营销也成为头部车企重点营销战略。 据乘联会预测&#xff0c;2023下半年车市将受到二季度价格战的透支&#xff0c;需要一定修复期。在整体形势较不利的情况下&#xff0c;车企如何破局实现销…
阅读更多...
通过IP地址如何计算相关地址

通过IP地址如何计算相关地址

以IP地址为1921681005 子网掩码是2552552550为例。算出网络地址、广播地址、地址范围、主机数。 分步骤计算 1&#xff09; 将IP地址和子网掩码换算为二进制&#xff0c;子网掩码连续全1的是网络地址&#xff0c;后面的是主机地址。 虚线前为网络地址&#xff0c;虚线后为主机…
阅读更多...
基于Java的个性化旅游攻略系统设计与实现(源码+lw+ppt+部署文档+视频讲解等)

基于Java的个性化旅游攻略系统设计与实现(源码+lw+ppt+部署文档+视频讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09;有保障的售后福利 代码参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作…
阅读更多...
yolov7的bug，无法指定显卡（程序默认0号卡）

yolov7的bug，无法指定显卡（程序默认0号卡）

**问题&#xff1a;**命令行参数指定的是4号卡&#xff0c;但实际却总是在0号卡建立进程 真抽象啊&#xff0c;这一步&#xff0c;模型被送到0号卡&#xff0c;但实际上&#xff0c;送到了4号卡&#xff08;进程是在4号卡上建立的&#xff09; 解决办法&#xff1a; 在train.py…
阅读更多...
【LeetCode热题100】--230.二叉搜索树中第K小的元素

【LeetCode热题100】--230.二叉搜索树中第K小的元素

230.二叉搜索树中第K小的元素 给定一个二叉搜索树的根节点 root &#xff0c;和一个整数 k &#xff0c;请你设计一个算法查找其中第 k 个最小元素&#xff08;从 1 开始计数&#xff09;。 二叉搜索树的中序遍历是有序的&#xff0c;所有先得到其有序序列&#xff0c;然后在取…
阅读更多...
端口没有占用，Springboot却提示端口占用了

端口没有占用，Springboot却提示端口占用了

1.问题描述 *************************** APPLICATION FAILED TO START ***************************Description:Web server failed to start. Port 19004 was already in use.Action:Identify and stop the process thats listening on port 19004 or configure this applica…
阅读更多...
【设计模式】使用原型模式完成业务中“各种O”的转换

【设计模式】使用原型模式完成业务中“各种O”的转换

文章目录 1.原型模式概述2.浅拷贝与深拷贝2.1.浅拷贝的实现方式2.2.深拷贝的实现方式 3.结语 1.原型模式概述 原型模式是一种非常简单易懂的模型&#xff0c;在书上的定义是这样的&#xff1a; Specify the kinds of objects to create using a prototypical instance,and cre…
阅读更多...
RobotFramework 自动化测试实战基础篇

RobotFramework 自动化测试实战基础篇

RobotFramework 简介和特点 RobotFramework 不是一个测试工具&#xff0c;准确来说&#xff0c;它是一个自动化测试框架&#xff0c;或者说它是一个自动化测试平台。他拥有的特性如下&#xff1a; 支持关键字驱动、数据驱动和行为驱动测试执行报告和日志是HTML格式&#xff0…
阅读更多...
并发编程基础知识

并发编程基础知识

一、线程的基础概念 一、基础概念 1.1 进程与线程A 什么是进程&#xff1f; 进程是指运行中的程序。 比如我们使用钉钉&#xff0c;浏览器&#xff0c;需要启动这个程序&#xff0c;操作系统会给这个程序分配一定的资源&#xff08;占用内存资源&#xff09;。 什么线程&a…
阅读更多...
android 修改输出apk的包名

android 修改输出apk的包名

一&#xff0c;打包方式使用IDE菜单选项 二、在app级别的build.gradle下配置&#xff1a; static def releaseTime() {return new Date().format("yyyyMMdd.kkmm", TimeZone.getTimeZone("GMT8")) }android.applicationVariants.all { variant ->print…
阅读更多...
滚珠螺母的生产流程

滚珠螺母的生产流程

滚珠螺母是机械领域中重要的零部件之一&#xff0c;它的生产过程涉及多个环节和步骤。以下是一个概括性的滚珠螺母生产流程&#xff1a; 1、原料采购&#xff1a;首先需要采购适合制造滚珠螺母的原材料&#xff0c;如钢棒、钢板等。 2、钢材切割&#xff1a;将采购的钢棒、钢板…
阅读更多...
BLIP2模型加载在不同设备上

BLIP2模型加载在不同设备上

背景 现在大语言模型越来越大&#xff0c;占用的内存越来越多&#xff0c;这导致内存较小的设备无法体验大模型的效果。transformer提供了将一个大模型分别加载在gpu和cpu上的方法。 加载方法 以多模态模型BLIP2为例&#xff0c;将其语言模型放在gpu上&#xff0c;其余部分放…
阅读更多...
1.10.C++项目：仿muduo库实现并发服务器之Acceptor模块的设计

1.10.C++项目：仿muduo库实现并发服务器之Acceptor模块的设计

一、Acceptor模块&#xff1a;这是一个对于通信连接进行整体管理的一个模块&#xff0c;对一个连接的操作都是通过这个模块来进行&#xff01; 二、提供的功能 Acceptor模块是对Socket模块&#xff0c;Channel模块的⼀个整体封装&#xff0c;实现了对⼀个监听套接字的整体的管…
阅读更多...
中国人民大学与加拿大女王大学金融硕士-----成功便是站起来比倒下多一次

中国人民大学与加拿大女王大学金融硕士-----成功便是站起来比倒下多一次

人生说短也短&#xff0c;说长也长。在有限的时间内&#xff0c;让我们按下“加速键”&#xff0c;收获生活或工作中的各种美好。人生的每一次加速&#xff0c;都距未来更近一步。身处金融领域的你&#xff0c;有想到比别人更快一步的拿到学位吗&#xff1f;中国人民大学与加拿…
阅读更多...
yolov5加关键点回归

yolov5加关键点回归

文章目录 一、数据1&#xff09;数据准备2&#xff09;标注文件说明 二、基于yolov5-face 修改自己的yolov5加关键点回归1、dataloader,py2、augmentations.py3、loss.py4、yolo.py 一、数据 1&#xff09;数据准备 1、手动创建文件夹: yolov5-face-master/data/widerface/tr…
阅读更多...
K8S：K8S对外服务之Ingress

K8S：K8S对外服务之Ingress

文章目录 一.Ingress基础介绍1.Ingress概念2.K8S对外暴露服务&#xff08;service&#xff09;主要方式&#xff08;1&#xff09;NodePort&#xff08;2&#xff09;LoadBalancer&#xff08;3&#xff09;externalIPs&#xff08;4&#xff09;Ingress 3.Ingress 组成&#x…
阅读更多...
JS进阶-原型

JS进阶-原型

原型 原型就是一个对象&#xff0c;也称为原型对象 构造函数通过原型分配的函数是所有对象所共享的 JavaScript规定&#xff0c;每一个构造函数都有一个prototype属性&#xff0c;指向另一个对象&#xff0c;所以我们也称为原型对象 这个对象可以挂载函数&#xff0c;对象实…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023