Day1 苍穹外卖前端 Vue基础、Vue基本使用方式、Vue-router、Vuex、TypeScript

news2024/12/24 21:39:11

目录

1.VUE 基础回顾

1.1 基于脚手架创建前端工程

1.1.1 环境要求

1.1.2 脚手架创建项目

1.1.3 工程结构

1.1.4 启动前端服务

1.2 vue基本使用方式

1.2.1 vue 组件

1.2.2 文本插值

1.2.3 属性绑定

1.2.4 事件绑定

1.2.5 双向绑定

1.2.6 条件渲染

1.2.7 跨域问题

1.2.8 axios

1.2.8.1 分散型方法

1.2.7.2 通用方法

2.路由 Vue-Router

2.1 Vue-Router 介绍

2.2 路由配置

2.3 解决路由不存在

2.3 嵌套路由

3.状态管理 vuex

3.1 vuex 介绍

3.2 使用方式

4.TypeScript

4.1 TypeScript 介绍

4.2 TypeScript 常用类型

4.2.1 类型标注的位置

4.2.2 字符串、数字、布尔类型

4.2.3 字面量类型

4.2.4 interface 类型

4.2.5 class 类型

1.VUE 基础回顾

1.1 基于脚手架创建前端工程

1.1.1 环境要求

要想基于脚手架创建前端工程，需要具备如下环境要求：

  • node.js： 前端项目的运行环境（相当于JDK）

  • npm： JavaScript的包管理工具（下载完node会自带）

  • Vue CLI： 基于Vue进行快速开发的完整系统，实现交互式的项目脚手架

安装完node.js后，可以通过命令行来查看版本号，如下：

安装 Vue CLI，命令如下：（只需要执行一次）

1.1.2 脚手架创建项目

使用 Vue CLI 创建前端工程的方式：

  • 方式一：vue create 项目名称

  • 方式二：vue ui

重点介绍使用 vue ui 命令创建前端工程的过程：（vue ui 是基于界面化的）

第一步：在命令行输入命令 vue ui,在浏览器ui界面中选择前端工程存放的位置

第二步：点击“在此创建新项目”按钮，跳转到创建新项目设置页面

第三步：填写项目名称、选择包管理器为npm，点击“下一步”按钮

1.1.3 工程结构

工程目录结构：

重点文件或目录介绍：

  • node_modules：当前项目依赖的js包

  • assets：静态资源存放目录

  • components：公共组件存放目录

  • App.vue：项目的主组件，页面的入口文件

  • main.js：整个项目的入口文件

  • package.json：项目的配置信息、依赖包管理

  • vue.config.js：vue-cli配置文件

1.1.4 启动前端服务

使用VS Code打开创建的前端工程，启动前端工程：

问题：前端项目启动后，服务端口默认为8080，很容易和后端tomcat端口号冲突。如何修改前端服务的端口号？

解决：可以在vue.config.js中配置前端服务端口号：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 7070  //指定前端服务端口号
  }
})

1.2 vue基本使用方式

1.2.1 vue 组件

Vue 的组件文件以 .vue 结尾，每个组件由三部分组成：

  • 结构 <template>

  • 样式 <style>

  • 逻辑 <script>

1.2.2 文本插值

作用：用来绑定 data 方法返回的对象属性

用法：{{插值表达式}}

注意事项：

1、接收简单数据绑定。

<p>{{message}}</p>

2、支持JS表达式运算，比如算数运算、三目运算、函数调用。

 <p>{{num1 + num2}}</p>
 <p>{{isTrue? '条件为真' : '条件为假'}}</p>
<p>{{greet()}}</p>

1.2.3 属性绑定

作用：为标签的属性绑定 data 方法中返回的属性

用法：v-bind:xxx，简写为 :xxx

示例：

1.2.4 事件绑定

作用：为元素绑定对应的事件

用法：v-on:xxx，简写为 @xxx

示例：

1.2.5 双向绑定

注意事项：v-model 会忽略所有表单元素的 value、checked、selected 属性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

作用：表单输入项和 data 方法中的属性进行绑定，任意一方改变都会同步给另一方

用法：v-model

示例：

1.2.6 条件渲染

作用：根据表达式的值来动态渲染页面元素

用法：v-if、v-else、v-else-if

注意事项：只有满足条件才会渲染该内容。

示例：

1.2.7 跨域问题

