昨天,今天,明天,每天的每天,你是否都多懂得一点点...

星期六, 九月 28, 2019

[Youtube][跟峰哥学Node.js编程系列教程] 如何验证表单数据, 无害化处理, 给用户显示错误提示信息[第七期]

Tags: Javascript, nodejs, 峰哥, yufeng deng, expressjs, jade, pug, handlebars

本集主要讲如何使用 Express 来验证表单,  对用户从表单提交的数据进行无害化处理. 如何把错误信息显示在表单中提示用户正确的输入方式. 

看完本集你将学会:

如何验证表单
如何使用内建的验证方式, 如何验证邮箱格式
如何自定义验证方式
如何把用户输入的数据无害化  
如何在网页中显示错误信息


之前的教程可以在这个播放列表找到
https://www.youtube.com/playlist?list=PL3dZh-p-vVofgTEnJ_SL1LM9jxmQp19E2


视频里用到的代码请到

 
-~-~~-~~~-~~-~-

本频道旨在分享生活中各种小技巧, 如用小米盒子看国内视频, 如何使用KODI看电影等等. 同时我也会分享一些编程的教程, 如编写Telegram机器人, 建站等。 点击进入我的频道: goo.gl/5tyxcf

🔷 订阅我的频道: goo.gl/KuF3bY
🔷 telegram电报群: t.me/fengsharegroup
🔷 我的博客: www.dengnz.com/blog
🔷 Facebook: www.facebook.com/fengnz
🔷 Twitter: https://twitter.com/fennng

觉得我的视频对你帮助很大的话, 请我喝杯咖啡吧
微信赞赏码: goo.gl/uKoE8w
-~-~~-~~~-~~-~-


[Youtube][跟峰哥学Node.js编程系列教程] 如何生成表单并读取表单, 处理用户提交的内容与用户交互


Tags: Javascript, nodejs, 峰哥, yufeng deng, expressjs, jade, pug, handlebars

本集主要讲如何使用 Express 来生成表单, 本集使用 handlebars 作为HTML引擎 (前面讲过)
看完本集你将学会:

如何生成表单
如何读取表单 
如何在网页中使用用户提交的数据


之前的教程可以在这个播放列表找到
https://www.youtube.com/playlist?list=PL3dZh-p-vVofgTEnJ_SL1LM9jxmQp19E2


视频里用到的代码请到


-~-~~-~~~-~~-~-

本频道旨在分享生活中各种小技巧, 如用小米盒子看国内视频, 如何使用KODI看电影等等. 同时我也会分享一些编程的教程, 如编写Telegram机器人, 建站等。 点击进入我的频道: goo.gl/5tyxcf

🔷 订阅我的频道: goo.gl/KuF3bY
🔷 telegram电报群: t.me/fengsharegroup
🔷 我的博客: www.dengnz.com/blog
🔷 Facebook: www.facebook.com/fengnz
🔷 Twitter: https://twitter.com/fennng

觉得我的视频对你帮助很大的话, 请我喝杯咖啡吧
微信赞赏码: goo.gl/uKoE8w
-~-~~-~~~-~~-~-

--
Feng

星期六, 九月 14, 2019

[Youtube][跟峰哥学Node.js编程系列教程] 如何使用 Express Generator 快速生成项目文件

Tags: Javascript, nodejs, 峰哥, yufeng deng, expressjs, jade, pug, handlebars

本集主要讲如何使用expressjs 官方的 expgress generator 项目文件成生器来快速的生成一个 express 的程序.

看完本集你将学会:

如何安装 express generator
如何使用 express generator 来生成一个初始的 express 项目文件夹

之前的教程可以在这个播放列表找到
https://www.youtube.com/playlist?list=PL3dZh-p-vVofgTEnJ_SL1LM9jxmQp19E2


视频里用到的代码请到


-~-~~-~~~-~~-~-

