Vue 跨域使用及使用Element-UI优化界面

跨域 安装axios

使用npm进行安装 npm install --save axios
一、引入axios 添加src/main.js如下：
// 设置反向代理，前端请求默认发送到http://localhost:8888/api
var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8080/api'
// 全局注册，让其它组件可以通过this.$axios发送数据
Vue.prototype.$axios = axios

添加config/index.js如下

proxyTable: {
    '/api': {
        target: 'http://localhost:8080',
            changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
    }
},
使用npm进行安装 npm i element-ui -S

一、引入Element-UI 修改src/main.js如下：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

// eslint-disable-next-line no-undef
Vue.use(ElementUI)

Element-UI登录页面

<template>
  <body id="poster">
    <el-form class="login-container" label-position="left" label-width="0px">
      <h3 class="login_title">Carmen系统登陆</h3>
      <el-form-item>
        <el-input id='username' type="text" v-model="frmLogin.username" auto-complete="off" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input id='password' type="password" v-model="frmLogin.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 {
      frmLogin: {
        username: '',
        password: ''
      },
      responseResult: []
    }
  },

  methods: {
    login () {
      this.$axios
        .post('/login', {
          username: this.frmLogin.username,
          password: this.frmLogin.password
        })
        .then(successResponse => {
          if (successResponse.data.code === 200) {
            this.$router.replace({path: '/home'})
          } else if (successResponse.data.code === 400) {
            alert('用户名或密码错误！请重新登录！')
            document.getElementById('username').value = ''
            document.getElementById('password').value = ''
            document.getElementById('username').focus()
          }
        })
      // eslint-disable-next-line no-unused-vars
        .catch(failResponse => {
        })
    }
  }
}
</script>

<style scoped>

</style>
问题解决： 删除node_modules目录
  cnpm install rimraf -g
 
  rimraf node_modules

posted @ 2021-08-23 10:34  New_HackerHK  阅读(226)  评论(0)  编辑  收藏  举报