Vue+Vue CLI学习

1、Vue基础

1.1、Vue简介

（1）Javascript框架

（2）简化Dom操作

（3）响应式数据驱动

vue基础；vue-cli;vue-router;vuex;element-ui;vue3

vue文件包括html、css、js

1.2、第一个Vue程序

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。

Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

官方文档： https://cn.vuejs.org/

vue特点

（1）采取组件化模式，提高代码复用率、且让代码更好维护；

（2）声明式编码，让编码人员无需直接操作DOM，提高开发效率。

npm i -g @vue/cli //安装一次vue-cli
//1.基于命令行的方式创建vue项目
vue create project-name
//2.基于图形化界面的方式创建vue项目
vue uicd project-name
npm run serve

举例：

命令式编码

<!--展示人员列表的容器-->
<ul id="list"></ul>
<script>//一些人的数据let persons = [{id:'001',name:'张三',age:18},{id:'002',name:'李四',age:19},{id:'003',name:'王五',age:20}]
//准备html字符串
let htmlstr = ''
//遍历数据拼接html字符串
persons.forEach(p=>{htmlStr +='<li>${p.id} - ${p.name} - ${p.age}</li>'
});
//获取list元素
let list = document.getElementById('list')
//修改内容（亲自操作DOM）
list.innerHTML = htmlStr
</script>

声明式编码

<ul id = 'list'><li v-for = 'p in persons'>{{p.id}}-{{p.name}}-{{p.age}}</li>
</ul>

3、使用 虚拟DOM+优秀的 Diff算法，尽量复用DOM节点。

1.3、vue的安装

1、script标签引入，这也是我们学习中比较常用的一种方式，vue.js文件有生产者和开发者两种版本， 我们初学要使用开发版本， 生产者版本包含了包含完整的警告和调试模式，而开发者版本删除了所有的警告信息，体积更小。

<script type="text/javascript" src="../js/vue.js"></script>

引入这个文件后，就会多了一个Vue的全局对象

介绍 — Vue.js (vuejs.org)

2、CDN方式引入

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

1.4、Vue的初体验

前面我们说过Vue是一个全局的对象，那我们要使用Vue就必须要先new出来一个对象，对这个对象进行一些配置，我们传入一个配置对象作为Vue的构造函数的参数。

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>vue基础1</title><!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
</head><body><script type="text/javascript">Vue.config.productionTip = false//阻止vue启动时生产提示</script><div id = "app">{{ message }}</div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{message:"你好小黑"}})</script>
</body></html>

配置对象中的属性名不能乱写，要按照原有的属性名写。我们先建立了一个div的容器，附上id，id为app，在配#置对象里，我们这样写：

  1. el：element，表示挂载，将容器与vue联系起来，接着我们就可以在容器里使用vue了，也可以用类名挂载。可以支持所有的双标签，单标签不支持，建议使用div。el是用来设置Vue实例挂载（管理）的元素

  2. data:数据对象

    data：顾名思义，既数据，vue能将内部的数据显示在容器中，上面的例子用了插值语法实现，既{{}}(可以理解为模板的语法)，中间放上数据的名字。

    1. Vue中用到的数据定义在data中
    2. data中可以写 复杂类型的数据
    3. 渲染复杂类型数据时，遵守js的 语法即可

注意问题：

（1）Vue实例的作用范围是什么呢？

Vue会管理el选项 命中的元素及其内部的 后代元素

（2）是否可以使用其他的选择器？

可以使用其他的选择器，但是建议使用 ID选择器

（3）是否可以设置其他的dom元素呢？

可以使用其他的双标签，不能使用HTML和 BODY

pnpm build
npm-run-all
//"build":"run-p type-check build-only"

一种可以并行的或顺序的运行多个给定npm脚本的工具。

run-p;//==npm-run-all-s顺序(senquentially)运行npm-scripts
run-s;//==npm-run-all-p并行(parallel)运行npm-scripts

2、本次应用

  • 通过Vue实现常见的网页效果
  • 学习Vue指令，以案例巩固知识点
  • Vue指令指的是，以v-开头的一组特殊语法

（1）内容绑定，事件绑定：v-text，v-html，v-on基础

（2）显示切换，属性绑定：v-show，v-if，v-bind

（3）列表循环，表单元素绑定：v-for，v-on补充，v-model

2.1、v-text指令

设置标签的文本值（textContent）

