基于Springboot vue 小说网站系统的设计与实现

博主介绍：专注于Java（springboot  ssm 等开发框架） vue  .net  php python(flask Django)  小程序 等诸多技术范畴和毕业项目实战、企业信息化系统建设，从业十五余年开发设计教学工作
☆☆☆ 出色专栏保举订阅☆☆☆☆☆否则下次找不到哟
我的博客空间发布了1400+毕设题目 方便大家学习使用
感兴趣的可以先收藏起来，还有大家在毕设选题，项目以及论文编写等相关题目都可以给我留言咨询，盼望资助更多的人
文末有源码下载地址
  系统实现预览

   

• 系统设计   
  
  
  • 系统架构设计
    
  
  

  小说网站采用三层开发设计模式，分为：用户界面层，业务逻辑层和数据访问层。用户界面层用来和用户交互，业务逻辑层负责业务的处理和各层之间的数据的转达；数据访问层负责对数据库的访问和检索。
  系统的架构图如下图所示。
  

  

图4-1 系统架构图

  系统各层之间的调用过程如下：
  （1）用户通过用户界面层访问系统，向系统提交哀求，界面层对哀求进行初步的处理和包装，并判断是否要与业务逻辑层进行交互。
  （2）业务逻辑层接收来自界面层的哀求，对哀求进行数据处理。然后调用数据访问层来实现数据库访问，数据访问层访问数据库，将数据读出并返回给逻辑层。
  （3）逻辑层将处理的结果，返回给界面层。界面层加以处理呈现给用户。
  

• 
  
  • 系统功能布局
    
  
  

  进入系统后首先要进行登录，验证你的身份，赋予你差别的权限。当你成功登录后，页面会有多个板块，分别是系统用户管理、小说资讯管理、小说分类管理、在线讨论管理、小说中心管理、系统管理。里面界面简朴易懂，根据标示可以直接进行方便快捷的操作。
  系统功能布局图如下所示。
  

  

图4-2系统功能布局图

  

• 
  
  • 功能模块设计
    
  
  

  管理员账户的根本信息管理。主要提供管理员账户的根本信息录入、删除、维护和查询等功能，包罗：
  管理员录入管理员账户根本信息；
  管理员更新、增长及删除管理员账户根本信息；
  用户根据管理员账户 ID 查询根本信息；
  系统管理员更改个人暗码；
  
  留言的根本信息管理。主要提供留言的根本信息录入、修改和查询功能，包罗：
  用户录入留言根本信息；
  管理员更新、增长及删除留言根本信息；
  
  评论的根本信息管理。主要提供评论的根本信息录入、修改和查询功能，包罗：
  用户录入评论根本信息；
  管理员更新、增长及删除评论根本信息；
  管理员根据评论 ID 查询评论根本信息；
  
  小说分类的根本信息管理。主要是提供小说分类的根本信息录入、维护和查询功能，包罗：
  用户录入小说分类根本信息；
  用户更新、增长及删除小说分类根本信息；
  用户根据小说分类 ID 查询小说分类根本信息；
  
  小说的根本信息管理。主要提供小说的根本信息录入、删除、维护和查询功能， 包罗：
  管理员录入小说信息；
  管理员更新、增长小说根本信息；
  管理员根据小说 ID 查询小说根本信息；
  用户根据个人信息导航栏查询小说信息；
  
  

• 
  
  • 数据库设计
    
  
  

  一个好的系统它的背景数据库肯定要考虑的全面，这和我们制作房子一个概念，房子不是随心所欲建起来的，一切都是在合理设计的底子是实现的，地基打牢固了房子才能建的更高。数据库如果设计的很合理，而且每个方面都能考虑到了那么这个系统才能不会出现大的题目。
  

• 
  
  • 
    
    • 概念模型设计
      
    
    
  
  

  本系统在数据库中存放了多张表，分别是用户表、评论表、小说资讯表、小说分类表、小说中心表。
  系统的主要实体间关系E-R图如下图所示。
  

  

图4-7系统E-R图

  

• 
  
  • 
    
    • 逻辑布局设计
      
    
    
  
  

  此环节把概念变化成数据。由于整个数据库所处理的信息过多，就只展示几个表。
  