本频道旨在分享生活中各种小技巧, 如用小米盒子看国内视频, 如何使用KODI看电影等等. 同时我也会分享一些编程的教程, 如编写Telegram机器人, 建站等。 点击进入我的频道: goo.gl/5tyxcf

🔷 订阅我的频道: goo.gl/KuF3bY
🔷 telegram电报群: t.me/fengsharegroup
🔷 我的博客: www.dengnz.com/blog
🔷 Facebook: www.facebook.com/fengnz
🔷 Twitter: https://twitter.com/fennng

觉得我的视频对你帮助很大的话, 请我喝杯咖啡吧
微信赞赏码: goo.gl/uKoE8w
-~-~~-~~~-~~-~-


--
Feng

星期三, 九月 11, 2019

A simple javascript threading experiment with setTimeout

I am going to add a global queue object to my nodejs express program, then this raises a concern of thread safety. 

I am implementing a queue with only 10 elements, the older elements will be throw away.  So I wrote the following code to test. 

In the following code, the if (queue.length > 10) can cause problem. Because when both thread run into this block and both finish pushing the element,  we will have 12 elements in the queue.

For example
[12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23]

The new elements in this queue is 22, and 23.

Now thread 1 will do a slice and make the queue to be 

  [13, 14, 15, 16, 17, 18, 19, 20, 21, 22]  

At this point, because the queue length is 10, then the thread 2 will not do the slice.  The pushed element 23 is gone. 

If thread 2 read the queue length before thread 1 slice it. Then thread 2 will slice it again. 

the array become 

 [14, 15, 16, 17, 18, 19, 20, 21, 22]

Only 9 element in the queue, 13 is gone.


[javascript]

let queue = [];
let threads = 100000;
for (let i = 0; i < threads; i++) {
    setTimeout(() => {
        queue.push(i);
        // This line can have a dirty read
        if (queue.length > 10) {
            queue = queue.slice (1, 11);
        }

        if (i >= threads - 10) {
            console.log(queue);
        }
    }, 1000);
}

[/javascript]

But when I tested this in the browser. it never failed. It's very interesting. 

A small improvement is using a temp variable to hold the original queue outside the if block, then use the temp var in the if block. It will make sure only 1 element will be missing.  

[javascript]

let queue = [];
let threads = 100000;
for (let i = 0; i < threads; i++) {
    setTimeout(() => {
        queue.push(i);
       let tempQueue = queue;
        // This line can have a dirty read
        if (queue.length > 10) {
            queue = tempQueue.slice (1, 11);
        }

        if (i >= threads - 10) {
            console.log(queue);
        }
    }, 1000);
}

[/javascript]


--
Feng

如何在angular 等 Single Page App (SPA) 网页里面加谷歌 Adsense 广告



如果你在谷歌上搜索在angular 里面加 adsense 的方法, 很多人会告诉你这是不能的. 特别是一些比较老的文章. 

原因也很简单, 因为谷歌无法验证你的网站, 也就是不会在你的网站上投放广告. 但是这个已经是老黄历了, 现在的SPA的网站都是可以成功的投放谷歌的adsense 广告的. 如果你没有成功, 那应该是你没有做对.

首先, 我们来理解一下为什么过去在SPA中无法放谷歌的广告. SPA的特点就是, 几乎所有的内容都是由javascript 生成的, 如果你看首页的源码, 你可能只能看到短短的一页. 里面基本没有什么内容, 就是调用了几个javascript. 在不支持 javascript 的浏览器中, 这种网站基本就是一片空白.  SPA 既然叫做single page, 那就是只有一个页面. 没有更多的页面了, 所有的内容都是由javascript 生成并呈现的, 跳转页面也是由javascript 完成, 对于浏览器来说, 其实还是在index.html 这个页面.

早期的谷歌爬虫由于不支持 javascript, 所以它们是看不见网站的内容的, 在他们眼里, 这个网站就是一个空白页面. 试问一个空白页面有没有投放广告的必要? 所以, 早期的SPA是无法投放谷歌的广告的, 当然有些聪明人会给机器人设置一个特别的缓存页面让机器人可以看到一些内容从而通过验证.

