阿毛Alex - 2020年12月
type: channel
link: https://alexmao.com/index.php/2020/12/
description: 生命不息，折腾不止
items: BootStrap模态框如何居中？
items: [WDS] Disconnected!错误如何解决
items: Vue 3修改默认端口
items: 在WAMP里部署Node.js网站（Apache代理Node.js）
items: 如何添加系统变量
items: 下载安装mongodb
items: 对Promise, resolve, reject, async, await的理解
items: 测试驱动开发和测试驱动学习
items: Vue.js和Node.js前后端分离简单实例
items: NoSQL的查询

BootStrap模态框如何居中？
type: item
date: 2020-12-31T08:54:00+00:00
description: 参考材料：Bootstrap：弹出框和提示框效果以及代码展示Bootstrap 模态框（Modal）插件

[WDS] Disconnected!错误如何解决
type: item
date: 2020-12-27T08:20:00+00:00
description: 将node和vue设置好了虚拟主机之后，在访问vue项目vuetest.cn时，在console里会跳出来[WDS] Disconnected!错误。不过奇怪的是好像服务都不受影响，对后端的增删改查都可以使用。百度了一下，找到两个办法，一个是把localhost改成127.0.0.1，另一个是把vue默认端口改成其它端口，但是试过了之后，发现都不行。继续找答案中...

Vue 3修改默认端口
type: item
date: 2020-12-27T08:17:00+00:00
description: Vue 3的默认端口是8080，如何修改呢？找到node_modules@vuecli-servicelibcommands下的serve.js文件，找到下面代码，将端口改成自己想要的即可。const defaults = { host: '0.0.0.0', port: 8081, https: false }

在WAMP里部署Node.js网站（Apache代理Node.js）
type: item
date: 2020-12-27T02:29:00+00:00
description: 由于我目前在阿里云上安装的是WAMP服务，又要安装node.js的服务的话，就不能使用NGINX什么的，于是上网查了一下如何使用Apache来支持node.js和vue.js的服务，发现也并不难配置，使用ProxyPass即可。原理：使用WAMP的时候外面可以在服务器上配置多个虚拟空间，只需要在httpd-vhosts.conf文件里添加 记录，同时在host文件里里添加相应的127.0.0.1记录即可。当我们使用nodes.js和vue.js的时候，会在localhost:5000和localhost:8080分别提供后端和前端的服务。这时候，我们只需要添加两个 记录，使用ProxyPass代理到这两个端口即可。具体操作步骤如下：第一步：在http.conf文件里，将下面两句前面的#删除。LoadModule proxy_module modules/mod_proxy.so LoadModule proxy_http_module modules/mod_proxy_http.so 目的是开启proxy第二步：在httpd-vhosts.conf文件里，添加一个记录，的如： ServerName nodetest.cn ServerAlias nodetest.cn ProxyRequests off Order deny,allow Allow from all ProxyPass http://localhost:5000/ ProxyPassReverse http://localhost:5000/ ServerName vuetest.cn ServerAlias vuetest.cn ProxyRequests off Order deny,allow Allow from all ProxyPass http://localhost:8080/ ProxyPassReverse http://localhost:8080/ 第三步：打开C:WindowsSystem32driversetc的host文件，然后添加下面两条记录：127.0.0.1 nodetest.cn 127.0.0.1 vuetest.cn 第四步：重启Apache，访问nodetest.cn和vuetest.cn即可访问相应的服务。如果需要外网访问，将域名解析到服务器IP地址接口即可。总结：这个ProxyPass的设置甚好，使用这种方式，理论上在服务器上可以利用不同端口提供无数个服务。plus：不知道是不是幻觉，似乎使用http://127.0.0.1:8080比http://localhost:8080反应更快一点。

如何添加系统变量
type: item
date: 2020-12-18T08:20:00+00:00
description: 教程在这里

