这一周的工作和学习总结

碰到父组件的数据通过props传递给子组件，结果子组件没有接收到已经解决

// 子组件监听
watch: {
    getSelect(obj) {
        // console.log(obj)
        this.$emit('select', obj)
    },
    // 监听数据变化
    schedule(val){
        this.parentSchedule = val;
    },
    // 将监听到的数据变化，传到父组件
    parentSchedule(val) {
        this.$emit('changeSchedule', val);
    }
},
// 父组件
// 获取可预约日期时间
_getModelVisitorTime(){
    api.getModelOrder({
        model_id:this.$route.params.id,
    }).then(res=>{
        var obj = {}
        var data = res.data
        for(var i in data){
            var dateArr = data[i].days.split(' ')[0]
            var times = data[i].times.split('#')
            obj[dateArr] = times;
            
        }
        // this.$set(this.schedule,obj)
        this.schedule = obj
        // console.log(this.schedule)
        // console.log("getMOdelVisitor");
        // console.log(this.$refs.timeSelect.getTimeList(obj))
    })
},
// 
changeSchedule(val){
    this.schedule = val;
},

今天解决了游客选择数据提交预约成功

	// 将字符串转换成datetime格式
 _getDateTime(dateTimeStr){
     var date = new Date(dateTimeStr).getDate()
     var month = new Date(dateTimeStr).getMonth()+1
     var Year = new Date(dateTimeStr).getFullYear()
     var datetime = Year + '-' + month +'-' + date + ' ' + '00:00:00.000000'
     return datetime
 },

今天处理好了schecle数据的处理

// 获取可预约日期时间
_getModelVisitorTime(){
    var that = this;
    api.getModelOrder({
        model_id:this.$route.params.id,
    }).then(res=>{
        console.log(res)
        var obj = {}
        var data = res.data
        for(var i in data){
            var dateArr = data[i].days.split(' ')[0]
            var times = data[i].times.split('#')
            obj[dateArr] = times;
            
        }
        this.schedule = obj
        console.log(this.schedule)
        console.log("getMOdelVisitor");
        console.log(this.$refs.timeSelect.getTimeList(obj))
    })
},

git使用

为什么git每次git push 的时候要重复的输入用户名

 [winUpdater]
 	recentlySeenVersion = 2.18.0.windows.1
 [filter "lfs"]
 	clean = git-lfs clean -- %f
 	smudge = git-lfs smudge -- %f
 	process = git-lfs filter-process
 	required = true
 [user]
 	email = [email protected]
 	name = kennana
 //.gitconfig 添加一下配置
 [credential]
     helper = store

查询状态 git status
添加到本地仓库 git add . 添加所有文件，但是这样有点粗暴，我们修改了那个文件就可以 git add src/api/api.js
然后就是添加注释，你最近解决了什么问题 git commit -m"解决了问题的注释"
更新到码云，github上面去，git push
更新到本地，就可以是 git pull