名称	类型	长度	不是null	主键	注释
user_registration_id	int	11	是	是	用户注册ID
gender	varchar	64	否	否	性别
examine_state	varchar	16	是	否	审核状态
recommend	int	11	是	否	智能保举
user_id	int	11	是	否	用户ID
create_time	datetime	0	是	否	创建时间
update_time	timestamp	0	是	否	更新时间

  

  

名称	类型	长度	不是null	主键	注释
novel_classification_id	int	11	是	是	小说分类ID
novel_type	varchar	64	否	否	小说类型
recommend	int	11	是	否	智能保举
create_time	datetime	0	是	否	创建时间
update_time	timestamp	0	是	否	更新时间

  

  

名称	类型	长度	不是null	主键	注释
novel_center_id	int	11	是	是	小说中心ID
novel_number	varchar	64	否	否	小说编号
novel_type	varchar	64	否	否	小说类型
novel_name	varchar	64	否	否	小说名称
novel_download	varchar	255	否	否	小说下载
author	varchar	64	否	否	作者
time_to_market	date	0	否	否	上市时间
cover	varchar	255	否	否	封面
introduction_to_the_novel	text	0	否	否	小说简介
novel_content	longtext	0	否	否	小说内容
hits	int	11	是	否	点击数
praise_len	int	11	是	否	点赞数
recommend	int	11	是	否	智能保举
create_time	datetime	0	是	否	创建时间
update_time	timestamp	0	是	否	更新时间

  

  

名称	类型	长度	不是null	主键	注释
forum_id	mediumint	8	是	是	论坛id
display	smallint	5	是	否	排序
user_id	mediumint	8	是	否	用户ID
nickname	varchar	16	否	否	昵称：[0,16]
praise_len	int	10	否	否	点赞数
hits	int	10	是	否	访问数
title	varchar	125	是	否	标题
keywords	varchar	125	否	否	关键词
description	varchar	255	否	否	描述
url	varchar	255	否	否	来源地址
tag	varchar	255	否	否	标签
img	text	0	否	否	封面图
content	longtext	0	否	否	正文
create_time	timestamp	0	是	否	创建时间：
update_time	timestamp	0	是	否	更新时间：
avatar	varchar	255	否	否	发帖人头像：
type	varchar	64	是	否	论坛分类

  

  

名称	类型	长度	不是null	主键	注释
hits_id	int	10	是	是	点赞ID：
user_id	int	11	是	否	点赞人：
create_time	timestamp	0	是	否	创建时间：
update_time	timestamp	0	是	否	更新时间：
source_table	varchar	255	否	否	来源表：
source_field	varchar	255	否	否	来源字段：
source_id	int	10	是	否	来源ID：

  

  

名称	类型	长度	不是null	主键	注释
upload_id	int	11	是	是	上传ID
name	varchar	64	否	否	文件名
path	varchar	255	否	否	访问路径
file	varchar	255	否	否	文件路径
display	varchar	255	否	否	表现次序
father_id	int	11	否	否	父级ID
dir	varchar	255	否	否	文件夹
type	varchar	32	否	否	文件类型

  

  

• 
  
  • 
    
    • 数据库连接设计
      
    
    
  
  

  通过Mysql库和Mysqli库函数连接。这种方法是Java连接MySQL经常使用的方法，不管是从效率上照旧易用性来说，它都比用ODBC接口连接好。
  Java存取mysql数据库的四个步骤是：
  （1）建立连接：mysql_connect ();
  （2）操纵数据库：mysql_select_db();返回布尔型数据值
  （3）操纵数据库中的数据：mysql_query ();
  （4）关闭连接：mysql_close ();
  数据库连接代码如下所示。
  
  

• 系统实现   
  
  
  • 登录模块的实现
    
  
  

该登录模块利用js进行设计，JavaScript函数CheckSubmit()对输入框是否为空进行验证，使用js的技术结合Mysql数据库的查询语句进行登录信息的验证。首先从文本框中分别获得账号user_name和暗码user_pw，使用Sql语句“select * from t_user where user_name=‘”+user_name+“’ and user_pw=‘”+user_pw+“’”将查询结果赋给rs结果集，若mysql_query()返回值为空，表现数据库找不到该用户数据，若mysql_query()返回值不为空，则表现登录成功，进入主界面。
用户登录流程图如下所示。

