保定建站服务,手机网站打开自动wap,wordpress链接过期,电脑上制作ppt的步骤文章目录 1 Ajax1.1 Ajax介绍1.1.1 Ajax概述1.1.2 Ajax作用1.1.3 同步异步 1.2 Axios1.2.1 Axios的基本使用1.2.2 Axios请求方法的别名 2 前端工程化2.1 前端工程化特点2.2 Vue项目开发流程 3 Vue组件库Element3.1 Element介绍 1 Ajax
1.1 Ajax介绍
1.1.1 Ajax概述
Ajax: 全… 文章目录 1 Ajax1.1 Ajax介绍1.1.1 Ajax概述1.1.2 Ajax作用1.1.3 同步异步 1.2 Axios1.2.1 Axios的基本使用1.2.2 Axios请求方法的别名 2 前端工程化2.1 前端工程化特点2.2 Vue项目开发流程 3 Vue组件库Element3.1 Element介绍 1 Ajax
1.1 Ajax介绍
1.1.1 Ajax概述
Ajax: 全称Asynchronous JavaScript And XML异步的JavaScript和XML。其作用有如下2点
与服务器进行数据交换通过Ajax可以给服务器发送请求并获取服务器响应的数据。异步交互可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术如搜索联想、用户名是否可用的校验等等。
1.1.2 Ajax作用
与服务器进行数据交互异步交互可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术
1.1.3 同步异步
同步请求浏览器页面在发送请求给服务器在服务器处理请求的过程中浏览器页面不能做其他的操作。只能等到服务器响应结束后才能浏览器页面才能继续做其他的操作。异步请求浏览器页面发送请求给服务器在服务器处理请求的过程中浏览器页面还可以做其他的操作。
1.2 Axios
Axios是对原生的AJAX进行封装简化书写。Axios官网是https://www.axios-http.cn
1.2.1 Axios的基本使用
Axios的使用比较简单主要分为2步 引入Axios文件 script srcjs/axios-0.18.0.js/script使用Axios发送请求并获取响应结果官方提供的api很多此处给出2种如下 发送 get 请求 axios({method:get,url:http://localhost:8080/ajax-demo1/aJAXDemo1?usernamezhangsan
}).then(function (resp){alert(resp.data);
})发送 post 请求 axios({method:post,url:http://localhost:8080/ajax-demo1/aJAXDemo1,data:usernamezhangsan
}).then(function (resp){alert(resp.data);
});axios()是用来发送异步请求的小括号中使用 js的JSON对象传递请求相关的参数 method属性用来设置请求方式的。取值为get或者 post。url属性用来书写请求的资源路径。如果是 get 请求需要将请求参数拼接到路径的后面格式为 url?参数名参数值参数名2参数值2。data属性作为请求体被发送的数据。也就是说如果是 post 请求的话数据需要作为data属性的值。 then() 需要传递一个匿名函数。我们将 then()中传递的匿名函数称为 回调函数意思是该匿名函数在发送请求时不会被调用而是在成功响应后调用的函数。而该回调函数中的 resp 参数是对响应的数据进行封装的对象通过resp.data可以获取到响应的数据。
1.2.2 Axios请求方法的别名
Axios还针对不同的请求提供了别名方式的api,具体如下
方法描述axios.get(url [, config])发送get请求axios.delete(url [, config])发送delete请求axios.post(url [, data[, config]])发送post请求axios.put(url [, data[, config]])发送put请求
2 前端工程化
2.1 前端工程化特点
前端工程化在企业级的前端项目开发中把前端开发所需要的工具、技术、流程、经验进行规范化和标准化。从而提升开发效率降低开发难度等等。它具有以下四个特点
模块化将js和css等做成一个个可复用模块组件化我们将UI组件css样式js行为封装成一个个的组件便于管理规范化我们提供一套标准的规范的目录接口和编码规范所有开发人员遵循这套规范自动化项目的构建测试部署全部都是自动完成
2.2 Vue项目开发流程
对于vue项目index.html文件默认是引入了入口函数main.js文件找到src/main.js文件其代码如下
import Vue from vue
import App from ./App.vue
import router from ./routerVue.config.productionTip falsenew Vue({router,render: h h(App)
}).$mount(#app)
上述代码中包括如下几个关键点
import: 导入指定文件并且重新起名。例如上述代码import App from ./App.vue导入当前目录下得App.vue并且起名为Appnew Vue(): 创建vue对象$mount(‘#app’);将vue对象创建的dom对象挂在到idapp的这个标签区域中作用和之前学习的vue对象的le属性一致。router: 路由详细在后面的小节讲解render: 主要使用视图的渲染的。
接下来说一下App.vue文件他的代码大致是这样的
templatediv idapp{{message}}/div
/templatescript
export default {data(){return {message:hello world}}
}
/script
style/style需要注意的是.vue结尾的都是vue组件。而vue的组件文件包含3个部分
template: 模板部分主要是HTML代码用来展示页面主体结构的script: js代码区域主要是通过js代码来控制模板的数据来源和行为的style: css样式部分主要通过css样式控制模板的页面效果得
3 Vue组件库Element
3.1 Element介绍 ElementUI就是一款侧重于V开发的前端框架主要用于开发美观的页面的。 Element是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库用于快速构建网页。 Element 提供了很多组件组成网页的部件供我们使用。例如 超链接、按钮、图片、表格等等。 ElementUI的学习方式和我们之前的学习方式不太一样对于ElementUI我们作为一个后台开发者只需要学会如何从ElementUI的官网拷贝组件到我们自己的页面中并且做一些修改即可。 官网地址https://element.eleme.cn/#/zh-CN
