add proxy

client/config/api.config.js

@@ -0,0 +1,5 @@
+const isProdMode = Object.is(process.env.NODE_ENV, 'production')
+
+module.exports = {
+    baseUrl: isProdMode ? 'http://api.vnshop.cn/api/' : 'api/'
+}

client/config/index.js

@@ -28,12 +28,18 @@ module.exports = {
         assetsSubDirectory: 'static',
         assetsPublicPath: '/',
         proxyTable: {
-            '/goods/**': {
-                target: 'http://localhost:3000'
-            },
+            // '/goods/**': {
+            //     target: 'http://localhost:3000'
+            // },
             '/users/**': {
                 target: 'http://localhost:3000'
             },
+            '/api/**': {
+                target: 'http://localhost:3000',
+                pathRewrite: {
+                    '^/api': '/'
+                }
+            }
         },
         // CSS Sourcemaps off by default because relative paths are "buggy"
         // with this option, according to the CSS-Loader README

client/package.json

@@ -75,6 +75,7 @@
     "sinon": "^2.1.0",
     "sinon-chai": "^2.8.0",
     "url-loader": "^0.5.8",
+    "vue-axios": "^2.0.2",
     "vue-lazyload": "^1.1.3",
     "vue-loader": "^13.0.4",
     "vue-style-loader": "^3.0.1",

client/src/api/index.js

@@ -0,0 +1,10 @@
+import axios from 'axios';
+import apiConfig from '../../config/api.config';
+
+const service = axios.create({
+    baseURL: apiConfig.baseUrl
+        // baseURL: 'api/'
+})
+
+Vue.prototype.$http = service
+export default service

client/src/main.js

@@ -6,9 +6,16 @@ import router from './router'
 import '@/assets/css/app'
 import VueLazyLoad from 'vue-lazyload'
 
+import apiConfig from '../config/api.config'
+import Axios from 'axios'
+import VueAxios from 'vue-axios'
+
 import infiniteScroll from 'vue-infinite-scroll'
 Vue.use(infiniteScroll)
 
+Vue.use(VueAxios, Axios);
+Axios.defaults.baseURL = apiConfig.baseUrl;
+
 
 Vue.use(VueLazyLoad, {
     loading: '/static/img/ok-2.png'

client/src/view/GoodsList.vue

@@ -54,7 +54,7 @@
 import HeadNav from '@/components/Head'
 import NavBread from '@/components/NavBread'
 import FooterNav from '@/components/Footer'
-import axios from 'axios'
+// import axios from 'axios'
 export default {
     data(){
         return{
@@ -109,7 +109,8 @@ export default {
                 page:this.page,
                 pagesize:this.pagesize
             }
-            axios.get('/goods/list',{params:param}).then(result=>{
+
+            this.$http.get('/goods/list',{params:param}).then(result=>{
                 let res = result.data;
                 // this.list= res.data.result;
                 if(flag){ //判断是否通过分页请求
@@ -150,7 +151,7 @@ export default {
             }, 500);
         },
         addCart:function(productId){
-            axios.post("/goods/addCart",{
+            this.$http.post("/goods/addCart",{
                 productId:productId
             }).then((result)=>{
                 let res = result.data;

note/19.在vue中怎么优雅的配置本地代理.md

@@ -0,0 +1,60 @@
+```
+    proxyTable: {
+        '/goods/**': {
+            target: 'http://localhost:3000'
+        },
+        '/users/**': {
+            target: 'http://localhost:3000'
+        },
+    },
+```
+这样有个弊端
+每次开发的时候都需要配置
+万一 vue 的路由也是 goods users 就会产生矛盾
+
+理想方式 
+配置一个路由，尽量避免和vue路由冲突
+
+配置
+/api/**
+
+每次在路由里面
+get('/api/users/login')
+get('/api/users/logout')
+get('/api/goods/list')
+
+
+get('/v1/goods/list')
+
+
+最理想的方式
+get('/users/login)
+
+target: http://localhost:3000/users/login
+
+
+Axios.defaults.baseURL = apiConfig.baseUrl;
+
+在每个使用axios请求的时候，自动加上api前缀
+
+使用方式
+this.$http.get('users/login);
+
+相当于访问：http://localhost:8080/api/users/login
+代理
+    匹配到api
+        转发
+        http://localhost:3000/users/login
+
+http://localhost:8080/api/goods/list
+
+http://localhost:3000/goods/list
+
+```
+'/api/**': {
+    target: 'http://localhost:3000',
+    pathRewrite: {
+        '^/api': '/'
+    }
+}
+```