跨域问题是由于浏览器的同源策略导致的。会出现跨域问题的情况：

  1. 不同域名
    • 例如，一个网页的域名为www.example1.com，当它尝试通过 JavaScript 去获取www.example2.com域名下的数据时，就会出现跨域问题。
  2. 不同子域名
    • 即使是主域名相同，但子域名不同也会导致跨域。例如，sub1.example.com和sub2.example.com被认为是不同的源。如果在sub1.example.com页面中的脚本要访问sub2.example.com下的资源，就会出现跨域情况。
  3. 不同端口
    • 当网页使用的端口与请求的资源所在的端口不同时，会产生跨域。例如，一个网页通过http://localhost:3000访问，而它尝试请求http://localhost:8080/api的数据，因为端口 3000 和 8080 不同，就会出现跨域问题。
  4. 不同协议
    • 如果一个页面是通过http协议访问的，而它试图请求https协议下的资源，或者反之，也会出现跨域。例如，http://www.example.com页面中的脚本想要获取https://www.example.com/api的数据，浏览器会因为协议不同而阻止这个请求。

1.2.8 axios

Axios 是一个基于 promise 的 网络请求库，作用于浏览器和 node.js 中。使用Axios可以在前端项目中发送各种方式的HTTP请求。

安装命令：

npm install axios

导入：

import axios from 'axios'

1.2.8.1 分散型方法

参数说明：

  • url：请求路径

  • data：请求体数据，最常见的是JSON格式数据

  • config：配置对象，可以设置查询参数、请求头信息

注意事项：在使用axios时，经常会遇到跨域问题。为了解决跨域问题，可以在 vue.config.js 文件中配置代理：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 7070,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
})

axios的post请求示例：

axios.post('/api/admin/employee/login',{
      username:'admin',
      password: '123456'
    }).then(res => {
      console.log(res.data)
    }).catch(error => {
      console.log(error.response)
    })

打开开发者工具：

其实发送的请求后面会执行反向代理机制逻辑

变成：http://localhost:8080/admin/employee/login

1.2.7.2 通用方法

axios提供的统一使用方式可以发送各种方式的请求）：

axios({
      url: '/api/admin/employee/login',
      method:'post',
      data: {
        username:'admin',
        password: '123456'
      }
    }).then((res) => {
      console.log(res.data.data.token)
      axios({
        url: '/api/admin/shop/status',
        method: 'get',
        params: {id: 100},
        headers: {
          token: res.data.data.token
        }
      })
    }).catch((error) => {
      console.log(error)
    })

2.路由 Vue-Router

2.1 Vue-Router 介绍

vue 属于单页面应用，所谓路由，就是根据浏览器路径不同，用不同的视图组件替换这个页面内容。

捷径：可以在创建vue工程中生成Vue-Router的Demo。

使用 vue ui 创建项目的同时指定：

注意事项：创建完带有路由功能的前端项目后，在工程中会生成一个路由文件，如下所示：

为了能够使用路由功能，在前端项目的入口文件main.js中，创建Vue实例时需要指定路由对象：

2.2 路由配置

首先了解一下路由组成：

  • VueRouter：路由器，根据路由请求在路由视图中动态渲染对应的视图组件

  • <router-link>：路由链接组件，浏览器会解析成<a>

  • <router-view>：路由视图组件，用来展示与路由路径匹配的视图组件

具体配置方式：

1) 在路由文件中配置路由路径和视图的对应关系：

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

//维护路由表，某个路由路径对应哪个视图组件
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
  ,
  {
    path: '/404',
    component: () => import('../views/404View.vue')
  },
  {
    path: '*',
    redirect: '/404'
  }
]

const router = new VueRouter({
  routes
})

export default router

2) 在视图组件中配置 router-link标签，用于生成超链接

<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/test">Test</router-link> |

3) 在视图组件汇总配置router-view标签

<!--视图组件展示的位置-->
<router-view/>

实现路由跳转，可以通过标签式和编程式两种：

  • 标签式：<router-link to="/about">About</router-link>

  • 编程式：this.$router.push('/about')  （通过注册事件触发）

name属性作用：

在 Vue Router 中，name属性可以用于更方便地进行路由导航。例如，使用this.$router.push({name: 'home'})来进行编程式导航。相比于使用路径（path）进行导航，使用name有一定的优势。当路径（path）发生变化时，只要name不变，在代码中通过name进行导航的部分就不需要修改。

2.3 解决路由不存在

问题思考：如果用户访问的路由地址不存在，该如何处理？

