個人第一個vue插件 —— vue-justgage示例詳解
前言
去年十月的時候接到一個任務，讓我在vue項目中引入justgage這個插件，具體過程有點艱辛，但最後仍是順利解決了。最近不是特別忙，因此就想把這個插件改形成vue能夠直接使用的樣子。源碼和文檔可在github上查看，也能夠直接使用npm安裝。javascript
這篇文章主要是對justgage的官方示例進行詳細介紹，仔細分析每個示例與用法。html
代碼解析
可在github地址查看源碼，也能夠拉取到本地：vue
git clone https://github.com/Peggy7/vue-justgage.git
而後：java
npm install npm run dev
就能夠啓動項目裏，裏面一共有16個例子，下面就來詳細分析每一個例子。git
1. defaults(基本)
要使用這個插件首先要指定一個id，並在初始化時傳入相應的id名，經過this.$ref來調用draw方法初始化插件，經過傳入配置項來改變插件的外觀。其中還可使用data-屬性名來指定默認值，data-屬性名這種傳值方式會覆蓋實例化時傳入的配置。github
這就是插件最基本最簡單的用法。npm
<template>
<div class="container">
<vue-justgage ref="gg1" id="gg1" class="gauge"></vue-justgage>
<vue-justgage ref="gg2" id="gg2" data-value="25" class="gauge"></vue-justgage>
</div>
</template>
<script>
export default {
data() {
return {
dflt: {
min: 0,
max: 200,
donut: true,
gaugeWidthScale: 0.6,
counter: true,
hideInnerShadow: true
}
}
},
mounted() {
var gg1 = this.$refs.gg1.draw({
id: 'gg1',
value: 125,
title: 'javascript call',
defaults: this.dflt
});
var gg2 = this.$refs.gg2.draw({
id: 'gg2',
title: 'data-attributes',
defaults: this.dflt
});
}
}
</script>
2. Auto Adjust(自動調整)
這個例子並無很特殊的用法，主要是想告訴咱們justgage會自動適配容器的大小，在縮放頁面的時候能夠始終保持很是美觀的樣子。segmentfault
<template>
<div class="container">
<vue-justgage ref="g1" id="g1"></vue-justgage>
<vue-justgage ref="g2" id="g2"></vue-justgage>
<vue-justgage ref="g3" id="g3"></vue-justgage>
<vue-justgage ref="g4" id="g4"></vue-justgage>
<p>
JustGage auto-adjusts to the size of containing element. And to the screen zoom level. And screen density. Nice. This means you’ll get clean, sharp and nice looking gauge at all times. Try zooming the page to see the results.
</p>
</div>
</template>
<script>
export default {
data() {
return {
g1: null,
g2: null,
g3: null,
g4: null
}
},
mounted() {
this.g1 = this.$refs.g1.draw({
id: "g1",
value: this.getRandomInt(0, 100),
min: 0,
max: 100,
title: "Big Fella",
label: "pounds"
});
this.g2 = this.$refs.g2.draw({
id: "g2",
value: this.getRandomInt(0, 100),
min: 0,
max: 100,
title: "Small Buddy",
label: "oz"
});
this.g3 = this.$refs.g3.draw({
id: "g3",
value: this.getRandomInt(0, 100),
min: 0,
max: 100,
title: "Tiny Lad",
label: "oz"
});
this.g4 = this.$refs.g4.draw({
id: "g4",
value: this.getRandomInt(0, 100),
min: 0,
max: 100,
title: "Little Pal",
label: "oz"
});
setInterval(() => {
this.g1.refresh(this.getRandomInt(50, 100));
this.g2.refresh(this.getRandomInt(50, 100));
this.g3.refresh(this.getRandomInt(0, 50));
this.g4.refresh(this.getRandomInt(0, 50));
}, 2500);
}
}
</script>
3. Counter(計數)
若是將counter屬性設置爲true，則value值會從0開始增長到指定值，有一個動畫效果。bash
<template>
<div class="container">
<vue-justgage ref="g1" id="g1" class="gauge"></vue-justgage>
<a href="#" id="g1_refresh" @click="random">Random Refresh</a>
</div>
</template>
<script>
export default {
data() {
return {
g1: null
}
},
mounted() {
this.g1 = this.$refs.g1.draw({
id: "g1",
value: 72,
min: 0,
max: 100,
donut: true,
gaugeWidthScale: 0.6,
counter: true,
hideInnerShadow: true
});
},
methods: {
random() {
this.g1.refresh(this.getRandomInt(0, 100));
}
}
}
</script>
4. Custom Interval(自定義間隔)
咱們能夠隨意的設置最大值和最小值，value的值和顏色根據範圍內的百分比自動調整，若是value超出設定地範圍也不用擔憂，justgage會自動作處理。app
<template>
<div class="container">
<vue-justgage ref="g1" id="g1"></vue-justgage>
<vue-justgage ref="g2" id="g2"></vue-justgage>
<vue-justgage ref="g3" id="g3"></vue-justgage>
<p>
You need to measure, say, between 350 and 980? No problem, just tell it to justGage. Displayed value and color are calculated as a percentage in defined range, with optional min and max labels shown.
</p>
<p>
Also, if displayed value is out of range, relax and kick your feet up - justGage will take care of it for you.
</p>
</div>
</template>
<script>
export default {
data() {
return {
g1: null,
g2: null,
g3: null
}
},
mounted() {
this.g1 = this.$refs.g1.draw({
id: "g1",
value: this.getRandomInt(350, 980),
min: 350,
max: 980,
title: "Lone Ranger",
label: "miles traveled"
});
this.g2 = this.$refs.g2.draw({
id: "g2",
value: 32,
min: 50,
max: 100,
title: "Empty Tank",
label: ""
});
this.g3 = this.$refs.g3.draw({
id: "g3",
value: 120,
min: 50,
max: 100,
title: "Meltdown",
label: ""
});
setInterval(() => {
this.g1.refresh(this.getRandomInt(350, 980));
this.g2.refresh(this.getRandomInt(0, 49));
this.g3.refresh(this.getRandomInt(101, 200));
}, 2500);
}
}
</script>
5. Custom Node(自定義容器節點)
經過parentNode屬性指定容器節點，讓儀表盤可在本身指望的地方展現。
<template>
<div>
<div ref="cont" id="cont" class="container">
<vue-justgage v-show="showNode1" ref="gauge1" class="gauge"></vue-justgage>
<vue-justgage ref="gauge2" id="gauge2" class="gauge"></vue-justgage>
<vue-justgage ref="gauge3" id="gauge3" class="gauge" data-title="#3" data-value="75" data-counter="true"></vue-justgage>
<vue-justgage v-show="showNode4" ref="gauge4" class="gauge" data-title="#4" data-value="100" data-counter="true"></vue-justgage>
</div>
<div class="container">
<button type="button" id="g1_show" @click="showG1">Show G1</button>
<button type="button" id="g4_show" @click="showG4">Show G4</button>
</div>
<div class="container">
<button type="button" id="g1_refresh" @click="refresh(1)">Refresh G1</button>
<button type="button" id="g2_refresh" @click="refresh(2)">Refresh G2</button>
<button type="button" id="g3_refresh" @click="refresh(3)">Refresh G3</button>
<button type="button" id="g4_refresh" @click="refresh(4)">Refresh G4</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
gauge1: null,
gauge2: null,
gauge3: null,
gauge4: null,
showNode1: false,
showNode4: false
}
},
mounted() {
this.gauge2 = this.$refs.gauge2.draw({
id: "gauge2",
title: "#2",
value: 50,
min: 0,
max: 100,
humanFriendly: false,
decimals: 0,
counter: true
});
this.gauge3 = this.$refs.gauge3.draw({
id: "gauge3"
});
},
methods: {
showG1() {
if(this.showNode1) {
return;
}else {
this.showNode1 = true;
this.gauge1 = this.$refs.gauge1.draw({
parentNode: this.$refs.gauge1.$el,
width: 150,
height: 150,
title: "#1",
value: 25,
min: 0,
max: 100,
decimals: 0,
counter: true
});
}
},
showG4() {
if(this.showNode4) {
return;
}else {
this.showNode4 = true;
this.gauge4 = this.$refs.gauge4.draw({
parentNode: this.$refs.gauge4.$el,
width: 150,
height: 150
});
}
},
refresh(index) {
var gauge = {
gauge1: this.gauge1,
gauge2: this.gauge2,
gauge3: this.gauge3,
gauge4: this.gauge4
}
if(gauge[`gauge${index}`]) {
gauge[`gauge${index}`].refresh(this.getRandomInt(0, 100));
}
}
}
}
</script>
6. Custom Sectors(自定義儀表盤顏色)
value值展現的顏色能夠自定義，經過指定customSectors，有3個可選值：color、lo、hi。設置在lo和hi之間的部分顯示爲color。
<template>
<div class="container">
<vue-justgage ref="gg1" id="gg1" class="gauge"></vue-justgage>
<p id="gg1_text">0-50 is green, 51-100 is red</p>
<a href="#" id="gg1_refresh" class="button grey" @click="random">Random Refresh</a>
</div>
</template>
<script>
export default {
data() {
return {
gg1: null
}
},
mounted() {
this.gg1 = this.$refs.gg1.draw({
id: "gg1",
value : 72.15,
min: 0,
max: 100,
decimals: 2,
gaugeWidthScale: 0.6,
customSectors: [{
color : "#00ff00",
lo : 0,
hi : 50
},{
color : "#ff0000",
lo : 50,
hi : 100
}],
counter: true
});
},
methods: {
random() {
this.gg1.refresh(this.getRandomInt(0, 100));
}
}
}
</script>
7. Custom Render Function(自定義值的渲染方式)
value值不止能夠顯示爲數字，還能夠自定義在某個範圍內顯示什麼值或文字。
<template>
<div class="container">
<vue-justgage ref="gg1" id="gg1" style="width: 200px; height: 150px; margin: 0 auto;"></vue-justgage>
<a href="#" id="gg1_refresh" class="button grey" @click="random">Random Refresh</a>
</div>
</template>
<script>
export default {
data() {
return {
gg1: null
}
},
mounted() {
this.gg1 = this.$refs.gg1.draw({
id: "gg1",
value: 50,
min: 0,
max: 100,
title: "Target",
label: "temperature",
textRenderer: this.customValue
});
},
methods: {
customValue(val) {
if (val < 50) {
return 'low';
} else if (val > 50) {
return 'high';
} else if (val === 50) {
return 'ideal';
}
},
random() {
this.gg1.refresh(this.getRandomInt(0, 100));
}
}
}
</script>
8. Customize Style(自定義儀表盤外觀)
若是不滿意justgage的默認樣式，能夠自定義本身喜歡的樣子，經過修改儀表盤寬度，顏色和陰影，級別顏色，標題顏色，值，最小值和最大值等。
<template>
<div class="container">
<vue-justgage ref="g1" id="g1"></vue-justgage>
<vue-justgage ref="g2" id="g2"></vue-justgage>
<vue-justgage ref="g3" id="g3"></vue-justgage>
<vue-justgage ref="g4" id="g4"></vue-justgage>
<vue-justgage ref="g5" id="g5"></vue-justgage>
<vue-justgage ref="g6" id="g6"></vue-justgage>
<p>
Not digging default style? Then mock your own, Picasso! JustGage features bunch of styling options including gauge width, gauge color and shadow, gauge level colors, colors for title, value, min & max etc.
</p>
<p>
Check non-minified version of justgage.js for list of all setup parameters.
</p>
</div>
</template>
<script>
export default {
data() {
return {
g1: null,
g2: null,
g3: null,
g4: null,
g5: null,
g6: null
}
},
mounted() {
this.g1 = this.$refs.g1.draw({
id: "g1",
value: this.getRandomInt(0, 100),
min: 0,
max: 100,
title: "Custom Width",
label: "",
gaugeWidthScale: 0.2
});
this.g2 = this.$refs.g2.draw({
id: "g2",
value: this.getRandomInt(0, 100),
min: 0,
max: 100,
title: "Custom Shadow",
label: "",
shadowOpacity: 1,
shadowSize: 5,
shadowVerticalOffset: 10
});
this.g3 = this.$refs.g3.draw({
id: "g3",
value: this.getRandomInt(0, 100),
min: 0,
max: 100,
title: "Custom Colors",
label: "",
levelColors: [
"#00fff6",
"#ff00fc",
"#1200ff"
]
});
this.g4 = this.$refs.g4.draw({
id: "g4",
value: this.getRandomInt(0, 100),
min: 0,
max: 100,
title: "Hide Labels",
hideMinMax: true
});
this.g5 = this.$refs.g5.draw({
id: "g5",
value: this.getRandomInt(0, 100),
min: 0,
max: 100,
title: "Animation Type",
label: "",
startAnimationTime: 2000,
startAnimationType: ">",
refreshAnimationTime: 1000,
refreshAnimationType: "bounce"
});
this.g6 = this.$refs.g6.draw({
id: "g6",
value: this.getRandomInt(0, 100),
min: 0,
max: 100,
title: "Minimal",
label: "",
hideMinMax: true,
gaugeColor: "#fff",
levelColors: ["#000"],
hideInnerShadow: true,
startAnimationTime: 1,
startAnimationType: "linear",
refreshAnimationTime: 1,
refreshAnimationType: "linear"
});
setInterval(() => {
this.g1.refresh(this.getRandomInt(0, 100));
this.g2.refresh(this.getRandomInt(0, 100));
this.g3.refresh(this.getRandomInt(0, 100));
this.g4.refresh(this.getRandomInt(0, 100));
this.g5.refresh(this.getRandomInt(0, 100));
this.g6.refresh(this.getRandomInt(0, 100));
}, 2500);
}
}
</script>
9. Font Options(字體選項)
儀表盤上的各類字體樣式也能夠自定義。
<template>
<div class="container">
<vue-justgage ref="g1" id="g1" class="gauge"></vue-justgage>
<a href="#" id="g1_refresh" @click="random">Random Refresh</a>
</div>
</template>
<script>
export default {
data() {
return {
g1: null
}
},
mounted() {
this.g1 = this.$refs.g1.draw({
id: "g1",
title: "Font Options",
value: 72,
min: 0,
max: 100,
gaugeWidthScale: 0.6,
counter: true,
titleFontColor: "red",
titleFontFamily: "Georgia",
titlePosition: "below",
valueFontColor: "blue",
valueFontFamily: "Georgia"
});
},
methods: {
random() {
this.g1.refresh(this.getRandomInt(0, 100));
}
}
}
</script>
10. Format Number(格式化數字)
將formatNumber設置爲true的時候，數字會自動格式化，例如10000會自動變成10,000的形式。
<template>
<div class="container">
<vue-justgage ref="gg1" id="gg1" class="gauge"></vue-justgage>
<a href="#" id="gg1_refresh" @click="random">Random Refresh</a>
</div>
</template>
<script>
export default {
data() {
return {
gg1: null
}
},
mounted() {
this.gg1 = this.$refs.gg1.draw({
id: "gg1",
value: 40960,
min: 1024,
max: 1000000,
gaugeWidthScale: 0.6,
counter: true,
formatNumber: true
});
},
methods: {
random() {
this.gg1.refresh(this.getRandomInt(1024, 1000000));
}
}
}
</script>
11. Html5 Data-attribute Setup(data-attribute設置默認值)
除了在option裏指定屬性，還能夠在標籤上使用data-attribute的形式設置默認值。
<template>
<div class="container">
<vue-justgage ref="gg1" id="gg1" class="gauge" data-value="1200" data-min="0" data-max="1000000" data-gaugeWidthScale="0.6"></vue-justgage>
<input type="button" id="gg1_refresh" class="btn" value="Random Refresh" @click="random" />
</div>
</template>
<script>
export default {
data() {
return {
gg1: null
}
},
mounted() {
this.gg1 = this.$refs.gg1.draw({
id: "gg1",
formatNumber: true,
counter: true
});
},
methods: {
random() {
this.gg1.refresh(this.getRandomInt(0, 1000000));
}
}
}
</script>
12. Human Friendly Numbers(人類更容易理解的數字)
若是將humanFriendly設置爲true，數字就會展現爲人類更容易理解的形式，例如10000將會顯示爲10k。
<template>
<div class="container">
<vue-justgage ref="gg1" id="gg1" style="width: 200px; height: 150px;margin: 0 auto;"></vue-justgage>
<a href="#" id="gg1_refresh" class="button grey" @click="random">Random Refresh</a>
</div>
</template>
<script>
export default {
data() {
return {
gg1:null
}
},
mounted() {
this.gg1 = this.$refs.gg1.draw({
id: "gg1",
value: 1024,
min: 0,
max: 10000,
title: "Target",
label: "",
humanFriendly: true,
startAnimationTime: 10000,
refreshAnimationTime: 10000
});
},
methods: {
random() {
this.gg1.refresh(this.getRandomInt(0, 1000000));
}
}
}
</script>
13. Pointer(指針)
自定義指針的樣式，經過配置pointerOptions，可選項有：toplength、bottomlength、bottomwidth、color、stroke、stroke_width、stroke_linecap。
<template>
<div>
<div class="wrapper">
<div class="box">
<vue-justgage ref="g1" id="g1" class="gauge"></vue-justgage>
</div>
<div class="box">
<vue-justgage ref="g2" id="g2" class="gauge"></vue-justgage>
</div>
<div class="box">
<vue-justgage ref="g3" id="g3" class="gauge"></vue-justgage>
</div>
<div class="box">
<vue-justgage ref="g4" id="g4" class="gauge"></vue-justgage>
</div>
</div>
<div class="container">
<button type="button" id="gauge_refresh" @click="refresh">Refresh Gauges</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
g1: null,
g2: null,
g3: null,
g4: null
}
},
mounted() {
this.g1 = this.$refs.g1.draw({
id: 'g1',
value: 65,
min: 0,
max: 100,
symbol: '%',
pointer: true,
gaugeWidthScale: 0.6,
customSectors: [{
color: '#ff0000',
lo: 50,
hi: 100
}, {
color: '#00ff00',
lo: 0,
hi: 50
}],
counter: true
});
this.g2 = this.$refs.g2.draw({
id: 'g2',
value: 45,
min: 0,
max: 100,
symbol: '%',
pointer: true,
pointerOptions: {
toplength: -15,
bottomlength: 10,
bottomwidth: 12,
color: '#8e8e93',
stroke: '#ffffff',
stroke_width: 3,
stroke_linecap: 'round'
},
gaugeWidthScale: 0.6,
counter: true
});
this.g3 = this.$refs.g3.draw({
id: 'g3',
value: 40,
min: 0,
max: 100,
symbol: '%',
donut: true,
pointer: true,
gaugeWidthScale: 0.4,
pointerOptions: {
toplength: 10,
bottomlength: 10,
bottomwidth: 8,
color: '#000'
},
customSectors: [{
color: "#ff0000",
lo: 50,
hi: 100
}, {
color: "#00ff00",
lo: 0,
hi: 50
}],
counter: true
});
this.g4 = this.$refs.g4.draw({
id: 'g4',
value: 70,
min: 0,
max: 100,
symbol: '%',
pointer: true,
pointerOptions: {
toplength: 8,
bottomlength: -20,
bottomwidth: 6,
color: '#8e8e93'
},
gaugeWidthScale: 0.1,
counter: true
});
},
methods: {
refresh() {
this.g1.refresh(this.getRandomInt(0, 100));
this.g2.refresh(this.getRandomInt(0, 100));
this.g3.refresh(this.getRandomInt(0, 100));
this.g4.refresh(this.getRandomInt(0, 100));
}
}
}
</script>
14. Refresh Maximum(設置最大值)
justgage能夠動態的從新設置最大值。
<template>
<div class="container">
<vue-justgage ref="g1" id="g1" class="gauge"></vue-justgage>
<a href="#" id="g1_refresh" class="button grey" @click="random">Random Refresh</a>
<br />
<a href="#" id="g1_setmax100" class="button grey" @click="setMax(100)">Set Max 100</a>
<a href="#" id="g1_setmax200" class="button grey" @click="setMax(200)">Set Max 200</a>
<a href="#" id="g1_setmax400" class="button grey" @click="setMax(400)">Set Max 400</a>
</div>
</template>
<script>
export default {
data() {
return {
g1: null
}
},
mounted() {
this.g1 = this.$refs.g1.draw({
id: "g1",
title: "Max is 100.",
value: 50,
min: 0,
max: 100,
decimals: 0,
gaugeWidthScale: 0.6
});
},
methods: {
random() {
this.g1.refresh(this.getRandomInt(0, 100));
},
setMax(num) {
var text = new Map([
[100, "Max is 100."],
[200, "Whoops, max jumped to 200."],
[400, "Blimey, max blasted to 400!"]
]);
this.g1.refresh(this.g1.originalValue, num);
this.g1.txtTitle.attr({
"text": text.get(num)
});
}
}
}
</script>
15. Responsive Gauges(自適應)
將relativeGaugeSize屬性設置爲true，儀表盤的大小會根據容器大小自適應。
<template>
<div class="container">
<div class="wrapper clear">
<vue-justgage ref="g1" id="g1" class="gauge"></vue-justgage>
<vue-justgage ref="g2" id="g2" class="gauge"></vue-justgage>
<vue-justgage ref="g3" id="g3" class="gauge"></vue-justgage>
</div>
</div>
</template>
<script>
export default {
data() {
return {
}
},
mounted() {
var g1 = this.$refs.g1.draw({
id: "g1",
value: this.getRandomInt(0, 1000),
min: 0,
max: 1000,
relativeGaugeSize: true,
donut: true
});
var g2 = this.$refs.g2.draw({
id: "g2",
value: this.getRandomInt(0, 100),
min: 0,
max: 100,
title: "Very long title",
relativeGaugeSize: true,
donut: true
});
var g3 = this.$refs.g3.draw({
id: "g3",
value: this.getRandomInt(0, 100),
min: 0,
max: 100,
title: "Very long title",
label: "label",
relativeGaugeSize: true,
donut: true
});
}
}
</script>
16. Reverse(反轉最大最小值)
將reverse設置爲true，最大最小值的位置會反過來。
<template>
<div>
<div class="wrapper">
<div class="box">
<vue-justgage ref="g1" id="g1" class="gauge"></vue-justgage>
</div>
<div class="box">
<vue-justgage ref="g2" id="g2" class="gauge"></vue-justgage>
</div>
<div class="box">
<vue-justgage ref="g3" id="g3" class="gauge"></vue-justgage>
</div>
<div class="box">
<vue-justgage ref="g4" id="g4" class="gauge"></vue-justgage>
</div>
</div>
<div class="container">
<button type="button" id="gauge_refresh" @click="refresh">Refresh Gauges</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
g1: null,
g2: null,
g3: null,
g4: null
}
},
mounted() {
this.g1 = this.$refs.g1.draw({
id: 'g1',
value: 65,
min: 0,
max: 100,
reverse: true,
gaugeWidthScale: 0.6,
customSectors: [{
color: '#ff0000',
lo: 50,
hi: 100
}, {
color: '#00ff00',
lo: 0,
hi: 50
}],
counter: true
});
this.g2 = this.$refs.g2.draw({
id: 'g2',
value: 45,
min: 0,
max: 500,
reverse: true,
gaugeWidthScale: 0.6,
counter: true
});
this.g3 = this.$refs.g3.draw({
id: 'g3',
value: 25000,
min: 0,
max: 100000,
humanFriendly : true,
reverse: true,
gaugeWidthScale: 1.3,
customSectors: [{
color: "#ff0000",
lo: 50000,
hi: 100000
}, {
color: "#00ff00",
lo: 0,
hi: 50000
}],
counter: true
});
this.g4 = this.$refs.g4.draw({
id: 'g4',
value: 90,
min: 0,
max: 100,
symbol: '%',
reverse: true,
gaugeWidthScale: 0.1,
counter: true
});
},
methods: {
refresh() {
this.g1.refresh(this.getRandomInt(0, 100));
this.g2.refresh(this.getRandomInt(0, 100));
this.g3.refresh(this.getRandomInt(0, 100000));
this.g4.refresh(this.getRandomInt(0, 100));
}
}
}
</script>
總結
幾乎justgage的全部用法都能在例子中找到相應的展現，若是不是須要深刻研究或掌握插件，簡單的看一看文檔就能夠快速上手。
最後感謝每個使用我寫的插件的人~
有任何問題均可以留言或私信或在github上告訴我。
相關文章
- 1. 開發一個Vue插件
- 2. VUE（一）.創建一個VUE Demo示例
- 3. 初學vue，個人第一個程序
- 4. Vue的第一個實例
- 5. 製做一個vue插件
- 6. vue 封裝一個插件
- 7. ionic 第一個APP示例
- 8. 第一個maven示例-helloworld
- 9. 2、OpenSceneGraph3.4第一個示例
- 10. SpringMVC第一個示例
- 更多相關文章...
- • 第一個Hibernate程序 - Hibernate教程
- • 第一個Spring程序 - Spring教程
- • SpringBoot中properties文件不能自動提示解決方法
- • IntelliJ IDEA安裝代碼格式化插件
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 開發一個Vue插件
- 2. VUE（一）.創建一個VUE Demo示例
- 3. 初學vue，個人第一個程序
- 4. Vue的第一個實例
- 5. 製做一個vue插件
- 6. vue 封裝一個插件
- 7. ionic 第一個APP示例
- 8. 第一個maven示例-helloworld
- 9. 2、OpenSceneGraph3.4第一個示例
- 10. SpringMVC第一個示例