2019年3月12日早晨开工nuxt接口块入门学习

1、昨天使用element自带的icon属性
在这里插入图片描述
果然不好用啊,必须自己导入iconfont图标。但是由于类名在这里插入图片描述已经是固定,无法在el-put里加入新标签,后来百度简书中发现。
首先,控制台输入这段代码可以方便我们直接选取所以icon图标,省去一个个点。
var icons = document.querySelectorAll(’.icon-gouwuche1’);

var auto_click = function(i) {
if (i < icons.length) {
setTimeout(function() {
icons.item(i).click();
auto_click(i + 1);
},
600);
}
};
auto_click(0);
在这里插入图片描述
发现简书上的iconfont引入需要改最初的前缀,我之前首页已经大量用了icon前缀的标签,修改太麻烦,后来直接想了想,看了下el-icon的scss,在这里插入图片描述
发现里面的content: "\e600"格式和阿里的图标一样,突发奇想,我是不是可以在线引用阿里iconfont的图标然后用他的unicode码。
在这里插入图片描述
果然成功了,所以,最简单方法,直接去改unicode码就行,图标会覆盖掉你element-ui的unicode码。
2、百度地图的接口,接收的是longtide和latitude,经度和纬度,根据经纬度进行定位。

3、开始用户注册页面,需求分析。
在这里插入图片描述
想要开启验证接口服务,必须开启腾讯的smtp服务。
在这里插入图片描述

接下来是接口随机生成4位数验证码。(生成16进制数。从第3位开始取6个,转成大写)在这里插入图片描述
验证码失效期,根据系统时间指定
在这里插入图片描述
这里用的60*60*1000个人认为是60分钟,大佬说是60秒。看看后面就知道了。

![在这里插入图片描述](https://img-blog.csdnimg.cn/20190312101326878.png
以上三个包,(npm ls XXXX 可以查看包的版本号)
koa-router是路由导航,
koa-redis用来保存用户特征(当用户数量非常庞大时候,必须有一个服务机构准确赋予每个用户特征,去验证对应邮箱),
nodemailer是可以让你本机作为服务端发送邮箱。
在这里插入图片描述
又是两个包,都是koa提供的,port host 端口 ,本地配置策略。
------------------------------------------------------------------------------------------------------------
刚朋友问我jsp设置charset=“utf-8”仍发生中文字符乱码现象。
经百度,是因为POST传参并获取,解析param保存格式有问题。
String name = request.getParameter(“name”);
返回乱码
要在头部加入代码request.setCharacterEncoding(“utf-8”);可解决
-------------------------------------------------------------------------------------------------
继续学习。.

------------------------------------------------差不多过了3小时--------------------------------------------------
回顾一下3小时的koa2流程
1、server目录下创建dbs,dbs中创建models(对象关系模型),interface(接口)
在这里插入图片描述 在这里插入图片描述

2、在models创建user(collection对象即表),
在这里插入图片描述
3、在dbs文件夹中配置config.js(数据库的配置信息),以及封装基本方法。
在这里插入图片描述
4、在interface下的utils文件夹中,创建axios.js工具
在这里插入图片描述
5、在utils文件夹中,创建passport.js工具
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190312133321585.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTk2NzM4,size_16,color_FFFFFF,t_70
6、在interface接口文件夹中写user.js接口
在这里插入图片描述
此处要导入之前写的包,以及需要的包在这里插入图片描述

打开路由接口,开始写各个接口逻辑(登录,注册,验证码,退出,取用户名)
在这里插入图片描述
7、打开总配置文件,index.js,加载需要的包。
在这里插入图片描述

8、npm i xxx 1-7步骤所需要的所有包。
9、use所有包
在这里插入图片描述
10、引入users .js路由
在这里插入图片描述
11、运行redis (服务端) cmd: redis-server
在这里插入图片描述

12、cmd管理员状态启动mongodb服务。(数据库)
13、npm 开启进程
在这里插入图片描述
13、试验开始。

在这里插入图片描述
14、这里element-ui有个搞脑子的点,就是校验输入框内容是否合法的问题。
有2种方法,
第一种是单个框验证
在这里插入图片描述
this.$refs.[‘ruleForm’].validateField('email, (valid) => {
emailPass =valid //注:(校验通过valid返回0,故 !emailPass则return true)
})
第二种全部验证
this.$refs.[‘ruleForm’].valicate((valid) => {
allPass = valid //注:(校验全部通过valid返回true,故 allPass 则return true)
})
搞脑子啊搞脑子。多记。
15、当验证通过后,就要发送一个注册接口/users/signup
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190312180426742.png
这里引出一个MD5 加密问题,需要先安装包 npm i CryptoJS ,给密码加密,同时转成字符串类型。---------------------------------------------------------------------------------------------
在这里插入图片描述以及对中文用户名转码问题。

又过了好久…
2019年3月12日2019年3月12日20:35:34。
一、解构赋值:
axios返回的对象
在这里插入图片描述
const {status, data:{user}} = await …
status是axios最外层返回对象

猜你喜欢

转载自blog.csdn.net/qq_40196738/article/details/88413598