文章目錄
- 1 Ajax
- 1.1 Ajax介紹
- 1.1.1 Ajax概述
- 1.1.2 Ajax作用
- 1.1.3 同步異步
- 1.2 Axios
- 1.2.1 Axios的基本使用
- 1.2.2 Axios請求方法的別名
- 2 前端工程化
- 2.1 前端工程化特點
- 2.2 Vue項目開發流程
- 3 Vue組件庫Element
- 3.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 src="js/axios-0.18.0.js"></script> -
使用Axios發送請求，并獲取響應結果，官方提供的api很多，此處給出2種，如下
-
發送 get 請求
axios({method:"get",url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan" }).then(function (resp){alert(resp.data); }) -
發送 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屬性的值。
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 './router'Vue.config.productionTip = falsenew 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: 主要使用視圖的渲染的。
接下來說一下App.vue文件，他的代碼大致是這樣的
<template><div id="app">{{message}}</div>
</template><script>
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
與登錄(login))
)
