Vue用v-for循环渲染数组数据，数组数据更新时，视图没有更新，filter，和变异方法都试过了，好像都不行，看网上有说是重复实例化vue的原因，但是不太明白。  html是这样的  要实现的是，点击触发but（）方法，然后ajax获取数据，用v-for循环渲染出来。现在的问题是，第一次拿到数据可以正常渲染，当第二次触发方法时，ajax重新获取到新数据，vue中的data也已经改变了，但是页面上没改变。没弄懂怎么回事。

element的选择日期范围，值为一个数组（两个日期元素），如何通过Vue的v-model分别将这个两个元素 绑定到两个属性，如下想通过v-model把两个日期绑定到searchData的reportDateMin和reportDateMax ``` <el-date-picker v-model="？？" @change="dateRangePick" type="daterange" align="center" size="small" style="width:250px;" unlink-panels="true" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" :picker-options="pickerOptions"> </el-date-picker> searchData:{ mrrCode:"",userName:"",status:0,location:"",reportDateMin:"",reportDateMax:"" }, ```

向数组中push了数据, 但是打印的时候为[]数组,但是空数组里面有数据,length为5, 但是打印出来length发现长度为0,这个怎么弄啊？急求？ ``` types: any[] = []; constructor( private router: Router, private typeSrv: TypeService, private arraySrv: ArrayService ) { this.load(); } ngOnInit() { console.log(this.types) } load(): any { this.typeSrv.listType() .pipe(map(res => res.data)) .subscribe(res => { const typeTree = this.arraySrv.arrToTree(res); const typeEnum = this.convert(typeTree); for(const i of typeEnum) { this.types.push(i); } }) } ```

let obj={ name:data.label, property:'Header', propertyType:'', execute:[ {t:'',v:''} ] } this.model = Object.assign({}, obj) this.$nextTick(()=>{ setTimeout(() => { _this.form.setFieldsValue(_.pick(_this.model, 'name', 'property','propertyType','execute')); _this.form.getFieldValue('execute') }) }); 用的UI框架是ant design of vue，execute是个数组，这块设置它的setFieldsValue,一直报错You cannot set a form field before rendering a field associated with the value

求大佬们帮忙看看，是哪儿出问题了 ``` <template> <div> <el-form ref="form" :model="form" label-width="80px" class="form-item-require-lable"> <el-form-item label="任务类型"> <el-select v-model="form.kind" placeholder="请选择您要新建的任务类型"> <el-option label="学习任务" value="xuexi"></el-option> <el-option label="工作任务" value="gongzuo"></el-option> <el-option label="生活任务" value="shenghuo"></el-option> </el-select> </el-form-item> <el-form-item label="任务主题"> <el-input type="textarea" v-model="form.name"></el-input> </el-form-item> <el-form-item label="任务时间"> <el-col :span="11"> <el-date-picker type="datetime" placeholder="选择任务开始日期时间" v-model="form.beginTime" style="width: 100%;"></el-date-picker> </el-col> <el-col class="line" :span="2">-</el-col> <el-col :span="11"> <el-date-picker type="datetime" placeholder="选择任务结束日期时间" v-model="form.endTime" style="width: 100%;"></el-date-picker> </el-col> </el-form-item> <el-form-item label="任务内容"> <el-input type="textarea" v-model="form.content"></el-input> </el-form-item> <el-form-item label="任务标记"> <el-radio-group v-model="form.biaoji"> <el-radio label="重要任务" name="type"></el-radio> <el-radio label="普通任务" name="type"></el-radio> </el-radio-group> </el-form-item> <el-form-item > <el-button type="primary" @click="resetForm(form)">取消</el-button> <el-button type="success" @onclick="submitForm(form)">提交</el-button> </el-form-item> </el-form> <el-dialog> </el-dialog> </div> </template> <script> import Sousuo from './Sousuo.vue' export default { name: 'Xinjian', components:{Sousuo}, props: ['value'], //xinjian_value data() { return { form: { //form要与前面的定义一样 kind: '', name: '', beginTime: '', endTime: '', content: '', biaoji: '', } } }, methods: { SubmitForm(form) { /*this.$api.SubmitForm(data =>{ window.location.reload(); },*/ //this.props.close(); this.xinjian0=false; var data={ kind:form.kind, name:form.name, beginTime:form.beginTime, endTime:form.endTime, content:form.content, biaoji:form.biaoji, } this.tableData.push(data) this.$emit('update',tableData); console.log('submit!'); }, } } </script> <style scoped> .form-item-require-label{ margin: center, } </style> ``` ``` <template> <div> <el-table :data="tabledata" stripe style="width: 100%;"> <el-table-column prop="kind" label="任务类型" width="160" style="height:30px" > </el-table-column> <el-table-column prop="name" label="任务标题" width="160" style="height:30px"> </el-table-column> <el-table-column prop="beginTime" label="起始时间" width="160" style="height:30px"> </el-table-column> <el-table-column prop="endTime" label="结束时间" width="160" style="height:30px"> </el-table-column> <el-table-column prop="content" label="任务内容" width="160" style="height:30px"> </el-table-column> <el-table-column prop="biaoji" label="任务标记" width="160" style="height:30px"> </el-table-column> <el-table-column prop="zhuangtai" label="任务状态" width="160" style="height:30px"> <template slot-scope="scope"> <el-progress :text-inside="false" :stroke-width="8" :percentage="scope.row.percentage" :color="green"> </el-progress> </template> <!--el-progress :percentage="percentage" status="exception"></el-progress--> </el-table-column> <el-table-column label="操作" style="height:30px"> <template slot-scope="scope"> <el-button size="mini" @click="handleEdit(scope.$index,scope.row)">编辑</el-button> <el-button @click="handleDelete(scope.$index, tabledata)" size="small">移除 </el-button> <!--el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> <el-button size="mini" type="danger" @click.native.prevent="handleDelete(scope.$index, tableData)">删除</el-button><scope.row--> </template> </el-table-column> </el-table> <!--渲染v-for--> <el-dialog title="编辑任务" :visible.sync="bianji0" :append-to-body="true"> <Bianjiform :bianjiformData.sync="tabledata" v-bind="tabledata"></Bianjiform> </el-dialog> <el-dialog title="新建任务" :visible.sync="xinjian0" :append-to-body="true"> <Xinjian :xinjian_value="value"></Xinjian> </el-dialog> </div> </template> <script> import Bianjiform from './Bianjiform.vue' import Xinjian from './Xinjian.vue' export default { components: {Bianjiform,Xinjian}, name: 'Taskform', props:['message'], data() { return { tabledata: [{ kind: '学习任务', name: 'vue', beginTime: '2016-05-02', endTime: '2016-05-03', content: '学习vue', biaoji: '重要任务', percentage: 50, }, { kind: '学习任务', name: 'vue', beginTime: '2016-05-02', endTime: '2016-05-03', content: '学习vue', biaoji: '重要任务', percentage: 2, }, { kind: '学习任务', name: 'vue', beginTime: '2016-05-02', endTime: '2016-05-03', content: '学习vue', biaoji: '重要任务', zhuangtai: '完成', }, { kind: '学习任务', name: 'vue', beginTime: '2016-05-02', endTime: '2016-05-03', content: '学习vue', biaoji: '重要任务', percentage: 50, },{ kind: '学习任务', name: 'vue', beginTime: '2016-05-02', endTime: '2016-05-03', content: '学习vue', biaoji: '重要任务', percentage: 100, },{ kind: '学习任务', name: 'vue', beginTime: '2016-05-02', endTime: '2016-05-03', content: '学习vue', biaoji: '重要任务', percentage: 90, }], form: { kind: '', name: '', beginTime: '', endTime: '', content: '', biaoji: '', }, bianji0: false, //xinjian0: false, } }, methods: { handleEdit(index,row){ this.form={ kind:row.kind, name:row.name, beginTime:row.beginTime, endTime:row.endTime, content:row.content, biaoji:row.biaoji, } this.bianji0=true; //this.xinjian0=true; }, handleDelete(index, row) { //console.log(index, row); this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { this.$message({ type: 'success', message: '删除成功!', }); row.splice(index,1); }).catch(() => { this.$message({ type: 'info', message: '已取消删除' }); }); }, } } </script> <style scoped> </style> ```

