Vue和axios零基础学习

news2024/11/18 13:47:59

Vue的配置与项目创建

在这之前要先安装nodejs

安装脚手架

官网

Home | Vue CLI (vuejs.org)

先运行，切换成淘宝镜像源，安装速度更快

npm config set registry http://registry.npm.taobao.org 

创建项目

用编译器打开一个空文件，在终端输入创建代码

以下是步骤

选择N

运行结果

配置serve

配置完以下，就可以改动代码，效果实时更新到页面上，对于开发来说很方便。

但只有社区版idea在这里才有npm可以选

模板语法

绑值语法

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
 
<body>
  <div id="app">
    {{ message }}
    <div>
      <!-- {{num++}}，不要这么写，别在这里运算，否则可能出错 -->
      {{num}}
    </div>
    <div>{{bool}}</div>
    <div>{{ arr.find(v => v.name === '张三')?.age }}</div>
 
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
 
  <script>
    var app = new Vue({
      el: '#app',//element
      //把vue的实例绑定到id是app的上面
      //
      data: {
        message: 'Hello I\'m lmm',
        num: 1,
        bool: true,
        arr: [{ name: '张三', age: 20 }]
      }
    })
  </script>
</body>
 
</html>

渲染html(v-html)

<template>
  <div>
    <div>{{rowHtml}}</div>
    <div v-html="rowHtml"></div>
  </div>
</template>

<script>
export default {
  name:'test',
  data(){
    return{
      rowHtml: '<a href="https://www.taobao.com/">淘宝</a>'
    }
  }
}
</script>

可以看到绑值语法是不能渲染出链接的

绑定属性(v-bind)

使用场景

1.绑定 HTML 属性

  • 用于动态设置元素的属性，例如 href、src、class、id 等。
<a v-bind:href="linkUrl">Click here</a>
<img v-bind:src="imageUrl" alt="Dynamic Image">

2.绑定多个属性

  • 可以通过对象语法绑定多个属性。
<div v-bind="objectProps"></div>

export default {
  data() {
    return {
      objectProps: {
        id: 'my-div',
        class: 'my-class',
        title: 'This is a title'
      }
    }
  }
}

实例

<template>
  <div>
    <a :href="url">点击这里访问淘宝</a>
    <br>
    <img :src="img" alt="Demo Image">
    <br>
    
  </div>
</template>

<script>
import logo from '@/assets/logo.png';
export default {
  name: 'test',
  data() {
    return {
      url: 'https://www.taobao.com/',
      // img: '@/asset/logo.png'
      //注意要先导入才能用
      img:logo
    }
  }
}
</script>

 事件绑定（v-on）

快捷绑定

直接写在行内

绑定方法

<template>
  <div>
    <div :style="{ width: '100px', height: '100px', backgroundColor: color }" @click="changeColor" id="testColor">
      点我
    </div>
  </div>
</template>

<script>
export default {
  name: 'test',
  data() {
    return {
      color: 'red' // 初始化颜色为红色
    }
  },
  methods: {
    changeColor() {
      // 切换颜色
      this.color = this.color === 'red' ? 'blue' : 'red';
    }
  }
}
</script>

判断(v-if)

如果为真，就渲染该内容

<template>
  <div>
    <div v-if="color === '红色'">红色</div>
    <div v-else>黑色</div>

  </div>
</template>

<script>
import logo from '@/assets/logo.png';
export default {
  name: 'test',
  data() {
    return {
      color:'黑色'
    }
  }
}
</script>

列表渲染（v-for）

每个元素都要有唯一索引，绑定key

在实际开发中，每个元素都有写好的索引，所以用不上index。

如果没有的话，就用index来记录

<template>
  <div v-for="item in fruits">{{item}}</div>
  <div v-for="item in user" :key="item.id">用已写好的索引：{{key}}{{item.name}}</div>
  <div v-for="(item,index) in user" :key="index">用系统分配的索引：{{key}}{{item.name}}</div>

</template>

<script>
export default {
  name: 'test',
  data() {
    return {
      fruits:['苹果','香蕉','西瓜'],
      user:[
        {
          id:'1001',
          name:'alicia'
        },
        {
          id:'1002',
          name:'fafa'
        },
        {
          id:'1003',
          name:'cami'
        }
      ]
    }
  },
  methods: {

  }
}
</script>

