vue基础——java程序员版(总集)

前言：

​ 这是一个java程序员的vue学习记录。

​ vue是前端的主流框架，按照如今的就业形式作为后端开发的java程序员也是要有所了解的，下面是本人的vue学习记录，包括vue2的基本使用以及引入element-ui，使用的开发工具是IDEA。

一、第一个vue项目

1、环境需求

​ 系统环境使用的vue3但是后续创建的项目是vue2项目，主要是因为vue3提供了vue ui对于初学者十分友好，这些环境的安装网上教程很多，我这里主要是记录一下一个java程序员怎么利用idea使用vue2框架。

2、使用vue ui创建项目

（1）启动vue ui

​ 进入你需要创建vue项目的目录，我这里是vue-project，输入vue ui ,vue 的脚手架会自动创建一个地址，一般端口号是8000。

​ 进入这个界面就表示成功了。我这里是我因为之前创建过项目所以直接进入项目仪表盘了，第一次创建应该进入第二页面。如果进入第一个页面点击左上角也可以进入第二个页面。

（2）创建项目

​ 项目管理器的地址栏有需要可以自由更换，点击创建项目进入创建项目界面，确定你的项目名字我这里是vue-test，选择包管理器为npm，git他是默认选的，我这里没选。

​ 点击下一步,选择vue2，点击创建项目并等待大概一分钟，第一次可能更慢。

（3）通过IDEA启动项目

找到项目文件夹，用idea打开

​ 在idea上面找到编辑配置

​ 选择npm

​ 配置npm，这里应该只是需要选择脚本为serve

​ 运行npm，默认端口是8080，如果可以进入了这个界面就证明成功启动，当然在控制台使用npm run serve也可以直接执行。

二、配置vue项目

1、vue的目录结构

​

2、修改端口号

​ 因为8080这个端口十分热门所以为了避免冲突，我们可以通过更改vue.config.js修改端口号，修改端口为7070。

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

3、安装插件（element-ui）

​ 在插件市场搜索element ui安装，后面不要忘记选择配置插件（选择默认的就行），另外需要注意vue2是element但是vue3是element-plus。

4、配置依赖（Axios）

​ Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

​ 简而言之Axios是前端向后端发送http请求的工具，是前后端交互的重要方式。

三、vue的基本使用

1、.vue文件的结构

​ script标签写js，style标签写css，template写html可以理解为原生html的body标签。对于template有且只有一个div标签。

<template><div></div>
</template>
<script>
</script>
<!--scope表示这个样式只在此文件生效，不加就是全局--->
<style scoped>
</style>

2、关闭关闭eslint校验

​ vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,//   修改前端端口号devServer:{port: 7070},// 关闭eslint校验lintOnSave: false
})

3、引入组件

​ import导入，components:注入，通过标签使用。


<template ><div><!--  3、使用组件--><first/><hr><HelloVue/><hr><Ifdemo/><hr><ForDemo/><hr><VueOn/><hr><vueEvent/><hr><compute/><hr><watch/><hr><myForm/><hr><parent/><hr><parent2/><hr><slot1/></div>
</template>
<script >
/*** 内容改变：{{}}* 标签属性改变：v-bind:* 监听事件:v-on:事件（click）* */
// 1、引入组件
import HelloVue from "./components/HelloVue.vue";
import Ifdemo from "./components/ifdemo.vue";
import ForDemo from "./components/forDemo.vue";
import VueOn from "./components/vueOn.vue";
import vueEvent from "@/components/vueEvent.vue";
import First from "./components/first.vue";
import compute from "./components/compute.vue";
import watch from "./components/watch.vue";
import myForm from "./components/myForm.vue";
import parent from "@/components/parent.vue";
import parent2 from "@/components/parent2.vue";
import slot1 from "@/components/slot1.vue";
export default {//2、 注入组件components:{HelloVue, Ifdemo , ForDemo, VueOn , vueEvent, First , compute, watch , myForm,parent,parent2,slot1,}
}
</script>
<!--scope表示这个样式只在此文件生效，不加就是全局--->
<style scoped>
</style>