最近在自学vue,照着网上例子写了一个父子组件的双向绑定，只实现了单向绑定。父组件的数据不能随子组件变化，只能是子组件数据随父组件变化；在官网看了文档一时还是无法理解其思路。
请各位前辈帮忙看看是哪里出的问题，谢谢

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双向绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue "></script>
</head>
<body>
    <div id="app">
        <div>
            <span>父：{{value}}</span>
            <input type="text" v-model='value' v-on:click="c_lick">
        </div>
        <my-com v-model="value"></my-com>
    </div>
    <template id="template1">
        <div>
            <span>子：{{childvalue}}</span>
            <input type="text" v-model='childvalue' v-on:click="f_click">
        </div>
    </template>
    <script>
        new Vue({
            el: '#app',
            data: {
                value: ''
            },
            methods: {
                c_lick() {
                    //this.value--;
                }
            },
            components: {
                'my-com': {
                    template: '#template1',
                    props: ['value'],
                    data: function () {
                        return {
                            childvalue: this.value
                        }
                    },
                    methods: {
                        f_click() {
                            //this.currentvalue++;
                            this.$emit('input', this.childvalue);
                        }
                    },
                    watch: {
                        value(val) {
                            this.childvalue = val;
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>

vue双向绑定，首先来说要搞懂单向传递的原理，逐渐深入。父传子用props,子传父用 $emit。父传子还好说，在父级里把要传入的值，在子组件上动态绑定（v-bind）一个属性，把值传进去，然后子级用props来接受这个属性。子传父的话有点复杂，首先来说子级在一个方法methods里，用this.$ emit(‘属性名’,传的值)来传给父级，而父级需要用一个v-on来接收这个值。
下述为双向传递，我自己写了一篇笔记，分享给你，对你学习vue很有帮助，好好研读

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>baidu</title>
        <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <div id="app">
       <switchbtn :result="result" @on-result-change="onResultChange"></switchbtn>
       <input type="button" value="change" @click="change">
    </div>
</body>
<script type="text/javascript">
        Vue.component("switchbtn", {
        template: "<div @click='change'>{{myResult?'开':'关'}}</div>",
        props: ["result"],
        data: function () {
            return {
                myResult: this.result//①创建props属性result的副本--myResult
            }
        },
        watch: {
            /* 此处是重点 */
            result(val) {
                this.myResult = val;//②监听外部对props属性result的变更，并同步到组件内的data属性myResult中
            },
            myResult(val){
                this.$emit("on-result-change",val);//③组件内对myResult变更后向外部发送事件通知
            }
        },
        methods: {
            change() {
                this.myResult = !this.myResult;
            }
        }
    });
 
    new Vue({
        el: "#app",
        data: {
            result: true
        },
        methods: {
            // 外部触发方法
            change() {
                this.result = !this.result;
            },
            // 接收
            onResultChange(val){
                this.result=val;//④外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
            }
        }
    });
</script>
</html>

ubantu14.0.4 部署laravel5.7 博客系统

安装php7.2

 配置环境前下好language-pack-en-base这个包，解决不同语言之间可能发生的冲突，-y参数的意思是直接安装无需确认
 sudo apt-get update
 sudo apt-get install -y language-pack-en-base

 安装完成后运行locale-gen en_US.UTF-8

 再在服务器上安装Git sudo apt-get install git



 sudo apt-get install software-properties-common python-software-properties 

 sudo add-apt-repository ppa:ondrej/php && sudo apt-get update

 sudo apt-get -y install php7.2

  # 如果之前有其他版本PHP，在这边禁用掉
 sudo a2dismod php5
 sudo a2enmod php7.2

 # 安装常用扩展
 sudo -y apt-get install php7.2-fpm php7.2-mysql php7.2-curl php7.2-json php7.2-mbstring php7.2-xml  php7.2-intl 

 #  安装其他扩展（按需安装）
 sudo apt-get install php7.2-gd
 sudo apt-get install php7.2-soap
 sudo apt-get install php7.2-gmp    
 sudo apt-get install php7.2-odbc       
 sudo apt-get install php7.2-pspell     
 sudo apt-get install php7.2-bcmath   
 sudo apt-get install php7.2-enchant    
 sudo apt-get install php7.2-imap       
 sudo apt-get install php7.2-ldap       
 sudo apt-get install php7.2-opcache
 sudo apt-get install php7.2-readline   
 sudo apt-get install php7.2-sqlite3    
 sudo apt-get install php7.2-xmlrpc
 sudo apt-get install php7.2-bz2
 sudo apt-get install php7.2-interbase
 sudo apt-get install php7.2-pgsql      
 sudo apt-get install php7.2-recode     
 sudo apt-get install php7.2-sybase     
 sudo apt-get install php7.2-xsl
 sudo apt-get install php7.2-cgi        
 sudo apt-get install php7.2-dba 
 sudo apt-get install php7.2-phpdbg     
 sudo apt-get install php7.2-snmp       
 sudo apt-get install php7.2-tidy       
 sudo apt-get install php7.2-zip

成功后运行php -v查看版本，应显示类似信息
PHP 7.2.12-1+ubuntu14.04.1+deb.sury.org+1 (cli) (built: Nov 12 2018 10:58:25) ( NTS ) Copyright (c) 1997-2018 The PHP Group Zend Engine v3.2.0, Copyright (c) 1998-2018 Zend Technologies with Zend OPcache v7.2.12-1+ubuntu14.04.1+deb.sury.org+1, Copyright (c) 1999-2018, by Zend Technologies

安装mysql

sudo apt-get install mysql-server mysql-client过程中输入密码，确定后安装完成。 
mysql -u root -p再输入密码测试，能成功登陆即安装完成。exit退出mysql

因为上线的应用为laravel 5.5版本开发的，为了之后的兼容性问题，ubuntu14.04直接安装的mysql不是较新版本，因此要升级一下mysql：

cd ~
wget https://dev.mysql.com/get/mysql-apt-config_0.8.1-1_all.deb
sudo dpkg -i mysql-apt-config_0.8.1-1_all.deb

解压安装包后会弹出框，选择好mysql 5.7版本后选择ok 然后继续

然后,更新包索引:sudo apt-get update

然后,安装MySQL-server:sudo apt-get install mysql-server

然后,升级全部的Mysql数据库:sudo mysql_upgrade -u root -p

最后,重启mysql server:sudo service mysql restart

登陆一下mysql看看是否已经升级完毕，成功了进入下一步
mysql -uroot -p密码

由于apache2指向的网站根目录是/var/www/html/,要修改配置文件000-default.conf

vim /etc/apache2/sites-enabled/000-default.conf
使网站根目录指向 /var/www/html/public/

然后再修改/etc/apache2/apache2.conf的这里

<Directory /var/www/>
Options Indexes FollowSymLinks
AllowOverride None
Require all granted

将AllowOverride None 的None改为All.保存重启apache2

这时访问网址,如果出现500错误.那就是由于storage目录没有 777 权限。

到/var/www/html/目录执行

chmod -R 777 storage

在Unbuntu中重启Apache服务器出现错误：AH00558: apache2: Could not reliably determine the server’s fully qualified domain name, using 127.0.1.1.等等。解决方法：

   $ sudo vim /etc/apache2/apache2.conf
 
  最后加入一句: ServerName localhost:80

sudo apache2ctl -k restart

今天的修改

submit() {
    // 提交数据，user_id,manager_id,days,times;
    var days_times = this.dateSelect;
    if (!days_times) {
        // 如果没有选择就不提交了
        return;
    }
    for (let val in days_times) {
        // 以#号传字段
        var str = "";
        var arr = days_times[val];
        // 减少for循环的嵌套
        for (let i = 0; i < arr.length; i++) {
            str += arr[i];
            str += "#";
        }
        var newstr = str.substring(0, str.length - 1);
        // console.log(newstr);
        api.userOrder({
            user_id: localStorage.getItem("user_id"),
            model_id: this.$route.params.id,
            days: val,
            times: newstr
        }).then(res => {
            console.log(res);
            if (res.code === 1) {
                // 成功
                MessageBox({
                    title: "",
                    message: res.msg,
                    showCancelButton: false
                });
            }
        }).catch(e => {
            // 失败
            if (e.code === 0) {
                MessageBox({
                    title: "",
                    message: e.msg,
                    showCancelButton: false
                });
            }
        });
    }
},

$refs ,ref 使用

我们在更新数据属性时覆盖了我们对DOM所做的更改。这样做的原因是，当访问DOM元素并直接操作它们时，实际上跳过了前面文章中讨论到的虚拟DOM。因此，Vue仍然控制着h1元素，甚至当Vue对数据中的做出更新时，它会更新虚拟DOM，然后更新DOM本身。因此，你应该小心使用对DOM的直接更改，就算是你不小心做了相应的修改，你所做的任何更改都将可能会被覆盖。虽然在使用refs时应该小心更改DOM，但是做只读操作相对来说比较安全，比如从DOM中读取值。

一个vue组件只有一个id=app

<div id="app"> 
    <h1>{{ message }}</h1> 
    <button ref='myButton' @click="clickedButton">点击偶</button> 
    <ul> 
        <li v-for="todo in todos" ref='todos'>
          {{ todo.text }}
        </li>
    </ul>
</div>

下面这种情况是渲染不出来的

<div id="app"> 
    <h1>{{ message }}</h1> 
    <button ref='myButton' @click="clickedButton">点击偶</button> 
    
</div>
<ul> 
    <li v-for="todo in todos" ref='todos'>
      {{ todo.text }}
    </li>
</ul>

子组件向父组件传值使用this.$emit(“事件名”,“传递的参数”)

fileChange(e) {
    let file = e.target.files[0];
    if (file.size > this.maxSize) {
        MessageBox("提示", "图片太大了噢");
    } else {
        let formData = new FormData();
        formData.append("img", file);
        api.upload(formData).then(res => {
            console.log(res);
            if (res.host) {
                this.icon = res.host + res.path;
            } else {
                this.icon = res.path;
            }

            this.$emit("changeIcon",res.path);
        })
    }
},
changeName() {
    MessageBox.prompt("输入昵称", "")
        .then(({ value, action }) => {
            if (!value) {
                return;
            }
            this.name = value;
            // 
            this.$emit('changeName',this.name);
        })
        .catch(() => {});
},
changePhone() {
    MessageBox.prompt("输入联系方式", "")
        .then(({ value, action }) => {
            if (!value) {
                return;
            }
            this.phone = value;
            this.$emit("changePhone",this.phone);
        })
        .catch(() => {});
},

父组件向子组件传值使用props:[“数据名称”]

mint-ui 头部组件的使用 Header

<mt-button
v-if=“icon”
class=“right-icon”
// @click.native=“ $emit('right-click')" // 跟原生的onclick="change()"一样的形式，可以不用this @click.native="$ emit(‘right-click’)”>

{{ right }}

子组件中获取父组件传来的值提示undefined

https://segmentfault.com/q/1010000015163316
https://www.jb51.net/article/117447.htm
https://blog.csdn.net/qq_39894133/article/details/79509155

是哪个组件传给那个组件
怎么传的，哪些必要的参数
怎么处理
怎么回显，数据检测

js时间戳问题

一：时间转时间戳：javascript获得时间戳的方法有四种，都是通过实例化时间对象 new Date() 来进一步获取当前的时间戳

1.var timestamp1 = Date.parse(new Date()); // 结果：1477808630000 不推荐这种办法，毫秒级别的数值被转化为000

  console.log(timestamp1);

2.var timestamp2 = (new Date()).valueOf(); // 结果：1477808630404 通过valueOf()函数返回指定对象的原始值获得准确的时间戳值

console.log(timestamp2);

3.var timestamp3 = new Date().getTime(); // 结果：1477808630404 ，通过原型方法直接获得当前时间的毫秒值，准确

console.log(timestamp3);

4.var timetamp4 = Number(new Date()) ; //结果：1477808630404 ,将时间转化为一个number类型的数值，即时间戳

console.log(timetamp4);



二，时间戳转时间

var timestamp4 = new Date(1472048779952);//直接用 new Date(时间戳) 格式转化获得当前时间
console.log(timestamp4);
console.log(timestamp4.toLocaleDateString().replace(/\//g, "-") + " " + timestamp4.toTimeString().substr(0, 8)); //再利用拼接正则等手段转化为yyyy-MM-dd hh:mm:ss 格式

有些时候每次都要发请求

for(var i in days_times){
    // 选中多少个就给他发送多少个请求
    days = this._getDateTime(i)
    console.log("days",days)
    times = days_times[i].join("#")
    console.log("times",times)
    api.userOrder({
        user_id: localStorage.getItem('user_id'),
        model_id: this.$route.params.id,
        days: days,
        times: times
    }).then(res=>{
        console.log("submit",res)
        if(res.code===1){
            // 成功
            MessageBox({
              title:'',
              message: res.msg,
              showCancelButton: false
            });
        }
    }).catch(e=>{
        // 失败
        if(e.code===0){
            MessageBox({
              title:'',
              message: e.msg,
              showCancelButton: false
            });
        }
    })
}

解决异步加载过程中子组件接受不了父组件传值的情况

<TimeSelect ref="timeSelect" v-if="schedule" :schedule="schedule" @select="select"/>
可能因为在异步加载时需要判断一下那个schedule是否为空，

加载渲染过程

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

子组件更新过程

父beforeUpdate->子beforeUpdate->子updated->父updated

父组件更新过程

父beforeUpdate->父updated

销毁过程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

created mounted的区别

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作


其实两者比较好理解，通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步，而如果你写入组件中，你会发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，那么mounted就是不二之选。下面看一个例子（用组件）


Vue.component("demo1",{
    data:function(){
        return {
            name:"",
            age:"",
            city:""
        }
    },
    template:"<ul><li id='name'>{{name}}</li><li>{{age}}</li><li>{{city}}</li></ul>",
    created:function(){
        this.name="唐浩益"
        this.age = "12"
        this.city ="杭州"
        var x = document.getElementById("name")//第一个命令台错误
        console.log(x.innerHTML);
    },
    mounted:function(){
        var x = document.getElementById("name")//第二个命令台输出的结果
        console.log(x.innerHTML);
    }
});
var vm = new Vue({
    el:"#example1"
})

程序对比

// 我写的
for(let i=0; i<res.data.length; i++){
    if(res.host){
        res.data[i].img = res.host + res.data[i].img;
    }else{
        res.data[i].img = res.data[i].img;
    }
    res.data[i].days = res.data[i].days.split(' ')[0];
    let arr = res.data[i].times.split('#');
    let str = '';
    arr.forEach(element => {
        str += element+':00、'
    });
    res.data[i].times = str;
}

// 别人写的
if (res.host) {
    for (let i = 0; i < res.data.length; i++) {
        res.data[i].img = res.host + res.data[i].img;
        res.data[i].days = res.data[i].days.split(' ')[0];
        let arr = res.data[i].times.split('#');
        let str = '';
        arr.forEach(element => {
            str += element+':00、'
        });
        res.data[i].times = str;
    }
} else {
    for (let i = 0; i < res.data.length; i++) {
        res.data[i].img = res.data[i].img;
        res.data[i].days = res.data[i].days.split(' ')[0];
        let arr = res.data[i].times.split('#');
        let str = '';
        arr.forEach(element => {
            str += element+':00、'
        });
        res.data[i].times = str;
    }
}

注意引入scss文件的时候末尾要加入 ;,不然会报错

@import “@/common/css/var.scss”;