前端快速入门

最新推荐文章于 2023-08-01 16:00:44 发布

欧尼焦

最新推荐文章于 2023-08-01 16:00:44 发布

阅读量79

点赞数

文章标签：前端 javascript ajax

本文链接：https://blog.csdn.net/stange1/article/details/128976868

版权

Day03：Ajax、Vue、Element入门

1.1 Ajax介绍

1.1.1 Ajax概述

全称Asynchronous JavaScript And XML，异步的JavaScript和XML。

1.1.2 Ajax作用

与服务器进行数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
异步交互：在不重新加载整个页面下，与服务器交换数据并更新部分网页，如：搜索联想、用户名是否可用的校验等等。

1.1.3 同步异步

同步:
浏览器页面在发送请求给服务器，在服务器处理请求的过程中，浏览器页面不能做其他的操作。只能等到服务器响应结束，浏览器页面才能继续做其他的操作。

异步:

浏览器页面发送请求给服务器，在服务器处理请求的过程中，浏览器页面还可以做其他的操作。

1.2 原生Ajax

1.3 Axios

Axios是对原生的AJAX进行封装，简化书写。Axios官网是：https://www.axios-http.cn

1.3.1 Axios的基本使用

1.3.1.1 引入Axios文件

1.3.1.2 使用Axios发送请求，并获取响应结果，官方提供的api很多，此处给出2种，如下

发送 get 请求
get请求：得到参数

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

axios({
    method:"get",
    url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"
}).then(function (resp){
    alert(resp.data);
})

发送 post 请求
post 请求：提交参数

axios({
    method:"post",
    url:"http://localhost:8080/ajax-demo1/aJAXDemo1",
    data:"username=zhangsan"
}).then(function (resp){
    alert(resp.data);
});

axios()是用来发送异步请求的，小括号中使用 js的JSON对象传递请求相关的参数：

method属性：用来设置请求方式的。取值为 get 或者 post。.
url属性：用来书写请求的资源路径。如果是 get 请求，需要将请求参数拼接到路径的后面，格式为： url?参数名=参数值&参数名2=参数值2。
data属性：作为请求体被发送的数据。也就是说如果是 post 请求的话，数据需要作为 data 属性的值。

1.4 前后台分离开发

前后台混合开发和前后台分离开发

1.4.1 前后台混合开发

沟通成本高：后台人员发现前端有问题，需要找前端人员修改，前端修改成功，再交给后台人员使用
分工不明确：后台开发人员需要开发后台代码，也需要开发部分前端代码。很难培养专业人才
不便管理：所有的代码都在一个工程中
不便维护和扩展：前端代码更新，和后台无关，但是需要整个工程包括后台一起重新打包部署。

1.4.2 前后台分离开发

在这里插入图片描述

需求分析：首先我们需要阅读需求文档，分析需求，理解需求。
接口定义：查询接口文档中关于需求的接口的定义，包括地址，参数，响应数据类型等等
前后台并行开发：各自按照接口文档进行开发，实现需求
测试：前后台开发完了，各自按照接口文档进行测试
前后段联调测试：前段工程请求后端工程，测试功能

1.5 YAPI

YApi 是高效、易用、功能强大的 api 管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务。

1.5.1 YAPI介绍

http://yapi.smart-xwork.cn/

API接口管理：根据需求撰写接口，包括接口的地址，参数，响应等等信息。
Mock服务：模拟真实接口，生成接口的模拟测试数据，用于前端的测试。

1.5.2 接口文档管理

1.5.3 前端工程化

当我们需要使用一些资源时，例如：vue.js，和axios.js文件，都是直接在工程中导入的。

上述方式缺点：

每次开发都是从零开始，比较麻烦
多个页面中的组件共用性不好
js、图片等资源没有规范化的存储目录，没有统一的标准，不方便维护

现在企业开发中更加讲究前端工程化方式的开发，主要包括如下4个特点

模块化：将js和css等，做成一个个可复用模块
组件化：我们将UI组件，css样式，js行为封装成一个个的组件，便于管理
规范化：我们提供一套标准的规范的目录接口和编码规范，所有开发人员遵循这套规范
自动化：项目的构建，测试，部署全部都是自动完成

1.6 Vue项目简介

在这里插入图片描述

1.6.1 Vue项目开发流程

1.6.2 对于vue项目，index.html文件默认是引入了入口函数main.js文件，我们找到src/main.js文件

其代码如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

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

上述代码中，包括如下几个关键点：

import: 导入指定文件，并且重新起名。例如上述代码import App from './App.vue'导入当前目录下得App.vue并且起名为App
new Vue(): 创建vue对象
$mount(‘#app’);将vue对象创建的dom对象挂在到id=app的这个标签区域中，作用和之前学习的vue对象的le属性一致。
router: 路由
render: 主要使用视图的渲染的。