vue+npm中使用axios教程

一、背景

由于spa和seo之间的冲突，所以本网站采用前后端分离模式同时采用vue2进行页面预渲染

二、思路

现在要使用axios来进行数据请求，这里贴一下配置过程

三、步骤如下

①引入axios：npm install axios

②在main.js中配置如下

import axios from "axios"

Vue.prototype.$axios = axios

③config中再次配置如下

		            module.exports = {

		            dev: {
	
                // Paths
	
		                assetsSubDirectory: "static",
	
		                assetsPublicPath: "/",
	
		                proxyTable: {
	
                       "/guanghua": {
	
		                    target: "http://www.guangmuhua.com/",
	
		                changeOrigin: true, // 解决跨域问题
	
		                pathRewrite: {
	
                   "^/guanghua": "/"
	
		                }
	
		               }
	
		            },

④前端请求如下

            var thi = this;
		
            this.$axios
		
			            .get("guanghua/index.do", {
		
			                 params: {
		
			                    pageIndex: 0
		
			                },
		
			                headsers:{
		
			                    "Access-Control-Allow-Origin": "*"

			                }
		
			                })
		
			                .then(response => {
		
			                    thi.articleData = response.data;

			                })
		
			                .catch(response => {
		
			                    console.log("get发送Ajax请求,请求失败", response);

			              });

更多精彩请关注guangmuhua.com