4、{{}}语法

​ 可以通过双花括号渲染data()内的元素，hello.split("").reverse().join("") 的作用是先用"“分隔然后再反转最后用”"连接。
v-html可以插入html结构的文本。

<template><div><p>{{msg}}</p><p>{{hello.split("").reverse().join("")}}</p><p v-html="html"></p></div>
</template>
<script>
export default {data(){return{msg:"消息",hello: "你好hhh",html:"<a href='https://baidu.com'>百度</a>"}}
}
</script>
<style scoped></style>

5、v-bind

​ v-bind:+ 标签属性= "js元素名"可以动态修改属性内容，对于对象会把属性名作为标签内的属性名，对象属性的值为标签属性的值，下面就是input标签的class属性和id属性都为id。可以用:代替v-bind:

<template><div><h3>vue v-bind的使用</h3><p><input type="button" v-bind:value="btn" v-bind="object"/></p></div>
</template>
<!--加上scoped能够防止样式之间的冲突-->
<style scoped>
body {background-color: #ff0000;
}
</style>
<script>
export default {data() {return {msg: '这个是Vue模板页',btn:"按钮",object:{class:"my",id:"my"}}}
}
</script>

6、v-if

​ v-if和v-else实现if、else的效果。

<template><div><h3>vue if</h3><p v-if="flag">正确</p><p v-else>错误</p></div>
</template>
<script>
export default {data() {return {flag: true}}
}
</script>

7、v-for

​ 类似java的foreach循环，it表示数组内容，index表示序号(从0开始)，遍历对象时key表示对象的属性名。

<template><div><h3>列表渲染</h3><p v-for="it in name">{{it}}</p><!--  顺序不要改--><p v-for="(it,index) in name">{{index+1}}----{{it}}</p><p v-for="(it,key,index) in object">{{index}}---{{key}}---{{it}}</p></div>
</template>
<script>
export default {data() {return {name:["java","spring","vue"],object:{name:"张三",age:20,gender:"男"}}}
}
</script>

8、v-on

​ v-on：可以绑定事件，下面分别实现了点击事件count++和count–。可以用@ 代替v-on:。

<template><div><h3>事件绑定</h3><button v-on:click="count++">up</button><!-- 推荐使用函数--><button v-on:click="downCount">down</button><h3>{{count}}</h3></div>
</template>
<script >
export default {data() {return {count:0,}},methods:{downCount(){this.count--;}}
}
</script>

9、事件传参

​ addCount实现了修改button标签的value值，func传递了name中的参数值和点击事件，两者监听的都是点击事件。

