天一阁

发表于 评论数： 阅读数：

《Bootstrap 4 From Scratch With 5 Projects》是一位Youtube上的讲师开发的关于bootstrap的课程。他的课程基本都很容易懂，我已经订阅了他的频道。

他最近开发了一门课程是关于Bootstrap4的，并且放到了Udemy上，可是价格太贵了，人民币要1800元，如果是100元我都愿意花钱买，可是1800实在承受不起了。于是通过各种方法终于找到了全部课程视频，我想把这个视频分享给各位。

如果需要全部视频的话可以加我微信.

发表于 分类于 评论数： 阅读数：

今天看了这位老美的Bootstrap的讲座，可能对于长期搞前端的人来说，这没有什么，但对于我来说却特别惊艳。看上去这么复杂的页面竟然1个小时就能搞定了。

阅读全文 »

发表于 更新于 分类于 评论数： 阅读数：

整个IT产业和一个大型软件一样，都是分层的。底层是硬件，CPU，内存，硬盘，网络。上面一层是OS，他负责管理各种硬件资源，需要和CPU打交道，充分利用CPU提供的能力，再管理好各个外部设备，为再上层的应用软件提供编程接口。OS能够提供的其实都是标准接口：进程管理，文件读写，内存分配，网络处理，中断处理，基本上是这些了。在OS只上，有一些软件相对底层，比如DB，Cache，WebServer，浏览器等。所谓底层有两个含义，一是他处理业务比较有共性，从业务角度看更加抽象，比如说DB保存一条记录，可以是任何业务，比如可以是订单，可以是用户数据，可以是文章，可以是流水log。但是他并不关心这些，他只需要关心，高性能，可靠性。另外底层的软件都会有一些比较复杂的算法，因为他更多在处理数据本身，数据处理要求高效的算法。所以底层软件的算法是比较复杂的。

那么再上一层就是应用软件，无论是ios, android, web，其实大部分会处理CRUD的问题。只是看谁能更好的维护代码，谁能有更好的交互体验。也可以说是，谁长得漂亮，谁就有优势。当然长得好看是一方面，另外就是能否有好的功能，好的内容。因为应用软件在业务处理上比较类似，而且实现方法比较多，所以除了开发语言很多，还有很多开发框架，这些开发框架也带来了很多学习成本。

阅读全文 »

发表于 分类于 评论数： 阅读数：

Node.js是2009年一个美国自由职业者开发的，这哥们现在去了Google Brain，玩神经网络去了。

Node主要是利用chrome V8强大的能力，执行js代码，然后加上异步IO的机制，可以实现用javascript写后台server。以前我一直以为server都得是C++写，现在才明白有个HTTP协议，加上一套框架，不就是传递数据么，没有什么高级和低级，就有高效和低效。

node写一个简单的server很容易

1
2
3
4
5
6
7
8
9
var http = require('http');

function onRequest(request, response){
  response.writeHead(200, {'Content-type':'text/plain'});
  response.write('Hello world');
  response.end();
}
http.createServer(onRequest).listen(8000);

通过引入一个内置的核心模块http，就可以启动一个server，这个和python里面的方式也挺像的。

阅读全文 »

发表于 更新于 分类于 评论数： 阅读数：

Handling User Input with Forms笔记

表单是动态页面的重要工具，没有表单，web就不会这么丰富，就没有了任何可交互性。

原始形式的表单

表单这种东西从很早就接触只不过现在给忘记了，知识需要缝一下，补一下。<form>标签下放上几个<input>，当点击<submit>标签的时候，就会把整个form下的输入数据传送到后台去处理。数据发送的地址是form的属性action所指定的url。这里用到的是POST方法。

这些机制都是HTTP协议和浏览器共同完成了，作为web developper只是把业务逻辑写好。其中radio、checkbox需要name属性一致，这样才能表示对应的数据。无论是PHP活着Flask都是判断当前是POST方法表示客户端提交了数据，然后解析request里面的form，进行数据处理，然后在根据业务逻辑，生成对应的页面。

Vue的表单处理

原生的form是需要页面跳转的，或者说是整个页面刷新。有了Vue这样的前端框架，可以不再按原来的方式处理，直接就是前后端分离，然后submit按钮点击之后，采用ajax方式和后台交互数据，业务逻辑很多放到了前端。

