当前位置：首页 > news >正文

Vue技术教程（2023-1-15）

news 来源：原创 2023/3/21 0:07:27

第一章：Vue概述

1.hello World

Vue：易学易用 性能出色 适用场景丰富的web前端框架vue是一款构建用户界面的JavaScript框架 它基于标准的html css JavaScript构建  并提供了一种声明式 组件化的编程模型 帮助你高效的开发 用户界面 无论是简单还是复杂的页面 vue都可以胜任vue特点：组件化开发  声明式的编程（命令行的方式）2.hello  Vue的书写方式一：在网页中直接使用<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--1.引入Vue--><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body><div id="root"></div><script><!--2.编写vue代码-->//在写vue的时候一切皆组件
/*1.：创建一个根组件  在vue3中组件就是一个普通的js对象
* *///1.创建一个vue组件
const Root={template:"<h1>你好  Vue！</h1>"//这个就是模板样式在  希望在页面中呈现的样子};//在使用过程中组件用来创建组件实例 组件是组件实例的模板  组件->组件生成组件实例->虚拟dom->dom(在页面中呈现)//2.创建一个App实例（应用实例）const app=Vue.createApp(Root)//3.将实例在页面中挂载
app.mount("#root")</script>
</body>
</html>

2.data函数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--1.引入Vue--><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body><div id="root"></div><script><!--2.编写vue代码-->//在写vue的时候一切皆组件/*1.：创建一个根组件  在vue3中组件就是一个普通的js对象* *///1.创建一个vue组件const Root={data(){//在这里书写一个data  注意：data是一个函数 需要一个对象作为返回值return{message:"Vue 计算机科学与技术学院",  //data方法返回的对象 其中的属性会自动添加到组件的实例中button:"我是计算机科学与技术学院按钮"}},//在模板中科院直接访问组件实例中的属性//在模板中使用插值语法  {{属性名}} 来访问组件实例中属性template:"<h1>你好  Vue！{{message}} , {{button}}</h1>"//这个就是模板样式在  希望在页面中呈现的样子};//在使用过程中组件用来创建组件实例 组件是组件实例的模板  组件->组件生成组件实例->虚拟dom->dom(在页面中呈现)//2.创建一个App实例（应用实例）const app=Vue.createApp(Root)//3.将实例在页面中挂载app.mount("#root")
</script>
</body>
</html>

3.按钮练习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--1.引入Vue--><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body><div id="root"></div><script>
<!--组件是用来创建组件实例-->//练习：创建按钮  点击按钮时 显示按钮点击的时间const Root={data(){return{//定义一个变量 记录点击次数//data中的数据湖自动和使用它的视图绑定 数据发生变化视图会自动刷新count:0,message:"Vue 计算机科学与技术学院",}},template:" <button @click='count++'>点我一下</button> --点了{{count}}次"};const app=Vue.createApp(Root)//3.将实例在页面中挂载app.mount("#root")</script>
</body>
</html>

4.模板

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--1.引入Vue--><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body><div id="root"><!--  方式二：如果追定义在网页中 此时模板必须符合html的规范如果我们在组件中定义template 则会优先使用template作为模板 同时根元素中的所有内容都会被替换
如果在组件中没有定义template 则会使用根元素innerHtml作为模板使用
--><button @click='count++'>点我一下</button> --点了{{count}}次
<p>我是{{count}}</p>
</div><script>const Root={data(){return{count:0,message:"Vue 计算机科学与技术学院",}},//template是模板  它决定了组件最终的样子//定义模板的方式有三种 1.在组件中通过template属性去指定  2.直接在网页的根元素中指定// 方式一： template:" <button @click='count++'>点我一下</button> --点了{{count}}次"//方式三：使用render()函数直接渲染};const app=Vue.createApp(Root)//3.将实例在页面中挂载app.mount("#root")</script>
</body>
</html>

6.使用构建工具去书写Vue

1.打开终端 初始化项目 npm init -y2.安装vite依赖：npm add -D vite
2.安装vue依赖 ：npm add vue第一步创建html页面：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Hello Vue 计算机科学与技术学院！</title><script type="module" src="./src/index.js"></script></head>
<body><div id="app"></div>
</body>
</html>


//引入vue  这里引入的vue不支持template属性来设置模板
import {createApp} from "vue/dist/vue.esm-bundler.js";//创建一个根组件
const App={data(){return{message:"计算机科学与技术学院欢迎你！"}},template:"<h1>{{message}}</h1>"}//创建应用挂载组件到页面
createApp(App).mount("#app")1.直接在网页中使用：//引入vue  这里引入的vue不支持template属性来设置模板
import {createApp} from "vue/dist/vue.esm-bundler.js";2.使用vite npm add vite -D
3.代码：//组件：就是一个普通的js对象const App={}//创建应用
const app=createApp(App)//挂载到页面
app.mount("#root")

第二章：组件化编程

1.Vue组件化

html页面代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>计算机科学与技术学院</title><script type="module" src="./src/index.js"></script></head>
<body>
<div id="root"></div>
</body>
</html>

index程序入口代码：
import {createApp} from "vue/dist/vue.esm-bundler.js";
import App from "../../1.helloVue/src/App";
//创建应用并挂载
//mount（）的返回值是根组件的实例
const vm=createApp(App).mount("#root")

子组件App代码：
/*
* 使用组件：
*
*       --1.引入组件
* */
import MyButton from "../../2.helloVue/src/MyButton";//2.在组件中注册子组件
export default
//创建与根组件
{data(){return{msg:"计算机科学与技术学院",count:0}},//2.在这里使用  就在这里注册组件  注册组件使用components注册components:{MyButton:MyButton//属性名：属性值},template:'<h1>{{msg}}</h1>' +'<button @click="count++">点我一下{{count}}</button>' +'<h1>{{count}}</h1>' +'<h2>{{count}}</h2>' +'<MyButton></MyButton>' +'<MyButton></MyButton>'
//组件与组件之间是互不影响的
}

子组件MyButton代码：
/*封装一个自定义的按钮组件
*
* */export default {data(){return{count:0}},template:'<button @click="count++">{{count}}</button>'
}

2.单文件组件

当前template是用字符串的形式去编写模板  1.这些字符串会在项目运行时 在浏览器中会被编译为js的函数(性能不太好)2.在字符串中编写代码 体验感差为了我解决这种问题  vue为我们提供了一种单文件组件  单文件组件的格式就是vue  后缀名为vue在Vscode中要装 Vue language Features插件vue文件用来编写单文件组件 vue本省不能被浏览器识别  所以要用构建工具打包才可以使用同时vue文件在打包时 构建工具会直接将template替换为函数 无需再浏览器中中去编译 要想使用 需要安装插件：终端输入：npm add -D @vitejs/plugin-vue开始配置 vite.config.js文件vue.vue组件代码：<template><!--  在这里书写模板--><h1>{{msg}}</h1></template><script>/*在script标签里面可以编写组件的代码
*
* */
export default {data(){return{msg:"计算机科学与技术欢迎你！"}}
}
</script><style scoped></style>App.js代码：
/*
* 使用组件：
*
*       --1.引入组件
* */
import MyButton from "../../2.helloVue/src/MyButton";
import vue from "../../2.helloVue/src/vue";//2.在组件中注册子组件
export default
//创建与根组件
{data(){return{msg:"计算机科学与技术学院",count:0}},//2.在这里使用  就在这里注册组件  注册组件使用components注册components:{MyButton:MyButton,//属性名：属性值Vue:vue},template:'<h1>{{msg}}</h1>' +'<button @click="count++">点我一下{{count}}</button>' +'<h1>{{count}}</h1>' +'<h2>{{count}}</h2>' +'<MyButton></MyButton>' +'<MyButton></MyButton>' +'<Vue></Vue>'
//组件与组件之间是互不影响的
}index.js组件代码：import {createApp} from "vue/dist/vue.esm-bundler.js";
// import App from "../../1.helloVue/src/App";
import vue from "./vue";
//创建应用并挂载
//mount（）的返回值是根组件的实例
const vm=createApp(App).mount("#root")vite.config.js配置文件：import vue from "@vitejs/plugin-vue";export default {plugin:[vue()]}

3.自动创建项目


每次手动创建项目会很麻烦：因此我们使用自动工具来创建：命令：npm create vuenpm init vue@latest(推荐)
选择完成后  自动创建完成vue项目

4.代码分析

目录分析：--public  静态资源目录  一般是图标 <script>export default {//组件就是一个普通的js对象//组件：一个组件可以创建多个组件实例data(){//data是一个函数//在data中this this就是当前的组件实例化//如果使用箭头函数就无法通过this来访问组件实例//data会返回一个对象作为返回值 vue会对该对象进行代理 从而将其转换为响应式数据//响应式数据会直接通过组件实例化return{msg:"计算机科学与技术学院"}}
}</script><template><h1>{{msg}}</h1></template>

import App from "./App";
import {createApp} from 'vue'createApp(App).mount('#app')/*
* App.vue是根组件  createApp(App) 将组件关联到应用上
*           --会返回一个应用的实例化
*
*           app.mount("#app")将应用挂载到页面中 会返回一个根组件的实例  组件的实例的通常命名为vm
*
* */

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Vite App</title></head><body><div id="app"></div><script type="module" src="/2.Vue教程/05.使用vite/3.Vuetest/src/main.js"></script></body>
</html>

5.响应式原理


//创建一个对象
const obj={name:"孙悟空",age:19
}/*
* 如果追修改对象的属性 那么就是仅仅修改了属性 没有去选择其他的事情 这种操作只会影响对象自身 不会导致元素的重新渲染
*
*   我们希望在修改一个属性的同时 可以运行一些其他的操作 比如重新触发元素重新渲染
* 要实现这个目的  必须呀对对象进行改造  Vue3中使用的是代理模式来完成对象的改造
*
* *//*console.log("之前的名字：",obj.name)
obj.name="无邪"
console.log(obj.name)
*///来为对象创建一个代理
const handler={//    在里面可以传入一个方法  get方法用来指定读取数据的写 它的返回值就是最终读取到的值get(target,prop,receiver){/*在Vue中data()返回的对象会被vue代理  vue代理后 当我们通过代理去读取属性时 返回值之前 它会先做义工跟踪的操作//track()跟踪谁用了我这个属性* *//*三个参数：target 被代理的对象prop:读取的属性*           receiver;代理对象* */console.log(target,prop,receiver)//指定get后 在通过道理读取对象的属性时 就会调用get方法来获取值return '计算机科学与技术学院'},set(target,prop,value,receiver){//    set会在代理修改对象时 调用console.log(target,prop,value,receiver)}};//用来处理代理的行为//创建代理
const proxy=new Proxy(obj,handler)
console.log(proxy)//修改代理的属性
console.log(proxy.name)
proxy.age=10;
console.log(proxy.age)
//因为proxy是对象的代理 所以它可以读取到对象里面的内容注意：设置代理时 不会对原对象产生影响vm.$data是设计的代理对象 通过vm可以直接访问到$data中的属性
vm.$data.msg等价于vm.msg
可以通过vm.$data多态的向组件中添加响应式数据created(){//会在组件创建完成后调用this.$data.name='计算机'
}

6.data详细介绍

<script>
import MyButton from "./components/MyButton";
export default {data(){//data()返回的对象会被Vue所代理return{//Vue在构建响应式对象时 会同时将对象中的属性也做成响应式属性//深层响应式对象//有些情况下可以通过shallowReactive()来创建一个浅层的响应式属性msg:'计算机科学与技术学院欢迎你！',stu:{name:'吴邪',age:18,gender:"男"}}},//  注册一下MyButtoncomponents:{MyButton}}</script><template><h1>{{msg}}</h1><MyButton></MyButton>
</template>

7.methods介绍


<script >
export default {//data  用来指定实例对象中的响应式属性data(){return{msg:'计算机科学与技术学院'}},//  2.methods:  用来指定实例对象中的方法
//  ----它是一个对象  可以在里面定义多个方法
//  ----这些方法最终将会会被挂载到组件实例上
//  --可以直接通过组件实例来调用这些方法
//  ---所有组件实例上的属性都可以在模板中直接访问
//  methods中的this会被自动绑定为组件实例methods:{test(){alert("计算机科学与技术学院")},hello(){console.log("我是计算机科学与技术学院的hello")},sum(a,b){return a+b}}}</script><template><h1>{{msg}}</h1><h2>{{sum(12,34)}}</h2>
</template>

8.计算属性

<script >
export default {data(){return{msg:'计算机科学与技术学院',stu:{name:'吴邪',gender:'男',age:'18'}}},methods:{//methods中的方法每次组件重新渲染都会调用updateAge(){if (this.stu.age===18){this.stu.age=17}else {this.stu.age=18}console.log("我执行了~~~")}},/** 计算属性：computed 用来指定计算属性**     {*   属性名:getter**      }*   ---计算属性：只在其依赖的数据变化发送变化时 才会重新执行  会对数据进行缓存** */computed:{info:function (){return '计算机科学与技术学院'}}}
</script><template><h1>{{msg}}</h1><h2>{{stu.name}}--{{stu.age}}--{{stu.gender}}</h2><h3>评语：{{stu.age >=19? "你是一个成年人 !":"你是一个未成年人"}}</h3><button @click="updateAge">减</button><h1>{{msg}}</h1><h4>{{info}}</h4>
</template>

9.安装Vue调试工具

在edg浏览器里面输入：https://microsoftedge.microsoft.com/addons/detail/vuejs-devtools/olofadcdnkkjdfgjcmjaadnlehnnihnl 安装扩展 Vue.js调试程序

10.组合式API简介

<script >//先导入reactive
import {reactive} from 'vue'
export default {setup(){//  setup是一个钩子函数  可以通过这个钩子函数向外暴露组件的配置   在这里可以写任何类型的方法//  setup中可以通过返回值指定那些内容可以暴露给外部//  定义一个变量let msg="静态天气真不错！"let count=0//可以通过reactive()来创建一个响应式的对象const stu=reactive({name:"吴邪",age:18,gender:'男'})function f() {stu.age=stu.age++}//在组合式api中声明的变量 就是一个普通的变量 不是 响应式属性//    修改这些属性时 不会在视图中产生效果return{//暴露后的内容就可以在模板里面使用msg,count,stu,f}}}</script><template><h1>演示组合式api</h1>
<h2>{{msg}}</h2><h2>{{stu.age}}</h2><button @click="f">点我</button><!--  在这里看看可以显示出响应数据-->
<h1>{{stu.name+stu.age +stu.gender}}</h1>
</template>

11.setup

<!--加了setup后就告诉了浏览器 我们使用纯组合式api  就不需要之前的那种麻烦了-->
<script setup>
//条例 需要响应式数据也是
import {reactive} from 'vue'//      在这里书写的 就不需要之前的那种return返回 才可以暴露出去 而是默认就暴露出去了
const msg="计算机科学与技术学院"
const count=0
const stu=reactive({name:'孙悟空'
})</script><template><h1>组合api</h1><h2>{{count}}</h2><h3>{{stu.name}}</h3></template>

12.响应式代理

<script setup>
import {reactive, ref} from 'vue'
import {$ref} from 'vue/macros'const stu=reactive({name:'吴邪'
})/*
* 响应式 reactive()--返回一个对象的响应式代理
*   返回的是一个深层的响应式对象
*   也可以使用shallowReactive()创建一个浅层的响应式对象
*     缺点：只能返回对象的响应式代理  不能处理原始值 因此Vue提供了ref
*
*     ref() --修改了一个任意值 并返回响应式代理
*   ---访问ref对象时  必须通过  对象.value来访问其中的值
*
*
*     在模板中ref对象会被自动解包
*   vue给我们提供了一个语法糖 使得ref对象在script标签中可以自动解包
* *///自动解包要$符号
let x=$ref(0)//$是实验性的  需要在vite创建中做一些配置      reactivityTransform:truelet count=ref(0)//生成一个0的响应式
count=10//改不量只会影响到不了自己 在js中 无法实现对一个变量的代理
//ref()原理：在生成响应式代理时 它是将值包装为了一个对象</script><template>
<h1>计算机科学与技术学院</h1></template>

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue({//在这里设置为TRUE就可以自动转换解包reactivityTransform:true})],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}
})

13.ref对象解包

<script setup>import {ref, reactive, conputed, computed} from "vue"
//因为是组合式API 使用就追定义
const msg="Hello  计算机科学与技术学院"//第二种方式：使用ref来定义
const msgTest=("Hello  计算机科学与技术学院  这个是一个响应式变量")const changeMsgHander=()=>{//修改ref对象时 必须通过valuemsg.value="Hello  计算机科学与技术学院"
}//{value:obj}
//obj.value.name
const obj=ref({name:"吴邪",age:18
})//不加ref或者reactive就不是响应式的数据const obj2=(//obj.name.value{name:ref("解雨臣"),//{value:"解雨臣"}age:ref(18)//{value:18}}
)//computed用来生成计算属性
const newMsg=computed(()=>{return msg.value+"计算机科学与技术学院你好！"})
</script><template><!--  ref对象在模板中可以自动解包  要求ref对象必须是顶层对象--><h1>{{msg}}</h1>
<h2>{{msgTest}}</h2><h3>{{obj.name}}</h3>
<!--  这里的name表示顶层的响应式对象  使用不能自动解包  必须得加value--><h4>{{obj2.name.value}}</h4><hr><h2>{{obj.age}}</h2><h2>{{obj2.age}}</h2><hr><h1>{{newMsg}}</h1><button @click="msgTest='计算机科学与技术学院  响应式变量'">点我一下</button></template>

14.模板的语法

<script setup>const msg="计算机科学与技术学院"//例如：插入一段html代码const html='<h1>计算机科学与技术学院</h1>'
</script><template><!-- 在模板中可以直接访问到  组件中声明的变量--还可以访问js中的函数  除了组件中的变量外  vue也为我们提供了一些全局对象可以访问--除此之外 也可以通过app对象来向vue中添加一些全局变量--在使用插值语法时  {{}} 只能使用表达式表达式  就是有返回值的语句--插值实际上就是在修改元素的textContent  如果内容中含有标签 不会作为标签生效{{}}指令：--指令模板为标签设置的一些特殊属性 它可以用来设置标签如何显示内容--指令使用v-开头1.v-text 将表达式的值作为元素的textContent插入 作用同{{}}插值语法使用指令时 就不需要通过插值语法来指定表达式2.v-html  将表达式的值作为元素的innerHtml插入 有xss攻击的风险-->
<h1>{{msg}}</h1><!--  例如：访问随机数--><h2>{{Math.random()}}</h2><hr><h2>{{new Date()}}</h2><hr><!--  插值语法只能使用表达式-->
<h1>{{1}}</h1><hr><h1>{{html}}</h1>
<!--  使用指令--><div v-text="html"></div><hr><div v-html="html"></div></template>

15.v-bbind指令

<script setup>import {ref} from "vue"
const imgPath=ref("/images/Default.jpg")const changeImg=()=>{imgPath.value="/images/favicon.ico"}/*
* 当我们需要为标签多态的数值属性时  需要使用v-bind指令
*   v-bind指令可以简写为 :
*
*     当我们为一个布尔值设置属性时  如果我们设置为true 则元素上有该属性  如果值为FALSE则元素没有该属性  
* 
*   特殊情况：""  空值 在这里会被当成空值
*
* */const attrs={id:"box1",class:"hello"
}</script><template><!--  public是静态资源  使用的时候 会原封不动的打包过来-->
<!--  <img src="/images/Default.jpg" alt="壁纸">--><button @click="changeImg">切换图片</button><img v-bind:src="imgPath" alt="壁纸"><hr><img :src="imgPath" alt="壁纸"><hr>
<!--  设置标签属性--><div :="attrs"></div></template>

16.style-scoped

<script setup></script><template>
<h1>计算机科学与技术学院！</h1><div class="box1"> </div>
<div class="app"></div>
<!-- 直接书写组件--><MyBoxVue>    </MyBoxVue>
</template><!--
样式设置：--可以直接通过style标签来编写样式如果追通过style标签来编写样式 此时编写的样式是全局样式 会影响到所有的组件
--><!--要想避免组件之间的影响 可以为style标签添加一个scoped属性  这样样式会作为局部样式 只对当前组件生效当我们在组件中使用scoped样式时 vue会自动为组件中的所有元素生成一个随机的属性
形如：data-v-7a7a37b1 生成后所有的下载器都会在最后添加一个[data-v-7a7a37b1 ]注意：随机生成的属性 除了会添加到当前组件内的所有元素上  也会添加到当前组件引入引入的其他组件的根元素上  这样设计是为了
可以通过父组件设置一些样式-->
<style scoped>h1{background-color: aqua;
}.box1{width: 200px;height: 200px;background-color: aquamarine;
}</style><!--注意一个组件可以由多个style--><style>/*全局选择器*/
:global(div){border: 1px red solid;
}</style>

17.样式

<script setup></script><template><h1>计算机科学与技术学院欢迎你！</h1><hr><div class="app"><h1>计算机科学与技术学院 欢迎你！</h1><div :class="$style.box1">App中的box1</div></div><hr><div :class="classes.h1">
<!--    这里就可以调用自定义的样式--><h1>计算机科学与技术学院</h1></div></template><!--css模块---自动的对模块中的类名进行哈希化处理  来确保类名的唯一性---在模板中可以通过$style.类名  使用--也可以通过module的属性值来指定变量名-->
<style module>
.box1{background-color: #bfa;
}
</style><style module="classes">
.h1{background-color: orange;}</style><!--从习惯上 使用scoped为主--><style scoped></style>

18.类和内联样式

<script setup>const arr=["box1","box2","box3"]
const arr2=[{box1:true},{box2:false},{box3:false},{box4:true}]//设置一个动态态的内联样式
const style={color:"red",backgroundColor:"#bfa"}
</script><template><h1>计算机科学与技术学院</h1><div :class="arr2" :style="style">计算机科学与技术学院</div>
</template><style scoped>.header
{background-color: orange;}
</style>

练习

<script setup>
import {ref} from "vue"
//创建一个变量 来记录选项卡的状态
const current=ref(0)//0表示球员  1表示球队</script><template><h1>计算机科学与技术学院</h1><hr><!--  1.创建一个容器  tab-wrapper--><div class="tab-wrapper">
<!--    2.选项卡的一个头部--><header class="tab-head">
<!--      在这个区域里面有两个按钮-->
<!--      绑定一个事件  效果就是点击的时候 要变色--><div  @click="current=0" class="tab-button " :class="{active:current===0}">热门球员</div><!--      给这个也绑定一个事件  点击也要变色--><div  @click="current=1" class="tab-button" :class="{active:current===1}">热门球队</div></header><!--    3.选项卡的主体--><div class="main" style="color: #f8f8f8;font-size: 20px"><!--current===0显示球员current===1显示球队使用v-show指令 用来设置一个内容是否显示v-show 设置一个内容是否显示时v-show通过display来设置一个元素是否显示的--><div v-show="current===0"><!--        球员--><div class="tab-list"><div class="tab-item"><!--            用来放置图片--><div class="photo"><img src=" /images/meix.png" alt="法国"><span>1</span></div><!--            用来放置描述--><div class="desc"><span class="name">梅西</span><div class="hot-bar"><div class="inner">33760热度</div></div></div></div></div></div><div v-show="current===1">
<!--        球队--><div class="tab-list"><div class="tab-item"><!--            用来放置图片--><div class="photo"><img src="/images/fanlai.png" alt="梅西"><span>1</span></div><!--            用来放置描述--><div class="desc"><span class="name">法国</span><div class="hot-bar"><div class="inner">433760热度</div></div></div></div></div></div></div></div></template><style scoped>
.tab-wrapper{box-sizing: border-box;width: 800px;padding: 20px;background-color: rgb(45,83,211);}
.tab-head{/*  设置一个弹性盒*/display: flex;border-radius: 20px;overflow: hidden;
}/*给按钮也设置一个*/.tab-button{background-color: #fff;font-size: 30px;
flex: auto;padding: 10px 0;text-align: center;cursor: pointer;/*加一点过度效果*/transition: 1s;}.tab-button:not(.active):hover{color: rgb(187,3,52);
}
.active{background-color: rgb(187,3,5);color: #ffffff;
}
.tab-list{margin: 20px;
}
.tab-item{
/*  开启一个弹性盒子*/
display: flex;margin-bottom: 20px;
}/*容器*/
.photo{
width: 150px;
background-color: #f8f8f8;border-radius: 20px;overflow: hidden;position: relative;}/*图片*/
.photo img{width: 100%;/*设置图片的对其*/vertical-align: baseline;}/*排名*/
.photo span{position: absolute;width: 50px;height: 50px;background-color: rgb(245,102,1);top: 0;left: 0;font-size: 20px;font-weight: bold;color: #f8f8f8;
display: flex;
justify-content: center;align-items: center;border-bottom-right-radius:10px ;border-top-left-radius: 10px;
}.desc{/*设置一下文字描述*/font-size: 30px;
color: #f8f8f8;display: flex;flex-flow: column;justify-content: space-evenly;/*background-color: #bfa;*/
/*  设置一下弹性盒*/
flex: auto;margin-left: 30px;
}.hot-bar{
background-color: rgb(3,37,103);border-radius: 20px;text-indent: 0.5em
;overflow:hidden;
}.inner{background-color: red;border-radius: 20px;width: 50%;
/*  设置一下渐变*/background-image: linear-gradient(90deg,rgb(187,3,52) 50%,rgb(66,2,12));
}
</style>

19.props介绍

<template><div class="tab-item"><!--            用来放置图片--><div class="photo"><img :src="item.img" :alt="item.name"><span>{{item.rate}}</span></div><!--            用来放置描述--><div class="desc"><span class="name">法国</span><div class="hot-bar"><div class="inner">433760热度</div></div></div></div></template><script setup>/*
*
* 子组件中的数据通常不会在子组件中直接定义  这样湖导致数据和视图发送耦合 子组件中的数据通常会在创建组件实例时确定
* 子组件中的数据通常会在创建组件实例时确定 父组件可以通过props来将数据传递给子组件
*
*
*
* ---使用props
*     --先在子组件中定义props
*
*
* */import {reactive} from 'vue'const props= defineProps(["item"])
const item=reactive({name:"梅西",img:"/images/fanlai.png",rate:1,hot:433760
})</script><style scoped>.tab-item{/*  开启一个弹性盒子*/display: flex;margin-bottom: 20px;
}
.photo{width: 150px;background-color: #f8f8f8;border-radius: 20px;overflow: hidden;position: relative;}.photo img{width: 100%;/*设置图片的对其*/vertical-align: baseline;}
.photo span{position: absolute;width: 50px;height: 50px;background-color: rgb(245,102,1);top: 0;left: 0;font-size: 20px;font-weight: bold;color: #f8f8f8;display: flex;justify-content: center;align-items: center;border-bottom-right-radius:10px ;border-top-left-radius: 10px;
}.desc{/*设置一下文字描述*/font-size: 30px;color: #f8f8f8;display: flex;flex-flow: column;justify-content: space-evenly;/*background-color: #bfa;*//*  设置一下弹性盒*/flex: auto;margin-left: 30px;
}.hot-bar{background-color: rgb(3,37,103);border-radius: 20px;text-indent: 0.5em
;overflow:hidden;
}.inner{background-color: red;border-radius: 20px;width: 50%;/*  设置一下渐变*/background-image: linear-gradient(90deg,rgb(187,3,52) 50%,rgb(66,2,12));
}</style>

20.props-1

<template><h2>我是子组件</h2><div>我是子组件</div><h2></h2>
</template><script>
/*
* 父组件 可以通过props来向子组件传递数据
*   ---注意  父组件 传递给子组件的props是只读的 不可以修改
*         即使可以修改 我们也不要在子组件中去修改父组件的数据
*         如果非得要改 具体方法在讲(通过自定义事件去改)
*
*   属性名：定义属性名时  要遵循驼峰命名法
*
* *///定义props  里面写入属性
const props= defineProps(["1","2","obj","maxLength"])</script><style scoped>
div{color: red;}
</style>

21.props的配置

子组件：
<template><div><hr><h1>{{props.MaxLength}}</h1><h2>我是子组件 MyBox {{props.obj.count}}</h2><button @click="props.obj.count++">子组件的按钮</button>
</div></template><script>//1.定义props的方式二
const props=defineProps({//定义参数类型count:Number,obj:Object,MaxLengt:{type:String,//type也是指定数据类型的required:true,//帮助去检查这个属性default:"哈哈哈",validator(value) {return value="计算机科学与技术学院"}}})console.log(props)</script><style scoped></style>

父组件：
<script setup>import MyBox from './components/MyBox.vue'
import {ref} from 'vue'const count=ref(0)
const obj=ref({count:0})</script><template><h1>计算机科学与技术学院</h1><MyBox :count="count" :obj="obj"  max-length="20"></MyBox><button @click="obj.count++">点我一下</button></template>

22.v-if指令

<script setup>import {ref}  from 'vue'const count=ref(0)
const obj=ref({count:0
})const isShow=ref(true)</script><template><h1>计算机科学与技术学院</h1>
<button @click="isShow=!isShow">切换</button><hr><!--  v-show 可以根据值来决定值是否显示
通过display来切换元素的显示状态v-if: 可以根据表达式的值来确定是否有元素  会直接将元素删除区别：v-show通过css来切换组件的显示与否 切换不会涉及到组件的重新渲染  切换的性能比较高 但是初始化时会对所有的组件进行初始化  所有这个对初始化的性能比较差v-if  通过删除元素的方式来切换元素的显示  切换时反复的渲染组件 切换性能比较差v-if只会初始化会用到的组件  所以他的初始化性能比较好v-if可以和v-else-if  和v-else结合使用v-if可以配合template使用
--><div v-show="isShow"><h2>我不会显示</h2>我不会显示呀！</div><hr><div v-if="isShow"><h2>你猜猜我回显示吗！</h2></div><div v-else><h1>我是v-else中的内容</h1></div></template><style scoped></style>

23.动态组件(第33节)

<script setup>import A from "./components/A.vue"
import B from "./components/B.vue"import {ref}  from "vue"const isShow=ref(true)
</script><template><component is="div">
<!--    component--动态组件---component最终以声明标签呈现是由is属性决定is="X"   X可以是  div  h1  ...等等-->计算机科学与技术学院 div</component><component :is="A"></component><h1>计算机科学与技术学院欢迎你！</h1><hr><button @click="isShow=!isShow">切换</button><component :is="isShow? A:B"></component><B></B>
</template>

24.网页渲染

浏览器在渲染页面的时候：---1.加载页面的html和css(源码)---2.html转换为dom css会转换为cssOM---3.将DOM和CSSOM构建成一颗渲染树---4.对渲染树进行reflow (回流 重载)  就是计算元素的位置---5.对网页进行一个绘制 repaint(重绘)渲染树：Render Tree--从根元素楷书检查那些元素可见  以及他们的样式--忽略那些不可见的元素(display:none) 重排 回流计算渲染树中元素的大小和位置当页面中的元素大小或位置发生变化时 便会触发元素的重排注意：每次修改这类样式都会触发一次重排 所以n次修改多个样式就会重排n次  而重排是非常消耗系统资源的操作所以重排次数过多后 会导致网页的显示性能变差所以在开发时 我们应该尽量减少重排的次数可以通过class来简介的影响样式 来减少重排的次数
重绘：绘制页面当页面发生变化时  浏览器就会对页面进行重新的绘制在现代的前端框架中 这些东西都已经被框架优化过了  所以在使用react和Vue这些开开发时  就不需要考虑这些问题  唯独需要注意的是 尽量减少在框架中追操作dom

38节课

查看全文中文繁体

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

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

[超详细]MySQL本地版本升级（从5.5.20到8.0.21）

写在前面升级本地mysql，当前5.5.20，升级前先备份本地的数据库文件以防数据丢失一、卸载本地的旧版本 1. 停止MySQL服务 winR 打开运行，输入 services.msc 点击 "确定" 调出系统服务。 2. 卸载MySQL相关组件打开控制面板 --…...

编程日记 2023/3/21 0:07:24

【毕业设计】基于python 爬虫 flask的疫情数据可视化系统

1 前言 🚩 基于python 爬虫 flask的疫情数据可视化 🥇学长这里给一个题目综合评分(每项满分5分) 难度系数：2分工作量：3分创新点：4分 🧿 选题指导, 项目分享： https://gitee.com/dancheng-s…...

编程日记 2023/3/21 0:07:24

01背包问题（动态规划）python实现

在01背包问题中，在选择是否要把一个物品加到背包中，必须把该物品加进去的子问题的解与不取该物品的子问题的解进行比较，这种方式形成的问题导致了许多重叠子问题，使用动态规划来解决。n5是物品的数量，c10是书包能承受的…...

编程日记 2023/3/21 0:07:21

Ubuntu安装Docker启动与停止

Ubuntu安装Docker 第一种方法从Ubuntu的仓库直接下载安装： 安装比较简单，这种安装的Docker不是最新版本，不过对于学习够用了，依次执行下面命令进行安装。 $ sudo apt install docker.io $ sudo systemctl start docker $ sudo …...

编程日记 2023/3/21 0:07:18

psdk 对zed2 推流之 ffmpeg h264编解码

ffmpeg h264编解码背景数据流程思路理解排坑背景需求:需要通过大疆的PSDK发送视频流到大疆M300的遥控器上显示。数据流程编码:ROS::Image(BGR)->cv::mat（BGR）->YUV420->h264 解码:h264->YUV420->BGR 思路理解初识PSDK开发通过p…...

编程日记 2023/3/21 0:07:17

Docker安装完启动不了的几种情况的解决办法 1.安装完启动不了报错：Job for docker.service failed because the control process exited with error code. See “systemctl status docker.service” and “journalctl -xe” for details. 网上的两种解决办法 1…...

编程日记 2023/3/21 0:07:15

0-1背包问题python实现

0-1背包问题 ACWings题目链接：https://www.acwing.com/problem/content/2/ 不会的小伙伴可以看一下视频：https://www.bilibili.com/video/BV15B4y1P7X7/ Python实现 # N件物品，一个容量为V的背包 N,V map(int,input().split()) weight […...

编程日记 2023/3/21 0:07:12

基础题冲刺

**java三大特性；** **线程和进程的区别；** **ajax的优缺点；** **read方法为什么返回int类型；** **hashmap和hashtable的区别** **什么是orm；** **int和integer的区别；** **filter的作用；…...

编程日记 2023/3/21 0:07:10

COCO API安装

git clone https://github.com/pdollar/coco.git cd coco/PythonAPI python3 setup.py build_ext --inplace python3 setup.py build_ext install 进入python3命令行就可以直接导入了，执行import pycocotools和from pycocotools.coco import COCO命令不报错说明…...

编程日记 2023/3/21 0:07:06

使用docker安装并启动kudu

目录背景下载docker-kudu镜像简单方式启动比较冗长的方式背景之前尝试过用docker中安装centos再编译安装kudu，虽然安装成功了，但启动调试时出现了很多错误，一时无法解决该问题，但为了快速上手，最后还是使用docker中直…...

编程日记 2023/3/21 0:07:03

计算机系统在ct中的功能及作用,计算机在CT室工作中的应用及管理

摘要：随着计算机工业的发展及其在医学领域上的广泛应用,微机已进入了医院的各个领域,各科对微机的应用越来越普遍,做为拥有大型医疗设备的CT室,实行微机管理势在必行.现将本科室使用微机中积累的经验和情况简介如下.1 用于患者一般资料的登记以往的人工书写各种登记…...

编程日记 2023/3/21 0:07:00

HCIP学习日志（1）静态路由的配置

HCIP学习日志（1）静态路由的配置虽然标题部分是HCIP的学习日志，但是第一天主要还是HCIA的内容 Q1：在windows系统上如何查看端口号和进程ID？ A1：在win10中，使用netstat -ano命令查看端口号同…...

编程日记 2023/3/21 0:06:56

EMQX——docker安装及简单使用

EMQX——docker安装及简单使用因为课设要用到MQTT服务器，索性自己搭一个吧，都说EMQX挺好用的。后期会介绍课程设计中如何使用EMQX的。 EMQX是什么先介绍一下EMQX是什么，可以简单理解为一个MQTT的服务器。更重要的是看EMQ白皮书的内容摘…...

编程日记 2023/3/21 0:06:54

Docker 上安装、启动 MySQL （图解）

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。 1. 在docker仓库中搜索mysql的镜像： docker search mysql 下载镜像： docker pull mysql 2. 查看本地镜…...

编程日记 2023/3/21 0:06:46

蓝桥杯省赛习题练习(二)

题目来源：2020年真题题集（B组） 注：代码都是自己写的，不是参考答案！ 目录1. 门牌制作运行结果2. 既约分数运行结果3. 蛇形填数运行结果4. 跑步锻炼5. 7段码6. 成绩统计运行结果7. 回文日期1. 门牌制作题目描…...

编程日记 2023/3/21 0:06:44

学生看书用白炽灯和led灯哪个好？学生led护眼灯排行榜

我们都知道学生的晶状体是比较敏感的，不得不承认一个实际问题，LED灯已经普遍到日常生活中，不管是教室、企业、书房，使用LED灯居多，主要是因为它的电流稳定、光线柔和、光效效率高，所以LED灯的灯光没有紫外线…...

编程日记 2023/3/21 0:06:41

U盘重装win10系统，亲测可用

1、博主在2021/06/21以U盘重装了win10系统，找了很多方法，以下是我的最终成功方案。目前为止方案可行，这里记录一下。参考博客 1、制作优盘启动项： 快速制作U盘启动盘并且重装系统 2、开始重装系统： 安装WIN10 64位原…...

编程日记 2023/3/21 0:06:36

面试问题汇总+解答（含Java、计算机系统、大数据和Linux）

面试问题汇总JAVA静态方法和非静态方法的区别反射动态调用单例模式stringbuilder和stringbuffer的区别线程池hashmap编译型语言和解释型语言的区别动态语言和静态语言计算机系统垃圾回收进程和线程的区别并行和并发的区别死锁乐观锁和悲观锁TCP的三次握手与四次挥手大数据事务的…...

编程日记 2023/3/21 0:06:33

Docker安装Oracle(简单,好用)

Docker安装OracleDocker安装Oracle(以Oracle_11g为例)Docker安装Oracle(以Oracle_11g为例) 拉取oracle_11g镜像: docker pull registry.cn-hangzhou.aliyuncs.com/helowin/oracle_11g 运行容器 docker run -d -p 1521:1521 --name oracle11g registry.cn-hangzhou.aliyuncs.co…...

编程日记 2023/3/21 0:06:30

COCO数据集格式解析

COCO数据集是我们经常使用的一个数据集，并且 COCO数据集格式也很受大家欢迎，但不同于 VOC数据格式，COCO是将所有的标注数据存放在一个json文件中，使得查看的时候云里雾里，最近也在用COCO数据集做实例分割，顺…...

编程日记 2023/3/21 0:06:27

WebGIS-分辨率与比例尺

缩放级别（瓦片大小256*256）地面分辨率(米/像素)地图比例尺(96dpi)屏幕1cm实际距离(96dpi)239,135.761 : 147,914,677.731479KM319,567.881 : 73,957,338.86740KM49,783.941 : 36,978,669.43370KM54,891.971 : 18,489,334.72185KM62,445.981 : 9,244,667.…...

编程日记 2023/3/21 0:06:24

微信分享debug为true,但自定义分享失败的解决

微信版本：8.0.16 jssdk：1.6.0 debug提示OK，但是分享出来的是当前页面链接（下面有解释） 现在微信想自定义分享需要符合以下场景： 1. 从公众号菜单进入的H5页面 2. 扫码进入的H5页面 3. 从别人分享的自定…...

编程日记 2023/3/21 0:06:24

java真实面试_深圳百纳九州_java的基本数据类型有几种，并且写出全部的数据类型、写出常用的Linux命令、final、finalize和finnally的不同之处、用java手写一个单例类

系列文章目录文章目录系列文章目录一、java的基本数据类型有几种，并且写出全部的数据类型二、写出常用的Linux命令三、final、finalize和finnally的不同之处四、创建线程有哪几种方式？五、权限怎么设计，几个表可以完成六、[1,a,3,5,b,9,c] …...

编程日记 2023/3/21 0:06:20

你回答不上来的33个Java问答

提示：问答均来自课本《java基础入门》第二版文章目录1.简述JAVA 特点2.简述JRE与JDK的区别3.简述JAVA 运行机制4.列举java的8中基本数据类型，并说明每种类型所占用的空间大小5.简述&&与&的区别6.简述break和continue的区别和作用7.简述构造…...

编程日记 2023/3/21 0:06:20

移动开发 | BAT程序员们常用的开发神器

工欲善其事必先利其器，一个优秀的程序员除了代码写得好，善于利用各种开发工具同样可以事半功倍。以 BAT 为代表的各大厂程序员们在平时的工作中都用什么开发工具呢？InfoQ 编辑部盘点了大厂内部常用的开发工具，以供读者参考。本文涉…...

编程日记 2023/3/21 0:06:17

WinCE嵌入式开发程序入门

WinCE嵌入式开发程序入门2008-10-30 来源：网络MicrosoftWindows CE是紧凑的、高效的和可升级的操作系统，它被广泛的应用在各种嵌入式式的产品中，从手持电脑到专门的工业控制器和消费用电子产品中。Windows CE已经通过了其自身的能力证明&…...

编程日记 2023/3/21 0:06:15

智慧农业灌溉系统-数字农业-农业物联网机井灌溉节水新模式

平升电子智慧农业灌溉系统/农业物联网机井灌溉系统，可实现井电双控（以电控水）、以电折水、以阀控水等各种形式的地下取水井用水计量监测控制需求，助推农业水价改革实施、高效节水灌溉和地下水超采综合治理，促进节水型社…...

编程日记 2023/3/21 0:06:13

docker安装启动nginx详细步骤

1.随便启动一个nginx实例，只是为了复制出配置如果没有对应的nginx版本，会自动去docker仓库下载 docker run -p 80:80 --name nginx -d nginx:1.10 2.将容器内的配置文件拷贝到当前文件我们将配置文件放到 /mydata/nginx目录下 cd /mydata/ mkdir …...

编程日记 2023/3/21 0:06:12

启动nginx报错 getpwnam(“nginx“) failed

源码安装nginx启动失败，日志显示没有nginx用户，创建即可...

编程日记 2023/3/21 0:06:09

Java SE面试题(20个)分析

Java SE面试题一、自增变量代码为： 1 public void main(String args[]){ 2 int i 1; 3 i i; 4 int j i; 5 int k i i * i; 6 System.out.println("i " i); 7 System.out.println("j " j); 8 System.o…...

编程日记 2023/3/21 0:06:09

丁鹿学堂：前端面试手写系列之promise（一）

从零开始手写promise（一） 上次总结了promise A 规范，其实js中的promise只是实现了这个规范。就像js这个语言实现了es的规范一个道理。带着大家一起手写promise，让我们可以更透彻的理解promise。今天分享第一步，实现…...

编程日记 2023/3/21 0:06:08

aop注解配置切点 spring_如何优雅地在 Spring Boot 中使用自定义注解，AOP 切面统一打印出入参日志...

欢迎关注个人微信公众号: 小哈学Java, 文末分享阿里 P8 资深架构师吐血总结的《Java 核心知识整理&面试.pdf》资源链接！！其实，小哈在之前就出过一篇关于如何使用 AOP 切面统一打印请求日志的文章，那为什么还要再出一篇呢&…...

编程日记 2023/3/21 0:06:03

嵌入式Linux项目实践——数码相框1

文章目录1 框架2 显示文字2.1 文字编码方式2.2 英文字母显示2.2.1 概述2.2.2 程序2.3 freetype理论2.3.1 介绍2.3.2 在PC上运行2.3.3 在LCD上运行1 框架 （1）需求分析 1）上电，LCD显示界面 2）根据配置文件&…...

编程日记 2023/3/21 0:06:00

嵌入式面试宝典

嵌入式面试题汇总汇总：空城无道后续会不断完善，需要自取，可转发引用。创建于2022/9/19 初版文章目录嵌入式面试题汇总第一部分：c语言基础考题1.堆和栈的区别申请方式2.链表有几种3.预编译，编译过程最先做的工作是…...

编程日记 2023/3/21 0:05:54

Golang使用验证码

使用的第三方库 go get github.com/dchest/captchapackage mainimport ("fmt""github.com/dchest/captcha""io""log""net/http""text/template" )var formTemplate template.Must(template.New("example&q…...

编程日记 2023/3/21 0:05:53

5.概念（maven，ssm,springMvc,spring,自定义注解，二级缓存，范式，事务，mysql,线程池，map,hashmap,redis,饿汉，懒汉）

maven是啥： 1.Maven是一个项目管理和综合工具。Maven提供了开发人员构建一个完整的生命周期框架。创建—导入jar报–编写配置文件—实现业务功能—测试—发布上线、 2.开发团队可以自动完成项目的基础工具建设，Maven使用标准的目录结构和默认构建生命周…...

编程日记 2023/3/21 0:05:50

Git学习笔记

Git和GitHub的区别 Git 是一个软件（版本控制系统），它允许你通过提交对一个系统（或一组）文件的历史进行注释。这些提交便是在给定时间点对系统做出的差异“快照”。 Github 获取 Git 中的提交历史，并将其存…...

编程日记 2023/3/21 0:05:47

springboot 自定义注解开发

1、简单介绍注解注解（Annotation），也叫元数据。一种代码级别的说明。它是JDK1.5及以后版本引入的一个特性，与类、接口、枚举是在同一个层次。它可以声明在包、类、字段、方法、局部变量、方法参数等的前面，用来对这些…...

编程日记 2023/3/21 0:05:44

选择3D 建模行业前，我不允许你错过这些内容！

大家好。今天给大家普及一下：3D 建模影响了哪些行业，你知道吗？ 当我们谈到 3D 建模对当今行业的影响是，它几乎遍布每个行业。 3D 建模的应用甚为广泛，小维决定向同学们介绍3D 建模影响的十个行业，但在此之前…...

编程日记 2023/3/21 0:05:41

转：电商交易中支付相关知识

from:　http://www.cnblogs.com/zhengyun_ustc/p/paybg.html 评点： 实在是长见识， 全干货！！！谢谢原作者郑昀编纂基于网络资料创建于2015/9/7 最后更新于2015/9/7特别感谢知乎梁川、天顺等知乎网友的精彩答案关键词&…...

编程日记 2023/3/21 0:05:38

如何彻底删除nodejs ？

如何彻底删除nodejs ？ 彻底删除nodejs的方法： 1、从卸载程序中卸载； 2、从任务管理器中杀死所有与节点相关的进程； 3、检查“%PATH%”环境变量；4、在命令提示符下输入where node并删除即可。 1.从卸载程序卸载程序和功…...

编程日记 2023/3/21 0:05:35

动态规划之背包问题 python实现

动态规划之01背包问题题目描述：有编号分别为1,2,3,4,5的五件物品，它们的重量分别是2,2,6,5,4，它们的价值分别是6,3,5,4,6，现在给你个承重为10的背包，如何让背包里装入的物品具有最大的价值总和？ 动态规划…...

编程日记 2023/3/21 0:05:32

python算法练习——贪心算法解决0-1背包问题

目录贪心算法与0-1背包问题贪心算法0-1背包问题解决策略算法实现初始化函数三种策略贪心算法比较函数主函数脚本文件运行结语致谢贪心算法与0-1背包问题用贪心算法解决0-1背包问题是算法界较为经典的一个问题，笔者尝试用一个python脚本，实现对输入的问…...

编程日记 2023/3/21 0:05:29

ELK性能优化实战分析：索引为什么能够提高查询

面试准备不论是校招还是社招都避免不了各种面试、笔试，如何去准备这些东西就显得格外重要。运筹帷幄之后，决胜千里之外！不打毫无准备的仗，我觉得大家可以先从下面几个方面来准备面试： 1. 自我介绍。（介…...

编程日记 2023/3/21 0:05:27

利用自定义注解+Map+反射实现策略模式

场景：TODO 思路： 1.扫描所有有自定义注解的类通过反射put到map中（初始化类似与IOC启动流程） 2.根据不同策略从map中获取对应的处理类处理业务代码实现： 1.自定义注解 /*** 标记类需要put到策略map中*/ Target({El…...

编程日记 2023/3/21 0:05:27

COCO API

COCO API是做什么用的就不介绍了. 知道的, 不需要介绍；不知道的, 没必要知道, 因为没有这个需求. Installation 从github上clone: https://github.com/pdollar/coco因为我只使用python, 所以只编译python接口: cd coco cd PythonAPI make 报了个错: 需要安装C…...

编程日记 2023/3/21 0:05:24

嵌入式单片机基础篇（十六）之DMA

stm32F1DMA详解 1、问题：什么是DMA？ 回答：DMA，全称为：Direct Memory Access，即直接存储器访问简而言之，DMA就是将一个内存里的数据搬运到另一个内存里，此过程无需CPU直接控制输出 …...

编程日记 2023/3/21 0:05:18

深度学习在计算机视觉领域（包括图像，视频，3-D点云，深度图）的应用一览

点击上方“3D视觉工坊”，选择“星标”干货第一时间送达来源 | 黄浴原文 | https://zhuanlan.zhihu.com/p/55747295编辑 | 焉知自动驾驶分享一篇深度好文，从计算机视觉的底层图像/视频处理、3-D、到计算机视觉的高层环境理解（分割/检测/识别/…...

编程日记 2023/3/21 0:05:15

COCO数据集概述

COCO数据集概述 COCO的全称是Common Objects in Context，是微软团队提供的一个可以用来进行图像识别的数据集。MS COCO数据集中的图像分为训练、验证和测试集。其行业地位就不再多少了，本文主要梳理一下该数据集包含的内容。下图是官网给出的可下载的数…...

编程日记 2023/3/21 0:05:12

SpringBoot15 - 自定义注解实现权限控制

简介： 较原始的项目中使用的是JSP页面标签结合后台方法上注解配合实现权限控制，目前前后端完全分离开发已经是主流模式，大型的项目中可能会用到 shiro 或者 spring security 做安全校验，但是在小型项目中可以使用自定义注解达到权…...

编程日记 2023/3/21 0:05:09

darknet - coco.names

darknet - coco.nameshttps://github.com/pjreddie/darknet/blob/master/data/coco.names data/coco.names person bicycle car motorbike aeroplane bus train truck boat traffic light fire hydrant stop sign parking meter bench bird cat dog horse sheep cow elephan...

编程日记 2023/3/21 0:05:06

JAVA必背面试题和项目面试通关要点、、

原帖地址：http://www.cnblogs.com/hoobey/p/5954292.html#3822951一数据库 1．常问数据库查询、修改（SQL查询包含筛选查询、聚合查询和链接查询和优化问题，手写SQL语句，例如四个球队比赛，用SQL显示所有比赛…...

编程日记 2023/3/21 0:05:03

学习、数据资源收集

常用图片数据集下载网站： roboflow...

编程日记 2023/3/21 0:05:01

刷题记录:牛客NC14700追债之旅

传送门:牛客题目描述: 小明现在要追讨一笔债务，已知有n座城市，每个城市都有编号，城市与城市之间存在道路相连 （每条道路都是双向的），经过任意一条道路需要支付费用。小明一开始位于编号为1的城市&#x…...

编程日记 2023/3/21 0:04:58

Java基础和Web基础

----------------------------------------------------------------------- ----------------------------------------------------------------------- ----------------------------------------------------------------------- ---------------------------------------...

编程日记 2023/3/21 0:04:54

电脑的基本操作

一、电脑的开关机，电脑关机时，不要直接按主机电源直接进行操作，这样极易对硬盘造成损伤。关机前，关闭电脑上所有运行的程序，点击电脑上的”电源“符号，选择关机项。二、电脑浏览器是经常用到的&#xff0…...

编程日记 2023/3/21 0:04:50

《拉勾Java高薪课程》阶段一输出之 IoC容器设计实现及Spring源码分析 - 学习笔记 --菜鸟小回

阶段一模块二学习笔记-Spring高级框架文章目录阶段一模块二学习笔记-Spring高级框架[toc]一、自定义Ioc&AOP框架1. spring概述2. 核心思想2.1 Ioc2.2 AOP3.手写IOC和AOP3.1银行转账的工厂模式实现3.2事务控制3.3将所有用到的工具类等以bean形式封装到xml中。3.4 手写IOC与…...

编程日记 2023/3/21 0:04:49

2011年20大3D网站

如果要在互联网编年史上描述2011年的话，那么无需任何插件即可在浏览器中直接嵌入支持硬件加速的3D图形一定会被记上重重的一笔。随着大部分现代浏览器都增加了对WebGL的支持（微软IE除外），以及最近发布的Flash 11，开发…...

编程日记 2023/3/21 0:04:46

基于JAVA+SpringMVC+Mybatis+MYSQL的小学生智能学习系统

小学生智能学习系统主要分为用户管理系统、学生子系统、教师子系统、管理员系统、公告系统。 （1）用户管理系统包括账号的注册、修改。 （2）管理员系统包括对网站公告发布，上传资料，以及对学生、老师信息进行…...

编程日记 2023/3/21 0:04:44

Unity Android 之 jsoup 爬虫爬取新闻信息，并封装给 Unity 调用的方法整理

Unity Android 之 jsoup 爬虫爬取新闻信息，并封装给 Unity 调用的方法整理目录 Unity Android 之 jsoup 爬虫爬取新闻信息，并封装给 Unity 调用的方法整理一、简单介绍二、实现原理三、注意事项四、效果预览五、网页数据分析，以确…...

编程日记 2023/3/21 0:04:43

新单词 part 5

part 51.traversal 英[trvɜ:sl]美[trvɜ:səl]n. 横越，横断物，（横向）往返移动;2.mess 英[mes]美[mɛs]n. 混乱; 困境; 食堂; 肮脏;vt. 弄脏; 搞砸; 给…供膳;vi. 把事情弄糟; 制造脏乱;3.encumbrance 英[ɪnˈkʌmbrəns]美[ɛnˈ…...

编程日记 2023/2/13 10:23:00

单词20181126

interactive 英 [ˌɪntərˈktɪv] 美 [ˌɪntɚˈktɪv] adj.互动的;互相作用的，相互影响的;[计]交互式的 n.交互式视频设备 commit 英 [kəˈmɪt] 美 [kəˈmɪt] vt.犯罪，做错事;把…托付给;保证（做某事、遵守协议或遵从安排等&#xf…...

编程日记 2023/2/13 10:15:15

html5常用英文单词,英语中最常用的50个单词(上)

英语中最常用的50个单词(上)了解英语常用单词不仅能帮助英语学习者提高词汇技能，还能提升日常交流的自信心。但我们需要注意的是，不要指望掌握这些词汇就能说出流利的英语，而应让它们作为一种资源，帮助我们在更快提高英语技能。下…...

编程日记 2023/2/13 10:16:22

单词打卡内容

英语打卡目录文章目录1.GS1A单词汇总2.GS1B单词汇总3.GS2A单词汇总1.GS1A单词汇总中文英文中文英文中文英文一one二two三three四four五five六six七seven八eight九nine十ten钢笔pen铅笔pencil橡皮rubber格尺ruler书book书包bag胶水glue胶带tape读read读者reader唱sing歌手sing…...

编程日记 2023/2/13 10:16:05

Python制作背单词exe

使用python编写的背单词程序，可以更快捷，更环保的背单词以8上英语第8单元的前20个单词为例； import random #导入随机库 a {1: "摇动,抖动", 2: "奶昔", 3: "食物搅拌器", "4&quo…...

编程日记 2023/3/8 9:40:43

日常英语单词 - 食物

Kung Pao Chicken - 宫保鸡丁pickle\gherkin - 腌黄瓜onion (dip)- 洋葱（酱）salad - 沙拉bacon - 培根lobster - 龙虾tuna - 鱿鱼oyster - 生蚝、牡蛎butter - 黄油、奶油won ton - 馄饨dumpling - 饺子\水果布丁cheese - 芝士popsicle - 冰棒potsticker…...

编程日记 2023/2/13 10:14:42

食物和计算机中一样的英语,表示食物或饮料的英语单词有哪些?

关于食物的单词鲈鱼Bass 黄花鱼Corvina 奶鱼Milkfish 鲤鱼Mullet 箭鱼Halibut 鱆鱼Octopus 乌贼Squid 墨鱼cuttlefish 虾Prawn 大虾clams 基围虾Shrimps 螃蟹Dressed squid小螺肉Tiger Prawns白萝卜Daikon 胡萝卜Carrot 大白菜Tomato 菠菜Spinach 卷心菜Cabbage 马铃薯Potato 玉…...

编程日记 2023/2/13 10:17:54

单词20181127

deploy 英 [dɪˈplɔɪ] 美 [dɪˈplɔɪ] vt.&vi.（尤指军事行动）使展开;施展;有效地利用 validate 英 [ˈvlɪdeɪt] 美 [ˈvlɪˌdet] vt.证实;使合法化，使有法律效力;使生效;批准，确认 native 英 [ˈneɪtɪv] 美 [ˈne…...

编程日记 2023/2/13 10:19:04

VUE: Vue3+TS的项目搭建及基础使用

简介通过 Vue-cli4 创建的 Vue3TS 的项目，并进行一些基础使用的举例。项目搭建 1. 进入命令提示符窗口在要搭建项目的文件夹中，点击路径，输入CMD并按回车 2. 查看node版本、Vue-cli版本 2.1 node版本（14.x以上&#xf…...

编程日记 2023/3/8 9:30:12

网站上面无法显示woff、svg格式字体

网站上面无法显示woff格式字体，需要在服务器上进行配置（服务器为windows server2003/2008） 目前很多的开源前端框架、组件、样式库等使用字体样式，但默认情况下IIS不能识别相应的字体文件，需要做相应设置，否…...

编程日记 2023/2/13 10:16:49

[置顶] woff格式字体怎么打开和编辑？

如题！ woff百度百科:http://baike.baidu.com/link?urltoS7yqpN9VlEcO2GOEp5JEA9-TeaZgIdVqTOv7iHshsNvk-V8HtxEY0ku08TzUoDaEfRhGy_atYdr88bCHpwkK Web开放字体格式 woff是字体文件，做网页时放到服务端，如果客户端浏览器中可以加载这个。那…...

编程日记 2023/3/8 9:14:04

自定义web字体-通过@font-face在页面中嵌入 .woff格式字体的引用

woff文件样式查看链接 http://fontstore.baidu.com/static/editor/index.html 上传woff文件即可看到woff文件的展示效果woff文件可以用python的fontTools 打开 font TTFont(xxx.woff) # 打开文件 font.saveXML(xxx/6329.xml) font[cmap] 映射关系unicode…...

编程日记 2023/3/14 21:37:30

用python对字体文件格式进行转换（woff-xml）

from fontTools.ttLib import TTFont def get():font TTFont(./tyc-num.woff)font.saveXML(./woff4.xml) 将woff文件转化为xml后，再在pycharm中打开。...

编程日记 2023/2/13 10:17:32

woff格式字体怎么打开和编辑？

编程日记 2023/2/13 10:18:04

字体格式：ttf,woff,eot

生成网页字体 https://onlinefontconverter.com/ eot：IE onetype是微软和Adobe共同开发的字体，IE浏览器全部采用这种字体。 woff：其它浏览器 woff(web开发字体格式)是一种专门为web而设计的字体格式标准，实际上是对truetype/…...

编程日记 2023/3/11 4:53:29

leetcode--各种数据结构相关的题

数据结构1.数组（1）找到所有数组中消失的数字(448)（2）旋转图像(48)（3）搜索二维矩阵 II(240)（4）最多能完成排序的块(769)2.栈和队列（1）用栈实现队列(232)&#…...

编程日记 2023/2/13 10:15:17

IDEF的常用建模方法

IDEF0 业务流程建模 IDEF1 信息建模 IDEF1X 数据建模 IDEF2 仿真建模设计 IDEF3 过程描述获取方法 IDEF4 面向对象的设计...

编程日记 2023/2/13 10:14:45

【软件工程基础复习整理】第四章需求分析（4）IDEF1X数据建模

IDEF1X数据建模实体时具有相同属性或特征的显示或抽象事实的结合，这个集合的一个元素便称为实体的一个实例在一张IDEF1X图中，一个实体只能在图中出现一次。可标定联系：子实体的存在依赖于父实体的存在不完全分类联系：可能存…...

编程日记 2023/2/13 10:14:55

IDEF0与IDEF3的关系

IDEF0是对系统的功能建模方法，IDEF3是对系统的过程建模方法。由于系统的功能与过程建模都属于系统行为特征的描述，所以在实际应用中往往是IDEF0与IDEF3相互补充，相互配合，共同完成系统的行为建模的。但是IDEF规范并没有对IDEF0与I…...

编程日记 2023/2/13 10:15:36

C语言常量EF,C语言之详解#idef等宏.doc

C语言之详解#idef等宏C语言之详解#ifdef等宏指令用途#空指令，无任何效果#include包含一个源代码文件#define定义宏#undef取消已定义的宏#if如果给定条件为真，则编译下面代码#ifdef如果宏已经定义，则编译下面代码#ifndef如果宏没有定义&#x…...

编程日记 2023/2/13 10:14:37

数据库|数据库表的设计与实现-数据建模--工程化方法-IDEF1X

工程化建模–IDEF1X IDEF1X是ER图的细化 IDEF1X是一种进行数据建模或数据库设计的工程化的方法重要概念实体独立实体-----强实体从属实体-----弱实体联系可标定连接联系非标定连接联系分类联系非确定联系属性/关键字属性主码候选码外来码实体独立实体&#xf…...

编程日记 2023/2/13 10:15:57

计算机三级数据库----IDEF1X___联系

IDEF1XIDEF1X建模方法一、IDEF1X概述二、IDEF1X模型元素1、实体集:2、联系:(1)标定型联系:(2)非标定型联系:(3)分类联系:(4) 不确定联系:3、属性IDEF1X建模方法一、IDEF1X概述 1、IDEF0侧重描述系统功能，被称为功能建模方法;IDEF1X侧重分析、抽象和概括应用领域中…...

编程日记 2023/2/13 10:16:36

IDEF1X

IDEF系列方法是由美国空军的ICAM(Integrated Computer Aided Manufacturing)计划中首次提出一种复杂系统分析与设计方法，它包括了功能建模(IDEF0)、信息建模(IDEF1)、动态建模(IDEF2)、数据建模(IDEF1x)、过程描述获取方法(IDEF3)等。其中，IDEF1x是IDEF1…...

编程日记 2023/2/13 10:15:55

[数据库系统]数据建模：工程化方法之 IDEF1x规范

IDEF1x规范1.实体2. 联系1.实体实体(Entity): 一个“实体”表示一个现实和抽象事物的集合，这些事物必须具有相同的属性和特征。这个集合的一个元素就是该实体的一个实例。实体被区分为独立实体和从属实体； 独立实体：一个实体的实例都被唯…...

编程日记 2023/2/13 10:17:15

【数据库原理系列】IDEF1x工程化方法

IDEF1x工程化方法 IDEF1x是将E-R模型扩充语义含义而形成的, 或者说，IDEF1x是E-R图的细化 IDEF1x是一种进行数据建模或数据库设计的工程化的方法实体(Entity) 独立标识符实体/独立实体(Identifier-IndependentEntity)–强实体从属标识符实体/从属实体(Identifi…...

编程日记 2023/2/13 10:15:04

数据仓库专题18-数据建模语言IDEF（转载）

转载：link １引言 IDEF的含义是集成计算机辅助制造（Integrated　 Computer－AidedManufacturing，ICAM)DEFinition。最初的IDEF方法是在美国空军ICAM项目建立的，最初开发3种方法:功能建模(IDEF0)、信息建模…...

编程日记 2023/2/13 10:15:21

win10去掉快捷方式小箭头

打开软媒魔方（魔方优化大师） 然后打开美化大师选择移除快捷方式上的箭头 http://jingyan.baidu.com/article/8065f87f80625c23312498b4.html...

编程日记 2023/2/13 10:18:02

技术解析｜如何绘制密度分布图

点击上方『早起python』关注早起和我一起，成为更好的自己前言在前几天对数据分析师与算法工程师进行岗位对比分析的文章中，我们使用了密度分布图和箱线图对薪资水平与学历对薪资的影响进行了分析，那么早起就对这两种图形的绘制方法进行解析&a…...

编程日记 2023/2/13 10:17:19

三角形或圆内均匀分布随机点的计算

圆： 均匀产生角度，均匀产生半径。半径的概率应与其长度一致。 clear for i1:1000; thetarand(); xrand(); rsqrt(x); % 均匀的半径 x1(i)r*cos(2*pi*theta); x2(i)r*sin(2*pi*theta); end plot(x1,x2,o) 半径的概率密…...

编程日记 2023/3/8 7:21:12

PMP考试必用公式大全

为大家倾情打造通关系列宝典。该系列宝典参考PMBOK6、才聚题库、PMI权威资料、以及历届5A学员的经验总结，涵盖PMBOK重点、难点、PMP关键考点。三点估算（适用于持续时间与成本估算） β分布：Te(To4TmTp)/6；标准差&…...

编程日记 2023/3/8 7:20:09

三角网算法

1. 基本概念三角网是由一系列连续三角形构成的网状的平面控制图形，是三角测量中布设连续三角形的两种主要扩展形式，同时向各方向扩展而构成网状，优点为点位分布均匀、各点之间互相牵制、图形强度较高，缺点是扩展较缓慢。三角网是…...

编程日记 2023/3/12 2:47:08

R语言：企业风险分析（1）【概率分布大全，pnrom()等】

本章将介绍pnrom()，qnorm()，dnrom()，rnorm() ，以及指数正态分布，均匀分布，三角分布，几何分布，二项分布，泊松分布，贝塔分布，指数分布等。前言&…...

编程日记 2023/2/13 10:20:00

三角形内的均匀分布点（随机）

Triangle Point Picking...

编程日记 2023/2/13 10:16:34

两个均匀分布差的绝对值是一个三角分布

UTF8gbsn 假如x,y∼U(0,1)x,y\sim U(0,1)x,y∼U(0,1), 也就是说x,yx,yx,y都是(0,1)(0,1)(0,1)上的均匀分布. 问题是:z∣x−y∣z|x-y|z∣x−y∣是什么分布? 采样并列图表 import numpy as np import matplotlib.pyplot as pltN 500000data [] for k in range(N):x1 np.ra…...

编程日记 2023/2/13 10:15:12

Matlab之一行代码生成服从三角分布随机数

Matlab之一行代码生成服从三角分布随机数 0 先上干货代码长这样： x1 random(makedist(Triangular,a,3,b,4,c,5),1,10000) %生成10000个服从下限为3，上限为5，众数为4（最可能出现的数）当然这里面的makedist函数还有别…...

编程日记 2023/2/13 10:15:01

如何在 R 中使用三角分布（附示例）

为了计算 R 中三角分布的概率，我们可以使用EnvStats包中的ptri( ) 函数，它使用以下语法： ptri(q, min = 0, max = 1, mode = 1/2) q：感兴趣的分位数 min : 分布的最小值 max : 分布的最大值 mode : 分布的峰值示例 1：计算小于某个值的概率假设一家餐馆估计他们下周的…...

编程日记 2023/2/13 10:15:34

三角形概率分布

三角形分布，也有人称三角分布，是概率论与统计学中，以低限为a、众数为c、上限为b的连续概率分布。在应用中，a，b，c又分别称为最小值、最大值和最可能值。三角形分布的概率密度函数如下式： f(x|a,b…...

编程日记 2023/2/13 10:16:19

百度文库里的文字不能直接复制怎么办？用上这招终极解决方法

问题：在百度文库里右键复制文字时，会跳出要付费会员才可以复制解决方法： 在该页面的空白处，右键，点击审查元素，再按F1，找到右边的调试程序，第一个打勾，如下图&#xff…...

编程日记 2023/2/13 10:19:23

百度网页不能连接服务器错误,win10系统登陆百度浏览器提示连接服务器错误的恢复步骤...

有关win10系统登陆百度浏览器提示连接服务器错误的操作方法想必大家有所耳闻。但是能够对win10系统登陆百度浏览器提示连接服务器错误进行实际操作的人却不多。其实解决win10系统登陆百度浏览器提示连接服务器错误的问题也不是难事，小编这里提示两点：1、…...

编程日记 2023/2/13 10:16:07

mac safari可以上百度，但是很多网站上不去

问题描述：最近本人碰到了一个问题，mac用safari上网，很多网站都上不去，只有百度可以上，而且很多网站显示网站服务器故障，还有app store无法下载app，点了安装app却一直转圈圈，根本无法…...

编程日记 2023/2/13 10:15:40

百度地图infowindow上添加自定义点击事件

这是个困扰我已久的问题。就是在百度地图的infowindow上添加一个按钮，点击按钮，调用自定义事件。之前我的解决方案是： 这样是可以的，当我点击“查看详情”时，会调用detailMsg方法，但是后来发现一个问题&am…...

编程日记 2023/1/16 14:15:16

百度官网上不去

百度官网上不去除了百度的网站另外的网站都能上去，最后在百度用户服务中心找到了结果; 我使用IP地址 http://202.108.22.5/是能够正常访问的，然后hosts文件中也没有www.baidu.com的相关信息，最后修改DNS地址后能正常访问了，修改D…...

编程日记 2023/1/16 14:15:15

android8carlife连接不上,carlife为什么连接不上汽车连接不上汽车解决方法

使用 CarLife 互联之前，请确认手机车机都同时装有 CarLife(去官网下载)。一、 Android 有线连接准备①手机设置→②打开开发者选项→③勾选 USB 调试→④允许 USB 调试→⑤USB 连接手机二、只要是支持 MFi 的车机均可使用 CarLife iPhone 有线连接的方式&#xff0…...

编程日记 2023/2/13 10:19:26

如何通过 6 个简单步骤在百度上看到您的网站

我们都依赖百度强大的搜索引擎来帮助我们管理我们的生活。从了解最新趋势到获得解决问题的建议，我们会发现很难想象没有它我们会在哪里。我们很容易认为这个平台是我们用来搜索关于其他人、地方或事件的信息的东西。然而，作为一个小企业主，你…...

编程日记 2023/2/13 10:14:50

树莓派上使用百度网盘

想在树莓派上安装下载百度网盘里面的内容，尝试过以下方法安装官方提供的Linux安装包，实际测试，在树莓派上装不上；使用bypy工具地址：https://github.com/houtianze/bypy，也有图形界面，但是不知…...

编程日记 2023/3/12 3:19:33

Opencv-摄像头图像处理

打开摄像头 import cv2 cap cv2.VideoCapture(0) while(cap.isOpened()):# 获取一帧ret, frame cap.read()##图像处理frame1cv2.flip(frame,1)graycv2.cvtColor(frame1, cv2.COLOR_BGR2GRAY)cannycv2.Canny(gray,80,150)##cv2.imshow(frame, canny)if cv2.waitKey(1) ord(q…...

编程日记 2023/2/13 10:16:11

python-opencv实现调用实时摄像头进行图像处理（包含窗口的优化）

python-opencv实现调用实时摄像头进行图像处理（包含窗口的优化） 以前互联网加的时候做的图像识别的工作，有些经验发出来让大家康康。主要是大体的框架，不涉及算法。首先创建一个摄像头的实例： camera cv2.VideoC…...

编程日记 2023/2/13 10:16:39

OpenCV图像处理技术（Python）——摄像头以及视频处理

编程日记 2023/2/13 10:17:44

android高级技术之相机的前后摄像头切换

android高级技术之相机（一）：http://blog.csdn.net/program008/article/details/50557296 前面的分享中我们学习了相机的基本属性，包括相机的预览属性，拍照，保存相片，旋转相片等，今…...

编程日记 2023/3/13 22:11:04

python获取摄像头数据_用Python获取摄像头并实时控制人脸！

实现流程从摄像头获取视频流，并转换为一帧一帧的图像，然后将图像信息传递给opencv这个工具库处理，返回灰度图像(就像你使用本地静态图片一样)程序启动后，根据监听器信息，使用一个while循环，不断的加载视频图…...

编程日记 2023/2/13 10:19:42

OpenCV像素点操作图片特效

目录一：图片的读取显示二：OpenCV像素点操作雪花屏特效色彩反转暗色处理毛玻璃特效三：OpenCV库函数的使用高斯模糊 XY轴模糊灰度化处理中值滤波四：OpenCV视频处理播放视频：那些年&#xff0c…...

编程日记 2023/2/13 10:17:05

android 切换摄像头加动画,android前后摄像头切换

android前后摄像头切换demo，startview后的页面上有切换、拍照两个按钮，拍照后照片未保存，需要保存的请看下方注释，实现了拍照、聚焦功能，以下是CameraPreview.java源码：package com.myselftest;import java…...

编程日记 2023/2/13 10:16:29

2022年电工（高级）特种作业证考试题库及在线模拟考试

题库来源：安全生产模拟考试一点通公众号小程序 2022年电工（高级）操作考试题为电工（高级）复审题库的多种练习模式！2022年电工（高级）特种作业证考试题库及在线模拟考试根据电工&#…...

编程日记 2023/2/13 10:19:11

C#开发学习笔记:C#实现打印Excel文档

//准备读取生成的Excel文档 Microsoft.Office.Interop.Excel.Application excel new Microsoft.Office.Interop.Excel.Application();//lauch excel application excel.Visible true;//该句代码不设置,wb.PrintPreview()将无法打开Excel文档 // 以只读的形式打开EXCEL文件 Wo…...

编程日记 2023/2/13 10:17:40

CPLEX中导入excel数据

1.在.mod文件中定义好变量，例如SupDem int SupDem[1..n]...;2.在.dat文件中从excel读取SupDem的数据 SheetConnection s("D:\\study\\relateddata.xlsx"); SupDem from SheetRead(s,"node!H2:H3685");另外，注意在编程之前&#xf…...

编程日记 2023/3/9 20:50:10

【Excel学习笔记2】通过excel从网站上获取数据的方式

一、关于在excel哪儿输网址？只有一种方法数据——自网站——输入网址url即可二、关于如何设置获取后数据的刷新频率？两种方法： 1.右边“查询&连接”栏，找到对应的table，右击——属性——设置频率即可 2.数据…...

编程日记 2023/2/13 10:19:37

excel学习-连接符+text函数

文章目录连接符&text函数连接符& text函数...

编程日记 2023/2/13 10:14:58

Go语言数据结构

Go语言数据结构参考资料来源于菜鸟教程。在Go编程语言中，数据类型用于声明函数和变量。数据类型的出现是为了把数据分成所需内存大小不同的数据，编程的时候需要用大数据的时候才需要申请大内存，觉可以充分利用内存。 Go语言按类别有以下几…...

编程日记 2023/2/13 10:16:59

excel 公式单引号 concat_Excel两个新函数帮你快速搞定批量连接

如果将两个文本连接起来，通常第一反应用连接符号"&"。使用连接符&连接文本字符记得曾经有记者采访刘强东问奶茶妹妹漂不漂亮，他竟然回答看不出来好赖…当时真觉得这家伙身在福中不知福，饱汉不知饿汉饥。果然之后还闹出一些…...

编程日记 2023/2/13 10:17:57

oleDbConnection 连接Excel学习

"ProviderMicrosoft.Jet.OLEDB.4.0;Data SourceD:/MyExcel.xls;Extended Properties""Excel 8.0;HDRYes;IMEX1" 针对如果上连接字符串对相关属性进行说明如下："HDRYes;”指示第一行中包含列名，而不是数据，"I…...

编程日记 2023/3/8 7:22:16

2023.3.20

文章目录算法部分2：前缀和数组3：Math.random( ):等概率的返回[0 , 1)之间的数4：从a~b随机到c~d随机5：01不等概率随机到01等概率随机语法部分8：局部变量必须初始化9：同一个类，类的加载只加载一次…...

编程日记 2023/3/21 0:07:12

Ubuntu18.4安装petalinux

Ubuntu18.4安装petalinux 本文介绍安装petalinux的步骤，最近在学习ZYNQ的驱动开发，简单记录一下，以备不测，哼哼哼。。。。。。。。。。。 1. 下载准备必须的文件啥都不说啦，先自行下载，链接如下&#x…...

编程日记 2023/3/21 0:06:59

计算机体系结构（校验码+总线）

校验码计算机系统运行时，为了确保数据在传送过程中正确无误，一是提高硬件电路的可靠性；二就是是提高代码的校验能力，包括查错和纠错。通常使用校验码的方法检测传送的数据是否出错。这里的校验码主要是指循环冗余校验码&#xff0…...

编程日记 2023/3/21 0:06:34

三角函数的局限和改进思路

1. 三角函数的局限 1.1 三角函数概算三角函数（trigonometric function）是从直角三角形发展起来的一种角度和边的对应关系。常见的三角函数有sin、cos、tan三个函数，反三角函数有arcsin、arccos、arctan三个反三角函数（反三角函数…...

编程日记 2023/3/21 0:06:14

spark第三章：工程化代码

系列文章目录 spark第一章：环境安装 spark第二章：sparkcore实例 spark第三章：工程化代码文章目录系列文章目录前言一、三层架构二、拆分WordCount1.三层拆分2.代码抽取总结前言我们上一次博客，完成了一些案例的练习&#xff0…...

编程日记 2023/3/21 0:05:59

javaEE初阶 — JavaScript WebAPI

文章目录什么是 DOMDOM 树获取元素1. querySelector2. querySelectorAll事件1. 事件三要素2. 代码案例获取 / 修改元素内容1. innerHTML获取 / 修改元素属性获取 / 修改表单元素属性获取 / 修改样式属性1. 修改内联样式（修改 style 属性的值）2. 修改元素…...

编程日记 2023/3/21 0:05:50

【C++】C++11新特性——可变参数模板|function|bind

文章目录一、可变参数模板1.1 可变参数的函数模板1.2 递归函数方式展开参数包1.3 逗号表达式展开参数包1.4 empalce相关接口函数二、包装器function2.1 function用法2.2 例题：逆波兰表达式求值2.3 验证三、绑定函数bind3.1 调整参数顺序3.2 固定绑定参数一、可变参数…...

编程日记 2023/3/21 0:05:39

Phoenix基础命令_视图映射和表映射_数字存储问题---大数据之Hbase工作笔记0036

然后我们再来看看,用Phoenix来操作hbase,的基本用法具体的其他的命令在官网都能找到,这里就说几个 https://phoenix.apache.org/language/index.html 首先是创建表,这里注意,默认表名给弄成大写的这里的varchar对应的其实就是hbase中的string 然后这里的id表示行的rowkey 可…...

编程日记 2023/3/21 0:05:30

SAP 批量修改采购订单

现在有一个需求，我们需要冻结一批采购订单，但是由于批量冻结的后果无法预知，我们打算用一个折中的办法。利用采购订单行项目中的“最近收货日期”字段，下面我们先看一下它的解释。最近可能的收货这是收货（GR&…...

编程日记 2023/3/21 0:05:04

AntDB-M数据库锁分析，不要错过！

AntDB数据库始于2008年，在运营商的核心系统上，为全国24个省份的10亿多用户提供在线服务，具备高性能、弹性扩展、高可靠等产品特性，峰值每秒可处理百万笔通信核心交易，保障系统持续稳定运行近十年，并在通信、…...

编程日记 2023/3/21 0:04:31

Android开发之给apk签名

前言最近360加固助手签名突然收费了，加固完后要自己签名了。在此记录一下自己使用命令行签名步骤。正文首先在安装Android Studio的情况下找到SDK安装目录，在build-tools目录下有自己下载的SDK版本，随便打开一个版本，找到apksigne…...

编程日记 2023/3/21 0:04:11

设计模式快速复习

文章目录设计模式快速复习创建型模式结构型模式行为模式设计模式快速复习对 Design Pattern Explanation with C Implementation（By K_Eckel） 的阅读总结创建型模式 Factory ：提供一个专门用来创建对象的工厂类，而不是直接使…...

编程日记 2023/3/21 0:03:57

web网络协议

一、 OSI 模型 OSI Open System Interconnect 开放式系统互联分层：物理层，数据链路层，网络层，传输层，会话层，表示层、应用层物理层二进制传输为传输数据所需要的物理链路进行创建、维持、拆除常见设…...

编程日记 2023/3/21 0:03:44

AWS白皮书 – 可靠性

本文讲解AWS良好架构框架（AWS Well-Architected Framework）里其中五大支柱之一：可靠性（Reliability）。可靠性支柱包含系统从基础设施或者服务中断的状态下进行恢复的能力、动态获取资源以满足需求的能力以及缓解错误…...

编程日记 2023/3/21 0:03:34

【必看】最全开窗函数讲解和实战指南

窗口函数（Window Function）是 SQL2003 标准中定义的一项新特性，并在 SQL2011、SQL2016 中又加以完善，添加了若干拓展。一.窗口函数有什么用？ 在日常工作中，经常会遇到需要在每组内排名，比如下面…...

编程日记 2023/3/21 0:03:24

简单描述一个最简化的Angular项目代码

使用Angular CLI新建一个最简单的Angular项目夜晚闲来无事，来分析一个使用Angular CLI创建的最简化的Angular项目代码。在这之前，我需要确保电脑上搭建好了Angular的开发环境，其中包括以下几项： 首先，电脑上安装Nod…...

编程日记 2023/3/21 0:03:14

rust打印和使用命令行参数

let age 38;let info format!("My age is {age}", age32);println!("{info}, age is:{age}", infoinfo, ageage);output: My age is 32, age is:38let defaultname "zxpo";let age 36;println!("{:0>width$}", age, width 10...

编程日记 2023/3/21 0:03:01

【剧前爆米花--爪哇岛寻宝】java--线程不安全的原因及解决方法

作者：困了电视剧专栏：《JavaEE初阶》文章分布：这是关于线程安全相关的文章，在该文章中，我梳理了造成线程不安全的原因和使线程变安全的方法，希望对你有所帮助！ 目录线程的安全问题什么是线…...

编程日记 2023/3/21 0:02:44

[MFSAN]Aligning Domain-specific Distribution and Classifier

一、Abstract摘要多源域到目标域的迁移学习，之前的大部分为单源域迁移学习即SUDA，这篇论文针对MUDA方法。之前的多源域迁移问题非常常见的一种方法就是，将所有的源域合并成一个单源域并且对齐分布（同SUDA方法一样）&…...

编程日记 2023/3/21 0:02:34

platform设备驱动实验

一、Linux 驱动的分离与分层 1、驱动的分隔与分离传统驱动编写思路如下图： 下图这个就是 Linux 中的总线(bus)、驱动(driver)和设备(device)模型，也就是常说的驱动分离。 2、驱动的分层分层的目的也是为了在不同的层处理不同的内容，以…...

编程日记 2023/3/21 0:02:15

this的指向以及更改方法

（一）this的指向 (1)普通函数的this指向， 谁调用指向谁，没有调用者的时候指向window (2)箭头函数的this指向箭头函数本身没有this，箭头函数中this的引用就是最近作用域中的this（父级的this）…...

编程日记 2023/3/21 0:02:03

Android ServiceManager进阶

一：概要对android的binder通信机制，服务进程通过向 ServiceManager 添加对应的服务aidl实现binder对象，向其他应用提供服务能力。客户进程则是通过对应服务名从 ServiceManager 中获取对应的服务binder对象。android在最新版本中有三个不同的…...

编程日记 2023/3/21 0:01:53

小菜鸟Python历险记：(第四集)

今天写的文章是记录我从零开始学习Python的全过程。在Python中函数是非常重要的，这里也可以称为方法。在前面分享的几篇文章中用到的方法有print(),str(),int().这些都是方法，而除了上面写的这几种内置方法以外，我们也可以自己在程序中自定义…...

编程日记 2023/3/21 0:01:41

flink processFunction算子

flink processFunction算子 1 process function 概述1 process function 概述 process function 相对于前文所述的 map、flatmap、filter 算子来说，最大的区别是其让开发人员对数据的处理逻辑拥有更大的自由度 ； 同时 ， Proce…...

编程日记 2023/3/21 0:01:32

【Git使用学习】本地项目更改以及相对应的Github操作

接上一节，因为是vue项目，导致有很多的node_modules需要安装，如果将这个文件夹也一同上传到github中，太慢了。因此上一节将这个文件夹删除了。但是，在本地运行的时候，这个文件夹不能删，不然就跑不…...

编程日记 2023/3/21 0:01:20

接口测试——电商网站接口测试实战（四）

1. 接口测试需求分析常见接口文档提供的两种方式 ①word文档 ②在线文档电商网站网址模拟练习：http://111.231.103.117:8083/swagger-ui.html 2. 登陆的分析慕慕生鲜网址：http://111.231.103.117/#/login账号密码点击execute后输入账号密码后点…...

编程日记 2023/3/21 0:01:10

kettle—资源库详解

资源库数据库资源库是将作业和转换相关的信息存储在数据库中，执行的时候直接去数据库读取信息，很容易跨平台使用，但是这里的资源库也不一定非要是数据库，目前支持三种，我们先看一下怎么进入资源库配置，我们在kettle 界面的右上角，有个connect ，这就是我们资源库的配置…...

编程日记 2023/3/21 0:00:53

解决Vue数组数据变化了，赋值后视图没更新的问题

最近遇到一个问题，表格数据变化了，直接赋值后视图没更新，打印表格数据发现是最新的数据，这主要是因为，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属…...

编程日记 2023/3/20 23:57:07

SDK02- 窗口创建

窗口创建的六要素： 设计注册窗口类创建窗口实例显示窗口更新窗口消息循环窗口过程函数设计注册窗口类 typedef struct _WNDCLASS { UINT style; //风格WNDPROC lpfnWndProc; //函数过程int cbClsExtra; //默认为0int cbWndExtra; //默认…...

编程日记 2023/3/20 23:55:29

三十二、实战演练之接口自动化平台的模型创建、项目管理接口设计

1. 模型编写根据项目需求分析和数据库设计，我们创建项目应用，测试计划应用，测试报告应用，bug应用： django-admin startapp projects django-admin startapp testplans django-admin startapp reports django-admin …...

编程日记 2023/3/20 23:55:18

QT | 编写一个简单的上位机

QT | 编写一个简单的上位机时间：2023-03-19 参考： 1.易懂 | 手把手教你编写你的第一个上位机 2.QT中修改窗口的标题和图标 3.图标下载 1.打开QT Creator 2.新建工程 Qt Creator 可以创建多种项目，在最左侧的列表框中单击“Application”&am…...

编程日记 2023/3/20 23:55:08

Python（白银时代）——面向对象

基本概念面向过程是早期的一个编程概念，类似函数，但是没有返回值具体做法： 把完成某个需求的所有步骤，从头到尾逐步实现将某些功能独立的代码封装成一个又一个函数然后顺序调用不同的函数特点： 注重步骤…...

编程日记 2023/3/20 23:54:58

5.方法（最全C#方法攻略）

目录 5.1 方法的结构 5.2 方法体内部的代码执行 5.3.1 类型推断和Var关键字 5.3.2 嵌套块中的本地变量 5.4 本地常量 5.5 控制流 5.6 方法调用 5.7 返回值 5.8 返回语句和void 方法 5.9 参数 5.9.1 形参 5.9.2 实参位置参数示例 5.10 值参数 5.11 引用参数 5.12…...

编程日记 2023/3/20 23:54:43

C++中的多态与虚函数

多态是面向对象程序设计的关键技术之一。若程序设计语言不支持多态行，不能称为面向对象的语言。多态性是考虑在不同层次类中，以及在同一类中，同名成员函数之间的问题。函数重载，运算符重载，属于编译时的多态性。以类…...

编程日记 2023/3/20 23:54:23

LeetCode算法不同路径和不同路径II C++

目录题目不同路径参考答案题目不同路径II参考答案题目不同路径一个机器人位于一个 m x n 网格的左上角 （起始点在下图中标记为 “Start” ）。机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角（在下图中标记为 “Finis…...

编程日记 2023/3/20 23:53:53

Windows 下修改Tomcat jvm参数

一、设置Windows服务自动启动方式修改修改注册表或者修改运行tomcatW.exe出来的“Java”选项都行 1、注册表修改运行：regedit 找到： （64位操作系统）HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Apache Software Foundation\Pr…...

编程日记 2023/3/20 23:53:40

【独家】华为OD机试 - 猜字谜（C 语言解题）

最近更新的博客华为od 2023 | 什么是华为od，od 薪资待遇，od机试题清单华为OD机试真题大全，用 Python 解华为机试题 | 机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南）华为od机试，独家整理已参加机试人员的实战技巧本期题目：猜字谜题目小王设计了一…...

编程日记 2023/3/20 23:53:23

Python自动化测试实战篇(7),初识pytest做一个简单的接口测试，allure输出可视化测试报告

这些是之前的文章，里面有一些基础的知识点在前面由于前面已经有写过，所以这一篇就不再详细对之前的内容进行描述 Python自动化测试实战篇（1）读取xlsx中账户密码，unittest框架实现通过requests接口post登录网站请求&…...

编程日记 2023/3/20 23:52:32

CKA认证考试难不难？考试内容是什么？

我们的社会在不断进步，市场对于人才的要求也越来越高，而随着第四次工业革命的发展，各个国家都在奋力研发信息通讯技术，旨在为了能够获得最先进的技术，而CKA则是非常重要的一项。CKA认证考试是由Linux基金会和云原生计算…...

编程日记 2023/3/20 23:52:10

DETR模型训练

前面在完成了DETR模型的构建后，我们接下来便是进行数据集构造与模型训练了，模型训练阶段会涉及到网络前向传播与后向传播，这才是真正的难点。数据集构造创建数据集在数据集构造前其首先进行了优化器的选择与学习策略的选择。随后创建数…...

编程日记 2023/3/20 23:50:12

一文弄懂熵、交叉熵和kl散度(相对熵)

一个系统中事件发生的概率越大，也就是其确定性越大，则其包含的信息量越少，可以认为一个事件的信息量就是该事件发生难度的度量，事件所包含的信息量越大则其发生的难度越大。并且相互独立的事件，信息量具有可加性。相互…...

编程日记 2023/3/20 23:50:02

$O(n!)$