【个人向】实训第一周小结

一点碎碎念

专业的实训风风火火的来了，由于这个实训老师很看重，所以实习只好推迟，这次的文档也是要求按毕业设计的规则来的，所以我们从JAVA大作业中脱坑后马上又跳坑就开始做了/(ㄒoㄒ)/。我的题目是一个在线日语单词的记忆网站，这是我自己很早就想做的一个平台，就是想着出来可以帮自己坚持学日语呢。
因为只有三周时间，所以这次我觉得自己能完成核心的记忆、测试，以及查词的功能就足够了。另外自己选择主要技术是vue.js + koa2，因为表之间的关联强， 所以选择了mysql，另外还使用了redis来做辅助存储。因为还没有学过koa和redis，也所以这次正好可以练练，反正让我用JAVA写后台我是不愿意啦>_<。

页面设计

页面的设计自然是摆在最前面的，自己思考了好久才确定好了设计的风格，脑海里就是希望能简洁+可爱+扁平化，因为想要给人是一种比较有“活力”的网站，所以最后还是选了蓝绿色来做主题色，展示部分静态页面：



再来摆一下自己设计的LOGO（字体用的是现成的）和默认头像，还是第一次自用AI按自己的想法画出了正经的东西，虽然还是有很多不足（总感觉还是有点违和），但是不能在这上面花太多精力了，噗：

数据库相关

单词、意思与例句的关系
一般来说，一个单词会有多种意思（1:n），一种意思又对应多个例句（1:n），这里就是比较让我纠结的地方，因为如果全部单独分离出来，就会有单词表，意思表还有例句表，这样的话就要单词+意思两个字段才能唯一确定某一个条目。后来尝试这样做后发现，其实字段有很多重复了，而且要查询例句也很麻烦。所以最后把意思字段合并在单词表中了，只是一个单词可能对应了多条。我自己觉得，这样可能会出现一些重复的字段内容，但是相比刚才的想法，这样还是更要好一点。

验证码的存储
我准备做一个邮箱验证的功能，因为验证码是过一段时间会失效的，并且在用户断开网络后，重新连接，还是可能能用，所以最好还是存在数据库里面，但是存在内存里就够了（因为它还是会失效），所以这里就使用了redis来作为存储辅助。

前端相关

Q：vue-cli配置LESS解析
安装模块less、less-loader、style-loader、css-loader、stylus-loader。
在webpack.base.config.js中module中的rules追加：

{
   test: /\.less$/,
   loader:'style-loader!css-loader!stylus-loader', 
   include: []
}

此处如果不加入include:[]，编译less就会报错（还不知道是为啥...）。
配置好后，style加入lang属性为less即可：

<style  scoped lang="less">
</style>

Q：table-cell垂直居中起效的前置条件
table-cell类似于表格中的tr，所以按照verticle-align: middle和text-align: center理论上是可以居中的。

以下是我自己的测试结果：
table-cell这个盒子必须要有宽度和高度，要不然它就会只占内容那么个大小。
并且宽度和高度必须是具体的数值，不能是百分比，要不然也没用（除非这个时候又有一个父盒子，设置为display: table，table-cell就会占满这个table）。
首先，如果table-cell里面的内容是inline/inline-block，是可以垂直居中的。
如果是block的块，它只会在垂直上显示居中，水平方向要设置margin: 0 auto才能实现。

Q：table-cell水平排列起效的前置条件
做的时候碰到了table-cell的块不能并排的情况。

首先，如果父盒子是display: table，盒子都会挤在一条，并且按照设置的宽度比进行一个分配。

这里的情况是，父盒子为block，也能并排在一起。

Q：在内容高度不足的时候，Footer能否贴近底端？
传统的CSS来说，给容器设置一个min-height应该是可以定位，后面可以借助CSS3的sticky这个选项。

Q：v-charts进行图表统计展示
v-charts是饿了么团队开发的一些vue图表组件，目前我还是简单的按照文档用了下，还是挺方便的，文档传送门：https://v-charts.js.org/

Q：for...of理解错误
必须要迭代器（Array，Set，Map等）才能进行类似操作：

for(var [key, value] of sth) {
  // ...
}

而普通的object并不是。

后端相关

Q：Koa2初认识
使用koa2-generator搭建出一个项目结构。根据koa-router配置的内容来接受请求。bodyparser帮助我们规格化接收到的数据。

Q：如何实现token验证
有一个很常用的模块jsonwebtoken，可以直接根据一些信息生成一个token。

 const token =const jwt = require('jsonwebtoken')
 jwt.sign({
        ...: ...
      }, '...', {
        expiresIn: '1h'  //过期时间
      });

Q: Koa2解决跨域
使用koa2-cors模块，很容易就能实现：

app.use(cors({
  origin: 'http://localhost:8080',
  exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'],
  maxAge: 5,
  credentials: true,
  allowMethods: ['GET', 'POST', 'DELETE', 'PUT'],
  allowHeaders: ['Content-Type', 'Authorization', 'Accept']
}))

Q：获取用户的IP地址
这里要获取原本的reques对象，直接let req = ctx.req就是原本的对象，然后：

req.headers['x-forwarded-for'] ||
        req.connection.remoteAddress ||
        req.socket.remoteAddress ||
        req.connection.socket.remoteAddress;

Q：传输过程中带有特殊字符，造成解析错误
使用axios发送数据的时候，如果是设置了：

   headers: {
     'Content-Type': 'application/x-www-form-urlencoded'
   }

后台解析数据的时候，会解析错误。原因是因为发送的时候是一个整的JSON字符串，也就是它是一个key，它的属性为空，所以解析必定出错。
解决方法是发送的时候加一个转化的函数：

transformRequest: [function (data) {
    let ret = ''
    for (let it in data) {
      ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
    }
    return ret
  }]

Q：Koa2操作redis
电脑安装好redis，打开redis-cli。
项目中引入npm包redis，查看官方文档会发现很容易操作：https://npmjs.com/package/redis

Q：实现邮箱验证
使用nodemailer这个包，在网易邮箱或者QQ邮箱之类的注册好一个账号，开启它的SMTP服务，设置密码啥的。

var config = {
  host: '...',
  port: 25,
  auth: {
    user: '...',
    pass: '...'
  }
}

var transporter = nodemailer.createTransport(config)

module.exports = function (mail) {
  transporter.sendMail(mail, function (error, info) {
    if(error) {
      return console.log(error);
    }
    console.log('mail sent:', info.response);
  });
};

这个导出的模块函数直接接受一个写了邮件信息的对象，执行后就会去发送了：

var mail = {
  from: 'xxx <..@.>',
  subject: '...',
  to: '..@..',
  text: '...'
};

Q：git退出服务的时候端口还是占用的情况
对于后台应用，输入npm run dev方式启动是可以自动刷新服务的，如果是npm run start按了ctrl+c或者ctrl+d它的端口还是会被占用（应该是开了另一个线程吧）。
windows的话，输入netstat -aon | findstr '3000'就可以找到那个PID是多少，然后再taskkill /pid 那个进程ID /f强制进行关闭就可以了。

小结

有一些东西都是初次接触，所以目前了解的都还比较浅，我的感觉就是好好看文档真的很重要，还有就是发现自己在计算机网络有的方面存在一切误解，希望自己能发现更多慢慢更正过来。再然后一个问题就是自己的进度不算快，仔细想了想这样的任务量老师可能还不会满意，所以下一个礼拜要抓紧把基本服务做好，然后把后台管理也尽量做出来。