Add files via upload

浪里行舟 · web-flow · commit b5ae1c8e181a · 2020-03-04T00:15:09.000+08:00
diff --git a/vue2.0学习/基于axios接口封装/README.md b/vue2.0学习/基于axios接口封装/README.md
@@ -0,0 +1,24 @@
+# demo
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
diff --git a/vue2.0学习/基于axios接口封装/babel.config.js b/vue2.0学习/基于axios接口封装/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
diff --git a/vue2.0学习/基于axios接口封装/package-lock.json b/vue2.0学习/基于axios接口封装/package-lock.json
diff --git a/vue2.0学习/基于axios接口封装/package.json b/vue2.0学习/基于axios接口封装/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "demo",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "axios": "^0.19.2",
+    "core-js": "^3.6.4",
+    "qs": "^6.9.1",
+    "vue": "^2.6.11"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.2.0",
+    "@vue/cli-plugin-eslint": "~4.2.0",
+    "@vue/cli-service": "~4.2.0",
+    "babel-eslint": "^10.0.3",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.1.2",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ]
+}
diff --git a/vue2.0学习/基于axios接口封装/public/favicon.ico b/vue2.0学习/基于axios接口封装/public/favicon.ico
diff --git a/vue2.0学习/基于axios接口封装/public/index.html b/vue2.0学习/基于axios接口封装/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/vue2.0学习/基于axios接口封装/src/App.vue b/vue2.0学习/基于axios接口封装/src/App.vue
@@ -0,0 +1,18 @@
+<template>
+  <div id="app">
+    <img alt="Vue logo" src="./assets/logo.png" />
+    <div>浪里行舟</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App',
+  methods: {
+    add() {
+      this.$api.vote.voteAdd() // 直接就可以调用api,无需再引入api.js文件
+    }
+  }
+}
+</script>
+<style></style>
diff --git a/vue2.0学习/基于axios接口封装/src/api/api.js b/vue2.0学习/基于axios接口封装/src/api/api.js
@@ -0,0 +1,8 @@
+// 这里数据请求的唯一入口 
+import personal from './personal'
+import vote from './vote'
+
+export default{
+    personal,
+    vote
+}
diff --git a/vue2.0学习/基于axios接口封装/src/api/http.js b/vue2.0学习/基于axios接口封装/src/api/http.js
@@ -0,0 +1,70 @@
+// 基于axios实现接口请求库的封装
+import axios from 'axios'
+import qs from 'qs' // 引入qs模块，用来序列化post类型的数据
+// 根据环境变量区分接口的默认地址
+switch (process.env.NODE_ENV) {
+  case 'production':
+    axios.defaults.baseURL = 'http://api.zhufengpeixun.cn'
+    break
+  case 'test':
+    axios.defaults.baseURL = 'http://192.168.20.12:8080'
+    break
+  default:
+    axios.defaults.baseURL = 'http://127.0.0.1:3000'
+}
+// 设置超时请求时间
+axios.defaults.timeout = 10000
+// 设置CORS跨域允许携带资源凭证
+axios.defaults.withCredentials = true
+// 设置POST请求头：告知服务器请求主体的数据格式
+axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
+axios.defaults.transformRequest = data => qs.stringify(data)
+// 设置请求拦截器
+axios.interceptors.request.use(
+  config => {
+    // TOKEN校验（JWT）,接收服务器返回的token，存储到 vuex本地存储中，每一次向服务器发请求，我们应该把token带上
+    const token = localStorage.getItem('token')
+    token && (config.headers.Authorization = token)
+    return config
+  },
+  error => {
+    return Promise.reject(error)
+  }
+)
+// 设置响应拦截器
+axios.defaults.validateStatus = status => {
+  // 自定义响应成功的HTTP状态码
+  return /^(2|3)\d{2}$/.test(status)
+}
+axios.interceptors.response.use(
+  response => {
+    // 只返回响应主体中的信息（部分公司根据需求会进一步完善，例如指定服务器返回的CODE值来指定成功还是失败）
+    return response.data
+  },
+  error => {
+    if (error.response) {
+      switch (error.response.status) {
+        case 400:
+          error.message = '请求错误(400)'
+          break
+        case 401: // 当前请求需要用户验证（一般是未登录）
+          error.message = '未授权，请登录(401)'
+          break
+        case 403: // 服务器已经理解请求，但是拒绝执行它（一般是TOKEN过期）
+          error.message = '拒绝访问(403)'
+          localStorage.removeItem('token')
+          // 跳转到登录页
+          break
+      }
+      return Promise.reject(error.response)
+    } else {
+      // 断网处理
+      if (!window.navigator.onLine) {
+        // 断开网络了，可以让其跳转到断网页面
+        return
+      }
+      return Promise.reject(error)
+    }
+  }
+)
+export default axios
diff --git a/vue2.0学习/基于axios接口封装/src/api/personal.js b/vue2.0学习/基于axios接口封装/src/api/personal.js
@@ -0,0 +1,8 @@
+// 接口模块一
+import axios from './http'
+
+function login(){
+    return axios.post('/login');
+}
+
+export default {login}
diff --git a/vue2.0学习/基于axios接口封装/src/api/request.js b/vue2.0学习/基于axios接口封装/src/api/request.js
@@ -0,0 +1,92 @@
+// 基于fetch实现接口请求库的封装
+import qs from 'qs';
+/*
+ * 根据环境变量进行接口区分
+ */
+let baseURL = '';
+let baseURLArr = [{
+	type: 'development',
+	url: 'http://127.0.0.1:9000'
+}, {
+	type: 'test',
+	url: 'http://192.168.20.15:9000'
+}, {
+	type: 'production',
+	url: 'http://api.zhufengpeixun.cn'
+}];
+baseURLArr.forEach(item => {
+	if (process.env.NODE_ENV === item.type) {
+		baseURL = item.url;
+	}
+});
+
+export default function request(url, options = {}) {
+	url = baseURL + url;
+	/*
+	 * GET系列请求的处理 
+	 */
+	!options.method ? options.method = 'GET' : null;
+	if (options.hasOwnProperty('params')) {
+		if (/^(GET|DELETE|HEAD|OPTIONS)$/i.test(options.method)) {
+			const ask = url.includes('?') ? '&' : '?';
+			url += `${ask}${qs.stringify(params)}`;
+		}
+		delete options.params;
+	}
+
+	/*
+	 * 合并配置项 
+	 */
+	options = Object.assign({
+		// 允许跨域携带资源凭证 
+		credentials: 'include',// 如果是same-origin则同源可以  omit都拒绝
+		// 设置请求头
+		headers: {}
+	}, options);
+	options.headers.Accept = 'application/json';
+
+	/*
+	 * token的校验
+	 */
+	const token = localStorage.getItem('token');
+	token && (options.headers.Authorization = token);
+
+	/*
+	 * POST请求的处理
+	 */
+	if (/^(POST|PUT)$/i.test(options.method)) {
+		!options.type ? options.type = 'urlencoded' : null;
+		if (options.type === 'urlencoded') {
+			options.headers['Content-Type'] = 'application/x-www-form-urlencoded';
+			options.body = qs.stringify(options.body);
+		}
+		if (options.type === 'json') {
+			options.headers['Content-Type'] = 'application/json';
+			options.body = JSON.stringify(options.body);
+		}
+	}
+	return fetch(url, options).then(response => {
+		// 返回的结果可能是非200状态码 这边返回也有可能是失败的状态码
+		if (!/^(2|3)\d{2}$/.test(response.status)) {
+			switch (response.status) {
+				case 401: // 当前请求需要用户验证（一般是未登录）
+					break;
+				case 403: // 服务器已经理解请求，但是拒绝执行它（一般是TOKEN过期）
+					localStorage.removeItem('token');
+					// 跳转到登录页
+					break;
+				case 404: // 请求失败，请求所希望得到的资源未被在服务器上发现
+					break;
+			}
+			return Promise.reject(response);
+		}
+		return response.json();
+	}).catch(error => {
+		// 断网处理
+		if (!window.navigator.onLine) {
+			// 断开网络了，可以让其跳转到断网页面
+			return;
+		}
+		return Promise.reject(error);
+	});
+}
diff --git a/vue2.0学习/基于axios接口封装/src/api/vote.js b/vue2.0学习/基于axios接口封装/src/api/vote.js
@@ -0,0 +1,10 @@
+// 接口模块二
+import axios from './http'
+
+function voteAdd() {
+  return axios.post('/insertVote', {
+    xxx: 'xxx'
+  })
+}
+
+export default {voteAdd}
diff --git a/vue2.0学习/基于axios接口封装/src/assets/logo.png b/vue2.0学习/基于axios接口封装/src/assets/logo.png
diff --git a/vue2.0学习/基于axios接口封装/src/main.js b/vue2.0学习/基于axios接口封装/src/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App.vue'
+import api from './api/api'
+
+Vue.config.productionTip = false
+Vue.prototype.$api = api
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')
