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>

2. 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