图5-1用户登录流程

用户登录流程：用户只有输入正确的用户名和暗码才会成功进入系统，用户输入用户名暗码后点击登录按钮，系统会进行校验该用户名是否存在，如果用户名与暗码不匹配或者用户名不存在，则返回主界面。
系统登录界面如下图所示。

图5-2系统登录界面

登录功能的逻辑代码如下所示。
* 登录
     * @param data
     * @param httpServletRequest
     * @return
     */
    @PostMapping("login")
    public Map<String, Object> login(@RequestBody Map<String, String> data, HttpServletRequest httpServletRequest) {
        log.info("[执行登录接口]");

        String username = data.get("username");
        String email = data.get("email");
        String phone = data.get("phone");
        String password = data.get("password");

        List resultList = null;
        QueryWrapper wrapper = new QueryWrapper<User>();
        Map<String, String> map = new HashMap<>();
        if(username != null && "".equals(username) == false){
            map.put("username", username);
            resultList = service.selectBaseList(service.select(map, new HashMap<>()));
        }
        else if(email != null && "".equals(email) == false){
            map.put("email", email);
            resultList = service.selectBaseList(service.select(map, new HashMap<>()));
        }
        else if(phone != null && "".equals(phone) == false){
            map.put("phone", phone);
            resultList = service.selectBaseList(service.select(map, new HashMap<>()));
        }else{
            return error(30000, "账号或暗码不能为空");
        }
        if (resultList == null || password == null) {
            return error(30000, "账号或暗码不能为空");
        }
        //判断是否有这个用户
        if (resultList.size()<=0){
            return error(30000,"用户不存在");
        }

        User byUsername = (User) resultList.get(0);


        Map<String, String> groupMap = new HashMap<>();
        groupMap.put("name",byUsername.getUserGroup());
        List groupList = userGroupService.selectBaseList(userGroupService.select(groupMap, new HashMap<>()));
        if (groupList.size()<1){
            return error(30000,"用户组不存在");
        }

        UserGroup userGroup = (UserGroup) groupList.get(0);

        //查询用户审核状态
        if (!StringUtils.isEmpty(userGroup.getSourceTable())){
            String res = service.selectExamineState(userGroup.getSourceTable(),byUsername.getUserId());
            if (res==null){
                return error(30000,"用户不存在");
            }
            if (!res.equals("已通过")){
                return error(30000,"该用户审核未通过");
            }
        }

        //查询用户状态
        if (byUsername.getState()!=1){
            return error(30000,"用户非可用状态，不能登录");
        }

        String md5password = service.encryption(password);
        if (byUsername.getPassword().equals(md5password)) {
            // 存储Token到数据库
            AccessToken accessToken = new AccessToken();
            accessToken.setToken(UUID.randomUUID().toString().replaceAll("-", ""));
            accessToken.setUser_id(byUsername.getUserId());
            tokenService.save(accessToken);

            // 返回用户信息
            JSONObject user = JSONObject.parseObject(JSONObject.toJSONString(byUsername));
            user.put("token", accessToken.getToken());
            JSONObject ret = new JSONObject();
            ret.put("obj",user);
            return success(ret);
        } else {
            return error(30000, "账号或暗码不正确");
        }
}


    public String select(Map<String,String> query,Map<String,String> config){
        StringBuffer sql = new StringBuffer("select ");
        sql.append(config.get(FindConfig.FIELD) == null || "".equals(config.get(FindConfig.FIELD)) ? "*" : config.get(FindConfig.FIELD)).append(" ");
        sql.append("from ").append("`").append(table).append("`").append(toWhereSql(query, "0".equals(config.get(FindConfig.LIKE))));
        if (config.get(FindConfig.GROUP_BY) != null && !"".equals(config.get(FindConfig.GROUP_BY))){
            sql.append("group by ").append(config.get(FindConfig.GROUP_BY)).append(" ");
        }
        if (config.get(FindConfig.ORDER_BY) != null && !"".equals(config.get(FindConfig.ORDER_BY))){
            sql.append("order by ").append(config.get(FindConfig.ORDER_BY)).append(" ");
        }
        if (config.get(FindConfig.PAGE) != null && !"".equals(config.get(FindConfig.PAGE))){
            int page = config.get(FindConfig.PAGE) != null && !"".equals(config.get(FindConfig.PAGE)) ? Integer.parseInt(config.get(FindConfig.PAGE)) : 1;
            int limit = config.get(FindConfig.SIZE) != null && !"".equals(config.get(FindConfig.SIZE)) ? Integer.parseInt(config.get(FindConfig.SIZE)) : 10;
            sql.append(" limit ").append( (page-1)*limit ).append(" , ").append(limit);
        }
        log.info("[{}] - 查询操作，sql: {}",table,sql);
        return sql.toString();
}

    public List selectBaseList(String select) {
        List<Map<String,Object>> mapList = baseMapper.selectBaseList(select);
        List<E> list = new ArrayList<>();
        for (Map<String,Object> map:mapList) {
            list.add(JSON.parseObject(JSON.toJSONString(map),eClass));
        }
        return list;
}

