最后的暑假，over（0831）|生活随笔|个人总结-周记

  每周的博客都在记录着我的学习、我的生活，但也同样记录着我的时间，大学生活的最后一个暑假就这样结束了，大三的暑假，谁知道我在哪奔波呢，大四，更不用说了🙄

  这个暑假自己干了什么？学会了什么？也好想问问自己。

  还记得考试刚结束，就去河南理工大学参加了互联网+训练营，待了三天，体会就是感觉跟别人的差距挺大的，无论是项目的完善度，还是讲解ppt，感觉还是差了许多吧，虽然我们也并不差。回来之后歇了两天，就又去了商水进行电商培训，培训完后回来就抓紧修改ppt，总的来说，互联网+项目大概用了暑假两个周吧，基本学习进度为零😫，学习落下了，但也见识到了各路大神各显神通，也算不亏。

Read more
windows下使用NVM切换Node版本Sticky||WebNode.js|nvm-node版本切换

  自己最近安装npm包时，老是报错，最后查明是Node已经npm版本太高了，常在河边走那能不湿鞋，在我们平时写Node的时候，由于创建时间或人为选择等因素，各个项目里总会有着差异的node版本，这样我们在不同的项目里需要切换不同版本的Node.js，所以我们需要一个能随时切换node版本的东西，所以nvm诞生了。

什么是nvm？

  nvm 是 Mac 下的 node 管理工具，有点类似管理 Ruby 的 rvm，如果需要管理 Windows 下的 node，之前官方推荐使用 nvmw 或 nvm-windows，但是目前nvm已支持window，而且快捷方便，不需要设置环境变量！

安装

  • 首先，要卸载原先装的全局node和npm！(控制面板--> 卸载程序),一定要卸载已安装的 NodeJS，否则会发生冲突。

  • 卸载完后直接下载最新nvm安装 (推荐使用nvm-setup.zip)[地址]：nvm安装

  到这就没了，就那么如此简单两步，也不用弄什么环境，就可以直接用😂

Read more
node.js - MongoDB count()获取表长度，解决Promise {<pending>}|WebNode.jsMongoDB|开发-MongoDB count()-输出Promise

  自己一直想要用node操作db.count()去获取某个表的长度，奈何用collection.find().count()却又一直获取不到，查看了许多文章，都没有什么详细的解释，官方文档也是吧啦吧啦一大堆。。。

错误源头


var collection=client.db(UrlPath).collection(collectionname)
var total=collection.find().count();
console.log(total);

// 这里打印的 一直都为Promise { <pending> }，并没有返回需要的数值

如何解决

  报错为Promise {<pending >}，其意思就是告诉我们此为promise，需要用 then接收,于是乎：

Read more
CSS权重的等级划分与比较|WebCss|css-css权重

CSS权重

  CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。

css选择器权重列表如下

权重 选择器
10000 !important（!important并不是选择器，但是权重却是最高的）
1000 内联样式：style=""
100 ID选择器： #idName{...}
10 类、伪类、属性选择器：.className{...} / :hover{...} / [type="text"] ={...}
1 标签、伪元素选择器：div{...} / :after{...}
0 通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）

权值计算公式：

Read more
ES6 学习笔记 -- Set和Map数据结构|WebES6|ES6-Set-Map

Set

创建Set数据结构

>// 两种方式
>let list = new Set();
>
>或者
>
>let array = [1, 2, 2, 4, 5];
>let list = new Set(array);
>
>let list = new Set( [1, 2, 2, 4, 5]);
>

基本用法

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

Read more
Vue学习--浅谈Vue生命周期|WebVue.js|Vue-Vue生命周期

  每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了我们在不同阶段添加自己的代码的机会。

Vue 生命周期方法的调用顺序

话不多说，先来一波代码，我们可以通过执行以下代码来学习其调用顺序。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue生命周期学习</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
    <script type="text/javascript">
        window.onload = function(){
            new Vue({
                // el:'#box',
                data:{
                    msg:'hello world'
                },
                beforeCreate:function(){
                    console.log( this.$el , '-------beforeCreate')
                },
                created:function(){
                    console.log( this.$el ,'-------created')
                },
                beforeMount:function(){
                    console.log( this.$el , '-------beforeMount')
                },
                mounted:function(){
                    console.log( this.$el , '-------mounted')
                },
                beforeUpdate:function(){
                    console.log( this.$el , '-------beforeUpdate')
                },
                updated:function(){
                    console.log( this.$el , '-------updated')
                    // setTimeout(() => {
                    //     this.$destroy(); 
                    // }, 2000);
                },
                beforeDestroy:function(){
                    console.log( this.$el , '-------beforeDestroy')
                },
                destroyed:function(){
                    console.log( this.$el , '-------destroyed')
                }
            });
        };
    </script>
</head>
<body>
<div id="box">
    <input type="text" v-model="msg"><br/>
    <h2>{{msg}}</h2>
</div>
</body>
</html>

注意：此时vue实例并未设置el属性。

Read more
Vue学习--MVVM模型|WebVue.js|Vue-MVVM

MVVM模型

MVVM简介

  MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。
  Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。

MVVM模型

MVVM模型图示

Read more
高效的 JavaScript 模板引擎--EJS|WebNode.jsEJS|Node-EJS

最近时常需要ejs模板做些项目，所以特地总结了一下ejs的一些特性，其中可能会有些不足，但我会时常补充。

总结如下：

1. 缓存功能，能够缓存已经解析好的html模版；
2. <% code %>用于执行其中javascript代码；
3. <%= code %>会对code进行html转义；
4. <%- code %>将不会进行转义；
5. 支持自定义标签，比如’<%‘可以使用’{{’，’%>‘用’}}'代替；
6. 提供一些辅助函数，用于模版中使用
7. 利用<%- include filename %>加载其他页面模版；
nodejs的express框架的response常用返回方式|WebNode.jsexpress|response的常用返回方式-前端-express

常用的返回方式有四种

  1. res.json([status|body], [body])  以json的形式返回数据

  2. res.render(view [, locals] [, callback])  返回对应的view和数据，此方法可以有回调函数，以处理可能出现的异常

  3. res.send([body|status], [body])  返回自定义的数据，比如json或者404等状态

  4. res.redirect([status,] path)  这个方法其实不是返回，而是跳转到另外一个url上

Read more
Git常见错误！git push rejected的原因|WebGit|Git-git push rejected

之前对git的使用很不熟练，在前几天重新学习了之后，测试时提交报了错：


![rejected]  master->master(fetch first)
error:failed to push some refs to 'https://github.com/xxx/xxx.git'

按照错误的提示信息，操作git fetch，然后再次push依然报错。。。

之后在网上找到了答案。

最后按照，错误的提示信息:


hit “git pull ...” before pushing again.      执行git pull，然后再执行push果然就可以了。

原来之前在网站上改了README.md, 客户端再次提交的时候，需要先更新服务器上的变化，然后才能提交。也是很苦逼了。

Read more