<template>
<div><h3>事件传参</h3><button v-on:click="addCount">add</button><p v-for="it in name" v-on:click="func(it,$event)">{{it}}</p>
</div>
</template>
<script>
export default {data() {return {count: 0,name:["java","spring","vue"],}},methods:{// vue中的event对象就是原生js的event对象addCount(e){this.count++;e.target.innerHTML="add"+this.count;},func(msg,e){alert("点击了"+msg+e);}}
}
</script>

10、计算属性

​ computed:效果类似于method，但是效率更高。

<template><div><h3>计算属性</h3><p>{{test}}</p></div>
</template>
<script>
export default {data() {return {msg: '这个是Vue模板页'}},// 函数的效率不如计算属性computed:{test(){return this.msg.length>0?"Yes":"NO";}}
}
</script>

11、监听器(watch)

​ 监听点击事件触发updateMsg()更改msg的值，watch内的监听器可以绑定msg属性(保证名字一样即可)，可以获取改变前后的值。

<template><div><h3>侦听器</h3><button @click="updateMsg">{{ msg }}</button></div>
</template>
<script>
export default {data() {return {msg: '你好'}},methods:{updateMsg(){if(this.msg==='你好')this.msg='再见';else this.msg='你好';}},watch:{// 侦听器的名字必须和绑定的属性名的名称一模一样msg(newValue,oldValue){console.log("改变前："+oldValue);console.log("改变后："+newValue);}}
}
</script>

12、v-model

​ 双向绑定标签属性和vue属性。

<template><form><input type="text" v-model="msg"/><br>
<!--    lazy只有确定才提交改变--><input type="text" v-model.lazy="msg"/><br>{{msg}}</form>
</template>
<script>
export default {data() {return {msg: ''}}
}
</script>

13、组件间信息传递(父传子）

子组件可以使用父组件的属性。在子组件的props定义和父组件中子组件标签传入属性名相同的属性。

父组件

<template><div><h3>组件之间的信息传递（父传子）</h3><h5>父组件</h5><child v-bind:data="msg" :names="names"/></div></template>
<script>
import child from "@/components/child.vue";
export default {data() {return {msg: '父组件的数据',names:['张三','李四','王五']}},components:{child}
}
</script>

子组件

<template><div><h5>子组件</h5><p>{{data}}</p><p>{{names}}</p><p>age: {{age}}</p></div>
</template>
<script>
export default {data() {return {msg: '这个是Vue模板页'}},// 名字必须和父组件的参数名字一幕一样，任何数据都可以传递,但是不允许修改父组件传递的数据props:{data:{},names:{},age:{// 规定参数类型type:[Number],// 没有传参时的默认值，只有数字和字符串可以直接给默认值，数组和对象需要用default()函数default:10}},}
</script>

14、组件事件(子传父)

子组件自定义事件名称，父组件监听这个事件，父组件再为这个事件设置一个执行方法，这个方法就可以接受子组件数据。

父组件

<template><div><h3>组件事件（子传父）</h3><h5>父组件</h5>接收的参数:{{msg}}<child2 v-on:gogo="handel"/></div>
</template>
<script>
import child2 from "@/components/child2.vue";
export default {data() {return {msg:''}},methods:{// 参数名只能是datahandel(data){this.msg=data;}},components:{child2}
}
</script>

子组件

<template><div><h5>子组件</h5><button v-on:click="do1">传数据</button></div>
</template>
<script>
export default {data() {return {msg: '子组件数据'}},methods:{do1(){// 两个参数，第一个是父组件实现的事件名称，第二个是参数,$emit是关键字this.$emit("gogo",this.msg);}}
}
</script>

15、插槽

​ 组件可以根据需要展示和组合不同插槽。

父组件

<template><slot2>
<!--    多个插槽使用v-slot命名--><template v-slot:first>
<!--      可以传递父组件属性到插槽--><div >{{msg}}</div></template><template v-slot:header><div >头部</div></template></slot2>
</template>
<script>
import slot2 from "@/components/slot2.vue";
export default {data() {return {msg: '父组件：插槽内容'}},components:{slot2,}
}
</script>

子组件

<template><div><h3>插槽</h3><!--  slot渲染父组件的内容--><!--  使用name=渲染对应父组件插槽--><slot name="first">插槽默认值（父组件没有传插槽时显示）</slot><slot name="header">插槽默认值（父组件没有传插槽时显示）</slot><slot name="footer">插槽默认值（父组件没有传插槽时显示）</slot></div>
</template>
<script>
export default {data() {return {msg: '这个是Vue模板页'}}
}
</script>

四、Axios实现前后端交互

​ 现在的项目大部分都是前后端分离项目，Axios是前后端交互的重要工具。

1、后端(springboot)

（1）Controller

​ 分别是post和get请求都有Rustful路径参数value，post是User作为json格式的请求体，get是两个路径参数。

@RestController
@RequestMapping("test/")
public class MyController {@PostMapping("/first/{value}")public String test(@PathVariable String value,@RequestBody User user){return value+" "+user.username+" "+user.password;}@GetMapping("/first/{value}")public String test(@PathVariable String value,String username,String password){return value+" "+username+" "+password;}
}

（2）实体类(User)

​ User不要忘了给属性以set方法。

@Data
class User  implements Serializable {String username;String password;
}

2、前端

（1）配置代理解决跨域问题

​ 跨域的本质就是浏览器基于同源策略的一种安全手段。所谓同源就是必须有以下三个相同点：协议相同、域名相同、端口相同。如果其中有一项不同，即出现非同源请求，就会产生跨域。

​ 浏览器跨域机制的主要目的是保护用户的安全和隐私。

修改vue.config.js 配置代理，此后我们的请求只需要用/api 代替http://localhost:8080 即可

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,//   修改前端端口号devServer: {port: 7070,//配置代理proxy: {//api 是个请求时的前缀，请求到/api转发到http://localhost:8080，此后只需要在所有前端请求路径上//http://localhost:前端端口号/api等于http://localhost:后端端口号'/api': {target: 'http://localhost:8080',//因为路径出现了/api所以需要取消pathRewrite: {'^/api': ''}}}},
// 关闭eslint校验lintOnSave: false
})

（2）请求方式一

​ 向后端返送post请求，并添加请求体(后端接收的是json格式)。不要忘记引入axiosimport axios from "axios"

<template><div>账号：<input type="text" v-model="username"/> <br/>密码：<input type="password" v-model="password"/><button @click="submit">提交</button></div>
</template>
<script>
import axios from "axios";export default {data() {return {password: '',username: ''}},methods:{submit(){let _this=this;//发送http请求，postaxios.post("/api/test/first/login",{username: _this.username,password: _this.password}).then(res=> {console.log(res.data)}).catch(error=>{console.log("错误: "+error.message)})}}
}
</script>

（3）请求方式二

​ 通用写法，method规定请求方式，这个是向后端返送get请求，并添加路径参数。不要忘记引入axiosimport axios from "axios"

<template>
<!--Axios通用写法--><div>账号：<input type="text" v-model="username"/> <br/>密码：<input type="password" v-model="password"/><button @click="submit1">提交</button></div>
</template>
<script>
import axios from "axios";
export default {data() {return {password: '',username: ''}},methods:{submit1(){let _this=this;axios({url:'/api/test/first/login',// `method` 是创建请求时使用的方法method: 'get', // 默认就是get/***  headers:'',//请求头，可以放token*/// `params` 是即将与请求一起发送的 URL 参数// 一般是get请求，也就是路径参数params: {username: _this.username,password: _this.password},// data是请求体，post、put、delete用,get没有请求体不用/*** data: {*   firstName: 'Fred'*  },*/}).then(res=>{console.log(res.data)}).catch(err=>{console.log(err.message)})}}
}
</script>

五、路由(Vue-Router)

1、引入路由

在控制台执行==vue ui== ，在插件市场里可以找到vue-router并导入。

​ 一般情况下，vue会自动在main,js中引入vue-router，如下：

import Vue from 'vue'
import App from './App.vue'
import './plugins/element.js'
import router from './router'
Vue.config.productionTip = false
new Vue({router,render: h => h(App)
}).$mount('#app')

2、路由跳转的页面构成

​ 这是vue自动生成的主页面(app.vue)，对于router-link 标签可以理解为a标签点击可以进行视图跳转，对于router-view 标签就是展示视图的地方，通过点击不同的router-link，router-view展示对应路由的组件。

<template><div id="app"><nav><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link> |</nav>
<!--    占位符展示视图的位置，点击上面的router-link，在这里展示不同的页面--><router-view/></div>
</template>

3、配置路由

路由的配置文件位于`src/router/index.js` ,修改index.js来配置路由。下面有两种配置路由的方式：动态和静态，推荐使用动态引入，对于`parh="*"`的路径表示访问路由不存在所访问的组件，当然这里是从定向到自定义的404组件了。

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',// 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')},//404{path: '/404',component: ()=>import('../components/404.vue')},//   假如请求的路由上面都没有，就会跳转到这个路由{path: '*',// 重定向到404redirect: '/404'}
]
const router = new VueRouter({routes
})export default router

4、路由嵌套

​ 对应一个组件它当然也可以想app.vue一样使用路由，只需要配置它的子路由即可，在children: [ ]中配置子路由规则和正常路由一样。此时访问/c/p1就是P1View组件替换 ContainerView的< router-view/>

 //嵌套路由{path: '/c',component: () => import('../views/element/ContainerView.vue'),// 默认访问/c重定向到/c/p1redirect: '/c/p1' ,// 子路由,对应路由展示到父路由的组件内部,也就是切换的是ContainerView.vue的<router-view/>children: [{path: '/c/p1',component: () => import('../views/element/P1View.vue'),},{path: '/c/p2',component: () => import('../views/element/P2View.vue'),},{path: '/c/p3',component: () => import('../views/element/P3View.vue'),}]},

ContainerView.vue使用了element-ui的布局容器

<template>
<div><el-container><el-header>Header</el-header><el-container><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><el-main><router-view/></el-main></el-container></el-container>
</div>
</template>
<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>

六、vuex

​ vuex可以定义共享数据。

1、主要结构

src/store/index.js 是使用vuex的核心js文件。

  • 定义数据：state

  • 修改数据(同步)：mutations

  • 修改数据(异步)：action=调用=>mutations

    下面定义了一个公共数据msg ，mutations方法setName，action方法sendAjax 。

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({// 定义共享数据，{{$store.state.msg}}展示，所以得组件都可以使用state: {msg:'这是vuex的公共消息',},getters: {},// 只能由mutations来实现修改，必须是同步操作mutations: {// state代表的是上面的state必须同名，但是后面的参数是形参名字随意，调用：this.$store.commit('setName','新的信息！');setName(state,newMsg){state.msg=newMsg;}},// action可以调用mutations，在action可以执行异步操作（Ajax），调用：this.$store.dispatch('sendAjax');actions: {// 通过传入context来调用mutations方法sendAjax(context){/*** 执行Ajax*/context.commit('setName','异步修改的信息');},},modules: {}
})

2、操作共享数据

​ {{$store.state.msg}}展示数据msg，update1()调用mutations的setName方法修改msg，update2()调用action的sendAjax方法修改msg。

<template>
<div><h1>{{$store.state.msg}}</h1><input type="button" value="直接修改共享数据" @click="update1()"/><input type="button" value="异步修改共享数据" @click="update2()"/>
</div>
</template>
<script>export default {methods:{update1(){// 第一个参数是mutations定义的函数名，第二个是参数this.$store.commit('setName','新的信息！');},update2(){// 调用action方法，指定调用的函数名this.$store.dispatch('sendAjax');}}}
</script>

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

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

相关文章

Github 2024-03-28 开源项目日报 Top10

Github 2024-03-28 开源项目日报 Top10

根据Github Trendings的统计，今日(2024-03-28统计)共有10个项目上榜。根据开发语言中项目的数量，汇总情况如下： 开发语言项目数量Python项目4Jupyter Notebook项目2TypeScript项目2非开发语言项目2Solidity项目1Go项目1Open Interpreter: 本地代码运行和自然语言界面 创建周…
阅读更多...
大型驱动水冷负载电阻、缓冲器、滤波器和快速放电电阻

大型驱动水冷负载电阻、缓冲器、滤波器和快速放电电阻

EAK业界首创双面水冷负载电阻器&#xff0c;独特的设计&#xff0c;用户更方便的串联并联使用&#xff0c;强大的水流带走更多因充放电带来的热量。AlN高可靠性氮化铝基板保证了热膨胀不会影响电阻的工作。 液冷电阻器使用水或离子水作为冷却剂。通过添加乙二醇&#xff0c;可以…
阅读更多...
如何高效阅读嵌入式代码

如何高效阅读嵌入式代码

大家好&#xff0c;今天给大家介绍如何高效阅读嵌入式代码&#xff0c;文章末尾附有分享大家一个资料包&#xff0c;差不多150多G。里面学习内容、面经、项目都比较新也比较全&#xff01;可进群免费领取。 高效阅读嵌入式代码需要一些技巧和实践经验。以下是一些建议&#xff…
阅读更多...
HarmonyOS入门笔记--页面和自定义组件生命周期

HarmonyOS入门笔记--页面和自定义组件生命周期

文章目录 页面和自定义组件生命周期页面生命周期组件生命周期生命周期的调用时机 页面和自定义组件生命周期 生命周期流程如下图所示&#xff0c;下图展示的是被Entry装饰的组件&#xff08;首页&#xff09;生命周期。 自定义组件和页面的关系&#xff1a; 自定义组件&…
阅读更多...
EdgeGallery开发指南

EdgeGallery开发指南

API接口 简介 EdgeGallery支持第三方业务系统通过北向接口网关调用EdgeGallery的业务接口。调用流程如下图所示&#xff08;融合前端edgegallery-fe包含融合前端界面以及北向接口网关功能&#xff0c;通过浏览器访问时打开的是融合前端的界面&#xff0c;通过IP:Port/urlPref…
阅读更多...
机器学习——聚类算法-KMeans聚类

机器学习——聚类算法-KMeans聚类

机器学习——聚类算法-KMeans聚类 在机器学习中&#xff0c;聚类是一种无监督学习方法&#xff0c;用于将数据集中的样本划分为若干个簇&#xff0c;使得同一簇内的样本相似度高&#xff0c;不同簇之间的样本相似度低。KMeans聚类是一种常用的聚类算法之一&#xff0c;本文将介…
阅读更多...
反应式编程（二）什么是粘包、拆包？如何解决？

反应式编程（二）什么是粘包、拆包？如何解决？

目录 一、粘包、拆包介绍1.1 什么是 TCP 协议&#xff1f;1.2 什么是粘包、拆包&#xff1f;1.3 粘包、拆包的四种情况1.4 粘包、拆包的原因1&#xff09;TCP协议中的滑动窗口机制2&#xff09;传输层的 MSS 与链路层的 MTU3&#xff09;TCP协议中的 Nagle 算法4&#xff09;应…
阅读更多...
布隆过滤器详讲

布隆过滤器详讲

本文旨在讲解布隆过滤器的原理以及实现方式&#xff0c;希望通过本文能使读者对布隆过滤器有一定的认识&#xff01; 一、布隆过滤器的引入 在讲解布隆过滤器之前&#xff0c;我们还是先提及一下前面讲的位图行&#xff0c;位图可以处理大量的数据&#xff0c;广泛用于查找等…
阅读更多...
LoadBalance 负载均衡服务调用

LoadBalance 负载均衡服务调用

前身:Ribbon LB负载均衡(Load Balance)是什么 简单的说就是将用户的请求平摊的分配到多个服务上&#xff0c;从而达到系统的HA&#xff08;高可用&#xff09;&#xff0c;常见的负载均衡有软件Nginx&#xff0c;LVS&#xff0c;硬件 F5等 spring-cloud-starter-loadbalancer组…
阅读更多...
【独立开发前线】Vol.23 这个卖Excel课程的网站，月访问量14.5万，年销售额超过200万美金

【独立开发前线】Vol.23 这个卖Excel课程的网站，月访问量14.5万，年销售额超过200万美金

今天要给大家分享的案例网站是&#xff1a;Miss-Excel 网址是&#xff1a;Miss Excel 这是一个专门销售Excel课程的网站&#xff0c;网址一共有18个系列的视频课程&#xff0c;最便宜的44美金&#xff0c;最贵的1197美金。所有的课程都是网站的创始人Kat Norton录制的&#xf…
阅读更多...
C语言文件操作详解

C语言文件操作详解

文件是什么 在我们日常使用的电脑上我们在电脑磁盘上会看到许许多多的文件夹&#xff0c;那里面的东西其实就是文件&#xff0c;为什么我们要使用文件&#xff1f;那是因为我们的电脑肯定会要用来存储东西的&#xff0c;如果没有文件&#xff0c;那么我们的东西都全部存放在内…
阅读更多...
【沐风老师】3DMAX顶点投影插件VertexProjection使用方法详解

【沐风老师】3DMAX顶点投影插件VertexProjection使用方法详解

3DMAX顶点投影插件VertexProjection使用教程 3DMAX顶点投影插件VertexProjection&#xff0c;将可编辑多边形顶点向下投影到网格对象表面。可以对可编辑多边形对象上的所有顶点或部分顶点进行投影。主要用于地形建模、道路交通等领域。 【适用版本】 3dMax 2010 - 2024&#x…
阅读更多...
vue3路由代码示例

vue3路由代码示例

路由简单分三步吧 第一定义路由&#xff1a; 包括访问地址&#xff0c;对应组件 第二使用&#xff1a;在index.html中使用它 下面是代码示例&#xff1a; components/Person.vue <template><router-link to"/test/hello">跳转</router-link>&…
阅读更多...
一键换脸的facefusion

一键换脸的facefusion

FaceFusion 一个开源换脸软件&#xff0c;提供UI界面&#xff0c;启动后可直接在浏览器上面上传图片进行换脸操作。 电脑环境win10&#xff0c;软件pycharm&#xff0c;需要提前安装好python环境&#xff0c;推荐使用Anaconda3。关注文章下方公共号发送 “ 软件安装包 ”可以获…
阅读更多...
Leetcode239_滑动窗口最大值

Leetcode239_滑动窗口最大值

1.leetcode原题链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 2.题目描述 给你一个整数数组 nums&#xff0c;有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。 返回 滑动窗口…
阅读更多...
夜莺浏览日志、filebeat采集日志（四）

夜莺浏览日志、filebeat采集日志（四）

文章目录 一、elasticsearch二、filebeat三、日志分析 一、elasticsearch docker启动 docker run -d -p 9200:9200 -p 9300:9300 --restartalways -e ES_JAVA_OPTS"-Xms512m -Xmx512m" \ -e discovery.typesingle-node -e xpack.security.enabledtrue -e ELASTIC_P…
阅读更多...
plantegg-10+倍性能提升全过程–优酷账号绑定淘宝账号的TPS从500到5400的优化历程

plantegg-10+倍性能提升全过程–优酷账号绑定淘宝账号的TPS从500到5400的优化历程

原文地址:https://plantegg.github.io/2018/01/23/10%E5%80%8D%E6%80%A7%E8%83%BD%E6%8F%90%E5%8D%87%E5%85%A8%E8%BF%87%E7%A8%8B/ 背景说明 2016年的双11在淘宝上买买买的时候&#xff0c;天猫和优酷土豆一起做了联合促销&#xff0c;在天猫双11当天购物满XXX元就赠送优酷会…
阅读更多...
什么是生态智慧公厕@光明源

什么是生态智慧公厕@光明源

生态智慧公厕是一种结合生态环保理念和智能科技的公厕设施。这种公厕旨在提供更加环保、节能、可持续的卫生解决方案&#xff0c;同时通过智能化技术提升管理效率和用户体验。生态智慧公厕通常具有以下特点&#xff1a; 节能环保&#xff1a;生态智慧公厕采用了各种节能环保技…
阅读更多...
npm淘宝镜像源更新

npm淘宝镜像源更新

目录 前情提要&#xff1a; 背景&#xff1a; 镜像源更新&#xff1a; 清楚缓存&#xff1a; 直接切换镜像源&#xff1a; 补充&#xff1a; 错误解释&#xff1a; 解决方法&#xff1a; 前情提要&#xff1a; 2024 /1 /22 &#xff0c;registry.npm.taobao.org淘宝镜像源的SSL…
阅读更多...
【面试】Elasticsearch 在部署时，对 Linux 的设置有哪些优化方法？

【面试】Elasticsearch 在部署时，对 Linux 的设置有哪些优化方法？

Elasticsearch 在部署时&#xff0c;对 Linux 的设置有哪些优化方法&#xff1f; Elasticsearch是一个分布式搜索和分析引擎&#xff0c;它在Linux环境下的性能和稳定性可以通过一些优化方法进行提升。以下是一些针对Linux环境下Elasticsearch部署的优化方法&#xff1a; 1. 内…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023