• 
  
  • 用户子系统模块的实现     
    
    
    • 用户首页模块
      
    
    
  
  

在欣赏器的地址栏里输入http://localhost:3306/index.Java 地址，就可以跳转到小说网站的首页，首页是由4个页面组成的，包罗top、left、down和center等页面，这里也是欣赏者访问系统的入口，通过@ include引入。
首页载入流程图如下所示。

图5-3首页载入流程

首页载入流程：系统先连接数据库，表现界面参数初始化，读取数据库的数据表，读取html表现模板，对数据按添加时间排序，按照模板设计位置表现数据，革新表现界面，断开数据库连接。
首页如下图所示。

图5-4首页界面

此中载入首页的主要代码如下。

• 
  
  • 
    
    • 用户注册模块
      
    
    
  
  

系统的用户通过自行注册天生，在系统首页点击用户注册菜单，系统跳转到对应的注册页面。点击重置按钮，清空所填数据，点击注册按钮完成注册。
用户注册流程图如下所示。

图5-5用户注册流程

注册个人信息实现流程为：填写个人信息，系统使用JQuery选择器获取在网页中输入的注册信息，再对联系方式、登录暗码等信息进行验证，验证通事后用Ajax异步哀求方式向服务器发送哀求并把数据传送到背景，然后验证用户名是否已存在，如果已存在则注册失败提示“用户名已存在”；如果用户表中没有该用户名则把用户信息加入数据库，把操作状态以json字符串方式返回到前台。Ajax哀求成功接收到返回的数据时会触发成功回调函数，然后剖析返回的json字符串，系统根据返复书息弹出提示框，注册成功后返回登录页。
用户注册界面如下图所示。

图5-5用户注册界面

用户注册页面的逻辑代码如下。
 * 注册
     * @return
     */
    @PostMapping("register")
    public Map<String, Object> signUp(HttpServletRequest request) throws IOException {
        // 查询用户
        Map<String, String> query = new HashMap<>();
        Map<String,Object> map = service.readBody(request.getReader());
        query.put("username",String.valueOf(map.get("username")));
        List list = service.selectBaseList(service.select(query, new HashMap<>()));
        if (list.size()>0){
            return error(30000, "用户已存在");
        }
        map.put("password",service.encryption(String.valueOf(map.get("password"))));
        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){
        E entity = JSON.parseObject(JSON.toJSONString(body),eClass);
        baseMapper.insert(entity);
        log.info("[{}] - 插入操作：{}",entity);
}

• 
  
  • 
    
    • 评论模块
      
    
    
  
  

用户给小说添加评论，包罗评分，评论人，评论内容等，在pinglunadd.Java实现评论的逻辑添加，管理员管理系统的所有评论信息，在pinglun_list.Java实现评论的管理。
评论流程图如下所示。

图5-6信息评论流程

用户登录成功后，欣赏小说页面，输入评论语，添加该评论，修改评论，返回评论相关界面。
评论添加界面如下图所示。

图5-7评论添加界面

代码文档下载获取

https://download.csdn.net/download/qq_41221322/89799546

   

大家点赞、收藏、关注、评论啦  其他的定制服务  下方联系卡片↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 或者私信作者

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。