【计算机毕业设计】基于SpringBoot+Vue网络云端日记本系统的设计与实现

目录

一、项目介绍 

二、项目主要技术 

三、网络云端日记本系统分析

3.1 系统功能分析

3.2 系统用例分析

四、系统详细设计与实现

4.1 登录模块

4.2 注册模块

4.3 用户管理模块

4.4 日记信息模块

4.5 备忘录信息模块

4.6 提醒信息模块

4.7 公告信息模块

4.8 日记信息统计

4.9 用户日记信息模块

五、实现代码

5.1 注册逻辑代码 

5.2 日记信息关键代码

一、项目介绍 

本设计主要实现集人性化、高效率、便捷等优点于一身的网络云端日记本系统，完成系统用户、分类管理、日记信息、备忘录信息、提醒信息、公告信息等功能模块。系统通过浏览器与服务器进行通信，实现数据的交互与变更。本系统通过科学的管理方式、便捷的服务提高了工作效率，减少了数据存储上的错误和遗漏。网络云端日记本系统使用Java语言，采用基于MVVM模式的搜springboot技术进行开发，使用 MyEclipse 2017 CI 10 编译器编写，数据方面主要采用的是微软的MySQL关系型数据库来作为数据存储媒介，配合Vue 技术完成系统的开发。

二、项目主要技术 

开发语言：Java
 
使用框架：spring boot
 
前端技术：JavaScript、Vue 、css3
 
开发工具：IDEA/MyEclipse/Eclipse、Visual Studio Code
 
数据库：MySQL 5.7/8.0
 
数据库管理工具：phpstudy/Navicat
 
JDK版本：jdk1.8
 
Maven: apache-maven 3.8.1-bin

三、网络云端日记本系统分析

3.1 系统功能分析

网络云端日记本系统的设计与实现是为了让使用者更加方便的进行管理员工相关联的一些信息，使用者查找管理的时候能够节省大量的时间和精力，有效减少不必要的查找时间。系统在功能上划分为管理员端以及系统用户这两大部分。

管理员端：

（1）个人资料：管理在登录以后可以修改自己的个人资料以及对自己账号登录的密码进行修改；

（2）系统用户：管理员可以对系统中所有的用户角色进行管控，包含了管理员以及系统用户这两种角色，如果需要添加新的用户，点击页面中的“添加”按钮根据提示输入上用户信息，点击“提交”以后在对应的用户界面就可以查看到了，可以点击用户后面的“删除”按钮直接删除某一用户。

（3）日记信息：管理员点击“日记信息”会显示出所有的日记信息，支持通过日记信息状态或者输入日记编号或者日记名称对日记信息进行查询，如果想要添加新的日记信息，点击“添加”按钮，输入相关信息，点击“提交”按钮就可以添加了，同时可以选择某一条日记信息，点击“删除”进行删除。

（4）备忘录信息：管理员点击“备忘录信息”会显示出所有的备忘录信息，支持输入标题名称或者用户信息对备忘录信息进行查询，如果想要添加新的备忘录信息，点击“添加”按钮，输入相关信息，点击“提交”按钮就可以添加了，同时可以选择某一条备忘录信息，点击“删除”进行删除，也可以点击后面的“提醒”按钮对备忘录信息的提醒信息进行更新维护；

（5）提醒信息：管理员点击“提醒信息”会显示出所有的提醒信息，支持通过提醒信息状态或者输入标题名称或者用户信息对提醒信息进行查询，如果想要添加新的提醒信息，点击“添加”按钮，输入相关信息，点击“提交”按钮就可以添加了，同时可以选择某一条提醒信息，点击“删除”进行删除。

（6）公告信息：点击“公告信息”这个按钮可以查看到系统中所有的公告信息，支持通过公告编号或者公告标题进行查询公告信息，如果想要添加新的公告信息，点击“添加”按钮然后根据提示输入公告信息，点击“提交”后，在公告信息界面就会显示新增的公告信息，可以点击某一公告信息查看公告信息的详情，也可以直接点击“删除”进行删除公告信息；

系统用户端：

（1）注册登录：当用户想要对系统中所实现的功能进行查询管理的时候，就必须进行登录到系统当中，如果没有账号的话，在登录界面，点击“注册”按钮就会跳转到注册的界面，根据提示填写好注册信息，添加提交，用户的信息在数据库中就添加完成了，然后再输入填写好的账号和密码进行登录；