双向绑定(v-model)

<template>
  <div>
    <input type="text" v-model="str">
    <p>{{str}}</p>
  </div>
</template>

<script>
export default {
  name: 'test',
  data() {
    return {
      str:''
    }
  },
  methods: {

  }
}
</script>

组件基础

scoped:如果在style中添加此属性，就代表着，当前样式，只在当前组件中生效

使用组件步骤

组件的组织

上图想表达的是，组件间的使用是可以嵌套的

Props组件交互

prop可以使组件之间有数据传递

使用案例

父组件向子组件传递数据。被导入的组件是父组件。

App.vue 组件（父组件）：

<template>
  <div id="app">
    <Test :age="age" :name="name" :arr="arr"></Test>
  </div>
</template>

<script>
import Test from "@/components/test";

export default {
  name: 'App',
  components: {
    Test
  },
  data() {
    return {
      age: 18,
      name: 'chen',
      arr: [1, 2, 3]
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

test.vue 组件（子组件）：

<template>
  <p>props传递数据</p>
  <div>{{ age }}</div>
  <div>{{ name }}</div>
  <div v-for="i in arr" :key="i">{{ i }}</div>
</template>

<script>
export default {
  name: 'Test',
  props: {
    age: {
      type: Number,
      default: 0
    },
    name: {
      type: String,
      default: ''
    },
    arr: {
      type: Array,
      default: function () {
        return [];
      }
    }
  }
}
</script>

<style>
/* 添加样式 */
</style>



Prop类型

 需要注意的是，传递数组和对象必须使用函数进行返回

自定义事件组件交互

自定义事件是 Vue 中子组件与父组件进行交互的一种灵活方式。子组件可以通过 this.$emit 触发事件，父组件则通过事件监听器来处理这些事件。这样可以让组件之间的通信更加模块化和清晰。

自定义事件可以在组件中反向传递数据，prp可以将数据从父组件传递到子组件，那么反向如何操作呢，就可以利用自定义事件实现 $emit

子组件向父组件传递数据。被导入的组件是父组件。

子组件

<template>
  <button @click="sendMsg">点击传递数据</button>
</template>

<script>
export default {
  name: 'Test',
  data(){
    return{
      msg:'子组件向父组件传递数据'
    }
  },
  methods:{
    sendMsg(){
      this.$emit('onEvent',this.msg)
    }
  }

}
</script>

<style>
/* 添加样式 */
</style>

父组件 

<template>
  <div id="app">
    <Test @onEvent="getMsg"></Test>
    <div>{{msg}}</div>
  </div>
</template>

<script>
import Test from "@/components/test";

export default {
  name: 'App',
  data(){
    return{
      msg:''
    }
  },
  components: {
    Test
  },
  methods:{
    getMsg(data){
      this.msg = data
    }
  }

}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

组件生命周期

生命周期概述

Vue 组件的生命周期可以分为以下几个阶段：

  1. 创建阶段
  2. 挂载阶段
  3. 更新阶段
  4. 销毁阶段

每个阶段都有特定的生命周期钩子函数，你可以在这些钩子函数中执行相应的逻辑。

1. 创建阶段

  • beforeCreate: 在实例被初始化之后，数据观测和事件配置之前调用。这时 data 和 methods 还不可用。

  • created: 实例已创建，数据观测和事件配置完成。这时可以访问 data、methods 和 computed，但 DOM 还未生成。

2. 挂载阶段

  • beforeMount: 在挂载开始之前被调用，render 函数首次被调用。这时模板已经编译，但尚未被渲染到 DOM 中。

  • mounted: 挂载完成后调用，此时组件已经被渲染到 DOM 上。可以访问 DOM 元素和进行 DOM 操作。网络请求是放在这块。因为元素被渲染出来之后，还需要向后台请求数据。

3. 更新阶段

  • beforeUpdate: 数据更新之前调用，render 函数将被重新调用。这时你可以在 DOM 更新之前做一些处理。

  • updated: 数据更新之后调用，此时 DOM 也已经更新。可以执行一些依赖于 DOM 更新的操作。

4. 销毁阶段

  • beforeUnmount: 卸载之前调用，此时组件仍然可以访问其数据和 DOM。

  • unmounted: 卸载完成后调用，此时组件及其所有的子组件都已经被销毁。可以在这里进行清理工作，比如清除定时器、取消网络请求等。

axios

安装与引入

常用请求方法

如果不写的话，默认是get

查询参数（get）

<template>
  <div>
    {{data}}
  </div>
</template>

<script>
export default {
  name: 'Test',
  data(){
    return{
      data:{}
    }
  },
  mounted(){
    this.$axios({
      url: 'http://hmajax.itheima.net/api/city',

      //查询参数
      params: {
        pname: '福建省'
      }
    }).then(result => {
      this.data = result
    })
  }

}
</script>

<style>
/* 添加样式 */
</style>

数据提交（post）

<template>
  <div>
  </div>
</template>

<script>
export default {
  name: 'Test',
  mounted(){
    this.$axios({
      url: 'http://hmajax.itheima.net/api/register',
      method: 'post',
      data: {
        username: 'clmm1234567',
        password: '123123'
      }
    }).then(result => {
      console.log(result)
    })
  }


}
</script>

<style>
/* 添加样式 */
</style>

总结

网络请求封装

vue路由

了解

学到了路由，那么记得创建vue项目的时候把router选上，会自动配置路由文件

App.vue

<template>
  <div>
    <router-link to="/">首页</router-link>|
    <router-link to="/about">关于</router-link>
    <div>123</div>
    <router-view></router-view>
    <div>321</div>

  </div>
</template>

<script>
// import Test from "@/components/Test.vue";

export default {
  name: 'App',
  components: {
    // Test
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

index.js

import { createRouter, createWebHashHistory } from 'vue-router';
import HomeView from '../views/HomeView';
import AboutView from '../views/AboutView';

const routes = [
    {
        path: '/',
        name: 'Home',
        component: HomeView
    },
    {
        path: '/about',
        name: 'About',
        component: AboutView
    }
];

const router = createRouter({
    history: createWebHashHistory(),
    routes
});

export default router;

main.js

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import axios from 'axios';

// 创建 Vue 应用实例
const app = createApp(App);

// 配置 axios 实例
app.config.globalProperties.$axios = axios;

// 使用路由
app.use(router);

// 挂载应用
app.mount('#app');

路由传递参数

router配置

import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {
    path:'/news',
    name:'news',
    component: ()=>import("../views/NewsView")
  },
  {
    path:'/newsDetail/:name',
    name:'newsDetail',
    component: ()=>import("../views/NewsDetailView")
  },
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

NewView

<template>
  <div>
    <ul>
      <li><router-link to="/newsDetail/网易">网易新闻</router-link></li>
      <li><router-link to="/newsDetail/百度">百度新闻</router-link></li>
      <li><router-link to="/newsDetail/猾伪">猾伪新闻</router-link></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "NewsView"
}
</script>

<style scoped>

</style>

NewsDetailView

<template>
  <div>
    <h3>新闻</h3>
    {{$route.params.name}}
  </div>
</template>

<script>
export default {
  name: "NewsDetailView"
}
</script>

<style scoped>

</style>

嵌套路由配置

index.js

import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue'),
    redirect:'/about/b',
    children: [
      {
        path: 'a',
        component: () => import('../views/AboutSub/About_a')
      },
      {
        path: 'b',
        component: () => import('../views/AboutSub/About_b')
      }
    ]
  }

]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

AboutView.vue

<template>
  <div class="about">
    <router-link to="/about/a">a     |     </router-link>
    <router-link to="/about/b">b</router-link>
    <router-view></router-view>
    <h1>This is an about page</h1>
  </div>
</template>

点进about页面默认是about_b，因为重定向了

Vue状态管理

可以集中管理所有组件，不像props只能在父子间传递数据

引入状态管理

创建项目的时候勾选vuex

如果在创建项目的时候已勾选vuex，下面的前三步就不用了

vue状态管理核心

案例--面经基础

配置路由

先做一个底部导航切换效果。

配置路由

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path:'/',
    component:()=>import('@/views/LayOut'),

    children:[
      {
        path:'/collect',
        component:()=>import('@/views/Collect')
      },
      {
        path:'/like',
        component:()=>import('@/views/Like')
      },
      {
        path:'/user',
        component:()=>import('@/views/User')
      },
      {
        path:'/articleList',
        component:()=>import('@/views/ArticleList')
      },
    ]
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router


<template>
  <div>

    <div style="background-color: pink; width: 500px; height: 500px;">
      <router-view></router-view>
    </div>
    <nav>
      <router-link to="/articleList">面经 |</router-link>
      <router-link to="/collect">收藏 |</router-link>
      <router-link to="/like">喜欢 |</router-link>
      <router-link to="/user">我的</router-link>
    </nav>
  </div>
</template>

<style>
  a.router-link-active{
    color: red;
  }
</style>

需要注意的是，Layout中需要用router-view

Layout 组件作为一个包裹组件使用，这意味着它可能需要呈现其子路由内容。Layout 中的 <router-view> 组件用于展示其子路由（如 /article、/like 等）。这使得每个子路由在 Layout 组件内部渲染，同时 Layout 组件可以包含共同的布局或导航条。

简而言之，Layout 中的 <router-view> 用于渲染 Layout 的子路由组件内容。这样，你可以在 Layout 组件中管理应用的布局和结构，同时动态展示不同的子视图。

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Layout"
}
</script>

<style scoped>

</style>

首页请求渲染

<template>
  <div>
    <div v-for="item in articles"
         :key="item.id"
    >
      <p>{{item.stem}}</p>

    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "ArticleList",
  data(){
    return{
      articles:[]
    }
  },
  async created(){
    const { data } = await axios.get(
        'https://mock.boxuegu.com/mock/3083/articles',
    );
    this.articles = data.result.rows;
  }
}
</script>