可以通过配置一个404视图组件，当访问的路由地址不存在时，则重定向到此视图组件，具体配置如下：

  {
    path: '/404',
    component: () => import('../views/404View.vue')
  },
  {
    path: '*',
    redirect: '/404' //重定向
  }

2.3 嵌套路由

2.3.1 定义

嵌套路由：组件内要切换内容，就需要用到嵌套路由（子路由）。

效果如下：

在App.vue视图组件中有<router-view>标签，其他视图组件可以展示在此

ContainerView.vue组件可以展示在App.vue视图组件的<router-view>位置

ContainerView.vue组件进行了区域划分（分为上、左、右），在右边编写了<router-view>标签，点击左侧菜单时，可以将对应的子视图组件展示在此

2.3.2 实现步骤

第一步：安装并导入 elementui，实现页面布局（Container 布局容器）---ContainerView.vue

<template>
  <el-container>
    <el-header>Header</el-header>
    <el-container>
        <el-aside width="200px">
        </el-aside>
        <el-main>
        </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {

}
</script>

<style>
.el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>

第二步：提供子视图组件，用于效果展示 ---P1View.vue、P2View.vue、P3View.vue

<template>
  <div>
    这是P1 View
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

第三步：在 src/router/index.js 中配置路由映射规则（嵌套路由配置）

   {
    path: '/c',
    component: () => import('../views/container/ContainerView.vue'),
    //嵌套路由（子路由），对应的组件会展示在当前组件内部
    children: [//通过children属性指定子路由相关信息（path、component）
      {
        path: '/c/p1',
        component: () => import('../views/container/P1View.vue')
      },
      {
        path: '/c/p2',
        component: () => import('../views/container/P2View.vue')
      },
      {
        path: '/c/p3',
        component: () => import('../views/container/P3View.vue')
      }
    ]
  }

第四步：在ContainerView.vue 布局容器视图中添加<router-view>，实现子视图组件展示

<el-main>
    <router-view/>
</el-main>

第五步：在ContainerView.vue 布局容器视图中添加<router-link>，实现路由请求

<el-aside width="200px">
    <router-link to="/c/p1">P1</router-link><br>
    <router-link to="/c/p2">P2</router-link><br>
    <router-link to="/c/p3">P3</router-link><br>
</el-aside>

注意事项：子路由变化，切换的是【ContainerView 组件】中 <router-view></router-view> 部分的内容。

问题思考：

1.对于前面的案例，如果用户访问的路由是 /c，会有什么效果呢？

2.如何实现在访问 /c 时，默认就展示某个子视图组件呢？

配置重定向，当访问/c时，直接重定向到/c/p1即可，如下配置：

3.状态管理 vuex

3.1 vuex 介绍

vuex 是一个专为 Vue.js 应用程序开发的状态（数据）管理库。

vuex 可以在多个组件之间共享数据，并且共享的数据是响应式的，即数据的变更能及时渲染到模板。

Vuex 和单纯的全局对象有以下两点不同：

  1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

  2. 不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

安装vuex：

npm install vuex@next --save

vuex中的几个核心概念：

  • state：状态对象，集中定义各个组件共享的数据

  • mutations：类似于一个事件，用于修改共享数据，要求必须是同步函数

  • actions：类似于mutation，可以包含异步操作，通过调用mutation来改变共享数据

3.2 使用方式

本章节通过一个案例来学习vuex的使用方式，具体操作步骤如下：

第一步：创建带有vuex功能的前端项目（vue ui)

注意事项：在创建的前端工程中，可以发现自动创建了vuex相关的文件(src/store/index.js)，并且在main.js中创建Vue实例时，需要将store对象传入，代码如下：

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
  store,//使用vuex功能
  render: h => h(App)
}).$mount('#app')

第二步：在src/store/index.js文件中集中定义和管理共享数据

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

//集中管理多个组件共享的数据
export default new Vuex.Store({
  //集中定义共享数据
  state: {
    name: '未登录游客'
  },
  getters: {
  },
  //通过当前属性中定义的函数修改共享数据，必须都是同步操作
  mutations: {
  },
  //通过actions调用mutation，在actions中可以进行异步操作
  actions: {
  },
  modules: {
  }
})

第三步：在视图组件中展示共享数据

<template>
  <div class="hello">
    <h1>欢迎你，{{$store.state.name}}</h1>
  </div>
</template>

注意事项：$store.state为固定写法，用于访问共享数据。

