JavaWeb——003Axios Vue组件库（Element）

news/发布时间2024/5/16 0:46:57

目录

一、Ajax

1、同步与异步​编辑

2、原生Ajax（繁琐）​编辑

2.1、写一个简易的Ajax

3、Axios（推荐使用）​编辑

3.1、Axios入门

3.2、Axios请求方式别名

3.3、案例：基于Vue及Axios完成数据的动态加载展示​编辑

二、前后端分离开发

1、前后端开发模式

1.1、前后端混合开发

1.2、前后端分离开发（主流模式）and前后端分离开发流程

2、YAPI（接口文档的管理平台）

三、前端工程化

1、Vue脚手架环境准备

1.1、安装NodeJS

2、Vue项目简介

2.1、Vue项目创建

2.2、Vue项目目录结构

2.3、Vue项目启动（serve）

2.4、修改Vue项目端口（vue.config.js）

3、Vue项目开发流程

3.1、Vue页面的显示过程

3.2、Vue的组件（template\script\style）

四、Vue组件库Element

1、什么是Element？

2、Element快速入门

2.1、安装ElementUI组件库

2.2、引入ElementUI组件库

views目录下新建目录（element）：​编辑

2.3、定义Vue组件（内容可复制官方文档）

3、常见组件

3.1、表格（Table）​编辑

3.2、分页组件（Pagination）

3.3、对话框组件（Dialog）

3.4、表单组件（Form）​编辑

4、案例：根据页面原型完成员工管理页面的开发

4.1、创建页面，并完成页面的整体布局规划

4.2、布局中各个组件的实现

4.3、列表数据的异常加载与渲染展示

五、Vue路由

1、前端路由

2、Vue Router

2.1、安装vue-router

2.2、定义路由配置信息（index.js）

3、案例：通过Vue的路由VueRouter完成左侧菜单栏点击切换效果

4、Bug：默认访问路由路径为/

六、打包部署

1、如何打包？

2、如何部署？（Nginx）

2.1、将 dist 目录下的文件复制到 nginx 安装目录

2.2、启动nginx.exe​编辑

2.3、扩展：反向代理、负载均衡

一、Ajax

1、同步与异步

2、原生Ajax（繁琐）

代码可参考W3School中的参考手册 

效果：（查看所有的异步请求，可以点击XHR）

2.1、写一个简易的Ajax

