springboot+vue+elementui实现校园互助平台大作业、毕业设计

愛芳芳2024-05-07 17:43

目录

一、项目介绍

二、项目截图

管理后台

1.登录（默认管理员账号密码均为：admin）

[2. 用户管理](#2. 用户管理)

[​编辑 3.任务管理](#编辑 3.任务管理)

互助单（学生发布）

行政单（教师发布）

[​编辑 审核（退回需要写明原因）](#编辑 审核（退回需要写明原因）)

4.管理员管理

[​编辑 ​编辑](#编辑 编辑)

5.个人信息、修改密码

[​编辑 ​编辑](#编辑 编辑)

用户端

1.登录

[​编辑 2.首页](#编辑 2.首页)

可以对任务进行接取，搜索任务等

可评论

[​编辑 3.任务发布](#编辑 3.任务发布)

互助单发布

行政单差发布

4.个人中心

5.我的发布

6.我的接取

[​编辑 7.消息中心](#编辑 7.消息中心)

[三、 项目实现简述](#三、 项目实现简述)

1.项目需求、要求文档

2.后端项目

idea开发

[​编辑 部分实现源码：](#编辑 部分实现源码：)

3.前端vue项目

管理后台前端vue项目：

登录页面代码案例：

四、总结

一、项目介绍

前后端分离实现

  1. 项目分为三个部分：springboot后端、管理后台和用户平台pc端；
  2. 后端采用springboot+redis+mybatisplus+mysql+JWT token；
  3. 管理后台采用vue+elementui，用户平台端同样，框架类似，很好的框架、适合新手、老手，都可以，没有复杂错乱的结构。

二、项目截图

管理后台

1.登录（默认管理员账号密码均为：admin）

2. 用户管理

分为学生管理、教师管理，同表设计，界面差不多

3.任务管理

互助单（学生发布）
行政单（教师发布）
审核（退回需要写明原因）

4.管理员管理

5.个人信息、修改密码

用户端

1.登录

2.首页

可以对任务进行接取，搜索任务等
可评论

3.任务发布

互助单发布
行政单差发布

4.个人中心

5.我的发布

6.我的接取

7.消息中心

各种实时消息通知

三、 项目实现简述

1.项目需求、要求文档

2.后端项目

idea开发

部分实现源码：

java 复制代码 
package com.product.service.impl;

import cn.hutool.core.bean.BeanUtil;
import cn.hutool.core.collection.CollUtil;
import cn.hutool.core.collection.CollectionUtil;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.core.toolkit.StringUtils;
import com.baomidou.mybatisplus.core.toolkit.Wrappers;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.product.entity.*;
import com.product.entity.base.PageQuery;
import com.product.entity.base.Result;
import com.product.entity.base.ResultPage;
import com.product.entity.vo.CommentVO;
import com.product.entity.vo.HelpTaskVO;
import com.product.enumerate.*;
import com.product.mapper.CommentMapper;
import com.product.mapper.HelpTaskMapper;
import com.product.mapper.RecruitRecordMapper;
import com.product.param.HelpTaskParam;
import com.product.service.*;
import com.product.util.JwtUtil;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import javax.annotation.Resource;
import java.time.LocalDateTime;
import java.util.*;
import java.util.stream.Collectors;

@Slf4j
@Service
public class HelpTaskServiceImpl extends ServiceImpl<HelpTaskMapper, HelpTask> implements HelpTaskService {

    @Resource
    private FileUploadService fileUploadService;
    @Resource
    private UserService userService;
    @Resource
    private RecruitRecordMapper recruitRecordMapper;
    @Resource
    private CommentMapper commentMapper;
    @Resource
    private MsgRecordService msgRecordService;
    @Resource
    private RecruitRecordService recruitRecordService;

    /**
     * 添加或更新
     */
    @Override
    public Result<?> add(Integer userId, HelpTaskParam param) {
        if (param.getRecruitStartTime().isAfter(param.getRecruitEndTime())) {
            return Result.failMsg("招募结束时间不能小于开始时间");
        }
        User user = userService.getUserById(userId);
        if (Objects.equals(UserType.TEACHER.getValue(), user.getUserType()) && Objects.equals(param.getPublishType(), PublishType.MUTUAL_AID.getValue())) {
            return Result.failMsg("教师不可发布任务单");
        }
        if (Objects.equals(UserType.STUDENT.getValue(), user.getUserType()) && Objects.equals(param.getPublishType(), PublishType.ADMINISTRATION.getValue())) {
            return Result.failMsg("学生不可发布行政单");
        }
        if (param.getFile() != null) {
            String coverPath = fileUploadService.uploadImage(param.getFile());
            param.setCoverPath(coverPath);
        }
        LocalDateTime now = LocalDateTime.now();
        param.setUpdateTime(now);
        if (param.getId() == null) {//添加
            param.setUserId(userId);
            param.setCreateTime(now);
            param.setAuditStatus(AuditStatus.UNDER_REVIEW.getValue());
            param.setTaskStatus(HelpTaskStatus.TO_BE_RECRUITED.getValue());
            save(param);
        } else {//
            param.setAuditStatus(AuditStatus.UNDER_REVIEW.getValue());
            param.setRejectRemark("");
            HelpTask helpTask = getById(param.getId());
            if (Objects.equals(helpTask.getTaskStatus(), HelpTaskStatus.TASK_FAIL.getValue())
                    || Objects.equals(helpTask.getTaskStatus(), HelpTaskStatus.TASK_FINISHED.getValue())) {
                return Result.failMsg("任务状态不允许修改");
            }
            updateById(param);
        }
        return Result.OKMsg("保存成功，审核中~");
    }

    /**
     * 分页
     */
    @Override
    public ResultPage<HelpTaskVO> getHomePage(PageQuery pageQuery) {
        Page<HelpTask> page;
        LambdaQueryWrapper<HelpTask> queryWrapper = new LambdaQueryWrapper<>();
        if (StringUtils.isNotBlank(pageQuery.getKeyWord())) {
            queryWrapper.and(i->i.like(HelpTask::getName, pageQuery.getKeyWord()).or().like(HelpTask::getContent, pageQuery.getKeyWord()));
        }
        if (pageQuery.getPublishType() != null) {
            queryWrapper.eq(HelpTask::getPublishType, pageQuery.getPublishType());
        }
        if (pageQuery.getTaskType() != null) {
            queryWrapper.eq(HelpTask::getType, pageQuery.getTaskType());
        }
        queryWrapper.eq(HelpTask::getAuditStatus, AuditStatus.PUBLISHED.getValue());
        queryWrapper.in(HelpTask::getTaskStatus, Arrays.asList(
                HelpTaskStatus.TO_BE_RECRUITED.getValue(),
                HelpTaskStatus.RECRUITMENT_IN_PROGRESS.getValue(),
                HelpTaskStatus.TASK_IN_PROGRESS.getValue()
                )
        );
        queryWrapper.orderByDesc(HelpTask::getCreateTime);
        page = page(pageQuery.build(), queryWrapper);
        List<HelpTaskVO> helpTaskVOList = new ArrayList<>();
        if (CollectionUtil.isNotEmpty(page.getRecords())) {
            page.getRecords().forEach(item -> {
                HelpTaskVO helpTaskVO = new HelpTaskVO();
                BeanUtil.copyProperties(item, helpTaskVO);
                this.fixOtherInfo(helpTaskVO, false);
                helpTaskVOList.add(helpTaskVO);
            });
        }
        return ResultPage.OK(page.getTotal(), page.getCurrent(), page.getSize(), helpTaskVOList);
    }

    /**
     * 分页
     */
    @Override
    public ResultPage<HelpTaskVO> getAdminPage(PageQuery pageQuery) {
        Page<HelpTask> page;
        LambdaQueryWrapper<HelpTask> queryWrapper = new LambdaQueryWrapper<>();
        if (StringUtils.isNotBlank(pageQuery.getKeyWord())) {
            queryWrapper.like(HelpTask::getName, pageQuery.getKeyWord());
        }
        if (pageQuery.getPublishType() != null) {
            queryWrapper.eq(HelpTask::getPublishType, pageQuery.getPublishType());
        }
        if (pageQuery.getTaskType() != null) {
            queryWrapper.eq(HelpTask::getType, pageQuery.getTaskType());
        }
        if (pageQuery.getAuditStatus() != null) {
            queryWrapper.eq(HelpTask::getAuditStatus, pageQuery.getAuditStatus());
        }
        if (pageQuery.getTaskStatus() != null) {
            queryWrapper.eq(HelpTask::getTaskStatus, pageQuery.getTaskStatus());
        }
        queryWrapper.orderByDesc(HelpTask::getCreateTime);
        page = page(pageQuery.build(), queryWrapper);
        List<HelpTaskVO> helpTaskVOList = new ArrayList<>();
        if (CollectionUtil.isNotEmpty(page.getRecords())) {
            page.getRecords().forEach(item -> {
                HelpTaskVO helpTaskVO = new HelpTaskVO();
                BeanUtil.copyProperties(item, helpTaskVO);
                this.fixOtherInfo(helpTaskVO, false);
                helpTaskVOList.add(helpTaskVO);
            });
        }
        return ResultPage.OK(page.getTotal(), page.getCurrent(), page.getSize(), helpTaskVOList);
    }

    /**
     * 分页
     */
    @Override
    public ResultPage<HelpTaskVO> getMyPublishPage(PageQuery pageQuery) {
        Page<HelpTask> page;
        LambdaQueryWrapper<HelpTask> queryWrapper = new LambdaQueryWrapper<>();
        queryWrapper.eq(HelpTask::getUserId, JwtUtil.getUserId());
        if (StringUtils.isNotBlank(pageQuery.getKeyWord())) {
            queryWrapper.like(HelpTask::getName, pageQuery.getKeyWord());
        }
        if (pageQuery.getPublishType() != null) {
            queryWrapper.eq(HelpTask::getPublishType, pageQuery.getPublishType());
        }
        if (pageQuery.getTaskType() != null) {
            queryWrapper.eq(HelpTask::getType, pageQuery.getTaskType());
        }
        if (pageQuery.getAuditStatus() != null) {
            queryWrapper.eq(HelpTask::getAuditStatus, pageQuery.getAuditStatus());
        }
        if (pageQuery.getTaskStatus() != null) {
            queryWrapper.eq(HelpTask::getTaskStatus, pageQuery.getTaskStatus());
        }
        queryWrapper.orderByDesc(HelpTask::getCreateTime);
        page = page(pageQuery.build(), queryWrapper);
        List<HelpTaskVO> helpTaskVOList = new ArrayList<>();
        if (CollectionUtil.isNotEmpty(page.getRecords())) {
            page.getRecords().forEach(item -> {
                HelpTaskVO helpTaskVO = new HelpTaskVO();
                BeanUtil.copyProperties(item, helpTaskVO);
                this.fixOtherInfo(helpTaskVO, false);
                helpTaskVOList.add(helpTaskVO);
            });
        }
        return ResultPage.OK(page.getTotal(), page.getCurrent(), page.getSize(), helpTaskVOList);
    }

    @Override
    public Result<List<CommentVO>> getCommentList(int helpTaskId) {
        List<CommentVO> commentVOList = new ArrayList<>();
        List<Comment> commentList = commentMapper.selectList(Wrappers.<Comment>lambdaQuery().eq(Comment::getHelpTaskId, helpTaskId));
        if (CollUtil.isNotEmpty(commentList)) {
            List<Integer> userIds = commentList.stream().map(Comment::getUserId).collect(Collectors.toList());
            userIds.addAll(commentList.stream().map(Comment::getBeReplyUserId).collect(Collectors.toList()));
            List<User> userList = userService.list(Wrappers.<User>lambdaQuery().in(User::getId, userIds));
            userList.forEach(item -> {
                item.setAvatar(fileUploadService.getRealPath(item.getAvatar()));
            });
            Map<Integer, User> userMap = userList.stream().collect(Collectors.toMap(User::getId, obj -> obj));
            commentList.forEach(item -> {
                CommentVO commentVO = new CommentVO();
                BeanUtil.copyProperties(item, commentVO);
                commentVO.setPublishUser(userMap.get(item.getUserId()));
                commentVO.setBeReplyUser(userMap.get(item.getBeReplyUserId()));
                commentVOList.add(commentVO);
            });
        }
        return Result.OK(commentVOList);
    }

    @Override
    public void fixOtherInfo(HelpTaskVO helpTaskVO, boolean comment) {
        helpTaskVO.setPublishTypeText(PublishType.valueOf(helpTaskVO.getPublishType()).getText());
        helpTaskVO.setTypeText(HelpTaskType.valueOf(helpTaskVO.getType()).getText());
        helpTaskVO.setTaskStatusText(HelpTaskStatus.valueOf(helpTaskVO.getTaskStatus()).getText());
        helpTaskVO.setAuditStatusText(AuditStatus.valueOf(helpTaskVO.getAuditStatus()).getText());
        helpTaskVO.setCoverPath(fileUploadService.getRealPath(helpTaskVO.getCoverPath()));
        User user = userService.getUserById(helpTaskVO.getUserId());
        user.setAvatar(fileUploadService.getRealPath(user.getAvatar()));
        helpTaskVO.setPublishUser(user);
        //招募成员
        List<RecruitRecord> recruitRecords = recruitRecordMapper.selectList(Wrappers.<RecruitRecord>lambdaQuery().eq(RecruitRecord::getHelpTaskId, helpTaskVO.getId()));
        if (CollUtil.isNotEmpty(recruitRecords)) {
            List<Integer> userIds = recruitRecords.stream().map(RecruitRecord::getUserId).collect(Collectors.toList());
            List<User> userList = userService.list(Wrappers.<User>lambdaQuery().in(User::getId, userIds));
            userList.forEach(item -> {
                item.setAvatar(fileUploadService.getRealPath(item.getAvatar()));
            });
            helpTaskVO.setUserList(userList);
        }
        int commentNum = Math.toIntExact(commentMapper.selectCount(Wrappers.<Comment>lambdaQuery().eq(Comment::getHelpTaskId, helpTaskVO.getId())));
        helpTaskVO.setCommentNum(commentNum);
        //评论列表
        if (comment) {
            List<Comment> commentList = commentMapper.selectList(Wrappers.<Comment>lambdaQuery().eq(Comment::getHelpTaskId, helpTaskVO.getId()));
            if (CollUtil.isNotEmpty(commentList)) {
                List<CommentVO> commentVOList = new ArrayList<>();
                List<Integer> userIds = commentList.stream().map(Comment::getUserId).collect(Collectors.toList());
                userIds.addAll(commentList.stream().map(Comment::getBeReplyUserId).collect(Collectors.toList()));
                List<User> userList = userService.list(Wrappers.<User>lambdaQuery().in(User::getId, userIds));
                userList.forEach(item -> {
                    item.setAvatar(fileUploadService.getRealPath(item.getAvatar()));
                });
                Map<Integer, User> userMap = userList.stream().collect(Collectors.toMap(User::getId, obj -> obj));
                commentList.forEach(item -> {
                    CommentVO commentVO = new CommentVO();
                    BeanUtil.copyProperties(item, commentVO);
                    commentVO.setPublishUser(userMap.get(item.getUserId()));
                    commentVO.setBeReplyUser(userMap.get(item.getBeReplyUserId()));
                    commentVOList.add(commentVO);
                });
                helpTaskVO.setCommentList(commentVOList);
            }
        }
    }


    /**
     * 删除
     *
     * @param userId 用户ID
     * @param ids    所操作记录
     */
    @Override
    public Result<?> del(Integer userId, String ids) {
        String[] idsArr = ids.split(",");
        List<Long> idsList = new ArrayList<>();
        for (String str : idsArr) {
            idsList.add(Long.parseLong(str));
        }
        boolean change = remove(Wrappers.<HelpTask>lambdaQuery().in(HelpTask::getId, idsList));
        if (change) {
            return Result.OKMsg("删除成功");
        } else {
            return Result.failMsg("删除失败，请重试");
        }
    }

    /**
     * 更新状态
     *
     * @param userId 用户ID
     * @param ids    所操作记录
     * @return
     */
    @Override
    public Result<?> updateAuditStatus(Integer userId, Integer auditStatus, String ids, String rejectRemark) {
        String[] idsArr = ids.split(",");
        String content = "任务审核状态发生了变化【" + AuditStatus.valueOf(auditStatus).getText() + "】，请及时查看";
        for (String str : idsArr) {
            lambdaUpdate()
                    .eq(HelpTask::getId, Integer.parseInt(str))
                    .set(HelpTask::getAuditStatus, AuditStatus.valueOf(auditStatus).getValue())
                    .set(HelpTask::getRejectRemark, rejectRemark)
                    .set(HelpTask::getUpdateSystemAdminId, userId)
                    .set(HelpTask::getUpdateSystemTime, LocalDateTime.now())
                    .update();
            HelpTask helpTask = getById(Integer.parseInt(str));
//            if (!Objects.equals(helpTask.getUserId(), userId)) {
                MsgRecord msgRecord = new MsgRecord();
                msgRecord.setReceiveUserId(helpTask.getUserId());
                msgRecord.setRelId(helpTask.getId());
                msgRecord.setStatus(YesOrNo.NO.getValue());
                msgRecord.setMsgType(MsgType.HELP_TASK.getValue());
                msgRecord.setContent(content);
                msgRecordService.add(msgRecord);
//            }
        }

        return Result.OKMsg("操作成功");
    }

    /**
     * 更新状态
     *
     * @param userId 用户ID
     * @param ids    所操作记录
     * @return
     */
    @Transactional(rollbackFor = Exception.class)
    @Override
    public Result<?> updateStatus(Integer userId, Integer status, String ids) {
        String[] idsArr = ids.split(",");
        String content = "任务状态发生了变化【" + HelpTaskStatus.valueOf(status).getText() + "】，请及时查看";
        for (String str : idsArr) {
            lambdaUpdate()
                    .eq(HelpTask::getId, Integer.parseInt(str))
                    .set(HelpTask::getTaskStatus, HelpTaskStatus.valueOf(status).getValue())
                    .set(HelpTask::getUpdateSystemAdminId, userId)
                    .set(HelpTask::getUpdateSystemTime, LocalDateTime.now())
                    .update();
            HelpTask helpTask = getById(Integer.parseInt(str));
//            if (!Objects.equals(helpTask.getUserId(), userId)) {
                MsgRecord msgRecord = new MsgRecord();
                msgRecord.setReceiveUserId(helpTask.getUserId());
                msgRecord.setRelId(helpTask.getId());
                msgRecord.setStatus(YesOrNo.NO.getValue());
                msgRecord.setMsgType(MsgType.HELP_TASK.getValue());
                msgRecord.setContent(content);
                msgRecordService.add(msgRecord);
//            }
            //任务完成，奖励积分 行政单才有积分
            if (Objects.equals(helpTask.getPublishType(), PublishType.ADMINISTRATION.getValue()) && Objects.equals(HelpTaskStatus.TASK_FINISHED, HelpTaskStatus.valueOf(status))) {
                //招募成员
                List<RecruitRecord> recruitRecords = recruitRecordMapper.selectList(
                        Wrappers.<RecruitRecord>lambdaQuery()
                                .eq(RecruitRecord::getHelpTaskId, helpTask.getId())
                                .eq(RecruitRecord::getAddIntegral, YesOrNo.NO.getValue())
                );
                if (CollUtil.isNotEmpty(recruitRecords)) {
                    List<Integer> userIds = recruitRecords.stream().map(RecruitRecord::getUserId).collect(Collectors.toList());
                    List<User> userList = userService.list(Wrappers.<User>lambdaQuery().in(User::getId, userIds));
                    userList.forEach(item -> {
                        Integer integral = item.getIntegral();
                        if (integral == null) {
                            integral = 0;
                        }
                        integral += helpTask.getIntegral();
                        userService.lambdaUpdate()
                                .eq(User::getId, item.getId())
                                .set(User::getIntegral, integral)
                                .update();
                    });
                    //更新已经清算积分 避免重复状态修改重复增加积分
                    List<Integer> idList = recruitRecords.stream().map(RecruitRecord::getId).collect(Collectors.toList());
                    recruitRecordService.lambdaUpdate()
                            .in(RecruitRecord::getId, idList)
                            .set(RecruitRecord::getAddIntegral, YesOrNo.YES.getValue())
                            .update();
                }
            }
        }
        return Result.OKMsg("操作成功");
    }

    /**
     * 详情
     *
     * @param id 主键
     */
    @Override
    public Result<HelpTaskVO> getDetailById(int id) {
        HelpTask helpTask = getById(id);
        HelpTaskVO vo = BeanUtil.copyProperties(helpTask, HelpTaskVO.class);
        this.fixOtherInfo(vo, true);
        return Result.OK(vo);
    }

    /**
     * 评论
     */
    @Transactional(rollbackFor = Exception.class)
    @Override
    public Result<Comment> addComment(Integer userId, Comment comment) {
        comment.setUserId(userId);
        commentMapper.insert(comment);

        MsgRecord msgRecord = new MsgRecord();
        msgRecord.setUserId(comment.getUserId());
        msgRecord.setBeReplyUserId(comment.getBeReplyUserId());
        msgRecord.setReceiveUserId(comment.getBeReplyUserId());
        msgRecord.setRelId(comment.getHelpTaskId());
        msgRecord.setStatus(YesOrNo.NO.getValue());
        msgRecord.setMsgType(MsgType.COMMENT.getValue());
        msgRecord.setContent("评论了你，请及时回复~");
        msgRecordService.add(msgRecord);
        return Result.OK("评论成功", comment);
    }

    /**
     * 评论
     */
    @Override
    public Result<?> delComment(int id) {
        int change = commentMapper.deleteById(id);
        return Result.OKMsg("删除成功");
    }
}

3.前端vue项目

管理后台前端vue项目：

用户端前端vue项目：

登录页面代码案例：
html 复制代码 
<template>
  <div id="login-body">
    <div style="width: 100%;height: 100%;overflow: hidden;">
      <div class="name">大学校园互助平台</div>
      <div class="login-modal">
    			<div class="title">登录</div>
    			<el-form class="login-form"
    			         :rules="loginRules"
    			         ref="loginForm"
    			         :model="loginForm"
    			         label-width="0">

    					 <el-form-item prop="username">
    						 <el-input
    						     placeholder="请输入用户名"
    						     prefix-icon="el-icon-user"
    						     v-model="loginForm.username">
    						   </el-input>
    					 </el-form-item>

    					 <el-form-item prop="password">
    						 <el-input
    							:type="passwordType"
    						     placeholder="请输入密码"
    						     prefix-icon="el-icon-lock"
    						     v-model="loginForm.password">
    						   </el-input>
    					 </el-form-item>

    					 <el-form-item>
    					   <el-row :span="24">
<!--    					     <el-col :span="12">-->
<!--    					       <el-checkbox v-model="loginForm.rememberPwd">记住密码</el-checkbox>-->
<!--    					     </el-col>-->
    					     <el-col :span="24">
    					       <el-popover
    					           placement="top-start"
    					           title=""
    					           width="200"
    					           trigger="hover"
    					           content="忘记密码请联系系统管理员">
    					           <span style="color: #1890ff;float: right;" slot="reference">忘记密码</span>
    					         </el-popover>
    					     </el-col>
    					   </el-row>
    					 </el-form-item>

    					 <el-form-item>
    					   <el-button type="primary"
    					              style="width: 100%;"
    					              @click.native.prevent="handleLogin"
    					              class="login-submit">
    					              登录
    					   </el-button>
                </el-form-item>
    			</el-form>
    		</div>
    </div>
  </div>
</template>

<script>
  import {getStore,setStore} from "@/utils/store.js";

  export default {
    data() {
      return {
        loading: false,
        passwordType: "password",
        loginForm: {
          //用户名
          username: "",
          //密码
          password: "",
          adminType: "1",
          rememberPwd: false,
        },
        roles:[
          {val: '1',name:'管理员'},
          {val: '2',name:'教师'},
        ],
        loginRules: {
          username: [
            {required: true, message: "请输入用户名", trigger: "change"}
          ],
          password: [
            {required: true, message: "请输入密码", trigger: "change"}
          ],
          adminType: [
            {required: true, message: "请选择角色", trigger: "change"}
          ]
        },
      };
    },
    watch: {

    },
    computed: {

    },
    mounted() {
      window.addEventListener('keydown', this.keyDown)
    },
    methods: {
      keyDown (e) {
        // 回车则执行登录方法 enter键的ASCII是13
        if (e.keyCode === 13) {
          this.handleLogin() // 需要执行的方法方法
        }
      },
      destroyed () {
        window.removeEventListener('keydown', this.keyDown, false)
      },
      showPassword() {
        this.passwordType === ""
          ? (this.passwordType = "password")
          : (this.passwordType = "");
      },
      handleLogin() {//登录
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            const loading = this.$loading({
              lock: true,
              text: '登录中,请稍后。。。',
              spinner: "el-icon-loading"
            });
            this.$store.dispatch('login',this.loginForm).then((res)=>{
              if(res.code === 200){
                this.destroyed();
                this.$notify({
                  title: '登录成功',
                  message: res.data.username+'，欢迎您！',
                  type: 'success'
                });
                this.$router.push({path: '/'});
              }
            }).finally(() =>
              loading.close()
            );
          }
        });
      },
    }
  };
</script>

<style>
  #login-body{
    width: 100%;
    height: 100%;
  		  background-size: 100% 100%;
  		  background-image: linear-gradient(to top,rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url("../../../public/img/bg2.jpg");
  		  background-repeat: no-repeat;
  }
  .name{
  		  line-height: 50px;
  		  font-size: 30px;
  		  font-weight: 700;
  		  color: #FFFFFF;
  		  margin-left: 10px;
  }
  .login-modal{
  		  position: relative;
  		  width: 420px;
  		  height: 400px;
  		  margin: 0 auto;
  		  top: 50%;
  		  margin-top: -200px;
  		  background-color: #FFFFFF;
  		  border-radius: 5px;
  }
  .title{
  		  height: 100px;
  		  line-height: 100px;
  		  font-weight: 600;
  		  text-align: center;
  		  font-size: 28px;
  }
  .login-form{
  		  margin: 20px 40px;
  }
</style>

四、总结

项目页面完整，后续可能将不断升级。

关注作者，及时了解更多好项目！

更多优质项目请看作者主页！

获取源码或如需帮助，可通过博客后面名片+作者即可！

其他作品集合（主页更多）： 低价多销-CSDN博客

相关推荐
二哈喇子！4 小时前
Vue2 监听器 watcher
前端·javascript·vue.js
咚为5 小时前
Rust Print 终极指南：从底层原理到全场景实战
开发语言·后端·rust
二哈喇子！5 小时前
SpringBoot项目右上角选择ProjectNameApplication的配置
java·spring boot
sin22015 小时前
MyBatis的执行流程
java·开发语言·mybatis
二哈喇子！5 小时前
基于Spring Boot框架的车库停车管理系统的设计与实现
java·spring boot·后端·计算机毕业设计
二哈喇子！5 小时前
基于SpringBoot框架的水之森海底世界游玩系统
spring boot·旅游
二哈喇子！5 小时前
Java框架精品项目【用于个人学习】
java·spring boot·学习
二哈喇子！6 小时前
基于SpringBoot框架的网上购书系统的设计与实现
java·大数据·spring boot
曾经的三心草6 小时前
redis-2-数据结构内部编码-单线程-String命令
数据结构·数据库·redis
二哈喇子！6 小时前
基于JavaSE的淘宝卖鞋后端管理系统的设计与实现
java·spring boot·spring
热门推荐
01GitHub 镜像站点02OpenCode 入门教程：介绍 · 安装 · 配置第三方 API (如 Claude)03Claude Code Skills 实用使用手册04UV安装并设置国内源05在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）06BongoCat - 跨平台键盘猫动画工具07安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）08AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南09Linux下V2Ray安装配置指南10Open Code教程（四）| 高级配置与集成