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

目录

一、项目介绍

二、项目截图

管理后台

1.登录(默认管理员账号密码均为:admin)

2. 用户管理

​编辑 3.任务管理

互助单(学生发布)

行政单(教师发布) 

​编辑 审核(退回需要写明原因)

4.管理员管理

​编辑 ​编辑

5.个人信息、修改密码

​编辑 ​编辑

用户端

1.登录

​编辑 2.首页

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

可评论

​编辑 3.任务发布

互助单发布

行政单差发布

 4.个人中心

 5.我的发布

6.我的接取

​编辑 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开发

 部分实现源码:

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项目:

登录页面代码案例:
<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博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/597738.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

如何完美解决Outlook大文件传送问题,提升办公协作效率?

在日常工作中&#xff0c;邮件是一种常用的通信方式&#xff0c;经常用来发送各类文件&#xff0c;比如报告和文档、合同和协议、财务报表、营销资料、设计文件等。但有时文件会比较大&#xff0c;因此Outlook大文件传送时&#xff0c;会遇到附件大小受限的情况。常用的解决发送…

五分钟了解等级保护、风险评估和安全测评三者的区别和联系?

等级保护 基本概念&#xff1a;网络安全等级保护是指对国家秘密信息、法人和其他组织和公民的专有信息以及公开信息和存储、传输、处理这些信息的信息系统分等级实行安全保护&#xff0c;对信息系统中使用的安全产品实行按等级管理&#xff0c;对信息系统中发生的信息安全事件…

已解决SyntaxError: EOL while scanning string literal 亲测有效!!!

已解决SyntaxError: EOL while scanning string literal 亲测有效&#xff01;&#xff01;&#xff01; 亲测有效 报错问题解决思路解决方法 报错问题 SyntaxError: EOL while scanning string literal 这个错误通常发生在Python代码中&#xff0c;表示字符串字面量没有被正确…

打开深度学习的锁:(0)什么是神经网络?有哪些必备的知识点准备?

PS&#xff1a;每每温故必而知新 什么是神经网络&#xff1f; 一、一个单神经元的神经网络二、多个单神经元的神经网络三、到底什么是机器学习&#xff1f;&#xff08;重点&#xff09;1&#xff1a;什么是机器学习的训练&#xff1f;2&#xff1a;什么是模型&#xff1f;权重…

让网络分析更简单高效 - AnaTraf网络流量分析仪

随着互联网的迅速发展,网络流量分析已经成为IT运维人员不可或缺的重要工具。作为网络性能监测与诊断(NPMD)领域的佼佼者,AnaTraf网络流量分析仪凭借其出色的性能和易用性,正在快速占领市场。本文将为您深入解读AnaTraf,让您了解它是如何帮助企业高效管理网络的。 全流量回溯分…

苏州金龙荣获首届无人扫地机器人演示比赛“竞技领跑奖”

4月30日&#xff0c;2024年苏州市首届无人扫地机器人演示比赛在高新区思益街展开比拼。五家企业参赛在道路上实地比拼无人扫地机器人技术&#xff0c;通过清扫垃圾、识别路障等环节展现城市清洁的“未来场景”。经过角逐&#xff0c;苏州金龙的无人驾驶清扫车获得步道演示比赛“…

老旧房屋用电线路故障引起的电气火灾预防对策​

摘 要&#xff1a;在我国新农村建设方针指引下&#xff0c;农村地区的发展水平有了显著提高。在农村经济发展中&#xff0c;我们也要认识到其中存在的风险隐患问题&#xff0c;其中重要的就是火灾事故。火灾事故给农村发展带来的不利影响&#xff0c;不仅严重威胁到农村群众的生…

软件测试与管理-白盒测试-基本路径测试法

知识点&#xff1a; 1.原理 是在程序控制流图的基础上&#xff0c;通过分析控制构造的环路复杂性&#xff0c;导出基本可执行路径的集合&#xff0c;然后根据可执行路径进行测试用例设计的方法。此方法设计出的测试用例需保证被测程序的每个可执行语句至少执行一次。 2.步骤 &a…

连通“数据”,让制造变“聪明”

说起数据智能&#xff0c;你第一时间想到的是什么呢&#xff1f;是科技感十足的智慧城市&#xff1f;还是炫酷的人工智能景象&#xff1f; 数据作为企业的战略资产越来越受到重视&#xff0c;从最初的数据协助业务协同&#xff0c;转化为数据驱动业务&#xff0c;数据驱动运营…

