Ajax 详解及其使用

Ajax（Asynchronous JavaScript and XML）是一种在客户端与服务器之间进行异步通信的技术，它允许网页在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。Ajax 的核心是XMLHttpRequest（XHR）对象，它提供了在客户端与服务器之间发送和接收数据的能力。Vue中通常利用Ajax技术来实现动态数据的获取、展示和更新。

Ajax 的工作原理

  1. 创建 XMLHttpRequest 对象：

    • 所有现代浏览器（IE7+，Firefox, Chrome, Safari 以及 Opera）都内建了 XMLHttpRequest 对象。创建方式通常是直接通过 new XMLHttpRequest() 来实现。

  2. 发送请求到服务器：

    • 通过调用 XMLHttpRequest 对象的 open() 和 send() 方法，可以向服务器发送请求。open() 方法用于规定请求的类型（如“GET”、“POST”）、URL以及是否异步处理请求。send() 方法则实际上是发送请求。

  3. 服务器处理请求：

    • 服务器接收到请求后，根据请求处理后端逻辑，然后发送响应数据。

  4. 接收服务器响应：

    • AJAX 异步接收响应，不会影响用户的其他操作。通过监听 XMLHttpRequest 对象的 onreadystatechange 事件，可以在服务器响应的状态改变时进行操作。当 readyState 属性变为 4 且 status 为 200 时，表示成功收到服务器的响应数据。

  5. 更新网页内容：

    • 通过 JavaScript 操作 DOM，可以将接收到的数据动态展示在网页上，从而实现无需重新加载整个页面即可更新部分网页内容的效果。

在 Vue 中使用 Ajax

在 Vue 项目中，Ajax 通常与前端框架结合使用来动态获取或提交数据。Vue 应用通常使用 Axios 作为 HTTP 客户端进行 Ajax 请求，Axios 是一个基于 Promise 的 HTTP 库，可以用于浏览器和 node.js。

引入 Axios

首先，需要在 Vue 项目中安装 Axios：

npm install axios
示例：在 Vue 组件中发送 GET 请求

接下来，展示如何在一个 Vue 组件中使用 Axios 发送 GET 请求获取数据：

<template><div><ul><li v-for="item in items" :key="item.id">{{ item.name }}</li></ul></div>
</template><script>
import axios from 'axios';export default {data() {return {items: [],};},mounted() {this.fetchData();},methods: {fetchData() {axios.get('https://api.example.com/items').then(response => {this.items = response.data;}).catch(error => {console.error('请求失败: ', error);});},},
};
</script>

在这个组件中，fetchData 方法通过 Axios 向 'https://api.example.com/items' 发送 GET 请求，然后在 .then 回调函数中使用响应数据更新 items 数据属性。mounted 钩子确保在组件挂载完成后立即获取数据。

了解Ajax技术及其在Vue中的应用，需要从几个方面更深入地探讨。以下将详细介绍包括XMLHttpRequest对象的使用细节，以及Vue.js项目中常用的HTTP客户端Axios的高级应用。

XMLHttpRequest对象

XMLHttpRequest是实现Ajax技术的基础，其工作流程大致如下：

  1. 实例化：创建一个XMLHttpRequest对象的实例。

    var xhr = new XMLHttpRequest();

  2. 配置请求：通过调用open方法配置请求的主要参数，如请求方法、URL、是否异步等。

    xhr.open('GET', 'https://api.example.com/data', true);

  3. 设置回调函数：通过监听onreadystatechange事件，设置当服务器响应的状态变化时的回调函数。在这个回调函数中，根据xhr.readyState的状态，决定是否处理响应数据。

    xhr.onreadystatechange = function() {if (xhr.readyState == 4 && xhr.status == 200) {var response = JSON.parse(xhr.responseText);console.log(response);}
};

  4. 发送请求：使用send方法发送请求。可以传递数据给服务器，也可以为null，具体取决于请求类型。

    xhr.send(null);

  5. 处理响应：在回调函数中处理服务器返回的数据。

Vue.js 与 Axios

在Vue项目中，通常使用Axios库来简化Ajax请求的流程。Axios是一个基于Promise的HTTP客户端，支持浏览器和node.js环境。它提供方便的API进行请求配置、发起和响应处理。

引入和安装Axios

在Vue项目中使用Axios之前，需要安装：

npm install axios

然后，在需要发起网络请求的Vue组件中引入Axios：

import axios from 'axios';
示例：在Vue组件中发起GET请求

