前言 上一章我们将后端小程序登录的逻辑写完了，启动本地的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中定义好的方法，至此我们登录的接口已经测试通过完成了。 最后别忘了点赞，收藏，关注哦。 上一章：手摸手带你搭建小程序后端框架(六)