组播应用:SW1、SW2、RT1、RT2、AC1运行PIM-SM

SW1、SW2、RT1、RT2、AC1运行PIM-SM,SW1 Vlan10为C-BSR和C-RP;SW1产品网络(PC1)启用组播,用VLC工具串流播放视频文件“1.mp4”,模拟组播源,设置此视频循环播放,组地址232.1.1.1,端口1234,实现总公司和分公司收看视频,用PC2测试。 一、SW1、SW2、RT1、RT2、AC1配置如…

CV每日论文--2024.5.7

1、Vibe-Eval: A hard evaluation suite for measuring progress of multimodal language models 中文标题&#xff1a;Vibe-Eval: 一个测量多模态语言模型进度的严格评估套件 简介&#xff1a;本文介绍了一种新的开放评估基准 Vibe-Eval,用于评估多模态对话模型的性能。 Vibe…

C++学习笔记——对仿函数的理解

文章目录 思维导图仿函数出现的逻辑仿函数使用上的巧妙 仿函数的本质仿函数的优势仿函数语法的巧妙 思维导图 仿函数出现的逻辑 我们在学习stack时会遇到一些新的问题&#xff0c;这些问题需要我们使用非类型模板参数去解决&#xff0c;即我们需要在设计类时需要有一个途径去快…

Mujoco210和Mujoco-py在 Ubuntu22.04 下的安装

mujoco和mujoco-py的关系&#xff1a;mujoco是一个物理引擎&#xff0c;主要应用于强化学习和最优化控制领域。mujoco-py是mujoco编程的 Python 接口&#xff0c;由OpenAI Gym开发&#xff0c;可以使用mujoco_py方便地调用mujoco的API。 mujoco官网&#xff1a; https://mujoco…

Elementui的el-footer标签使用报错

Elementui的el-footer标签使用报错 其余标签的使用没有报错信息 el-footer的报错信息 原因: ​ 警告信息表示 Vue 不识别 <el-footer> 解决方式: 在组件中进行引入和暴露

编程入门(六)【Linux系统基础操作二】

读者大大们好呀&#xff01;&#xff01;!☀️☀️☀️ &#x1f525; 欢迎来到我的博客 &#x1f440;期待大大的关注哦❗️❗️❗️ &#x1f680;欢迎收看我的主页文章➡️寻至善的主页 文章目录 &#x1f525;前言&#x1f680;文件与目录的操作命令cd change directory的缩…

代码随想录算法训练营Day12 | 二叉树理论基础、递归遍历、迭代遍历、统一迭代

今日收获&#xff1a; 二叉树的递归遍历二叉树的迭代遍历&#xff0c;中序的迭代法和前、后序不一样二叉树的统一迭代法主要是用了标记法来实现&#xff08;要处理的节点放入栈之后&#xff0c;紧接着放入一个空指针作为标记&#xff09; 二叉树理论基础篇 题目分类 题目分…

ICode国际青少年编程竞赛- Python-1级训练场-多变量应用

ICode国际青少年编程竞赛- Python-1级训练场-多变量应用 1、 a 1 b 2 for i in range(4):Spaceship.step(a)Dev.step(b)Dev.step(-b)a a 1b b 12、 a 2 b 5 for i in range(3):Spaceship.turnLeft()Spaceship.step(a)Spaceship.turnRight()Spaceship.step(b)a a …

在线民宿预约系统:景区住宿预订新体验

作者介绍&#xff1a;✌️大厂全栈码农|毕设实战开发&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。 &#x1f345;获取源码联系方式请查看文末&#x1f345; 推荐订阅精彩专栏 &#x1f447;&#x1f3fb; 避免错过下次更新 Springboot项目精选实战案例 更多项目…

简述 BIO 、NIO 模型

BIO : 同步阻塞I/O&#xff08;Block IO&#xff09; 服务器实现模式为每一个连接一个线程&#xff0c;即客户端有连接请求时服务器就需要启动一个线程进行处理&#xff0c;如果这个连接不做任何事情会造成不必要的线程开销&#xff0c;此处可以通过线程池机制进行优化。 impo…

分享5款PDF编辑软件

PDF编辑不易&#xff0c;有需要的朋友可以试试这5款专业软件&#xff0c;每一个都能直接在PDF文件上编辑&#xff0c;不同的软件对PDF可编辑的范围不同&#xff0c;大家可以按需求选用。 1.edge浏览器 Edge浏览器不仅是浏览网页的得力助手&#xff0c;还悄然成为了轻量级PDF管…
最新文章