手摸手带你搭建小程序后端框架（七）

　　前言
　　上一章我们将后端小程序登录的逻辑写完了，启动本地的mysql和redis，然后启动项目，这里别忘了后端配置的小程序appId一定要和前端小程序使用的appid一定要一致，否则解密用户信息的时候会报错，这一章我们继续完成前端小程序来调用写好的后端登录接口。正文
　　为了区分开发环境和生产环境，我们在uniapp中也将这两个环境的配置文件分开。我们在项目的根目录下新建.env.development和.env.production两个文件分别对应着开发环境和生产环境的配置，然后在package.json的scripts命令行后面分别添加--mode development和--mode production参数，cli会自动寻找对应的配置文件进行合并，如图。
　　环境配置文件
　　在这里我们先在开发环境.env.development配置文件里定义请求后端接口的基础路径，这里是以键值对的方式定义的，如图我们定义VUE_APP_BASEURL来表示，以后如果有其他的参数也是用同样的方法来定义。
　　定义请求路径
　　这样我们在前面封装的request.js中用到的请求路径就可以优化修改一下了。
　　修改前
　　修改后
　　这里直接可以用process.env.VUE_APP_BASEURL来取到在.env.development配置文件中定义的变量了，其中process是node.js中的对象属性。
　　我们在项目的src/pages下新建login登录页面，在pages.json中配置好页面路径信息，就可以来测试使用我们写好的登录接口了，如图。
　　登录页面中测试登录接口
　　登录请求接口
　　这里从小程序提供的api中拿到接口需要的参数就可以了。我们可以看到已经返回了解密后用户的信息和token了。我们查看数据库chat_user表可以看到已经插入了一条用户数据，用redis客户端也可以以看到已经存储了用户登录信息和失效时间，token等信息。
　　chat_user表数据
　　redis存储的用户登录信息
　　tips:这里要提示一下，由于小程序官方的限制，个人小程序解密后拿到的用户头像是默认头像，拿不到用户真实头像（企业认证过的是可以的）昵称都是微信用户（企业认证过是可以拿到真实昵称），用户性别现在也是拿不到的。
　　测试登录接口成功，接下来我们就可以把接口返回的用户信息和token存储到store中了。以便在后续的请求中携带token和页面用户信息展示等。
　　将接口返回的信息存储到store中
　　小程序中缓存存储的信息
　　这里调用的setToken方法是我们之前在stroe的mutations中定义好的方法，至此我们登录的接口已经测试通过完成了。
　　最后别忘了点赞，收藏，关注哦。
　　上一章：手摸手带你搭建小程序后端框架(六)