JavaWeb——前端之Ajax&Vue

6. 前后端交互

6.1 Ajax(原生的)

概念: Asynchronous JavaScript And XML(异步的JavaScript和XML)

作用:

  • 数据交互:通过Ajax可以给服务器发送请求,并获取服务器响应的数据
  • 异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术

步骤:

  • 准备数据地址
  • 创建XMLHttpRequest对象:用于和服务器交换数据
  • 向服务器发送请求
  • 获取服务器响应的数据

6.2 Axios

概念: 对原生的Ajax进行了封装,简化书写,快速开发

步骤:

1)引入Axios的js文件

  • <script src = "js/axios-0.18.0.js"></script>

2)使用Axios发送请求,并获取响应结果

3)请求方式别名对上述代码进行改造

  • axios.get(url[, config])
  • axios.post(url[, config])
  • axios.delete(url[, config])
  • axios.put(url[, config])
  • 例:

7. 前后端分离开发

前后端分离: 各司其职,前端发送请求给后端,后端发送响应给前端,那么他们中间就需要一个规范------接口文档,基于接口文档进行开发

接口文档维护: 在线和离线

接口文档来源: 产品经理的页面原型和需求文档分析

接口文档的管理平台:YAPI

API管理接口

Mock服务------模拟真实接口,返回数据,便于前端测试

8. 前端开发工程化------冗余、不规范

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

环境:vue-cli

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

功能:

  • 统一目录结构
  • 本地调试
  • 热部署:会自己保存刷新页面
  • 单元测试
  • 单元测试
  • 集成打包上线

依赖环境:NodeJS

9. Element

概念: 饿了么团队基于Vue2.0的桌面端组件(组成网页的不见,超链接、图片、表格、表单等)库

命名规则: 驼峰命名

步骤:

  • 安装ElementUI组件库(在当前工程目录下),命令行执行npm install element-ui@版本号
  • 引入ElementUI组件库(官方文档中找)
  • 访问官方文档,复制组件代码,调整

10. 路由

Vue Router:是Vue的官方路由,URL中的hash(#号)与组件之间的对应关系

组成:

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

<router-link>:请求链接组件,浏览器会解析成<a>

<router-view>:动态视图组件,用来渲染展示与路由路径对应的组件

index.js中定义路由,main.js中在创建Vue对象的时候使用路由,HTML中使用<router-link>,引用组件的Vue中使用<router-view>

相关推荐
Cachel wood3 分钟前
python round四舍五入和decimal库精确四舍五入
java·linux·前端·数据库·vue.js·python·前端框架
学代码的小前端5 分钟前
0基础学前端-----CSS DAY9
前端·css
joan_859 分钟前
layui表格templet图片渲染--模板字符串和字符串拼接
前端·javascript·layui
m0_7482361140 分钟前
Calcite Web 项目常见问题解决方案
开发语言·前端·rust
Watermelo6171 小时前
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
开发语言·前端·javascript·算法·数据挖掘·数据分析·ecmascript
m0_748248941 小时前
HTML5系列(11)-- Web 无障碍开发指南
前端·html·html5
m0_748235611 小时前
从零开始学前端之HTML(三)
前端·html
一个处女座的程序猿O(∩_∩)O3 小时前
小型 Vue 项目,该不该用 Pinia 、Vuex呢?
前端·javascript·vue.js
hackeroink6 小时前
【2024版】最新推荐好用的XSS漏洞扫描利用工具_xss扫描工具
前端·xss
迷雾漫步者8 小时前
Flutter组件————FloatingActionButton
前端·flutter·dart