第四步：在mutations中定义函数，用于修改共享数据

  //通过当前属性中定义的函数修改共享数据，必须都是同步操作
  mutations: {
    setName(state,newName) {
      state.name = newName
    }
  },

第五步：在视图组件中调用 mutations 中定义的函数

注意事项：mutations中定义的函数不能直接调用，必须通过状态对象的 commit 方法来调用

第六步：如果在修改共享数据的过程中有异步操作，则需要将异步操作的代码编写在actions的函数。

//通过actions调用mutation，在actions中可以进行异步操作
  actions: {
    setNameByAxios(context){
      axios({ //异步请求
        url: '/api/admin/employee/login',
        method: 'post',
        data: {
          username: 'admin',
          password: '123456'
        }
      }).then(res => {
        if(res.data.code == 1){
          //异步请求后，需要修改共享数据
          //在actions中调用mutation中定义的setName函数
          context.commit('setName',res.data.data.name)
        }
      })
    }
  },

注意事项：在actions中定义的函数可以声明context参数，通过此参数可以调用mutations中定义的函数。

第七步：在视图组件中调用actions中定义的函数

注意事项：在actions中定义的函数不能直接调用，必须通过 this.$store.dispatch('函数名称') 这种方式调用。

4.TypeScript

4.1 TypeScript 介绍

  • TypeScript 是 JavaScript 的超集（JS 有的 TS 都有）

  • TypeScript = Type + JavaScript（在 JS 基础上增加了类型支持）

  • TypeScript 可编译成标准的 JavaScript，并且在编译时进行类型检查

在前端项目中使用TS，需要进行安装，命令为：

npm install -g typescript

查看TS版本：

TS初体验：

1) 创建 hello.ts 文件，内容如下：

//定义一个函数 hello，并且指定参数类型为string
function hello(msg:string) {
      console.log(msg)
}

//调用上面的函数，传递非string类型的参数
hello(123)

2) 使用 tsc 命令编译 hello.ts 文件

可以看到编译报错，提示参数类型不匹配。这说明在编译时TS会进行类型检查。需要注意的是在编译为JS文件后，类型会被擦除。

思考：TS 为什么要增加类型支持 ？

  • TS 属于静态类型编程语言，JS 属于动态类型编程语言

  • 静态类型在编译期做类型检查，动态类型在运行期做类型检查

  • 配合 VSCode 开发工具，TS 可以提前到在编写代码的同时就发现代码中的错误，减少找 Bug、改 Bug 的时间

在前端项目中使用TS，需要创建基于TS的前端工程：

4.2 TypeScript 常用类型

TS中的常用类型如下：

4.2.1 类型标注的位置

基于TS进行前端开发时，类型标注的位置有如下3个：

  • 标注变量

  • 标注参数

  • 标注返回值（参数列表后面指定类型）

4.2.2 字符串、数字、布尔类型

字符串、数字、布尔类型是前端开发中常用的类型

4.2.3 字面量类型

字面量类型用于限定数据的取值范围，类似于java中的枚举

4.2.4 interface 类型

interface 类型是TS中的复杂类型，它让 TypeScript 具备了 JavaScript 所缺少的、描述较为复杂数据结构的能力。

可以通过在属性名后面加上？，表示当前属性为可选，如下：

4.2.5 class 类型

使用 class 关键字来定义类，类中可以包含属性、构造方法、普通方法等

在定义类时，可以使用 implments 关键字实现接口，如下：

在定义类时，可以使用 extends 关键字 继承其他类，如下：

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

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

相关文章

esp8266_TFTST7735语音识别UI界面虚拟小助手

esp8266_TFTST7735语音识别UI界面虚拟小助手

文章目录 一 实现思路1 项目简介1.1 项目效果1.2 实现方式 2 项目构成2.1 软硬件环境2.2 完整流程总结&#xff08;重点整合&#xff09;(1) 功能逻辑图(2) 接线(3) 使用esp8266控制TFT屏(4)TFT_espI库配置方法(5) TFT_esp库常用代码详解(6)TFT屏显示图片(7) TFT屏显示汉字(8) …
阅读更多...
java web springboot

java web springboot

0. 引言 SpringBoot对Spring的改善和优化&#xff0c;它基于约定优于配置的思想&#xff0c;提供了大量的默认配置和实现 使用SpringBoot之后&#xff0c;程序员只需按照它规定的方式去进行程序代码的开发即可&#xff0c;而无需再去编写一堆复杂的配置 SpringBoot的主要功能…
阅读更多...
Windows下ESP32-IDF开发环境搭建