（2）个人资料：学生在登录以后可以修改自己的个人资料以及对自己账号登录的密码进行修改；

（3）日记信息：管理员点击“日记信息”会显示出所有的日记信息，支持通过日记信息状态或者输入日记编号或者日记名称对日记信息进行查询，如果想要添加新的日记信息，点击“添加”按钮，输入相关信息，点击“提交”按钮就可以添加了，同时可以选择某一条日记信息，点击“删除”进行删除。

（4）备忘录信息：管理员点击“备忘录信息”会显示出所有的备忘录信息，支持通过标题名称或者用户信息或者用户姓名对备忘录信息进行查询，如果想要添加新的备忘录信息，点击“添加”按钮，输入相关信息，点击“提交”按钮就可以添加了，同时可以选择某一条备忘录信息，点击“删除”进行删除。

（5）公告信息：点击“公告信息”这个菜单，可以查看到系统中所有添加的公告信息，支持通过公告编号或者公告标题对公告信息进行查询，如果想要了解某一公告信息的详细信息，点击后面的“详情”会进入详情界面；

3.2 系统用例分析

网络云端日记本系统中系统用户角色用例图如图所示：

网络云端日记本系统中管理员角色用例图如图所示：

四、系统详细设计与实现

4.1 登录模块

管理员和用户在登录界面输入账号+密码，点击“登录”按钮，系统在用户数据库表中会对管理员和用户的账号进行匹配，账号+密码正确的话，就会登录到系统中各个用户的主管理界面，否则提示对应的信息，返回到登录的界面，其主界面展示如下图所示。

4.2 注册模块

注册模块满足用户部分，当用户想要进行用户相关信息的查询管理的时候，就必须进行登录，如果没有账号的话，在登录界面，点击“注册”按钮就会跳转到注册的界面，根据提示填写好注册信息，添加提交，注册的信息在数据库中就添加完成了，然后再输入填写好的账号和密码进行登录，其主界面展示如下图所示。

4.3 用户管理模块

管理员可以对系统中所有的用户角色进行管控，包含了管理员以及用户这两种角色，如果需要添加新的用户，点击页面中的“添加”按钮根据提示输入上用户信息，点击“提交”以后在对应的用户界面就可以查看到了，可以点击用户后面的“删除”按钮直接删除某一用户，这里以管理员用户为例。界面如下图所示。 

4.4 日记信息模块

管理员点击“日记信息”会显示出所有的日记信息，支持输入日记编号或者日记名称对日记信息进行查询，如果想要添加新的日记信息，点击“添加”按钮，输入相关信息，点击“提交”按钮就可以添加了，同时可以选择某一条日记信息，点击“删除”进行删除，界面如下图所示。

4.5 备忘录信息模块

管理员点击“备忘录信息”会显示出所有的备忘录信息，支持输入标题名称或者用户信息或者用户姓名对备忘录信息进行查询，如果想要添加新的备忘录信息，点击“添加”按钮，输入相关信息，点击“提交”按钮就可以添加了，同时可以选择某一条备忘录信息，点击“删除”进行删除，也可以点击后面的“提醒”按钮对备忘录信息的提醒信息进行更新维护。界面如下图所示。

4.6 提醒信息模块

管理员和用户点击“提醒信息”这个按钮可以查看到系统中的提醒信息，支持通过标题名称或者用户信息或者用户性别进行查询提醒信息，如果想要添加新的提醒信息，点击“添加”按钮然后根据提示输入提醒信息，点击“提交”后，在提醒信息界面就会显示新增的提醒信息，可以点击某一提醒信息查看提醒信息的详情，也可以直接点击“删除”进行删除提醒信息。界面如下图所示。

4.7 公告信息模块

点击“公告信息”这个菜单，可以查看到系统中所有添加的公告信息，支持通过公告编号或者公告标题对公告信息进行查询，只有管理员用户可以添加新的公告信息，点击“添加”按钮，根据提示输入公告信息，点击“提交”按钮，新的公告信息就在系统中显示出来了，也可以对添加的公告信息进行删除。界面如下图所示。

4.8 日记信息统计

4.9 用户日记信息模块

五、实现代码

5.1 注册逻辑代码 

