前端技术Html，Css，JavaScript，Vue3
Html
1.基本标签
<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6><p>这是一个段落。</p>
<br> （换行）
<hr> （水平线）
<!-- 这是注释 -->
2.文本格式化
<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd>
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong><abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
<sub> （下标文本）
<sup> （上标文本）
3.链接
普通的链接：<a href="http://www.example.com/">链接文本</a>
图像链接： <a href="http://www.example.com/"><img decoding="async" src="URL" alt="替换文本"></a>
邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>
书签：
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>
4.图片
<img decoding="async" loading="lazy" src="URL" alt="替换文本" height="42" width="42">
5.无序列表
<ul><li>项目</li><li>项目</li>
</ul>
6.有序列表
<ol><li>第一项</li><li>第二项</li>
</ol>
7.表格
<table border="1"><tr><th>表格标题</th><th>表格标题</th></tr><tr><td>表格数据</td><td>表格数据</td></tr>
</table>
8.表单
<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>苹果</option>
<option selected="selected">香蕉</option>
<option>樱桃</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea></form>
Css
1.选择器
/*id选择器*/
#p {text-align:center;color:black;font-family:arial;
}
/*class选择器*/
.center {text-align:center;}
2.文本和字体
h1 {text-align:center;}
p.date {text-align:right;}h1 {font-size:40px;}
3.链接
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
4.隐藏
h1.hidden {display:none;}
5.定位position
p.pos_fixed
{position:fixed; /* 元素的位置相对于浏览器窗口是固定位置 */position:relative; /* 相对定位元素的定位是相对其正常位置 */position:absolute; /*绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>*/
}
6.浮动
/*使元素向左或向右移动，其周围的元素也会重新排列*/
img
{float:right;
}
7.对齐
margin: auto;
text-align: center;
/*依据实际情况还可以使用position: absolute，margin，padding，float 实现*/
8.图像
img
{opacity:0.4; /* 透明度 */
}
img:hover /* 悬停 */
{opacity:1.0;
}
JavaScript
1.输出
window.alert("") //弹出警告框。
document.write("") //方法将内容写到 HTML 文档中。
document.getElementById("demo").innerHTML = "段落已修改。" //写入到 HTML 元素。
console.log("") //写入到浏览器的控制台
2.函数
function myFunction(a,b){// var定义的变量可以修改，如果不初始化会输出undefined，不会报错var obj = {name:"Fiat", model:500, color:"white"};//const定义的变量不可以修改，而且必须初始化。const s = "s";return a*b;
}
3.常用事件
onchange //HTML 元素改变
onclick //用户点击 HTML 元素
onmouseover //鼠标指针移动到指定的元素上时发生
onmouseout //用户从一个 HTML 元素上移开鼠标时发生
onkeydown //用户按下键盘按键
onload //浏览器已完成页面的加载
4.DOM
var x=document.getElementById("intro");
var y=x.getElementsByTagName("p");
var x=document.getElementsByClassName("intro");
5.改变Html
document.getElementById("p1").innerHTML="新文本!"; // 改变html
document.getElementById(id).attribute="新属性值"; // 改变属性
document.getElementById(id).style.property="新样式" // 改变CSS
6.DOM 元素 (节点)
尾部创建新的 HTML 元素 (节点) - appendChild()
头部创建新的 HTML 元素 (节点) - insertBefore()
移除HTML 元素 - removeChild()
替换 HTML 元素 - replaceChild()
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);var element = document.getElementById("div1");
element.appendChild(para);
7.字符串
str.match("world");
str.replace("Microsoft","Runoob");
8.弹框
alert("你好，我是一个警告框！"); // 警告框
var r=confirm("按下按钮");
if (r==true){}else{} // 确认框
var person=prompt("请输入你的名字","Harry Potter");
if (person!=null && person!=""){} // 提示框
Vue
创建Vue工程
模板语法
文本插值，原始 HTML，Attribute 绑定，动态参数
<template><p>{{ msg + '!' }}</p><div v-html="vhtml"></div><div :id="bindId"></div><button :disabled="isButtonDisabled">Button</button><div v-bind="objectOfAttrs"></div><button @click="clk()">按钮</button><hr><a :[attr]="123">动态参数</a>
</template><script setup>
import { ref } from 'vue';const msg = ref("hello world");
const vhtml = '<span style="color: red">This should be red.</span>';
const bindId = "divid";
const isButtonDisabled = true;
const attr = 'href';
const objectOfAttrs = {id: 'divid',class: 'wrapper'
}
function clk(){msg.value='clik !';
}
</script>
<style>
#divid{background: blue;width: 100px;height: 100px;
}
.wrapper{margin: 50px;
}
</style>响应式基础
<template><p>{{ reactiveMsg.msg + '!' }}</p><p>{{ refMsg }}</p><button @click="clk()">按钮</button>
</template><script setup>
import { reactive, ref } from 'vue';// ref用于普通类型，使用需要.value；reactive用于复杂类型（对象类型），使用不需要.value
// 建议优先使用ref，reactive某些情况会失去响应，参考https://blog.csdn.net/m0_57033755/article/details/129043116
const reactiveMsg = reactive({'msg':'hello world'});
const refMsg = ref('123');
function clk(){reactiveMsg.msg='clik !';refMsg.value = 'clik!';
}
</script>计算属性
<template><p>{{ msg }}</p><p>{{ reverseMsg }}</p>
</template><script setup>
// 计算属性，相比于method有缓存
const msg = 'hello world';
const reverseMsg = computed(()=>{return msg.split('').reverse().join('');
})
</script>侦听器
<template><p>{{ msg }}</p><input type="text" v-model="msg"><p>{{ obj.age }}</p><button @click="obj.age = 11">改变msg</button>
</template><script setup>
import { ref, watch, reactive } from "vue";const msg = ref('hello world');
const obj = reactive({ count: 0,age: 1,name:'qwe' })
// watch监听器，当某一个值改变时进入
watch(msg, (newValue, oldValue) => {console.log(oldValue);console.log(newValue);
})
// 加上immediate代表初始化也会进入
watch(msg, (newValue, oldValue) => {console.log(oldValue);console.log(newValue);
}, { immediate: true })
// 监听对象时，自动为深度监听，监听每一个属性变化，影响性能
watch(obj, (newValue, oldValue)=>{console.log(newValue);
})
// 监听对象某一个属性
watch(() => obj.age, (newValue, oldValue) => {console.log(newValue);
})
</script>Class 与 Style 绑定
<template><p :class="{font : true}">hello</p><!-- 推荐使用驼峰命名 --><p :style="{color : 'red', fontSize : '50px'}">hello!!!</p>
</template><script setup>
</script><style>
.font{font-size: large;color: blue;
}
</style>条件渲染
<template><p v-if="type == 'A'">A</p><p v-else-if="type == 'B'">B</p><p v-else >C</p><input type="text" v-model="type"><!-- 因为v-if是一个指令，他必须依附于某个元素。如果我们想要切换不止一个元素 <template> 元素上使用 v-if，这只是一个不可见的包装器元素，最后渲染的结果并不会包含这个 <template> 元素 --><template v-if="true"><p>111</p><p>111</p><p>111</p></template><p v-show="true">hello!!!</p>
</template><script setup>
import { ref } from "vue";const type = ref('A')
</script>列表渲染
<template><ul><li v-for="person in persons" :key="person">{{ person }}</li></ul><button @click="addItem()">增加元素</button><ul><li v-for="(person,index) in persons" :key="index">{{ person }} -> {{ index }}</li></ul><ul><li v-for="obj in objs" :key="obj.name">{{ obj.name }} : {{ obj.age }}</li></ul>
</template><script setup>
import { reactive } from "vue";const persons = reactive(['aaa','bbb','ccc']);
const objs = [{'name':'qqq','age':1},{'name':'www','age':2}]
function addItem(){// 数组变化// push() 末尾添加// pop() 末尾删除// shift() 首位删除// unshift() 首位添加// splice() 删除，插入，替换// sort() 排序// reverse() 反转persons.push('ddd');
}
</script>事件处理
<template>
{{ count }}
<button @click="count++">add 1</button>
<button @click="addNum(10)">add 10</button>
<!-- 只传递event对象时，方法不要加上() -->
<button @click="eventClik">event</button>
<button @click="eventClik2(5, $event)">event2</button>
<!--多事件处理-->
<button @click="addNum(1), addNum(2)">多事件处理+3</button>
</template><script setup>
import { ref } from "vue";const count = ref(0);
function addNum(num){count.value += num;
}
function eventClik(event){alert('hello ' + count.value)console.log(event);
}
function eventClik2(num, event){count.value += num;console.log(event);
}
</script>事件修饰符
<template><div @click="divClick"><!-- stop：阻止事件冒泡 --><button @click.stop="btnClick">按钮</button></div><div><form action=""><!-- prevent：阻止默认行为 --><input type="submit" value="提交" @click.prevent="submitClick"></form><!-- once：只触发一次 --><button @click.once="btnClick">点击一次</button><div><!-- keyup.enter：键盘事件，enter回弹时触发 --><input type="text" @keyup.enter="keyUp"></div></div>
</template><script setup>
function divClick(){alert('父元素');
}
function btnClick(){alert('子元素')
}
function submitClick(){alert('提交成功');
}
function keyUp(){alert('回车确定');
}
</script>表单输入绑定
<template><p>文本：{{ textMessage }}</p><input type="text" v-model="textMessage"><div><!-- 单个复选框，v-model绑定boolean，代表是否勾选 --><input type="checkbox" v-model="checked">{{ checked }}</div><div><p>选取角色：{{ users }}</p><!-- 多个复选框，需要设置value，v-model绑定value --><input type="checkbox" id="tom" value="Tom" v-model="users"><!-- label可以用来配合input的id，和直接使用字符串没区别 --><label for="tom">Tom</label><input type="checkbox" id="rose" value="Rose" v-model="users">Rose<input type="checkbox" id="jerry" value="Jerry" v-model="users">Jerry</div><div><p>pick: {{ picked }}</p><!-- 单选按钮，需要设置value否则返回on，v-model绑定value，可以省略name --><input type="radio" id="one" value="One" v-model="picked">One<input type="radio" id="two" value="Two" v-model="picked">Two</div><div><p>选择：{{ english }}</p><!-- 选择器单选，value可以省略 --><select v-model="english"><option>A</option><option>B</option><option>C</option></select></div><div><p>选择水果：{{ fruits }}</p><!-- 选择器多选，value可以省略 --><select v-model="fruits" multiple><option>苹果</option><option>香蕉</option><option>橘子</option></select></div>
</template><script setup>
import { ref } from "vue";const textMessage = ref('文本');
const checked = ref(false);
const picked = ref('');
const english = ref('A');
const users = ref([]);
const fruits = ref([]);
</script>
v-model修饰符
.lazy 懒加载，失去焦点再更新
.number 输出变为数字类型
.trim 去除两端空格
父子组件相互传值
父组件：
<template><!-- 使用组件，传递参数；此处:msg父传子；@parentValue子传父 --><hello :msg="msg" @parentValue="getValue"></hello>
</template><script setup>
// 引入组件
import hello from './components/hello.vue';
const msg = 'app.vue';
// 子组件自定义事件对应方法
function getValue(value){alert(value);
}
</script>
子组件：
<template><div>hello</div>{{ msg }}<div><button @click="sendMsgToParent">监听事件传递子组件参数到父组件</button></div>
</template>
<script setup>
// 使用父组件传递的参数
defineProps(['msg']);
// 使用自定义组件实现子传父
const emit = defineEmits(['parentValue']);
function sendMsgToParent(){emit('parentValue', 'from son');
}
</script>
父子组件相互获取值
父组件：
<template><!-- ref可以用来获取该页面dom元素和子组件数据 --><hello ref="helloComponent"></hello><div ref="div"><span></span></div>
</template><script setup>
import hello from './components/hello2.vue';
import { onMounted, provide, readonly, ref } from 'vue';
// ref获取dom元素需要先定义
let helloComponent = ref(null);
const div = ref('');
onMounted(() => {console.log(helloComponent.value.msg);console.log(div.value);
})
// 子获取父数据需要用到provide/inject，setup语法糖只支持一次provide一个变量,readonly只读
provide('div', readonly(div));
</script>
子组件：
<template>{{ msg }}
</template>
<script setup>
import { inject, onMounted, ref } from 'vue';let msg = '子组件';
// 获取父组件provide的值
const div = inject('div');
// setup语法糖写法下组件是默认私有的，defineExpose就是setup语法糖写法中将特定属性、方法显式暴露的宏指令。
// 只有在子组件通过defineExpose显式暴露的属性、方法才能被父组件通过ref获取并使用。
// 需要注意defineExpose必须写在声明好的属性、方法之下，否则会报错！
defineExpose({msg
});
onMounted(() => {console.log(div.value);
})
</script>
插槽
父组件：
<template><hello><!-- 不取名字直接使用 --><span>123123</span><!-- 取名字的插槽需要template包裹 --><template v-slot:msg><h4>来自父组件的信息</h4></template><template v-slot:btn><button>按钮</button></template></hello>
</template><script setup>
import hello from './components/hello3.vue';
</script>
子组件：
<template><div><!-- 插槽相当于占位符 --><slot></slot><slot name="msg"></slot><slot name="btn"></slot></div>
</template>
路由
安装vue路由：
npm install vue-router@4
视图组件包含：
views/Home.vue
views/Error.vue
views/About.vue:
<template><h1>About</h1>
</template>
<script setup>
import { onMounted } from "vue";
import {useRoute} from 'vue-router'onMounted(() =>{alert(useRoute().params.id)
})
</script>
router/index.js:
import {createRouter, createWebHashHistory} from 'vue-router'
// 导入路由组件
import Home from '../views/Home.vue'
import About from '../views/About.vue'
// 404页面
import Error from '../views/Error.vue'
// 路由映射
const routes = [{path: '/',redirect: '/home'},{path: '/home',component: Home},// :id传参， 传参还可以使用props，接收端需要使用defineProps{path: '/about/:id', component: About},// 匹配所有路径{path: '/:path(.*)', component: Error}
]const router = createRouter({history: createWebHashHistory(),routes
})
// 导出，其他组件才能引入
export default router
main.js:
import router from './router'import { createApp } from 'vue'
import App from './App.vue'const app = createApp(App)
// router必须放在app前面
app.use(router)
app.mount('#app')
App.vue:
<template><div><h1>Hello App!</h1><!-- 底层为a标签 --><router-link to="/">Go to Home</router-link><div></div><router-link to="/about/123">Go to About</router-link><!-- 视图渲染在这里 --><router-view></router-view></div>
</template>
嵌套路由
views/Parent.vue:
<template><h1>Parent</h1><router-link to="/parent/children1">Go to Children1</router-link><div></div><router-link to="/parent/children2">Go to Children2</router-link><router-view></router-view>
</template>
index.js:
import { createRouter, createWebHashHistory } from 'vue-router'
// 导入路由组件
import Parent from '../views/Parent.vue'
import Children1 from '../views/Children1.vue'
import Children2 from '../views/Children2.vue'
// 路由映射
const routes = [{path: '/parent',component: Parent,children: [{path: 'children1',component: Children1},{path: 'children2',component: Children2}]}
]const router = createRouter({history: createWebHashHistory(),routes
})
// 导出，其他组件才能引入
export default router
使用js实现路由
<template><h1>Page</h1><button @click="pageClk">跳转按钮</button>
</template>
<script setup>
import {useRouter} from 'vue-router'// useRouter一定要放在setup方法内的顶层，否则作用域改变useRouter()执行返回的是undefined
const router = useRouter();
function pageClk(){// js方法实现路由跳转router.push('/parent');
}
</script>
命名视图
同时 (同级) 展示多个视图
views/Top.vue
views/Main.vue
views/Foot.vue
index.js:
import { createRouter, createWebHashHistory } from 'vue-router'
// 导入路由组件
import top from '../views/Top.vue'
import main from '../views/Main.vue'
import foot from '../views/Foot.vue'
// 路由映射
const routes = [{path: '/name',components: {default: main,top,foot}}
]const router = createRouter({history: createWebHashHistory(),routes
})
// 导出，其他组件才能引入
export default router
App.vue:
<template><div><h1>Hello App!</h1><router-link to="/name">Go to 命名视图</router-link><router-view name="top"></router-view><router-view></router-view><router-view name="foot"></router-view></div>
</template>
路由守卫
index.js:
常用来做路由间跳转的判断，规定用户或权限
router.beforeEach((to, from, next) => {if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })else next()
})
Proxy跨域
安装axios：
npm install axios
vite.config.js:
import { defineConfig } from 'vite'
export default defineConfig({server: {proxy: {'/path': {target: 'https://i.maoyan.com', // 替换地址changeOrigin: true, // 开启跨域rewrite: path => path.replace(/^\/path/, '') // 重写路径}}}
})使用方：
<script setup>
import axios from 'axios';
// 访问域名 https://i.maoyan.com/api/mmdb/movie/v3/list/hot.json?ct=%E6%88%90%E9%83%BD&ci=59&channelId=4
axios.get('/path/api/mmdb/movie/v3/list/hot.json?ct=%E6%88%90%E9%83%BD&ci=59&channelId=4').then((res) => {console.log(res);
})
</script>
axios和后端通信
<template><div>{{ data }}</div>
</template><script setup>
import axios from 'axios'
import { onMounted, ref } from 'vue';const data = ref('')onMounted(() => {// 考虑跨域axios.get('/local/page-helper/').then(function(res){//.then()表示成功的回调console.log(res.data) data.value = res.data})
})
</script>
Vue3状态管理
存储文件：
import { reactive } from "vue";export const store = reactive({count: 0,increment(){this.count++}
})
调用方：
<template><div><span>{{ store.count }}</span></div><button @click="store.increment">按钮</button>
</template><script setup>
import { store } from './store/index';
</script>
Pinia状态管理
安装Pinia：
npm install pinia
main.js:
import {createPinia} from 'pinia'
import { createApp } from 'vue'
import App from './App.vue'const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
app.mount('#app')store.js:
import {defineStore} from 'pinia'
import {ref, computed} from 'vue'// 按照规范返回值使用use***Store，defineStore第一个参数必须独一无二
export const useAgeStore = defineStore('ageStore', () => {const age = ref(0) // statefunction addAge(){ //actionsage.value ++}const getAge = computed(() => { // getterreturn age.value + 5})return { age, addAge, getAge}
})
使用：
<template><div>{{ ageStore.age }}{{ ageStore.getAge }}</div><button @click="ageStore.addAge">add</button>
</template><script setup>
import {useAgeStore} from './store/ageStore';const ageStore = useAgeStore()
</script>
相关文章：
前端技术Html，Css，JavaScript，Vue3
Html 1.基本标签 <h1>最大的标题</h1> <h2> . . . </h2> <h3> . . . </h3> <h4> . . . </h4> <h5> . . . </h5> <h6>最小的标题</h6><p>这是一个段落。</p> <br> （换…...
实战项目——多功能电子时钟
一，项目要求 二，理论原理 通过按键来控制状态机的状态，在将状态值传送到各个模块进行驱动，在空闲状态下，数码管显示基础时钟，基础时钟是由7个计数器组合而成，当在ADJUST状态下可以调整时间&…...
【es6】对象解构赋值
es6中对象解构赋值： 代码 let { foo: baz } { foo: rose, bar: jeck }; baz // "rose"let obj { first: tom, last: rose }; let { first: f, last: l } obj; f // tom l // roselet { foo: baz } { foo: rose, bar: jeck }中的foo:baz部分ÿ…...
腾讯云服务器CVM标准型S6详细介绍_性能测评
腾讯云服务器CVM标准型S6实例是最新一代的标准型实例，CPU采用Intel Xeon Ice Lake处理器，主频2.7GHz，睿频3.3GHz，内存采用最新 DDR4，默认网络优化，最高内网收发能力达1900万pps，最高内网带宽可支…...
时间序列预测任务下探索深度学习参数对模型预测性能的影响
时间序列相关的项目在我之前的很多博文中都有涉及，覆盖的数据领域也是比较广泛的，很多任务或者是项目中往往是搭建出来指定的模型之后就基本完成任务了，比较少去通过实验的维度去探索分析不同参数对模型性能的影响，这两天正好有时…...
React Dva项目 简单引入models中的所有JS文件
我们前面接触的 Dva项目 models目录下的文件还要一个一个引入 其实体验并不是很好 而且如果项目很大那就比较麻烦了 我们可以在 models 下创建一个 index.js 文件 编写代码如下 const context require.context("./", false, /\.js$/); export default context.key…...
ROS入门-第 1 章 ROS概述与环境搭建
目录 第 1 章 ROS概述与环境搭建 1.1 ROS简介 1.1.1 ROS概念 1.1.2 ROS设计目标 1.1.3 ROS发展历程 1.3 ROS快速体验 1.3.1 HelloWorld实现简介 1.3.2 HelloWorld（C版） 步骤 1：创建工作空间 步骤 2：创建发布者节点 步骤…...
spring之AOP简单介绍
1.AOP的概念 AOP，Aspect Oriented Programming，面向切面编程，是对面向对象编程OOP的升华。OOP是纵向对一个 事物的抽象，一个对象包括静态的属性信息，包括动态的方法信息等。而AOP是横向的对不同事物的抽象，…...
使用Spark ALS模型 + Faiss向量检索实现用户扩量实例
1、通过ALS模型实现用户/商品Embedding的效果，获得其向量表示 准备训练数据， M (U , I, R) 即 用户集U、商品集I、及评分数据R。 （1）商品集I的选择：可以根据业务目标确定商品候选集，比如TopK热度召回、或…...
Jmeter入门之digest函数 jmeter字符串连接与登录串加密应用
登录请求中加密串是由多个子串连接，再加密之后传输。 参数连接：${var1}${var2}${var3} 加密函数：__digest （函数助手里如果没有该函数，请下载最新版本的jmeter5.0） 函数助手：Options > …...
uni-app实现图片上传功能
效果 代码 <uni-forms-item name"ViolationImg" label"三违照片 :"><uni-file-picker ref"image" limit"1" title"" fileMediatype"image" :listStyles"listStyles" :value"filePathsL…...
golang协程池库tunny实践
前言 线程池大家都听过，其主要解决的是线程频繁创建销毁带来的性能影响，控制线程数量。 go协程理论上支持百万协程并发，协程创建调度的消耗极低，但毕竟也是消耗对吧。 而且协程池可以做一些额外的功能，比如限制并发&…...
Android性能优化—数据结构优化
优化数据结构是提高Android应用性能的重要一环。在Android开发中，ArrayList、LinkedList和HashMap等常用的数据结构的正确使用对APP性能的提升有着重大的影响。 一、ArrayList ArrayList内部使用的是数组，默认大小10，当数组长度不足时&…...
STL模板——vector详解
一、vector对象的定义和初始化方式 vector 中的数据类型 T 可以代表任何数据类型，如 int、string、class、vector（构建多维数组） 等，就像一个可以放下任何东西的容器，因此 vector 也常被称作容器。字符串类型 string …...
国际顶级学术会议ISSTA召开,中山大学与微众银行联合发表区块链最新研究成果
美国当地时间7月17日，软件工程领域顶级会议ISSTA 2023在西雅图正式召开。ISSTA （The 32nd ACM SIGSOFT International Symposium on Software Testing and Analysis ）是软件测试与分析方面最著名的国际会议之一，也是中国计算机学会…...
Android开发从0开始（图形与按钮）
Drawable: drawable是抽象类。包括图片，色块，画板，背景。 drawable-ldpi 存放低分辨率图片。drawable-hdpi 高分辨率。drawable-xxhdpi 超高分辨率。 Android:src”drawable/image” 即可使用 Shape: 形状图形。圆角，矩形等常见几…...
Git入门到精通——保姆级教程（涵盖GitHub、Gitee、GitLab）
文章目录 前言一、Git1.Git-概述1.1.Git-概述-版本控制介绍1.2.Git-概述-分布式版本控制VS集中式版本控制1.3.Git-概述-代码托管中心1.4.Git-概述-安装和客户端的使用 2.Git-命令(常用命令)2.1.Git-命令-设置用户签名2.2.Git-命令-初始化本地库2.3.Git-命令-查看本地库状态2.4.…...
题解 | #J.Permutation and Primes# 2023牛客暑期多校8
J.Permutation and Primes 构造 题目大意 给定一个正整数 n n n ，构造一个 n n n 的排列，使得每对相邻元素的和或差的绝对值为一奇素数 解题思路 两个数的和或差是奇数，那么它们的奇偶性一定是不同的，因此所求排列中&#…...
用vim打开后中文乱码怎么办
Vim中打开文件乱码主要是文件编码问题。用户可以参考如下解决方法。 1、用vim打开.vimrc配置文件 vim ~/.vimrc**注意：**如果用户根目录下没有.vimrc文件就把/etc/vim/vimrc文件复制过来直接用 cp /etc/vim/vimrc ~/.vimrc2、在.vimrc中加入如下内容 set termen…...
自然语言处理: 第六章Transformer- 现代大模型的基石
理论基础 Transformer（来自2017年google发表的Attention Is All You Need (arxiv.org) ），接上面一篇attention之后，transformer是基于自注意力基础上引申出来的结构，其主要解决了seq2seq的两个问题: 考虑了原序列和目…...
C++：std::is_convertible
C++标志库中提供is_convertible，可以测试一种类型是否可以转换为另一只类型： template <class From, class To> struct is_convertible; 使用举例： #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...
【Java学习笔记】Arrays类
Arrays 类 1. 导入包：import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序（自然排序和定制排序）Arrays.binarySearch()通过二分搜索法进行查找（前提：数组是…...
【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密
在实际项目中，用户注册、登录、修改密码等操作，都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输，在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...
高频面试之3Zookeeper
高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个？3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制（过半机制࿰…...
04-初识css
一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...
【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张（Windows/Linux）
要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况，可以通过以下几种方式模拟或触发： 1. 增加CPU负载 运行大量计算密集型任务，例如： 使用多线程循环执行复杂计算（如数学运算、加密解密等）。运行图…...
Python如何给视频添加音频和字幕
在Python中，给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加，包括必要的代码示例和详细解释。 环境准备 在开始之前，需要安装以下Python库：…...
拉力测试cuda pytorch 把 4070显卡拉满
import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试，通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小，增大可提高计算复杂度duration: 测试持续时间（秒&…...
2025季度云服务器排行榜
在全球云服务器市场，各厂商的排名和地位并非一成不变，而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势，对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析： 一、全球“三巨头”…...
保姆级教程：在无网络无显卡的Windows电脑的vscode本地部署deepseek
文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama（有网络的电脑）2.2.3 安装Ollama（无网络的电脑）2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...