若依前后端分离笔记01

1,登录界面

友情链接;2、验证码的前端实现_哔哩哔哩_bilibili

1.1生成验证码

（1）基本思路：

后端生成一个表达式：

列如1+1=2

1+1=？@2

（1）1+1=？转成图片，传到前端进行展示

（2）把答案存入Reids 中，key存在前端

（2）代码实现：

前端页面：A:\卓面\ruoyi\RuoYi-Vue\ruoyi-ui\src\views 都在views文件中

登录前端页面（login.vue）：A:\卓面\ruoyi\RuoYi-Vue\ruoyi-ui\src\views\login.vue

login.vue107行代码：

created() {

this.getCode();       //方法

this.getCookie();

},

methods: {

getCode() {

  getCodeImg().then(res => {

    this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;

    if (this.captchaEnabled) {

      this.codeUrl = "data:image/gif;base64," + res.img;        //图片

      this.loginForm.uuid = res.uuid;      //res存储

    }

  });

},

login.vue的api接口路径

A:\卓面\ruoyi\RuoYi-Vue\ruoyi-ui\src\api\login.js

下一站：