<style scoped>

</style>

跳转详情页传参

查询参数

动态路由

路由配置

{
    path:'/detail/:id',
    component:() => import('@/views/ArticleDetail')
  }

路由使用

@click="$router.push(`/detail/${item.id}`)"

<template>
  <div>
    <div v-for="item in articles"
         :key="item.id"
         @click="$router.push(`/detail/${item.id}`)"
    >
      <p>{{item.stem}}</p>

    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "ArticleList",
  data(){
    return{
      articles:[]
    }
  },
  async created(){
    const { data } = await axios.get(
        'https://mock.boxuegu.com/mock/3083/articles',
    );
    this.articles = data.result.rows;
  }
}
</script>

<style scoped>

</style>

面经详情页的路由接收

this.$route.params.id

<template>
  <div>
    面经详情
  </div>
</template>

<script>
export default {
  name: "ArticleDetail",
  created() {
    console.log(this.$route.params.id)
  }
}
</script>

<style scoped>

</style>

详情页渲染

<template>
  <div>
    {{article.content}}
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "ArticleDetails",
  data(){
    return{
      article:{}
    }
  },
  async created() {
    const id = this.$route.params.id
    console.log(this.$route.params.id)
    const {data} = await axios.get(`https://mock.boxuegu.com/mock/3083/articles/${id}`)
    this.article = data.result
  }
}
</script>

