行业知识
全栈开发前端代码：黑马程序员SpringBoot3+Vue3全套视频教程，springboot+vue企业级全栈开，big-event
2026-10-21 09:03:43
来源：互联网转载
���录：希望对大家有帮助
①项目压缩包：
1.要启动的指令：可以参考下面的文件
①登录、注册页面
src\views\login\LoginPage.vue
src\api\user.js
src\stores\modules\user.js
src\stores\index.js
②首页实现的页面
src\views\layout\LayoutContainer.vue
src\api\user.js
user下面的小模块：实现改用户信息、图像、密码
src\components\PageContainer.vue
src\views\user\UserProfile.vue
src\views\user\UserAvatar.vue
src\views\user\UserPassword.vue
③文章的目录编辑：
src\components\PageContainer.vue
src\views\article\ArticleChannel.vue
src\views\article\components\ChannelEdit.vue
④文章的详情管理：
src\views\article\ArticleManage.vue
src\views\article\components\ChannelSelect.vue
src\views\article\components\ArticleEdit.vue
src\utils\format.js
⑤全局的路由：
①项目压缩包：
day13-大事件管理系统-Vue3-big-event-admin.zip
1.要启动的指令：可以参考下面的文件
day12~day13-大事件管理系统-new.pdf
11-day12-day14-大事件管理系统.zip
npm install -g pnpmpnpm create vuepnpm dlx husky-init && pnpm installpnpm i lint-staged -D
2.自己原版的笔记：在语雀
https://www.yuque.com/wangruiquandayi3banrengongzhineng/bmgrcg/fgp0su8yx0bb5039?singleDoc# 《②big-event前端代码》# 《②big-event前端代码》
①登录、注册页面
src\views\login\LoginPage.vue
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 () => { // 注册成功之前，先进行校验，校验成功 → 请求，校验失败 → 自动提示 //validate（）是官网提供的方法，已经直接暴露，可以直接使用 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: '' } }) 注册
注册 ← 返回 登录
记住我 忘记密码？ 登录 注册 → .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; } }} src\api\user.js
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')export const userUpdateInfoService = ({ id, nickname, email }) => request.put('/my/userinfo', { id, nickname, email })export const userUploadAvatarService = (avatar) => request.patch('/my/update/avatar', { avatar })export const userUpdatePassService = ({ old_pwd, new_pwd, re_pwd }) => request.patch('/my/updatepwd', { old_pwd, new_pwd, re_pwd }) src\stores\modules\user.js
import { defineStore } from 'pinia'import { ref } from 'vue'import { userGetInfoService } from '../../api/user'// 用户模块 token setToken removeTokenexport 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 }) src\stores\index.js
import { createPinia } from 'pinia'import persist from 'pinia-plugin-persistedstate'const pinia = createPinia()pinia.use(persist)export default pinia//实现了全部的输出，其他模块导入就方便了export * from './modules/user'export * from './modules/counter'// import { useUserStore } from './modules/user'// export { useUserStore }// import { useCountStore } from './modules/counter'// export { useCountStore } ②首页实现的页面
src\views\layout\LayoutContainer.vue
import { Management, Promotion, UserFilled, User, Crop, EditPen, SwitchButton, CaretBottom} from '@element-plus/icons-vue'import avatar from '@/assets/default.png'import { useUserStore } from '@/stores'import { onMounted } from 'vue'import { useRouter } from 'vue-router'const userStore = useUserStore()const router = useRouter()// 开始就取得User的属性onMounted(() => { userStore.getUser()})const handleCommand = async (key) => { if (key === 'logout') { // 退出操作 await ElMessageBox.confirm('你确认要进行退出么', '温馨提示', { type: 'warning', confirmButtonText: '确认', cancelButtonText: '取消' }) // 清除本地的数据 (token + user信息) userStore.removeToken() //移除key userStore.setUser({}) router.push('/login') } else { // 跳转操作 router.push(`/user/${key}`) }} 文章分类 文章管理 个人中心 基本资料 更换头像 重置密码 黑马程序员：{{ userStore.user.nickname || userStore.user.username }} 基本资料 更换头像 重置密码 退出登录 大事件 ©2023 Created by 黑马程序员 .layout-container { height: 100vh; .el-aside { background-color: #232323; &__logo { height: 120px; background: url('@/assets/logo.png') no-repeat center / 120px auto; } .el-menu { border-right: none; } } .el-header { background-color: #fff; display: flex; align-items: center; justify-content: space-between; .el-dropdown__box { display: flex; align-items: center; .el-icon { color: #999; margin-left: 10px; } &:active, &:focus { outline: none; } } } .el-footer { display: flex; align-items: center; justify-content: center; font-size: 14px; color: #666; }} src\api\user.js
- user作者路由的操作
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 })// 获取用户基本信息→后端是存储到redis缓存的export const userGetInfoService = () => request.get('/my/userinfo')export const userUpdateInfoService = ({ id, nickname, email }) => request.put('/my/userinfo', { id, nickname, email })export const userUploadAvatarService = (avatar) => request.patch('/my/update/avatar', { avatar })export const userUpdatePassService = ({ old_pwd, new_pwd, re_pwd }) => request.patch('/my/updatepwd', { old_pwd, new_pwd, re_pwd }) user下面的小模块：实现改用户信息、图像、密码
src\components\PageContainer.vue
- 设计插槽的方式：具名插槽、默认插槽
defineProps({ title: { requiered: true, type: String }}) {{ title }} .page-container { min-height: 100%; box-sizing: border-box; .header { display: flex; align-items: center; justify-content: space-between; }} src\views\user\UserProfile.vue
import PageContainer from '@/components/PageContainer.vue'import { useUserStore } from '@/stores'import { ref } from 'vue'import { userUpdateInfoService } from '@/api/user'const formRef = ref()// 快速从useUserStore里面解析出方法、属性// getUser快速实现更新的动作const { user: { username, nickname, email, id, getUser }} = useUserStore()// 基于上面的字段进行初始化了const userInfo = ref({ username, nickname, email, id })const rules = { 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' } ]}const onSubmit = async () => { // 进行全局的校验， const valid = await formRef.value.validate() if (valid) { await userUpdateInfoService(userInfo.value) //更新数据 await getUser() ElMessage.success('修改成功') }} 提交修改 src\views\user\UserAvatar.vue
- 学会了借用别人的功能： 借用了上面上传图片的功能
import PageContainer from '@/components/PageContainer.vue'import { ref } from 'vue'import { Plus, Upload } from '@element-plus/icons-vue'import { useUserStore } from '@/stores'import { userUploadAvatarService } from '../../api/user'const userStore = useUserStore()const uploadRef = ref()const imgUrl = ref(userStore.user.user_pic)// 选择更新图片const onUploadFile = (file) => { const reader = new FileReader() reader.readAsDataURL(file.raw) reader.onload = () => { imgUrl.value = reader.result }}// 上传图片进行更新const onUpdateAvatar = async () => { await userUploadAvatarService(imgUrl.value) //马上更新信息→更新图像，不用再进行刷新 await userStore.getUser() ElMessage({ type: 'success', message: '更换头像成功' })}
选择图片 上传头像 .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; } }} src\views\user\UserPassword.vue
import { ref } from 'vue'import { useRoute } from 'vue-router'import { useUserStore } from '@/stores'import { userUpdatePassService } from '@/api/user'const formRef = ref()const router = useRoute()const userStore = useUserStore()const pwdForm = ref({ old_pwd: '', new_pwd: '', re_pwd: ''})const checkOldSame = (rule, value, cb) => { if (value === pwdForm.value.old_pwd) { cb(new Error('原密码和新密码不能一样!')) } else { cb() }}const checkNewSame = (rule, value, cb) => { if (value !== pwdForm.value.new_pwd) { cb(new Error('新密码和确认再次输入的新密码不一样!')) } else { cb() }}const rules = { // 原密码 old_pwd: [ { required: true, message: '请输入密码', trigger: 'blur' }, { pattern: /^\S{6,15}$/, message: '密码长度必须是6-15位的非空字符串', trigger: 'blur' } ], // 新密码 new_pwd: [ { required: true, message: '请输入新密码', trigger: 'blur' }, { pattern: /^\S{6,15}$/, message: '密码长度必须是6-15位的非空字符串', trigger: 'blur' }, { validator: checkOldSame, trigger: 'blur' } ], // 确认新密码 re_pwd: [ { required: true, message: '请再次确认新密码', trigger: 'blur' }, { pattern: /^\S{6,15}$/, message: '密码长度必须是6-15位的非空字符串', trigger: 'blur' }, { validator: checkNewSame, trigger: 'blur' } ]}const onSubmit = async () => { const valid = await formRef.value.validate() if (valid) { await userUpdatePassService(pwdForm.value) ElMessage({ type: 'success', message: '更换密码成功' }) userStore.setToken('') userStore.setUser({}) router.push('/login') }}const onReset = () => { formRef.value.reseetFields()} 修改密码 重置 ③文章的目录编辑：
src\components\PageContainer.vue
- 也是往里面进行填充的
defineProps({ title: { requiered: true, type: String }}) {{ title }} .page-container { min-height: 100%; box-sizing: border-box; .header { display: flex; align-items: center; justify-content: space-between; }} src\views\article\ArticleChannel.vue
import { ref } from 'vue'import { Edit, Delete } from '@element-plus/icons-vue'import { artGetChannelsService, artDelChannelService } from '../../api/article'import ChannelEdit from './components/ChannelEdit.vue'const channelList = ref([])// 是加载旋转的效果const loading = ref(false)//绑定了组件，可以获取里面的方法const dialog = ref()const getChannelList = async () => { loading.value = true const res = await artGetChannelsService() channelList.value = res.data.data loading.value = false}// 开始就调用获取数据getChannelList()// row是获取一行的数据const onDelChannel = async (row) => { await ElMessageBox.confirm('你确认要删除该分类么', '温馨提示', { type: 'warning', confirmButtonText: '确认', cancelButtonText: '取消' }) await artDelChannelService(row.id) ElMessage.success('删除成功') getChannelList()}// 编辑文章分类要进行回显const onEditChannel = (row) => { dialog.value.open(row)}// 添加文章分类不需要→调用子组件的方法const onAddChannel = () => { dialog.value.open({})}// 在成功后，const onSuccess = () => { getChannelList()} 添加分类 src\views\article\components\ChannelEdit.vue
- 进行文章分类的编辑→区分添加、编辑文章（编辑要进行回显）
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.id if (isEdit) { await artEditChannelService(formModel.value) ElMessage.success('编辑成功') } else { await artAddChannelService(formModel.value) ElMessage.success('添加成功') } //关闭弹层、 dialogVisible.value = false //进行子传父 emit('success')}// 组件对外暴露一个方法 open，基于open传来的参数，区分添加还是编辑// open({}) => 表单无需渲染，说明是添加// open({ id, cate_name, ... }) => 表单需要渲染，说明是编辑// open调用后，可以打开弹窗const open = (row) => { dialogVisible.value = true // 使用了展开运算符，进行一一赋值 formModel.value = { ...row } // 添加 → 重置了表单内容，编辑 → 存储了需要回显的数据}// 向外暴露方法defineExpose({ open}) 取消 确认 ④文章的详情管理：
src\views\article\ArticleManage.vue
- 重点知识：
import { Delete, Edit } from '@element-plus/icons-vue'import { ref } from 'vue'import { formatTime } from '@/utils/format'import { ElMessage, ElMessageBox } from 'element-plus'import { artDelService, artGetListService } from '../../api/article'import ArticleEdit from './components/ArticleEdit.vue'import channelSelect from './components/ChannelSelect.vue'// 假数据// const articleList = ref([// {// id: 5961,// title: '新的文章啊',// pub_date: '2022-07-10 14:53:52.604',// state: '已发布',// cate_name: '体育'// },// {// id: 5962,// title: '新的文章啊',// pub_date: '2022-07-10 14:54:30.904',// state: null,// cate_name: '体育'// }// ])// const onEditArticle = (row) => {// console.log(row)// }const onDeleteArticle = async (row) => { await ElMessageBox.confirm('你确认删除文章吗？', '温馨提示', { type: 'warning', confirmButtonText: '确认', cancelButtonText: '取消' }) await artDelService(row.id) ElMessage({ type: 'success', message: '删除成功了' }) getArticleList()}const params = ref({ pagenum: 1, pagesize: 5, cate_id: '', // 复选框绑定的默认值 state: ''})const articleList = ref([])const total = ref(0)const loading = ref(false)const getArticleList = async () => { loading.value = true const res = await artGetListService(params.value) articleList.value = res.data.data total.value = res.data.total console.log(res.data.data) loading.value = false //加载数据结束}// 开始进行初始化的数据getArticleList()// 处理分页的逻辑→每页数量发生改变const onSizeChange = (size) => { // 只有是没页数变化了，那么原本正在访问的当前页面意义不大，数据大概率不再那一页了 // 重新从第一页渲染即可 params.value.pagenum = 1 params.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 visibleDrawer = ref(false)// const onAddArticle = () => {// visibleDrawer.value = true// }// 封装抽屉const articleEditRef = ref()// 编辑新增逻辑const onAddArticle = () => { articleEditRef.value.open({})}const onEditArticle = (row) => { articleEditRef.value.open(row)}// 父组件监听事件，重新渲染const onSuccess = (type) => { if (type === 'add') { const lastPage = Math.ceil((total.value + 1) / params.value.pagesize) params.value.pagenum = lastPage } getArticleList()} 发布文章 搜索 重置 {{ row.title }} {{ formatTime(row.pub_data) }}src\views\article\components\ChannelSelect.vue
- 选择复选框：vue3实现数据的双向绑定
import { artGetChannelsService } from '@/api/article'import { ref } from 'vue'// 父传子进行接收defineProps({ modelValue: { type: [Number, String] }, width: { type: String }})// 子传父进行更新const emit = defineEmits(['update:modelValue'])const channelList = ref([])const getChannelList = async () => { // 是获取文章的分类 channel const res = await artGetChannelsService() channelList.value = res.data.data}getChannelList()src\views\article\components\ArticleEdit.vue
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 { artGetDetailService, artPublishService, artEditService} from '../../../api/article'import { ElMessage } from 'element-plus'import { baseURL } from '@/utils/request'import axios from 'axios'const visibleDrawer = ref(false)const defaultForm = { title: '', cate_id: '', cover_img: '', content: '', state: ''}const formModel = ref({ ...defaultForm })const formRef = ref()const editorRef = ref()// 将网络图片地址转换为File对象async function imageUrlToFile(url, fileName) { try { // 第一步：使用axios获取网络图片数据 const response = await axios.get(url, { responseType: 'arraybuffer' }) const imageData = response.data // 第二步：将图片数据转换为Blob对象 const blob = new Blob([imageData], { type: response.headers['content-type'] }) // 第三步：创建一个新的File对象 const file = new File([blob], fileName, { type: blob.type }) return file } catch (error) { console.error('将图片转换为File对象时发生错误:', error) throw error }}const imgUrl = ref('')const open = async (row) => { visibleDrawer.value = true if (row.id) { console.log('编辑回显') const res = await artGetDetailService(row.id) formModel.value = res.data.data // 图片需要单独处理进行回显 imgUrl.value = baseURL + formModel.value.cover_img // 注意：提交给后台，需要的数据格式，是file对象的格式的 // 需要将网络图片的地址→转换成为file对象，存储起来，方便提交 formModel.value.cover_img = await imageUrlToFile( imgUrl.value, formModel.value.cover_img ) } else { console.log('添加功能') formModel.value = { ...defaultForm } imgUrl.value = '' editorRef.value.setHTML('') //进行清空 }}defineExpose({ open})// 图片上传逻辑// onSelectFile是element提供的函数，改变的钩子，图片上传const onUploadFile = (uploadFile) => { console.log(uploadFile) // 预览图片 imgUrl.value = URL.createObjectURL(uploadFile.raw) // 立刻将图片对象转入提交 formModel.value.cover_img = uploadFile.raw}const emit = defineEmits(['success'])const onPublish = async (state) => { // 将已发布还是草稿状态，存入 state formModel.value.state = state // 转换 formData 数据 const fd = new FormData() for (let key in formModel.value) { fd.append(key, formModel.value[key]) } if (formModel.value.id) { if (formModel.value.id) { await artEditService(fd) ElMessage.success('编辑成功') visibleDrawer.value = false emit('success', 'edit') } else { // 添加请求 await artPublishService(fd) ElMessage.success('添加成功') visibleDrawer.value = false emit('success', 'add') } }} 发布 草稿 .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; }}src\utils\format.js
import { dayjs } from 'element-plus'export const formatTime = (time) => dayjs(time).format('YYYY年MM月DD日')⑤全局的路由：
import { createRouter, createWebHistory } from 'vue-router'import { useUserStore } from '@/stores'// createRouter 创建路由实例// 配置 history 模式// 1. history模式：createWebHistory 地址栏不带 #// 2. hash模式： createWebHashHistory 地址栏带 #// console.log(import.meta.env.DEV)// vite 中的环境变量 import.meta.env.BASE_URL 就是 vite.config.js 中的 base 配置项const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: '/login', component: () => import('@/views/login/LoginPage.vue') }, // 登录页 { path: '/', component: () => import('@/views/layout/LayoutContainer.vue'), redirect: '/article/manage', children: [ { path: '/article/manage', component: () => import('@/views/article/ArticleManage.vue') }, { path: '/article/channel', component: () => import('@/views/article/ArticleChannel.vue') }, { path: '/user/profile', component: () => import('@/views/user/UserProfile.vue') }, { path: '/user/avatar', component: () => import('@/views/user/UserAvatar.vue') }, { path: '/user/password', component: () => import('@/views/user/UserPassword.vue') } ] } ]})// 登录访问拦截 => 默认是直接放行的// 根据返回值决定，是放行还是拦截// 返回值：// 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
