JavaWeb3 Ajax+Axios+Element+Nginx部署

Ajax

异步JS和XML
1.数据交换:给服务器发送请求,并获取服务器相应的数据
2.异步交互:在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页

同步与异步

在这里插入图片描述

原生Ajax

<!DOCTYPE html>
<html>
<body><div id="demo"><h2>让 AJAX 更改这段文本</h2><button type="button" onclick="loadDoc()">更改文本</button>
</div></body>
</html> 
Function loadDoc()function loadDoc() {var xhttp = new XMLHttpRequest();//1.构造XMLHttpRequest()xhttp.onreadystatechange = function() {//3.监测状态变化if (this.readyState == 4 && this.status == 200) {document.getElementById("demo").innerHTML = this.responseText;}};xhttp.open("GET", "ajax_info.txt", true);//2.发起异步请求xhttp.send();
}

Axios

对原生Ajax封装

<head>
<script src="js/axios-0.18.0.js"></script>引入js文件夹下的. js
</head>
<body><input type="button" value="获取数据" onclick="get">
</body>
<script>function get(){axios({method:"get",url:"http:xxxx/list"}).then(result->{console.log(result.data);})}function post(){axios({method:"get",url:"http:xxxx/list/deleteId",data:"id=1",}).then(result->{console.log(result.data);})}
</script>

前面的视频有讲过,对象里的属性不用双引号,定义json字符串的时候key值要用双引号,且最外层要加单引号,因为json本质就是个字符串 ,

以下 API 只能发送特定类型的 HTTP 请求(常用):

