vue 项目集成 axios

你猜阅读：608 2021-03-31 16:52:48 评论：0

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/>' 
})

项目结构和效果截图：

登入界面

登入成功界面：

标签:VUE

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。