/**
     * 注册
     * @param user
     * @return
     */
    @PostMapping("register")
    public Map<String, Object> signUp(@RequestBody User user) {
        // 查询用户
        Map<String, String> query = new HashMap<>();
        query.put("username",user.getUsername());
        List list = service.select(query, new HashMap<>()).getResultList();
        if (list.size()>0){
            return error(30000, "用户已存在");
        }
        user.setUserId(null);
        user.setPassword(service.encryption(user.getPassword()));
        service.save(user);
        return success(1);
}
 
/**
     * 用户ID：[0,8388607]用户获取其他与用户相关的数据
     */
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "user_id")
    private Integer userId;
 
    /**
     * 账户状态：[0,10](1可用|2异常|3已冻结|4已注销)
     */
 
    @Basic
    @Column(name = "state")
    private Integer state;
 
    /**
     * 所在用户组：[0,32767]决定用户身份和权限
     */
 
    @Basic
    @Column(name = "user_group")
    private String userGroup;
 
    /**
     * 上次登录时间：
     */
 
    @Basic
    @Column(name = "login_time")
    private Timestamp loginTime;
 
    /**
     * 手机号码：[0,11]用户的手机号码，用于找回密码时或登录时
     */
 
    @Basic
    @Column(name = "phone")
    private String phone;
 
    /**
     * 手机认证：[0,1](0未认证|1审核中|2已认证)
     */
 
    @Basic
    @Column(name = "phone_state")
    private Integer phoneState;
 
    /**
     * 用户名：[0,16]用户登录时所用的账户名称
     */
 
    @Basic
    @Column(name = "username")
    private String username;
 
    /**
     * 昵称：[0,16]
     */
 
    @Basic
    @Column(name = "nickname")
    private String nickname;
 
    /**
     * 密码：[0,32]用户登录所需的密码，由6-16位数字或英文组成
     */
 
    @Basic
    @Column(name = "password")
    private String password;
 
    /**
     * 邮箱：[0,64]用户的邮箱，用于找回密码时或登录时
     */
 
    @Basic
    @Column(name = "email")
    private String email;
 
    /**
     * 邮箱认证：[0,1](0未认证|1审核中|2已认证)
     */
 
    @Basic
    @Column(name = "email_state")
    private Integer emailState;
 
    /**
     * 头像地址：[0,255]
     */
 
    @Basic
    @Column(name = "avatar")
    private String avatar;
 
    /**
     * 创建时间：
     */
 
    @Basic
    @Column(name = "create_time")
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    private Timestamp createTime;
 
    @Basic
    @Transient
    private String code;
}

5.2 日记信息关键代码

@PostMapping("/add")
    @Transactional
    public Map<String, Object> add(HttpServletRequest request) throws IOException {
        service.insert(service.readBody(request.getReader()));
        return success(1);
    }
 
    @Transactional
    public Map<String, Object> addMap(Map<String,Object> map){
        service.insert(map);
        return success(1);
}
 
    public Map<String,Object> readBody(BufferedReader reader){
        BufferedReader br = null;
        StringBuilder sb = new StringBuilder("");
        try{
            br = reader;
            String str;
            while ((str = br.readLine()) != null){
                sb.append(str);
            }
            br.close();
            String json = sb.toString();
            return JSONObject.parseObject(json, Map.class);
        }catch (IOException e){
            e.printStackTrace();
        }finally{
            if (null != br){
                try{
                    br.close();
                }catch (IOException e){
                    e.printStackTrace();
                }
            }
        }
        return null;
}
 
    public void insert(Map<String,Object> body){
        StringBuffer sql = new StringBuffer("INSERT INTO ");
        sql.append("`").append(table).append("`").append(" (");
        for (Map.Entry<String,Object> entry:body.entrySet()){
            sql.append("`"+humpToLine(entry.getKey())+"`").append(",");
        }
        sql.deleteCharAt(sql.length()-1);
        sql.append(") VALUES (");
        for (Map.Entry<String,Object> entry:body.entrySet()){
            Object value = entry.getValue();
            if (value instanceof String){
                sql.append("'").append(entry.getValue()).append("'").append(",");
            }else {
                sql.append(entry.getValue()).append(",");
            }
        }
        sql.deleteCharAt(sql.length() - 1);
        sql.append(")");
        log.info("[{}] - 插入操作：{}",table,sql);
        Query query = runCountSql(sql.toString());
        query.executeUpdate();
    }