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

目录

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 = falsenew 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.rhkb.cn/news/494761.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

重温设计模式--中介者模式

重温设计模式--中介者模式

中介者模式介绍 定义&#xff1a;中介者模式是一种行为设计模式&#xff0c;它通过引入一个中介者对象来封装一系列对象之间的交互。中介者使得各个对象之间不需要显式地相互引用&#xff0c;从而降低了它们之间的耦合度&#xff0c;并且可以更方便地对它们的交互进行管理和协调…
阅读更多...
Redis篇--常见问题篇7--缓存一致性2（分布式事务框架Seata）

Redis篇--常见问题篇7--缓存一致性2（分布式事务框架Seata）

1、概述 在传统的单体应用中&#xff0c;事务管理相对简单&#xff0c;通常使用数据库的本地事务&#xff08;如MySQL的BEGIN和COMMIT&#xff09;来保证数据的一致性。然而&#xff0c;在微服务架构中&#xff0c;由于每个服务都有自己的数据库&#xff0c;跨服务的事务管理变…
阅读更多...
如何评估一个股票API接口

如何评估一个股票API接口

评估一个股票 API 接口的质量&#xff0c;可以从以下几个方面进行&#xff1a; 数据准确性 行情数据&#xff1a;实时价格、历史价格、成交量、成交额等数据应与证券交易所或权威金融数据提供商的官方数据高度一致&#xff0c;确保没有明显的错误。财务数据&#xff1a;企业的…
阅读更多...
某集团GIF动态验证码识别

某集团GIF动态验证码识别

注意&#xff0c;本文只提供学习的思路&#xff0c;严禁违反法律以及破坏信息系统等行为&#xff0c;本文只提供思路 如有侵犯&#xff0c;请联系作者下架 本文识别已同步上线至OCR识别网站&#xff1a; http://yxlocr.nat300.top/ocr/other/16 最近某集团更新了验证码&#x…
阅读更多...
数据库系统原理：数据恢复与备份策略

数据库系统原理：数据恢复与备份策略

3.1可行性分析 开发者在进行开发系统之前&#xff0c;都需要进行可行性分析&#xff0c;保证该系统能够被成功开发出来。 3.1.1技术可行性 开发该《数据库系统原理》课程平台所采用的技术是vue和MYSQL数据库。计算机专业的学生在学校期间已经比较系统的学习了很多编程方面的知识…
阅读更多...
CPU算法分析LiteAIServer裸土检测算法如何应用在农田科学管理中？

CPU算法分析LiteAIServer裸土检测算法如何应用在农田科学管理中？

农田是农业生产的基础&#xff0c;是保障国家粮食安全和农业可持续发展的关键。随着人口增长和城市化进程的加快&#xff0c;农田保护和治理面临着前所未有的挑战。如今农田土壤依旧面临着巨大挑战&#xff1a; 1、‌土壤侵蚀‌&#xff1a;长期的风蚀、水蚀等自然因素&#x…
阅读更多...
Marscode AI辅助编程

Marscode AI辅助编程

直接使用Marscode的云服务来开发&#xff0c;也是很方便的&#xff0c;不用担心配置环境的问题&#xff0c;很适合初步学习&#xff0c;在任何设备都能开发。 番茄钟 请你基于html、tailwind css和javascript&#xff0c;帮我设计一个“番茄时钟”。要求UI简洁美观大方&#x…
阅读更多...
Debian 12 安装配置 fail2ban 保护 SSH 访问

Debian 12 安装配置 fail2ban 保护 SSH 访问

背景介绍 双十一的时候薅羊毛租了台腾讯云的虚机, 是真便宜, 只是没想到才跑了一个月, 系统里面就收集到了巨多的 SSH 恶意登录失败记录. 只能说, 互联网真的是太不安全了. 之前有用过 fail2ban 在 CentOS 7 上面做过防护, 不过那已经是好久好久之前的故事了, 好多方法已经不…
阅读更多...
idea2024创建JavaWeb项目以及配置Tomcat详解

idea2024创建JavaWeb项目以及配置Tomcat详解

今天呢&#xff0c;博主的学习进度也是步入了JavaWeb&#xff0c;目前正在逐步杨帆旗航&#xff0c;迎接全新的狂潮海浪。 那么接下来就给大家出一期有关JavaWeb的配置教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正…
阅读更多...
Canoe E2E校验自定义Checksum算法

Canoe E2E校验自定义Checksum算法

文章目录 一、添加 DBC文件二、导入要仿真的ECU节点三、编写 CAPL脚本1. 创建 .can 文件2. 设置counter递增3. 设置 CRC 算法&#xff0c;以profile01 8-bit SAE J1850 CRC校验为例 四、开始仿真五、运行结果CRC在线校验 当E2E的 CRC算法非常规算法&#xff0c;则需要自己编写代…
阅读更多...
PyTorch 神经网络回归（Regression）任务：关系拟合与优化过程

PyTorch 神经网络回归（Regression）任务：关系拟合与优化过程