下载安装mongodb
type: item
date: 2020-12-18T07:42:00+00:00
description: 由于官网提供的云数据库实在是太难连接了，能连上的时候反应特别慢，有时候根本就不能连接，所以迫不得已自己安装一个mongodb数据库试试吧。下载资源安装教程这个教程比较简单一点安装过程中，被卡在这里了：2020-06-14T10:52:32.000+0800 I SHARDING [ftdc] Marking collection local.oplog.rs as collection version: <unsharded>按照网上查的教程，说新建一个powershell然后启动mongo命令就可以了，可是我TM的不行啊，崩溃了！安装这个东西太麻烦了，简直不想弄了。2020.12.18更新一下，解决了https://cloud.mongodb.com提供免费数据库无法连接的问题，其实是因为我用的个人热点导致IP地址发生了变化，在后台把现在的IP加入白名单就可以了。所以暂时先不安装mongodb了，等解决了目前的问题再继续吧。2020.12.21上午今天把前后端分离这个case搞定了，但是发现mongodb.com这个云数据库服务真是太慢了，点一下修改数据库再返回数据，需要好几秒钟，简直没有办法忍受，所以可能还是得自己把mongodb本地安装搞定，要不然真没法用。2020.12.21下午后来发现，其实我的mongodb本地竟然已经安装好了……设置了系统变量了之后，就可以直接使用mongo命令进入操作数据库了。我把node.js链接数据库的地址改成mongodb://127.0.0.1:27017/dbname，竟然就能够连上了！太让人惊喜了。当然后面肯定还会有用户和权限的设置要做，这个后面再学，现在至少我那个前后端分离的简单项目能在本地数据库跑了。

对Promise, resolve, reject, async, await的理解
type: item
date: 2020-12-18T06:21:00+00:00
description: 之前刚刚开始接触node.js的时候就看了一段视频讲同步异步的，看得一头雾水，对这几个单词充满了疑问，看别的视频的时候看到别人新手敲进去，也不知道是为了什么，这两天才好好地研究了一下。不得不说选择视频真的是太重要了，同样的人来讲解一个事情，有些人讲了听得明白，有些人讲了也还是听不明白，有些人只需要讲10分钟，有些人讲了40分钟，也不一定是视频的人讲得不好，每个人的学习都要依靠自己目前的知识体系，只有能和自己的知识网络联系起来，才可能学得会。这次就是在Youtube上学的，一个叫Hitesh Choudhary的印度老哥讲的，视频只有12分钟，不过还是听明白了，下面讲一下的自己的理解。以下正文开始Promise，async和await一般是在请求资源的时候使用，因为请求资源的时候，对方给过来的反馈一般会比较慢（相对于继续执行后面的程序而言），这时候一般需要做一个设置，那就是等对方的反馈回来了之后再执行后面的程序，不过如果没有特别设置，js是不会这么做的，这时候如果有3个方法，中间那个需要请求，不做设置的话，第二个还没有等到拿到请求结果就输出了，结果就是undefined，因为没有拿到任何东西。举例： 执行上面的代码，two()会输出undefined，因为该方法需要3秒才能执行完，但是由于没有设置，还没有执行完就返回了，结果就是undefined。那么，如何才能让run()按顺序执行one() two() three()呢？一共分两步：第一步：在two()里面返回一个Promise，将two()改成：function two () { return new Promise((resolve, reject) => { setTimeout(() => { resolve('I am two') }, 3000) }) } 这段代码里，一个Promise会返回两个状态，resolve或者reject，基本上可以理解为success和error，在resolve里填写如果反馈成功后要返回的东西即可。第二步：调用的时候设置要async和await当你在定义一个类似run()方法时，如果这里面涉及到需要等待结果的方法（比如请求资源的），这时候要在这个方法前面加上async，表示这是一个包含异步请求的方法，然后在里面具体的需要等待结果的方法前面，加上await，也就是说，需要等这个方法获得了返回结果之后，再继续往下面执行。所以run()就可以改成这样： function run () { console.log(one()) console.log(two()) console.log(three()) } 这时候，整体代码变成这样： 再执行的话，就会发现one()先出结果，等3秒后，two()出结果，紧跟着three()的结果也出来了。这个就是promise, resolve, reject, async, await的最基础知识了吧，写出来加深一下理解，如果有初学者能看到，也许也可以获得一些启发。更复杂的知识，参考这里。