<div><ul id="app"><h2 v-text = "message+'!'">好棒</h2><h2 v-text = "info+'!'">pretty good</h2><h2>{{ message+"!" }}</h2></ul>
</div>
var app = new Vue({el:"#app",data:{message:"你好，小楠",school:{name:"nannan",mobile:"123456",},campus:["北京校区","山东校区","广东校区","上海校区"],info:"前端教研"}})
  • v-text指令的作用是：设置标签的内容
  • 默认写法会替换全部内容，使用 **差值表达式{{}}**可以替换指定内容
  • 内部支持写 表达式

2.2、v-html指令

设置标签的innerHTML

	<div><h2 v-html="content"></h2><h2 v-text="content"></h2></div>var app = new Vue({el:"#app",data:{content:"<a href = 'http://www.baidu.com'>good</a>"}})

在这里插入图片描述

  • v-html指令的作用是：设置元素的 innerHTML
  • 内容中有 html结构会被解析为 标签
  • v-text指令无论内容是什么，只会解析为文本

2.3、v-on指令基础

2.3.1、

为元素绑定事件

v-on:==@

 <div id="app"><p>v-on 实践</p><input type="button" value="v-on指令" v-on:click="doIt"><input type="button" value="v-on简写" @click="doIt"><input type="button" value="双击事件" @dblclick="doIt"><!-- 每次点击food（即西红柿炒蛋）后面都会加真好吃--><h2 @click = "changeFood">{{ food }}</h2></div>
<script>// 创建Vue实例var app = new Vue({el: "#app",datafood: "西红柿炒蛋",},methods: {doIt: function() {alert("做IT");},changeFood: function() {// console.log(this.food);this.food+="真好吃";}}
</script>

在这里插入图片描述

  • v-on指令的作用是：为元素绑定 事件
  • 事件名不需要写 on
  • 指令简写可以为 @
  • 绑定的方法定义在 methods属性中
  • 方法内部通过 this关键字可以访问定义在 data中数据

2.3.2、补充

传递自定义参数，事件修饰符

常见的修饰符：

https://cn.vuejs.org/v2/api/#v-on

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-on补充</title><div id = "app"><input type="button" value="点击" @click="doIt(666,'lll')"><input type="text" @keyup.enter="sayHi"></div>
</head>
<body><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app= new Vue({el:"#app",methods:{doIt:function(p1,p2){console.log("做IT");},sayHi:function(){alert("吃了吗");}}})</script>
</body>
</html>
  • 事件绑定的方法写成 函数调用的形式，可以传入自定义参数
  • 定义方法时需要定义 形参来接收传入的实参
  • 事件的后面跟上 .修饰符可以对事件进行限制
  • .enter可以限触发的按键为回车
  • 事件修饰符有多种

2.4、计数器

实现逻辑

  1. data中定义数据：比如num
  2. methods中添加两个方法：比如 add(递增),sub(递减)
  3. 使用v-text将num设置给span标签
  4. 使用v-on将add，sub分别绑定为+,-按钮
  5. 累加的逻辑：小于10累加，否则提示
  6. 递减的逻辑：大于0递减，否则提示
<div id="app"><button @click="sub">-</button><span v-text="num"></span><button @click="add">+</button>
</div>
<script>// 创建Vue实例var app = new Vue({el: "#app",datanum: 1,},methods: {add:function(){if(this.num>=10){alert("别点了，最大啦");}else{this.num+=1;}},sub:function(){if(this.num>0){this.num-=1; }else{alert("别点啦，最小啦");}}
</script>

箭头函数没有this，所以箭头函数获取不了this，箭头函数代表的事匿名函数，也就是没有function直接就是一个括号，所以没有this，但是有名函数有function关键字，所以箭头函数没有this

  • 创建vue示例时： el（挂载点）， data（数据）， methods（方法）
  • v-on指令的作用是绑定事件，简写为 @
  • 方法中通过 this，关键字获取 data中的数据

2.5、v-show指令

根据表达式的真假，切换元素的显示和隐藏

  • 原理是修改元素的display，实现显示隐藏
  • 指令后面的内容，最终都会解析为 布尔值
  • 值为 true元素显示，值为 false元素隐藏
  • 数据改变之后，对应元素的显示状态会 同步更新

2.6、v-if指令