function ajax(url) {const p = new Promise((resolve, reject) => {const xhr = new XMLHttpRequest();xhr.open('GET', url, true)xhr.onreadystatechange = () => {if(xhr.readyState === 4){if((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304){resolve(JSON.parse(xhr.response))}else{reject(new Error('Response error'))}}}xhr.send(null)})return p
}
const url = 'text.json'
ajax(url).then(res => console.log(res)).catch(err => console.log(err))

3、Axios（推荐使用）

3.1、Axios入门

代码示例： 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>原生Ajax</title>
</head>
<body><input type="button" value="获取数据" onclick="getData()"><div id="div1"></div></body>
<script>function getData(){//1. 创建XMLHttpRequest var xmlHttpRequest  = new XMLHttpRequest();//2. 发送异步请求xmlHttpRequest.open('GET','http://yapi.smart-xwork.cn/mock/169327/emp/list');xmlHttpRequest.send();//发送请求//3. 获取服务响应数据xmlHttpRequest.onreadystatechange = function(){if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;}}}
</script>
</html>

3.2、Axios请求方式别名

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Ajax-Axios</title><script src="js/axios-0.18.0.js"></script>
</head>
<body><input type="button" value="获取数据GET" onclick="get()"><input type="button" value="删除数据POST" onclick="post()"></body>
<script>function get(){//通过axios发送异步请求-get// axios({//     method: "get",//     url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"// }).then(result => {//     console.log(result.data);// })axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {console.log(result.data);})}function post(){//通过axios发送异步请求-post// axios({//     method: "post",//     url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",//     data: "id=1"// }).then(result => {//     console.log(result.data);// })axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(result => {console.log(result.data);})}
</script>
</html>

3.3、案例：基于Vue及Axios完成数据的动态加载展示

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Ajax-Axios-案例</title><script src="js/axios-0.18.0.js"></script><script src="js/vue.js"></script>
</head>
<body><div id="app"><table border="1" cellspacing="0" width="60%"><tr><th>编号</th><th>姓名</th><th>图像</th><th>性别</th><th>职位</th><th>入职日期</th><th>最后操作时间</th></tr><tr align="center" v-for="(emp,index) in emps"><td>{{index + 1}}</td><td>{{emp.name}}</td><td><img :src="emp.image" width="70px" height="50px"></td><td><span v-if="emp.gender == 1">男</span><span v-if="emp.gender == 2">女</span></td><td>{{emp.job}}</td><td>{{emp.entrydate}}</td><td>{{emp.updatetime}}</td></tr></table></div>
</body>
<script>new Vue({el: "#app",data: {emps:[]},mounted () {//发送异步请求,加载数据axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {this.emps = result.data.data;})}});
</script>
</html>

二、前后端分离开发

1、前后端开发模式

1.1、前后端混合开发

1.2、前后端分离开发（主流模式）and前后端分离开发流程

2、YAPI（接口文档的管理平台）

YAPI已经暂停使用

三、前端工程化

1、Vue脚手架环境准备

1.1、安装NodeJS

安装过程可参考：NodeJS安装文档.md

2、Vue项目简介

2.1、Vue项目创建

2.2、Vue项目目录结构

2.3、Vue项目启动（serve）

2.4、修改Vue项目端口（vue.config.js）

3、Vue项目开发流程

3.1、Vue页面的显示过程

render 是一个函数，它的作用就是将 App 当中定义的视图创建出对应的虚拟DOM 元素，然后挂载到 #app 这个区域

3.2、Vue的组件（template\script\style）

template相当于HTML部分，script就是js部分，style就是css的样式

在Vue项目的开发中，其实main.js以及index.html很少会去操作，主要修改的都是.vue文件

 

四、Vue组件库Element

官方文档：https://element.eleme.cn/#/zh-CN/component/installation

1、什么是Element？

为什么要学Element？主要是方便和优美 

2、Element快速入门

2.1、安装ElementUI组件库

npm install element-ui@2.15.3

会被安装在node_modules目录下 

 

2.2、引入ElementUI组件库

views目录下新建目录（element）：

默认显示根组件（App.vue）中的内容，所以要想显示其它组件，需要在根组件中进行设置：在template中定义element-view标签，下方的import语句就会自动导入 

代码

<template><div><!-- button按钮 --><el-row><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button><el-button type="info">信息按钮</el-button><el-button type="warning">警告按钮</el-button><el-button type="danger">危险按钮</el-button></el-row></div>
</template><script>
export default {}
</script><style>
</style>

 

2.3、定义Vue组件（内容可复制官方文档）

views目录下新建目录（element）：

<!-- button按钮 --><el-row><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button><el-button type="info">信息按钮</el-button><el-button type="warning">警告按钮</el-button><el-button type="danger">危险按钮</el-button></el-row>

 默认显示根组件（App.vue）中的内容，所以要想显示其它组件，需要在根组件中进行设置：在template中定义element-view标签，下方的import语句就会自动导入

效果显示：

3、常见组件

3.1、表格（Table）

使用步骤：

Ⅰ、从官网复制代码到 ElementView.vue ：

 

 <!-- Table 表格 --><el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="日期" width="180"> </el-table-column><el-table-column prop="name" label="姓名" width="180"> </el-table-column><el-table-column prop="address" label="地址"> </el-table-column></el-table>

 

tableData: [{date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1517 弄",},{date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1519 弄",},{date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",},],

 

3.2、分页组件（Pagination）

 <!-- Pagination 分页 --><el-paginationbackgroundlayout="total,sizes,prev, pager, next,jumper"@size-change="handleSizeChange"@current-change="handleCurrentChange":total="1000"></el-pagination>

 layout属性：

事件：size-change 与 current-change：

methods: {handleSizeChange: function (val) {alert("每页记录数变化" + val);},handleCurrentChange: function (val) {alert("页码发生变化" + val);}},
};

 

 

3.3、对话框组件（Dialog）

<!-- Dialog对话框 --><!-- Table --><el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button><el-dialog title="收货地址" :visible.sync="dialogTableVisible"><el-table :data="gridData"><el-table-columnproperty="date"label="日期"width="150"></el-table-column><el-table-columnproperty="name"label="姓名"width="200"></el-table-column><el-table-column property="address" label="地址"></el-table-column></el-table></el-dialog>

数据模型：

 gridData: [{date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},],dialogTableVisible: false,

 

3.4、表单组件（Form）

<!-- Dialog对话框-Form表单 --><el-button type="text" @click="dialogFormVisible = true">打开嵌套Form的Dialog Dialog</el-button><el-dialog title="Form表单" :visible.sync="dialogFormVisible"><el-form ref="form" :model="form" label-width="80px"><el-form-item label="活动名称"><el-input v-model="form.name"></el-input></el-form-item><el-form-item label="活动区域"><el-select v-model="form.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item><el-form-item label="活动时间"><el-col :span="11"><el-date-pickertype="date"placeholder="选择日期"v-model="form.date1"style="width: 100%"></el-date-picker></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-time-pickerplaceholder="选择时间"v-model="form.date2"style="width: 100%"></el-time-picker></el-col></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">提交</el-button><el-button>取消</el-button></el-form-item></el-form></el-dialog>

数据模型

form: {name: '',region: '',date1: '',date2: '',},

方法：

通过JSON.stringify()将对象转为字符串

onSubmit :function(){//JSON>stringify  json对象转字符串alert(JSON.stringify(this.form))}

 效果：

4、案例：根据页面原型完成员工管理页面的开发

实现步骤：

4.1、创建页面，并完成页面的整体布局规划

创建EmpView.vue文件，并在根组件中进行声明和导入

待续~

4.2、布局中各个组件的实现

4.3、列表数据的异常加载与渲染展示

安装Axios

npm install axios

导入Axios： 

在EmpView.vue文件中导入：

import axios from "axios";

发送异步请求：

yapi不可以用了，详见ajax地址访问不了-解决方案文件夹

mounted() {//发送异步请求,获取数据axios.get("http://localhost:10010/emp/list").then((result) => {this.tableData = result.data.data;});},

效果展示：

 

解决图片与性别展示（使用插槽 slot-scope） 

row指代这一行所有的字段值

效果展示

五、Vue路由

1、前端路由

2、Vue Router

2.1、安装vue-router

安装（创建Vue项目时已选择）

npm install vue-router@3.5.1

2.2、定义路由配置信息（index.js）

如果你要访问的是/emp路径，那么你要导入的就是EmpView.vue组件，/dept同理： 

 

3、案例：通过Vue的路由VueRouter完成左侧菜单栏点击切换效果

 示例代码：

在组件的template中的对应位置添加<router-link>标签：

<el-container style="height: 700px; border: 1px solid #eee"><el-header style="font-size: 40px; background-color: rgb(238, 241, 246)">tlias 智能学习辅助系统</el-header><el-container><el-aside width="230px" style="border: 1px solid #eee"><el-menu :default-openeds="['1', '3']"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>系统信息管理</template><el-menu-item index="1-1"><router-link to="/dept">部门管理</router-link></el-menu-item><el-menu-item index="1-2"><router-link to="/emp">员工管理</router-link></el-menu-item></el-submenu></el-menu></el-aside>

在根组件中添加对应的<router-view>标签： 

4、Bug：默认访问路由路径为/

问题：由于默认的访问路由路径为/，但我们在index.js中配置的路径只有两个，并不存在/，那么怎么解决这个问题呢？如果你访问/是找不到对应的组件的

解决办法：很简单！没有就加上

const routes = [{path: '/emp',name: 'emp',component: () => import('../views/tlias/EmpView.vue')},{path: '/dept',name: 'dept',component: () => import('../views/tlias/DeptView.vue')},{path: '/',redirect: '/dept'}
]

 

六、打包部署

1、如何打包？

直接运行build 即可打包，打包生成的文件将放入dist

效果展示

打包后的文件：

 

2、如何部署？（Nginx）

2.1、将 dist 目录下的文件复制到 nginx 安装目录

2.2、启动nginx.exe

更换 nginx 的端口号

config目录 -> nginx.conf：

找到默认端口，将其改为90： 

 

 访问项目

2.3、扩展：反向代理、负载均衡

反向代理可参考： 实现nginx反向代理（附nginx教程）

负载均衡可参考： Nginx如何优雅的实现负载均衡

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

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

相关文章

044-WEB攻防-PHP应用SQL盲注布尔回显延时判断报错处理增删改查方式

044-WEB攻防-PHP应用SQL盲注布尔回显延时判断报错处理增删改查方式

044-WEB攻防-PHP应用&SQL盲注&布尔回显&延时判断&报错处理&增删改查方式 #知识点&#xff1a; 1、PHP-MYSQL-SQL注入-方式增删改查 2、PHP-MYSQL-SQL注入-布尔&延迟&报错 3、PHP-MYSQL-SQL注入-数据回显&报错处理 演示案例&#xff1a; ➢PHP…
阅读更多...
SpringCloud有哪些组件

SpringCloud有哪些组件

什么是SpringCloud&#xff1f; Spring Cloud是基于Spring Boot的分布式系统开发工具&#xff0c;它提供了一系列开箱即用的、针对分布式系统开发的特性和组件&#xff0c;用于帮助开发人员快速构建和管理云原生应用程序。 Spring Cloud的主要目标是解决分布式系统中的常见问题…
阅读更多...
外包干了3个月，技术倒退明显...

外包干了3个月，技术倒退明显...

先说情况&#xff0c;大专毕业&#xff0c;18年通过校招进入湖南某软件公司&#xff0c;干了接近6年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试&#xf…
阅读更多...
Surely Vue Table表格css、js方法去除水印

Surely Vue Table表格css、js方法去除水印

文章目录 Surely Vue Table表格css、js方法去除水印用法 css 去除js去除 Surely Vue Table表格css、js方法去除水印 "surely-vue/table": "^4.2.7","ant-design-vue": "^2.1.2",用法 在main.ts文件中全局引入 import STable from su…
阅读更多...
低代码与大语言模型的探索实践

低代码与大语言模型的探索实践

低代码系列文章&#xff1a; 可视化拖拽组件库一些技术要点原理分析可视化拖拽组件库一些技术要点原理分析&#xff08;二&#xff09;可视化拖拽组件库一些技术要点原理分析&#xff08;三&#xff09;可视化拖拽组件库一些技术要点原理分析&#xff08;四&#xff09;低代码…
阅读更多...
力扣随笔之移除元素（简单27）

力扣随笔之移除元素（简单27）

思路&#xff1a;定义一个指针left&#xff0c;使该指针及该指针左边的数全部都不等于val&#xff0c;定义一个遍历指针i&#xff0c;若nums[i] val&#xff0c;则i自加&#xff0c;若nums[i] ! val&#xff0c;则将left&#xff0c;并将nums[i]的值赋给nums[left]&#xff0c…
阅读更多...
JavaAPI常用类03

JavaAPI常用类03

目录 java.lang.Math Math类 代码 运行 Random类 代码 运行 Date类/Calendar类/ SimpleDateFormat类 Date类 代码 运行 Calendar类 代码 运行 SimpleDateFormat类 代码一 运行 常用的转换符 代码二 运行 java.math BigInteger 代码 运行 BigDecimal …
阅读更多...
【目标检测新SOTA！v7 v4作者新作！】YOLO v9 思路设计 + 全流程优化 + 手把手训练自己数据

【目标检测新SOTA！v7 v4作者新作！】YOLO v9 思路设计 + 全流程优化 + 手把手训练自己数据

YOLO v9 思路复现 全流程优化 手把手训练自己数据 提出背景&#xff1a;深层网络的 信息丢失、梯度流偏差YOLO v9 设计逻辑可编程梯度信息&#xff08;PGI&#xff09;&#xff1a;使用PGI改善训练过程广义高效层聚合网络&#xff08;GELAN&#xff09;&#xff1a;使用GELAN…
阅读更多...
k8s（5）

k8s（5）

目录 使用Kubeadm安装k8s集群&#xff1a; 初始化操作&#xff1a; 每台主从节点&#xff1a; 升级内核&#xff1a; 所有节点安装docker &#xff1a; 所有节点安装kubeadm&#xff0c;kubelet和kubectl&#xff1a; 修改了 kubeadm-config.yaml&#xff0c;将其传输给…
阅读更多...
面试redis篇-09redis分布式锁

面试redis篇-09redis分布式锁

原理 Redis实现分布式锁主要利用Redis的setnx命令。setnx是SET if not exists(如果不存在，则 SET)的简写 Redis实现分布式锁如何合理的控制锁的有效时长？ 根据业务执行时间预估 给锁续期 redisson实现的分布式锁-可重入 利用hash结构记录线程id和重入次数 redisson实现的分…
阅读更多...
Linux NFC 子系统剖析

Linux NFC 子系统剖析

1.总览 linux源码中NFC在net/nfc下&#xff0c;文件结构如下图&#xff1a; hci&#xff1a;Host Controller Interface 主要是针对NFC的主机-控制器接口协议 nci&#xff1a;NFC Controller Interface 主要是NFC的控制器接口协议&#xff0c;用于NFCC(NFC Controller)和DH(…
阅读更多...
项目解决方案：街道社区视频监控接入、汇聚和联网设计方案

项目解决方案：街道社区视频监控接入、汇聚和联网设计方案

目 录 一、客户需求 二、网络拓扑图 三、方案描述 四、系统配置 1、服务器配置 2、带宽配置 五、方案优势 1. 平台可堆叠使用 2. 支持主流接入协议 4. 多种终端显示 5. 客户端功能强大 6. 一机一档 一、客户需求 1&#xff0c;一个街道有十个社…
阅读更多...
spark 少量key倾斜的join优化

spark 少量key倾斜的join优化

背景 在使用spark join时&#xff0c;我们经常遇到少量key拥有大量的数据而导致的数据倾斜的问题&#xff0c;这导致了task任务数据处理非常不均匀而影响最终时效 少量key数据倾斜的join优化 这里有一个前提&#xff0c;join的另一边的表没有数据倾斜问题&#xff0c;也就是…
阅读更多...
vue3(vite)+electron打包踩坑记录（1）

vue3(vite)+electron打包踩坑记录（1）

vue3(vite)electron打包踩坑记录 - 打包vue 第一步 编译vue 使用vite构建vue&#xff0c;package.json如下 {"name": "central-manager","private": true,"version": "0.0.0","type": "commonjs",&q…
阅读更多...
曝iPhone 16 Pro加入两款全新配色：辨识度拉满

曝iPhone 16 Pro加入两款全新配色：辨识度拉满

博主Majin Bu透露&#xff0c;苹果为即将推出的iPhone 16 Pro系列提供全新的两款配色&#xff0c;分别为“沙漠钛金”和“钛灰色”两种颜色选择。 该博主表示&#xff0c;“沙漠钛金”类似于2022年iPhone 14 Pro上提供的金色选项&#xff0c;但更深更重。另一方面&#xff0c;“…
阅读更多...
数字化运维与AIOps

数字化运维与AIOps

干掉传统运维的不是devops&#xff0c;不是容器化&#xff0c;而是AI。随着未来基础设施的膨胀和复杂度急剧提升&#xff0c;人类运维能力已经显得力不从心。运维最终的归宿一定是人类决策&#xff0c;AI汇报与执行。 什么是数字化运维 数字化运维是一种基于信息技术手段数字化…
阅读更多...
剪辑视频调色怎么让画质变得清晰 视频剪辑调色技巧有哪些方面 剪辑视频免费的软件有哪些 会声会影调色在哪里 会声会影模板素材

剪辑视频调色怎么让画质变得清晰 视频剪辑调色技巧有哪些方面 剪辑视频免费的软件有哪些 会声会影调色在哪里 会声会影模板素材

视频调色的作用有很多&#xff0c;除了进行风格化剪辑以外&#xff0c;还可以让作品的画质变得清晰。通过调色来增强画面的清晰度&#xff0c;在观感上也会显得十分自然。视频调色的技巧有很多&#xff0c;并且原理大都十分简单。有关剪辑视频调色怎么让画质变得清晰&#xff0…
阅读更多...
R语言混合效应（多水平/层次/嵌套）模型及贝叶斯实现技术应用

R语言混合效应（多水平/层次/嵌套）模型及贝叶斯实现技术应用

回归分析是科学研究中十分重要的数据分析工具。随着现代统计技术发展&#xff0c;回归分析方法得到了极大改进。混合效应模型&#xff08;Mixed effect model&#xff09;&#xff0c;即多水平模&#xff08;Multilevel model&#xff09;/分层模型(Hierarchical Model)/嵌套模…
阅读更多...
C语言—函数

C语言—函数

1.编写一个函数&#xff0c;通过输入一个数字字符&#xff0c;返回该数字29. /*1.编写一个函数&#xff0c;通过输入一个数字字符&#xff0c;返回该数字 */#include <stdio.h>//函数定义,返回类型为int int char_num(char c) {if(c > 0 && c < 9) //检查…
阅读更多...
《隐私计算简易速速上手小册》第7章：隐私计算与云计算/边缘计算（2024 最新版）

《隐私计算简易速速上手小册》第7章：隐私计算与云计算/边缘计算（2024 最新版）

文章目录 7.1 云计算中的隐私保护7.1.1 基础知识7.1.2 主要案例：使用 Python 实现云数据的安全上传和访问7.1.3 拓展案例 1：实现基于角色的访问控制7.1.4 拓展案例 2：使用 Python 保护 API 安全7.2 边缘计算的隐私问题7.2.1 基础知识7.2.2 主要案例：使用 Python 实现边缘设…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站 尧图建网站 广利置业