当前位置：首页 > news >正文

二一(GIT4)、echarts(地图)、黑马就业数据平台(学生页-增删改)

news 来源：原创 2025/7/7 11:54:53

1. echarts 地图

echarts社区：makeapie echarts社区图表可视化案例
社区模板代码地址：自定义 tooltip-轮播 - category-work,series-map地图,tooltip提示框,visualMap视觉映射 - makeapie echarts社区图表可视化案例

// todo: 籍贯分布 地图
function renderProvince(provinceData) {// console.log(provinceData);const chartDom = document.querySelector("#map");const myEchart = echarts.init(chartDom);const dataList = [{ name: "南海诸岛", value: 0 },{ name: "北京", value: 0 },{ name: "天津", value: 0 },{ name: "上海", value: 0 },{ name: "重庆", value: 0 },{ name: "河北", value: 0 },{ name: "河南", value: 0 },{ name: "云南", value: 0 },{ name: "辽宁", value: 0 },{ name: "黑龙江", value: 0 },{ name: "湖南", value: 0 },{ name: "安徽", value: 0 },{ name: "山东", value: 0 },{ name: "新疆", value: 0 },{ name: "江苏", value: 0 },{ name: "浙江", value: 0 },{ name: "江西", value: 0 },{ name: "湖北", value: 0 },{ name: "广西", value: 0 },{ name: "甘肃", value: 0 },{ name: "山西", value: 0 },{ name: "内蒙古", value: 0 },{ name: "陕西", value: 0 },{ name: "吉林", value: 0 },{ name: "福建", value: 0 },{ name: "贵州", value: 0 },{ name: "广东", value: 0 },{ name: "青海", value: 0 },{ name: "西藏", value: 0 },{ name: "四川", value: 0 },{ name: "宁夏", value: 0 },{ name: "海南", value: 0 },{ name: "台湾", value: 0 },{ name: "香港", value: 0 },{ name: "澳门", value: 0 },];// * 接口数据带省/自治区等字，不能直接拿来用 需双层遍历，将接口数据赋值给dataList内对应数据dataList.forEach((item) => {provinceData.forEach((res) => {// * includes() 返回值为布尔型if (res.name.includes(item.name)) {item.value = res.value;}});});const option = {title: {text: "籍贯分布",top: 10,left: 10,textStyle: {fontSize: 16,},},tooltip: {trigger: "item",formatter: "{b}: {c} 位学员",borderColor: "transparent",backgroundColor: "rgba(0,0,0,0.5)",textStyle: {color: "#fff",},},visualMap: {min: 0,max: 6,left: "left",bottom: "20",text: ["6", "0"],inRange: {color: ["#ffffff", "#0075F0"],},show: true,left: 40,},geo: {map: "china",roam: false,zoom: 1.0,label: {normal: {show: true,fontSize: "10",color: "rgba(0,0,0,0.7)",},},itemStyle: {normal: {borderColor: "rgba(0, 0, 0, 0.2)",color: "#e0ffff",},emphasis: {areaColor: "#34D39A",shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 20,borderWidth: 0,shadowColor: "rgba(0, 0, 0, 0.5)",},},},series: [{name: "籍贯分布",type: "map",geoIndex: 0,data: dataList,},],};myEchart.setOption(option);
}

2. 黑马就业数据平台

学生页增删改

