03. 一个视频学会Vue3+Element-Plus
使用依赖库
Vue.js、axios.js、element-plus.js、element-plus.css
<link rel="stylesheet" href="libs/element-plus.css">
Vue 官网
https://cn.vuejs.org/guide/essentials/application.html
Element-Plus
https://doc-archive.element-plus.org/#/zh-CN/component/installation
网页版 Vue3 初始化
<div id="app"></div>
<script>
const { createApp, reactive } = Vue
const app = createApp({
setup() {
// 存放数据
const data = reactive({
})
// 数据和函数在外部使用 需要在此return出去
return {data}
}
}).mount('#app')
</script>
使用 Element.plus
app.use(ElementPlus)
前后端数据交互 Axios
axios 是一个封装了 Ajax 的一个工具库
设置网页自动更新
通过网络找到页面发起的请求，观察请求的数据
结果：
本节课完整的 index.html 源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>B站搜：程序员青戈</title>
<link rel="stylesheet" href="libs/element-plus.css">
<style>
[v-clock] {
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<h2>B站关注程序员青戈，带你学SpringBoot+Vue实战项目</h2>
<h2>官网：<a target="_blank" href="https://javaxm.cn/free/1spxh.html">https://javaxm.cn</a></h2>
<div>
<div style="width: 80%; margin-bottom: 20px; display: flex; align-items: center">
<el-button type="primary" @click="handleAdd">新增</el-button>
<div style="flex: 1; text-align: right">
<el-input clearable @clear="load" placeholder="请输入查询条件" style="width: 300px" v-model="data.name"></el-input>
<el-button type="success" plain style="margin-left: 5px" @click="load">查 询</el-button>
</div>
</div>
<el-table border :data="data.tableData" stripe style="width: 80%">
<el-table-column prop="id" label="ID" width="100"></el-table-column>
<el-table-column prop="username" label="账号"> </el-table-column>
<el-table-column prop="name" label="姓名"> </el-table-column>
<el-table-column prop="phone" label="电话" width="500"> </el-table-column>
<el-table-column prop="email" label="邮箱"> </el-table-column>
<el-table-column label="操作">
<template #default="scope">
<el-button type="text" @click="handleUpdate(scope.row)">编辑</el-button>
<el-button style="color: #ff4141" type="text" @click="del(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table-column>
</el-table>
<div style="margin-top: 20px">
<el-pagination layout="total, sizes, prev, pager, next, jumper"
v-model:current-page="data.pageNum"
v-model:page-size="data.pageSize"
:page-sizes="[2, 5, 10, 15, 20]"
:total="data.total"
@current-change="load"
@size-change="load"
>
</el-pagination>
</div>
</div>
<el-dialog title="用户信息" v-model="data.formVisible" width="30%">
<el-form style="padding-right: 30px" :model="data.form" label-width="80px">
<el-form-item label="账户">
<el-input :disabled="data.form.id" v-model="data.form.username" autocomplete="off" placeholder="请输入账号"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input show-password v-model="data.form.password" autocomplete="off" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item label="名称">
<el-input v-model="data.form.name" autocomplete="off" placeholder="请输入名称"></el-input>
</el-form-item>
<el-form-item label="电话">
<el-input v-model="data.form.phone" autocomplete="off" placeholder="请输入电话"></el-input>
</el-form-item>
<el-form-item label="邮箱">
<el-input v-model="data.form.email" autocomplete="off" placeholder="请输入邮箱"></el-input>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="data.formVisible = false">取 消</el-button>
<el-button type="primary" @click="save">保 存</el-button>
</span>
</template>
</el-dialog>
</div>
<script src="libs/vue.global.js"></script>
<script src="libs/element-plus.js"></script>
<script src="libs/element-plus_zh-cn.js"></script>
<script src="libs/axios.min.js"></script>
<script>
const { createApp, reactive } = Vue
const { ElMessage, ElMessageBox } = ElementPlus
// 创建一个vue3 实例
const app = createApp({
setup() {
// 存放数据
const data = reactive({
tableData: [], // 用户的数据
pageNum: 1, //当前页码
pageSize: 5, // 每页个数
total: 0, // 总个数
name: null, // 查询条件
form: {}, // 绑定表单的对象
formVisible: false
})
const load = () => {
console.log(data.pageNum)
// 通过 axios发送ajax请求获取数据
axios.get('/user/selectPage', {
params: {
pageNum: data.pageNum,
pageSize: data.pageSize,
name: data.name
}
}).then(res => {
console.log(res.data)
data.tableData = res.data.list
data.total = res.data.total
}).catch(err => {
console.error('错误信息：', err)
ElMessage.error(err.message)
})
}
load()
const handleAdd = () => {
data.form = {}
data.formVisible = true
}
const add = () => {
axios.post('/user/add', data.form).then(res => {
load()
data.formVisible = false
ElMessage.success('新增成功')
}).catch(err => {
ElMessage.error(err.response.data)
})
}
const handleUpdate = (row) => {
data.form = JSON.parse(JSON.stringify(row)) // 深度拷贝行对象
data.formVisible = true
}
const update = () => {
axios.put('/user/update', data.form).then(res => {
load()
data.formVisible = false
ElMessage.success('更新成功')
}).catch(err => {
ElMessage.error(err.response.data)
})
}
// save是一个方法 调用2种接口 因为弹窗是共用的 form对象也是共用的
const save = () => {
if (data.form.id) { // 更新
update()
} else { // 新增
add()
}
}
const del = (id) => {
ElMessageBox.confirm('您确定删除id=' + id + '的数据吗？', '提示', { type: 'warning' }).then(res => {
axios.delete('/user/delete/' + id).then(res => {
load()
ElMessage.success('删除成功')
}).catch(err => {
ElMessage.error(err.response.data)
})
}).catch(err => {})
}
// 数据和函数在外部使用 需要在此return出去
return {data, load, handleAdd, handleUpdate, save, del}
}
}).use(ElementPlus, { locale: ElementPlusLocaleZhCn }).mount('#app')
</script>
</body>
</html>
本节课完成后的springboot_vue源码
链接: https://pan.baidu.com/s/16yU79P3qrNkOQd79XINTUQ?pwd=7x7q 提取码: 7x7q