以下代码展示了如何在Vue组件的mounted生命周期钩子中调用fetchData方法，向服务器发起GET请求并处理响应：

<template><div><ul><li v-for="item in items" :key="item.id">{{ item.title }}</li></ul></div>
</template><script>
import axios from 'axios';export default {data() {return {items: [],};},mounted() {this.fetchData();},methods: {fetchData() {axios.get('https://api.example.com/posts').then(response => {this.items = response.data;}).catch(error => {console.error('Error:', error);});}}
};
</script>
Axios的高级使用

Axios提供了很多高级功能，包括但不限于：

  • 拦截器（Interceptors）：可以在请求或响应被处理前，对它们进行拦截和操作。

    // 添加请求拦截器
axios.interceptors.request.use(config => {// 在发送请求之前做些什么return config;
}, error => {// 对请求错误做些什么return Promise.reject(error);
});// 添加响应拦截器
axios.interceptors.response.use(response => {// 对响应数据做点什么return response;
}, error => {// 对响应错误做点什么return Promise.reject(error);
});

  • 取消请求：Axios允许在请求发出后，如果需要，可以取消进行中的请求。

    const CancelToken = axios.CancelToken;
let source = CancelToken.source();axios.get('https://api.example.com/posts', {cancelToken: source.token
}).catch(function(thrown) {if (axios.isCancel(thrown)) {console.log('Request canceled', thrown.message);} else {// 处理错误}
});// 取消请求 (请求原因是可选的)
source.cancel('Operation canceled by the user.');

  • 全局配置：Axios允许定义针对所有请求的全局默认值。

    axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;

通过结合Vue的响应式系统和Axios的高级特性，可以有效地管理应用的数据流，使得数据处理更加灵活和高效。

Ajax 实战演练

根据和风天气（QWeather）API文档，若需通过城市名直接获取天气信息，您需要首先使用地理编码（Geocode）API将城市名称转换成相应的地理位置代码（即 location ID），然后再用这个位置代码调用天气预报 API。以下是基于和风天气API进行操作的步骤：

步骤1: 地理编码API转换城市名到 location ID

首先，使用和风天气的geoAPI：

https://geoapi.qweather.com/v2/city/lookup?location=城市名&key=您的API密钥&lang=zh
  • location参数修改为您想查询的城市名（例如北京）。
  • key参数请替换为您的和风天气API密钥。

示例请求（以“北京”为例，假设密钥为YOUR_API_KEY）:

https://geoapi.qweather.com/v2/city/lookup?location=北京&key=YOUR_API_KEY&lang=zh

返回的JSON数据中会包含该城市的location ID等信息。

步骤2: 使用天气预报API获取7天天气

获得location ID后，使用7天天气预报API：

https://devapi.qweather.com/v7/weather/7d?location=获得的位置ID&key=您的API密钥&lang=zh

将location参数替换为步骤1中获得的位置ID，key参数替换为您的API密钥。

示例代码

应用上述步骤的示例JavaScript代码片段（假设您使用axios进行HTTP请求）:

第一部分：通过城市名获取location ID

axios.get("https://geoapi.qweather.com/v2/city/lookup?location=北京&key=YOUR_API_KEY&lang=zh").then(response => {if (response.data.code === "200") {const locationId = response.data.location[0].id; // 假设取第一个返回结果的IDgetWeather(locationId); // 调用获取天气信息的函数}}).catch(error => {console.error("获取地理编码失败:", error);});

第二部分：使用location ID获取7天天气信息

function getWeather(locationId) {axios.get(`https://devapi.qweather.com/v7/weather/7d?location=${locationId}&key=YOUR_API_KEY&lang=zh`).then(response => {console.log("7天天气信息:", response.data);// 这里可以进一步处理和显示天气信息}).catch(error => {console.error("获取天气信息失败:", error);});
}

实现过程如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>ajax</title><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script src="../02%20vue%20初识/vue.js"></script><style>table,tr,th,td{border: 3px solid red;border-collapse: collapse;}th ,td{width: 200px;text-align: center;height: 30px;line-height: 30px;}.co{background-color: orange;}</style>
</head>
<body>
<div id="app" class="center-block"><input type="text" v-model="city"><button @click="getque" class="table-bordered">查询城市天气</button><div>当前查询城市: {{city}}</div><p></p><table  v-if="data!=''"><tr><th>序号</th><th>城市</th><th>日期</th><th>白天天气</th><th>夜间天气</th><th>最高温度</th><th>最低温度</th><th>相对湿度</th><th>能见度</th></tr><tr v-for="(tq,index) in data"><td>{{index+1}}</td><td>{{city}}</td><td>{{tq.fxDate}}</td><td>{{tq.textDay}}</td><td>{{tq.textNight}}</td><td>{{tq.tempMax}}</td><td>{{tq.tempMin}}</td><td>{{tq.humidity}}</td><td>{{tq.vis}}</td></tr></table>
</div>
<script>const app={data(){return{data:[],id:'',city:'北京',}},methods:{getque(){axios.get(`https://geoapi.qweather.com/v2/city/lookup?location=${this.city}&key=dc7728d14dfb4c6eb3eadc070a58397&lang=zh`).then(response=>{console.log(response.data.location)// 获取地理位置ID// const locationId = response.data.location[0].id;//获取城市名字this.city=response.data.location[0].name//获取城市idthis.id=response.data.location[0].idconsole.log(this.data,this.id)axios.get(`https://devapi.qweather.com/v7/weather/7d?location=${this.id}&key=dc7728d14dfb4c6eb3eadc070a58397&lang=zh`).then(response=>{console.log(response.data.daily)this.data = response.data.daily;})})}}}vm=Vue.createApp(app).mount('#app')
</script>
</body>
</html>

方法二：
将获取城市天气情况进行优化，采用官方推荐方法实现

<script>const app={data(){return{data:[],id:'',city:'北京',}},methods:{getque(){axios.get("https://geoapi.qweather.com/v2/city/lookup?key=dc7728d14dfb4c6eb3eadc070a58397b&lang=zh",{params:{location:this.city}}).then(response=>{console.log(response.data.location)// 获取地理位置ID// const locationId = response.data.location[0].id;//获取城市名字this.city=response.data.location[0].name//获取城市idthis.id=response.data.location[0].idconsole.log(this.data,this.id)axios.get(`https://devapi.qweather.com/v7/weather/7d?location=${this.id}&key=dc7728d14dfb4c6eb3eadc070a58397b&lang=zh`).then(response=>{console.log(response.data.daily)this.data = response.data.daily;})})}}}vm=Vue.createApp(app).mount('#app')
</script>

代码解释：

代码段使用了axios来发送HTTP GET请求到和风天气(即QWeather)的API，查询特定城市的信息。您的方式完全正确，并且使用了params对象传递了查询参数，这是axios推荐的方式之一，因为它可以使URL查询参数的管理更加清晰易读。

这段代码将发送一个GET请求到和风天气API的城市地理位置查找接口(city/lookup)。请求的认证通过key参数传递，同时指定语言参数lang为中文(zh)，查询的城市名称通过location参数动态指定，值来源于this.city，这意味着this.city应当事先在相应的Vue组件的data函数中定义，并且可以通过某些交互方式(例如用户输入)得到赋值。

成功响应后，response.data.location将包含一个或多个城市的相关信息，例如城市名、ID、经纬度等，具体包含哪些信息取决于和风天气API的返回数据结构。

这个示例中，使用了Vue的v-model指令来实现数据的双向绑定，使用户可以通过输入框输入城市名称，然后点击按钮调用queryCity方法进行查询，查询结果将在控制台输出。

在axios的使用语境中，params是axios库中用来指定URL查询参数（URL query parameters）的一个选项，并不是JavaScript或其他编程语言中的固定语法。在使用axios.get或其他HTTP方法时，可以通过在配置对象中添加一个params属性来传递这些参数。axios会自动把params对象转换成相应的URL查询字符串并附加到请求的URL后面。

例如：

axios.get('https://example.com/api', {params: {key1: 'value1',key2: 'value2'}
});

上面的请求会向https://example.com/api?key1=value1&key2=value2发送一个GET请求。

所以，params在这里是axios专用的一个配置项名称，用于在发起请求时指定要传递的URL查询参数。这样做的好处是让请求参数更加清晰可读，同时避免了手动拼接查询字符串的麻烦。

这种方式在使用axios发送需要查询字符串的请求时非常有用，但需要注意，这是axios库的特定功能，与其它HTTP请求库或原生JavaScript的fetch API使用方法可能有所不同。

实现效果：
在这里插入图片描述
输入想要查询的城市未来七天的天气默认城市为北京，点击search按钮进行查询：
在这里插入图片描述
查询其他城市，比如深圳：
在这里插入图片描述

其他

在使用axios这个HTTP库时，请求配置中除了params以外，还有许多其他的选项可以使用，以适应不同的请求需求。下面列举了一些常用的axios请求配置选项：

  1. url：要请求的URL地址。
  2. method：请求方法，如get、post、put等。
  3. baseURL：会被自动加在url前面，除非url是一个绝对URL。这个参数可以在实例创建时设置，以便在实例中使用相对路径的请求。
  4. headers：自定义请求头。
  5. params：请求的URL查询参数。
  6. data：作为请求主体被发送的数据，适用于请求方法如PUT、POST，和PATCH等。
  7. timeout：请求超时时间（毫秒）。
  8. responseType：服务器响应的数据类型，如json、text、blob等。
  9. responseEncoding: 用于解码响应字符串的编码类型，默认是utf8。
  10. maxContentLength：定义允许的响应内容的最大尺寸。
  11. validateStatus：自定义响应状态码的验证函数，如果验证函数返回true（或者设置为null或undefined），则承诺将解决，否则承诺将拒绝。
  12. withCredentials：表示跨站点访问控制请求时是否需要使用凭证。
  13. auth：表示应用于HTTP Basic Auth的凭证。
  14. onUploadProgress 和 onDownloadProgress：上传和下载过程中的回调函数，允许处理进度事件。

这些配置都可以在每个请求中单独使用，也可以在创建axios实例时指定，以便在实例创建的所有请求中全局使用。配置选项使axios成为一个功能强大且灵活的HTTP客户端库。

需要注意的是，一些配置项（如data、params）的适用场景不同。例如，params通常用于GET请求中附加URL查询参数，而data用于POST、PUT等请求中发送请求体数据。

此外，axios还提供了一些高级功能，如拦截器（Interceptors），它们允许您在请求或响应被then或catch处理之前对它们进行拦截和处理。这在实际开发中非常有用，比如添加通用的请求头、处理全局的错误提示等。

简单举例说明

好的，下面将通过具体的代码示例来说明axios中一些常用配置选项的用法。

1. url 和 method

向特定URL发送GET请求：

axios({method: 'get',url: 'https://example.com/data',
}).then(response => {console.log(response.data);
});

2. baseURL

设置基本的URL路径，后续请求可以只写资源路径：

const instance = axios.create({baseURL: 'https://api.example.com'
});instance.get('/data').then(response => {console.log(response.data);
});

3. headers

自定义请求头，比如设置Content-Type：

axios.post('/login', {username: 'example',password: '123456',
}, {headers: {'Content-Type': 'application/json'}
});

4. params

添加URL查询参数：

axios.get('/data', {params: {ID: 12345}
}).then(response => {console.log(response.data);
});

5. data

发送请求体数据，常用于POST方法：

axios.post('/submit', {name: '张三',age: 30
}).then(response => {console.log(response.data);
});

6. timeout

设置请求超时时间：

axios.get('/data', {timeout: 5000  // 5秒超时
}).then(response => {console.log(response.data);
}).catch(error => {console.error('请求超时或其他错误', error);
});

7. responseType

指定响应数据类型：

axios.get('/data', {responseType: 'json'
}).then(response => {console.log(response.data);
});

8. withCredentials

带上跨站点访问控制请求中的凭证（如Cookies）：

axios.get('https://api.example.com/data', {withCredentials: true
});

9. auth

使用HTTP Basic Auth：

axios.get('/admin', {auth: {username: 'admin',password: 's3cret'}
});

10. onUploadProgress 和 onDownloadProgress

监控文件上传和下载进度：

axios.post('/upload', formData, {onUploadProgress: progressEvent => {let percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);console.log(percentCompleted);}
});axios.get('/download', {onDownloadProgress: progressEvent => {let percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);console.log(percentCompleted);}
});

每个配置选项都针对特定的使用场景，通过灵活使用这些选项，可以有效地控制HTTP请求的各个方面。

总结

Ajax 在现代 Web 开发中扮演着重要的角色，它允许创建快速动态网页。通过 Ajax，可以在不重新加载整个网页的情况下与服务器交换数据，这显著提升了用户体验。在 Vue.js 开发中，结合使用 Axios 库来进行 Ajax 请求是非常普遍和高效的做法。

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

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

相关文章

Java的JVM学习一

Java的JVM学习一

一、java中的内存结构如何划分 栈和堆的区别&#xff1a; 栈负责处理运行&#xff0c;堆负债处理存储。 区域名称作用虚拟机栈用于存储正在执行的每个Java方法&#xff0c;以及其方法的局部变量表等。局部变量表存放了便器可知长度的各种基本数据类型&#xff0c;对象引用&am…
阅读更多...
部署实战--修改jar中的文件并重新打包成jar文件

部署实战--修改jar中的文件并重新打包成jar文件

一.jar文件 JAR 文件就是 Java Archive &#xff08; Java 档案文件&#xff09;&#xff0c;它是 Java 的一种文档格式JAR 文件与 ZIP 文件唯一的区别就是在 JAR 文件的内容中&#xff0c;多出了一个META-INF/MANIFEST.MF 文件META-INF/MANIFEST.MF 文件在生成 JAR 文件的时候…
阅读更多...
校园网网络规划与设计——计算机网络实践报告

校园网网络规划与设计——计算机网络实践报告

W...Y的主页 &#x1f60a; 代码仓库分享&#x1f495; 目录 一、设计目的 二、软硬件环境 三、理论基础 四、设计方案 五、网络配置步骤 六、设计过程中出现的问题及相应解决办法 八、参考资料 一、设计目的 深入理解网络工程的三层层次设计模型&#xff1b; 掌握网络…
阅读更多...
虚拟机安装archlinux

虚拟机安装archlinux

1、创建虚拟机 2、安装系统4、为了方便&#xff0c;修改密码并使用dos窗口连接 5、磁盘分区 由于新建虚拟机时是8G&#xff0c;所以只建一个分区就行 6、格式化分区并挂载 7、更新镜像 rootarchiso ~ # pacman -Sy 8、 pacstrap -i /mnt base base-devel linux linux-f…
阅读更多...
深信服技术认证“SCCA-C”划重点：深信服云计算关键技术

深信服技术认证“SCCA-C”划重点：深信服云计算关键技术

为帮助大家更加系统化地学习云计算知识&#xff0c;高效通过云计算工程师认证&#xff0c;深信服特推出“SCCA-C认证备考秘笈”&#xff0c;共十期内容。“考试重点”内容框架&#xff0c;帮助大家快速get重点知识。 划重点来啦 *点击图片放大展示 深信服云计算认证&#xff08…
阅读更多...
【操作宝典】IntelliJ IDEA新建maven项目详细教程

【操作宝典】IntelliJ IDEA新建maven项目详细教程

目录 &#x1f33c;1. 配置maven环境 &#x1f33c;2. 创建maven项目 &#x1f33c;3. 创建maven项目完整示例 a. 导入spring boot环境 b. 修改maven配置 c. 下载jar包 d. 创建Java类 &#x1f33c;1. 配置maven环境 【安装指南】maven下载、安装与配置详细教程-CSDN博客…
阅读更多...
qt之菜单栏的文字添加（图片同理）

qt之菜单栏的文字添加（图片同理）

一、需求与目的 一般常规的PC软件都会有主窗口&#xff0c;主窗口中都会有菜单栏和工具栏&#xff0c;例如我们正在使用的Qt creator&#xff1a; 二、详细说明 首先需要先创建mainWindow设计师类&#xff0c;基类直接选择默认的MainWindow即可&#xff0c;然后就可以进行设计了…
阅读更多...
Unity SRP 管线【第七讲：URP LOD实现以及Reflections反射探针】

Unity SRP 管线【第七讲：URP LOD实现以及Reflections反射探针】

目录 一、URP LOD 组件1、LOD Group的使用2、LOD切换原理Cross Fade(淡入淡出)模式Animated Cross-Fading如果未设置Clip&#xff0c;并且Fade Transition Width不为0LOD物体烘培 SpeedTree 模式 二、反射探针1. 获取反射探针数据2. 环境光照明 IBL3. 反射探针&#xff08;Refl…
阅读更多...
xmind思维导图 for mac v24.01中文版

xmind思维导图 for mac v24.01中文版

mac电脑上思维导图软件哪个好呢&#xff1f; xmind for mac一个功能强大、易于使用的思维导图软件&#xff0c;够帮助你更好地组织思维、管理信息、规划项目和解决问题&#xff0c;提高个人和团队的工作效率。 软件下载&#xff1a;xmind思维导图 for mac v24.01中文版 XMind f…
阅读更多...
WebService的services.xml问题

WebService的services.xml问题

WebService有多种实现方式&#xff0c;这里使用的是axis2 问题&#xff1a; 在本地开发&#xff0c;访问本地的http://localhost:8080/services/ims?wsdl&#xff0c;正常访问 但是打成jar包&#xff0c;不管是linux还是window启动&#xff0c;都访问不到&#xff0c;报错…
阅读更多...
VSCode 设置代理

VSCode 设置代理

Open Visual Studio Code, click the settings icon in the lower left corner, and click Settings.
阅读更多...
Selenium无法定位元素的几种解决方案（超详细整理）

Selenium无法定位元素的几种解决方案（超详细整理）

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 关注公众号【互联网杂货铺】&#xff0c;回复 1 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 1、frame/iframe表单嵌套 WebDriver只能在一个页面上对元素识别…
阅读更多...
使用pygame建立一个简单的使用键盘方向键移动的方块小游戏

使用pygame建立一个简单的使用键盘方向键移动的方块小游戏

import pygame import sys# 初始化pygame pygame.init()# 设置窗口大小 screen_size (640, 480) # 创建窗口 screen pygame.display.set_mode(screen_size) # 设置窗口标题 pygame.display.set_caption("使用键盘方向键移动的方块的简单小游戏")# 设置颜色 bg_colo…
阅读更多...
山体滑坡在线安全监测预警系统（解决方案）

山体滑坡在线安全监测预警系统（解决方案）

在近年来&#xff0c;随着全球气候变化的影响&#xff0c;山体滑坡等自然灾害频发&#xff0c;给人们的生命财产安全带来了严重威胁。为了有效预防和减少山体滑坡带来的危害&#xff0c;许多地方开始在山上安装山体滑坡在线安全监测预警系统&#xff08;解决方案&#xff09;。…
阅读更多...
人工智能深度学习发展历程-纪年录

人工智能深度学习发展历程-纪年录

前言 为了理解模型之间的改进关系、明确深度学习的发展目标、提高自身对模型的深度理解、贯彻爱与和平的理念。总之&#xff0c;我做了如下表格。 时间 重大突破 模型改进 详细信息 1847 SGD 随机梯度下降 1995 SVM 支持向量机 1982 RNN 循环神经网络&#xff0c;…
阅读更多...
什么是接口的幂等性，如何保证接口的幂等性？

什么是接口的幂等性，如何保证接口的幂等性？

✅作者简介&#xff1a;大家好&#xff0c;我是Leo哥&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo哥的博客 &#x1f49e;当前专栏&#xff1a; Java ✨特色专栏&#xff1a; MyS…
阅读更多...
贪吃蛇/链表实现（C/C++）

贪吃蛇/链表实现（C/C++）

本篇使用C语言实现贪吃蛇小游戏&#xff0c;我们将其分为了三个大部分&#xff0c;第一个部分游戏开始GameStart&#xff0c;游戏运行GameRun&#xff0c;以及游戏结束GameRun。对于整体游戏主要思想是基于链表实现&#xff0c;但若仅仅只有C语言的知识还不够&#xff0c;我们还…
阅读更多...
拓扑、监控、展示、流量、资产一体化管理，重庆石柱中医院部署智和信通统一运维平台

拓扑、监控、展示、流量、资产一体化管理，重庆石柱中医院部署智和信通统一运维平台

县中医院创建于1983年&#xff0c;是集医疗、教学、科研、急救、康复为一体的国家“二级甲等”综合性中医院&#xff0c;其智慧医院建设总体目标是以患者为中心&#xff0c;电子病历为核心&#xff0c;基于医院信息平台&#xff0c;实现全院资源的统一调度与管理&#xff0c;为…
阅读更多...
基于SpringBoot+Redis的前后端分离外卖项目-苍穹外卖(十六)

基于SpringBoot+Redis的前后端分离外卖项目-苍穹外卖(十六)

商家端订单管理模块 1. 订单搜索1.1 需求分析和设计1.2 代码实现1.2.1 admin/OrderController1.2.2 OrderService1.2.3 OrderServiceImpl 2. 各个状态的订单数量统计2.1 需求分析和设计2.2 代码实现2.2.1 admin/OrderController2.2.2 OrderService2.2.3 OrderServiceImpl2.2.4 …
阅读更多...
基于SSM+MySQL的的新闻发布系统设计与实现

基于SSM+MySQL的的新闻发布系统设计与实现

目录 项目简介 项目技术栈 项目运行环境 项目截图 代码截取 源码获取 项目简介 新闻发布系统是一款基于Servletjspjdbc的网站应用程序&#xff0c;旨在提供一个全面且高效的新闻发布平台。该系统主要包括后台管理和前台新闻展示两个平台&#xff0c;涵盖了新闻稿件的撰写…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023