我遍历数组，让数组内两两相加后log出来的数组显示对的，但是每个index对应的值不一样，这是为什么 原数组(73)  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 40, 0, 60, 85, 125, 0, 0, 40, 110, 0, 70, 110, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 30, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 30, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 110] 遍历后数组(38) [0, 0, 0, 0, 0, 0, 0, 40, 145, 125, 40, 110, 180, 0, 0, 0, 0, 0, 30, 0, 0, 0, 0, 0, 30, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 110, 0, __ob__: Observer] ``` 0: 0 1: 0 2: 0 3: 0 4: 0 5: 0 6: 0 7: 0 8: 40 9: 0 10: 60 11: 0 12: 85 13: 0 14: 0 15: 0 16: 0 17: 0 18: 125 19: 0 20: 0 21: 0 22: 0 23: 0 24: 40 25: 0 26: 0 27: 0 28: 0 29: 0 30: 0 31: 0 32: 0 33: 0 34: 0 35: 0 36: 110 37: 0 ``` ``` 代码 //定义x轴数组 const xAxisTen = [].concat(this.xAixsTimeData) const xAixsTenMinute = xAxisTen.filter((value,index)=>{ if(index%2===0){ return true } }) this.xAixsTotalData = xAixsTenMinute console.log('10 xz',this.xAixsTotalData) //总乘客 const tenMinuteTotal = [].concat(this.resTotalPassenger) console.log('123',tenMinuteTotal) let resTotal = [] let resTotalHead = tenMinuteTotal[0] tenMinuteTotal.filter((item,index,arr)=>{ if(index%2 ===0){ let sumTotal = (arr[index+1]||0)+(arr[index+2]||0); resTotal.push(sumTotal) } }) resTotal.unshift(resTotalHead) this.resTotalPassenger =[] this.resTotalPassenger = [].concat(resTotal) console.log('10 total',this.resTotalPassenger) //出站乘客 const tenMinuteOut = [].concat(this.resOutPassenger) let resOut = [] let resOutHead = tenMinuteOut[0] tenMinuteOut.filter((item,index,arr)=>{ if(index%2 ===0){ let sumOut = (arr[index+1]|| 0)+(arr[index+2]||0); resOut.push(sumOut) } }) resOut.unshift(resOutHead) this.resOutPassenger =[] this.resOutPassenger = [].concat(resOut) console.log('10 out',this.resOutPassenger) //定义 进入的乘客相加 const tenMinuteIn = [].concat(this.resInPassenger) let resIn = [] let resInHead = tenMinuteIn[0] tenMinuteIn.filter((item,index,arr)=>{ if(index%2 ===0){ let sum = (arr[index+1]|| 0)+(arr[index+2]||0); resIn.push(sum) } }) resIn.unshift(resInHead) //console.log(this.resInPassenger) this.resInPassenger =[] this.resInPassenger = [].concat(resIn) console.log('10 in',this.resInPassenger) this.drawPassengerChart() ```

var mycars=new Array("Saab","Volvo","BMW") console.info(typeof mycars);//object console.info(mycars);//["Saab", "Volvo", "BMW"]

<script> 　　var vm=new Vue({ 　　　　el:'#box', 　　　　data:{ 　　　　　　a:1 　　　　}, 　　　　computed:{ 　　　　　　b:{ 　　　　　　　get:function(){ 　　　　　　　　　return this.a+2; 　　　　　　　}, 　　　　　　　set:function(val){ 　　　　　　　　　this.a=val; 　　　　　　　} 　　　　　　} 　　　　} 　　}); 　　document.onclick=function(){ 　　　　vm.b=10; 　　}; </script> 上面的函数，点击页面时，a=10,b=12这是为什么呢？set中的val参数是怎么传过来的？

``` export default { data() { return { colors: [ "#f7797d", "#2C5364", "#40E0D0", "#12c2e9", "#1565C0", "#6b6b83", "#11998e", "#c94b4b", "#00b09b", "#CAC531" ], }; }, mounted() { this.drawChart(); }, methods: { //画图 drawChart() { //建立series1数组，用于存放遍历的series的数据配置信息 var series1 = []; var myChart = this.$echarts.init(document.getElementById("container")); let _that = this; //指定图表的配置项和数据 var option = { color: this.colors, legend: { show: true, orient: "vertical", right: 15, top: 35, itemGap: 30, textStyle: { //图例文字的样式 fontSize: 20 } }, grid: { height: 720, width: 1220, top: 40 }, xAxis: { type: "time", axisLine: { show: true }, axisLabel: { rotate: -11, margin: 20, fontWeight: "bold", fontSize: 14 } }, yAxis: [ { splitLine: { //网格线 lineStyle: { type: "solid" //设置网格线类型 }, show: true //隐藏或显示 }, axisLabel: { fontWeight: "bold", fontSize: 16 }, data: [ "2#回火炉", "1#回火炉", "2#冷水机", "1#清洗机", "4#加热炉", "3#加热炉", "2#加热炉", "1#加热炉" ] } ], //将配置信息数组，赋给series series: series1 }; //加载数据图表 //第二个参数为true的原因是防止多次请求造成数据错乱 //true:覆盖掉之前的配置信息 myChart.setOption(option, true); //显示等待画面 myChart.showLoading(); // 接收后端发送过来的数据 this.$axios({ method: "get", url: "/api/productiton" }) .then(res => { var result = res.data; //隐藏加载动画 myChart.hideLoading(); //循环series内的数据 for (var i = 0; i < result.length; i++) { series1.push({ type: "custom", name: result[i].name, renderItem: function(params, api) { var categoryIndex = api.value(0); var start = api.coord([api.value(1), categoryIndex]); var end = api.coord([api.value(2), categoryIndex]); var height = api.size([0, 1])[1] * 0.6; var rectShape = echarts.graphic.clipRectByRect( { x: start[0], y: start[1] - height / 2, width: end[0] - start[0], height: height }, { x: params.coordSys.x, y: params.coordSys.y, width: params.coordSys.width, height: params.coordSys.height } ); return ( rectShape && { type: "rect", shape: _that.$echarts.graphic.clipRectByRect( { x: start[0], y: start[1] - height / 2, width: end[0] - start[0], height: height }, { x: params.coordSys.x, y: params.coordSys.y, width: params.coordSys.width, height: params.coordSys.height } ), style: api.style() } ); }, itemStyle: { opacity: 1 }, encode: { x: [1, 2], y: 0 }, data: result[i].equipment }); } }) .catch(error => { console.log(error); }); //清空数组，避免多次请求，数据重复添加 series1 = []; } } }; ```