// 调用函数 判断是否有token（登录校验）
checkLogin();// 渲染用户名
renderName(1);// 退出登录
logout();// * 渲染学生信息 增删改之后需再次渲染 → 封装函数
// * 获取服务器学生列表 并渲染到页面
async function render() {// 已设置请求拦截器const res = await axios.get("/students");const str = res.data.map((item) => {const {id,name,age,gender,group,hope_salary,salary,province,city,area,} = item;return `<tr><td>${name}</td><td>${age}</td><td>${gender === 0 ? "男" : "女"}</td><td>第${group}组</td><td>${hope_salary}</td><td>${salary}</td><td>${province + city + area}</td><td data-id="${id}"><a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen"></i></a><a href="javascript:;" class="text-danger"><i class="bi bi-trash"></i></a></td></tr>`;}).join("");document.querySelector(".list").innerHTML = str;document.querySelector(".total").innerHTML = res.data.length;
}
render();// 模态框
const modalDom = document.querySelector("#modal");
const modal = new bootstrap.Modal(modalDom);
// modal.show();// * 省市区
// 根据name获取元素 属性选择器[name=province]
const province = document.querySelector("[name=province]");
// console.log(province);
const city = document.querySelector("[name=city]");
const area = document.querySelector("[name=area]");
async function getPCA() {const resP = await axios.get("/api/province");// console.log(resP);// 省份数据渲染province.innerHTML =`<option value="">--省份--</option>` +resP.list.map((item) => {return `<option value="${item}">${item}</option>`;}).join("");// 省份区域值变化时let pname = "";province.addEventListener("change", async function () {pname = province.value;// console.log(pname);const resC = await axios.get("/api/city", { params: { pname } });// console.log(resC);// 城市数据渲染city.innerHTML =`<option value="">--城市--</option>` +resC.list.map((item) => {return `<option value="${item}">${item}</option>`;}).join("");area.innerHTML = `<option value="">--地区--</option>`;});city.addEventListener("change", async function () {pname = province.value;let cname = city.value;const resA = await axios.get("/api/area", { params: { pname, cname } });// 地区数据渲染area.innerHTML =`<option value="">--地区--</option>` +resA.list.map((item) => {return `<option value="${item}">${item}</option>`;}).join("");});
}
getPCA();// todo: 编辑与删除(事件委托) 代码有点长，函数封装后调用
document.querySelector(".list").addEventListener("click", function (e) {// 删除if (e.target.classList.contains("bi-trash")) {// console.log("删除");del(e.target.parentNode.parentNode.dataset.id);}// 编辑if (e.target.classList.contains("bi-pen")) {// console.log("编辑");edit(e.target.parentNode.parentNode.dataset.id);modalDom.dataset.id = e.target.parentNode.parentNode.dataset.id;}
});// todo: 删除函数
async function del(id) {// confirm() 返回值为布尔型if (confirm("确定要删除吗？")) {await axios.delete(`/students/${id}`);showToast("删除成功");render();}
}// todo: 编辑函数(点击)
// let editID = null;
async function edit(id) {// modalDom.dataset.id = e.target.parentNode.parentNode.dataset.id;// editID = id;// 模态框标题修改document.querySelector(".modal-title").innerHTML = "编辑学员";// 从服务器根据id获取学生详情const res = await axios.get(`/students/${id}`);// * 数据回显// console.log(res.data);// 1. 普通数据const keys = ["age", "group", "hope_salary", "name", "salary"];keys.forEach((key) => {document.querySelector(`[name=${key}]`).value = res.data[key];});// 2. 性别/* if (res.data.gender === 0) {document.querySelector("#cb01").checked = true;} else {document.querySelector("#cb02").checked = true;} */// document.querySelector(`#cb0${res.data.gender + 1}`).checked = true;const { gender } = res.data;const cks = document.querySelectorAll("[name=gender]");cks[gender].checked = true;// 3. 省市区province.value = res.data.province;const resC = await axios.get("/api/city", {params: { pname: res.data.province },});city.innerHTML =`<option value="">--城市--</option>` +resC.list.map((item) => {return `<option value="${item}">${item}</option>`;}).join("");city.value = res.data.city;const resA = await axios.get("/api/area", {params: { pname: res.data.province, cname: res.data.city },});area.innerHTML =`<option value="">--地区--</option>` +resA.list.map((item) => {return `<option value="${item}">${item}</option>`;}).join("");area.value = res.data.area;modal.show();
}// todo: 新增学生
document.querySelector(".bi-plus").addEventListener("click", function () {// console.log(11);// dataset.id会将赋给其的值自动转换为字符串modalDom.dataset.id = "";// 使用removeAttribute方法来移除DOM元素的自定义属性// modalDom.removeAttribute("data-id");document.querySelector(".modal-title").innerHTML = "添加学员";city.innerHTML = `<option value="">--城市--</option>`;area.innerHTML = `<option value="">--地区--</option>`;modal.show();
});// todo: 添加学生&修改学生 提交
document.querySelector("#submit").addEventListener("click", function () {const form = document.querySelector("#form");const data = serialize(form, { hash: true, empty: true });// 表单收集到的数据类型和服务器要求的不一致 → 数据类型转换data.age = +data.age;data.hope_salary = +data.hope_salary;data.salary = +data.salary;data.gender = +data.gender;data.group = +data.group;// 将新添数据发送到服务器/* if (document.querySelector(".modal-title").innerHTML.includes("添加")) {addStu(data);} else {editSubmit(data);} */if (modalDom.dataset.id) {// console.log("编辑");editSubmit(data);} else {// console.log("添加");addStu(data);}modal.hide();// 清空表单form.reset();/* // 添加成功后 → 清空表单数据document.querySelectorAll(".form-control").forEach((item) => {item.value = "";});// 清空省市区数据city.innerHTML = `<option value="">--城市--</option>`;area.innerHTML = `<option value="">--地区--</option>`;// 清空性别选中状态document.querySelectorAll(".form-check-input").forEach((item) => {item.checked = false;}); */
});// todo: 点击确定 添加数据
async function addStu(data) {const res = await axios.post("/students", data);showToast(res.message);render();
}// todo: 点击确定 修改数据
async function editSubmit(data) {// const res = await axios.put(`/students/${editID}`, data);const res = await axios.put(`/students/${modalDom.dataset.id}`, data);showToast(res.message);render();
}