测试驱动开发和测试驱动学习
type: item
date: 2020-12-16T00:37:00+00:00
description: 这几天在《软技能2》里又看到了一个概念叫测试驱动开发TDD，概念并不复杂，就是在开发之前先编写好测试用例，之后不断开发去实现测试用例里面描述的功能。不过我联想到的并不不仅仅是这个开发过程，而是有两点。第一，这其实就是《高效能人士的七个习惯》里面提到的，以终为始的一种应用，把最终效果写下来，不断去实现最终效果。第二，测试驱动开发让我想到测试驱动学习。我们要学习某个领域的知识，如果最终有一个测试能够帮助我们了解是不是已经掌握了需要的知识，那么只要了解这个测试的范围，我们就有了可以去学习的方向，同时带着动力和效率。考证是一个测试驱动学习的一个很好的应用，我想要学习项目管理，那么PMP就是一个测试，PMP考试的题目就是测试用例，我们用那些题目，来验证自己是不是掌握了相应的知识，一如我们用测试用例去验证我们是不是已经开发了相应的功能。同时我还想到，在孩子的教育上，也可以使用测试驱动学习。其实孩子需要掌握的知识体系已经非常完整地分布在一二三四五六年级，如果我需要看孩子掌握的情况，那么我可以使用每个年级的测试题，来决定现在孩子应该掌握什么知识，应该掌握到什么程度。这比看教学大纲和考试大纲更加实用。人类的行为有很多时候都是某种相通的东西。

Vue.js和Node.js前后端分离简单实例
type: item
date: 2020-12-15T08:22:00+00:00
description: 学习资源：点击这里后端新建一个文件夹，npm init初始化项目。安装必要的组件：npm i express cors body-parser mongodbnpm i nodemon -D将package.json里的scripts更新为如下： "scripts": { "start": "node server/index.js", "dev": "nodemon server/index.js" }, 创建server文件夹，创建index.js文件，输入初始代码：const express = require('express'); //引入express const bodyParser = require('body-parser'); //引入bodyParser const cors = require('cors'); //引入cors const app = express(); //新建express实例 //Middleware app.use(bodyParser.json()); //app.use是使用中间件 app.use(cors()); // const port = process.env.PORT || 5000; //定义port app.listen(port, () => console.log(`Server started on port ${port}`)); //监听 此时访问localhost:5000会返回Cannot GET /，因为没有设置路由。在server文件夹下建立routes文件夹，在下面建立api文件夹，再下面建立posts.js文件。在index.js里的中间件下添加：const posts = require('./routes/api/posts'); app.use('/api/posts', posts); 目的是当访问/api/posts路径的时候，直接执行posts.js文件（目前是这么理解的）。index.js的代码如下：const express = require('express'); const bodyParser = require('body-parser'); const cors = require('cors'); const app = express(); //Middleware app.use(bodyParser.json()); app.use(cors()); const posts = require('./routes/api/posts'); app.use('/api/posts', posts); const port = process.env.PORT || 5000; app.listen(port, () => console.log(`Server started on port ${port}`)); posts.js的代码如下：const express = require('express'); const mongodb = require('mongodb'); const router = express.Router(); // Get Posts router.get('/', async (req, res) => { const posts = await loadPostsCollection(); res.send(await posts.find({}).toArray()); }); // Add Post router.post('/', async (req, res) => { const posts = await loadPostsCollection(); await posts.insertOne({ text: req.body.text, createAt: new Date() }); res.status(201).send(); }); // Delete Post router.delete('/:id', async (req, res) => { const posts = await loadPostsCollection(); await posts.deleteOne({ _id: new mongodb.ObjectID(req.params.id) }); res.status(200).send(); }) async function loadPostsCollection(){ const client = await mongodb.MongoClient.connect ('mongodb+srv://alex…

NoSQL的查询
type: item
date: 2020-12-14T06:48:00+00:00
description: 我之前以为nosql就是一个一个的key value的集合，觉得条件查询起来肯定会特别麻烦，没想到其实还挺完整的。需要进一步学习。基础入门的教程在这里。