对vue对表单的来说，最需要的就是收集数据，基本上都是通过v-model这个指令和vue的data中的变量进行绑定，然后submit之后提交数据。其中checkbox是个数组，radio是一个包含value的字符串

阅读全文 »

发表于 更新于 分类于 评论数： 阅读数：

这部分是讲了关于vue 组件的高级特性，尽管有些内容我觉得没啥用，可能这些特性太高级了，我做的东西都太低级了。仔细又想了一下，好像这些特性也不是特别高级，也就是一般般吧，没啥了不起的。

slot 插槽

父组件向子组件传参数可以用props。vue还提供slot的方式可以传递一段HTML代码。

1
2
3
<myCmp>
	<p slot='title'>{{ title }} </p>
</myCmp>

这样可以把p标签下的内容全部传到子组件中，在子组件中只需要使用slot，引用即可，必要的时候加上name属性。

组件动态切换
1
2
3
4
<keep-alive>
  <component :is="selected">
  </component>
</keep-alive>

component 是vue的保留字，通过这个标签，就可以实现简单的组件动态切换。这里的selected是一个变量，保存需要加载的组件的名字。

keep-alive表示在组件切换时，是否需要销毁和重建组件，加上keep-alive，可以节省一些开销，也能缓存一些数据。同时会给组件增加两个lifecycle hooks: deactivated 和 activated

1
2
3
4
5
6
7
8
9
destroyed(){
  console.log('Calc destroyed');
},
deactivated(){
  console.log('Calc deactivated');
},
activated(){
  console.log('Calc activeted');
}

发表于 分类于 评论数： 阅读数：

这两天在学习vue开发，现在手机上看看效果，但是发现总是报错invalid host header。现在把解决方法记录在此。

vue的代码写完后，都是npm run dev启动一个测试server，想用手机访问本地的机器，先是无法访问，后来才发现，Project is running at http://localhost:8080/ 。启动的ip是localhost，也就是127.0.0.1，那手机上通过局域网地址肯定无法访问了。

google了一下，发现如果要改这个绑定的ip，需要把webpack.config.js文件中devServer中增加host字段，比如增加这样的配置host: '0.0.0.0'，这样重新启动后，这个小web服务器就绑定到了0.0.0.0的ip上了。

但是手机上还是不能访问，在手机浏览器中报错invalid host header, 于是又去google。原来新版的webpack-dev-server修改了一些东西，默认检查hostname。如果hostname不是配置内的，将不可访问。应该是考虑一些安全的因素，才有这种配置。虽然我还不知道webpack-dev-server这玩意是神马？看来的抓紧时间学习webpack了。

这个问题也能解决，就是继续在webpack.config.js文件中devServer中增加disableHostCheck: true配置，这样再重新启动后，问题就解决了。

发表于 分类于 评论数： 阅读数：

An Introduction to Components

Vue提供组件（Component）机制，就是可以复用的一段代码。也是一个vue实例，他可以通过自己的标签被嵌入到整个vue的web app中。

大体上创建实例所需的选项是一样的，唯一需要注意的就是组件的data选项，在component中data不是一个对象，而是一个函数，通过一个函数来返回一个对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="app">
  <my-cmp></my-cmp>
  <hr>
  <my-cmp></my-cmp>
</div>
<script type="text/javascript">
  Vue.component('my-cmp', {
    data: function(){
      return {
        status:'normal'
      }
    },
    template: '<h1>Status: {{ status }}</h1>'
  });
  new Vue({
    el: "#app"
  });
</script>
全局和本地组件注册

通过Vue.component('cmp-name', {})注册组件是全局有效的，任何Vue实例都可以直接引用。如果是在vue实例的components的属性中注册，那就只有当前这个vue实例内可以使用对于其他实例是无效的。

App.vue

通过vue-cli用模板创建的文件，都是用组件的形式开发了，其中有一个根组件，就是App.vue。相当于整个web app的首屏入口，这里主要是注意一下data选项要按组件的规则写，也就是写成函数形式。

ES6 import export

每天都发现一点ES6的新语言特性，好理解，但是不好记忆。说简单了，就是javascript要做成可以模块化，工程化的大型开发语言。于是又export import这样类似 include 这样语句。道理明白，但要适应需要一个过程，要是达到能够运用的阶段，又是很长的一个过程。

0%