签名：但行好事，莫问前程。
SpringBoot+Vue 博客系统（连载系列）
YangCunle`s Blog 博客网址：http://www.yangcunle.com
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>
点击确认，执行删除操作
总结
以上记录了Axios的安装和解决跨域问题以及用户模块使用Axios实现再呢个删改差等操作，如果对你有所帮助，请一键三连。
1285
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