而现在的爬虫基本上都可以认识SPA了, 所以也就不存在这个问题. 但是在SPA中投放广告还是有些不同的, 这就是为什么很多人不成功的原因. 因为谷歌提供的广告代码通常包含 javascript, 由于安全原因, 直接粘贴谷歌的代码在你想要的地方可能无效. 比如说在 angular 2+ 中, 你如果把谷歌的广告代码贴在某个 component 的 html 文件里, 这是没有用的, 因为 angular 会移除所有的 script tag, 所以谷歌广告的代码不会被执行, 所以要通过一些别的办法来运行这个Script, 或者干脆把这些代码放在 index.html 里面, 而不是component 里面.

以下的这种广告代码放在angular 的 index.html 是会工作的.

[javascript]
  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-9753349551653834" data-ad-slot="3179523493"
    data-ad-format="auto" data-full-width-responsive="true"></ins>
  <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
  </script>
  [/javascript]  

演示请看这里 


--
Feng

星期一, 九月 09, 2019

[Youtube][跟峰哥学Node.js编程系列教程] 在Nodejs Express 程序中使用静态文件, CSS, 图片, Javascript, CSS网页布局, JS飘雪效果示例

Tags: Javascript, nodejs, 峰哥, yufeng deng, expressjs, jade, pug, handlebars


本集主要讲如何在Express 程序中使用静态的CSS, 图片还有Javascript 文件

看完本集你将学会:

如何在Nodejs + express 的程序中使用任何静态文件 
如何在网页中加入图片
如何简单的用CSS布局
如何写javascript 和使用别人的Javascript加到自己的网页中

视频里用到的代码请到



-~-~~-~~~-~~-~-

本频道旨在分享生活中各种小技巧, 如用小米盒子看国内视频, 如何使用KODI看电影等等. 同时我也会分享一些编程的教程, 如编写Telegram机器人, 建站等。 点击进入我的频道: goo.gl/5tyxcf

🔷 订阅我的频道: goo.gl/KuF3bY
🔷 telegram电报群: t.me/fengsharegroup
🔷 我的博客: www.dengnz.com/blog
🔷 Facebook: www.facebook.com/fengnz

觉得我的视频对你帮助很大的话, 请我喝杯咖啡吧
微信赞赏码: goo.gl/uKoE8w
-~-~~-~~~-~~-~-

星期日, 九月 08, 2019

[Youtube]Telegram Bot 回声机器人代码详解[第二集半]

Tags:  
Telegram, 机器人,
 聊天机器人,机器人编程,机器人代码, Telegram代码,Telegram BotTelegram编程    


本视频由观众投稿, 是对Telegram 机器人编程系列第二集汤姆猫内容的补充. 本视频详细介绍了第二集里面的代码意思. 感觉投稿的小伙伴. 我一直以为是个小伙子, 看到视频才知道是个美少女! 汗!!

第二集的视频在这里

整个系列的视频请点视频右上角的感叹号.

-~-~~-~~~-~~-~-

本频道旨在分享生活中各种小技巧, 如用小米盒子看国内视频, 如何使用KODI看电影等等. 同时我也会分享一些编程的教程, 如编写Telegram机器人, 建站等。 点击进入我的频道: goo.gl/5tyxcf

🔷 订阅我的频道: goo.gl/KuF3bY
🔷 telegram电报群: t.me/fengsharegroup
🔷 我的博客: www.dengnz.com/blog
🔷 Facebook: www.facebook.com/fengnz

觉得我的视频对你帮助很大的话, 请我喝杯咖啡吧
微信赞赏码: goo.gl/uKoE8w
-~-~~-~~~-~~-~-

其它博客地址

此博客的同步博客地址: http://fengnz.wordpress.com
这里进入我的MSN SPACE.