node吧 关注:2,512贴子:4,507
  • 2回复贴,共1

基于Node.js实现图形验证码

只看楼主收藏回复



1楼2023-04-24 09:03回复
    项目目录


    2楼2023-04-24 09:05
    回复
      index.html
      项目根目录index.html文件,头部引用凯格行为验证码js
      代码如下:
      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <!--引入凯格行为验证码js-->
      <script id="KgCaptcha" src="captcha.js?appid=xxx"></script>
      <!--引入凯格行为验证码js-->
      </head>
      <body>
      <!--vue主体-->
      <div id="app"></div>
      <!--vue主体-->
      </body>
      </html>
      main.js
      src/main.js文件中,配置路由
      代码如下:
      import Vue from 'vue'
      import App from './App'
      import router from './router'
      Vue.config.productionTip = false
      // 配置全局路由、组件
      new Vue({
      el: '#app',
      router,
      components: { App },
      template: ''
      })
      App.vue
      src/App.vue文件中,定义html
      代码如下:
      <template>
      <div id="app">
      <!--自定义组件、内容-->
      <form id="form">
      token: <input name="token" id="token">
      <!--凯格行为验证码组件-->
      <div id="captchaBox"></div>
      <!--凯格行为验证码组件-->
      <button type="submit">提交</button>
      </form>
      <!--自定义组件、内容-->
      </div>
      </template>
      <script>
      export default {
      name: 'App',
      beforeCreate () {
      //初始化凯格行为验证码
      kg.captcha({
      // 绑定元素,验证框显示区域
      bind: "#captchaBox",
      // 验证成功事务处理
      success: function(e) {
      console.log(e);
      kg.$('#token').value = e['token']
      },
      // 验证失败事务处理
      failure: function(e) {
      console.log(e);
      },
      // 点击刷新按钮时触发
      refresh: function(e) {
      console.log(e);
      }
      });
      }
      }
      </script>


      4楼2023-04-24 09:07
      回复