根据表达值的真假，切换元素的显示和隐藏（操纵dom元素）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>buedemo2</title>
</head>
<body><div id="app"><input type="button" value="切换显示" @click="toggleIsShow"><h1 v-if="isShow">小楠同学</h1><h1 v-if="temperature<255">hello,beautiful girl</h1>
</div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{isShow:false,temperature:20,},methods:{toggleIsShow:function(){this.isShow = !this.isShow;}}})</script>
</body>
</html>

通过点击切换显示，会切换是否出现小楠同

在这里插入图片描述

  • v-if指令的作用是：根据表达式的真假切换元素的显示状态
  • 本质是通过操纵dom元素来切换显示状态
  • 表达式的值为true，元素存在于dom树中，为false，从dom树种移除
  • 频繁的切换v-show，反之使用v-if，前者的切换消耗小

2.7、v-bind指令

设置元素的属性（比如：src,title,class）

v-bind:属性名 = 表达式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vuedemo2</title><style>.active {border: 2px solid red;}</style>
</head><body><div id="app"><!-- <input type="button" value="切换显示" @click="toggleIsShow"> --><!-- <h1 v-if="isShow">小楠同学</h1> --><h1 v-if="temperature<255">hello,beautiful girl</h1><img v-bind:src="imgsrc" alt=""><br><img v-bind:src="imgsrc" alt="" :title="imgtitle+'!!!'" :class="isShow?'active':''" @click="toggleIsShow"><br><img :src="imgsrc" alt="" :title="imgtitle" :class="{active:isShow}" @click="toggleIsShow"></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el: "#app",data: {imgsrc: "./assets/logo.png",isShow: false,temperature: 20,imgtitle: "heihei",},methods: {toggleIsShow: function () {this.isShow = !this.isShow;}}})</script>
</body></html>

在这里插入图片描述

  • v-bind指令的作用是：为元素绑定属性
  • 完整写法是 v-bind:属性名
  • 简写的话可以直接省略v-bind，只保留:属性名
  • 需要动态的增删class建议使用对象的方式

2.8、案例：图片切换

实现步骤：

  1. 定义图片数组
  2. 添加图片索引
  3. 绑定src属性
  4. 图片切换逻辑
  5. 显示状态切换
<div id = "app"><img src = "imgArr[index]"><a href = "#" @click="prev" v-show="条件">上一张</a><a href = "#" @click="next" v-show="条件">下一张</a>
</div>var app = new Vue({
el:"#app",
data:{
imgArr:[],//路径，路径，，，，，，
idnex:0
},
methods:{
prev:function(){this.index++;},
next:function(){}
}
})

列表数据建议使用数组

2.9、v-for指令

根据数据生成列表结构

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vuedemo2</title><style>.active {border: 2px solid red;}</style>
</head><body><div id="app"><button @click="add">添加数据</button><button @dblclick="remove">双击减少数据</button><!-- <input type="button" value="切换显示" @click="toggleIsShow"> --><!-- <h1 v-if="isShow">小楠同学</h1> --><h1 v-if="temperature<255">hello,beautiful girl</h1><!-- <img v-bind:src="imgsrc" alt=""><br><img v-bind:src="imgsrc" alt="" :title="imgtitle+'!!!'" :class="isShow?'active':''" @click="toggleIsShow"><br><img :src="imgsrc" alt="" :title="imgtitle" :class="{active:isShow}" @click="toggleIsShow">--><ul><li v-for="(item,index) in arr" :title="item">{{ index }}+小楠：{{ item }}</li></ul><h1 v-for="item in objArr" v-bind:title="item.name">{{ item.name }}</h1></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el: "#app",data: {imgsrc: "./assets/logo.png",isShow: false,temperature: 20,imgtitle: "heihei",arr: [1, 2, 3, 4, 5],objArr: [{ name: "joker" },{ name: "rose" }]},methods: {toggleIsShow: function () {this.isShow = !this.isShow;},add:function(){this.objArr.push({name:"xi"});},remove:function(){this.objArr.shift();}}})</script>
</body></html>

在这里插入图片描述

  • v-for指令的作用是：根据数据生成列表结构
  • 数组经常和v-for结合使用
  • 语法是(item,index) in 数据
  • item和index可以结合其他指令一起使用
  • 数组长度的更新会同步到页面上，是响应式的

3、小黑记事本

功能：新增，删除，统计，清空，隐藏

3.1、新增

  1. 生成列表结构（v-for数组）
  2. 获取用户输入（v-model）
  3. 回车，新增数据（v-on .enter添加数据）

