nodejs+express+svg-captcha验证码实现，在vue中使用

后台接口搭建

1. 安装：cnpm i svg-captcha -S
2. 接口的设置：

   userRouter.get('/getCaptcha', (req, res) => {
       res.header('Access-Control-Allow-Origin', "*");
       const cap = captcha.create({
           size: 4,
           ignoreChars: '0o1il',
           noise: 1,
           color: true,
           background: '#cc9966'
       });
       req.session.captcha = cap.text; // session 存储
       res.type('svg'); // 响应的类型
       res.send(cap.data);
   })

3. 必须使用cookie进行存值：
4. ①安装：cnpm i express-session -S 。   
5. ②在app.js中引入：

    const session = require('express-session');
    app.use(session({
     secret: 'luckystar',
     name: 'captcha',
     resave: false,
     saveUninitialized: true,
     cookie: { maxAge: 50000 },
     rolling: true,
   }));

6. 在vue中进行引用：

   <el-form-item prop="password">
          <el-input placeholder="请输入验证码" v-model="loginForm.captcha">
          //img中的src就是node后台设置的验证码的请求地址
            <img
              class="captcha-img"
              src="http://localhost:3003/user/getCaptcha"
              slot="append"
              @click="changeCaptcha"
            />
          </el-input>
          <i class="el-icon-edit-outline el-icon"></i>
   </el-form-item>
   
   <script>
   methods:{
      changeCaptcha(e){
          e.target.src = `http://localhost:3003/user/getCaptcha?${Math.random()}`;
      }
   }
   </script>

以上是将验证码显示在前段界面上，并没有进行数据的提交