vue中使用echarts来绘制中国地图,NuxtJS制作疫情地图,内有详细注释,我就懒得解释了,vue cli制作疫情地图 代码略有不同哦~~~
我的代码自我感觉----注释一向十分详细,就不用过多解释都是什么了~~
因为最近疫情期间在家实在是没事干,想找点事,就练手了个小demo
首先上 NuxtJs版本代码,这里面
export default {
mode: 'universal',
/*
** Headers of the page
*/
head: {
title: process.env.npm_package_name || '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
/*
** Customize the progress-bar color
*/
loading: { color: '#fff' },
/*
** Global CSS
*/
css: [
],
/*
** Plugins to load before mounting the App
*/
plugins: [
],
/*
** Nuxt.js dev-modules
*/
buildModules: [
// Doc: https://github.com/nuxt-community/eslint-module
'@nuxtjs/eslint-module'
],
/*
** Nuxt.js modules
*/
modules: [
// Doc: https://axios.nuxtjs.org/usage
'@nuxtjs/axios',
'@nuxtjs/pwa',
// Doc: https://github.com/nuxt-community/dotenv-module
'@nuxtjs/dotenv'
],
/*
** Axios module configuration
** See https://axios.nuxtjs.org/options
*/
axios: {
},
/*
** Build configuration
*/
build: {
/*
** You can extend webpack config here
*/
extend (config, ctx) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/,
options: {
fix: true
}
})
}
}
}
helloword.vue
<template>
<div class="hello">
<!-- 初始化echarts需要一个有宽高的盒子 -->
<div id="mychart" ref="mapbox" style="width:100%;min-width:300px;height:100%;min-height:400px" />
</div>
</template> <script>
import echarts from 'echarts'
import 'echarts/map/js/china'
import jsonp from 'jsonp'
// const option1 = {
// xAxis: {
// type: 'category',
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
// },
// yAxis: {
// type: 'value'
// },
// series: [{
// data: [820, 932, 901, 934, 1290, 1330, 1320],
// type: 'line'
// }]
// }
// 使用地图先注册地图
const option2 = {
title: { text: '疫情地图', link: 'http://tangdd.cn', subtext: '全国疫情地图一览表' },
series: [{
data: [], // 用来展示后台给的数据
type: 'map', // 控制是折线图还是地图
map: 'china', // 控制是那个地区地图
label: { show: true, color: 'black', fontSize: 10 }, // 控制对应地区的汉字
itemStyle: {
areaColor: 'pink',
borderColor: '#776a6a'
}, // 控制地图的颜色还有边框
emphasis: {
label: {
color: 'black',
fontSize: 12
},
itemStyle: {
areaColor: '#ccc'
}
}, // 控制鼠标滑过之后背景色和字体颜色
zoom: 1// 控制地图的放大缩小
}],
// 分层次显示地图颜色用下面这个东西,就是地图左下角那个东西
visualMap: [{
zoom: 1,
type: 'piecewise', // 条状
show: true,
splitNumber: 5, // 默认分为几条,就是看你要搞几个间断
pieces: [
{ min: 10000 },
{ min: 1000, max: 9999 },
{ min: 100, max: 999 },
{ min: 10, max: 99 },
{ min: 1, max: 9 }
],
align: 'right', // 控制字和条的位置,默认放到左边
// orient:'horizontal',//控制整块的位置是平铺一大长条还是垂直啥的,默认垂直
// left:40 ,//控制分段位置控制整块的位置
// right:100 //控制分段位置控制整块的位置
// showLabel:false,//这个没什么用处,会隐藏字
// textStyle:{},//这个很明显是搞字体的
inRange: {
symbol: 'rect',
color: ['#ffc9c9', '#9c0505']
}, // 这个控制小图是圆的还是方的啥的还有渐变色
itemWidth: 8,
itemHeight: 4
}]
}
export default {
name: 'HelloWorld',
mounted () {
this.getData()
this.mychart = echarts.init(this.$refs.mapbox)
// mychart.setOption(option1)
this.mychart.setOption(option2)
this.resizeTheChart()
window.addEventListener('resize', this.resizeTheChart)
},
methods: {
resizeTheChart () {
if (this.$refs && this.$refs.mapbox) {
const mychartNode = document.getElementById('mychart')
mychartNode.style.height = mychartNode.offsetWidth * 0.8 + 'px'
this.mychart.resize()
}
},
// 接口采用自'https://renjinhui.github.io/review_vue/dist/index.html#/yqdt'
getData () {
jsonp('https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427&callback=__jp0', {}, (err, data) => {
if (!err) {
// eslint-disable-next-line no-console
console.log(data)
const list = data.data.list.map(item => ({ name: item.name, value: item.value }))
option2.series[0].data = list
// eslint-disable-next-line no-console
console.log(list)
this.mychart.setOption(option2)// 这行代码必须是DOM渲染完成才可以执行哦
}
})
}
}
}
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
index.vue
<template>
<div class="container">
<!-- 头部1 -->
<div class="item item_top">
<img src="../static/img/top.jpg" alt class="w_100">
<div class="index_item_topfont">
<h4>新型冠状病毒</h4>
<h4>疫情实时动态 · 省市地图</h4>
</div>
</div>
<!-- 头部2 -->
<!-- 中间 -->
<div class="font_statement">
<div class="statement_title">
全国疫情状况
</div>
<div class="update_time">
截止{{ mydata1 }}
</div>
</div>
<!-- 中间 -->
<!-- 卡片 -->
<div class="myrow">
<div class="tag">
<p>{{ confirmedCount }}</p>
确诊
</div>
<div class="tag">
<p>{{ suspectedCount }}</p>
疑似
</div>
<div class="tag">
<p>{{ deadCount }}</p>
死亡
</div>
<div class="tag">
<p>{{ curedCount }}</p>
治愈
</div>
</div>
<!-- 卡片 -->
</div>
</template> <script>
// import Logo from '~/components/Logo.vue' export default {
components: {
// Logo
},
data () {
return {
mydata1: '111',
confirmedCount: '',
suspectedCount: '',
curedCount: '',
deadCount: ''
}
},
created () {
this.setDate()
this.getData()
},
methods: {
getData () {
this.$axios.get('https://lab.ahusmart.com/nCoV/api/overall').then((res) => {
if (res.status === 200) {
const _ = res.data.results[0]
this.confirmedCount = _.confirmedCount
this.suspectedCount = _.suspectedCount
this.curedCount = _.curedCount
this.deadCount = _.deadCount
}
// eslint-disable-next-line no-console
console.log(res)
})
},
setDate () {
this.mydata1 = this.getweek()
// eslint-disable-next-line
console.log(this.mydata1)
},
getweek (dateString) {
let da = ''
if (dateString === undefined) {
// 需要修改时间,改为昨天
const aaa = new Date() - 86400000
const now = new Date(aaa)
let nowM = now.getMonth() + 1
// eslint-disable-next-line camelcase
nowM = nowM < 10 ? '0' + nowM : nowM
let nowD = now.getDate()
nowD = nowD < 10 ? '0' + nowD : nowD
da = now.getFullYear() + '-' + nowM + '-' + nowD
// eslint-disable-next-line no-console
console.log('今天系统时间是:' + da)
} else {
da = dateString.toString()
// 日期格式2015-12-30
}
// 下面备用
const date1 = new Date(
da.substring(0, 4),
parseInt(da.substring(5, 7)) - 1,
da.substring(8, 10)
)
// 当前日期
const date2 = new Date(da.substring(0, 4), 0, 1)
// 1月1号
// 获取1月1号星期(以周一为第一天,0周一~6周日)
let dateWeekNum = date2.getDay() - 1
if (dateWeekNum < 0) {
dateWeekNum = 6
}
if (dateWeekNum < 4) {
// 前移日期
date2.setDate(date2.getDate() - dateWeekNum)
} else {
// 后移日期
date2.setDate(date2.getDate() + 7 - dateWeekNum)
}
const d = Math.round((date1.valueOf() - date2.valueOf()) / 86400000)
if (d < 0) {
const date3 = date1.getFullYear() - 1 + '-12-31'
return this.getweek(date3)
} else {
// 得到年数周数
const year = date1.getFullYear()
const week = Math.ceil((d + 1) / 7)
// eslint-disable-next-line no-console
console.log(year + '年第' + week + '周')
return da
}
}
}
}
</script> <style lang='less' scoped>
.container {
width: 100%;
min-width: 12rem;
// max-width: 50rem;
margin: 0 auto;
.item_top {
position: relative;
color: white;
.index_item_topfont {
position: absolute;
color: white;
bottom: 10%;
font-size: 2rem;
left: 1rem;
}
@media screen and (max-width: 550px) {
.index_item_topfont {
left: 0.8rem;
h4 {
font-size: 1rem;
}
}
}
@media screen and (max-width: 280px) {
.index_item_topfont {
left: 0.5rem;
h4 {
font-size: 0.5rem;
}
}
}
}
.font_statement{
position: relative;
text-align: left;
margin: 15px 15px;
padding: 0px 0px 5px 10px;
border-left: .2rem solid #f60;
border-bottom: 1px solid #efefef;
.statement_title{
font-size: 20px;
font-weight: bold;
}
.update_time{
font-size: 12px;
color: #b6b6b6;
font-weight: normal;
vertical-align: middle;
}
}
.myrow{
display: flex;
align-items: center;
justify-content: center;
.tag{
width: 20%;
text-align: center;
border-radius: 4px;
padding: 10px 10px;
background-color: #f3f3f3;
font-size: 15px;
// margin-right: 5px;
p{
color: red;
font-size: 20px;
}
}
}
.myrow .tag:not(:nth-child(4n)) {
margin-right: 5px;
}
}
/* 公共样式1 */
.w_100 {
width: 100%;
}
.font_h1 {
font-size: 2rem;
}
.font_h2 {
font-size: 1.5rem;
}
@media screen and (max-width: 550px) {
.font_h1 {
font-size: 1rem;
}
.font_h2 {
font-size: 0.8rem;
}
}
@media screen and (max-width: 280px) {
.font_h1 {
font-size: 0.5rem;
}
.font_h2 {
font-size: 0.2rem;
}
}
/* 公共样式2*/
</style>
接下来是 vuecli 前端渲染版本
不同之处很细微
top.vue
/* eslint-disable camelcase */
<template>
<div class="container">
<!-- 头部1 -->
<div class="item item_top">
<img src="../assets/img/top.jpg" alt class="w_100">
<div class="index_item_topfont">
<h4>新型冠状病毒</h4>
<h4>疫情实时动态 · 省市地图</h4>
</div>
</div>
<!-- 头部2 -->
<!-- 中间 -->
<div class="font_statement">
<div class="statement_title">
全国疫情状况
</div>
<div class="update_time">
截止{{ mydata1 }}
</div>
</div>
<!-- 中间 -->
<!-- 卡片 -->
<div class="myrow">
<div class="tag">
<p>{{ confirmedCount }}</p>
确诊
</div>
<div class="tag">
<p>{{ suspectedCount }}</p>
疑似
</div>
<div class="tag">
<p>{{ deadCount }}</p>
死亡
</div>
<div class="tag">
<p>{{ curedCount }}</p>
治愈
</div>
</div>
<!-- 卡片 -->
</div>
</template> <script>
// import Logo from '~/components/Logo.vue'
import axios from 'axios' export default {
components: {
// Logo
},
data () {
return {
mydata1: '111',
confirmedCount: '',
suspectedCount: '',
curedCount: '',
deadCount: ''
}
},
created () {
this.setDate()
this.getData()
},
methods: {
getData () {
axios.get('https://lab.ahusmart.com/nCoV/api/overall').then((res) => {
if (res.status === 200) {
const _ = res.data.results[0]
this.confirmedCount = _.confirmedCount
this.suspectedCount = _.suspectedCount
this.curedCount = _.curedCount
this.deadCount = _.deadCount
}
// eslint-disable-next-line no-console
console.log(res)
})
},
setDate () {
this.mydata1 = this.getweek()
// eslint-disable-next-line
console.log(this.mydata1)
},
getweek (dateString) {
let da = ''
if (dateString === undefined) {
// 需要修改时间,改为昨天
const aaa = new Date() - 86400000
const now = new Date(aaa)
let nowM = now.getMonth() + 1
// eslint-disable-next-line camelcase
nowM = nowM < 10 ? '0' + nowM : nowM
let nowD = now.getDate()
nowD = nowD < 10 ? '0' + nowD : nowD
da = now.getFullYear() + '-' + nowM + '-' + nowD
// eslint-disable-next-line no-console
console.log('昨天系统时间是(偷偷减掉了一天嘿嘿):' + da)
} else {
da = dateString.toString()
// 日期格式2015-12-30
}
// 下面备用
const date1 = new Date(
da.substring(0, 4),
parseInt(da.substring(5, 7)) - 1,
da.substring(8, 10)
)
// 当前日期
const date2 = new Date(da.substring(0, 4), 0, 1)
// 1月1号
// 获取1月1号星期(以周一为第一天,0周一~6周日)
let dateWeekNum = date2.getDay() - 1
if (dateWeekNum < 0) {
dateWeekNum = 6
}
if (dateWeekNum < 4) {
// 前移日期
date2.setDate(date2.getDate() - dateWeekNum)
} else {
// 后移日期
date2.setDate(date2.getDate() + 7 - dateWeekNum)
}
const d = Math.round((date1.valueOf() - date2.valueOf()) / 86400000)
if (d < 0) {
const date3 = date1.getFullYear() - 1 + '-12-31'
return this.getweek(date3)
} else {
// 得到年数周数
const year = date1.getFullYear()
const week = Math.ceil((d + 1) / 7)
// eslint-disable-next-line no-console
console.log(year + '年第' + week + '周')
return da
}
}
}
}
</script> <style lang='less' scoped>
*{
padding:0;
margin: 0;
}
h4{ text-align: left;
}
.container {
width: 100%;
min-width: 300px;
// max-width: 50rem;
margin: 0 auto;
.item_top {
position: relative;
color: white;
.index_item_topfont {
position: absolute;
color: white;
bottom: 10%;
font-size: 2rem;
left: 1rem;
}
@media screen and (max-width: 550px) {
.index_item_topfont {
left: 0.8rem;
h4 {
font-size: 1rem;
}
}
}
@media screen and (max-width: 300px) {
.index_item_topfont {
left: 0.5rem;
h4 {
font-size: 0.5rem;
}
}
}
}
.font_statement{
position: relative;
text-align: left;
margin: 15px 15px;
padding: 0px 0px 5px 10px;
border-left: .2rem solid #f60;
border-bottom: 1px solid #efefef;
.statement_title{
font-size: 20px;
font-weight: bold;
}
.update_time{
font-size: 12px;
color: #b6b6b6;
font-weight: normal;
vertical-align: middle;
}
}
.myrow{
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
.tag{
width: 17%;
margin:0.2rem 0;
text-align: center;
border-radius: 4px;
padding: 10px 10px;
background-color: #f3f3f3;
font-size: 15px;
// margin-right: 5px;
p{
color: red;
font-size: 20px;
}
}
}
.myrow .tag:not(:nth-child(4n)) {
margin-right: 5px;
}
}
/* 公共样式1 */
.w_100 {
width: 100%;
}
.font_h1 {
font-size: 2rem;
}
.font_h2 {
font-size: 1.5rem;
}
@media screen and (max-width: 550px) {
.font_h1 {
font-size: 1rem;
}
.font_h2 {
font-size: 0.8rem;
}
}
@media screen and (max-width: 300px) {
.font_h1 {
font-size: 0.5rem;
} .container .myrow .tag{
width: 30%;}
.container .myrow .tag:not(:nth-child(4n)) {
margin-right: 0px;
}
.container .myrow .tag:not(:nth-child(2n)) {
margin-right: 0.4rem;}
.font_h2 {
font-size: 0.2rem;
}
}
/* 公共样式2*/
</style>
helloword.vue
<template>
<div class="hello">
<mytop/>
<!-- 初始化echarts需要一个有宽高的盒子 -->
<div id="mychart" ref='mapbox' style='margin-top:10px;width:100%;min-width:300px;height:100%;min-height:400px'> </div>
</div>
</template> <script>
import mytop from './top.vue'
import echarts from 'echarts'
import 'echarts/map/js/china'
import jsonp from 'jsonp'
const option1 = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
}
// 使用地图先注册地图
const option2 = {
title:{text:'疫情地图',link:'http://tangdd.cn',subtext:'全国疫情地图一览表'},
series:[{
data:[],//用来展示后台给的数据
type:'map',//控制是折线图还是地图
map:'china',//控制是那个地区地图
label:{ show:true ,color: 'black',fontSize:10},//控制对应地区的汉字
itemStyle:{
areaColor:'pink',
borderColor:'#776a6a'
},//控制地图的颜色还有边框
emphasis:{
label:{
color:'black',
fontSize:12
},
itemStyle:{
areaColor:'#ccc'
}
},//控制鼠标滑过之后背景色和字体颜色
zoom:1,//控制地图的放大缩小
}],
//分层次显示地图颜色用下面这个东西,就是地图左下角那个东西
visualMap:[{
zoom:1,
type:'piecewise',//条状
show:true,
splitNumber:5,//默认分为几条,就是看你要搞几个间断
pieces:[
{min:10000},
{min:1000,max:9999},
{min:100,max:999},
{min:10,max:99},
{min:1,max:9}
],
align:'right',//控制字和条的位置,默认放到左边
// orient:'horizontal',//控制整块的位置是平铺一大长条还是垂直啥的,默认垂直
// left:40 ,//控制分段位置控制整块的位置
// right:100 //控制分段位置控制整块的位置
// showLabel:false,//这个没什么用处,会隐藏字
// textStyle:{},//这个很明显是搞字体的
inRange:{
symbol:'rect',
color:['#ffc9c9','#9c0505']
},//这个控制小图是圆的还是方的啥的还有渐变色
itemWidth:8,
itemHeight:4
}]
}
export default {
name: 'HelloWorld',
components: {
mytop
},
mounted(){
this.getData()
this.mychart = echarts.init(this.$refs.mapbox)
// mychart.setOption(option1)
this.mychart.setOption(option2)
this.resizeTheChart()
window.addEventListener("resize", this.resizeTheChart);
},
methods:{
resizeTheChart() {
if (this.$refs && this.$refs.mapbox) {
let mychartNode = document.getElementById('mychart');
mychartNode.style.height = mychartNode.offsetWidth*0.8+'px'
this.mychart.resize();
}
},
// 接口采用自'https://renjinhui.github.io/review_vue/dist/index.html#/yqdt'
getData(){
jsonp('https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427&callback=__jp0',{},(err,data)=>{
if(!err){
console.log(data)
let list = data.data.list.map(item=>({name:item.name,value:item.value}))
option2.series[0].data = list;
console.log(list)
this.mychart.setOption(option2)//这行代码必须是DOM渲染完成才可以执行哦
}
})
}
}
}
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less"> *{
padding:0;
margin: 0;
}
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
不同之处很细微,第一个集成了axios this.$axios.get('https://lab.ahusmart.com/nCoV/api/overall').then((res) => {
第二个需要引入axios axios.get('https://lab.ahusmart.com/nCoV/api/overall').then((res) => {
vue中使用echarts来绘制中国地图,NuxtJS制作疫情地图,内有详细注释,我就懒得解释了,vue cli制作疫情地图 代码略有不同哦~~~的更多相关文章
- vue中使用echarts来绘制世界地图和中国地图
第一步,下载echarts cnpm install echarts --save-dev 第二步,在main.js中全局引入 //引入echarts import echarts from 'ech ...
- 在vue中调用echarts中的地图散点图~
首先!当然是在vue中引入echarts! 命令行 npm install echarts --save 在main.js文件中里引入 import echarts from 'ech ...
- 在vue中使用echarts图表
在vue中使用echarts图表 转载请注明出处:https://www.cnblogs.com/wenjunwei/p/9815290.html 安装vue依赖 使用npm npm instal ...
- Vue中使用ECharts画散点图加均值线与阴影区域
[本文出自天外归云的博客园] 需求 1. Vue中使用ECharts画散点图 2. 在图中加入加均值线 3. 在图中标注出阴影区域 实现 实现这个需求,要明确两点: 1. 知道如何在vue中使用ech ...
- 记录下vue 中引用echarts 出现 "TypeError: Cannot read property 'getAttribute' of undefined"问题
今天做项目,用echarts展示数据 ,自己测试 先测试 了下.写的代码html: <div ref="myChart" style="height:300px;w ...
- vue中使用echarts(vue+vue-cli+axios+jsonp+echarts)
一.安装echarts: cnpm i echarts -D 二.在vue-cli的main.js文件中引用echarts: import charts from 'echarts' Vue.prot ...
- VUE中集成echarts时 getAttribute of null错误
错误 错误场景一: 错误提示: 在运行Vue项目时出现了上述错误,出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的,代码如下: // 基于准备好的dom,初始化echart ...
- vue中使用echarts的两种方法
在vue中使用echarts有两种方法一.第一种方法1.通过npm获取echarts npm install echarts --save 2.在vue项目中引入echarts 在 main.js 中 ...
- 在vue中使用Echarts画曲线图(异步加载数据)
现实的工作中, 数据不可能写死的,所有的数据都应该通过发送请求进行获取. 所以本项目的需求是请求服务器获得二维数组,并生成曲线图.曲线图的横纵坐标均从获得的数据中取得. Echarts官方文档: ht ...
- 在VUE中使用Echarts
第一步:下载echarts npm install echarts --save 第二步:在项目中main.js引入 import echarts from 'echarts' Vue.prototy ...
随机推荐
- 7.pyagem-游戏背景
背景交替滚动 游戏启动后,背景图像不断的向下移动 在视觉上产生角色不断向上移动的错觉 游戏背景不断变化,游戏主角的位置报错不变 实现方案 创建两张背景图 第一张完全和屏幕重合,第二章在屏幕的正上方 ...
- Hexo多台电脑同步
如果换了电脑该如何同步Hexo的源文件?把hexo文件从一个电脑cope到另外一个电脑吗?答案肯定不是这样的,因为这里面有好多依赖包,好几万个文件呢,这样显然不合理. 本文提供一种多台电脑同步源文件的 ...
- Archlinux安装Picgo配置Typora
Typora堪称为markdown界的老大哥,其大名我们多有耳闻,所见即所的就是他的特点.但是在日常使用中,也经常会碰到一些特别的需求,比如:希望图片能够上传到云端. 怎么将markdown即时粘贴的 ...
- python进阶(26)collections标准库
前言 这个模块实现了特定目标的容器,以提供Python标准内建容器dict ,list ,set , 和tuple 的替代选择. 这个模块提供了以下几个函数 函数 作用 namedtuple() 创建 ...
- Docker | 常用命令——排错很有帮助
众所周知,docker 排查问题相较而言是困难的.因此,熟知一些常用命令对我们快速的排查定位问题是非常有帮助的.下面让我们一起来学习一下吧 1.显示docker的系统信息 docker info [r ...
- OpenFeign
OpenFeign-服务间的调用 一.什么是Feign和OpenFeign? 在使用Feign或者OpenFeign前,服务之间的调用路径在函数内部设置: 能不能像controller调用servic ...
- vue引用MarkDown(mavonEditor)编辑器,文档
mavonEditor Install mavon-editor (安装) npm install mavon-editor --save 如何引入: 全局引用: // 全局注册 import Vue ...
- 一个jsqlparse+git做的小工具帮我节省时间摸鱼
背景 前些时间做了个小工具解决了团队内数据库脚本检验&多测试环境自动执行的问题,感觉挺有意思,在这跟大家分享一下. 工具诞生之前的流程是这样: 1.开发人员先在开发环境编写脚本&执行: ...
- Training: ASCII
题目链接:http://www.wechall.net/challenge/training/encodings/ascii/index.php 让我们使用标准的美国信息交换编码格式解下面的ASCLL ...
- Fastjsonfan反序列化(1)
前言 之前只是对FastJson漏洞有简单的一个认知,虽然由于网上fastjson漏洞调试的文章很多,但是真正有着自己的理解并能清楚的讲述出来的文章少之又少.大多文章都是对已知的漏洞调用流程做了大量分 ...