碎碎念的一周(0915)

  两周没写博客了,这两周各种事情接连而来,学习学了什么啊?什么都没有学。忙也是因为必须要忙,毕竟招新大事已来,反而想想,暑假就这样离我远去已经两周了,怎么会那么快呢。

本周事宜

小组学习

  两周学习并不是很多,主要是为了师大的一个网站,自己在学习他们的后台是怎么用的,之前做的自己学校的网站用的是博达,而师大用的却是一个没有接触过的WebPlus ,导致自己一脸懵逼啊🤕,WebPlus用着确实没有博达舒服,WebPlus提供的是可拖拽式的样式配置模块,并不能在编辑器中使用,只是在网页上拖拖拖,并且模板还需要固定格式,改样式也很麻烦,相当于重写了。博达倒是有很多优点了,起码,编辑器用着爽。

Read more
最后的暑假,over(0831)

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

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

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

Read more
node.js - MongoDB count()获取表长度,解决Promise {<pending>}

  自己一直想要用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权重的等级划分与比较

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数据结构

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生命周期

  每个 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模型

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

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

总结如下:

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

nodejs的express框架的response常用返回方式

常用的返回方式有四种

  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的原因

之前对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