Windows下ESP32-IDF开发环境搭建

Windows下ESP32-IDF开发环境搭建 文章目录 Windows下ESP32-IDF开发环境搭建一、软件安装二、搭建IDF开发环境2.1 安装VS Code插件&#xff1a;2.2 配置ESP-IDF插件&#xff1a;2.3 下载例程源码&#xff1a; 三、编译和烧录代码四、Windows下使用命令行编译和烧录程序4.1 配置环…
阅读更多...
6UCPCI板卡设计方案：8-基于双TMS320C6678 + XC7K420T的6U CPCI Express高速数据处理平台

6UCPCI板卡设计方案：8-基于双TMS320C6678 + XC7K420T的6U CPCI Express高速数据处理平台

基于双TMS320C6678 XC7K420T的6U CPCI Express高速数据处理平台 1、板卡概述 板卡由我公司自主研发&#xff0c;基于6UCPCI架构&#xff0c;处理板包含双片TI DSP TMS320C6678芯片&#xff1b;一片Xilinx公司FPGA XC7K420T-1FFG1156 芯片&#xff1b;六个千兆网口&#xff…
阅读更多...
c++--------------------------------接口实现

c++--------------------------------接口实现

引用参数 引用的基本概念 在C中&#xff0c;引用是一个别名&#xff0c;它为已存在的变量提供了另一个名字。引用的声明格式为类型& 引用名 变量名;。例如&#xff0c;int num 10; int& ref num;&#xff0c;这里ref就是num的引用&#xff0c;对ref的操作等价于对nu…
阅读更多...
docker run命令大全

docker run命令大全

docker run命令大全 基本语法常用选项基础选项资源限制网络配置存储卷和挂载环境变量重启策略其他高级选项示例总结docker run 命令是 Docker 中最常用和强大的命令之一，用于创建并启动一个新的容器。该命令支持多种选项和参数，可以满足各种使用场景的需求。以下是 docker ru…
阅读更多...
rk3568制冷项目驱动开发流程汇总（只适用于部分模块CIF DVP等，自用）

rk3568制冷项目驱动开发流程汇总（只适用于部分模块CIF DVP等，自用）

采用fpga输入&#xff0c;3568采集并显示至hdmi RKVICAP 驱动框架说明 RKVICAP驱动主要是基于 v4l2 / media 框架实现硬件的配置、中断处理、控制 buffer 轮转&#xff0c;以及控制 subdevice(如 mipi dphy 及 sensor) 的上下电等功能。 对于RK356X 芯片而言&#xff0c; VICAP…
阅读更多...
怎么在idea中创建springboot项目

怎么在idea中创建springboot项目

最近想系统学习下springboot&#xff0c;尝试一下全栈路线 从零开始&#xff0c;下面将叙述下如何创建项目 环境 首先确保自己环境没问题 jdkMavenidea 创建springboot项目 1.打开idea&#xff0c;选择file->New->Project 2.选择Spring Initializr->设置JDK->…
阅读更多...
springboot476基于vue篮球联盟管理系统(论文+源码)_kaic

springboot476基于vue篮球联盟管理系统(论文+源码)_kaic

摘 要 如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。新技术的产生&#xff0c;往往能解决一些老技术的弊端问题。因为传统篮球联盟管理系统信息管理难度大&#xff0c;容错率低&am…
阅读更多...
蓝桥杯嵌入式备赛教程(1、led，2、lcd，3、key)

蓝桥杯嵌入式备赛教程(1、led，2、lcd，3、key)

一、工程模版创建流程 第一步 创建新项目 第二步 选择型号和管脚封装 第三步 RCC使能 外部时钟&#xff0c;高速外部时钟 第四步晶振时钟配置 由数据手册7.1可知外部晶振频率为24MHz 最后一项设置为80 按下回车他会自动配置时钟 第五步&#xff0c;如果不勾选可能程序只会…
阅读更多...
步进电机位置速度双环控制实现

步进电机位置速度双环控制实现

步进电机位置速度双环控制实现 野火stm32电机教学 提高部分-第11讲 步进电机位置速度双环控制实现(1)_哔哩哔哩_bilibili PID模型 位置环作为外环，速度环作为内环。设定目标位置和实际转轴位置的位置偏差，经过位置PID获得位置期望，然后讲位置期望（位置变化反映了转轴的速…
阅读更多...
devops和ICCID简介