小弟最近写一个程序时需要实现一个在tab栏中切换不同的echarts图标的显示问题：在tab栏切换后再切换回来其父盒子div有大小，但是echarts大小为0x0； 同时自己再测了一下，当我跳转到没有echarts的页面再跳转回有echarts的后echarts能正常显示，但是从一个有echarts页面A跳到另一个有echarts的页面B第一次可以成功，但再从B跳会A时，A中其它元素可以正常显示，但是echarts就是显示不出来，已经卡了好几天了，网上的方法也试了一下不知道是不是自己试的方法对不对，拜托各位大神帮忙看看谢谢！   实现过程是用把echarts放在不同的div中，通过tab按下时捕获的值给current从而让相应的div中的图表显示出来： ``` <div v-if="current === 'month'"> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleAccessBarInit" canvasId="accessBarCharts" ref="accessBarCharts" /> </div> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleBarInit" ref="barCharts" canvasId="bar" /> </div> <div class="wrap1"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleLineInit" ref="lineCharts" canvasId="line" /> </div> </div> <div v-if="current === 'quarter'"> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleAccessBarInit" canvasId="accessBarCharts" ref="accessBarCharts" /> </div> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleBarInit" ref="barCharts" canvasId="bar" /> </div> <div class="wrap1"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleLineInit" ref="lineCharts" canvasId="line" /> </div> </div> ``` 当按下了相应的tab后，会调用相应的获取数据函数： ``` // tab栏切换 handleChangeTabbar(e) { this.current = e.target.key; console.log("按下了tab栏"); console.log(this.current); if(this.current=="seven"){this.getChartData(7);} else if(this.current == "month"){ this.getChartData(30);} else if(this.current == "quarter"){this.getChartData(90)} else if(this.current == "halfyear"){this.getChartData(180)} else if(this.current == "year"){this.getChartData(365)} } ``` 在获取数据函数中最后调用了图表的初始化函数init： ``` async getChartData(typeChange) { const body = { stationId: this.stationId, "access-token": this.accessToken, type:typeChange } console.log(body) const resp = await post('/station/data_statistics', body); console.log(resp) const { code, data } = resp; let barXAxisData = []; let barSeriesData = []; let barAccessXAxisData = []; let barAccessSeriesData = []; let lineXAxisData = []; let lineSeriesData = []; let lineAccessSeriesData = []; let lineTotalSeriesData = []; if (code === 200) { console.log(data) let axleTotalNum = 0; let axleAccessNum = 0; let totalNum = 0; let accessNum = 0; // 遍历各车轴总车数 for(var k = 0, length = data.axleTotalNum.length; k < length; k++){ // 分别将对象中数据提到数组中，然后轴数给x轴，将总数给y轴 barXAxisData.push(data.axleTotalNum[k].axle) barSeriesData.push(data.axleTotalNum[k].num) // 把所有车轴的过车数加起来，在左上角显示过车总数 axleTotalNum = axleTotalNum + data.axleTotalNum[k].num } // 遍历各车轴超车数 for(var k = 0, length = data.axleAccessNum.length; k < length; k++){ barAccessXAxisData.push(data.axleAccessNum[k].axle) barAccessSeriesData.push(data.axleAccessNum[k].num) // 把所有车轴的超车数加起来，在右上角显示超车总数 axleAccessNum = axleAccessNum + data.axleAccessNum[k].num } // 遍历7日中各日过车总数 for(var k = 0, length = data.totalNum.length; k < length; k++){ //把日期存进x轴的数组 lineXAxisData.push(data.totalNum[k].day) // 把具体每日数目存进y轴的数组 lineTotalSeriesData.push(data.totalNum[k].num) // 统计的是7日的过车总数，其实与上面的各轴车过车总数结果一样 totalNum = totalNum + data.totalNum[k].num } // 遍历7日中各日超车总数 for(var k = 0, length = data.excessNum.length; k < length; k++){ console.log(k) // 只统计y轴数据即可，因为其与7日过车数在折线图中一起显示，上面已经有x轴 lineAccessSeriesData.push(data.excessNum[k].num) accessNum = accessNum + data.excessNum[k].num } console.log(lineXAxisData,barSeriesData,barAccessXAxisData,barAccessSeriesData,lineXAxisData,lineSeriesData) // 把折线图中的两个y轴数组存到同一个数组中? lineSeriesData.push(lineAccessSeriesData, lineTotalSeriesData); console.log(lineXAxisData) // 其实这4个变量是两两相等的 this.accessNum = accessNum; this.totalNum = totalNum; this.axleTotalNum = axleTotalNum; this.axleAccessNum = axleAccessNum; } console.log(lineXAxisData, lineSeriesData) this.initBarChart(barXAxisData, barSeriesData,typeChange) this.initAccessBarChart(barAccessXAxisData, barAccessSeriesData,typeChange) this.initLineChart(lineXAxisData, lineSeriesData,typeChange) }, ``` 图表初始函数如下，其中写明了一些图表基础设置并进行setoption： ``` initBarChart(xAxisData, seriesData,typeChange) { if(typeChange==7){ this.barOption = { title: { text: "近七日过车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#2d8cf0', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } } else if(typeChange==30){ this.barOption = { title: { text: "近一月过车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#2d8cf0', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } }else if(typeChange==90){ this.barOption = { title: { text: "近一季过车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#2d8cf0', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } }else if(typeChange==180){ this.barOption = { title: { text: "近半年过车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#2d8cf0', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } } this.$refs.barCharts.init() }, ``` 最后再于图表的html部分中绑定了下面函数进行渲染： ``` handleBarInit (canvas, width, height) { console.log("打印表2宽高"); console.log(this.wdith); console.log(this.height); barChart = echarts.init(canvas, null, { width: width, height: height, }) canvas.setChart(barChart) barChart.setOption(this.barOption,true) return barChart }, ``` 最后附上该页面完整代码，请大家帮忙看看谢谢~ ``` <template> <div class="historyContainer"> <div v-if="current === 'seven'"> <i-row> <i-col span="8" offset="2" i-class="col-class"> <div class="headerCard"> <h4>近七日过车数:</h4> <p>{{totalNum}}</p> </div> </i-col> <i-col span="8" offset="4" i-class="col-class"> <div class="headerCard"> <h4>近七日超车数:</h4> <p>{{accessNum}}</p> </div> </i-col> </i-row> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleAccessBarInit" canvasId="accessBarCharts" ref="accessBarCharts" /> </div> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleBarInit" ref="barCharts" canvasId="bar" /> </div> <div class="wrap1"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleLineInit" ref="lineCharts" canvasId="line" /> </div> </div> <div v-if="current === 'month'"> <i-row> <i-col span="8" offset="2" i-class="col-class"> <div class="headerCard"> <h4>近一月过车数:</h4> <p>{{totalNum}}</p> </div> </i-col> <i-col span="8" offset="4" i-class="col-class"> <div class="headerCard"> <h4>近一月超车数:</h4> <p>{{accessNum}}</p> </div> </i-col> </i-row> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleAccessBarInit" canvasId="accessBarCharts" ref="accessBarCharts" /> </div> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleBarInit" ref="barCharts" canvasId="bar" /> </div> <div class="wrap1"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleLineInit" ref="lineCharts" canvasId="line" /> </div> </div> <div v-if="current === 'quarter'"> <i-row> <i-col span="8" offset="2" i-class="col-class"> <div class="headerCard"> <h4>近一季过车数:</h4> <p>{{totalNum}}</p> </div> </i-col> <i-col span="8" offset="4" i-class="col-class"> <div class="headerCard"> <h4>近一季超车数:</h4> <p>{{accessNum}}</p> </div> </i-col> </i-row> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleAccessBarInit" canvasId="accessBarCharts" ref="accessBarCharts" /> </div> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleBarInit" ref="barCharts" canvasId="bar" /> </div> <div class="wrap1"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleLineInit" ref="lineCharts" canvasId="line" /> </div> </div> <div v-if="current === 'halfyear'"> <i-row> <i-col span="8" offset="2" i-class="col-class"> <div class="headerCard"> <h4>近半年过车数:</h4> <p>{{totalNum}}</p> </div> </i-col> <i-col span="8" offset="4" i-class="col-class"> <div class="headerCard"> <h4>近半年超车数:</h4> <p>{{accessNum}}</p> </div> </i-col> </i-row> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleAccessBarInit" canvasId="accessBarCharts" ref="accessBarCharts" /> </div> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleBarInit" ref="barCharts" canvasId="bar" /> </div> <div class="wrap1"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleLineInit" ref="lineCharts" canvasId="line" /> </div> </div> <div v-if="current === 'year'"> 这是一年 </div> <i-tab-bar fixed="true" :current="current" @change="handleChangeTabbar"> <i-tab-bar-item key="seven" icon="computer" current-icon="computer_fill" title="近一周"></i-tab-bar-item> <i-tab-bar-item key="month" icon="dynamic" current-icon="dynamic_fill" title="近一月"></i-tab-bar-item> <i-tab-bar-item key="quarter" icon="addressbook" current-icon="addressbook_fill" title="近一季"></i-tab-bar-item> <i-tab-bar-item key="halfyear" icon="setup" current-icon="setup_fill" title="近半年"></i-tab-bar-item> <i-tab-bar-item key="year" icon="mine" current-icon="mine_fill" title="近一年"></i-tab-bar-item> </i-tab-bar> </div> </template> <script> import echarts from 'echarts' import mpvueEcharts from 'mpvue-echarts'; import { post } from '@/api/request.js'; let barChart, accessBarChart, lineChart; export default { onLoad(options) { const { stationId, accessToken } = options; this.stationId = stationId; this.accessToken = accessToken; }, data() { return { current:'seven', stationId: '', accessToken: '', echarts, totalNum: 0, accessNum: 0, axleTotalNum: 0, axleAccessNum: 0, // type:7,//暂时默认七天 barOption: null, accessBarOption: null, lineOption: null } }, components: { mpvueEcharts }, mounted() { this.getChartData(7); }, methods: { initBarChart(xAxisData, seriesData,typeChange) { if(typeChange==7){ this.barOption = { title: { text: "近七日过车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#2d8cf0', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } } else if(typeChange==30){ this.barOption = { title: { text: "近一月过车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#2d8cf0', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } }else if(typeChange==90){ this.barOption = { title: { text: "近一季过车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#2d8cf0', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } }else if(typeChange==180){ this.barOption = { title: { text: "近半年过车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#2d8cf0', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } } this.$refs.barCharts.init() }, handleBarInit (canvas, width, height) { console.log("打印表2宽高"); console.log(this.wdith); console.log(this.height); barChart = echarts.init(canvas, null, { width: width, height: height, }) canvas.setChart(barChart) barChart.setOption(this.barOption,true) return barChart }, initAccessBarChart(xAxisData, seriesData,typeChange) { if(typeChange==7){ this.accessBarOption = { title: { text: "近七日超车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#5cadff', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } } else if(typeChange==30){ this.accessBarOption = { title: { text: "近一月超车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#5cadff', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } }else if(typeChange==90){ this.accessBarOption = { title: { text: "近一季超车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#5cadff', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } }else if(typeChange==180){ this.accessBarOption = { title: { text: "近半年超车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#5cadff', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } } this.$refs.accessBarCharts.init() }, handleAccessBarInit (canvas, width, height) { console.log("打印表1宽高"); console.log(this.wdith); console.log(this.height); accessBarChart = echarts.init(canvas, null, { width: width, height: height }) canvas.setChart(accessBarChart) accessBarChart.setOption(this.accessBarOption,true) return accessBarChart }, initLineChart(xAxisData, seriesData,typeChange) { if(typeChange==7){ this.lineOption = { title: { text: "近7日车流量和超车数", textStyle: { fontSize: 14 }, left: 'center' }, tooltip: { show: true, trigger: 'axis', formatter: '日期：{b}\n{a0}: {c1}\n{a1}: {c0}' }, legend: { right: '14', orient: 'vertical', data: [{name:'总数'},{name:"超载数"}] }, grid: { left: 10, right: 20, bottom: 15, top: 50, containLabel: true }, color: ['#5cadff', '#ff9900'], xAxis: { data: xAxisData, triggerEvent : true }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'line', name: '超载数', data: seriesData[0] },{ type: 'line', name: '总数', data: seriesData[1] }] } } else if(typeChange==30){ this.lineOption = { title: { text: "近一月车流量和超车数", textStyle: { fontSize: 14 }, left: 'center' }, tooltip: { show: true, trigger: 'axis', formatter: '日期：{b}\n{a0}: {c1}\n{a1}: {c0}' }, legend: { right: '14', orient: 'vertical', data: [{name:'总数'},{name:"超载数"}] }, grid: { left: 10, right: 20, bottom: 15, top: 50, containLabel: true }, color: ['#5cadff', '#ff9900'], xAxis: { data: xAxisData, triggerEvent : true }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'line', name: '超载数', data: seriesData[0] },{ type: 'line', name: '总数', data: seriesData[1] }] } } else if(typeChange==90){ this.lineOption = { title: { text: "近一季车流量和超车数", textStyle: { fontSize: 14 }, left: 'center' }, tooltip: { show: true, trigger: 'axis', formatter: '日期：{b}\n{a0}: {c1}\n{a1}: {c0}' }, legend: { right: '14', orient: 'vertical', data: [{name:'总数'},{name:"超载数"}] }, grid: { left: 10, right: 20, bottom: 15, top: 50, containLabel: true }, color: ['#5cadff', '#ff9900'], xAxis: { data: xAxisData, triggerEvent : true }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'line', name: '超载数', data: seriesData[0] },{ type: 'line', name: '总数', data: seriesData[1] }] } } else if(typeChange==180){ this.lineOption = { title: { text: "近半年车流量和超车数", textStyle: { fontSize: 14 }, left: 'center' }, tooltip: { show: true, trigger: 'axis', formatter: '日期：{b}\n{a0}: {c1}\n{a1}: {c0}' }, legend: { right: '14', orient: 'vertical', data: [{name:'总数'},{name:"超载数"}] }, grid: { left: 10, right: 20, bottom: 15, top: 50, containLabel: true }, color: ['#5cadff', '#ff9900'], xAxis: { data: xAxisData, triggerEvent : true }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'line', name: '超载数', data: seriesData[0] },{ type: 'line', name: '总数', data: seriesData[1] }] } } this.$refs.lineCharts.init() }, handleLineInit (canvas, width, height) { console.log("打印表3宽高"); console.log(this.wdith); console.log(this.height); lineChart = echarts.init(canvas, null, { width: width, height: height }) canvas.setChart(lineChart) lineChart.setOption(this.lineOption,true) return lineChart }, async getChartData(typeChange) { const body = { stationId: this.stationId, "access-token": this.accessToken, type:typeChange } console.log(body) const resp = await post('/station/data_statistics', body); console.log(resp) const { code, data } = resp; let barXAxisData = []; let barSeriesData = []; let barAccessXAxisData = []; let barAccessSeriesData = []; let lineXAxisData = []; let lineSeriesData = []; let lineAccessSeriesData = []; let lineTotalSeriesData = []; if (code === 200) { console.log(data) let axleTotalNum = 0; let axleAccessNum = 0; let totalNum = 0; let accessNum = 0; // 遍历各车轴总车数 for(var k = 0, length = data.axleTotalNum.length; k < length; k++){ // 分别将对象中数据提到数组中，然后轴数给x轴，将总数给y轴 barXAxisData.push(data.axleTotalNum[k].axle) barSeriesData.push(data.axleTotalNum[k].num) // 把所有车轴的过车数加起来，在左上角显示过车总数 axleTotalNum = axleTotalNum + data.axleTotalNum[k].num } // 遍历各车轴超车数 for(var k = 0, length = data.axleAccessNum.length; k < length; k++){ barAccessXAxisData.push(data.axleAccessNum[k].axle) barAccessSeriesData.push(data.axleAccessNum[k].num) // 把所有车轴的超车数加起来，在右上角显示超车总数 axleAccessNum = axleAccessNum + data.axleAccessNum[k].num } // 遍历7日中各日过车总数 for(var k = 0, length = data.totalNum.length; k < length; k++){ //把日期存进x轴的数组 lineXAxisData.push(data.totalNum[k].day) // 把具体每日数目存进y轴的数组 lineTotalSeriesData.push(data.totalNum[k].num) // 统计的是7日的过车总数，其实与上面的各轴车过车总数结果一样 totalNum = totalNum + data.totalNum[k].num } // 遍历7日中各日超车总数 for(var k = 0, length = data.excessNum.length; k < length; k++){ console.log(k) // 只统计y轴数据即可，因为其与7日过车数在折线图中一起显示，上面已经有x轴 lineAccessSeriesData.push(data.excessNum[k].num) accessNum = accessNum + data.excessNum[k].num } console.log(lineXAxisData,barSeriesData,barAccessXAxisData,barAccessSeriesData,lineXAxisData,lineSeriesData) // 把折线图中的两个y轴数组存到同一个数组中? lineSeriesData.push(lineAccessSeriesData, lineTotalSeriesData); console.log(lineXAxisData) // 其实这4个变量是两两相等的 this.accessNum = accessNum; this.totalNum = totalNum; this.axleTotalNum = axleTotalNum; this.axleAccessNum = axleAccessNum; } console.log(lineXAxisData, lineSeriesData) this.initBarChart(barXAxisData, barSeriesData,typeChange) this.initAccessBarChart(barAccessXAxisData, barAccessSeriesData,typeChange) this.initLineChart(lineXAxisData, lineSeriesData,typeChange) }, // tab栏切换 handleChangeTabbar(e) { this.current = e.target.key; console.log("按下了tab栏"); console.log(this.current); if(this.current=="seven"){this.getChartData(7);} else if(this.current == "month"){ this.getChartData(30);} else if(this.current == "quarter"){this.getChartData(90)} else if(this.current == "halfyear"){this.getChartData(180)} else if(this.current == "year"){this.getChartData(365)} } } } </script> <style> .historyContainer{ width: 100%; height: 100%; } .headerCard{ display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 30px; border: 1px solid #ccc; margin-top: 10px; padding-top: 10px; padding-bottom: 10px; font-size: 14px; } .wrap{ margin-top: 20px; /* width:100%; */ width: 380px; height: 400px; } .wrap1{ margin-top: 20px; /* width:100%; */ width: 380px; height: 400px; margin-bottom: 50px } </style> ```

