ES6系列先放放，没办法，公司缺后端，我想如果和后台交互不太多的小项目，就不麻烦老大了。其实我是找个理由偷偷来学一丢丢node的（捂脸），手指切菜时受伤了，不区分大小写了。

先看下技术点：

1、构建文档介面：node + express + jwt

2、构建前端页面：vue-cli3.0 + element-ui

3、数据请求及拦截：axios + mlab + mongoDB

忘记说了，这是一个有许可权管理的后台管理系统。

第一步：初始化项目 npm init ，作者、描述之类的自己看著写。入口文件偶用的server.js。

第二步：根目录创建个server.js （touch server.js），顺便安装下express （npm i express）。

现在demo长这样

第三步：实例化一个app，让这个服务启动起来

但是现在打开网页，是什么都看不到的，因为我们没有设置路由。

由于每次更改完server后都要重启才能生效，所以，可以安装个nodemon （sudo npm i nodemon -g） 之后，就可以在终端使用（nodemon server.js） 来启动服务了。

其实以上步骤，在学习HTTP时，已经操作过了。

我们还可以通过改动package.json，来设置通过哪些命令来启动服务。

这两行代码的意思是：npm run start 时 就是在执行 node server.js ，但是这样子每次改动server文件还是要重启，所以增加了下面那行代码。说白了，其实就是 npm run server 来代替nodemon server.js。

---------------------------------------扮演下分割线--------------------------------------

连接mangoDB资料库。

这个交互还是很友好的

我们还需要使用mongoose ，所以，安装一下。（npm i mongoose）。

新建一个config文件夹，新建个key文件，专门放URI

在server.js文件中引入这个key。

当然了，也可以直接在mongoose.connect(uri)，里面把URI地址写上。

连接资料库时，我们需要使用mango shell。在用brew安装时，出了点小插曲。

额，卸载重装homebrew。

卸载：/usr/bin/ruby -e "$(curl -fsSL raw.githubusercontent.com)"

重装：/usr/bin/ruby -e "$(curl -fsSL raw.githubusercontent.com)"

更新：brew update

重来一遍。装完后，记得检查下版本：mongod -version

现在就可以看到在终端能列印出连接好了的字样。

*也可以直接使用第二种连接方式：连接应用程序，这个比较简单。node3+

只需要修改下密码

但是会提示，这个字元串解析弃用云云

我们按照提示，在server.js文件中，增加：

就不会再有提示了。

现在把路由给分离出来，新建个routes->api->users.js 。

这个user.js主要功能是用于login和register

当然，要引入express、router，好有个路由的指向。

然后到server.js中引入user.js

现在，需要用中间件来使用router。那我们就在埠号上面来使用router

现在到浏览器去访问这个api。

现在，我们创建一个模型。models->User.js

----------------------------假装我也是分割线---------------------------------------------

搭建注册介面

1.本地测试介面工具：postman 2.搭建注册介面 3.使用第三方头像和库

瞄一眼postman本地测试刚才的介面：

来搭建一下登录注册介面

注册介面肯定是要传递数据的，所以我们使用的是post方法。需要安装一个body-parser的解析包。npm i body-parser

安装好了之后就可以在依赖里面看到。

然后我们在server.js文件中引入这个body-parser

const bodyParser = require(body-parser); // 引入body-parser 然后使用中间件

现在我们可以使用body-parser了。

在body中选择红框，在header中，会自动加上content-type

现在我们send后，就能在node端得到body中的数据

那么，我们可以正常得到request.body中的内容，我们就可以进行查询，看资料库中是否已经有这条数据。当资料库中没有这条数据时，才可以正常注册。

我们把数据模型中的User.js引入一下。// const User = require(../../models/User)

然后我们就可以进行后续的逻辑：

密码这里我们需要做一下加密：

先安装一个bcrypt（npm i bcrypt）装完以后，哪里用到加密，就把当前要加密的内容引过来(const bcrypt = require(bcrypt);)。使用方法：bcrypt

把下面这句直接复制过来：

saltRounds是一种加密方式，栗子中给我们10，那我们也用10好了。突然想起来一个梗（加点盐）。

myPlaintextPassword，给谁加密就改成谁，我们这里是给password加密。

接下来的function我们可以写成箭头函数。hash就是我们加密后的密码。

现在我们来测试下：

我们是可以正常得到这些数据的。

在mangoDB中我们也存上了这些数据。

再次send时。

提示我们，已被注册。

其实大多数应用都是要有个avatar的，我们也处理一下。使用第三方：gravatar

先安装（npm i gravatar ）再引入 const gravatar = require(gravatar);

使用方法：

还有一些栗子：

s r d的含义

我们把d：』404『改为mm，就可以得到一个默认的头像占位符。

这时候我们再次send，会得到avatar

将这串地址复制下来在浏览器打开，就会得到这样的一个效果。

这个就是mm给到的一个类似于空的效果。当然了，也可以自定义。

注册下Gravatar - 全球公认的头像

然后根据提示一步一步操作，因为我们在代码里用的是pg，所以，我们这里也用pg。

这样子，如果是已经注册的邮箱，就会得到当前的头像，

如果是没有注册的邮箱，就会得到默认的头像。


推荐阅读：
相关文章