若依前后端分离笔记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

下一站：