二一(GIT4)、echarts(地图)、黑马就业数据平台(学生页-增删改)

1. echarts 地图 echarts社区：makeapie echarts社区图表可视化案例社区模板代码地址：自定义 tooltip-轮播 - category-work,series-map地图,tooltip提示框,visualMap视觉映射 - makeapie echarts社区图表可视化案例 // todo: 籍贯分布地图 function…...

编程日记 2025/7/7 11:54:53

数据结构排序算法详解

数据结构排序算法详解 1、冒泡排序（Bubble Sort）2、选择排序（Selection Sort）2、插入排序（Insertion Sort）4、快速排序（Quick Sort） 1、冒泡排序（Bubble Sort&#xff09…...

编程日记 2025/7/1 19:48:00

使用kubeadm命令安装k8s

版本信息 kubernetesVersion: 1.28.01. 前期环境准备先配置软件源可以安装kubeadm、kubelet、kubectl三个软件，不同的系统不同的安装方式，这里不列举了，自己找。然后要安装cri-dockerd，因为kubernetes从1.24版本不再支持docker的api，支持原生的containerd的api，可以使用…...

编程日记 2025/7/7 11:15:26

依托 Spring Boot框架，精铸高扩展性招聘信息管控系统

1 绪论 1.1 课题背景与意义在Internet高速发展的今天，计算机的应用几乎完全覆盖我们生活的各个领域，互联网在经济，生活等方面有着举足轻重的地位，成为人们资源共享，信息快速传递的重要渠道。在中国，网上管…...

编程日记 2025/7/5 8:49:50

docker 部署 mysql 9.0.1

docker 如何部署 mysql 9 ，请看下面步骤： 1. 先看 mysql 官网先点进去 8 版本的 Reference Manual 。选择 9.0 版本的。点到这里来看， 这里有一些基础的安装步骤，可以看一下。 - Basic Steps for MySQL Server Deployment wit…...

编程日记 2025/7/3 0:11:54

SQL：从某行开始，查询一定行数的语句

比如实现从第五行开始查询5行数据的SQL语句不同数据库有不同的实现方式，下面是各大数据库的查询语句。 1. SQL Server（适用于 SQL Server 2012 及之后版本）、DB2、Oracle（适用12c及以上版本） 这几种数据库的实现方式…...

编程日记 2025/7/3 1:26:48

18. 模块

一、什么是模块模块化指将一个完成的程序分解为一个一个小的模块。通过将模块组合，来搭建一个完整的程序。如果不采用模块化，那么所有的代码将统一保存到一个文件中。采用模块化后，将程序分别编写到多个文件中。使用模块化后，我…...

编程日记 2025/7/7 11:29:38

GroundingDINO微调训练_训练日志解释

文章目录 1. 训练日志1. Epoch 和 Iteration2. Learning Rate（学习率）3. ETA（预计剩余时间）4. Time 和 Data Time5. Memory6. Gradient Norm（梯度范数）7. Loss（损失）8. Individual L…...

编程日记 2025/7/7 11:07:43

