前后台数据交互的小demo

今天周末，正好可以安心的学习之前的内容，也算一个回顾总结吧，今天做了一个重要的内容就是通过获取到前端的token来获取到后台中数据库中的数据然后显示出来，话不多说，直接上成果
1，在进行项目开发前先看看今天要实现的最终结果吧，那就直接上图，哈哈哈，简单通俗登录界面，输入用户的名便可以生成token，然后就可以登录，进入页面看到相应的数据了
这就是要看到的结果了
最终的结果就是上面那样的效果，虽然看似简单，但自己也花了大半个下午才搞出来，过程艰辛，结果令人欣慰。这次主要涉及到一些基础且重要的知识点：
（1）、用户的登录
（2）、token
（3）、axios后台获取数据
（4）、localStoreage来获取用户的token存取
（5）、v-model数据的双向绑定
好了下面就准备战斗了，哈哈哈
1、先创建好vue项目和egg项目，同时要配置好，这些官网文档很多就不多做赘述了
2、创建好数据库然后在egg框架中的config配置，然后就可以使用了
3、先进行后端的编写，下面先来看看后台的具体的目录

如图所示，主要还是在app下进行
（1）、先创建model来进行数据库中模型的创建

这样在数据库有一个hellos的表，就可以存储相关的数据。
（2）、数据库中的表创建完后就是运行，然后真正的在mysql数据库中有这么一个表

这样运行一下后台的服务器，数据库就会有一张hellos的表。
数据库创建完成后现在的主要任务就是如何从数据库拿到数据然后显示在前端上
（3）、这个时候就需要控制器和服务层上场了，来获取后台的数据然后显示在前端上，不过先不着急，先把后台的接口路由设置好，免得过后忘了

通过router.get来实现页面的跳转含义就是接口是hello,然后开始执行controller下的hello下的Index方法。具体的han’s，通过router.post来实现对登录信息的提交
（4）、下面就是开始整体布局控制器和服务层了
首先是控制层
在这一步中重要的就是生成token,通过sign()方法生成token,那根据什么生成token呢？通过一个是用户的名另一个就是通过之前配置好的jwt下的secret来设置
（5）、service的设置

这一步主要的就是通过findAll()来获取到数据库中的数据。这些做完了就可以通过使用postman来查看获取到的数据了。
（6）、后台的编写就先暂告一段落了，进行前端的编写。对了还需要通过middleware来实现对token 的验证
4、前端的编写
（1）、

前端需要登录组件，然后登录进去之后进入首页的组件也就是需要两个组件，这个地方用到了v-model数据的双向绑定。这个地方中自已遇到一个问题就是axios安装了并且引入了，而且也没有报任何的错，但是数据就是显示不出来，经过多方查证才知道原来把生命周期函数写在了methods中，这是很大的错误，所以导致数据没有显示出来，当把created（）生命周期函数拿到外面的时候就可以正常加载数据了。
（2）、下面就是前端中的路由定义了

定义了两个路由，同时还定义了路由守卫，路由守卫要实现的功能就是，当如果是直接跳转到登录页的时候那就好办了，直接跳转就是，但是，目标页不是登录页的时候就要判断是否有token了，如果有token就跳转到相关的页面，如果没有token就只能回到登录页了。
以上就是今天下午把之前的知识又巩固提高了一下吧，有不对的地方希望大家多多交流，共同进步。以后自己也要养成随时总结的习惯，加油！