Web应用：
前后端分离：
- 前端应用 Vue脚手架
- 服务器应用
前后端的连接：
- 请求的发送
- 响应的处理
AXAJ技术：
进行请求发送 实现页面刷新 异步处理
请求发送的方式：
- get：
- 参数直接拼接在url上
- 弊端：不安全；所携带的数据量小
- post：
- 参数通过请求体发送
- 优点：安全；所携带的数据量大
配置axios流程：
- 在main.js文件中引入axios
//引入axios
import Axios from 'axios'
//修改原型链，全局使用axios,这样之后可在每个组件的methods中调用$axios命令完成数据请求
Vue.prototype.$axios=Axios
- 组件使用axios请求数据
router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/components/Index'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'index',
component: Index
}
]
})
index.vue
使用一个按钮进行触发事件，利用get请求API接口，then中返回请求的整个结果
<template>
<button @click="getData">请求数据</button>
</template>
<script>
export default {
name: 'Index',
data () {
return {
}
},
methods:{
getData(){
this.$axios.get('https://www.apiopen.top/journalismApi')
.then(res=>{
console.log(res)//返回请求的结果
})
.catch(err=>{
console.log(err)
})
}
}
}
</script>
<style scoped>
</style>
json格式的数据
- 以对象的形式定义Object{ }
{"username":"test","sex":"nan"}
属性名用""括起来，属性值：取决于数据类型
{key:value,key:value...}
key:String类型
value:任何基本数据类型和数据结构
- 以数组的形式定义Array[ ]
[
{"username":"test","sex":"nan"},
{"username":"test","sex":"nan"},
{"username":"test","sex":"nan"},
]
Vue-js之生命周期（面试题）
方法与data.methods等方法并列等级
- beforeCreate:组件创建之前
- created：组件创建完毕
- beforeMount：组件挂载之前
- mounted：组件挂载完毕
- beforeUpate：组件更新之前
- upated：组件更新完毕
- beforeDestoy：组件销毁之前
- destoyed：组件销毁完毕
栗子：
// 组件创建完成 页面初始化 就运行
created() {
console.log("created生命周期");
},
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
</div>
<script src="vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message : "难凉热血——通俗易懂了解Vue2.0生命周期"
},
//组件创建之前
beforeCreate(){
console.group('beforeCreate 组件创建之前状态===============》');
console.log("%c%s", "color:red" , "el : " + this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
},
//组件创建完毕
created(){
console.group('created 组件创建完毕状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
// 组件挂载之前
beforeMount(){
console.group('beforeMount 组件挂载之前状态===============》');
console.log("%c%s", "color:red","el : " + (this.$el));
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
// 组件挂载完毕
mounted(){
console.group('mounted 组件挂载完毕状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
// 组件更新之前
beforeUpdate(){
console.group('beforeUpdate 组件更新之前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
// 组件更新完毕
updated(){
console.group('updated 组件更新完毕状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
// 组件销毁之前
beforeDestroy(){
console.group('beforeDestroy 组件销毁之前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
// 组件销毁完毕
destroyed(){
console.group('destroyed 组件销毁完毕状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
}
})
</script>
</body>
</html>
第三方API应用
AXAJ的基础流程
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//创建XMLHttpRequest核心对象
let xhr = new XMLHttpRequest();
//open()方法来完成Http请求（get方式）
xhr.open("get", "http://api.tianapi.com/txapi/ncovcity/index?key=4748269d9b462e33d37f85c9e2db5f5a");
//向服务器发送请求
xhr.send(null);
//使用onreadystatechange事件监听XMLHttpRequest对象状态。
xhr.onreadystatechange = function() {
//readyState属性代表了 XMLHttpRequest对象的五种状态。4状态为响应内容接收并解析完成
if (xhr.readyState == 4) {
//http请求会返回一个状态码。200为请求成功。
if (xhr.status == 200) {
//xhr.responseText就是服务器端返回的数据
console.log(xhr.responseText);
}
}
}
</script>
</head>
<body>
</body>
</html>