一、实验拓扑及目的二、实验命令及实验步骤 LSW1的配置命令 <Huawei>sy [Huawei]un in e [Huawei]sys S1 [S1]vlan batch 100 200 [S1]int g0/0/1 [S1-GigabitEthernet0/0/1]port link-type access [S1-GigabitEthernet0/0/1]port default vlan 100 [S1-GigabitEtherne…...

编程日记 2025/7/6 2:43:23

uni-app写的微信小程序如何实现账号密码登录后获取token，并且每天的第一次登录后都会直接获取参数而不是耀重新登录（1）

uni-app写的微信小程序如何实现账号密码登录后获取token（而token的有效器一般是30分钟，当页面在操作时token是不会过去，，离开页面第二天登录时token就是过期状态，因为记住了账号密码就不会操作再次登录，但是…...

编程日记 2025/7/7 6:00:49

【linux】（29）shell-变量和引号

Shell 脚本中有三种引号：双引号 "、单引号和反引号。它们有不同的作用。双引号 " 双引号允许引用的字符串中包含变量和命令替换。 #!/bin/bash name"Alice" echo "Hello, $name!"单引号单引号中的内容被原样引用&#xff0…...

编程日记 2025/7/7 11:12:11

Linux如何安装discuz

在Linux上安装Discuz!程序通常涉及以下步骤： 安装Web服务器（如Apache或Nginx）和数据库（如MySQL或PostgreSQL）。下载Discuz!的最新版本。将Discuz!文件上传到Web服务器的公共目录中。根据README.md文件配置Discuz…...

编程日记 2025/7/7 11:36:42

SpringBoot如何使用EasyExcel实现表格导出（简洁快速入门版本）

前言前面给大家介绍了动态表头的导入，这篇文章给大家介绍如何实现导出前面给大家介绍了动态表头的导入，我们了解了如何通过EasyExcel灵活地读取结构不固定的Excel文件。这次，我们将目光转向数据导出——即如何将数据以Excel文件的形式输出…...

编程日记 2025/7/5 15:47:38

Python爬虫使用示例-保存诗人简介到csv文件中

一、获取资源目标网址：（第一页） https://www.shicimingju.com/category/all（后续） https://www.shicimingju.com/category/all_2 https://www.shicimingju.com/category/all_3 ... https://www.shicimingju.com/ca…...

编程日记 2025/7/7 11:13:08

yocto的xxx.bb文件在什么时候会拷贝文件到build目录

在 Yocto 中，.bb 文件用于描述如何构建和安装一个软件包，而文件在构建过程中的拷贝操作通常会在某些特定的步骤中进行。具体来说，文件会在以下几个阶段被拷贝到 build 目录（或者更准确地说，拷贝到目标目录 ${D}&#x…...

编程日记 2025/7/6 6:13:22

Mysql定时数据库备份保姆级教程

目录一、需要解决的问题 1、如何传输文件? 2、如何备份数据库? 3、如何建立一个定时任务? 二、实施步骤 1、建立SSH公钥，实现无密码登录 2、编写备份数据库脚本 3、编写定时任务 MySQL 是一种全球广泛使用的关系型数据库管理系统，它存储的数…...

编程日记 2025/7/3 23:08:07

使用 Grafana 展示多个TiDB集群的告警

作者： yangzhj 原文来源： https://tidb.net/blog/229e283c 背景在日常运维工作中，我们有时需要将多个生产集群的告警信息展示在一起，统一集中观察和分析TiDB 集群的告警情况。本文将通过 Grafana 的多数据源功能来将多个Ti…...

编程日记 2025/7/7 5:35:54

lnmp+discuz论坛附实验：搭建discuz论坛

Inmpdiscuz论坛 Inmp: t: linux操作系统 nr: nginx前端页面 me: mysql数据库账号密码，等等都是保存在这个数据库里面 p: php——nginx擅长处理的是静态页面，页面登录账户，需要请求到数据库，通过php把动态请求转发到数据库 n…...

编程日记 2025/7/5 23:48:44

AI时代的开发新纪元：云开发 Copilot

AI时代的开发新纪元：云开发 Copilot 目录引言：AI时代的开发新纪元低代码与AI的完美融合云开发 Copilot的革命性意义云开发 Copilot 的核心特性解析快速生成应用功能低代码与AI的深度结合实战演练：云开发 Copilot 的应用案例从需求到实现…...

编程日记 2025/7/3 4:57:21

探索 Java 中的 Bug 世界

在 Java 编程的旅程中，我们不可避免地会遇到各种 Bug。这些 Bug 可能会导致程序出现意外的行为、崩溃或者性能问题。了解 Java Bug 的类型、产生原因以及解决方法，对于提高我们的编程技能和开发出稳定可靠的应用程序至关重要。一、Java Bug 的定义与分类…...

编程日记 2025/7/7 0:55:16

【C++】等差数列末项计算题解析及优化

博客主页： [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 💯前言💯题目描述与输入输出要求💯数学分析与公式推导公差的计算通项公式推导 💯示例解析解题步骤 💯程序实现与解析初版代码代码解析优点与不足…...

编程日记 2025/7/2 13:32:56

【LeetCode】55.跳跃游戏

文章目录题目链接：题目描述：解题思路（贪心算法）： 题目链接： 55.跳跃游戏题目描述： 解题思路（贪心算法）： 如果某一个位置的元素为N，表示后面N…...

编程日记 2025/7/1 22:37:00

linux基于systemd自启守护进程 systemctl自定义服务傻瓜式教程

系统服务书接上文: linux自启任务详解演示系统:ubuntu 20.04 开发部署项目的时候常常有这样的场景: 业务功能以后台服务的形式提供,部署完成后可以随着系统的重启而自动启动;服务异常挂掉后可以再次拉起这个功能在ubuntu系统中通常由systemd提供如果仅仅需要达成上述的场…...

编程日记 2025/7/6 14:45:10

SparkSQL编程实践

文章目录 SparkSQL编程实践1.1. 编程模型介绍1.2. SparkSQL编程1.2.1. 第三方库安装1.2.2. SparkSQL程序的结构1.2.3. SparkSQL执行模式1.2.3.1. Local模式1.2.3.2. 集群模式 1.2.4. 数据加载1.2.4.1. 通过RDD创建DataFrame1.2.4.2. 通过读取数据外部数据创建DataFrame标准读取…...

编程日记 2025/7/3 12:41:32

模型训练数据-MinerU一款Pdf转Markdown软件

模型训练数据-MinerU一款Pdf转Markdown软件-说明简介： MinerU是什么 MinerU是上海人工智能实验室OpenDataLab团队推出的开源智能数据提取工具，专注于复杂PDF文档的高效解析与提取。MinerU能将包含图片、公式、表格等元素的多模态PDF文档转化为易于分析…...

编程日记 2025/7/1 1:25:01

shell基础用法

shell基础知识 shell中的多行注释 :<<EOF read echo $REPLY # read不指定变量，则默认写入$REPLY EOF # :<<EOF ...EOF 多行注释，EOF可以替换为！# 等文件目录和执行目录 echo $0$0 # ./demo.sh echo $0的realpath$(realpath…...

编程日记 2025/7/5 8:48:38

Redisson分布式锁

概览个人博客源地址 Redisson不只是一个 Java Redis 客户端，它是一个以内存 Redis 服务器作为后端的处理 Java 对象(如 java.util.List, java.util.Map, java.util.Set, java.util.concurrent.locks.Lock 等)的一个框架。 Redisson提供了使用Redis的最简单和最…...

编程日记 2025/7/5 14:10:50

【C语言--趣味游戏系列】--电脑关机整蛊小游戏

前言： 老铁们，还是那句话，学习很苦游戏来补， 为了提高大家与朋友之间的友谊，博主在这里分享一个电脑关机的恶作剧小游戏，快拿去试试吧！！！ 目录： 1.电脑关机代…...

编程日记 2025/7/6 8:14:29

C#实现一个HttpClient集成通义千问-开发前准备

集成一个在线大模型（如通义千问），来开发一个chat对话类型的ai应用，我需要先了解OpenAI的API文档，请求和返回的参数都是以相关接口文档的标准进行的相关文档 OpenAI API文档 https://platform.openai.com/docs/api-…...

编程日记 2025/7/2 23:33:38

二叉树优选算法（一）

一、根据二叉树创建字符串题目介绍： 给你二叉树的根节点 root ，请你采用前序遍历的方式，将二叉树转化为一个由括号和整数组成的字符串，返回构造出的字符串。空节点使用一对空括号对 "()" 表示，转化后需…...

编程日记 2025/7/4 9:18:50

单片机C51--笔记8-STC89C51RC/RD-IIC协议

一、概述 IIC全称Inter-Integrated Circuit (集成电路总线) 是由PHILIPS公司在80年代开发的两线式串行总线，用于连接微控制器及其外围设备。IIC属于半双工同步通信方式。特点简单性和有效性。由于接口直接在组件之上，因此IIC总线占用的空间非常小…...

编程日记 2025/7/5 6:08:38

HttpUtil的get和post请求

Http工具类 import org.apache.http.Consts; import org.apache.http.HttpEntity; import org.apache.http.HttpResponse; import org.apache.http.client.entity.UrlEncodedFormEntity; import org.apache.http.client.methods.CloseableHttpResponse; import org.apache.ht…...

编程日记 2025/7/4 11:58:43

1. echarts 地图

2. 黑马就业数据平台

学生页增删改

相关文章：