文章目录

#1.先看效果图
#1.1开通邮箱SMTP服务
#2.前端(vue+axios)
- #2.1前端源码
- #2.2安装并使用axios,
- - #2.2.1在mian.js中引用axios
- #2.3发送请求
#3.后端(asp.netcorewebapi)
- #3.1asp.netcore配置跨域
- - #3.1.1在startup.cs中配置跨域
  - #3.1.2在.controall(控制器)中使用跨域
- #3.2asp.netcore中配置邮箱
#4.如果对你有帮助，点个赞吧？有疑问可以评论哦，会及时回复

#1.先看效果图

#1.1开通邮箱SMTP服务

#2.前端(vue+axios)

#2.1前端源码

<template><div class="hello"><input type="email" v-model="msg"  placeholder="xxxx.qq.com"><input type="text" v-model="account" placeholder=""><button @click="sendCheck">发送验证码</button></div>
</template><script>export default {name: 'HelloWorld',data() {return {msg:"",account:"",}},methods: {sendCheck(){this.axios({url:'http://localhost:51513/api/checkCode/checkCode', //改成你自己的就可以了method:'post',params:{address:this.msg,         //发送到指定邮箱check:this.account        //发送的验证码 }}).then(function(res){if(res.data==1)  //判断后端的返回值，来确定有没有发送邮件{console.log("发送成功")}}.bind(this))}},
}
</script>

#2.2安装并使用axios,

      npm install --save axios  (在终端安装)

#2.2.1在mian.js中引用axios

 import axios from'axios'Vue.prototype.axios=axios

#2.3发送请求

this.axios({url:'http://localhost:51513/api/checkCode/checkCode', //改成你自己的就可以了method:'post',params:{address:this.msg,         //发送到指定邮箱check:this.account        //发送的验证码 }}).then(function(res){if(res.data==1)  //判断后端的返回值，来确定有没有发送邮件{console.log("发送成功")}}.bind(this))}

#3.后端(asp.netcorewebapi)

#3.1asp.netcore配置跨域

#3.1.1在startup.cs中配置跨域

public void ConfigureServices(IServiceCollection services){//处理跨域,我这里是允许任何的请求方式，请求头，域名services.AddCors(o => o.AddPolicy("any", p => p.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod()));services.AddControllers();}public void Configure(IApplicationBuilder app, IWebHostEnvironment env){if (env.IsDevelopment()){app.UseDeveloperExceptionPage();}app.UseRouting();//使用配置好的服务app.UseCors();app.UseAuthorization();app.UseEndpoints(endpoints =>{endpoints.MapControllers();});}

#3.1.2在.controall(控制器)中使用跨域

   [EnableCors("any")]  //使用跨域[Route("api/[controller]/[action]")] //可以把[action]去掉，访问到controller层即可[ApiController]

#3.2asp.netcore中配置邮箱

public int checkCode(string address,string check){Encoding.RegisterProvider(CodePagesEncodingProvider.Instance);//一定不能去掉，否则不支持gb2312编码格式string smtp = "smtp.qq.com";//qq的SMTP服务器地址SmtpClient _smtpClient = new SmtpClient();_smtpClient.DeliveryMethod = SmtpDeliveryMethod.Network;//指定电子邮件发送方式_smtpClient.Host = smtp; //指定SMTP服务器_smtpClient.Credentials = new System.Net.NetworkCredential("2825408858@qq.com", "开通服务时的凭证");//设置用于验证发件人身份的凭据MailMessage _mailMessage = new MailMessage();//发件人，发件人名 _mailMessage.From = new MailAddress("2825408858@qq.com", "微软工作室");//收件人 _mailMessage.To.Add(address);_mailMessage.SubjectEncoding = System.Text.Encoding.GetEncoding("GB2312");//标题编码_mailMessage.Subject = "验证码";//邮件主题_mailMessage.Body = "验证码:" + check + ",请勿转发！";//邮件内容_mailMessage.BodyEncoding = Encoding.GetEncoding("GB2312");//正文编码_mailMessage.IsBodyHtml = true;//设置为HTML格式_mailMessage.Priority = MailPriority.High;//优先级   _smtpClient.Send(_mailMessage);//发送邮件return 1;}

#4.如果对你有帮助，点个赞吧？有疑问可以评论哦，会及时回复

Vue+ .netcore3.1 模拟QQ邮箱发送验证码相关推荐

Spring Boot 整合163或者qq邮箱发送验证码
前记最近做的项目中注册功能要用到验证码,本来想用阿里云的短信服务,但是有点小贵,就另辟捷径,选择了用邮箱来发送验证码.记录一下整合过程,也希望能帮助一些有需要的人. 正文 1.Spring Boot ...
SpringBoot通过qq邮箱发送验证码
SpringBoot通过qq邮箱发送验证码 1.开启qq授权码 2.编写配置文件 spring:#邮箱验证mail:##163 smtp.163.com(反垃圾系统发送不了了)##qq smtp.qq ...
最简单Java实现QQ邮箱发送验证码
Java使用QQ邮箱发送验证码 1. 开启服务,获取授权码需登录自己的QQ邮箱,打开 POP3/SMTP 服务,并获取授权码. 具体操作: 登录邮箱邮箱首页 "设置" 选择 & ...
java发送qq邮箱验证_JAVA 实现 QQ 邮箱发送验证码功能（不局限于框架）
JAVA 实现 QQ 邮箱发送验证码功能(不局限于框架) 本来想实现 QQ 登录,有域名一直没用过,还得备案,好麻烦,只能过几天再更新啦. 先把实现的发送邮箱验证码更能更新了. 老规矩,更多内容在注释 ...
react-hooks + node 使用qq邮箱发送验证码，验证修改密码
在平常,我们写登录注册react项目时,我们可能会考虑使用QQ邮箱发送验证码登录注册,或者使用QQ邮箱验证来修改密码,下面,我们就来使用QQ邮箱来简单发送个邮件. 1.当我们想在react项目中使用Q ...
Python使用QQ邮箱发送验证码
向指定对象发送验证码在做一些个人的demo或者实战项目等,涉及登录验证的,可以通过该方式实现一个简易的邮箱发送验证码. 该方法使用了Python的smtplib第三方库,需要保证发送者的QQ邮箱开通 ...
QQ邮箱发送验证码功能的实现
1.打开QQ邮箱的xxx服务,记住授权码 2.引入依赖 <dependency> <groupId>org.springframework.boot&l ...
java邮箱发送验证码_java实现使用QQ邮箱发送验证码功能
首先当然是导入jar包了啊如果是maven项目可以进maven资源库进行搜索导入,在此附上地址:https://mvnrepository.com 这是需要导入的jar包 commons-emai ...
Unity中使用QQ邮箱发送验证码
1.打开邮箱设置开启POP3/SMTP服务 2.生成授权码 3.发送验证码按钮事件 public void SendVerificationCode() {// 随机生成验证码Verification ...

Vue+ .netcore3.1 模拟QQ邮箱发送验证码

文章目录

#1.先看效果图

#1.1开通邮箱SMTP服务

#2.前端(vue+axios)

#2.1前端源码

#2.2安装并使用axios,

#2.2.1在mian.js中引用axios

#2.3发送请求

#3.后端(asp.netcorewebapi)

#3.1asp.netcore配置跨域

#3.1.1在startup.cs中配置跨域

#3.1.2在.controall(控制器)中使用跨域

#3.2asp.netcore中配置邮箱

#4.如果对你有帮助，点个赞吧？有疑问可以评论哦，会及时回复

Vue+ .netcore3.1 模拟QQ邮箱发送验证码相关推荐

最新文章

热门文章