PyTorch 神经网络回归&#xff08;Regression&#xff09;任务&#xff1a;关系拟合与优化过程 本教程介绍了如何使用 PyTorch 构建一个简单的神经网络来实现关系拟合&#xff0c;具体演示了从数据准备到模型训练和可视化的完整过程。首先&#xff0c;利用一维线性空间生成带噪…
阅读更多...
【uni-app】2025最新uni-app一键登录保姆级教程(包含前后端获取手机号方法)(超强避坑指南)

【uni-app】2025最新uni-app一键登录保姆级教程(包含前后端获取手机号方法)(超强避坑指南)

前言&#xff1a; 最近在配置uni-app一键登录时遇到了不少坑&#xff0c;uni-app的配套文档较为混乱&#xff0c;并且有部分更新的内容也没有及时更改在文档上&#xff0c;导致部分开发者跟着uni-app配套文档踩坑&#xff01;而目前市面上的文章质量也层次不齐&#xff0c;有的…
阅读更多...
干货分享：ISO 20000认证的适用范围、认证资料清单、认证流程等问题详解

干货分享：ISO 20000认证的适用范围、认证资料清单、认证流程等问题详解

编辑&#xff1a;石芸姗 审核&#xff1a;贺兆普 在当今这个数字化时代&#xff0c;信息技术&#xff08;IT&#xff09;已成为企业运营与发展的核心驱动力。随着技术的不断进步和业务需求的日益复杂&#xff0c;企业对IT服务的质量、效率及安全性提出了更高要求。 信息技术服…
阅读更多...
Element-plus表格使用总结

Element-plus表格使用总结

这里我使用的是Vue工程进行开发学习&#xff0c;安装需要通过包管理器进行下载 npm install element-plus --save 然后在main.js中配置文件即可使用&#xff0c;如果在引入index.css时没有提示&#xff0c;无需担心&#xff0c;直接写index.css即可导入样式。 Table表格 表格…
阅读更多...
CNN和Transfomer介绍

CNN和Transfomer介绍

文章目录 CNN和Transfomer介绍CNN和Transfomer的区别1. **基本概念**2. **数据处理方式**3. **模型结构差异**4. **应用场景区别** 自注意力机制1. **自注意力机制的概念**2. **自注意力机制的实现步骤**3. **自注意力机制的优势** Transformer结构组成1. **多头注意力层&#…
阅读更多...
如何解决 ‘adb‘ 不是内部或外部命令，也不是可运行的程序或批处理文件的问题

如何解决 ‘adb‘ 不是内部或外部命令，也不是可运行的程序或批处理文件的问题

在cmd中输入 adb &#xff0c;显示 ‘adc‘ 不是内部或外部命令&#xff0c;也不是可运行的程序或批处理文件的问题 解决办法&#xff1a;在环境变量中添加adb所在的路径 1、找到 adb.exe 的所在的文件路径&#xff0c;一般在 Android 安装目录下 \sdk\platform-tools\adb.exe…
阅读更多...
数据结构---------二叉树前序遍历中序遍历后序遍历

数据结构---------二叉树前序遍历中序遍历后序遍历

以下是用C语言实现二叉树的前序遍历、中序遍历和后序遍历的代码示例&#xff0c;包括递归和非递归&#xff08;借助栈实现&#xff09;两种方式&#xff1a; 1. 二叉树节点结构体定义 #include <stdio.h> #include <stdlib.h>// 二叉树节点结构体 typedef struct…
阅读更多...
网络架构与IP技术：4K/IP演播室制作的关键支撑

网络架构与IP技术：4K/IP演播室制作的关键支撑

随着科技的不断发展&#xff0c;广播电视行业也在不断迭代更新&#xff0c;其中4K/IP演播室技术的应用成了一个引人注目的焦点。4K超高清技术和IP网络技术的结合&#xff0c;不仅提升了节目制作的画质和效果&#xff0c;还为节目制作带来了更高的效率和灵活性。那么4K超高清技术…
阅读更多...
MySQL 8.0：explain analyze 分析 SQL 执行过程

MySQL 8.0：explain analyze 分析 SQL 执行过程

介绍 MySQL 8.0.16 引入一个实验特性&#xff1a;explain formattree &#xff0c;树状的输出执行过程&#xff0c;以及预估成本和预估返 回行数。在 MySQL 8.0.18 又引入了 EXPLAIN ANALYZE&#xff0c;在 formattree 基础上&#xff0c;使用时&#xff0c;会执行 SQL &#…
阅读更多...
观察者模式（sigslot in C++）

观察者模式（sigslot in C++）

大家&#xff0c;我是东风&#xff0c;今天抽点时间整理一下我很久前关注的一个不错的库&#xff0c;可以支持我们在使用标准C的时候使用信号槽机制进行观察者模式设计&#xff0c;sigslot 官网&#xff1a; http://sigslot.sourceforge.net/ 本文较为详尽探讨了一种观察者模…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023