小结：

  • 列表结构可以用过 v-for指令结合数据生成
  • v-on结合事件修饰符可以对事件进行限制，比如 .enter
  • v-on在绑定事件时可以传递自定义参数
  • 通过v-model可以快速的设置和获取表单元素的值
  • 基于数据的开发方式

4、网络应用

vue结合网络数据开发应用

axios：功能强大的网络请求库

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios.get(地址?key=value&key2=value2(查询字符串)).then(function(response){},function(err){})
axios.post(地址,(参数对象){key:value,key2:value2}).then(function(response){},function(err){})

4.1、示例axios+vue

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>axios+vue</title>
</head>
<body><div id="app"><input type="button" value="获取笑话" @click="getJoker"><p> {{joke }} </p></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 官网提供的axios的在线地址 --><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>/*** 接口：随机获取一条笑话* 请求地址：https://autumnfish.cn/api/joke* 请求方法：get* 请求参数：无* 响应内容：随机笑话*/var app = new Vue({el:"#app",data:{joke:"很好笑的笑话",},methods:{getJoker:function(){var that = this;// console.log(this.joke); joke会变axios.get("https://autumnfish.cn/api/joke").then(function(response){// console.log(response)console.log(response.data)// console.log(this.joke)that.joke = response.data;},function(err){});}}})</script>
</body>
</html>

点击一次，在屏幕中变一次

在这里插入图片描述

  • axios回调函数中的this已经改变，无法访问到data中数据
  • 把 this保存起来，回调函数中直接使用保存的this即可
  • 和本地应用的最大区别就是改变了 数据来源

4.2、网络应用–天知道

4.2.1、回车查询

  1. 按下回车（v-on .enter）
  2. 查询数据（axios 接口 v-model）
  3. 渲染数据（v-for 数组 that）

天气接口

请求地址：http://wthrcdn.etouch.cn/weather_mini
请求方式：get
请求参数：city（查询的城市名）
响应内容：天气信息
  • 自定义参数可以让代码的复用性更高
  • methods中定义的方法内部，可以通过this关键字点出其他方法

4.2.2、点击查询

5、vue CLI脚手架conmmand-line interface

万物皆组件

5.1、什么是CLI

CLI是 Command-Line Interface 的缩写，也就是命令行界面。是在图形用户界面（GUI）得到普及之前使用最为广泛的用户界面，它通常不支持鼠标，用户通过键盘输入指令，计算机接收到指令后，予以执行。也有人称之为字符用户界面（character user interface, CUI）。

5.2、什么是Vue CLI

Vue CLI是一个基于Vue.js进行快速开发的完整系统，使用Vue脚手架之后，我们开发的页面将是一个完整系统（项目）。

官方文档：[介绍 | Vue CLI (vuejs.org)](https://cli.vuejs.org/zh/guide/)

5.3、Vue CLI优势

  • 通过 @vue/cli 实现的交互式的项目脚手架。bootstrap css js jquery js 通过执行命令方式下载相关依赖。

  • 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。vue页面，vuejs vuerouter axios axios(一条命令)

  • 一个运行时依赖

     (@vue/cli-service)

    该依赖：

    • 可升级；=一条命令=
    • 基于 webpack 构建，并带有合理的默认配置； == webpack 项目打包方式 编译好的项目源码=>部署到服务器上直接使用 ==
    • 可以通过项目内的配置文件进行配置；默认配置文件，通过修改默认的配置文件，达到自己想想要的项目环境
    • 可以通过插件进行扩展。 vue vue-charts elementui

  • 一个丰富的官方插件集合，集成了前端生态中最好的工具。Nodejs{tomcat} Vue VueRouter webpack yarn

  • 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

5.4、第一个vue脚手架项目

#设置环境
npm config set registry https://registry.npm.taobao.org
npm get registry
#https://registry.npm.taobao.org/
npm config set cache "D:/Programming/node_cache"
npm config set prefix "D:/Programming/node_global"

#安装vue-cli
npm install -g @vue/cli
#检查其版本是否正确
vue --version
#升级
npm update -g @vue/clivue create hello-worldnpm install -g @vue/cli-init
#1.创建vue脚手架的第一个项目vue init webpack my-project
#2.创建第一个项目
hello  ------------->项目名-build ----------->用来使用wubpack打包使用build依赖-config ---------->用来做整个项目配置目录-node_modules ---->用来管理项目中国的依赖-src ------------->用来书写vue的源代码[重点]+assets -------->用来存放静态资源components ----->用来书写Vue组件router --------->用来配置项目中的路由App.vue -------->项目中根组件main.js -------->项目中主入口-static ---------->其他静态-.babelrc -------->将es6语法转为es5运行-editorconfig ---->项目编辑配置-.gitignore ------>git版本控制忽略文件-.postcssrc.js --->源码相关js-index.html ------>项目主页-package-lock.json>类似于pom.xml 依赖管理 jquery不建议手动修改-package.json ---->对package.json加锁-README.md ------->项目说明文件#3.如何运行在项目的根目录中执行npm start 运行前端项目
#4.如何访问项目http://localhost:8081
#5.Vue Cli中项目开发方式注意：一切皆组件 一个组件中国，js代码，html代码，css样式1.Vue Cli开发方式是在项目中开发一个一个组件对应一个业务功能模块，日后可以将多个组件组合到一起形成一个端系统2.日后在使用Vue Cli进行开发时不再书写html，编写的是一个个组件（组件后缀是.vue的文件），日后打包时vue cli会将编译成运行的html文件

在这里插入图片描述

在这里插入图片描述

5.5、如何开发vue脚手架

注意：在Vue cli中一切皆组件

<Footer>首字母可以小写

补充知识

  1. export default是用来导出一个模块的主要内容，当在使用它时，正在导出该模块的默认内容，这个默认内容就是任意想要暴露的内容，比如一个组件、一个函数。一个对象等等。//es6暴露当前组件对象

  2. 在Vue中，要求``data要写成函数形式，这样每个组件实例都会调用data函数，返回一个新的数据对象，以确保数据的独立性。而其他选项，如methods，components`不需要被写成函数形式，因为他们不需要返回新的对象。而是直接提供一组方法或计算属性。

  3. 学习Vue之前需要掌握的JavaScript基础知识

    （1）ES6语法规范

    ECMAScript是javascript标准，ES6就是ECMAScript的第6个版本。

    ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

    一个完整的JavaScript实现应该由以下三个部分组成：

    1. ECMAScript：核心
    2. DOM：文档对象模型
    3. BOM：浏览器对象模型

    （2）ES6模块化

    （3）包管理器

    （4）原型、原型链

    原型的作用： 1.数据共享 节约内存内存空间 2.实现继承 原型链

    （5）数组常用方法

    （6）axios框架全称（ajax – I/O – system）：

    • 基于promise用于浏览器和node.js的http客户端，因此可以使用Promise API

    （7）promise

  4. DOM文档对象模型（Document Object Model）

    DOM元素以树状文件表现关系，又称为DOM树

    html是静态的各个元素的集合，JavaScript提供动态的能力，但是又没有直接操纵html的能力，所以引入DOM这个模型去做一个桥梁，让JS能够操纵html的静态元素

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

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

相关文章

如何进行渗透测试以提高软件安全性

如何进行渗透测试以提高软件安全性

对于各种规模的企业和组织来说&#xff0c;软件安全是一个至关重要的问题。随着网络攻击越来越复杂&#xff0c;软件中的漏洞越来越多&#xff0c;确保你的软件安全比以往任何时候都更重要。提高软件安全性的一个有效方法是渗透测试&#xff08;penetration testing&#xff09…
阅读更多...
【python基础学习10课_面向对象、封装、继承、多态】

【python基础学习10课_面向对象、封装、继承、多态】

一、类与对象 1、类的定义 在类的里面&#xff0c;称之为方法。 在类的外面&#xff0c;称之为函数。类&#xff1a;人类&#xff0c;一个族群&#xff0c;是一个群体类的语法规则&#xff1a;class 自定义的类名():属性 -- 变量方法 -- 函数类&#xff0c;首字母大写&#x…
阅读更多...
如何在有/没有备份的情况下恢复华为上已删除的视频？6 个推荐选项

如何在有/没有备份的情况下恢复华为上已删除的视频？6 个推荐选项

“我不小心删除了华为手机上的一堆视频。我怎样才能把它们找回来&#xff1f;我在谷歌上也找不到它们”。——来自知乎 在我们日常生活的喧嚣中&#xff0c;意外时有发生。无论是由于华为手机上的无意删除、恢复出厂设置、病毒感染、数据损坏还是系统故障&#xff0c;这些视频…
阅读更多...
基于单片机的机动车智能远光灯系统设计

基于单片机的机动车智能远光灯系统设计

目 录 摘 要 I Abstract II 引 言 1 1 主要研究内容及总体设计方案 3 1.1 主要研究内容 3 1.2 系统总体方案选择 3 1.3 系统功能的确定 4 2 硬件电路的设计 5 2.1 单片机控制模块设计 5 2.2 液晶显示模块电路设计 7 2.3 远近灯光电路设计 9 2.4 按键电路设计 9 2.5 超声波电路…
阅读更多...
【QA-SYSTEMS】CANTATA-解决Jenkins中build Cantata报错

【QA-SYSTEMS】CANTATA-解决Jenkins中build Cantata报错

【更多软件使用问题请点击亿道电子官方网站查询】 1、 文档目标 解决Jenkins中build Cantata测试项目报找不到license server的错误。 2、 问题场景 在Jenkins中build Cantata测试项目&#xff0c;报错“Failed to figure out the license server correctly”。 3、软硬件环…
阅读更多...
vue+Nodejs+Koa搭建前后端系统（九）-- 上传图片

vue+Nodejs+Koa搭建前后端系统（九）-- 上传图片

web2.0的到来使网页世界正式进入了寒武纪&#xff0c;各式各样的多媒体资源屡见不鲜&#xff0c;上传资源变得刻不容缓&#xff01; 前言 本文是在该系列的基础上&#xff0c;针对前后端代码的修改。 准备 HTTP上传图片时Content-Type值常见的有2种&#xff1a;application…
阅读更多...
java集合(泛型数据结构)

java集合(泛型数据结构)

1.泛型 1.1泛型概述 泛型的介绍 泛型是JDK5中引入的特性&#xff0c;它提供了编译时类型安全检测机制 泛型的好处 把运行时期的问题提前到了编译期间 避免了强制类型转换 泛型的定义格式 <类型>: 指定一种类型的格式.尖括号里面可以任意书写,一般只写一个字母.例如: …
阅读更多...
Vue+SpringBoot打造桃花峪滑雪场租赁系统

Vue+SpringBoot打造桃花峪滑雪场租赁系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 游客服务2.2 雪场管理 三、数据库设计3.1 教练表3.2 教练聘请表3.3 押金规则表3.4 器材表3.5 滑雪场表3.7 售票表3.8 器材损坏表 四、系统展示五、核心代码5.1 查询教练5.2 教练聘请5.3 查询滑雪场5.4 滑雪场预定5.5 新…
阅读更多...
Python接口自动化之cookie、session应用！

Python接口自动化之cookie、session应用！

以下介绍cookie、session原理及在接口自动化中的应用。 HTTP 协议是一种无状态协议&#xff0c;即每次服务端接收到客户端的请求时&#xff0c;都是一个全新的请求&#xff0c;服务器并不知道客户端的历史请求记录&#xff1b;Session 和 Cookie 的主要目的就是为了弥补 HTTP 的…
阅读更多...
Linux之线程概念

Linux之线程概念

目录 一、细粒度划分 1、堆区细粒度划分 2、物理内存和可执行程序细粒度划分 3、虚拟地址到物理地址的转化 二、线程的概念 1、基本概念 2、线程的优点 3、线程的缺点 4、线程异常 5、线程用途 三、Linux下的进程和线程 一、细粒度划分 1、堆区细粒度划分 在语言…
阅读更多...
为什么我建议你2024年一定要入局鸿蒙？

为什么我建议你2024年一定要入局鸿蒙？

自去年发布现象级“爆款”手机Mate 60后&#xff0c;华为就备受关注。小编作为一枚程序员&#xff0c;关注的重心更偏向于技术。华为手机搭载的国产自研的鸿蒙操作系统&#xff08;HarmonyOS&#xff09;&#xff0c;已经成为一个业界的里程碑&#xff0c;是我国国产技术自主化…
阅读更多...
企业如何实现跨部门和员工之间的高效沟通协同？

企业如何实现跨部门和员工之间的高效沟通协同？

在当今高度竞争和信息化的商业环境中&#xff0c;企业内部各部门和员工之间的沟通协同效率直接影响到企业的整体运营效果。那么&#xff0c;企业如何实现各部门和员工之间的高效沟通协同呢&#xff1f; 一、建立有效沟通机制与明确部门职责 要实现各部门和员工间的高效协同&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023