devops和ICCID简介

Devops DevOps&#xff08;Development 和 Operations 的组合&#xff09;是一种软件开发和 IT 运维的哲学&#xff0c;旨在促进开发、技术运营和质量保障&#xff08;QA&#xff09;部门之间的沟通、协作与整合。它强调自动化流程&#xff0c;持续集成&#xff08;CI&#xf…
阅读更多...
Apache RocketMQ 5.1.3安装部署文档

Apache RocketMQ 5.1.3安装部署文档

官方文档不好使&#xff0c;可以说是一坨… 关键词&#xff1a;Apache RocketMQ 5.0 JDK 17 废话少说&#xff0c;开整。 1.版本 官网地址&#xff0c;版本如下。 https://rocketmq.apache.org/download2.配置文件 2.1namesrv端口 在ROCKETMQ_HOME/conf下 新增namesrv.pro…
阅读更多...
数据结构：算法篇：快速排序；直接插入排序

数据结构：算法篇：快速排序；直接插入排序

目录 快速排序 直接插入排序 改良版冒泡排序 快速排序 理解&#xff1a; ①从待排序元素中选定一个基准元素&#xff1b; ②以基准元素将数据分为两部分&#xff1a;&#xff08;可以将&#xff1a;大于基准元素放左&#xff0c;小于基准元素放右&#xff09; ③对左半部分…
阅读更多...
运维工程师面试系统监控与优化自动化与脚本云计算的理解虚拟化技术的优点和缺点

运维工程师面试系统监控与优化自动化与脚本云计算的理解虚拟化技术的优点和缺点

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c; 忍不住分享一下给大家。点击跳转到网站 学习总结 1、掌握 JAVA入门到进阶知识(持续写作中……&#xff09; 2、学会Oracle数据库入门到入土用法(创作中……&#xff09; 3、手把…
阅读更多...
如何打造用户友好的维护页面：6个创意提升WordPress网站体验

如何打造用户友好的维护页面：6个创意提升WordPress网站体验

在网站运营中&#xff0c;无论是个人博主还是大型企业网站的管理员&#xff0c;难免会遇到需要维护的情况。无论是服务器迁移、插件更新&#xff0c;还是突发的技术故障&#xff0c;都可能导致网站短暂无法访问。这时&#xff0c;设计维护页面能很好的缓解用户的不满&#xff0…
阅读更多...
postman读取文件执行

postman读取文件执行

要从文件获取的变量 text 在pre-request 中写从文件获取数据的脚本。脚本实现了&#xff0c;设置了text默认值&#xff0c;从文件读取text列&#xff0c;将text存入环境变量 //获取text参数 var text "济南天气"; if(data.text){ text data.text } pm.environment.…
阅读更多...
37. Three.js案例-绘制部分球体

37. Three.js案例-绘制部分球体

37. Three.js案例-绘制部分球体 实现效果 知识点 WebGLRenderer WebGLRenderer 是Three.js中的一个渲染器类&#xff0c;用于将3D场景渲染到网页上。 构造器 WebGLRenderer( parameters : Object ) 参数类型描述parametersObject渲染器的配置参数&#xff0c;可选。 常用…
阅读更多...
【Rust自学】4.4. 引用与借用

【Rust自学】4.4. 引用与借用

4.4.0 写在正文之前 这一节的内容其实就相当于C的智能指针移动语义在编译器层面做了一些约束。Rust中引用的写法通过编译器的约束写成了C中最理想、最规范的指针写法。所以学过C的人对这一章肯定会非常熟悉。 喜欢的话别忘了点赞、收藏加关注哦&#xff08;加关注即可阅读全文…
阅读更多...
电脑使用CDR时弹出错误“计算机丢失mfc140u.dll”是什么原因?“计算机丢失mfc140u.dll”要怎么解决？

电脑使用CDR时弹出错误“计算机丢失mfc140u.dll”是什么原因?“计算机丢失mfc140u.dll”要怎么解决？

电脑使用CDR时弹出“计算机丢失mfc140u.dll”错误&#xff1a;原因与解决方案 在日常电脑使用中&#xff0c;我们时常会遇到各种系统报错和文件丢失问题。特别是当我们使用某些特定软件&#xff0c;如CorelDRAW&#xff08;简称CDR&#xff09;时&#xff0c;可能会遇到“计算…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023