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

This article introduces the relevant knowledge of "how to achieve the simple registration page and send CAPTCHA function in Vue". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. Effect display

two。 Enhanced CAPTCHA and email push management (see later blog)

3. General train of thought

From the user's point of view, analyze the steps at the time of registration:

Fill in your email number

Click the "send CAPTCHA" button

The verification code is received in the mailbox

Fill in the rest of the registration information and the verification code

Registered successfully!

Analyze the steps from the point of view of the system designer:

The system randomly generates six digits

Send the CAPTCHA to the user's mailbox according to the mailbox number provided by the user

Check the verification code according to the information provided by the user

If the verification is successful, enter the data and echo the successful registration of the user!

4. Preparation in advance

Start POP3/SMTP service in QQ Mail

5. Front-end code

New user registration

USER REGISTER

Send email to verify men and women Register now

Do you already have an account? Log in immediately

Import axios from "axios" Export default {mounted () {this.$store.state.yesOrNo = false}, name: "signUp", data: function () {return {form: {Email:', username: ", password:", radio: '1percent, date:', text:''} Rules: {Email: [{required: true, message: 'please enter mailbox', trigger: 'blur'}]}, msg:'}}, methods: {login_asd () {this.$router.replace ({path:'/ login'}) }, open1 () {this.$message ({showClose: true, message: this.msg, type: 'warning'});}, open2 () {this.$message ({showClose: true, message: this.msg, type:' success'}) }, open3 () {this.$message ({showClose: true, message: this.msg, type: 'error'}) }, sendEmail () {this.$refs.form.validate ((valid) = > {if (valid) {let _ this = this axios.post (this.$store.state.url+':8412/user/sendSignUpCode?email='+_this.form.Email,) .catch (function (error) {_ this.msg = "incorrect mailbox format!" _ this.open1 ()}) .then (function (response) {if (response.data.code = 200) {_ this.msg = response.data.msg _ this.open2 ()} else {_ this.msg = response.data.msg _ this.open3 ()} })})} OnSubmit () {this.$refs.form.validate ((valid) = > {if (valid) {let _ this = this Let tmp If (this.form.radio = "1") {tmp = 'male'} else {tmp = 'female'} axios.post (this.$store.state.url+':8412/user/userSignUp?code='+_this.form.text, {email: this.form.Email, username: this.form.username Password: this.form.password, sex: tmp, birthday: this.form.date}) .catch (function (error) {_ this.msg = "there is a problem with the mailbox format!" _ this.open1 ()}) .then (function (response) {if (response.data.code = 200) {_ this.msg = response.data.msg _ this.open2 () _ this.$router.replace ({path:'/ login'}) } else {_ this.msg = response.data.msg _ this.open3 ()}})} * {margin: 0px; padding: 0px; box-sizing: border-box;} body {background-image: url (https://img-blog.csdnimg.cn/76110abf7fb84ee28c50bfbfa7fa8e11.jpg); background-repeat: no-repeat) Background-size: 100%; background-position: 0px-50px;}. Rg_layout {width: 900px; height: 500px; border: 5px solid # EEEEEE; background-color: white; opacity: 0.8; / * Center div horizontally * / margin: auto; margin-top: 100px;} .rg_left {float: left; margin: 15px; width: 20%;}. Rg_left > p:first-child {color: # FFD026; font-size: 20px }. Rg_left > p:last-child {color: # A6A6A6;}. Rg_center {/ * border: 1px solid red;*/ float: left; width: 450px; / * margin: 15pxorientation /}. Rg_right {float: right; margin: 15px;}. Rg_right > p:first-child {font-size: 15px;} .rg_right p a {color: pink;} 6. Back end

The framework used is springboot

Major dependencies of ①

Org.springframework.boot spring-boot-starter-data-redis 2.5.2 javax.mail mail 1.4.7

② regular check mailbox tool class

Package com.example.han.util;import java.util.regex.Matcher;import java.util.regex.Pattern;public class CheckMail {public static boolean checkMail (String mail) {Pattern pattern=Pattern.compile ("\\ w+ ([- +.]\\ w+) * @\\ w+ ([-.]\\ w+) *\.\\ w+ ([-.]\\ w+) *") / /\ winters @ (\ winters.) + [amurz] {2pr 3} Matcher matcher=pattern.matcher (mail); return matcher.matches ();}}

Set and get utility classes for ③ Redis

Package com.example.han.util;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.data.redis.core.StringRedisTemplate;import org.springframework.stereotype.Component;import java.util.concurrent.TimeUnit;@Componentpublic class RedisUtil {@ Autowired private StringRedisTemplate stringRedisTemplate; public void setRedisKey (String key String value long num) {System.out.println ("set redis start!"); stringRedisTemplate.opsForValue () .set (key,value,num,TimeUnit.SECONDS) System.out.println (stringRedisTemplate.opsForValue (). Get (key));} public String getRedisValue (String key) {if (! stringRedisTemplate.hasKey (key)) {return "None";} return stringRedisTemplate.opsForValue () .get (key);}}

④ core service layer code

/ * verify that the mailbox is duplicated * @ param email mailbox number * / @ Override public ResultReturn checkEmailRepeat (String email) throws MyException {if (! CheckMail.checkMail (email)) {throw new MyException (400, "incorrect message format");} if (userRepository.checkEmaillRepeated (email)) {return ResultReturnUtil.fail (USER_EMAIL_REPEATED) } return ResultReturnUtil.success (USER_EMAIL_NOT_REPEATED, email);} / * * send registration verification code * @ param toEamil recipient email * @ return * / @ Override public ResultReturn sendSignUpCode (String toEamil) {/ / asdasd SimpleMailMessage simpleMailMessage = new SimpleMailMessage (); simpleMailMessage.setTo (toEamil); simpleMailMessage.setFrom (fromEmail) SimpleMailMessage.setSubject ("your registration verification code is coming"); Random r = new Random (); int rate = r.nextInt (899999) + 1000000; redisUtil.setRedisKey (toEamil + "YanZheng", rate + ", 60 * 5); / / first deposit redis,key as the mailbox number String content =" Hello,\ n "+"\ t your verification code is:\ n "+ rate SimpleMailMessage.setText (content); try {javaMailSender.send (simpleMailMessage);} catch (Exception e) {return ResultReturnUtil.fail ("send failed!") ;} return ResultReturnUtil.success ("sent successfully!" , toEamil) } / * user Registration * @ basic user Information required for param userSignUpVO Registration * @ param code Registration CAPTCHA sent to mailbox * / @ Override public ResultReturn UserSignUp (UserSignUpVO userSignUpVO, int code) throws MyException {if (! CheckMail.checkMail (userSignUpVO.getEmail () {/ / this is throw new MyException when the mailbox is in the wrong format "incorrect message format") } if (userRepository.checkEmaillRepeated (userSignUpVO.getEmail () {/ / return ResultReturnUtil.fail (USER_EMAIL_REPEATED) when the mailbox is registered repeatedly;} String redisCode = redisUtil.getRedisValue (userSignUpVO.getEmail () + "YanZheng"); / / compare code with redis if (! redisCode.equals ("" + code)) {return ResultReturnUtil.fail (WRONG_VERIFICATION_CODE) } UserDO user = new UserDO (); user.setEmail (userSignUpVO.getEmail ()); user.setUsername (userSignUpVO.getUsername ()); user.setPassword (userSignUpVO.getPassword ()); user.setSex (userSignUpVO.getSex ()); user.setBirthday (userSignUpVO.getBirthday ()); if (userRepository.insertUser (user)) {return ResultReturnUtil.success (USER_SIGNUP_SUCCESS, user.getEmail ()) } return ResultReturnUtil.fail (USER_SIGNUP_FAILED);} "how to implement the simple registration page and send CAPTCHA function in Vue" is introduced here. Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.