2019/08/19
1.三栏布局：两端固定，中间自适应布局
<div class="wrap">
<div class="left">左侧</div>
<div class="middle">中间</div>
<div class="right">右侧</div>
</div>
<style type="text/css">
.wrap {display: flex; justify-content: space-between;}
.left, .right, .middle {height: 100px;}
.left {width: 200px; background: coral;}
.right {width: 120px; background: lightblue;}
.middle {background: #555; width: 100%; margin: 0 20px;}
</style>
- MQTT +VUE问题
参考：mosquitto 与 websocket 的结合
官方教程：eclipse paho
//问题1
WebSocket connection to 'ws://****:1883/mqtt' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
//解决方案：服务器端配置
//问题2
WebSocket connection to 'ws://*****:1883/mqtt' failed: Error during WebSocket handshake: net::ERR_CONNECTION_RESET
//解决方案：服务器端配置
客户端代码
//index.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script>
注：本地引用与在线引用使用方法二选一即可，但本地引用代码可能需要更改，详情参考VUE 连接 MQTT
//mqtt.vue
//import Paho from '../../utils/mqttws31' //本地引用
data () {
return {
client:new Paho.MQTT.Client('*****',9001,(new Date().getTime()).toString()), //ip地址，port，clientId
topic:'***' //订阅主题
}
},
created(){
this.client.connect({
timeout:3,
onSuccess: this.onConnect,
userName:"***",
password:"***",
onFailure:this.onFailure}); // 连接服务器并注册连接成功处理事件
this.client.onConnectionLost = this.onConnectionLost; // 注册连接断开处理事件
this.client.onMessageArrived = this.onMessageArrived; // 注册消息接收处理事件
},
methods:{
onConnectionLost(responseObject) {
if (responseObject.errorCode !== 0) {
console.log("onConnectionLost:"+responseObject.errorMessage);
console.log("连接已断开");
}
},
onMessageArrived(message){
console.log("收到消息:"+message.payloadString);
},
onConnect(){
console.log("onConnected");
this.client.subscribe(this.topic);//订阅主题
},
onFailure(message) {
console.log('connect failed.');
}
}
3.js根据id查找对象数组
[{
id: 1,
name: 'a'
},{
id: 2,
name: 'b'
},
].find(function (x) {
return x.id === 10
})
4.文本超出div时的自动换行问题
word-break break-all
white-space normal
