Vue3（3）

一.具体业务功能实现

（1）登录注册页面 [element-plus 表单 & 表单校验]

功能需求说明：
1.注册登录 静态结构 & 基本切换
2.注册功能 (校验 + 注册)
3.登录功能 (校验 + 登录 + 存token)

import request from '@/utils/request'// 注册接口
export const userRegisterService = ({ username, password, repassword }) =>request.post('/api/reg', { username, password, repassword })// 登录接口
export const userLoginService = ({ username, password }) =>request.post('/api/login', { username, password })// 获取用户基本信息
export const userGetInfoService = () => request.get('/my/userinfo')

<script setup>
import { userRegisterService, userLoginService } from '@/api/user.js'
import { User, Lock } from '@element-plus/icons-vue'
import { ref, watch } from 'vue'
import { useUserStore } from '@/stores'
import { useRouter } from 'vue-router'
const isRegister = ref(false)
const form = ref()// 整个的用于提交的form数据对象
const formModel = ref({username: '',password: '',repassword: ''
})
// 整个表单的校验规则
// 1. 非空校验 required: true      message消息提示，  trigger触发校验的时机 blur change
// 2. 长度校验 min:xx, max: xx
// 3. 正则校验 pattern: 正则规则    \S 非空字符
// 4. 自定义校验 => 自己写逻辑校验 (校验函数)
//    validator: (rule, value, callback)
//    (1) rule  当前校验规则相关的信息
//    (2) value 所校验的表单元素目前的表单值
//    (3) callback 无论成功还是失败，都需要 callback 回调
//        - callback() 校验成功
//        - callback(new Error(错误信息)) 校验失败
const rules = {username: [{ required: true, message: '请输入用户名', trigger: 'blur' },{ min: 5, max: 10, message: '用户名必须是 5-10位 的字符', trigger: 'blur' }],password: [{ required: true, message: '请输入密码', trigger: 'blur' },{pattern: /^\S{6,15}$/,message: '密码必须是 6-15位 的非空字符',trigger: 'blur'}],repassword: [{ required: true, message: '请输入密码', trigger: 'blur' },{pattern: /^\S{6,15}$/,message: '密码必须是 6-15位 的非空字符',trigger: 'blur'},{validator: (rule, value, callback) => {// 判断 value 和 当前 form 中收集的 password 是否一致if (value !== formModel.value.password) {callback(new Error('两次输入密码不一致'))} else {callback() // 就算校验成功，也需要callback}},trigger: 'blur'}]
}const register = async () => {// 注册成功之前，先进行校验，校验成功 → 请求，校验失败 → 自动提示await form.value.validate()await userRegisterService(formModel.value)ElMessage.success('注册成功')isRegister.value = false
}const userStore = useUserStore()
const router = useRouter()
const login = async () => {await form.value.validate()const res = await userLoginService(formModel.value)userStore.setToken(res.data.token)ElMessage.success('登录成功')router.push('/')
}// 切换的时候，重置表单内容
watch(isRegister, () => {formModel.value = {username: '',password: '',repassword: ''}
})
</script><template><!-- 1. 结构相关el-row表示一行，一行分成24份 el-col表示列  (1) :span="12"  代表在一行中，占12份 (50%)(2) :span="6"   表示在一行中，占6份  (25%)(3) :offset="3" 代表在一行中，左侧margin份数el-form 整个表单组件el-form-item 表单的一行 （一个表单域）el-input 表单元素（输入框）2. 校验相关(1) el-form => :model="ruleForm"      绑定的整个form的数据对象 { xxx, xxx, xxx }(2) el-form => :rules="rules"         绑定的整个rules规则对象  { xxx, xxx, xxx }(3) 表单元素 => v-model="ruleForm.xxx" 给表单元素，绑定form的子属性(4) el-form-item => prop配置生效的是哪个校验规则 (和rules中的字段要对应)--><el-row class="login-page"><el-col :span="12" class="bg"></el-col><el-col :span="6" :offset="3" class="form"><!-- 注册相关表单 --><el-form:model="formModel":rules="rules"ref="form"size="large"autocomplete="off"v-if="isRegister"><el-form-item><h1>注册</h1></el-form-item><el-form-item prop="username"><el-inputv-model="formModel.username":prefix-icon="User"placeholder="请输入用户名"></el-input></el-form-item><el-form-item prop="password"><el-inputv-model="formModel.password":prefix-icon="Lock"type="password"placeholder="请输入密码"></el-input></el-form-item><el-form-item prop="repassword"><el-inputv-model="formModel.repassword":prefix-icon="Lock"type="password"placeholder="请输入再次密码"></el-input></el-form-item><el-form-item><el-button@click="register"class="button"type="primary"auto-insert-space>注册</el-button></el-form-item><el-form-item class="flex"><el-link type="info" :underline="false" @click="isRegister = false">← 返回</el-link></el-form-item></el-form><!-- 登录相关表单 --><el-form:model="formModel":rules="rules"ref="form"size="large"autocomplete="off"v-else><el-form-item><h1>登录</h1></el-form-item><el-form-item prop="username"><el-inputv-model="formModel.username":prefix-icon="User"placeholder="请输入用户名"></el-input></el-form-item><el-form-item prop="password"><el-inputv-model="formModel.password"name="password":prefix-icon="Lock"type="password"placeholder="请输入密码"></el-input></el-form-item><el-form-item class="flex"><div class="flex"><el-checkbox>记住我</el-checkbox><el-link type="primary" :underline="false">忘记密码？</el-link></div></el-form-item><el-form-item><el-button@click="login"class="button"type="primary"auto-insert-space>登录</el-button></el-form-item><el-form-item class="flex"><el-link type="info" :underline="false" @click="isRegister = true">注册 →</el-link></el-form-item></el-form></el-col></el-row>
</template><style lang="scss" scoped>
.login-page {height: 100vh;background-color: #fff;.bg {background: url('@/assets/logo2.png') no-repeat 60% center / 240px auto,url('@/assets/login_bg.jpg') no-repeat center / cover;border-radius: 0 20px 20px 0;}.form {display: flex;flex-direction: column;justify-content: center;user-select: none;.title {margin: 0 auto;}.button {width: 100%;}.flex {width: 100%;display: flex;justify-content: space-between;}}
}
</style>

（2）首页 layout 架子 [element-plus 菜单组件]

功能需求说明：
1.基本架子拆解 (菜单组件的使用)

    el-menu 整个菜单组件:default-active="$route.path"  配置默认高亮的菜单项router  router选项开启，el-menu-item 的 index 就是点击跳转的路径el-menu-item 菜单项index="/article/channel" 配置的是访问的跳转路径，配合default-active的值，实现高亮

2.登录访问拦截

// 登录访问拦截 => 默认是直接放行的
// 根据返回值决定，是放行还是拦截
// 返回值：
// 1. undefined / true  直接放行
// 2. false 拦回from的地址页面
// 3. 具体路径 或 路径对象  拦截到对应的地址
//    '/login'   { name: 'login' }
router.beforeEach((to) => {// 如果没有token, 且访问的是非登录页，拦截到登录，其他情况正常放行const useStore = useUserStore()if (!useStore.token && to.path !== '/login') return '/login'
})export default router

3.用户基本信息获取&渲染

// 获取用户基本信息
export const userGetInfoService = () => request.get('/my/userinfo')

// 用户模块 token setToken removeToken
export const useUserStore = defineStore('big-user',() => {const token = ref('')const setToken = (newToken) => {token.value = newToken}const removeToken = () => {token.value = ''}const user = ref({})const getUser = async () => {const res = await userGetInfoService() // 请求获取数据user.value = res.data.data}const setUser = (obj) => {user.value = obj}return {token,setToken,removeToken,user,getUser,setUser}},{persist: true}
)

4.退出功能 [element-plus 确认框]

const handleCommand = async (key) => {if (key === 'logout') {// 退出操作await ElMessageBox.confirm('你确认要进行退出么', '温馨提示', {type: 'warning',confirmButtonText: '确认',cancelButtonText: '取消'})// 清除本地的数据 (token + user信息)userStore.removeToken()userStore.setUser({})router.push('/login')} else {// 跳转操作router.push(`/user/${key}`)}
}

（3）文章分类页面 - [element-plus 表格]

功能需求说明：
1.基本架子 - PageContainer 封装

<script setup>
defineProps({title: {required: true,type: String}
})
</script><template><el-card class="page-container"><template #header><div class="header"><span>{{ title }}</span><div class="extra"><slot name="extra"></slot></div></div></template><slot></slot></el-card>
</template><style lang="scss" scoped>
.page-container {min-height: 100%;box-sizing: border-box;.header {display: flex;justify-content: space-between;align-items: center;}
}
</style>

2.文章分类渲染 & loading 处理

import request from '@/utils/request'
// 获取文章分类
export const artGetChannelsService = () => request.get('/my/cate/list')

<template><page-container title="文章分类"><template #extra><el-button @click="onAddChannel">添加分类</el-button></template><el-table v-loading="loading" :data="channelList" style="width: 100%"><el-table-column type="index" label="序号" width="100"></el-table-column><el-table-column prop="cate_name" label="分类名称"></el-table-column><el-table-column prop="cate_alias" label="分类别名"></el-table-column><el-table-column label="操作" width="150"><!-- row 就是 channelList 的一项， $index 下标 --><template #default="{ row, $index }"><el-button:icon="Edit"circleplaintype="primary"@click="onEditChannel(row, $index)"></el-button><el-button:icon="Delete"circleplaintype="danger"@click="onDelChannel(row, $index)"></el-button></template></el-table-column><template #empty><el-empty description="没有数据"></el-empty></template></el-table><channel-edit ref="dialog" @success="onSuccess"></channel-edit></page-container>
</template>

<script setup>
import { ref } from 'vue'
import { Edit, Delete } from '@element-plus/icons-vue'
import { artGetChannelsService, artDelChannelService } from '../../api/article'
const channelList = ref([])
const loading = ref(false)
const dialog = ref()const getChannelList = async () => {loading.value = trueconst res = await artGetChannelsService()channelList.value = res.data.dataloading.value = false
}
getChannelList()

3.文章分类添加编辑 [element-plus 弹层]

// 添加文章分类
export const artAddChannelService = (data) => request.post('/my/cate/add', data)
// 编辑文章分类
export const artEditChannelService = (data) =>request.put('/my/cate/info', data)

const onEditChannel = (row) => {dialog.value.open(row)
}
const onAddChannel = () => {dialog.value.open({})
}
const onSuccess = () => {getChannelList()
}

<script setup>
import { ref } from 'vue'
import { artEditChannelService, artAddChannelService } from '@/api/article.js'
const dialogVisible = ref(false)
const formRef = ref()
const formModel = ref({cate_name: '',cate_alias: ''
})
const rules = {cate_name: [{ required: true, message: '请输入分类名称', trigger: 'blur' },{pattern: /^\S{1,10}$/,message: '分类名必须是 1-10 位的非空字符',trigger: 'blur'}],cate_alias: [{ required: true, message: '请输入分类别名', trigger: 'blur' },{pattern: /^[a-zA-Z0-9]{1,15}$/,message: '分类名必须是 1-15 位的字母或数字',trigger: 'blur'}]
}const emit = defineEmits(['success'])
const onSubmit = async () => {await formRef.value.validate()const isEdit = formModel.value.idif (isEdit) {await artEditChannelService(formModel.value)ElMessage.success('编辑成功')} else {await artAddChannelService(formModel.value)ElMessage.success('添加成功')}dialogVisible.value = falseemit('success')
}// 组件对外暴露一个方法 open，基于open传来的参数，区分添加还是编辑
// open({})  => 表单无需渲染，说明是添加
// open({ id, cate_name, ... })  => 表单需要渲染，说明是编辑
// open调用后，可以打开弹窗
const open = (row) => {dialogVisible.value = trueformModel.value = { ...row } // 添加 → 重置了表单内容，编辑 → 存储了需要回显的数据
}// 向外暴露方法
defineExpose({open
})
</script><template><el-dialogv-model="dialogVisible":title="formModel.id ? '编辑分类' : '添加分类'"width="30%"><el-formref="formRef":model="formModel":rules="rules"label-width="100px"style="padding-right: 30px"><el-form-item label="分类名称" prop="cate_name"><el-inputv-model="formModel.cate_name"placeholder="请输入分类名称"></el-input></el-form-item><el-form-item label="分类别名" prop="cate_alias"><el-inputv-model="formModel.cate_alias"placeholder="请输入分类别名"></el-input></el-form-item></el-form><template #footer><span class="dialog-footer"><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary" @click="onSubmit"> 确认 </el-button></span></template></el-dialog>
</template>

4.文章分类删除

// 删除文章分类
export const artDelChannelService = (id) =>request.delete('/my/cate/del', {params: { id }})

const onDelChannel = async (row) => {await ElMessageBox.confirm('你确认要删除该分类么', '温馨提示', {type: 'warning',confirmButtonText: '确认',cancelButtonText: '取消'})await artDelChannelService(row.id)ElMessage.success('删除成功')getChannelList()
}

（4）文章管理页面-[element-plus进阶]

功能需求说明：
1.文章列表渲染（带搜索&带分页）

// 文章：获取文章列表
export const artGetListService = (params) =>request.get('/my/article/list', {params})

2.添加文章（抽屉&文件上传&富文本）

// 文章：添加文章
// 注意：data需要是一个formData格式的对象
export const artPublishService = (data) => request.post('/my/article/add', data)// 文章：获取文章详情
export const artGetDetailService = (id) =>request.get('/my/article/info', {params: { id }})

3.编辑文章（共用抽屉）

// 文章：编辑文章接口
export const artEditService = (data) => request.put('/my/article/info', data)

<script setup>
import { ref } from 'vue'
import ChannelSelect from './ChannelSelect.vue'
import { Plus } from '@element-plus/icons-vue'
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import {artPublishService,artGetDetailService,artEditService
} from '@/api/article'
import { baseURL } from '@/utils/request'
import axios from 'axios'
// 控制抽屉显示隐藏
const visibleDrawer = ref(false)// 默认数据
const defaultForm = {title: '', // 标题cate_id: '', // 分类idcover_img: '', // 封面图片 file 对象content: '', // string 内容state: '' // 状态
}// 准备数据
const formModel = ref({ ...defaultForm })// 图片上传相关逻辑
const imgUrl = ref('')
const onSelectFile = (uploadFile) => {imgUrl.value = URL.createObjectURL(uploadFile.raw) // 预览图片// 立刻将图片对象，存入 formModel.value.cover_img 将来用于提交formModel.value.cover_img = uploadFile.raw
}// 提交
const emit = defineEmits(['success'])
const onPublish = async (state) => {// 将已发布还是草稿状态，存入 formModelformModel.value.state = state// 注意：当前接口，需要的是 formData 对象// 将普通对象 => 转换成 => formData对象const fd = new FormData()for (let key in formModel.value) {fd.append(key, formModel.value[key])}// 发请求if (formModel.value.id) {// 编辑操作await artEditService(fd)ElMessage.success('修改成功')visibleDrawer.value = falseemit('success', 'edit')} else {// 添加操作await artPublishService(fd)ElMessage.success('添加成功')visibleDrawer.value = false// 通知到父组件，添加成功了emit('success', 'add')}
}// 组件对外暴露一个方法 open，基于open传来的参数，区分添加还是编辑
// open({})  => 表单无需渲染，说明是添加
// open({ id, ..., ... })  => 表单需要渲染，说明是编辑
// open调用后，可以打开抽屉
const editorRef = ref()
const open = async (row) => {visibleDrawer.value = true // 显示抽屉if (row.id) {// 需要基于 row.id 发送请求，获取编辑对应的详情数据，进行回显const res = await artGetDetailService(row.id)formModel.value = res.data.data// 图片需要单独处理回显imgUrl.value = baseURL + formModel.value.cover_img// 注意：提交给后台，需要的数据格式，是file对象格式// 需要将网络图片地址 => 转换成 file对象，存储起来, 将来便于提交const file = await imageUrlToFileObject(imgUrl.value,formModel.value.cover_img)formModel.value.cover_img = file} else {formModel.value = { ...defaultForm } // 基于默认的数据，重置form数据// 这里重置了表单的数据，但是图片上传img地址，富文本编辑器内容 => 需要手动重置imgUrl.value = ''editorRef.value.setHTML('')}
}// 将网络图片地址转换为 File 对象的函数
async function imageUrlToFileObject(imageUrl, filename) {try {// 使用 Axios 下载图片数据const response = await axios.get(imageUrl, { responseType: 'arraybuffer' })// 将下载的数据转换成 Blob 对象const blob = new Blob([response.data], {type: response.headers['content-type']})// 创建 File 对象const file = new File([blob], filename, {type: response.headers['content-type']})return file} catch (error) {console.error('Error converting image URL to File object:', error)return null}
}defineExpose({open
})
</script><template><el-drawerv-model="visibleDrawer":title="formModel.id ? '编辑文章' : '添加文章'"direction="rtl"size="50%"><!-- 发表文章表单 --><el-form :model="formModel" ref="formRef" label-width="100px"><el-form-item label="文章标题" prop="title"><el-input v-model="formModel.title" placeholder="请输入标题"></el-input></el-form-item><el-form-item label="文章分类" prop="cate_id"><channel-selectv-model="formModel.cate_id"width="100%"></channel-select></el-form-item><el-form-item label="文章封面" prop="cover_img"><!-- 此处需要关闭 element-plus 的自动上传，不需要配置 action 等参数只需要做前端的本地预览图片即可，无需在提交前上传图标语法：URL.createObjectURL(...) 创建本地预览的地址，来预览--><el-uploadclass="avatar-uploader":show-file-list="false":auto-upload="false":on-change="onSelectFile"><img v-if="imgUrl" :src="imgUrl" class="avatar" /><el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon></el-upload></el-form-item><el-form-item label="文章内容" prop="content"><div class="editor"><quill-editorref="editorRef"v-model:content="formModel.content"content-type="html"theme="snow"></quill-editor></div></el-form-item><el-form-item><el-button @click="onPublish('已发布')" type="primary">发布</el-button><el-button @click="onPublish('草稿')" type="info">草稿</el-button></el-form-item></el-form></el-drawer>
</template><style lang="scss" scoped>
.avatar-uploader {:deep() {.avatar {width: 178px;height: 178px;display: block;}.el-upload {border: 1px dashed var(--el-border-color);border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;transition: var(--el-transition-duration-fast);}.el-upload:hover {border-color: var(--el-color-primary);}.el-icon.avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 178px;height: 178px;text-align: center;}}
}.editor {width: 100%;:deep(.ql-editor) {min-height: 200px;}
}
</style>

4.删除文章

// 文章：删除文章接口
export const artDelService = (id) =>request.delete('/my/article/info', { params: { id } })

<script setup>
import { ref } from 'vue'
import { Delete, Edit } from '@element-plus/icons-vue'
import ChannelSelect from './components/ChannelSelect.vue'
import ArticleEdit from './components/ArticleEdit.vue'
import { artGetListService, artDelService } from '@/api/article.js'
import { formatTime } from '@/utils/format.js'
const articleList = ref([]) // 文章列表
const total = ref(0) // 总条数
const loading = ref(false) // loading状态// 定义请求参数对象
const params = ref({pagenum: 1, // 当前页pagesize: 5, // 当前生效的每页条数cate_id: '',state: ''
})// 基于params参数，获取文章列表
const getArticleList = async () => {loading.value = trueconst res = await artGetListService(params.value)articleList.value = res.data.datatotal.value = res.data.totalloading.value = false
}
getArticleList()// 处理分页逻辑
const onSizeChange = (size) => {// console.log('当前每页条数', size)// 只要是每页条数变化了，那么原本正在访问的当前页意义不大了，数据大概率已经不在原来那一页了// 重新从第一页渲染即可params.value.pagenum = 1params.value.pagesize = size// 基于最新的当前页 和 每页条数，渲染数据getArticleList()
}
const onCurrentChange = (page) => {// 更新当前页params.value.pagenum = page// 基于最新的当前页，渲染数据getArticleList()
}// 搜索逻辑 => 按照最新的条件，重新检索，从第一页开始展示
const onSearch = () => {params.value.pagenum = 1 // 重置页面getArticleList()
}// 重置逻辑 => 将筛选条件清空，重新检索，从第一页开始展示
const onReset = () => {params.value.pagenum = 1 // 重置页面params.value.cate_id = ''params.value.state = ''getArticleList()
}const articleEditRef = ref()
// 添加逻辑
const onAddArticle = () => {articleEditRef.value.open({})
}
// 编辑逻辑
const onEditArticle = (row) => {articleEditRef.value.open(row)
}// 删除逻辑
const onDeleteArticle = async (row) => {// 提示用户是否要删除await ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'})await artDelService(row.id)ElMessage.success('删除成功')// 重新渲染列表getArticleList()
}// 添加或者编辑 成功的回调
const onSuccess = (type) => {if (type === 'add') {// 如果是添加，最好渲染最后一页const lastPage = Math.ceil((total.value + 1) / params.value.pagesize)// 更新成最大页码数，再渲染params.value.pagenum = lastPage}getArticleList()
}
</script><template><page-container title="文章管理"><template #extra><el-button type="primary" @click="onAddArticle">添加文章</el-button></template><!-- 表单区域 --><el-form inline><el-form-item label="文章分类:"><!-- Vue2 => v-model :value 和 @input 的简写 --><!-- Vue3 => v-model :modelValue 和 @update:modelValue 的简写 --><channel-select v-model="params.cate_id"></channel-select><!-- Vue3 => v-model:cid  :cid 和 @update:cid 的简写 --><!-- <channel-select v-model:cid="params.cate_id"></channel-select> --></el-form-item><el-form-item label="发布状态:"><!-- 这里后台标记发布状态，就是通过中文标记的，已发布 / 草稿 --><el-select v-model="params.state"><el-option label="已发布" value="已发布"></el-option><el-option label="草稿" value="草稿"></el-option></el-select></el-form-item><el-form-item><el-button @click="onSearch" type="primary">搜索</el-button><el-button @click="onReset">重置</el-button></el-form-item></el-form><!-- 表格区域 --><el-table :data="articleList" v-loading="loading"><el-table-column label="文章标题" prop="title"><template #default="{ row }"><el-link type="primary" :underline="false">{{ row.title }}</el-link></template></el-table-column><el-table-column label="分类" prop="cate_name"></el-table-column><el-table-column label="发表时间" prop="pub_date"><template #default="{ row }">{{ formatTime(row.pub_date) }}</template></el-table-column><el-table-column label="状态" prop="state"></el-table-column><!-- 利用作用域插槽 row 可以获取当前行的数据 => v-for 遍历 item --><el-table-column label="操作"><template #default="{ row }"><el-buttoncircleplaintype="primary":icon="Edit"@click="onEditArticle(row)"></el-button><el-buttoncircleplaintype="danger":icon="Delete"@click="onDeleteArticle(row)"></el-button></template></el-table-column></el-table><!-- 分页区域 --><el-paginationv-model:current-page="params.pagenum"v-model:page-size="params.pagesize":page-sizes="[2, 3, 5, 10]":background="true"layout="jumper, total, sizes, prev, pager, next":total="total"@size-change="onSizeChange"@current-change="onCurrentChange"style="margin-top: 20px; justify-content: flex-end"/><!-- 添加编辑的抽屉 --><article-edit ref="articleEditRef" @success="onSuccess"></article-edit></page-container>
</template><style lang="scss" scoped></style>

<script setup>
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
</script><template><div><!-- App.vue只需要留一个路由出口 router-view即可 --><el-config-provider :locale="zhCn"><router-view></router-view></el-config-provider></div>
</template><style scoped></style>

<script setup>
import { artGetChannelsService } from '@/api/article.js'
import { ref } from 'vue'defineProps({modelValue: {type: [Number, String]},width: {type: String}
})
const emit = defineEmits(['update:modelValue'])
const channelList = ref([])
const getChannelList = async () => {const res = await artGetChannelsService()channelList.value = res.data.data
}
getChannelList()
</script><template><!-- label 展示给用户看的，value 收集起来提交给后台的 --><el-select:modelValue="modelValue"@update:modelValue="emit('update:modelValue', $event)":style="{ width }"><el-optionv-for="channel in channelList":key="channel.id":label="channel.cate_name":value="channel.id"></el-option></el-select>
</template>

<script setup>
import { ref } from 'vue'
import { Plus, Upload } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores'
import { userUpdateAvatarService } from '@/api/user'
const userStore = useUserStore()
const imgUrl = ref(userStore.user.user_pic)
const uploadRef = ref()
const onSelectFile = (uploadFile) => {// 基于 FileReader 读取图片做预览const reader = new FileReader()reader.readAsDataURL(uploadFile.raw)reader.onload = () => {imgUrl.value = reader.result}
}const onUpdateAvatar = async () => {// 发送请求更新头像await userUpdateAvatarService(imgUrl.value)// userStore 重新渲染await userStore.getUser()// 提示用户ElMessage.success('头像更新成功')
}
</script><template><page-container title="更换头像"><el-uploadref="uploadRef":auto-upload="false"class="avatar-uploader":show-file-list="false":on-change="onSelectFile"><img v-if="imgUrl" :src="imgUrl" class="avatar" /><el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon></el-upload><br /><el-button@click="uploadRef.$el.querySelector('input').click()"type="primary":icon="Plus"size="large">选择图片</el-button><el-button@click="onUpdateAvatar"type="success":icon="Upload"size="large">上传头像</el-button></page-container>
</template><style lang="scss" scoped>
.avatar-uploader {:deep() {.avatar {width: 278px;height: 278px;display: block;}.el-upload {border: 1px dashed var(--el-border-color);border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;transition: var(--el-transition-duration-fast);}.el-upload:hover {border-color: var(--el-color-primary);}.el-icon.avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 278px;height: 278px;text-align: center;}}
}
</style>

<script setup>
import { ref } from 'vue'
import { userUpdatePasswordService } from '@/api/user'
import { useUserStore } from '@/stores'
import { useRouter } from 'vue-router'const formRef = ref()
const pwdForm = ref({old_pwd: '',new_pwd: '',re_pwd: ''
})const checkDifferent = (rule, value, callback) => {// 校验新密码和原密码不能一样if (value === pwdForm.value.old_pwd) {callback(new Error('新密码不能与原密码一样'))} else {callback()}
}
const checkSameAsNewPwd = (rule, value, callback) => {// 校验确认密码必须和新密码一样if (value !== pwdForm.value.new_pwd) {callback(new Error('确认密码必须和新密码一样'))} else {callback()}
}
const rules = ref({old_pwd: [{ required: true, message: '请输入原密码', trigger: 'blur' },{ min: 6, max: 15, message: '原密码长度在6-15位之间', trigger: 'blur' }],new_pwd: [{ required: true, message: '请输入新密码', trigger: 'blur' },{ min: 6, max: 15, message: '新密码长度在6-15位之间', trigger: 'blur' },{ validator: checkDifferent, trigger: 'blur' }],re_pwd: [{ required: true, message: '请再次输入新密码', trigger: 'blur' },{ min: 6, max: 15, message: '确认密码长度在6-15位之间', trigger: 'blur' },{ validator: checkSameAsNewPwd, trigger: 'blur' }]
})const userStore = useUserStore()
const router = useRouter()const submitForm = async () => {await formRef.value.validate()await userUpdatePasswordService(pwdForm.value)ElMessage.success('密码修改成功')// 密码修改成功后，退出重新登录// 清空本地存储的 token 和 个人信息userStore.setToken('')userStore.setUser({})// 拦截登录router.push('/login')
}const resetForm = () => {formRef.value.resetFields()
}
</script><template><page-container title="修改密码"><el-row><el-col :span="12"><el-formref="formRef":model="pwdForm":rules="rules"label-width="100px"><el-form-item label="原密码" prop="old_pwd"><el-input v-model="pwdForm.old_pwd" show-password></el-input></el-form-item><el-form-item label="新密码" prop="new_pwd"><el-input v-model="pwdForm.new_pwd" show-password></el-input></el-form-item><el-form-item label="确认密码" prop="re_pwd"><el-input v-model="pwdForm.re_pwd" show-password></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm">修改密码</el-button><el-button @click="resetForm">重置</el-button></el-form-item></el-form></el-col></el-row></page-container>
</template>

<script setup>
import PageContainer from '@/components/PageContainer.vue'
import { ref } from 'vue'
import { useUserStore } from '@/stores'
import { userUpdateInfoService } from '@/api/user'const formRef = ref()// 是在使用仓库中数据的初始值 (无需响应式) 解构无问题
const {user: { email, id, nickname, username },getUser
} = useUserStore()const form = ref({id,username,nickname,email
})const rules = ref({nickname: [{ required: true, message: '请输入用户昵称', trigger: 'blur' },{pattern: /^\S{2,10}/,message: '昵称长度在2-10个非空字符',trigger: 'blur'}],email: [{ required: true, message: '请输入用户邮箱', trigger: 'blur' },{type: 'email',message: '请输入正确的邮箱格式',trigger: ['blur', 'change']}]
})const submitForm = async () => {// 等待校验结果await formRef.value.validate()// 提交修改await userUpdateInfoService(form.value)// 通知 user 模块，进行数据的更新getUser()// 提示用户ElMessage.success('修改成功')
}
</script>
<template><page-container title="基本资料"><!-- 表单部分 --><el-form ref="formRef" :model="form" :rules="rules" label-width="100px"><el-form-item label="登录名称"><el-input v-model="form.username" disabled></el-input></el-form-item><el-form-item label="用户昵称" prop="nickname"><el-input v-model="form.nickname"></el-input></el-form-item><el-form-item label="用户邮箱" prop="email"><el-input v-model="form.email"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm">提交修改</el-button></el-form-item></el-form></page-container>
</template>