<style scoped>

</style>

组件缓存

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

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

相关文章

DMA的原理

DMA的原理

一、介绍 DMA&#xff08;Direct Memory Access&#xff09;是一种允许设备直接与内存进行数据交换的技术&#xff0c;无需‌CPU干预。DMA的主要功能是提供在‌外设和存储器之间或者存储器和存储器之间的高速数据传输。比如使用ADC进行数据采集&#xff0c;可以直接将数据存入…
阅读更多...
【STM32】江科大STM32笔记汇总(已完结)

【STM32】江科大STM32笔记汇总(已完结)

STM32江科大笔记汇总 STM32学习笔记课程简介(01)STM32简介(02)软件安装(03)新建工程(04)GPIO输出(05)LED闪烁& LED流水灯& 蜂鸣器(06)GPIO输入(07)按键控制LED 光敏传感器控制蜂鸣器(08)OLED调试工具(09)OLED显示屏(10)EXTI外部中断(11)对射式红外传感器计次 旋转编码器…
阅读更多...
GAMES101（21~22节，动画和仿真）

GAMES101（21~22节，动画和仿真）

Animation 关键帧 动画和几何&#xff08;曲线&#xff09;相关 物理模拟/仿真 牛顿第二定律&#xff1a;F ma 需要清楚网格间相互作用力&#xff0c;也需要把物理仿真和渲染分为两部来看&#xff0c;例如布料模拟&#xff0c;流体模拟 mass spring system质点弹簧系统 …
阅读更多...
Nest.js实现一个简单的聊天室