axios.get(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.delete(url[, config])
axios.get("http://xxxx").then(result=>{console.log(result.data);
})
axios.post("http://xxxx","id=1").then(result=>{console.log(result.data);
})

前后端分离开发

Vue-cli脚手架

依赖环境NodeJS
安装+配置
。。。

Vue目录结构

在这里插入图片描述
可以热部署:热部署是指无须停止或重启应用程序,即可更新或替换部分代码或资源

Vue 项目启动

在这里插入图片描述
改变端口号:
在vue.config.js里:

moudle.exports = defineConfig({
...
deServer:{//添加port:7000
}
})
开发流程

Vue组件文件已.vue结尾,由三个部分组成:<template>、<script>、<style>
具体就不细说了。。。【项目里不直接用它,就了解一下】

Element

组件库–让你的页面更好看

Vue路由

Vue Router是Vue的官方路由
讲得好呀: https://blog.csdn.net/qq_45799465/article/details/123744027
router->index.js

刚启动时默认访问路由’/’
这时可以用重定向

打包部署

前后端分别放在不同的服务器上
buid 打包后再dist目录下得到

部署Nginx

部署前端静态资源
默认占用80端口号,可以在nginx.conf中修改端口号。
使用netstat-ano|findStr 80来查看谁占用了80端口号

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

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

相关文章

卷积池化尺寸计算公式

卷积层[Conv]&#xff1a; 卷积CNN是我们最常使用的&#xff0c;但是有时候需要观察他的输出前后的差异&#xff0c;这里描述下计算方式&#xff0c;具体如下&#xff1a; 图片大小&#xff1a;WxHxD W:宽 H:高 D:通道&#xff08;RGB&#xff09; 例:320x320x3 卷积核&…

Android——热点开关演讲稿

SoftAP打开与关闭 目录 1.三个名词的解释以及关系 Tethering——网络共享&#xff0c;WiFi热点、蓝牙、USB SoftAp——热点(无线接入点)&#xff0c;临时接入点 Hostapd——Hostapd是用于Linux系统的软件&#xff0c;&#xff0c;支持多种无线认证和加密协议&#xff0c;将任…

后端开发面经系列 -- 同程旅行C++一面

同程旅行C一面 公众号&#xff1a;阿Q技术站 文章目录 同程旅行C一面1、sizeof与strlen的区别&#xff1f;2、运算符和函数有什么区别&#xff1f;3、new和malloc&#xff1f;4、内存泄漏与规避方法&#xff1f;5、悬空指针与野指针&#xff1f;6、手撕冒泡排序&#xff1f;7、…

Java集合的迭代操作,Set Map接口以及工具类方法

1、集合元素迭代 1.1 集合元素遍历 集合的遍历&#xff1a;把集合中的每一个元素获取出来 使用for遍历 使用迭代器遍历 Iterator表示迭代器对象&#xff0c;迭代器中拥有一个指针&#xff0c;默认指向第一个元素之前&#xff0c; . boolean hasNext()&#xff1a;判断指针后是…

硬件调试记录——ESD保护电路

ESD保护电路&#xff0c;测试其是否已经烧坏&#xff0c;用万用表二极管功能来测试. ESD电路表现出二极管特性&#xff0c;正向电压比反向电压高0.5v~0.7v

任务3.7 开发名片管理系统

本实战项目以Java语言为基础&#xff0c;精心打造了一个功能全面的名片管理系统。系统采用面向对象的设计原则&#xff0c;通过Card类来封装每张名片的详细信息&#xff0c;如姓名、单位、职位和联系电话等&#xff0c;并提供了标准的访问器和修改器方法以确保数据的安全访问。…

回溯算法全排列

给定一个不含重复数字的数组 nums &#xff0c;返回其 所有可能的全排列 。你可以 按任意顺序 返回答案。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,3] 输出&#xff1a;[[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2],[3,2,1]] 这里需要用到一个数组来判断&#xff0c;数…

ROS学习记录:自定义消息类型

前言 当我们需要传输一些特殊的数据时&#xff0c;且官方的消息包无法满足需求&#xff0c;我们便可以自己定义一个消息类型。 实验步骤 一、在终端输入cd ~/catkin_ws1/src进入工作空间中src目录 二、输入catkin_create_pkg qq_msgs roscpp rospy std_msgs message_generati…

windows10子系统wsl ubuntu22.04下GN/ninja环境搭建

打开windows10子系统 ubuntu22.04 ubuntu22.04: 首先需要 安装ninja $sudo apt install ninja-build $ ninja --version 1.10.0 安装clang $sudo apt install clang $clang --version Ubuntu clang version 14.0.0-1ubuntu1.1安装gn Github: https://github.com/timniederh…

Python - tuple

声明tuple >>> a (3) >>> type(a) <class int> >>> b 3 >>> type(b) <class int> >>> c (3,) >>> type(c) <class tuple> 元组中只有一个元素时&#xff0c;应该在元素后面追加一个半角的英文逗…

SDXL终于有了足够好的 Openpose 和 Scribble 模型可以使用了。

SDXL终于有了足够好的 Openpose 和 Scribble 模型可以使用了。 xinsir 发布的Openpose 和 Scribble 模型质量相当好&#xff0c;尤其是 Openpose。不过只支持姿态不支持面部。 再加上前几天的 Anyline 线条预处理器和 Canny 模型。SDXL 的生态在发布快一年的时候成熟了。 模…

太阳能语音警示杆在户外的应用及其作用

一、太阳能语音警示杆的主要应用领域 交通管理&#xff1a;在城市道路、乡村公路、高速公路等交通要道&#xff0c;太阳能语音警示杆可以用于提醒驾驶员注意前方路况、减速慢行或者避让施工区域。例如&#xff0c;在临时施工路段&#xff0c;警示杆可以播放“前方施工&#xf…

Orange Pi AI Pro 开箱 记录

香橙派 AIpro&#xff08;OrangePi AIpro&#xff09;是一款面向AI开发的强大开发板&#xff0c;提供了高性能和多功能的开发环境。我将结合自己的开发经验&#xff0c;详细介绍这款开发板的性能、适用场景及使用体验。 一、产品概述 香橙派 AIpro配备了强大的硬件配置&#…

ZeroMq传输视频的几种方案

前言 因为项目需要&#xff0c;现在需要使用ZeroMq去实现摄像头视频数据的传输&#xff0c;尝试了不少方法&#xff0c;以下是一些成功的汇总&#xff0c;定时更新&#xff1a; 参考文章&#xff1a; ZeroMQOpenCV实现视频网络传输_zmq视频传输-CSDN博客 这个代码有点问题&…

详解 Flink 的运行架构

一、组件 1. JobManager 作业管理器是一个 Flink 集群中任务管理和调度的核心&#xff0c;是控制应用执行的主进程 1.1 JobMaster JobMaster 是 JobManager 中最核心的组件&#xff0c;负责处理单独的作业&#xff08;Job&#xff09;。JobMaster 和具体的 Job 是一一对应的&…

通过 SFP 接口实现千兆光纤以太网通信4

Tri Mode Ethernet MAC 与 1G/2.5G Ethernet PCS/PMA or SGMII 的连接 在设计中&#xff0c;需要将 Tri Mode Ethernet MAC 与 1G/2.5G Ethernet PCS/PMA or SGMII 之间通过 GMII 接口互联。Tri Mode Ethernet MAC IP 核的工作时钟源为 1G/2.5G Ethernet PCS/PMA or SGMII …

今日增长工具精选| 8个SaaS出海必备运营工具

一、SurveyMonkey 是一个灵活、方便、经济实惠的在线调查工具&#xff0c;可以通过自行设计定制化问卷&#xff0c;开展消费者调研&#xff0c;收集第一手数据&#xff0c;获取用户反馈。 客户涵盖财富100强公司以及其他不同规模和类型的组织&#xff0c;如公司、学术研究机构…

深入了解Java单例模式及其使用场景

什么是单例模式&#xff1f; 简单通俗来讲&#xff0c;单例模式是一种设计模式&#xff0c;它确保一个类只能有一个实例&#xff0c;并提供全局访问。在 Java 中&#xff0c;可以通过以下几种方式来实现线程安全的单例模式。 饿汉式单例 饿汉式单例模式指的是在类加载的时候…

Redis位图和地理空间GEO介绍与使用

1、位图 应用场景 在很多互联网应用中&#xff0c;我们会存在签到送积分、签到领取奖励等这样的需求&#xff0c;比如: 签到1天送10积分&#xff0c;连续签到2天送20积分&#xff0c;3天送30积分&#xff0c;4天以上均送50积分等。 如果连续签到中断&#xff0c;则重置计数&…