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博客

相关推荐
qq_4419960514 分钟前
Mybatis官方生成器使用示例
java·mybatis
码上一元2 小时前
SpringBoot自动装配原理解析
java·spring boot·后端
计算机-秋大田2 小时前
基于微信小程序的养老院管理系统的设计与实现，LW+源码+讲解
java·spring boot·微信小程序·小程序·vue
魔道不误砍柴功4 小时前
简单叙述 Spring Boot 启动过程
java·数据库·spring boot
枫叶_v4 小时前
【SpringBoot】22 Txt、Csv文件的读取和写入
java·spring boot·后端
路在脚下@4 小时前
Springboot 的Servlet Web 应用、响应式 Web 应用（Reactive）以及非 Web 应用（None）的特点和适用场景
java·spring boot·servlet
杜杜的man5 小时前
【go从零单排】Closing Channels通道关闭、Range over Channels
开发语言·后端·golang
java小吕布5 小时前
Java中Properties的使用详解
java·开发语言·后端
尘浮生6 小时前
Java项目实战II基于微信小程序的移动学习平台的设计与实现（开发文档+数据库+源码）
java·开发语言·数据库·spring boot·学习·微信小程序·小程序
2401_857610036 小时前
Spring Boot框架：电商系统的技术优势
java·spring boot·后端
热门推荐
01玄机平台应急响应—webshell查杀02Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04新版微信小程序获取用户手机号05文件或文件夹名称中有空格如何批量去除06组基轨迹建模 GBTM的介绍与实现（Stata 或 R）07【TC3xx芯片】TC3xx芯片电源管理系统PMS详解08优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间09基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测10【Flutter】基于 GetX 实现 Dio 的生命周期自动化