C#中GDI+绘图应用（柱形图、折线图和饼形图）

目录

一、柱形图

1.示例源码

2.生成效果

二、折线图

1.示例源码

2.生成效果

三、饼形图 

1.示例源码

2.生成效果

        GDI+绘制的一些常用的图形，其中包括柱形图、折线图和饼形图。

一、柱形图

        柱形图也称为条形图，是程序开发中比较常用的一种图表技术。柱形图是通过Graphics 类中的FillRectangle()方法实现的。 
public void FillRectangle (Brush brush,int x,int y,int width,int height)
参    数说    明
brush确定填充特性的Brush
X要填充矩形左上角的x坐标
y要填充矩形左上角的y坐标
width要填充矩形的宽度
height要填充矩形的高度

1.示例源码

         ,NET 8.0的项目中需要使用NuGet程序包：system.data.sqlclient.4.8.5.nupkg或更高级版本。否则不能使用SqlClient的方法。

//Form1.cs
//投票窗口
using System.Data.SqlClient;namespace _12
{public partial class Form1 : Form{SqlConnection? conn;public Form1(){InitializeComponent();}private void Form1_Load(object sender, EventArgs e){ClientSize = new Size(292, 192);        //设置Form1工作区域StartPosition = FormStartPosition.CenterScreen;radioButton1.Checked = false;radioButton1.Text = "支付宝";radioButton2.Text = "微信支付";radioButton3.Text = "京东白条";radioButton4.Text = "小度钱包";button1.Text = "投一票吧";button2.Text = "投票结果";groupBox1.Text = "投票窗口";radioButton1.Location = new Point(26, 37);radioButton2.Location = new Point(26, 68);radioButton3.Location = new Point(26, 101);radioButton4.Location = new Point(26, 132);radioButton1.Size = new Size(60, 16);radioButton2.Size = new Size(60, 16);radioButton3.Size = new Size(60, 16);radioButton4.Size = new Size(60, 16);button1.Location = new Point(195, 94);button2.Location = new Point(195, 132);button1.Size = new Size(75, 23);button2.Size = new Size(75, 23);}private void Button1_Click(object sender, EventArgs e){try{conn = new SqlConnection(@"server=DESKTOP-S11C97H\SQLEXPRESS;database=db_CSharp;integrated security = True");string sqlstr = "";if (radioButton1.Checked){sqlstr = "update tb_vote set 票数=票数+1 where 选项='" + radioButton1.Text + "'";}if (radioButton2.Checked){sqlstr = "update tb_vote set 票数=票数+1 where 选项='" + radioButton2.Text + "'";}if (radioButton3.Checked){sqlstr = "update tb_vote set 票数=票数+1 where 选项='" + radioButton3.Text + "'";}if (radioButton4.Checked){sqlstr = "update tb_vote set 票数=票数+1 where 选项='" + radioButton4.Text + "'";}conn.Open();SqlCommand cmd = new(sqlstr, conn);int i = cmd.ExecuteNonQuery();conn.Close();if (i > 0){MessageBox.Show("投票成功");}}catch (Exception ex){MessageBox.Show(ex.Message);}}private void Button2_Click(object sender, EventArgs e){Form2 frm2 = new();frm2.Show();}}
}

       

//Form2.cs
//根据选票数据库，绘制直方图
using System.Data;
using System.Data.SqlClient;namespace _12
{public partial class Form2 : Form{public Form2(){InitializeComponent();}private int Sum;SqlConnection? conn;private void CreateImage(){conn = new SqlConnection(@"server=DESKTOP-S11C97H\SQLEXPRESS;database=db_CSharp;integrated security = True");conn.Open();SqlCommand cmd = new("select sum(票数) from tb_vote", conn);Sum = (int)cmd.ExecuteScalar();SqlDataAdapter sda = new("select * from tb_vote", conn);DataSet ds = new();sda.Fill(ds);int TP1 = Convert.ToInt32(ds.Tables[0].Rows[0][2].ToString());//第一个选项的票数int TP2 = Convert.ToInt32(ds.Tables[0].Rows[1][2].ToString());//第二个选项的票数int TP3 = Convert.ToInt32(ds.Tables[0].Rows[2][2].ToString());//第三个选项的票数int TP4 = Convert.ToInt32(ds.Tables[0].Rows[3][2].ToString());//第四个选项的票数float tp1 = Convert.ToSingle(Convert.ToSingle(TP1) * 100 / Convert.ToSingle(Sum));float tp2 = Convert.ToSingle(Convert.ToSingle(TP2) * 100 / Convert.ToSingle(Sum));float tp3 = Convert.ToSingle(Convert.ToSingle(TP3) * 100 / Convert.ToSingle(Sum));float tp4 = Convert.ToSingle(Convert.ToSingle(TP4) * 100 / Convert.ToSingle(Sum));int width = 300, height = 300;Bitmap bitmap = new(width, height);Graphics g = Graphics.FromImage(bitmap);try{g.Clear(Color.White);Brush brush1 = new SolidBrush(Color.LightGray);Brush brush2 = new SolidBrush(Color.Black);Brush brush3 = new SolidBrush(Color.Red);Brush brush4 = new SolidBrush(Color.Green);Brush brush5 = new SolidBrush(Color.Orange);Brush brush6 = new SolidBrush(Color.DarkBlue);Font font1 = new("Courier New", 16, FontStyle.Bold);Font font2 = new("Courier New", 8);g.FillRectangle(brush1, 0, 0, width, height);    //绘制背景浅灰色g.DrawString("投票结果", font1, brush2, new Point(90, 20));Point p1 = new(70, 50);Point p2 = new(230, 50);g.DrawLine(new Pen(Color.Black), p1, p2);//绘制文字g.DrawString("支付宝：", font2, brush2, new Point(45, 80));g.DrawString("微信支付：", font2, brush2, new Point(32, 110));g.DrawString("京东白条：", font2, brush2, new Point(32, 140));g.DrawString("小度钱包：", font2, brush2, new Point(32, 170));//绘制柱形图g.FillRectangle(brush3, 95, 80, tp1, 17);g.FillRectangle(brush4, 95, 110, tp2, 17);g.FillRectangle(brush5, 95, 140, tp3, 17);g.FillRectangle(brush6, 95, 170, tp4, 17);//绘制所有选项的票数显示g.DrawRectangle(new Pen(Color.Green), 10, 210, 280, 80);  //绘制范围框g.DrawString("支付宝：" + TP1.ToString() + "票", font2, brush2, new Point(15, 220));g.DrawString("微信支付：" + TP2.ToString() + "票", font2, brush2, new Point(150, 220));g.DrawString("京东白条：" + TP3.ToString() + "票", font2, brush2, new Point(15, 260));g.DrawString("小度钱包：" + TP4.ToString() + "票", font2, brush2, new Point(150, 260));pictureBox1.Image = bitmap;}catch (Exception ex){MessageBox.Show(ex.Message);}}private void Form2_Paint(object sender, PaintEventArgs e){CreateImage();}/// <summary>/// 设置窗体工作区大小，设置绘图板工作区，默认边距=8mm/// </summary>private void Form2_Load(object sender, EventArgs e){ClientSize = new Size(324, 324);               //Form2工作区域大小StartPosition = FormStartPosition.CenterScreen;pictureBox1.Size = new Size(300, 300);      //pictureBox1尺寸，边距8mm}}
}

2.生成效果

 

二、折线图

        折线图可以很直观地反映出相关数据的变化趋势，折线图主要是通过绘制点和折线实现的。绘制点是通过Graphics类中的FillEllipse()方法实现的。绘制折线是通过Graphics类中的DrawLine()方法实现的。

        用DrawString()方法绘制文本时，文本的长度必须在所绘制的矩形区域内，如果超出区域，必须用format参数指定截断方式，否则将在最近的单词处截断。

1.示例源码

//折线图、趋势图
namespace _11
{public partial class Form1 : Form{public Form1(){InitializeComponent();}private void Form1_Paint(object sender, PaintEventArgs e){string[] month = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];float[] d = [20.5F, 60, 10.8F, 15.6F, 30, 70.9F, 50.3F, 30.7F, 70, 50.4F, 30.8F, 20];//画图初始化Bitmap bMap = new(500, 500);Graphics gph = Graphics.FromImage(bMap);gph.Clear(Color.White);PointF cPt = new(40, 420);                                                                                                                       //坐标原点PointF[] xPt = [new PointF(cPt.Y + 15, cPt.Y), new PointF(cPt.Y, cPt.Y - 4), new PointF(cPt.Y, cPt.Y + 4)];     //X轴箭头点PointF[] yPt = [new PointF(cPt.X, cPt.X - 15), new PointF(cPt.X - 4, cPt.X), new PointF(cPt.X + 4, cPt.X)];     //Y轴箭头点gph.DrawString("产品月产量趋势图", new Font("宋体", 14), Brushes.Blue, new PointF(cPt.X + 60, cPt.X));    //图标题//画X轴gph.DrawLine(Pens.Green, cPt.X, cPt.Y, cPt.Y, cPt.Y);     //X轴的长度=420= cPt.Ygph.DrawPolygon(Pens.Black, xPt);                         //X轴箭头gph.FillPolygon(new SolidBrush(Color.Pink), xPt);gph.DrawString("月份", new Font("宋体", 12), Brushes.Black, new PointF(cPt.Y + 10, cPt.Y + 10));//画Y轴gph.DrawLine(Pens.Black, cPt.X, cPt.Y, cPt.X, cPt.X);      //Y轴的长度=420-40=380gph.DrawPolygon(Pens.Black, yPt);                          //Y轴箭头gph.FillPolygon(new SolidBrush(Color.Black), yPt);gph.DrawString("单位(万)", new Font("宋体", 12), Brushes.Black, new PointF(0, 7));for (int i = 1; i <= 12; i++){//画Y轴刻度if (i < 11){gph.DrawString((i * 10).ToString(), new Font("宋体", 11), Brushes.Black, new PointF(cPt.X - 30, cPt.Y - i * 30 - 6)); //间隔30单位打一个标记，工程值和坐标值间有个3倍的关系gph.DrawLine(Pens.Black, cPt.X - 3, cPt.Y - i * 30, cPt.X, cPt.Y - i * 30);                                                               //间隔30单位刻一条标尺}//画X轴项目gph.DrawString(month[i - 1].AsSpan(0, 1), new Font("宋体", 11), Brushes.Black, new PointF(cPt.X + i * 30 - 5, cPt.Y + 5));    //间隔30单位打第一个字gph.DrawString(month[i - 1].AsSpan(1, 1), new Font("宋体", 11), Brushes.Black, new PointF(cPt.X + i * 30 - 5, cPt.Y + 20));   //间隔30单位打第二个字if (month[i - 1].Length > 2) gph.DrawString(month[i - 1].AsSpan(2, 1), new Font("宋体", 11), Brushes.Black, new PointF(cPt.X + i * 30 - 5, cPt.Y + 35));  //间隔30单位打第三个字//画数据点gph.DrawEllipse(Pens.Black, cPt.X + i * 30 - 1.5F, cPt.Y - d[i - 1] * 3 - 1.5F, 3, 3);                                                                  //以下Y坐标都要乘以3倍gph.FillEllipse(new SolidBrush(Color.Black), cPt.X + i * 30 - 1.5F, cPt.Y - d[i - 1] * 3 - 1.5F, 3, 3);//画数据值gph.DrawString(d[i - 1].ToString(), new Font("宋体", 11), Brushes.Black, new PointF(cPt.X + i * 30, cPt.Y - d[i - 1] * 3));//画折线if (i > 1) gph.DrawLine(Pens.Red, cPt.X + (i - 1) * 30, cPt.Y - d[i - 2] * 3, cPt.X + i * 30, cPt.Y - d[i - 1] * 3);}pictureBox1.Image = bMap;}   }
}

2.生成效果

 

三、饼形图 

        饼形图可以很直观地查看不同数据所占的比例情况，通过Graphics类中的FillPie()方法，可以方便地绘制出饼形图。

public void FillPie (Brush brush,int x,int y,int width,int height,int startAngle,int sweepAngle)

参    数

说    明

  brush

确定填充特性的Brush

   X

边框左上角的x坐标，该边框定义扇形区所属的椭圆

  y

边框左上角的y坐标，该边框定义扇形区所属的椭圆

  width

边框的宽度，该边框定义扇形区所属的椭圆

  heigh

边框的高度，该边框定义扇形区所属的椭圆

  startAngle

从x轴沿顺时针方向旋转到扇形区第一个边所测得的角度(以度为单位)

  sweepAngle

从startAngle参数沿顺时针方向旋转到扇形区第二个边所测得的角度(以度为单位)

1.示例源码

         ,NET 8.0的项目中需要使用NuGet程序包：system.data.sqlclient.4.8.5.nupkg或更高级版本。否则不能使用SqlClient的方法。

//绘制饼图
using System.Data.SqlClient;
using System.Data;namespace _10
{public partial class Form1 : Form{public Form1(){InitializeComponent();}private void Form1_Load(object sender, EventArgs e){ClientSize = new Size(420, 470);           StartPosition = FormStartPosition.CenterScreen;Text = "绘制饼图";pictureBox1.Dock = DockStyle.Fill;}private void CreateImage(){//连数据库SqlConnection conn = new(@"server=DESKTOP-S11C97H\SQLEXPRESS;database=db_CSharp;integrated security = True");conn.Open();//计算公司员工总和string str2 = "SELECT SUM(人数) AS Number FROM tb_age";SqlCommand cmd = new(str2, conn);int Sum = Convert.ToInt32(cmd.ExecuteScalar());SqlDataAdapter sda = new("select * from tb_age", conn);DataSet ds = new();sda.Fill(ds);//获取20-25岁员工人数int man20to25 = Convert.ToInt32(ds.Tables[0].Rows[0][2].ToString());//获取26-30岁员工人数int man26to30 = Convert.ToInt32(ds.Tables[0].Rows[1][2].ToString());//获取31-40岁员工人数int man31to40 = Convert.ToInt32(ds.Tables[0].Rows[2][2].ToString());//创建画图对象int width = 400, height = 450;Bitmap bitmap = new(width, height);Graphics g = Graphics.FromImage(bitmap);try{//清空背景色g.Clear(Color.White);Pen pen1 = new(Color.Red);Brush brush1 = new SolidBrush(Color.PowderBlue);Brush brush2 = new SolidBrush(Color.Blue);Brush brush3 = new SolidBrush(Color.Wheat);Brush brush4 = new SolidBrush(Color.Orange);Font font1 = new("Courier New", 16, FontStyle.Bold);Font font2 = new("Courier New", 8);g.FillRectangle(brush1, 0, 0, width, height);    //绘制背景图g.DrawString("公司员工年龄比例饼形图", font1, brush2, new Point(80, 20));  //书写标题int piex = 100, piey = 60, piew = 200, pieh = 200;//20-25岁员工在圆中分配的角度float angle1 = Convert.ToSingle((360 / Convert.ToSingle(Sum)) * Convert.ToSingle(man20to25));//26-30岁员工在圆中分配的角度float angle2 = Convert.ToSingle((360 / Convert.ToSingle(Sum)) * Convert.ToSingle(man26to30));//31-40岁员工在圆中分配的角度float angle3 = Convert.ToSingle((360 / Convert.ToSingle(Sum)) * Convert.ToSingle(man31to40));g.FillPie(brush2, piex, piey, piew, pieh, 0, angle1);       //绘制20-25岁员工所占比例g.FillPie(brush3, piex, piey, piew, pieh, angle1, angle2);  //绘制26-30岁员工所占比例g.FillPie(brush4, piex, piey, piew, pieh, angle1 + angle2, angle3);  //绘制31-40岁员工所占比例//绘制标识g.DrawRectangle(pen1, 50, 300, 310, 130);  //绘制范围框g.FillRectangle(brush2, 90, 320, 20, 10);  //绘制小矩形g.DrawString("20-25岁员工占公司总人数比例:" + Convert.ToSingle(man20to25) * 100 / Convert.ToSingle(Sum) + "%", font2, brush2, 120, 320);g.FillRectangle(brush3, 90, 360, 20, 10);g.DrawString("26-30岁员工占公司总人数比例:" + Convert.ToSingle(man26to30) * 100 / Convert.ToSingle(Sum) + "%", font2, brush2, 120, 360);g.FillRectangle(brush4, 90, 400, 20, 10);g.DrawString("31-40岁员工占公司总人数比例:" + Convert.ToSingle(man31to40) * 100 / Convert.ToSingle(Sum) + "%", font2, brush2, 120, 400);}catch (Exception ex){MessageBox.Show(ex.Message);}pictureBox1.Image = bitmap;}private void Form1_Paint(object sender, PaintEventArgs e){CreateImage();}}
}

2.生成效果

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/213025.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

2024年网络安全行业前景和技术自学

2024年网络安全行业前景和技术自学

很多人不知道网络安全发展前景好吗&#xff1f;学习网络安全能做什么&#xff1f;今天为大家解答下 先说结论&#xff0c;网络安全的前景必然是超级好的 作为一个有丰富Web安全攻防、渗透领域老工程师&#xff0c;之前也写了不少网络安全技术相关的文章&#xff0c;不少读者朋…
阅读更多...
vuepress-----19、自动生成侧边栏

vuepress-----19、自动生成侧边栏

自动生成侧边栏插件 https://github.com/shanyuhai123/vuepress-plugin-auto-sidebar https://shanyuhai123.github.io/vuepress-plugin-auto-sidebar/ 安装 npm i vuepress-plugin-auto-sidebar -Dmodule.exports {plugins: [["vuepress-plugin-auto-sidebar",…
阅读更多...
【抽象策略模式】实践

【抽象策略模式】实践

前言 刚果商城&#xff0c;用户登录 Or 注册 发送邮箱验证码场景&#xff0c;使用抽象策略模式实现 什么是抽象策略模式 抽象策略模式是一种行为型设计模式&#xff0c;它允许定义一系列算法&#xff0c;将每个算法封装起来&#xff0c;并使它们可以互相替换。这使得客户端代码…
阅读更多...
牛客在线编程（SQL大厂面试真题）

牛客在线编程（SQL大厂面试真题）

1.各个视频的平均完播率_牛客题霸_牛客网 ROP TABLE IF EXISTS tb_user_video_log, tb_video_info; CREATE TABLE tb_user_video_log (id INT PRIMARY KEY AUTO_INCREMENT COMMENT 自增ID,uid INT NOT NULL COMMENT 用户ID,video_id INT NOT NULL COMMENT 视频ID,start_time d…
阅读更多...
NSS [NSSCTF 2022 Spring Recruit]babyphp

NSS [NSSCTF 2022 Spring Recruit]babyphp

NSS [NSSCTF 2022 Spring Recruit]babyphp 考点&#xff1a;PHP特性 开局源码直接裸奔 <?php highlight_file(__FILE__); include_once(flag.php);if(isset($_POST[a])&&!preg_match(/[0-9]/,$_POST[a])&&intval($_POST[a])){if(isset($_POST[b1])&&…
阅读更多...
【K8s】Kubernetes CRD 介绍(控制器)

【K8s】Kubernetes CRD 介绍(控制器)

文章目录 CRD 概述1. 操作CRD1.1 创建 CRD1.2 操作 CRD 2. 其他笔记2.1 Kubectl 发现机制2.2 校验 CR2.3 简称和属性 3. 架构设计3.1 控制器概览 参考 CRD 概述 CR&#xff08;Custom Resource&#xff09;其实就是在 Kubernetes 中定义一个自己的资源类型&#xff0c;是一个具…
阅读更多...
VMware上不去网

VMware上不去网

VMwarw上不去网了&#xff0c;之前还好好的&#xff0c;这又是碰了哪里。ifconfig提示no device. 又开始折腾&#xff0c;一顿猛如虎的操作。 先把网络各种禁用&#xff0c;再开启。未解决。 最后的解决了的方案&#xff0c;重新设置了虚拟机的网络。 网络1设置为桥接 网络…
阅读更多...
AIGC创作系统ChatGPT网站源码,Midjourney绘画,GPT联网提问/即将支持TSS语音对话功能

AIGC创作系统ChatGPT网站源码,Midjourney绘画,GPT联网提问/即将支持TSS语音对话功能

一、AI创作系统 SparkAi创作系统是基于ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI…
阅读更多...
数据库的索引

数据库的索引

索引的特点 1&#xff09;加快查询的速度 2&#xff09;索引自身是一种数据结构&#xff0c;也要占用存储空间 3&#xff09;当我们需要进行增删改的时候&#xff0c;也要对索引进行更新&#xff08;也需要额外的空间开销&#xff09; sql操作 查看索引 show index from …
阅读更多...
node后端接口无法插入数据为emoji的表情的问题

node后端接口无法插入数据为emoji的表情的问题

原因 emoji的表情一般是这样的\xF0\x9F\x98\x80或者是\xF0\x9F\x98 &#xff0c;事实上 一般数据库的utf8的编码类型都是能保存\xF0\x9F\x98 但是不能保存\xF0\x9F\x98\x80这种样的emoji&#xff0c;要将数据库编码格式为utf8mb4 也就是utf8的超集 另外&#xff0c;除了 数据库…
阅读更多...
Java核心知识点整理大全27-笔记（已完结）

Java核心知识点整理大全27-笔记（已完结）

目录 30. 云计算 30.1.1. SaaS 30.1.2. PaaS 30.1.3. IaaS 30.1.4. Docker 30.1.4.1. 概念 30.1.4.2. Namespaces 30.1.4.3. 进程(CLONE_NEWPID 实现的进程隔离) 30.1.4.4. Libnetwork 与网络隔离 30.1.4.5. 资源隔离与 CGroups 30.1.4.6. 镜像与 UnionFS 30.1.4.7.…
阅读更多...
vue+electron问题汇总

vue+electron问题汇总

1. Vue_Bug Failed to fetch extension, trying 4 more times 描述&#xff1a;项目启动时报错 解决&#xff1a;注释图片中内容 2. Module not found: Error: Can’t resolve ‘fs’ in 描述&#xff1a;项目启动报错 解决&#xff1a;vue.config.js中添加图中数据 3.导入…
阅读更多...
学习php中使用composer下载安装firebase/php-jwt 以及调用方法

学习php中使用composer下载安装firebase/php-jwt 以及调用方法

学习php中使用composer下载安装firebase/php-jwt 以及调用方法 1、安装firebase/php-jwt2、封装jwt类 1、安装firebase/php-jwt composer require firebase/php-jwt安装好以后出现以下文件: 2、封装jwt类 根据所使用的php框架&#xff0c;在指定目录创建 Token.php <?ph…
阅读更多...
好莱坞明星识别

好莱坞明星识别

一、前期工作 1. 设置GPU from tensorflow import keras from tensorflow.keras import layers,models import os, PIL, pathlib import matplotlib.pyplot as plt import tensorflow as tfgpus tf.config.list_physical_devices("GPU")if gpus:gpu0 …
阅读更多...
clickhouse的向量化执行

clickhouse的向量化执行

背景 clickhouse快的很大一部分原因来源于数据的向量化执行&#xff0c;本文就来看一下向量化执行和正常标量执行的区别 SIMD的向量化执行 从上图可知&#xff0c;clickhouse通过SIMD指令可以做到一个cpu周期操作两个向量的运算操作&#xff0c;比起普通的cpu指令效率提高了N…
阅读更多...
Linux库之动态库静态库

Linux库之动态库静态库

一、什么是库&#xff08;Library&#xff09; 二、库的分类 三、静态库、动态库优缺点 四、静态库的制作和使用 五、动态库的制作和使用 SO-NAME–解决主版本号之间的兼容问题 基于符号的版本机制 共享库系统路径 共享库的查找过程 有用的环境变量 gcc 编译器常用选项 Linux共…
阅读更多...
八个适合女大学生做的赚钱小副业

八个适合女大学生做的赚钱小副业

大学的生活可以说是多姿多彩&#xff0c;既有沉浸在课堂知识中的学习&#xff0c;也有课余时间可以自由支配的自我发展。然而&#xff0c;作为一名女大学生&#xff0c;除了追求优异的学业表现&#xff0c;是否还有其他更加多元化且有意义的方式来充实自己呢&#xff1f; 当然&…
阅读更多...
vue el-select多选封装及使用

vue el-select多选封装及使用

使用了Element UI库中的el-select和el-option组件来构建多选下拉框。同时&#xff0c;也包含了一个el-input组件用于过滤搜索选择项&#xff0c;以及el-checkbox-group和el-checkbox组件用于显示多选项。 创建组件index.vue (src/common-ui/selectMultiple/index.vue) <tem…
阅读更多...
linux云服务器开启防火墙注意事件

linux云服务器开启防火墙注意事件

重要的事情先说三遍： linux云服务器开启防火墙要先获取到云服务器的管理界面控制权！！ linux云服务器开启防火墙要先获取到云服务器的管理界面控制权！！ linux云服务器开启防火墙要先获取到云服务器的管理界面控制权！！ 也就是能打开这个页面： 为什么这么说呢？如果你…
阅读更多...
4.Java程序设计-基于springboot得在线考试系统

4.Java程序设计-基于springboot得在线考试系统

编程技术交流、源码分享、模板分享、网课分享 企鹅&#x1f427;裙&#xff1a;772162324 摘要&#xff1a; 本文设计并实现了一款基于Spring Boot框架的在线考试系统小程序。随着远程学习和在线教育的普及&#xff0c;对于灵活、便捷的在线考试系统的需求逐渐增加。该小程序…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023