Nest.js实现一个简单的聊天室

本文将介绍如何使用 Nest.js 和 Uni-app 实现一个简单的实时聊天应用。后端使用 nestjs/websockets 和 socket.io&#xff0c;前端使用 uni-app 并集成 socket.io-client。这个项目允许多个用户同时加入聊天并实时交换消息。 效果图&#xff1a; 一、准备工作 安装 Node.js 和…
阅读更多...
数据结构与算法——Java实现 24.中缀表达式转后缀

数据结构与算法——Java实现 24.中缀表达式转后缀

目录 中缀表达式转后缀表达式 引言 思路 代码 正因为我有能力跨越&#xff0c;考验才会降临 —— 24.9.28 中缀表达式转后缀表达式 引言 Java中的编译器会将我们编写代码中的中缀表达式转化为后缀表达式&#xff0c;然后编译好输出程序 思路 遍历中缀表达式&#xff0c;如果遇…
阅读更多...
电脑学习通看不到课程解决办法

电脑学习通看不到课程解决办法

电脑学习通看不到课程解决办法 查看学习通时发现没有课程 解决方法1: 更改单位 具体见:超星学习通关于PC版无法查看课程问题解决 解决方法二:添加应用 添加应用 点击账号管理 点击应用管理 添加应用、添加首页这个应用 添加完成后查看首页就能看到课程了 然后就OK啦、就可…
阅读更多...
[JavaEE] HTTP/HTTPS

[JavaEE] HTTP/HTTPS

目录 一、HTTP 1.1 HTTP是什么 1.2 HTTP发展史 1.3 HTTP工作过程 1.3.1 抓包工具的原理 1.4 HTTP请求格式 1.4.1认识URL 1.5 HTTP响应格式 1.6 认识HTTP"方法"(method) 1.6.1 GET方法 1.6.2 POST方法 1.6.3 其他方法 1.7 GET 与 POST 的区别 1.8 认识…
阅读更多...
Centos安装docker（linux安装docker）——超详细小白可操作手把手教程，包好用！！！

Centos安装docker（linux安装docker）——超详细小白可操作手把手教程，包好用！！！

&#x1f9f8;本篇博客重在讲解Centos安装docker&#xff0c;经博主多次在不同服务器上测试&#xff0c;极其的稳定&#xff0c;尤其是阿里的服务器&#xff0c;一路复制命令畅通无阻 &#x1f4dc;后续会退出ububtu安装docker教程&#xff0c;敬请期待 &#x1f4dc;作者首页&…
阅读更多...
某客户Oracle RAC无法启动故障快速解决

某客户Oracle RAC无法启动故障快速解决

某日&#xff0c;9:50左右接到好友协助需求&#xff0c;某个客户Oracle RAC无法启动&#xff0c;并发过来一个报错截图&#xff0c;如下&#xff1a; 和客户维护人员对接后&#xff0c;远程登录服务端进行故障分析。 查看hosts信息&#xff0c;首先进行心跳测试&#xff0c;测…
阅读更多...
Java爬虫：获取SKU详细信息的艺术

Java爬虫：获取SKU详细信息的艺术

在电子商务的世界里&#xff0c;SKU&#xff08;Stock Keeping Unit&#xff0c;库存单位&#xff09;是每个商品的唯一标识符&#xff0c;它包含了商品的详细信息&#xff0c;如尺寸、颜色、价格等。对于商家和开发者来说&#xff0c;获取商品的SKU详细信息对于库存管理、订单…
阅读更多...
Spring Boot 整合 Keycloak

Spring Boot 整合 Keycloak

1、概览 本文将带你了解如何设置 Keycloak 服务器&#xff0c;以及如何使用 Spring Security OAuth2.0 将 Spring Boot 应用连接到 Keycloak 服务器。 2、Keycloak 是什么&#xff1f; Keycloak 是针对现代应用和服务的开源身份和访问管理解决方案。 Keycloak 提供了诸如单…
阅读更多...
秦巴山区SHP格式矢量范围

秦巴山区SHP格式矢量范围

