3、JavaWeb-Ajax/Axios-前端工程化-Element

news2024/11/15 19:44:08

P34 Ajax介绍

Ajax:Asynchroous JavaScript And XML,异步的JS和XML

JS网页动作,XML一种标记语言,存储数据,

作用:

  • 数据交换:通过Ajax给服务器发送请求, 并获取服务器响应的数据

  • 异步交互:在不重新加载整个页面的情况下,与服务器交换数据并实现更新部分网页的技术,例如:搜索
    联想、用户名是否可用的校验等等。

同步与异步

  • 同步:服务器在处理中客户端要处于等待状态,输入域名,点击某个超链接等是同步操作

  • 异步:服务器在处理中客户端无需等待,也可以执行其他操作。

原生Ajax:(繁琐,现在常使用的是基于原生Ajax封装的技术,例如Axios)

  • 准备数据地址,前后端交互主流数据格式就是json

  • 创建XMLHttpRequest对象,用于和服务器交换数据

  • 向服务器发送请求

  • 获取服务器响应数据

例如:

 function getData() {
        // 创建XMLHttpRequest
        var xmlHttpRequest = new XMLHttpRequest();
        // 发送异步请求
        xmlHttpRequest.open('GET', '');
        // 获取服务器响应数据
        xmlHttpRequest.onreadystatechange = function(){
            if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
                document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
            }
        }
    }

可以查看官方文档,readyState为4表示请求已2完成并且响应已就绪。

status为返回请求的状态号,

  • 200为OK

  • 403为Forbidden

  • 404为Not Found

XHR就是XMLHttpRequest的简写,代表的就是异步请求。

P35 Ajax-Axios2

对原生的Ajax进行封装,简化书写,快速开发。

使用方式:

  • 引入Axios的js文件

  • 使用其发送请求,并获取响应结果

例如:

 function get(){
        // 通过axios发送异步请求get
        axios({
            method: "get",
            url: "https://dev.usemock.com/65dabfacc87ce4342e151249/ajax/01",

        }).then(result => {
            // 成功的回调函数
            console.log(result.data);
        })
    }

Axios请求方式别名:

  • axios.get()

  • axios.delete()

  • axios.post()

  • axios.put()

因此上述示例代码可以写为:

axios.get("").then((result)=>{
  console.log(result.data);
});

案例:基于Vue和Axios完成数据的动态加载展示

P36 前后端分离

在前端工程发起异步请求请求后端工程,处理完毕后返回给前端工程。

前后端开发遵守的开发规范定义在接口文档当中,将接口理解为一个业务功能,

下面是一个接口文档的示例:

接口文档-示例

1 根据ID查询员工

1.1 基本信息

请求路径:/emp

请求方式:GET

接口描述:该接口用于根据ID查询员工信息

1.2 请求参数

参数说明:

参数名类型是否必须备注
idnumber必须员工ID

请求样例:

 GET http://localhost:8080/emp?id=15
1.3 响应数据

参数格式:application/json

参数说明:

名称类型是否必须备注其他信息
codenumber必须响应码, 1 成功 , 0 失败
msgstring非必须提示信息
dataobject必须返回的数据
- idnumber非必须id
- namestring非必须姓名
- gendernumber非必须性别 , 1 男 ; 2 女
- imagestring非必须图像
- jobnumber非必须职位
- entrydatestring非必须入职日期
- updateTimestring非必须更新时间

响应数据样例:

 {
     "code": 1,
     "message": "success",
     "data": {
         "id": 15,
         "name": "谢逊",
         "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/1.jpg",
         "gender": 1,
         "job": "班主任",
         "entrydate": "2008-05-09",
         "updatetime": "2022-10-01 12:00:00"
     }
 }

如何维护接口文档

  • 在线:利用接口管理平台进行维护

  • 离线

接口文档通过产品经理经过原型和需求分析得来,

开发流程

  • 需求分析

  • API接口文档

  • 前后端并行开发

  • 测试

  • 前后端联调测试

接口文档管理平台-YAPI

https://yapi.pro/

功能:

  • API接口管理

  • Mock服务:测试接口,生成模拟测试数据

