vue 项目集成 axios

最新推荐文章于 2024-08-13 16:44:40 发布

在奋斗的大道

最新推荐文章于 2024-08-13 16:44:40 发布

阅读量1.2k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/zhouzhiwengang/article/details/103797848

版权

vue 专栏收录该内容

84 篇文章 11 订阅

订阅专栏

Vue 项目安装axios 模块

启动cmd 窗口指令，切换至Vue 项目的工作空间，执行如下指令：

cnpm install axios

Vue 项目设置反向代理：

修改 src\main.js 文件如下所示:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
// 引入ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 设置反向代理，前端请求默认发送到 http://localhost:7080/api
var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:7080/api'
// 全局注册，之后可在其他组件中通过 this.$axios 发送数据
Vue.prototype.$axios = axios

Vue.config.productionTip = false
Vue.use(ElementUI)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

Vue 项目设置跨域

在 config\index.js 中，找到 proxyTable 位置，添加以下内容:

 proxyTable: {
      '/api': {
        target: 'http://localhost:7080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },

项目实战：

编写src/components/Login.vue 组件和src/components/home/Appindex.vue 组件：

源码如下：

<template>
  <body id="poster">
  <el-form class="login-container" label-position="left"
           label-width="0px">
    <h3 class="login_title">系统登录</h3>
    <el-form-item>
      <el-input type="text" v-model="loginForm.username"
                auto-complete="off" placeholder="账号"></el-input>
    </el-form-item>
    <el-form-item>
      <el-input type="password" v-model="loginForm.password"
                auto-complete="off" placeholder="密码"></el-input>
    </el-form-item>
    <el-form-item style="width: 100%">
      <el-button type="primary" style="width: 100%;background: #505458;border: none" v-on:click="login">登录</el-button>
    </el-form-item>
  </el-form>
  </body>
</template>

<script>
    export default {
        name: "Login",
      data () {
        return {
          loginForm: {
            username: '',
            password: ''
          },
          responseResult: []
        }
      },
      methods: {
        login () {
          this.$axios
            .post('/login', {
              username: this.loginForm.username,
              password: this.loginForm.password
            })
            .then(successResponse => {
              if (successResponse.data.code === 200) {
                this.$router.replace({path: '/index'})
              }
            })
            .catch(failResponse => {
            })
        }
      }
    }
</script>

<style scoped>
  #poster {
    background-position: center;
    height: 100%;
    width: 100%;
    background-size: cover;
    position: fixed;
  }
  body{
    margin: 0px;
  }
  .login-container {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 90px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }
  .login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }
</style>

<template>
  <div>
    Hello World!
  </div>
</template>

<script>
    export default {
        name: "Appindex"
    }
</script>

<style scoped>

</style>

修改路由配置文件src/route/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// 导入刚才编写的组件
import AppIndex from '@/components/home/AppIndex'
import Login from '@/components/Login'

Vue.use(Router)

export default new Router({
  routes: [
    // 下面都是固定的写法
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/index',
      name: 'AppIndex',
      component: AppIndex
    }
  ]
})

项目主文件src/main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
// 引入ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 设置反向代理，前端请求默认发送到 http://localhost:8443/api
var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:7080/api'
// 全局注册，之后可在其他组件中通过 this.$axios 发送数据
Vue.prototype.$axios = axios

Vue.config.productionTip = false
Vue.use(ElementUI)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

项目结构和效果截图：