基于Vue.js的学习成就收集展示系统的设计与实现

---

前言

这次研究做了一个基于 Vue.js 的学习成就收集展示系统，主要是为了解决教育领域学习成果管理和展示的问题。我们看了看国内外的类似系统，发现了一些功能上的不足和用户体验上的问题，然后针对这些问题做了设计。
系统用了前后端分离的架构。前端用的是 Vue.js 框架，用了组件化开发、数据绑定和虚拟 DOM 技术，还结合了 Element-UI 组件库，做了一个响应快、交互好的用户界面，实现了学习成就查看、个人中心管理和成就分享这些功能，用起来挺方便。后端用的是 Spring Boot 框架，整合了 Spring Data JPA 和 MySQL 数据库保存数据。

一、项目介绍

开发语言：Java
框架：springboot
JDK版本：JDK1.8
服务器：tomcat7
数据库：mysql
数据库工具：Navicat11
开发软件：eclipse/myeclipse/idea
Maven包：Maven

二、功能介绍

用户功能​
学习成就查看：登录后在个人页面查看课程证书、考试成绩、竞赛获奖等信息，可按时间或类型筛选。​
个人中心管理：可更改头像、更新简介、设置隐私权限、查看学习成就统计分析。​
管理员功能​
学习成就管理：审核用户成就并录入数据库，统计分析生成报表。​
成就分类管理：按多种方式分类成就，可进行添加、修改、删除分类标签操作。​
用户管理：审核注册用户，对违规用户封禁、解封，查看用户详细信息。​
管理员管理：增添新管理员，修改权限，删除不必要账号。​
轮播图管理：更新轮播图内容，设置展示顺序和切换时间。

用户权限：人信息管理：用户可查看、编辑基本信息，如姓名、联系方式等，还能上传或更换头像。学习成就处理：用户能添加、编辑、删除成就记录，填写名称、时间、学科等信息并上传证明文件，也可对成就进行分类管理。​
管理员权限：统全局管控：管理员可修改系统配置参数，优化性能，主导版本更新与维护。用户管理：管理员可创建新用户，查看用户信息，对违规用户进行冻结、删除等操作。学习成就管理：管理员可审核用户成就信息，进行批量导入、导出等操作，必要时可修改或删除成就数据。成就分类与资源管理：管理员负责构建、维护成就分类体系，管理学习资源库，设置资源访问权限。系统安全维护：管理员可查看操作日志，制定安全策略，监控漏洞并采取防护措施。​
明确划分用户和管理员权限，可保障系统安全高效运行，满足不同用户操作需求，助力教育教学与学习成果管理。。

三、核心代码

部分代码：

package com.example.controller;

import cn.hutool.core.util.StrUtil;
import cn.hutool.crypto.SecureUtil;
import com.example.common.Result;
import com.example.common.ResultCode;
import com.example.entity.Caiwu;
import com.example.exception.CustomException;
import com.example.service.CaiwuService;
import com.example.utils.MapWrapperUtils;
import com.example.utils.jwt.JwtUtil;
import com.example.vo.CaiwuVo;
import org.springframework.beans.BeanUtils;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@RestController
@RequestMapping(value = "/caiwu")
public class CaiwuController {

    @Resource
    private CaiwuService caiwuService;

    @PostMapping
    public Result<Caiwu> add(@RequestBody CaiwuVo caiwu) {
        caiwuService.add(caiwu);
           return Result.success(caiwu);
    }
	
	

    @PostMapping("/deleteList")
    public Result<Caiwu> deleteList(@RequestBody CaiwuVo caiwu) {
        caiwuService.deleteList(caiwu.getList());
        return Result.success();
    }

    @DeleteMapping("/{id}")
    public Result delete(@PathVariable Long id) {
        caiwuService.delete(id);
        return Result.success();
    }

    @PutMapping
    public Result update(@RequestBody CaiwuVo caiwu) {
        caiwuService.update(caiwu);
        return Result.success();
    }

    @GetMapping("/{id}")
    public Result<Caiwu> detail(@PathVariable Integer id) {
        Caiwu caiwu = caiwuService.findById(id);
        return Result.success(caiwu);
    }

    @GetMapping
    public Result<List<Caiwu>> all() {
        return Result.success(caiwuService.list());
    }

    @PostMapping("/page")
    public Result<CaiwuVo> page(@RequestBody CaiwuVo caiwuVo) {
        return Result.success(caiwuService.findPage(caiwuVo));
    }
	    @PostMapping("/login")
    public Result login(@RequestBody Caiwu caiwu, HttpServletRequest request) {
        if (StrUtil.isBlank(caiwu.getZhanghao()) || StrUtil.isBlank(caiwu.getMima())) {
            throw new CustomException(ResultCode.PARAM_LOST_ERROR);
        }
        Caiwu login = caiwuService.login(caiwu);
//        if(!login.getStatus()){
//            return Result.error("1001","状态限制，无法登录系统");
//        }
        if(login != null) {
            HashMap hashMap = new HashMap();
            hashMap.put("user", login);
            Map<String, Object> map = MapWrapperUtils.builder(MapWrapperUtils.KEY_USER_ID,caiwu.getId());
            String token = JwtUtil.creatToken(map);
            hashMap.put("token", token);
            return Result.success(hashMap);
        }else {
            return Result.error();
        }
    }
    @PutMapping("/updatePassword")
    public Result updatePassword(@RequestBody Caiwu info, HttpServletRequest request) {
        Caiwu caiwu = caiwuService.findById(info.getId());
        String oldPassword = SecureUtil.md5(info.getMima());
        if (!oldPassword.equals(caiwu.getMima())) {
            return Result.error(ResultCode.PARAM_PASSWORD_ERROR.code, ResultCode.PARAM_PASSWORD_ERROR.msg);
        }
        info.setMima(SecureUtil.md5(info.getNewPassword()));
        Caiwu caiwu1 = new Caiwu();
        BeanUtils.copyProperties(info, caiwu1);
        caiwuService.update(caiwu1);
        return Result.success();
    }
}

四、效果图

源码获取

下方名片联系我即可！！


大家点赞、收藏、关注、评论啦 、查看👇🏻获取联系方式👇🏻