【Vue】Re06 组件化
将一个应用页面拆分成若干个可重复使用的组件
一、Vue的组件的使用步骤：
1、创建组件构造器
2、注册组件
3、使用组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="v">
<!-- 3、使用组件 -->
<component-instance></component-instance>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--<script src="./../dependencies/vue.js"></script>-->
<script type="text/javascript"> /* 1、创建一个组件实例 创建需要注入一个JS对象，其中template属性是需要的html模板代码 */
const componentInstance = Vue.extend({
template : '<div><h3>This is a template instance</h3><p>template content</p></div>'
});
/* 2、将组件注册进Vue中 参数1是组件的标签名称，参数2是组件的实例对象 */
Vue.component('component-instance', componentInstance); const v = new Vue({
el : '#v'
});
</script> </body>
</html>
一些简写的使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="v">
<!-- 对模板不需要插入内容可以直接使用自闭和标签 -->
<component-instance/>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--<script src="./../dependencies/vue.js"></script>-->
<script type="text/javascript"> const componentInstance = Vue.extend({
template : /* 可以使用特殊符号``创建模板域编写模板 */
`
<div>
<h3>This is a template instance</h3>
<p>template content</p>
</div>
`
}); Vue.component('component-instance', componentInstance); const v = new Vue({
el : '#v'
});
</script> </body>
</html>
二、全局组件和私有组件：
上述使用的就是全局组件，该组件不需要被Vue实例注册，任何Vue实例都可以使用该组件
/* 创建 */
const componentInstance = Vue.extend({
template :
`
<div>
<h3>This is a template instance</h3>
<p>template content</p>
</div>
`
});
/* 注册 */
Vue.component('component-instance', componentInstance);
私有组件，注册就不是给Vue注册，而是注册到具体的Vue实例中
/* 创建 */
const componentInstance = Vue.extend({
template :
`
<div>
<h3>This is a template instance</h3>
<p>template content</p>
</div>
`
});
/* 注册 */
const vm = new Vue({
el : '#v',
components : {
componentInstance : componentInstance
}
});
三、父子组件：
创建子组件和父组件 -> 子组件可以注册到父组件 -> 父组件再注册到Vue实例
Vue实例相当于同时把父子组件都注册进来了，调用父组件就相当于调用子组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="app">
<parent-comp></parent-comp>
</div>
<!--<script src="./../dependencies/vue-min.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
let childComp = Vue.extend({
template :
`
<div>
<h1>This is a Sub Component</h1>
</div>
`
});
let parentComp = Vue.extend({
template : <!-- 可以在这里嵌套使用组件 -->
`
<div>
<h1>This is a Parent Component</h1>
<child-comp></child-comp>
</div>
`,
components : { /* 在父组件中也需要把组件注册进来 */
childComp
}
});
let vm = new Vue({
el : '#app',
components : { /* 再把父组件注册到这个Vue实例中 */
parentComp
}
});
</script>
</body>
</html>
关于父子组件的一些问题：
如果单独使用子组件在Vue实例中，私有组件仍然需要在Vue实例中注册
反之全局组件则不需要注册就可以使用
注册全局组件的语法糖：
全局组件注册
/* 2.0.x 原版 */
const componentInstance = Vue.extend({
template :
`
<div>
<h3>This is a template instance</h3>
<p>template content</p>
</div>
`
});
Vue.component('component-instance', componentInstance);
// ------------------------------------------------------
/* 3.0.x 方式 */
Vue.component('component-instance', {
template : `
<div>
<h3>This is a template instance</h3>
<p>template content</p>
</div>
`
})
私有组件注册：
/* 2.0.x 原版 */
const componentInstance = Vue.extend({
template :
`
<div>
<h3>This is a template instance</h3>
<p>template content</p>
</div>
`
});
const v1 = new Vue({
el : '#v',
components : {
componentInstance : componentInstance // 使用同名可以直接简写一个 componentInstance
}
});
// -------------------------------------------------------------------------------------
/* 3.0.x 方式 */
const v2 = new Vue({
el : '#v',
components : {
componentInstance : {
template : `
<div>
<h3>This is a template instance</h3>
<p>template content</p>
</div>
`
}
}
});
四、模板剥离解耦：
模板的HTML代码应该独立于组件存在，为了提升可读性和解耦合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="v">
<cpn></cpn>
<cpn2></cpn2>
</div> <!-- 写法一 -->
<script type="text/x-template" id="cpn">
<div>
<h3>这是模板1</h3>
<p>这是内容</p>
</div>
</script>
<!-- 写法二 -->
<template id="cpn2">
<div>
<h3>这是模板2</h3>
<p>这是内容</p>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--<script type="text/javascript" src="../dependencies/vue.js"></script>-->
<script type="text/javascript">
/* 把组件注册 */
const cpn = Vue.component('cpn', {
template: '#cpn'
});
const cpn2 = Vue.component('cpn2', {
template: '#cpn2'
}); const v = new Vue({
el : '#v',
});
</script> </body>
</html>
五、组件与Data函数
解决每个组件自己的属性，数据独立性问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="v">
<cpn></cpn> <btn-test></btn-test> <!-- 保证数据的独立性 -->
<btn-test></btn-test>
<btn-test></btn-test>
<btn-test></btn-test> <!-- 如果要共享直接写data属性中而不是函数 -->
<hr>
<btn-test2></btn-test2>
</div> <template id="cpn">
<div>
<h3>这是组件</h3>
<p>
这是内容
{{txt}}
</p>
</div>
</template> <!-- 为什么组件必须使用函数传递数据？ -->
<!-- 因为组件可以被允许在一个Vue实例中多次出现 -->
<!-- 组件自身所携带的属性数据是否为公用还是独立成一个问题，为了保证数据独立，Vue采取了这样的data函数方式解决 -->
<template id="btn-test">
<div>
<p>
<button @click="decrement()"> - </button>
{{counter}}
<button @click="increment()"> + </button>
</p>
</div>
</template> <template id="btn-test2">
<div>
<p>
<button @click="decrement()"> - </button>
{{counter}}
<button @click="increment()"> + </button>
</p>
</div>
</template> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--<script type="text/javascript" src="../dependencies/vue.js"></script>-->
<script type="text/javascript"> /* 模板具有自己的HTML模板，且属性数据也是独立于Vue实例存在的 */
const cpn = Vue.component('cpn', {
template : '#cpn',
/* Vue实例使用data对象，但是组件则使用data函数进行处理 */
data () {
return { /* 该函数要求必须返回类型为一个对象 */
txt : 'aaa'
}
}
}); const btnTest = Vue.component('btn-test', {
template: '#btn-test',
data () {
return {
counter : 0
}
},
methods : {
increment () {
this.counter ++
},
decrement () {
this.counter --
}
}
}) const btnTest2 = Vue.component('btn-test2', {
template: '#btn-test2',
data : {
counter : 0
},
methods : {
increment () {
data.counter.counter ++
},
decrement () {
data.counter.counter --
}
}
}) const v = new Vue({
el : '#v',
});
</script>
</body>
</html>
六、父子组件通信问题：
父组件 给 子组件传递消息 使用Props属性实现
子组件 给 父组件传递消息 使用$emit对象发送事件
Props属性传递数据：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="v">
<!-- 2、在父组件调用的时候 声明指令进行绑定 -->
<component-instance
v-bind:comp-message="message"
v-bind:comp-movie-list="movieList"
></component-instance>
</div> <template id="componentInstance">
<div>
<h3>这是子组件 {{compMessage}}</h3> <!-- 3、使用mustache语法引用 -->
<p>子组件内容</p>
<ul>
<li v-for="movie in compMovieList">{{movie}}</li>
</ul>
</div>
</template> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--<script type="text/javascript" src="../dependencies/vue.js"></script>-->
<script type="text/javascript"> const componentInstance = Vue.extend({
template : '#componentInstance',
props : ['compMessage', 'compMovieList'], // 1、首先声明 props，数组里面要存放的是的组件的属性变量名称
}) const v = new Vue({
el : '#v',
data : {
/* 父组件的消息数据 */
message : 'hello',
movieList : [
'海王', '海贼王', '疾风传', 'eva'
]
},
components : {
componentInstance : componentInstance
}
});
</script> </body>
</html>
关于Props的几种写法：
1、原始数组写法：
props : ['property1', 'property2', 'property3', ...]
2、对象写法：
属性是变量名称，值是变量类型：
props : {
property1 : dataType1，
property2 : dataType2，
property3 : dataType3，
},
类型除了基本类型之外，还可以是自定义类型
String 字符
Number 数字
Boolean 布尔
Array 数组
Object 对象原型
Date 日期
Function 函数
Symbol
自定义类？
3、变量对象写法：
props : {
ccc : { // 可以再对该属性继续细分
type : Array, // 单独设置类型限制
// default : [ // 设置默认值，在vue2.5.x版本以下可以这样写
// '111',
// '111',
// '111',
// ],
default() { // 建议使用函数进行返回
return [
'111',
'111',
'111',
];
},
required : true // 使用此组件必须传递此属性项
},
bBb : {
type : String,
default() {
return 'null';
}
}
},
关于驼峰标识问题：
在组件使用时v-bind指令必须按照减号分割线处理，指令目前不支持驼峰命名
<div id="v">
<!-- 2、在父组件调用的时候 声明指令进行绑定 -->
<component-instance
v-bind:comp-message="message"
v-bind:comp-movie-list="movieList"
></component-instance>
</div>
子组件传递信息给父组件 $emit：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="v">
<!-- 2、在使用时将事件传递到父组件中, 而子组件使用$emit定义的自定义事件绑定父组件的函数 -->
<cpn-ins v-on:cst="emitTaker"></cpn-ins>
</div> <template id="componentInstance">
<div>
<!-- 通过遍历的每一个c元素获取对象 -->
<button v-for="c in categories" @click="emitEventSenderTest(c)">{{c.name}}</button>
</div>
</template> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
const componentInstance = Vue.extend({
template : '#componentInstance',
data () {
return {
categories : [
{id : 'aaa', name : '分类1'},
{id : 'bbb', name : '分类2'},
{id : 'ccc', name : '分类3'},
{id : 'ddd', name : '分类4'},
{id : 'eee', name : '分类5'},
]
}
},
methods : { /* 可以把当前对象用参数注入到事件的函数中来 */
emitEventSenderTest (thisObject) {
console.log('子组件发送 -> ' + thisObject);
/* 1、通过组件的$emit对象发送事件给父组件 注意接受的事件名称定义使用小写加杠 */
this.$emit('cst', thisObject); // 参数1自定义事件， 参数2传递当前对象
}
}
}); const v = new Vue({
el : '#v',
methods : { /* 3、定义监听接受函数 */
emitTaker(thisObject) {
console.log('父组件接收 -> ' + thisObject);
}
},
components : {
cpnIns : componentInstance
},
})
</script>
</body>
</html>
父子组件的双向绑定：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="v">
<h3>实例变量 {{n1}} {{n2}}</h3>
<cpn v-bind:num1="n1" v-bind:num2="n2" />
</div> <template id="sss">
<div>
<h3>这是组件 {{num1}} {{num2}}</h3>
<p>
这是组件内容 <br> <!-- 当前这样的绑定对子组件有效，但是对父组件的变量绑定是无效的 -->
num1 绑定 <input type="text" v-model="num1"> <br>
num2 绑定 <input type="text" v-model="num2">
</p>
</div>
</template> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
const vm = new Vue({
el : '#v',
data : {
n1 : 100,
n2 : 50
},
components : {
cpn : {
template : '#sss',
props : {
num1 : Number,
num2 : Number
}
}
}
})
</script>
</body>
</html>
结果查看：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="v">
<h3>Vue实例{{n1}} {{n2}}</h3>
<cpn
v-bind:num1="n1"
v-bind:num2="n2"
v-on:num1get="getNum1"
v-on:num2get="getNum2"
/>
</div> <template id="sss">
<div>
<h3>这是组件 {{num1}} {{num2}}</h3>
<p>
这是组件内容 <br> <!-- 当前这样的绑定对子组件有效，但是对父组件的变量绑定是无效的 -->
<!-- num1 绑定 <input type="text" v-model="num1"> <br>-->
<!-- num2 绑定 <input type="text" v-model="num2">--> <!-- 解决方案是不使用v-model，拆分绑定 -->
<!-- num1 绑定 <input type="text" v-bind:value="dNum1" @input="dNum1 = $event.target.value"> <br>-->
<!-- num2 绑定 <input type="text" v-bind:value="dNum2" @input="dNum2 = $event.target.value">--> <!-- 将方法封装成函数 -->
<h3>props:{{num1}}</h3>
<h3>data():{{dNum1}}</h3>
num1 绑定 <input type="text" v-bind:num1="dNum1" @input="num1Input"> <br>
<h3>props:{{num2}}</h3>
<h3>data():{{dNum2}}</h3>
num2 绑定 <input type="text" v-bind:num1="dNum2" @input="num2Input">
</p>
</div>
</template> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
const vm = new Vue({
el : '#v',
data : {
n1 : 100,
n2 : 50
},
methods : {
getNum1(val) { // 父组件则处理接受
// 传入的过程类型发生了转变 console.log(typeof val); 发现确实是String
this.n1 = parseInt(val); // 强转了参数处理
},
getNum2(val) {
this.n2 = parseInt(val);
},
},
computed : { },
components : {
cpn : {
template : '#sss',
props : {
num1 : Number,
num2 : Number
},
data () {
return {
dNum1 : this.num1,
dNum2 : this.num2
}
},
methods : {
num1Input(eventObject) {
this.dNum1 = eventObject.target.value;
this.$emit('num1get', this.dNum1); // 利用外值传递结合emit事件发送出去
},
num2Input(eventObject) {
this.dNum2 = eventObject.target.value;
this.$emit('num2get', this.dNum2);
},
}, } }
})
</script>
</body>
</html>
使用watch实现双向绑定：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="v">
<h3>Vue实例{{n1}} {{n2}}</h3>
<cpn
v-bind:num1="n1"
v-bind:num2="n2"
v-on:num1get="getNum1"
v-on:num2get="getNum2"
/>
</div> <template id="sss">
<div>
<h3>这是组件 {{num1}} {{num2}}</h3>
<p>
这是组件内容 <br> <!-- 当前这样的绑定对子组件有效，但是对父组件的变量绑定是无效的 -->
<!-- num1 绑定 <input type="text" v-model="num1"> <br>-->
<!-- num2 绑定 <input type="text" v-model="num2">--> <!-- 解决方案是不使用v-model，拆分绑定 -->
<!-- num1 绑定 <input type="text" v-bind:value="dNum1" @input="dNum1 = $event.target.value"> <br>-->
<!-- num2 绑定 <input type="text" v-bind:value="dNum2" @input="dNum2 = $event.target.value">--> <!-- 将方法封装成函数 -->
<h3>props:{{num1}}</h3>
<h3>data():{{dNum1}}</h3>
num1 绑定 <input type="text" v-model="dNum1"> <br> <!-- 这里的model绑定的可能是watch里面的函数 -->
<h3>props:{{num2}}</h3>
<h3>data():{{dNum2}}</h3>
num2 绑定 <input type="text" v-model="dNum2">
</p>
</div>
</template> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
const vm = new Vue({
el : '#v',
data : {
n1 : 100,
n2 : 50
},
methods : {
getNum1(val) { // 父组件则处理接受
// 传入的过程类型发生了转变 console.log(typeof val); 发现确实是String
this.n1 = parseInt(val); // 强转了参数处理
},
getNum2(val) {
this.n2 = parseInt(val);
},
},
computed : { },
components : {
cpn : {
template : '#sss',
props : {
num1 : Number,
num2 : Number
},
data () {
return {
dNum1 : this.num1,
dNum2 : this.num2
}
},
watch : { /* 这里函数必须命名为返回变量一致 */
dNum1(newVal, oldVal) { /* 参数是一个新的值和一个旧值 */
this.$emit('num1get', newVal); // 利用外值传递结合emit事件发送出去
},
dNum2(newVal, oldVal) {
this.$emit('num2get', newVal);
},
}
}
}
})
</script>
</body>
</html>
父组件访问子组件：引用方式
Vue还提供了两个封装对象：
$children
$refs
$children演示案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="v">
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
<button @click="showChildComponent">查看子组件数组对象</button>
</div> <template id="sss">
<div>
<h3>我是子组件</h3>
</div>
</template> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
const vm = new Vue({
el : '#v',
data : {
message : 'Hello'
},
methods : {
showChildComponent() {
// console.log(this.$children);
for (let $child of this.$children) { // 遍历可以得到每一个子组件
$child.logMessage();
console.log($child.name);
}
}
},
components : {
cpn : {
template : '#sss',
data() {
return {
name : '子组件name'
}
},
methods: {
logMessage() {
console.log('sss');
}
}
}
}
})
</script> </body>
</html>
$refs获取具体子组件实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="v">
<cpn></cpn>
<cpn></cpn>
<cpn ref="aaa"></cpn> <!-- 使用$ref需要先声明标注 -->
<cpn></cpn>
<button @click="showChildComponent">查看子组件数组对象</button>
</div> <template id="sss">
<div>
<h3>我是子组件</h3>
</div>
</template> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
const vm = new Vue({
el : '#v',
data : {
message : 'Hello'
},
methods : {
showChildComponent() {
// 使用时引用具体值
const aaa = this.$refs.aaa;
console.log(aaa.name);
aaa.logMessage();
}
},
components : {
cpn : {
template : '#sss',
data() {
return {
name : '子组件name'
}
},
methods: {
logMessage() {
console.log('sss');
}
}
}
}
})
</script> </body>
</html>
子组件访问父组件和根组件也提供了一个对象：
this.$parent & this.$root
这里就不再赘述了
【Vue】Re06 组件化的更多相关文章
- VUE.JS组件化
VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...
- vue的组件化运用（数据在两个组件互传，小问题总结）
一.vue的组件化应用 首先,知道有哪些相关的属性需要用到,再慢慢去理解,运用. 1.两个vue页面 2. slot占位符(可用可不用) 3.props内置属性 4.watch监听函数 5.impor ...
- 【06】Vue 之 组件化开发
组件其实就是一个拥有样式.动画.js逻辑.HTML结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue的组件和也做的非常彻底,而且有自己的特色.尤其是她 ...
- Vue中组件化编码使用（实战练习一）
Vue中组件化编码的大致流程(初接触).组件之间的参数传递(最基础的形式).组件之间的配合完成一个需求 1.在Vue中进行组件化编码 1.1.组件化编码流程: (1).拆分静态组件:组件要按照功能点拆 ...
- Vue实现组件化的基本思路
Vue.js(以下简称Vue)是时下流行的前端开发库,一般搭配其插件Vue-Router,Vuex一起使用,行业中称为Vue全家桶. Vue使用了MVVM的理念,将表现层(DOM)和数据层进行了分离, ...
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
- Vue中组件化编码 完成任务的添加、删除、统计、勾选需求（实战练习三完结）
上一个章节实现数据在组件之间的传递 .这一章主要是完成添加任务到任务栏.删除任务栏.统计任务完成情况.主要还是参数在各个组件之间的传递. 上一章节的链接地址:https://blog.csdn.net ...
- Vue中组件化编码使用、实现组件之间的参数传递（实战练习二）
上一章节实现的是静态页面的设计.这一章节实现将数据抽取出来.通过组件间参数的传递来实现 上一章节链接地址:https://blog.csdn.net/weixin_43304253/article/d ...
- vue学习笔记（1）—— 组件化实现todoList
一.环境搭建 1.npm 大型应用时推荐用npm安装,npm能很好的和webpack等模块打包器配合使用.具体安装步骤请参考网上的诸多教程.完成后使用如下命令安装vue. $ npm install ...
- 如何通过 Vue＋Webpack 来做通用的前端组件化架构设计
目录: 1. 架构选型 2. 架构目录介绍 3. 架构说明 4. 招聘消息 目前如果要说比较流行的前端架构哪家强,屈指可数:reactjs.angularjs.emberj ...
随机推荐
- SELinux 基本原理
首发公号:Rand_cs SELinux 基本原理 本文讲述 SELinux 保护安全的基本原理 安全检查顺序 不废话,直接先来看张图 当我们执行系统调用的时候,会首先对某些错误情况进行检查,如果失败 ...
- 使用shell脚本在Linux中管理Java应用程序
目录 前言 一.目录结构 二.脚本实现 1. 脚本内容 2. 使用说明 2.1 配置脚本 2.2 脚本部署 2.3 操作你的Java应用 总结 前言 在日常开发和运维工作中,管理基于Java的应用程序 ...
- post请求方式 - 使用restTemplate而不使用httpClient，headers.setContentType(MediaType.APPLICATION_JSON_UTF8)
public static String doPostForJson(String url, String json,String byteAuthorization) { RestTemplate ...
- kooder安装及本地搜索git仓库代码
kooder安装及本地搜索git仓库代码 需求背景:如果需要从Git代码仓库查询某个配置项做批量的更新替换,如果一个一个找不合适且容易遗漏,需要借助第三方工具来模糊查询来实现. 1.下载及文档地址ht ...
- springboot项目添加logback日志
1.application.yml 配置日志文件路径: logging: config: classpath:logback.xml file: /usr/local/log/projectName/ ...
- java datetime数据类型去掉时分秒
在Java中,如果我们想要表示一个日期而不包括时间(时分秒),我们通常会使用java.time包中的LocalDate类.LocalDate是一个不可变的日期对象,它只包含年.月.日三个字段. 1. ...
- python Django项目以Debug模式启动和外网访问启动
一.Django介绍 介绍: 完善的web框架,包括前端和后端的管理,django项目管理: 管理后台访问:后面补充 前端页面访问:根据app/settings.py文件下配置的访问地址 1.1 项目 ...
- TGI 基准测试
本文主要探讨 TGI 的小兄弟 - TGI 基准测试工具.它能帮助我们超越简单的吞吐量指标,对 TGI 进行更全面的性能剖析,以更好地了解如何根据实际需求对服务进行调优并按需作出最佳的权衡及决策.如果 ...
- 全国产T3+FPGA的SPI与I2C通信方案分享
近年来,随着中国新基建.中国制造2025规划的持续推进,单ARM处理器越来越难胜任工业现场的功能要求,特别是如今能源电力.工业控制.智慧医疗等行业,往往更需要ARM + FPGA架构的处理器平台来实现 ...
- Spark3学习【基于Java】2. Spark-Sql核心概念
SparkSession 从Spark2开始,Spark-SQL引入了SparkSession这个核心类,它是处理DataSet等结构数据的入口.在2.0之前,使用的是spark-core里的Spar ...