平台使用步骤:

  • 添加项目

  • 添加分类

  • 添加接口

创建好接口后会有一个Mock地址,可以访问它得到测试数据集。

在高级Mock里面可以设置期望返回的数据。

P37 前端工程化-环境准备

实际的前端开发:

  • 模块化:将JS、CSS等封装为模块可复用

  • 组件化:UI结构、样式、行为

  • 规范化:目录结构、编码、接口

  • 自动化:构建、部署、测试

前端工程化:在企业级的前端项目开发中,把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。

环境准备

上述可以使用Vue脚手架,

Vue-cli是Vue官方提供的一个脚手架,用于快速生成一个Vue的项目模板

Vue-cli提供了如下功能:

  • 统一的目录结构

  • 本地测试

  • 热部署:应用程序代码变动,不需要再次运行即可加载最新的程序

  • 单元测试

  • 集成打包上线

依赖环境:Node.js,前端工程化的运行环境

下载Node.js后安装,使用node -v查看是否配置好,

node.js中的包资源管理器

安装脚手架,npm install -g @vue/cli

查询是否安装成功vue --version

P38 前端工程化-Vue项目简介

创建有两种方式:

  • 命令行:vue create vue-project01

  • 图形化界面:在cmd中输入vue ui,打开Vue项目管理器

流程:
在这里插入图片描述

执行完成后就创建完成了,创建界面可以直接关掉了。

在这里插入图片描述

使用vs-code打开项目文件夹。

基于Vue脚手架创建出来的工程,有标准的目录结构:

  • node_modules:项目依赖包

  • public:项目静态文件

  • src:存放项目源代码

    • assets静态资源

    • components可重用的组件

    • router路由配置

    • views视图组件,页面

    • App.vue入口页面(根组件)

    • main.js入口js文件

  • package.json:模块基本信息,项目开发所需模块及版本信息

  • vue.config.js:保存vue配置的文件,例如代理、端口的配置等。

运行Vue项目:

  • 使用图形化界面

  • 命令行npm run serve

运行成功后默认是8080端口,而后面的Tomcat部署也用到8080,所以更改前端项目端口的方法:

P39 前端工程化-Vue项目开发流程

import 引入模块

export 将函数或对象导出为模块

render方法将导入的app视图创建出来的虚拟Dom元素挂载到app页面当中

new Vue({
  router, 
  render: h => h(App)
}).$mount('#app')


// 和下面的类似
// 如果属性名和属性一致,:后面可以省略
new Vue({
  el: "#app",
  router: router,
  render: h => h(App)
})

vue结尾的文件可称为组件文件,每个组件由三个部分组成:

  • < template>
  • < script>
  • < style>

创建script后,输入data,快捷生成data结构,可在return 中定义数据模型

P40 Element-快速入门

Element是基于Vue2.0的桌面端组件库

使用Element:

  • 安装组件库,npm install element-ui@2.15.33

  • 引入组件库

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'




Vue.use(ElementUI);  // 表示使用该组件
  • 访问官网,复制组件代码,调整

假如创建了一个.vue组件,需要在App.vue中引入新建的组件。

P48 vue路由

