Vue学习使用系列九【axiox全局默认配置以及结合Asp.NetCore3.1 WebApi 生成显示Base64的图形验证码】
1：前端code
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <style type="text/css">
9 .imgshow {
10 width: 260px;
11 height: 160px;
12 border: 1px solid #666666;
13 }
14
15 .imgnoshow {
16 width: 80px;
17 height: 20px;
18 }
19 </style>
20 <script src="../assets/vue.js"></script>
21 <script src="../assets/axios.js"></script>
22 </head>
23
24 <body>
25 <div id="app">
26 <div v-if="person">
27 <!--加一个判断，防止前端报错不能够识别name等 person的属性，由于加载的先后顺序问题，为null时是没有person.name等属性-->
28 <p>name: {{person.name}}</p>
29 <p>age: {{person.age}}</p>
30 <div @click="getYanzCode" :class="imgshow"><img :src="imgshowpath" alt="not found" /></div>
31 <div><img :src="tempdata" alt="not found" /> </div>
32 <div>{{imgshowpath}}</div>
33 <div>{{tempdata}}</div>
34 </div>
35 </div>
36 <script>
37 //axiox全局默认配置
38 axios.defaults.baseURL = "http://localhost:5000/api/"; //上下的通常就是来使用controller+action的路径等
39 axios.defaults.timeout = 5000;
40 var app = new Vue({
41 el: "#app",
42 data: {
43 person: null,
44 classflag: true,
45 imgshow: "imgshow",
46 imgshowpath: "",
47 tempdata: ""
48 },
49 methods: {
50 dopost01: function() {
51 /*
52 后端的code
53 [HttpPost("postdata01")]
54 public dynamic postdata01(string name, int age)
55 */
56 axios({
57 method: "post",
58 url: "appsetjson/postdata01", //后续就可以直接写上controller+路由名称或者action名称等
59 //自动拼接成一个完整的路径==> http://localhost:5000/api/appsetjson/postdata01?name=qq%E7%88%B1&age=19
60 params: {
61 name: "qq爱",
62 age: 19
63 }
64 }).then(respos => {
65 this.person = respos.data;
66 })
67 },
68 dopostimg: function() {
69 var _this = this;
70 axios({
71 //responseType: "arraybuffer",
72 method: "post",
73 url: "appsetjson/dopostimg",
74 }).then(respos => {
75 console.log("=>" + respos.data.data); //respos或者respos.data=>都是[object Object]
76 _this.imgshowpath = respos.data.data; // 'data:image/png;base64,' + btoa(new Uint8Array(respos.data.data).reduce((data, byte) => data + String.fromCharCode(byte), ''));
77 _this.tempdata = respos.data.data; // 'data:image/png;base64,' + btoa(new Uint8Array(respos.data.data).reduce((data, byte) => data + String.fromCharCode(byte), ''));
78 })
79 },
80 getYanzCode: function() {
81 this.dopostimg();
82 return false;
83 }
84 },
85 mounted: function() {
86 this.dopost01();
87 // this.dopostimg();
88 }
89
90 })
91 </script>
92 </body>
93
94 </html>
2:测试效果：
3：后端截图2020-10-08的部分测试Code；
1 using System;
2 namespace WebApiDemo.Controllers
3 {
4 using Microsoft.AspNetCore.Cors;
5 using Microsoft.AspNetCore.Mvc;
6 using Microsoft.Extensions.Configuration;
7 using Microsoft.Extensions.Options;
8 using System.IO;
9 using WebApiDemo.Filters;
10 using System.Drawing;
11 using System.Drawing.Imaging;
12
13 [ApiController]
14 [Route("api/[controller]")]
15 [MyFilter]
16 public class AppSetjsonController : ControllerBase
17 {
18 private IConfiguration _Configuration;
19 public Person _person { get; set; }
20 public Appset01 _jwtobj { get; set; }
21 public AppSetjsonController(IConfiguration configuration, IOptions<Person> options)
22 {
23 this._Configuration = configuration;
24 this._person = options.Value;
25 }
26 [HttpGet]
27 [Route("getAppSetting")]
28 public ApiResult<Appset01> getAppSetting()
29 {
30 ApiResult<Appset01> dic = new ApiResult<Appset01>();
31 try
32 {
33 //BindNonPublicProperties 默认为false全部获取，true为不获取私有的字段
34 dic.data = _Configuration.GetSection("Appset01").Get<Appset01>(c => c.BindNonPublicProperties = true);
35 Console.WriteLine("addr=" + _person.addr + ",name=" + _person.name + ", book[0].name=" + _person.books[0].bname);
36 dic.message = "获取成功！";
37 }
38 catch (Exception ex)
39 {
40 dic.message = "获取失败：" + ex.Message;
41 }
42 return dic;
43 }
44 [HttpPost("postdata01")]
45 public dynamic postdata01(string name, int age)
46 {
47 dynamic dy = new { name = name, age = age };
48 return dy;
49 }
50 [HttpPost("postdata02")]
51 public dynamic postdata02([FromBody] tempPerson person)
52 {
53 dynamic dy = new { name = person.name, age = person.age };
54 return dy;
55 }
56 [HttpPost("dopostimg")]
57 public dynamic dopostimg()
58 {
59 try
60 {
61 return new { data = MyCodeGrapHelper.GetImgCode() };
62 }
63 catch (Exception ex)
64 {
65 return new { data = ex.Message };
66 }
67 }
68
69 [HttpPost("postdata03/{name}/{age}")]
70 public dynamic postdata03(string name, int age)
71 {
72 dynamic dy = new { name = name, age = age };
73 return dy;
74 }
75 }
76
77 public class imgCodeBase64
78 {
79 public string imgPath { get; set; }
80 public string key { get; set; }
81 public int code { get; set; } = 500;
82 }
83 public class tempPerson
84 {
85 public string name { get; set; }
86 public int age { get; set; }
87 }
88 }
4：验证码生成的code帮助类
1 using System;
2 using System.Collections.Generic;
3 using System.Linq;
4 using System.Threading.Tasks;
5
6 namespace WebApiDemo
7 {
8 using System.Drawing;
9 using System.Drawing.Imaging;
10 using System.IO;
11 public class MyCodeGrapHelper
12 {
13 /// <summary>
14 /// 生成随机验证码图片
15 /// </summary>
16 /// <param name="captchaCode">随机验证码</param>
17 /// <param name="width">宽为0将根据验证码长度自动匹配合适宽度</param>
18 /// <param name="height">高</param>
19 /// <returns></returns>
20 private static MemoryStream GenerateCaptchaImage(string captchaCode, int width = 0, int height = 30)
21 {
22 //验证码颜色集合
23 Color[] c = { Color.Black, Color.Red, Color.DarkBlue, Color.Green, Color.Orange, Color.Brown, Color.DarkCyan, Color.Purple };
24
25 //验证码字体集合
26 string[] fonts = { "Verdana", "Microsoft Sans Serif", "Comic Sans MS", "Arial" };
27
28 //定义图像的大小，生成图像的实例
29 var image = new Bitmap(width == 0 ? captchaCode.Length * 25 : width, height);
30
31 var g = Graphics.FromImage(image);
32
33 //背景设为白色
34 g.Clear(Color.WhiteSmoke);
35
36 var random = new Random();
37 //绘制干扰点
38 for (var i = 0; i < 40; i++)
39 {
40 var x = random.Next(image.Width);
41 var y = random.Next(image.Height);
42 g.DrawRectangle(new Pen(c[random.Next(c.Length)], 0), x, y, 1, 1);
43 }
44
45 //验证码绘制在g中
46 for (var i = 0; i < captchaCode.Length; i++)
47 {
48 //随机颜色索引值
49 var cindex = random.Next(c.Length);
50
51 //随机字体索引值
52 var findex = random.Next(fonts.Length);
53
54 //字体
55 var f = new Font(fonts[findex], 15, FontStyle.Bold);
56
57 //颜色
58 Brush b = new SolidBrush(c[cindex]);
59
60 var ii = 4;
61 if ((i + 1) % 2 == 0)
62 ii = 2;
63
64 //绘制一个验证字符
65 g.DrawString(captchaCode.Substring(i, 1), f, b, 10 + (i * 15), ii);
66 }
67
68 var ms = new MemoryStream();
69 image.Save(ms, ImageFormat.Png);
70
71 g.Dispose();
72 image.Dispose();
73
74 return ms;
75 }
76
77 public static string GetImgCode(int codelength = 4)
78 {
79 int[] intarry = new int[] { 1, 2, 3, 4, 5, 6, 7, 8, 9, 0 };
80 List<int> listtemp = new List<int>();
81 while (listtemp.Count <= codelength)
82 {
83 int code = intarry[new Random().Next(0, intarry.Length)];
84 if (!listtemp.Contains(code))
85 {
86 listtemp.Add(code);
87 }
88 }
89 string captchaCode = string.Join("", listtemp);
90 MemoryStream ms = GenerateCaptchaImage(captchaCode);
91 string arrystr = ImageToBase64(ms);
92 ms.Dispose();
93 return arrystr;
94 }
95
96 private static string ImageToBase64(MemoryStream src)
97 {
98 return "data:image/png;base64," + Convert.ToBase64String(src.ToArray());
99 }
100 }
101 }
Vue学习使用系列九【axiox全局默认配置以及结合Asp.NetCore3.1 WebApi 生成显示Base64的图形验证码】的更多相关文章
- Vue学习之vue-cli脚手架下载安装及配置
Vue学习之vue-cli脚手架下载安装及配置:https://www.cnblogs.com/clschao/articles/10650862.html 1. 先下载node.js,下载地址:ht ...
- day 84 Vue学习之vue-cli脚手架下载安装及配置
Vue学习之vue-cli脚手架下载安装及配置 1. 先下载node.js,下载地址:https://nodejs.org/en/download/ 找个目录保存,解压下载的文件,然后配置环境变量 ...
- Vue学习笔记-nodejs+vue-cli4+webpack按装配置+项目创建
一 使用环境: windows 7 64位操作系统 二 Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nodejs的官网下载 https: ...
- day 85 Vue学习之vue-cli脚手架下载安装及配置
1. 先下载node.js,下载地址:https://nodejs.org/en/download/ 找个目录保存,解压下载的文件,然后配置环境变量,将下面的路径配置到环境变量中. 由于 Node ...
- AntDesign vue学习笔记（九）自定义文件上传
第七节时提到,上传文件时实际可能需要传输一个token. 1.查看vue antdesign文档https://vue.ant.design/components/upload-cn/ 2.使用cus ...
- SpringCloud系列九：SpringCloudConfig 基础配置（SpringCloudConfig 的基本概念、配置 SpringCloudConfig 服务端、抓取配置文件信息、客户端使用 SpringCloudConfig 进行配置、单仓库目录匹配、应用仓库自动选择、仓库匹配模式）
1.概念:SpringCloudConfig 基础配置 2.具体内容 通过名词就可以发现,SpringCloudConfig 核心作用一定就在于进行配置文件的管理上.也就是说为了更好的进行所有微服务的 ...
- 步步为营 SharePoint 开发学习笔记系列总结
转:http://www.cnblogs.com/springyangwc/archive/2011/08/03/2126763.html 概要 为时20多天的sharepoint开发学习笔记系列终于 ...
- vue 学习 渲染、v-指令
vue渲染 在组件中data是一个方法里面的值要是一个对象return出去 export default { name: "HelloWorld", data() { return ...
- AntDesign vue学习笔记（七）Form 读写与图片上传
AntDesign Form使用布局相比传统Jquery有点繁琐 (一)先读写一个简单的input为例 <a-form :form="form" layout="v ...
随机推荐
- Unity WebGL
路过弄了个unity Unity导出WebGL不支持c#socket和unity的network 可以用javascript的websocket实现... c#一般通过www从phpserver获取. ...
- 常用mac命令
~/.bash_profile 可以添加常用的一些命令别名alias unity="open -n /Applications/Unity/Unity.app"
- 使用Javax.mail 发送邮件
使用Javax.mail 发送邮件 详细说明都在代码中: 引入依赖 <!--sun定义的一套接收.发送电子邮件的API--> <dependency> < ...
- Rng(求逆元)
Problem Description Avin is studying how to synthesize data. Given an integer n, he constructs an in ...
- 编程体系结构(02)：Java异常体系
本文源码:GitHub·点这里 || GitEE·点这里 一.异常简介 优秀的程序代码,都在追求高效,安全,和低错误率,但是程序中的异常是无法避免的,降低异常出现的频率是关键,异常出现如何处理是另一个 ...
- vue mixin混入
基本结构 export default { data() { return {} }, computed: { }, methods: { }, filters: { }, created() { } ...
- webstorm中emmet展开a标签和行内元素不换行的解决办法
大家好我是木瓜太香,大家在使用 webstorm 编写 html 的时候可能会遇到展开部分标签挨在一起的情况,相信很多小伙伴都想解决这个问题,接下来我们就开始吧! 先来看看我们输入如下 emmet 代 ...
- 记tp5.1使用composer PhpOffice的xlsx表格文件导入数据库
在项目环境下composer require phpoffice/phpspreadsheet在项目中引用use PhpOffice\PhpSpreadsheet\IOFactory; 下面是 上传x ...
- python中RGB色彩
turtle.colormode(mode)来改变色彩数值的使用 如果在修改颜色时写turtle.colormode(1.0) ,就需要使用RGB小数模式来去改变颜色 如果在修改颜色时写turtle. ...
- maximo入门---开发者提要
1.添加控件 在一个程序设计器里添加控件,控件必须要和这个程序对象(这个程序关联的表)的一个属性绑定 ps maximo挺高级的,比如一个date类型的输入框,会自动给他补上时间控件 2.复制程序 复 ...