‌秦巴山区的shp范围包括河南、湖北、重庆、四川、陕西、甘肃六省市的80个县(市、区)。‌这一区域不仅地理范围广泛&#xff0c;而且生态多样性丰富&#xff0c;是国家重要的生物多样性和水源涵养生态功能区。秦巴山区的地貌类型以山地丘陵为主&#xff0c;间有汉中、安康、商丹…
阅读更多...
Centos8.5.2111（1）之本地yum源搭建和docker部署与网络配置

Centos8.5.2111（1）之本地yum源搭建和docker部署与网络配置

由于后边可能要启动多个服务&#xff0c;避免服务之间相互干扰&#xff0c;本课程建议每个服务独立部署到一台主机上&#xff0c;这样做会导致资源占用过多&#xff0c;可能会影响系统的运行。服务器部署一般不采用GUI图形界面部署&#xff0c;而是采用命令行方式部署&#xff…
阅读更多...
lDE 使用技巧与插件推荐（含案例说明）

lDE 使用技巧与插件推荐（含案例说明）

在使用集成开发环境&#xff08;IDE&#xff09;进行编程时&#xff0c;掌握一些技巧和使用高效的插件可以显著提高开发效率。以下是一些通用的IDE使用技巧和插件推荐&#xff0c;适用于多种流行的IDE&#xff0c;如IntelliJ IDEA、Visual Studio Code、PyCharm等。每个技巧和插…
阅读更多...
IEEE GRSL投稿历程分享

IEEE GRSL投稿历程分享

投稿期刊&#xff1a;IEEE geoscience and remote sensing 本人为本科生&#xff0c;在投这本期刊时已经经历了三次拒稿&#xff08;两次RS&#xff0c;一次GRSL&#xff09;&#xff0c;被RS拒稿意料之中&#xff0c;因为工作量并不是特别大&#xff0c;所以写得比较短&#…
阅读更多...
【RocketMQ】RocketMQ快速入门

【RocketMQ】RocketMQ快速入门

&#x1f3af; 导读&#xff1a;该文档介绍了Apache RocketMQ消息队列的基础应用&#xff0c;包括消息发送与接收的基本流程。首先通过创建生产者实例&#xff0c;并指定名称服务器地址&#xff0c;启动后即可发送消息至指定主题。然后创建消费者实例订阅相应主题&#xff0c;并…
阅读更多...
js逆向——webpack实战案例(一)

js逆向——webpack实战案例(一)

今日受害者网站&#xff1a;https://www.iciba.com/translate?typetext 首先通过跟栈的方法找到加密位置 我们跟进u函数&#xff0c;发现是通过webpack加载的 向上寻找u的加载位置&#xff0c;然后打上断点&#xff0c;刷新网页&#xff0c;让程序断在加载函数的位置 u r.n…
阅读更多...
Mamba模型初步解析 — Mamba : Linear-Time Sequence Modeling with Selective State Spaces

Mamba模型初步解析 — Mamba : Linear-Time Sequence Modeling with Selective State Spaces

Mamba模型初步接触 — Mamba : Linear-Time Sequence Modeling with Selective State Spaces "Mamba"是一种序列建模架构&#xff0c;它采用了称为选择性状态空间模型&#xff08;SSMs&#xff09;的结构来优化处理长序列数据的效率和性能&#xff0c;这在语言处理、…
阅读更多...
如果只能保留一个复制粘贴软件，那一定是它pastemate

如果只能保留一个复制粘贴软件，那一定是它pastemate

下载地址&#xff1a;Pastemate 在日常的工作和生活中&#xff0c;使用电脑必离不开的功能中&#xff0c;一定有复制粘贴。传统的复制粘贴方式效率不那么高&#xff0c;Windows内置的剪切板功能感觉又差那么些意思。 &#x1f9d0;对于功能和颜值都有要求的你&#xff0c;一定…
阅读更多...
端口隔离配置的实验

端口隔离配置的实验

端口隔离配置是一种网络安全技术&#xff0c;用于在网络设备中实现不同端口之间的流量隔离和控制。以下是对端口隔离配置的详细解析&#xff1a; 基本概念&#xff1a;端口隔离技术允许用户将不同的端口加入到隔离组中&#xff0c;从而实现这些端口之间的二层数据隔离。这种技…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023