<div class="post-text" itemprop="text"> <p><a href="https://i.stack.imgur.com/W5hPx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/W5hPx.png" alt="enter image description here"></a>I want to display all of my images that is displayed on my database in one ROW. The images are stores in an array in my database so it is in one ROW. Currently in my code the image is not showing and it is UNAVAILABLE </p> <p>Here is my <strong><em>CONTROLLER</em></strong></p> <p><strong><em>Storing Data</em></strong></p> <pre><code> $this-&gt;validate($request, [ 'promotion_image' =&gt; 'required' ]); if ($request-&gt;has('promotion_image')) { //Handle File Upload $promotion = []; foreach ($request-&gt;file('promotion_image') as $key =&gt; $file) { // Get FileName $filenameWithExt = $file-&gt;getClientOriginalName(); //Get just filename $filename = pathinfo( $filenameWithExt, PATHINFO_FILENAME); //Get just extension $extension = $file-&gt;getClientOriginalExtension(); //Filename to Store $fileNameToStore = $filename.'_'.time().'.'.$extension; //Upload Image $path = $file-&gt;storeAs('public/promotion_images',$fileNameToStore); array_push($promotion, $fileNameToStore); } $fileNameToStore = serialize($promotion); } else { $fileNameToStore='noimage.jpg'; } if (count($promotion)) { $implodedPromotion = implode(' , ', $promotion); $promotionImage = new Promotion; $promotionImage-&gt;promotion_image = $implodedPromotion; $promotionImage-&gt;save(); return redirect('/admin/airlineplus/promotions')-&gt;with('success', 'Image Inserted'); } return redirect('/admin/airlineplus/promotions')-&gt;with('error', 'Something went wrong.'); </code></pre> <p>Here is my <strong><em>VIEW</em></strong></p> <pre><code> @foreach($promotions as $promotion) &lt;tr&gt; &lt;th&gt;&lt;img src="{{ asset('storage/promotion_images/' . $promotion-&gt;promotion_image) }}" style="width:50px;height:50px;"&gt;&lt;/th&gt; @endforeach </code></pre> </div>

使用Vue.js做瀑布流布局时，在mounted中直接调用waterFall函数，页面上图片布局是乱的，设置了setTimeout延迟0ms渲染也不起作用。 在safari和chrome上页面正常了，设置延迟100ms，页面加载后布局正常，但是明显的可以看到布局的变化过程，效果不好，延迟值再设置低一些，就不起作用； 在火狐浏览器，要设置延迟150ms以上才起作用，而且也是可以看到页面布局的变化过程，体验不好。 求各位大师指点明路。 ```， <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../../../vue.js"></script> <style> *{margin: 0;padding: 0} #main{position: relative;margin:0 auto;} #main::after{content: '';display: block;height: 0;clear: both;visibility: hidden;} .pic{float: left;padding: 15px 0 0 15px;} .pic img{padding: 10px;width: 165px;height: auto;border: 1px solid #ccc;border-radius: 5px;box-shadow: 0 0 5px #ccc;} </style> </head> <body> <div id="main"> <div class="pic" v-for='img in images'> <img :src="img"> </div> </div> <script type="text/javascript"> var vm = new Vue({ el : '#main' , data : { images:[ 'images/0.jpg','images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg','images/6.jpg','images/7.jpg','images/8.jpg','images/9.jpg', 'images/10.jpg','images/11.jpg','images/12.jpg','images/13.jpg','images/14.jpg','images/15.jpg','images/16.jpg','images/17.jpg','images/18.jpg','images/19.jpg', 'images/20.jpg','images/21.jpg','images/22.jpg','images/23.jpg','images/24.jpg','images/25.jpg','images/26.jpg','images/27.jpg','images/28.jpg','images/29.jpg', 'images/30.jpg','images/31.jpg','images/32.jpg','images/33.jpg','images/34.jpg','images/35.jpg','images/36.jpg' ] }, mounted:function(){ var _this = this ; setTimeout(function(){ _this.waterFall('main','pic'); },0); //safari浏览器下必须迟延30ms执行waterFall，布局才会正常渲染，其他浏览器下设置为0即可。 }, methods:{ getByClass:function(oParent,clsName){ return oParent.getElementsByClassName(clsName); }, waterFall:function(Parent,clsName){ var _this = this ; var oParent = document.getElementById(Parent); var oBoxs = _this.getByClass(oParent,clsName); var oBoxW = oBoxs[0].offsetWidth ; //获取每列的宽度 var pageW = document.documentElement.clientWidth ; var cols = Math.floor(pageW / oBoxW) ; //判断页面列数 oParent.style.cssText = 'width:' + cols*oBoxW +'px;'; //设定main的宽度并居中 var arr = [] ; //用于存放每列的高度 for(var i=0;i<oBoxs.length;i++){ if( i<cols ){ arr.push(oBoxs[i].offsetHeight); }else { var minH = Math.min.apply('null',arr); //求出高度最低列的值 var index = _this.getMinIndex(arr,minH) ; //高度最低列的索引值 oBoxs[i].style.position = 'absolute' ; oBoxs[i].style.top = minH + 'px' ; oBoxs[i].style.left = oBoxs[index].offsetLeft + 'px' ; arr[index] += oBoxs[i].offsetHeight ; //更新数组中每列的高度 } } }, getMinIndex:function(arr,value){ //获取数组arr中，值为value的索引值 for(var i=0;i<arr.length;i++){ if(arr[i] == value){ return i ;} } } }, }); </script> </body> </html> ```

 created(){ for(let i in this.columnar){ this.Xdata.push(this.columnar[i].itemName) this.ydata.push(this.columnar[i].deviceNum) } this.setHistogram() }, mounted(){ window.addEventListener('resize',()=>{ this.myEcharts.resize() }) this.setHistogram() }, setHistogram(){ this.myEcharts = this.$echarts.init(document.getElementById('myEcharts')) // window.onresize = myEcharts.resize; let option = { title:{ text:'设备区域分布', left:'center', top:20, }, legend: { data:['设备数量'], // left:'right', right:60, top:150 }, tooltip:{ trigger: 'axis', axisPointer : { type : 'shadow' } }, xAxis : [ { type : 'category', data : this.Xdata } ], yAxis : [ { type : 'value' } ], series : [ { name:'设备数量', type:'bar', data:this.ydata } ] } this.myEcharts.setOption(option,true) },

 以上是页面js 下面是报错 

在ajax中两个数组，分别是arr1，arr2；怎样将数组分别传递到echarts中的nodes:[]和links:[]中？求详细源码! 部分源码 ``` <div id="main" style="height:500px;"></div> <script src="./js/echarts.js" ></script> <script src="./js/jquery-1.8.3.min.js" ></script> <script> var arr1 = []; var arr2 = []; $.ajax({ type:"POST", async:false, url:"mapdata.php", dataType:"json", success: function(result){ var str = result; for (var i = 0; i < str.length; i++) { arr1.push("{"+"category:"+str[i].category,"name:'"+str[i].name+"'","value:"+str[i].value+"}"); } //document.write(arr1); for (var i = 0; i < str.length; i++) { arr2.push("{"+"source:'"+str[i].source+"'","target:'"+str[i].target+"'","weight:"+str[i].weight,"name:'"+str[i].name_nexus+"'"+"}"); } //document.write(arr2); }, error:function(errorMsg){ alert("请求数据失败!"); }, }); require.config({ paths:{ echarts:'./js' } }); require( [ 'echarts', 'echarts/chart/force' ], function(ec){ var myChart = ec.init(document.getElementById("main")); var option = { title : { text: '人物关系：葛优', x:'right', y:'bottom' }, tooltip : { trigger: 'item', formatter: '{a} : {b}' }, legend: { x: 'left', data:['家人','朋友'] }, series : [ { type:'force', name : "人物关系", ribbonType: false, categories : [ { name: '人物' }, { name: '家人' }, { name:'朋友' } ], itemStyle: { normal: { label: { show: true, textStyle: { color: '#333' } }, nodeStyle : { brushType : 'both', borderColor : 'rgba(255,215,0,0.4)', borderWidth : 1 }, linkStyle: { type: 'curve' } }, emphasis: { label: { show: false }, nodeStyle : { //r: 30 }, linkStyle : {} } }, useWorker: false, minRadius : 15, maxRadius : 25, gravity: 1.1, scaling: 1.1, roam: 'move', nodes:[ arr1 ], links : [ ] } ] }; myChart.setOption(option); } ); </script> ``` arr1值为  arr2值为

 出题章节后面的下拉框里面选中的值，在其他的下拉列表中剔除 例如，在第一个select选中Java，其余的都不显示Java选项，包括新添加的部分 或者说在点击保存的时候校验一下select的选中值不能有重复的，如果有就提示用户哪几个重复 代码部分如下 ```vue <el-dialog :title="titleDialog" :visible="dialogFormSection" :before-close="cancelSection" width="1000px"> <el-form :model="formSection" :rules="sectionRules" ref="formSection"> <el-form-item label="选择题型：" :label-width="labelWidth" prop="questionType"> <el-select v-model="formSection.questionType" @change="selectQuestionType"> <el-option v-for="item in questionTypeOptions" :key="item.id" :label="item.name" :value="item.id"></el-option> </el-select> </el-form-item> <el-form-item label="部分名称：" :label-width="labelWidth" prop="sectionName"> <el-input v-model="formSection.sectionName" style="width: 500px"></el-input> </el-form-item> <el-form-item label="总题目数量：" :label-width="labelWidth" prop="questionScore" id="allQuestion-content"> <span>{{allQuestionNum}}</span> <span style="margin-left: 50px"> 每题分数 <el-input v-model="formSection.questionScore" style="width: 80px;margin-left: 10px"></el-input> 分 </span> <span style="margin-left: 50px">总分数：{{allScore}}分</span> <el-button type="text" style="float: right" @click="addProblemRules">添加出题章节</el-button> </el-form-item> <div v-for="(item,index) in sectionData" :key="item.id" class="addSection-content"> <div class="content"> <div style="margin-top: 10px"> {{index+1}}、出题章节(多选)： </div> </div> <div class="content"> <el-select style="width: 170px" multiple collapse-tags v-model="item.repositorySectionIdList" @change="changeRepositorySectionId(item.repositorySectionIdList, index)"> <el-option v-for="item1 in courseChapterOptions" :key="item1.id" :value="item1.id" :label="item1.name"></el-option> </el-select> </div> <div class="content"><div style="margin-top: 10px">出题数量：{{item.partStrategyQuestionNum}}</div></div> <div class="content" v-for="(item2,index2) in item.automaticRuleDifficultList" :key="index2"> <span> {{item2.difficultName}} <el-input class="difficult-content" v-model.number="item2.difficultNum"></el-input>/ <span v-for="(item3,index3) in sectionQuestionArr[index]" :key="index3" >{{(item3.difficult === item2.diffcultType) ? item3.quantity : ''}}</span> </span> </div> <div class="content"><el-button type="text" @click="deleteChapter(item,index)">删除</el-button></div> </div> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitSection">保 存</el-button> <el-button @click="cancelSection">取 消</el-button> </div> </el-dialog> addProblemRules(){ this.$refs.formSection.validate((valid) => { if(valid){ //把请求回来的难度list放到sectionData中，用于显示 // for(let i=0,len=(this.sectionData.length)+1;i<len;i++){ this.automaticRuleDifficultList.forEach(e=>e.difficultNum = 0); this.sectionData.push({ //由于vue数据双向绑定问题，automaticRuleDifficultList会动态改变，不能区分数组项 //进行转换 automaticRuleDifficultList:JSON.parse(JSON.stringify(this.automaticRuleDifficultList)), }) let tempArr = new Array(); for(let i=1;i<6;i++){ let obj = Object({quantity: 0, difficult: i}); tempArr.push(obj); } this.sectionQuestionArr.push(tempArr); } }) }, ```

使用谷歌，火狐浏览器都可以正常数据显示，后台数据获可以取到，ie10,ie11都不可以，主要是push在数组里数组失败，也不报错，里面没有数据，求大神帮助 $(window).ready(function () { $.ajax({ url: appconfig.apiUrl + "/allService", traditional: true, type: "GET", success: function (data) { console.log("get......all"); console.log(data) lenovoService = {}; motoService = {}; if (data.success === true) { for (idx in data.all) { item = data.all[idx]; if (item.business_unit === "Lenovo") { if(null == lenovoService[item.category]){ lenovoService[item.category] = []; } lenovoService[item.category].push(item); // Vue.set(lenovoService[item.category], lenovoService[item.category].length, item); } else { if(null == motoService[item.category]){ motoService[item.category] = []; } motoService[item.category].push(item); // Vue.set(motoService[item.category], motoService[item.category].length, item); } } console.log(motoService) Vue.set(vm.serviceCatalog, "lenovo", lenovoService); Vue.set(vm.serviceCatalog, "moto", motoService); console.log(vm.serviceCatalog); } } }); });

<div class="post-text" itemprop="text"> <p>I'm trying to make simple POST request using VueJS to an application which is written in Beego framework (GoLang) but the application doesn't see any input request. Everything is ok when I use standard form request (no ajax). This is my VueJS code:</p> <pre><code>storePost: function(event) { axios.post("/api/posts/store", {body: "test"}).then(function(response) { if (response.data.status == 200) { this.posts.push(response.data.data); }else { console.log("error"); } }, function(response){ console.log("error"); }); } </code></pre> <p>and this is my Beego code:</p> <pre><code>// router.go beego.Router("/api/posts/store", &amp;controllers_API.PostsController{}, "post:Store") // PostsController.go func (this *PostsController) Store() { fmt.Println(this.GetString("body")) // some irrelevant code which handles the response... } </code></pre> <p><code>fmt.Println</code> always prints nothing. When I use standard forms <code>fmt.Println</code> prints the value of the <code>body</code> with no problems.</p> </div>

把这个修改成属性值可以在input-text区自定义，删除自定义的值后自动恢复初始属性值。如图所示功能： ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>生成表格</title> <link rel="stylesheet" type="text/css" href="css/table.css"> <style type="text/css"> .hide {display: none;} .mt10 {margin-top: 10px;} .control-group {overflow: hidden;} .control-group a {color: #666;text-decoration: none;} .control-group a:hover {text-decoration: underline;} .control-label {float: left;width: 100px;line-height: 24px;} .controls {overflow: hidden;} .controls input[type="text"] {border: 1px solid #ddd;height: 20px;width: 120px;} .controls input[type="button"] {margin-top: 10px;height: 32px;cursor: pointer;} .config_item {margin-top: 10px;border: 1px dashed #ddd;padding: 10px;} .config_item section {margin-top: 10px;} .config_item section span {margin-right: 16px;} .config_item input[type="text"] {width: 80px;text-align: center;} .choose_config .Father_Title {margin: 0;margin-bottom: 10px;padding: 0;font-size: 16px;font-weight: normal;display: inline-block;vertical-align: middle;} .choose_config .Father_Item {padding: 0;margin: 0;margin-bottom: 10px;list-style: none;display: inline-block;vertical-align: middle;} .choose_config .Father_Item li {display: inline-block;margin-right: 10px;} .columnList {border-collapse: collapse;} .columnList th {background-color: #eee;} .columnList th,.columnList td {padding: 5px 10px;border: 1px solid #ddd;line-height: 24px;text-align: center;} </style> </head> <body> <!-- 选择信息 --> <div class="control-group choose_config"> <div class="control-label">选择信息：</div> <div class="controls"> <h3 class="Father_Title">颜色：</h3> <ul class="Father_Item Father_Item0"> <li><label><input id="Checkbox0" type="checkbox" class="checkbox check_all" value="全选">全选</label></li> <li><label><input id="Checkbox0" type="checkbox" class="checkbox check_item" value="红色">红色</label></li> <li><label><input id="Checkbox0" type="checkbox" class="checkbox check_item" value="白色">白色</label></li> <li><label><input id="Checkbox0" type="checkbox" class="checkbox check_item" value="土豪金">土豪金</label></li> </ul><br> <h3 class="Father_Title">内存：</h3> <ul class="Father_Item Father_Item1"> <li><label><input id="Checkbox0" type="checkbox" class="checkbox check_all" value="全选">全选</label></li> <li><label><input id="Checkbox1" type="checkbox" class="checkbox check_item" value="32G">32G</label></li> <li><label><input id="Checkbox1" type="checkbox" class="checkbox check_item" value="16G">16G</label></li> </ul><br> <h3 class="Father_Title">尺寸：</h3> <ul class="Father_Item Father_Item2"> <li><label><input id="Checkbox0" type="checkbox" class="checkbox check_all" value="全选">全选</label></li> <li><label><input id="Checkbox2" type="checkbox" class="checkbox check_item" value="5.5">5.5</label></li> <li><label><input id="Checkbox2" type="checkbox" class="checkbox check_item" value="4.5">4.5</label></li> <li><label><input id="Checkbox2" type="checkbox" class="checkbox check_item" value="3.5">3.5</label></li> </ul><br> </div> </div> <!-- 生成表格 --> <div class="control-group mt10"> <div class="control-label">生成表格：</div> <div class="controls" id="createTable"> </div> </div> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> /** * Created by Administrator on 14-12-01. * 模拟淘宝SKU添加组合 * 页面注意事项： * 1、 .Father_Title 这个类作用是取到所有标题的值，赋给表格，如有改变JS也应相应改动 * 2、 .Father_Item 这个类作用是取类型组数，有多少类型就添加相应的类名：如: Father_Item1、Father_Item2、Father_Item3 ... */ $(function() { $(document).on('change', '.choose_config label', function() { var parent=$(this).parents('.Father_Item'); var _this=$('.checkbox',this); // 是否全选 $('.checkbox',parent).each(function() { var bCheck2=true; if (_this.hasClass('check_all')) { if (_this.get(0).checked) { bCheck2=true; $('.check_item',parent).prop('checked', bCheck2); }else{ bCheck2=false; $('.check_item',parent).prop('checked', bCheck2); } return false; } else { if ((!this.checked)&&(!$(this).hasClass('check_all'))) { bCheck2 = false; $('.check_all',parent).prop('checked', bCheck2); return false; } } $('.check_all',parent).prop('checked', bCheck2); }); step.Creat_Table(); }); var step = { // 信息组合 Creat_Table: function() { step.hebingFunction(); var SKUObj = $('.Father_Title'); var arrayTile = new Array(); // 表格标题数组 var arrayInfor = new Array(); // 盛放每组选中的CheckBox值的对象 var arrayColumn = new Array(); // 指定列，用来合并哪些列 var bCheck = true; // 是否全选，只有全选，表格才会生成 var columnIndex = 0; $.each(SKUObj, function(i, item) { arrayColumn.push(columnIndex++); arrayTile.push(SKUObj.eq(i).text().replace('：', '')); var itemName = '.Father_Item' + i; var bCheck2 = true; // 是否全选 // 获取选中的checkbox的值 var order = new Array(); $(itemName + ' .check_item:checked').each(function() { order.push($(this).val()); }); arrayInfor.push(order); if (order.join() == '') { bCheck = false; } }) // 开始生成表格 if (bCheck) { $('#createTable').html(''); var table = $('<table id="process" class="columnList"></table>'); table.appendTo($('#createTable')); var thead = $('<thead></thead>'); thead.appendTo(table); var trHead = $('<tr></tr>'); trHead.appendTo(thead); // 创建表头 var str = ''; $.each(arrayTile, function(index, item) { str += '<th width="100">' + item + '</th>'; }) str += '<th width="200">价格</th><th width="100">操作</th>'; trHead.append(str); var tbody = $('<tbody></tbody>'); tbody.appendTo(table); var zuheDate = step.doExchange(arrayInfor); if (zuheDate.length > 0) { //创建行 $.each(zuheDate, function(index, item) { var td_array = item.split(','); var tr = $('<tr></tr>'); tr.appendTo(tbody); var str = ''; $.each(td_array, function(i, values) { str += '<td>' + values + '</td>'; }); str += '<td ><input name="Txt_PriceSon" class="inpbox inpbox-mini" type="text"></td>'; str += '<td ><a href="#">删除</a></td>'; tr.append(str); }); } //结束创建Table表 arrayColumn.pop(); //删除数组中最后一项 //合并单元格 $(table).mergeCell({ // 目前只有cols这么一个配置项, 用数组表示列的索引,从0开始 cols: arrayColumn }); } else { //未全选中,清除表格 document.getElementById('createTable').innerHTML = ""; } }, hebingFunction: function() { $.fn.mergeCell = function(options) { return this.each(function() { var cols = options.cols; for (var i = cols.length - 1; cols[i] != undefined; i--) { mergeCell($(this), cols[i]); } dispose($(this)); }) }; function mergeCell($table, colIndex) { $table.data('col-content', ''); // 存放单元格内容 $table.data('col-rowspan', 1); // 存放计算的rowspan值 默认为1 $table.data('col-td', $()); // 存放发现的第一个与前一行比较结果不同td(jQuery封装过的), 默认一个"空"的jquery对象 $table.data('trNum', $('tbody tr', $table).length); // 要处理表格的总行数, 用于最后一行做特殊处理时进行判断之用 // 进行"扫面"处理 关键是定位col-td, 和其对应的rowspan $('tbody tr', $table).each(function(index) { // td:eq中的colIndex即列索引 var $td = $('td:eq(' + colIndex + ')', this); // 获取单元格的当前内容 var currentContent = $td.html(); // 第一次时走次分支 if ($table.data('col-content') == '') { $table.data('col-content', currentContent); $table.data('col-td', $td); } else { // 上一行与当前行内容相同 if ($table.data('col-content') == currentContent) { // 上一行与当前行内容相同则col-rowspan累加, 保存新值 var rowspan = $table.data('col-rowspan') + 1; $table.data('col-rowspan', rowspan); // 值得注意的是 如果用了$td.remove()就会对其他列的处理造成影响 $td.hide(); // 最后一行的情况比较特殊一点 // 比如最后2行 td中的内容是一样的, 那么到最后一行就应该把此时的col-td里保存的td设置rowspan // 最后一行不会向下判断是否有不同的内容 if (++index == $table.data('trNum')) $table.data('col-td').attr('rowspan', $table.data('col-rowspan')); } // 上一行与当前行内容不同 else { // col-rowspan默认为1, 如果统计出的col-rowspan没有变化, 不处理 if ($table.data('col-rowspan') != 1) { $table.data('col-td').attr('rowspan', $table.data('col-rowspan')); } // 保存第一次出现不同内容的td, 和其内容, 重置col-rowspan $table.data('col-td', $td); $table.data('col-content', $td.html()); $table.data('col-rowspan', 1); } } }) } // 同样是个private函数 清理内存之用 function dispose($table) { $table.removeData(); } }, doExchange: function(doubleArrays) { // 二维数组，最先两个数组组合成一个数组，与后边的数组组成新的数组，依次类推，知道二维数组变成以为数组，所有数据两两组合 var len = doubleArrays.length; if (len >= 2) { var arr1 = doubleArrays[0]; var arr2 = doubleArrays[1]; var len1 = arr1.length; var len2 = arr2.length; var newLen = len1 * len2; var temp = new Array(newLen); var index = 0; for (var i = 0; i < len1; i++) { for (var j = 0; j < len2; j++) { temp[index++] = arr1[i] + ',' + arr2[j]; } } var newArray = new Array(len - 1); newArray[0] = temp; if (len > 2) { var _count = 1; for (var i = 2; i < len; i++) { newArray[_count++] = doubleArrays[i]; } } return step.doExchange(newArray); } else { return doubleArrays[0]; } } } }) </script> </body> </html> ``` ``` ```

大学四年，看课本是不可能一直看课本的了，对于学习，特别是自学，善于搜索网上的一些资源来辅助，还是非常有必要的，下面我就把这几年私藏的各种资源，网站贡献出来给你们。主要有：电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意：文中提到的所有资源，文末我都给你整理好了，你们只管拿去，如果觉得不错，转发、分享就是最大的支持了。 一、电子书搜索 对于大部分程序员...

今年，我也32了 ，为了不给大家误导，咨询了猎头、圈内好友，以及年过35岁的几位老程序员……舍了老脸去揭人家伤疤……希望能给大家以帮助，记得帮我点赞哦。 目录： 你以为的人生 一次又一次的伤害 猎头界的真相 如何应对互联网行业的「中年危机」 一、你以为的人生 刚入行时，拿着傲人的工资，想着好好干，以为我们的人生是这样的： 等真到了那一天，你会发现，你的人生很可能是这样的： ...

程序员在一个周末的时间，得了重病，差点当场去世，还好及时挽救回来了。

昨天早上通过远程的方式 review 了两名新来同事的代码，大部分代码都写得很漂亮，严谨的同时注释也很到位，这令我非常满意。但当我看到他们当中有一个人写的 switch 语句时，还是忍不住破口大骂：“我擦，小王，你丫写的 switch 语句也太老土了吧！” 来看看小王写的代码吧，看完不要骂我装逼啊。 private static String createPlayer(PlayerTypes p...

互联网公司工作，很难避免不和黑客们打交道，我呆过的两家互联网公司，几乎每月每天每分钟都有黑客在公司网站上扫描。有的是寻找 Sql 注入的缺口，有的是寻找线上服务器可能存在的漏洞，大部分都...

“亚马逊丛林里的蝴蝶扇动几下翅膀就可能引起两周后美国德州的一次飓风……” 这句人人皆知的话最初用来描述非线性系统中微小参数的变化所引起的系统极大变化。 而在更长的时间尺度内，我们所生活的这个世界就是这样一个异常复杂的非线性系统…… 水泥、穹顶、透视——关于时间与技艺的蝴蝶效应 公元前3000年，古埃及人将尼罗河中挖出的泥浆与纳特龙盐湖中的矿物盐混合，再掺入煅烧石灰石制成的石灰，由此得来了人...

loonggg读完需要3分钟速读仅需 1 分钟大家好，我是你们的校长。我之前讲过，这年头，只要肯动脑，肯行动，程序员凭借自己的技术，赚钱的方式还是有很多种的。仅仅靠在公司出卖自己的劳动时...

最近有个老铁，告诉我说，上班一个月，后悔当初着急入职现在公司了。他之前在美图做手机研发，今年美图那边今年也有一波组织优化调整，他是其中一个，在协商离职后，当时捉急找工作上班，因为有房贷供着，不能没有收入来源。所以匆忙选了一家公司，实际上是一个大型外包公司，主要派遣给其他手机厂商做外包项目。**当时承诺待遇还不错，所以就立马入职去上班了。但是后面入职后，发现薪酬待遇这块并不是HR所说那样，那个HR自...

昨天看到一档综艺节目，讨论了两个话题：（1）中国学生的数学成绩，平均下来看，会比国外好？为什么？（2）男生的数学成绩，平均下来看，会比女生好？为什么？同时，我又联想到了一个技术圈经常讨...

提到“程序员”，多数人脑海里首先想到的大约是：为人木讷、薪水超高、工作枯燥…… 然而，当离开工作岗位，撕去层层标签，脱下“程序员”这身外套，有的人生动又有趣，马上展现出了完全不同的A/B面人生！ 不论是简单的爱好，还是正经的副业，他们都干得同样出色。偶尔，还能和程序员的特质结合，产生奇妙的“化学反应”。 @Charlotte：平日素颜示人，周末美妆博主 大家都以为程序媛也个个不修边幅，但我们也许...

文章目录数据库基础知识为什么要使用数据库什么是SQL？什么是MySQL?数据库三大范式是什么mysql有关权限的表都有哪几个MySQL的binlog有有几种录入格式？分别有什么区别？数据类型mysql有哪些数据类型引擎MySQL存储引擎MyISAM与InnoDB区别MyISAM索引与InnoDB索引的区别？InnoDB引擎的4大特性存储引擎选择索引什么是索引？索引有哪些优缺点？索引使用场景（重点）...

有个好朋友ZS，是技术总监，昨天问我：“有一个老下属，跟了我很多年，做事勤勤恳恳，主动性也很好。但随着公司的发展，他的进步速度，跟不上团队的步伐了，有点...

私下里，有不少读者问我：“二哥，如何才能写出一份专业的技术简历呢？我总感觉自己写的简历太烂了，所以投了无数份，都石沉大海了。”说实话，我自己好多年没有写过简历了，但我认识的一个同行，他在阿里，给我说了一些他当年写简历的方法论，我感觉太牛逼了，实在是忍不住，就分享了出来，希望能够帮助到你。 01、简历的本质 作为简历的撰写者，你必须要搞清楚一点，简历的本质是什么，它就是为了来销售你的价值主张的。往深...

不说了，字节跳动也反手把我挂了。

场景 日常开发，if-else语句写的不少吧？？当逻辑分支非常多的时候，if-else套了一层又一层，虽然业务功能倒是实现了，但是看起来是真的很不优雅，尤其是对于我这种有强迫症的程序"猿"，看到这么多if-else，脑袋瓜子就嗡嗡的，总想着解锁新姿势：干掉过多的if-else！！！本文将介绍三板斧手段： 优先判断条件，条件不满足的，逻辑及时中断返回； 采用策略模式+工厂模式； 结合注解，锦...

有小伙伴问松哥这个问题，他在上海某公司，在离职了几个月后，前公司的领导联系到他，希望他能够返聘回去，他很纠结要不要回去？ 俗话说好马不吃回头草，但是这个小伙伴既然感到纠结了，我觉得至少说明了两个问题：1.曾经的公司还不错；2.现在的日子也不是很如意。否则应该就不会纠结了。 老实说，松哥之前也有过类似的经历，今天就来和小伙伴们聊聊回头草到底吃不吃。 首先一个基本观点，就是离职了也没必要和老东家弄的苦...

不知道是不是只有我这样子，还是你们也有过类似的经历。 上学的时候总有很多光辉历史，学年名列前茅，或者单科目大佬，但是虽然慢慢地长大了，你开始懈怠了，开始废掉了。。。 什么？你说不知道具体的情况是怎么样的？ 我来告诉你： 你常常潜意识里或者心理觉得，自己真正的生活或者奋斗还没有开始。总是幻想着自己还拥有大把时间，还有无限的可能，自己还能逆风翻盘，只不是自己还没开始罢了，自己以后肯定会变得特别厉害...

往往，我们看不进去大段大段的逻辑。深刻的哲理，往往短而精悍，一阵见血。问：产品经理挺漂亮的，有点心动，但不知道合不合得来。男生更看重女生的身材脸蛋，还是...

二哥，有个事想询问下您的意见，您觉得应届生值得去外包吗？公司虽然挺大的，中xx，但待遇感觉挺低，马上要报到，挺纠结的。

当HR压你价，说你只值7K时，你可以流畅地回答，记住，是流畅，不能犹豫。 礼貌地说：“7K是吗？了解了。嗯~其实我对贵司的面试官印象很好。只不过，现在我的手头上已经有一份11K的offer。来面试，主要也是自己对贵司挺有兴趣的，所以过来看看……”（未完） 这段话主要是陪HR互诈的同时，从公司兴趣，公司职员印象上，都给予对方正面的肯定，既能提升HR的好感度，又能让谈判气氛融洽，为后面的发挥留足空间。...

HashMap底层实现原理，红黑树，B+树，B树的结构原理 Spring的AOP和IOC是什么？它们常见的使用场景有哪些？Spring事务，事务的属性，传播行为，数据库隔离级别 Spring和SpringMVC，MyBatis以及SpringBoot的注解分别有哪些？SpringMVC的工作原理，SpringBoot框架的优点，MyBatis框架的优点 SpringCould组件有哪些，他们...

面试阿里p7被问到的问题(当时我只知道第一个)：@Conditional是做什么的?@Conditional多个条件是什么逻辑关系？条件判断在什么时候执...

我们程序员应该抱着尝鲜、猎奇的心态，否则就容易固步自封，技术停滞不前。

编程语言层出不穷，从最初的机器语言到如今2500种以上的高级语言，程序员们大呼“学到头秃”。程序员一边面临编程语言不断推陈出新，一边面临由于许多代码已存在，程序员编写新应用程序时存在重复“搬砖”的现象。 无代码/低代码编程应运而生。无代码/低代码是一种创建应用的方法，它可以让开发者使用最少的编码知识来快速开发应用程序。开发者通过图形界面中，可视化建模来组装和配置应用程序。这样一来，开发者直...

最近面试了一个31岁8年经验的程序猿，让我有点感慨，大龄程序猿该何去何从。

说实话，自己的算法，我一个不会，太难了吧

已经连续五年参加大厂校招、社招的技术面试工作，简历看的不下于万份 这篇文章会用实例告诉你，什么是差的程序员简历！ 疫情快要结束了，各个公司也都开始春招了，作为即将红遍大江南北的新晋UP主，那当然要为小伙伴们做点事（手动狗头）。 就在公众号里公开征简历，义务帮大家看，并一一点评。《启舰：春招在即，义务帮大家看看简历吧》 一石激起千层浪，三天收到两百多封简历。 花光了两个星期的所有空闲时...

我们都玩过Windows操作系统中的经典游戏扫雷（Minesweeper），如果把质数当作一颗雷，那么，表格中红色的数字哪些是雷（质数）？您能找出多少个呢？文中用列表的方式罗列了10000以内的自然数、质数（素数），6的倍数等，方便大家观察质数的分布规律及特性，以便对算法求解有指导意义。另外，判断质数是初学算法，理解算法重要性的一个非常好的案例。

正确选择比瞎努力更重要！

两个星期以前，就有读者强烈要求我写一篇 Java Stream 流的文章，我说市面上不是已经有很多了吗，结果你猜他怎么说：“就想看你写的啊！”你看你看，多么苍白的喜欢啊。那就“勉为其难”写一篇吧，嘻嘻。 单从“Stream”这个单词上来看，它似乎和 java.io 包下的 InputStream 和 OutputStream 有些关系。实际上呢，没毛关系。Java 8 新增的 Stream 是为...