SpringBoot+Vue 博客系统（九）：安装Axios处理跨域

杨存乐

已于 2023-12-01 11:07:18 修改

阅读量222

点赞数

分类专栏： YangCunle`s Blog 文章标签： vue.js 后端

于 2023-06-06 10:19:21 首次发布

本文链接：https://blog.csdn.net/YangCunle/article/details/131061589

版权

YangCunle`s Blog 专栏收录该内容

13 篇文章 6 订阅

订阅专栏

签名：但行好事，莫问前程。

SpringBoot+Vue 博客系统（连载系列）

在这里插入图片描述

YangCunle`s Blog 博客网址：http://www.yangcunle.com

SpringBoot+Vue 博客系统（一）：个人网站的由来

SpringBoot+Vue 博客系统（二）：个人博客的搭建

SpringBoot+Vue 博客系统（三）：个人博客的设计

SpringBoot+Vue 博客系统（四）：博客后端开发

SpringBoot+Vue 博客系统（五）：整合阿里云OSS

SpringBoot+Vue 博客系统（六）：整合Redis

SpringBoot+Vue 博客系统（七）：Blog前端Vue项目的搭建

SpringBoot+Vue 博客系统（八）：前端项目引入Element-UI

SpringBoot+Vue 博客系统（九）：安装Axios处理跨域

SpringBoot+Vue 博客系统（十）：VUE路由 vue-route

SpringBoot+Vue 博客系统（十一）：博客后台管理

SpringBoot+Vue 博客系统（十二）：博客前台展示

SpringBoot+Vue 博客系统（十三）：项目打包部署到服务器

在这里插入图片描述

一、Axios简介

1、什么是Axios?

Axios，是一个基于promise [5] 的网络请求库，作用于node.js和浏览器中，它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。简言之，Axios是易用、简洁且高效的http库。

2、Axios网址

http://www.axios-js.com/

3、安装Axios

npm install axios --save

在这里插入图片描述
安装完成

4、引入Axios

// 引入Axios
import axios from 'axios';
Vue.prototype.$axios = axios;

5、后端解决请求跨域问题

/**
 * @Author: YangCunle
 * @Create: 2022-11-23 15:27
 * @Description: 跨域配置
 * @Version: 1.0
 */
@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                //是否发送Cookie
                .allowCredentials(true)
                //放行哪些原始域
                .allowedOriginPatterns("*")
                .allowedMethods(new String[]{"GET", "POST", "PUT", "DELETE"})
                .allowedHeaders("*")
                .exposedHeaders("*");
    }
}

在这里插入图片描述

6、使用Axios获取后端数据

1、get请求获取数据

  methods: {

    // 测试get获取后端数据
    loadGet () {
      this.$axios.get(this.$httpUrl + '/user/read?id=1').then(res => res.data).then(res => {
        console.log(res)
      })
    },
   
  beforeMount () {
    this.loadGet();
  }

在这里插入图片描述

2.post请求获取数据

methods: {
    // 测试get获取后端数据
    loadGet () {
      this.$axios.get(this.$httpUrl + '/user/read?id=1').then(res => res.data).then(res => {
        console.log(res)
      })
    },
    // 测试post获取后端数据
    loadPost () {
      this.$axios.post(this.$httpUrl + '/user/queryByPage', {username: ''}).then(res => res.data).then(res => {
        console.log(res)
      })
    }
  },
  beforeMount () {
    // this.loadGet();
    this.loadPost()
  }

效果：

在这里插入图片描述

获取用户列表数据

    loadPost () {
      this.$axios.post(this.$httpUrl + '/user/queryByPage', {username: ''}).then(res => res.data).then(res => {
        console.log(res)
        if (res.code == 200) {
          this.tableData = res.data.list
        }else {
          alert(res.message)
        }
      })
    }

<template>
  <el-table :data="tableData"
            :header-cell-style="{ background: '#f3f6fd', color: '#555' }"
            border
  >
    <el-table-column prop="id" label="ID" width="100px">
    </el-table-column>
    <el-table-column prop="username" label="姓名" width="150px">
    </el-table-column>
    <el-table-column prop="phone" label="手机号" width="200px">
    </el-table-column>
    <el-table-column prop="email" label="邮箱" width="250px">
    </el-table-column>
    <el-table-column prop="age" label="年龄" width="150px">
    </el-table-column>
    <el-table-column prop="role" label="角色" width="150px">
      <template slot-scope="scope">
        <el-tag
          :type="scope.row.role === 1 ? 'danger' : 'success'"
          disable-transitions>{{ scope.row.role === 1 ? '超级管理员' : '普通用户' }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="createTime" label="注册时间" width="250px">
    </el-table-column>
    <el-table-column prop="operate" label="操作" width="295px">
      <el-button size="small" type="primary">查看</el-button>
      <el-button size="small" type="success">编辑</el-button>
      <el-button size="small" type="danger">删除</el-button>
    </el-table-column>

  </el-table>
</template>

效果：

在这里插入图片描述

7、分页展示列表数据

使用Pagination分页插件：

在这里插入图片描述

代码：

    <!--    Pagination 分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[3, 6, 9, 12]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>


<script>
export default {
  name: 'Main',
  data () {
    return {
      tableData: [],
      pageNum: 1,
      pageSize: 6,
      total: 0
    }
  },
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pageNum = 1
      this.pageSize = val
      this.loadPost()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.pageNum = val
      this.loadPost()
    },

    // 测试get获取后端数据
    loadGet () {
      this.$axios.get(this.$httpUrl + '/user/read?id=1').then(res => res.data).then(res => {
        console.log(res)
      })
    },
    // 测试post获取后端数据
    loadPost () {
      this.$axios.post(this.$httpUrl + '/user/queryByPage', {
        username: '',
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => res.data).then(res => {
        console.log(res)
        if (res.code == 200) {
          this.tableData = res.data.list
          this.pageNum = res.data.currentPage
          this.pageSize = res.data.pageSize
          this.total = res.data.total
        } else {
          alert(res.message)
        }
      })
    }
  },
  beforeMount () {
    // this.loadGet();
    this.loadPost()
  }
}
</script>

效果：

在这里插入图片描述

8、添加查询框

代码：

    <!--    搜索框-->
    <div style="height: 50px; margin-top: -10px;margin-bottom: -7px">
      <el-input v-model="username" placeholder="请输入姓名"
                suffix-icon="el-icon-search" style="width: 220px"
                @keyup.enter.native="loadPost"></el-input>
      <el-button type="primary" style="margin-left: 5px" @click="loadPost">查询</el-button>
      <el-button type="success" style="margin-left: 5px" @click="reset">重置</el-button>
    </div>

效果：
在这里插入图片描述

9、添加功能

1.打开添加弹窗

<!--    增加弹窗-->
    <el-dialog
      title="添加用户"
      :visible.sync="dialogVisible"
      width="30%">
      <!--      表单-->
      <el-form ref="form" :rules="rules" :model="user" label-width="80px">
        <el-form-item label="姓名：" prop="username">
          <el-col :span="20">
            <el-input v-model="user.username"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <el-col :span="20">
            <el-input v-model="user.password" type="password"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="手机号：" prop="phone">
          <el-col :span="20">
            <el-input v-model="user.phone"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="邮箱：" prop="email">
          <el-col :span="20">
            <el-input v-model="user.email"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="角色：">
          <el-radio-group v-model="user.role">
            <el-radio label="1">超级管理员</el-radio>
            <el-radio label="2">普通用户</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="saveUser">确 定</el-button>
      </span>
    </el-dialog>

效果：

在这里插入图片描述

2.增加字段合适校验

      rules: {
        username: [
          {required: true, message: '请输姓名', trigger: 'blur'},
          {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输密码', trigger: 'blur'},
          {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
        ],
        phone: [
          {required: true, message: '请输入手机号码', trigger: 'blur'},
          {
            required: true,
            pattern: /^[1][3,4,5,7,8,9][0-9]{9}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur',
          },
        ],
        email: [{
          required: true,
          message: '电子信箱不能为空',
          trigger: 'blur'
        }, {
          validator: function (rule, value, callback) {
            if (
              /^\w{1,64}@[a-z0-9\-]{1,256}(\.[a-z]{2,6}){1,2}$/i.test(
                value
              ) == false
            ) {
              callback(new Error('邮箱格式错误'))
            } else {
              callback()
            }
          },
          trigger: 'blur'
        }]
      }

效果：

在这里插入图片描述

3.发送添加请求

// 添加用户
    saveUser () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$axios.post(this.$httpUrl + '/user/save', this.user).then(res => res.data).then(res => {
            console.log(res)
            if (res.code == 200) {
              // 关闭添加弹窗
              this.dialogVisible = false
              // 重新加载数据
              this.loadPost()
              // 提示添加成功信息
              this.$message({
                message: res.message,
                type: 'success'
              })
            } else {
              // 关闭添加弹窗
              this.dialogVisible = false
              // 提示错误信息
              this.$message({
                message: res.message,
                type: 'warning'
              })
            }
          })
        } else {
          return false
        }
      })
    },

4.清空表单

    // 打开添加弹窗
    toAddUser () {
      this.dialogVisible = true
      this.$nextTick(() => {
        // 重置form表单
        this.resetForm()
      })

    },
    // 重置from表单
    resetForm () {
      this.$refs.form.resetFields()
    },

10、查看详情

    read (id) {
      this.$axios.get(this.$httpUrl + '/user/read?id=' + id).then(res => res.data).then(res => {
        if (res.code == 200) {
          this.dialogVisible = true
          this.user = res.data
          this.disable = true
          this.v_show_Button = false
        } else {
          this.$message({
            message: res.message,
            type: 'warning'
          })
        }
      })
    }

在这里插入图片描述

11、修改

1.去修改页面，查询数据回显

toUpdate (id) {
      this.$axios.get(this.$httpUrl + '/user/read?id=' + id).then(res => res.data).then(res => {
        if (res.code == 200) {
          this.dialogVisible = true
          this.title_show = '编辑用户'
          this.user = res.data
          this.disable = false
          this.v_show_Button = true
        } else {
          this.$message({
            message: res.message,
            type: 'warning'
          })
        }
      })
    },

在这里插入图片描述

2.点击确定，修改数据

update () {
      this.$axios.post(this.$httpUrl + '/user/update', this.user).then(res => res.data).then(res => {
        if (res.code == 200) {
          // 关闭添加弹窗
          this.dialogVisible = false
          // 重新加载数据
          this.loadPost()
          // 提示添加成功信息
          this.$message({
            message: res.message,
            type: 'success'
          })
        } else {
          // 关闭添加弹窗
          this.dialogVisible = false
          // 提示错误信息
          this.$message({
            message: res.message,
            type: 'warning'
          })
        }
      })
    }

12、删除

1.确认删除弹窗

<el-popconfirm
            title="确定删除吗？"
            @confirm="del(scope.row.id)"
          >
            <el-button size="small" type="danger" slot="reference">删除</el-button>
          </el-popconfirm>