前端路由:URL中的hash(#号)与组件之间的对应关系。

Vue Router:Vue官方路由

组成:

  • VueRouter:路由器类,根据路由请求在路由视图中动态渲染选中的组件

  • :请求链接组件,浏览器会解析成

  • :动态视图组件,用来渲染展示与路由路径对应的组件

安装Vue路由:npm install vue-router@3.5.1

redirect重定向。

P49 打包部署

将前端工程和后端工程分开部署在服务器上

前端服务器较流行的是nginx,

两步操作:

  • 打包:执行build命令,生成dist文件夹,npm run build

  • 部署:将打包好的dist目录文件复制到nginx安装目录的html目录下

Nginx:

Nginx是一款轻量级的web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,

其特点是占有内存少,并发能力强,在各大互联网公司都有广泛应用。

启动nginx,双击nginx.exe,服务器默认占用80号端口,配置nginx端口号在conf文件夹中找到nginx.conf。

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

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

相关文章

C++ //练习 10.24 给定一个string,使用bind和check_size在一个int的vector中查找第一个大于string长度的值。

C Primer&#xff08;第5版&#xff09; 练习 10.24 练习 10.24 给定一个string&#xff0c;使用bind和check_size在一个int的vector中查找第一个大于string长度的值。。 环境&#xff1a;Linux Ubuntu&#xff08;云服务器&#xff09; 工具&#xff1a;vim 代码块 /*****…

VsCode配置PCL、Open3D自动补全

写在前面 本文内容 在VsCode上开发PCL、Open3D相关代码&#xff0c;代码自动补全 Open3D、PCL的安装使用见各个版本的Open3D、PCL的编译、使用教程 平台/环境 windows11(windows10): visual studio 2022&#xff1b;cmake 3.22; VsCode 通过cmake构建项目&#xff1b; 转载请…

基于Springboot免费搭载轻量级阿里云OSS数据存储库(将本地文本、照片、视频、音频等上传云服务保存)

一、注册阿里云账户 打开https://www.aliyun.com/&#xff0c;申请阿里云账户并完成实名认证&#xff08;个人&#xff09;。这种情况就是完成了&#xff1a; 二、开通OSS服务 点击立即开通即可。 三、创建Bucket 申请id和secert&#xff1a; 进去创建一个Accesskey就会出现以…

【软考】数据库的三级模式

目录 一、概念1.1 说明1.2 数据库系统体系结构图 二、外模式三、概念模式四、内模式 一、概念 1.1 说明 1.数据的存储结构各不相同&#xff0c;但体系结构基本上具有相同的特征&#xff0c;采用三级模式和两级镜像 2.数据库系统设计员可以在视图层、逻辑层和物理层对数据进行抽…

C语言:预处理

C语言&#xff1a;预处理 预定义符号#define定义常量定义宏宏与函数对比 #操作符##操作符条件编译头文件包含库文件包含本地文件包含嵌套文件包含 预定义符号 C语⾔设置了⼀些预定义符号&#xff0c;可以直接使⽤&#xff0c;预定义符号也是在预处理期间处理的。 __FILE__ //…

惠普GT5810打印机报错E9的处理方法

当打印机检测到供墨系统需要维护时&#xff0c;将会出现 E9 错误。 吴中函 打印出的带错误的供墨系统维护页包含解决该错误的说明。 出现 E9 警告时维持 HP Ink Tank 打印机的打印质量&#xff0c;出现 E9 警告时如何维持 HP Ink Tank 打印机的打印质量。 惠普5810报错E9通常…

UE 打包窗口及鼠标状态设置

UE 打包窗口及鼠标状态设置 打包后鼠标不锁定 显示鼠标图标 打包后设置窗口模式 找到打包路径下的配置文件GameUserSettings&#xff0c;设置相关项目 FullscreenMode0表示全屏模式&#xff0c;1表示窗口全屏模式&#xff0c;2表示窗口模式

Spring的Bean的生命周期 | 有图有案例

Spring的Bean的生命周期 Spring的Bean的生命周期整体过程实例化初始化服务销毁循环依赖问题 完整生命周期演示 Spring的Bean的生命周期 Spring Bean的生命周期&#xff1a;从Bean的实例化之后&#xff0c;通过反射创建出对象之后&#xff0c;到Bean称为一个完整的对象&#xf…

位运算---求n的二进制表示中第k位是1还是0 (lowbit)

操作&#xff1a; 先把第k位移到最后一位&#xff08;右边第一位&#xff09; 看个位是1还是0 lowbit(x)&#xff1a;返回x的最右边的1。 原理&#xff1a; 其中 &#xff0c;意思是 是 的补码。 就可以求出最右边的一位1。 应用&#xff1a; 当中 的个数。 int re…

案例介绍:汽车维修系统的信息抽取技术与数据治理应用(开源)

一、引言 在当今汽车产业的快速发展中&#xff0c;软件已经成为提升车辆性能、安全性和用户体验的关键因素。从车载操作系统到智能驾驶辅助系统&#xff0c;软件技术的进步正在重塑我们对汽车的传统认知。我有幸参与了一个创新项目&#xff0c;该项目专注于开发和集成先进的汽…

分布式ID生成算法|雪花算法 Snowflake | Go实现

写在前面 在分布式领域中&#xff0c;不可避免的需要生成一个全局唯一ID。而在近几年的发展中有许多分布式ID生成算法&#xff0c;比较经典的就是 Twitter 的雪花算法(Snowflake Algorithm)。当然国内也有美团的基于snowflake改进的Leaf算法。那么今天我们就来介绍一下雪花算法…

2024年智能驾驶年度策略:自动驾驶开始由创造型行业转向工程型行业

感知模块技术路径已趋于收敛&#xff0c;自动驾驶从创造型行业迈向工程型行业。在特斯拉的引领下&#xff0c;国内主机厂2022年以来纷纷跟随特斯拉相继提出“重感知、轻地图”技术方案&#xff0c;全球自动驾驶行业感知模块技术路径从百花齐放开始走向收敛。我们认为主机厂智能…

光学遥感卫星分辨率的奥秘 !!

文章目录 前言 1、光学遥感卫星分辨率的多维视角 &#xff08;1&#xff09;空间分辨率 &#xff08;2&#xff09;光谱分辨率 &#xff08;3&#xff09;辐射分辨率 &#xff08;4&#xff09;时间分辨率 2、光学遥感分辨率的重要性 3、遥感分辨率的挑战与进步 4、未来展望 总…

Git推送本地仓库至阿里云仓库

Git推送本地仓库至阿里云仓库 1.安装Git 参考Git安装详解 2.生成 SSH 密钥 基于RSA算法SSH 密钥 1.管理员权限运行Git Bash 2.输入生成密钥指令点击回车&#xff0c;选择 SSH 密钥生成路径。 $ ssh-keygen -t rsa -C "2267521563qq.com"3.以 RSA算法为例&…

ABAP - SALV教程17 弹窗ALV

SALV可以通过弹窗形式打开在生成SALV实例对象后调用set_screen_popup方法设置成弹出模式 "设置为弹窗模式 go_alv->set_screen_popup( start_column 10end_column 110start_line 5end_line 15). 显示效果 完整代码 SELECT *FROM ekkoINTO TABLE DATA(gt_dat…

C++自学精简实践教程

一、介绍 1.1 教程特点 一篇文章从入门到就业有图有真相&#xff0c;有测试用例&#xff0c;有作业&#xff1b;提供框架代码&#xff0c;作业只需要代码填空规范开发习惯&#xff0c;培养设计能力 1.2 参考书 唯一参考书《C Primer 第5版》​参考书下载&#xff1a; 蓝奏云…

如何自己系统的学python

学习Python是一项很好的投资&#xff0c;因为它是一种既强大又易于学习的编程语言&#xff0c;适用于多种应用&#xff0c;如数据分析、人工智能、网站开发等。下面是一个系统学习Python的步骤建议&#xff1a; 基础准备 安装Python&#xff1a; 访问Python官网下载最新版本的…

代码随想录第45天|● 198.打家劫舍 ● 213.打家劫舍II ● 337.打家劫舍III

文章目录 ● 198.打家劫舍思路代码1.dp数组两个变量 ● 213.打家劫舍II思路&#xff1a;代码 ● 337.打家劫舍III思路代码&#xff1a; ● 198.打家劫舍 思路 代码 1.dp数组 class Solution {public int rob(int[] nums) {if(nums.length1)return nums[0];int[] dpnew int[nu…

CentOS下安装Kafka3

kafka是分布式消息队列&#xff0c;本文讲述其在centos&#xff08;centos 7.5&#xff09;下的安装。安装过程可以参考其官方文档https://kafka.apache.org/36/documentation.html 首先在官网 https://kafka.apache.org/downloads 下载Kafka二进制文件&#xff08;官网的压缩包…

WordPress建站入门教程:如何在本地电脑搭建WordPress网站?

前面跟大家分享了『WordPress建站入门教程&#xff1a;如何安装本地WordPress网站运行环境&#xff1f;』&#xff0c;接下来boke112百科就继续跟大家分享本地电脑如何搭建WordPress网站。 小皮面板&#xff08;phpstudy&#xff09;的“软件管理 – 网站程序”虽然可以一键部…