Shulou(Shulou.com)06/02 Report--

This article mainly explains "vue how to achieve CAPTCHA", the content of the article is simple and clear, easy to learn and understand, now please follow the editor's ideas slowly in depth, together to study and learn "vue how to achieve CAPTCHA" bar!

Vue to achieve CAPTCHA methods: 1, create js components; 2, introduce components; 3, define verification objects; 4, initialize nodes; 5, through the validate () method to verify whether the input is correct.

This article operating environment: windows7 system, vue2.9.6 version, DELL G3 computer.

How to implement CAPTCHA with vue

Vue to realize the function of CAPTCHA

The details are as follows

1. Effect.

two。 Code

2.1Creating js components

Content

(you can paste it directly, you need to change the width and height, and modify the width and height in the _ init method)

Function GVerify (options) {/ / create a graphic CAPTCHA object Receive the options object as the parameter this.options = {/ / default options parameter value id:'', / / Container Id canvasId: 'verifyCanvas', / / canvas ID width:' 80width, / / default canvas width height: '30mm, / / default canvas height type:' number' / / default type of graphic verification code blend: mixed alphanumeric type, number: pure number, letter: pure letter code:''} if (Object.prototype.toString.call (options) ='[object Object]') {/ / determine the incoming parameter type for (var i in options) {/ / based on the passed parameter Modify the default parameter value this.options [I] = options [I]}} else {this.options.id = options} this.options.numArr ='0 1, 2, 4, 5, 6, 7, 8, split (',') this.options.letterArr = getAllLetter () this._init () this.refresh ()} GVerify.prototype = {/ * * version number * * / version: '1.0.0' / * * initialization method * * / _ init: function () {var con = document.getElementById (this.options.id) var canvas = document.createElement ('canvas') / / this.options.width = con.offsetWidth > 0? Con.offsetWidth: '30' / / this.options.height = con.offsetHeight > 0? Con.offsetHeight: '30' this.options.width =' 160' this.options.height = '50' canvas.id = this.options.canvasId canvas.width = this.options.height canvas.style.cursor =' pointer' canvas [XSS _ clean] = 'your browser version does not support canvas' con.appendChild (canvas) var parent = function () {parent.refresh ()}} / * * generate verification code * * / refresh: function () {var canvas = document.getElementById (this.options.canvasId) if (canvas.getContext) {var ctx = canvas.getContext ('2d')} ctx.textBaseline =' middle' ctx.fillStyle = randomColor (180,240) ctx.fillRect (0,0, this.options.width) This.options.height) if (this.options.type = = 'blend') {/ / determine the type of CAPTCHA var txtArr = this.options.numArr.concat (this.options.letterArr)} else if (this.options.type =' number') {var txtArr = this.options.numArr} else {var txtArr = this.options.letterArr} for (var I = 1 I {if (valid) {/ / determine whether the login is successful or not let param = {userName: that.ruleForm.username, passWord: that.ruleForm.password} / / this.axios.post (this.$service.user.USER_LOGIN_API.url,param). Then (res= > {/ / console.log ("request successful" Res) / / if (res.data.data! = undefined) {/ / that.$notify ({/ / title: 'system prompt', / / message: 'login successful', / / type: "success" / /}) / save local / / localStorage.setItem ('ms_username',res.data.data.userNickName); / / localStorage.setItem (' token',res.data.data.id); / / self.$router.push ('/ index') / /} else {/ / that.$notify.error ({/ / title: 'system prompt', / / message: 'user account password output error' / /}) / /} localStorage.setItem ('ms_username',' admin') localStorage.setItem ('token',' admin') that.$router.push ('/ index')} else {console.log ('error submittance submission') Return false})}, videoCut () {$('video'). On (' loadedmetadata', function (event) {var duration = Math.ceil (this.duration) this.currentTime = Math.round (Math.random () * duration)})}}. Width _ css {width: 45%;}. Login-wrap {position: relative; width: 100%; height: 100%;}. Ms-title {position: absolute; top: 50%; width: 100% Margin-top:-230px; text-align: center; font-size: 30px; color: # fff;}. Ms-login {position: absolute; left: 50%; top: 50%; width: 300px; height: 13remt; margin:-150px 00-190px; padding: 40px; border-radius: 6%; background: # fff; box-shadow:-2px-2px 17px 1px # 1e9fff;} .login-btn {text-align: center;}. {width: 100%; height 36px: }. Video-bg {min-width: 100%; min-height: 100%; width: 100%; height: 100%; opacity: 0.9;} video {width: 100%; height: 100%; object-fit: cover; / * opacity: 0.6; * /} .loginBtn: hover {box-shadow: 0px 1px 4px rgba (0,0,0,0.3), 0px 0px 20px rgba (0,0,0,0.1) inset;} # v_container {width: auto; height: auto Display: inline-flex; position: relative; top: 1Reme; margin-top:-2Reme;} Thank you for your reading. The above is the content of "how to implement the CAPTCHA in vue". After the study of this article, I believe you have a deeper understanding of how to implement the CAPTCHA in vue, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.