axiosdemo

README.md

@@ -1,24 +1,46 @@
 # axiosdemo
 
-## Project setup
+## yarn
-```
+跟npm差不多的包管理器，感觉使用起来挺舒服的，所以推荐使用
-yarn install
+## 初始化项目
-```
+yarn 
-
+## 运行
-### Compiles and hot-reloads for development
-```
 yarn serve
+## 教程
+先安装axios `yarn add axios`，然后在main.js引入。
 ```
+import axios from 'axios'
+Vue.prototype.$axios = axios
+```
+## 使用
+在生命周期或者需要请求接口的位置
+```
+this.$axios.get("https://theluyuan.com/popArticles").then((res)=>{
+  console.log(res)
+})
+```
+可能会出现跨域问题，解决方法是后台允许跨域请求或者使用vuecli的代理服务器。
+后台配置之后继续使用以上网址，前台代理服务器请在`vue.config.js`写入
+```
+module.exports = {
+    devServer: {
+        proxy: {
+          '/api': {
+            target: 'https://theluyuan.com', //接口域名
+            ws: true,
+            changeOrigin: true
+          }
+        }
+      }
+}
+```
+设置前缀`/api`的请求转发到`https://theluyuan.com`
+```
+ this.$axios.get("/api/popArticles").then((res)=>{
+  console.log(res)
+})
+//实际请求地址就是 https://theluyuan.com/popArticles
+```
+这是基础使用，需要有些promise基础，其他问题清参考文档。链接 [axios-看云](https://www.kancloud.cn/yunye/axios/234845)。其他跟这些都是一样的了
 
-### Compiles and minifies for production
+promise基础可以参照阮一峰大大的[promise](https://es6.ruanyifeng.com/#docs/promise)或者[我的博客](https://theluyuan.com/blog/web-design/promise_1nd)
-```
-yarn build
-```
-
-### Lints and fixes files
-```
-yarn lint
-```
-
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).

package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.19.2",
     "core-js": "^3.6.4",
     "vue": "^2.6.11"
   },

src/App.vue

@@ -12,6 +12,11 @@ export default {
   name: 'App',
   components: {
     HelloWorld
+  },
+  mounted(){
+    this.$axios.get("/api/popArticles").then((res)=>{
+      console.log(res)
+    })
   }
 }
 </script>

src/main.js

@@ -1,8 +1,8 @@
 import Vue from 'vue'
 import App from './App.vue'
-
+import axios from 'axios'
 Vue.config.productionTip = false
-
+Vue.prototype.$axios = axios
 new Vue({
   render: h => h(App),
 }).$mount('#app')

vue.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+    devServer: {
+        proxy: {
+          '/api': {
+            target: 'https://theluyuan.com',
+            ws: true,
+            changeOrigin: true
+          }
+        }
+      }
+}

yarn.lock

@@ -1545,6 +1545,13 @@ aws4@^1.8.0:
   resolved "https://registry.npm.taobao.org/aws4/download/aws4-1.9.1.tgz#7e33d8f7d449b3f673cd72deb9abdc552dbe528e"
   integrity sha1-fjPY99RJs/ZzzXLeuavcVS2+Uo4=
 
+axios@^0.19.2:
+  version "0.19.2"
+  resolved "https://registry.npm.taobao.org/axios/download/axios-0.19.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Faxios%2Fdownload%2Faxios-0.19.2.tgz#3ea36c5d8818d0d5f8a8a97a6d36b86cdc00cb27"
+  integrity sha1-PqNsXYgY0NX4qKl6bTa4bNwAyyc=
+  dependencies:
+    follow-redirects "1.5.10"
+
 babel-eslint@^10.0.3:
   version "10.1.0"
   resolved "https://registry.npm.taobao.org/babel-eslint/download/babel-eslint-10.1.0.tgz#6968e568a910b78fb3779cdd8b6ac2f479943232"
@@ -2639,6 +2646,13 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3:
   dependencies:
     ms "2.0.0"
 
+debug@=3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npm.taobao.org/debug/download/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+  integrity sha1-W7WgZyYotkFJVmuhaBnmFRjGcmE=
+  dependencies:
+    ms "2.0.0"
+
 debug@^3.0.0, debug@^3.1.1, debug@^3.2.5:
   version "3.2.6"
   resolved "https://registry.npm.taobao.org/debug/download/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
@@ -3542,6 +3556,13 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
+follow-redirects@1.5.10:
+  version "1.5.10"
+  resolved "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
+  integrity sha1-e3qfmuov3/NnhqlP9kPtB/T/Xio=
+  dependencies:
+    debug "=3.1.0"
+
 follow-redirects@^1.0.0:
   version "1.10.0"
   resolved "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.10.0.tgz#01f5263aee921c6a54fb91667f08f4155ce169eb"