基于SpringBoot+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

 一、前言介绍

信息化社会内需要与之针对性的信息获取途径,但是途径的扩展基本上为人们所努力的方向,由于站在的角度存在偏差,人们经常能够获得不同类型信息,这也是技术最为难以攻克的课题。针对民宿管理等问题,对民宿管理进行研究分析,然后开发设计出民宿管理系统以解决问题。

民宿管理系统主要功能模块包括系统用户管理、民宿资讯管理、房间类型、民宿信息、预定信息、申请退房、咨询信息等管理,采取面对对象的开发模式进行软件的开发和硬体的架设,能很好的满足实际使用的需求,完善了对应的软体架设以及程序编码的工作,采取MySQL作为后台数据的主要存储单元,采用Springboot框架、vue技术、Ajax技术进行业务系统的编码及其开发,实现了本系统的全部功能。本次报告,首先分析了研究的背景、作用、意义,为研究工作的合理性打下了基础。针对民宿管理系统 的各项需求以及技术问题进行分析,证明了系统的必要性和技术可行性,然后对设计系统需要使用的技术软件以及设计思想做了基本的介绍,最后来实现民宿管理系统和部署运行使用它。

二、系统分析

2.1 可行性分析 

技术性方面,采用当前主流的Springboot框架进行系统主体框架的搭建,前台使用jquery,ajax,实现前台页面的设计与美观调整,以上技术,均由本人经过系统学习,并且都是在课程设计中实践过的,可以使得开发更加便捷和系统。从技术角度看,这个系统是完全可以实现的。

实用性方面,本次设计的主要任务是在民宿管理系统 内实现:用户管理、民宿资讯管理、房间类型、民宿信息、预定信息、申请退房、咨询信息功能等,符合当前潮流的发展。从用户角度出发,同时也考虑系统运营成本和人力资源,采用网络上的便捷方式,实现线上业务,使得业务流程更系统,也更方便用户的体验,比较实用。

经济性方面,由于本课题中设计的民宿管理系统的主要目的是为了能够更加方便及快捷的进行民宿客房信息的查询管理及检索服务,也就是能够可以直接投入使用的信息化软件。系统的主要成本主要是集中在对使用数据后期继续维护及其管理更新这个操作上。但是一旦系统投入到实际的运行及使用之后就能够很好的提高信息查询检索的效率,同时也需要有效的保证查询者的信息方面的安全性,同时这个民宿管理系统所带来的实际应用方面的价值是远远的超过了实际系统进行开发与维护方面的成本,因此,从经济上来说开发这个软件是可行的。

2.2 功能需求分析

民宿管理系统的功能主要分为前台用户根据自己的需求进行注册登录,浏览房间信息并对需要的房间进行预订操作。后台系统管理员因职责的不同,分为管理员和商家用户,管理员主要对注册用户,民宿资讯,民宿信息,预订信息,退房信息进行处理。

用户用例图如下所示。

 基于SpringBoot+Vue民宿管理系统的设计与实现_第1张图片

商家用例图如下所示。 

基于SpringBoot+Vue民宿管理系统的设计与实现_第2张图片

管理员用例图如下所示。

基于SpringBoot+Vue民宿管理系统的设计与实现_第3张图片

2.2.1 前台用户功能 

前台用户可分为未注册用户需求和以注册用户需求。

未注册用户的功能如下:

注册账号:用户填写个人信息,并验证手机号码。

浏览民宿资讯:用户可以浏览主页面的民宿资讯来了解系统的最新民宿信息。

浏览民宿信息:用户可以搜索房间类型、民宿名称、商家名称进行查看房间的信息,并选中某个房间查看详情,例如:民宿名称、民宿规格、房间单价、房间数量等。

已注册用户的功能如下:

登录:根据账号密码进行登录操作。

维护个人信息:用户因个人信息的变更可以随时修改自己注册信息。

浏览评论信息:选中某间民宿可查看其用户的评论。

房间预订:用户根据自己的需求选中某个房间进行预订操作。

退房信息:用户可以在线进行退房操作。

申请退房:用户可以在线进行申请退房提交。

2.2.2 后台管理员功能 

管理员功能如下:

修改密码:管理员可以随时修改自己进入系统的登录密码,以保证系统的安全性。

管理普通管理员:对普通管理员进行管理。调动相关工作人员时可以添加或删除普通管理员。

民宿信息管理:对民宿信息进行维护,添加、删除、修改信息。

对预订信息进行处理:办理预订单审核等。

民宿资讯信息管理:发布、删除相关的民宿资讯信息。

用户管理:可以查看注册用户的信息,并对其进行管理。

公告信息管理:可以对民宿的公告信息进行管理。

轮播图管理:可以对轮播图信息进行管理。

房间类型:对房间信息进行分类。

2.3 非功能需求分析

首先主要考虑的是系统功能软件,在具体设计的环节上,是不是能够较好的满足各类用户的基本功能需求,如果不能较好的满足用户需求,那么这个系统的存在是没有价值的。软件系统的非功能性求分析,从7个方面展开,一个是性能分析,针对系统;一个是安全分析,针对系统,一个是完整度分析,针对系统,一个是可维护分析,针对系统,一个是可扩展性分析,针对系统,一个是适应业务的性能分析。面对民宿管理系统 存在的性能、安全、扩展、完整度等7个方面性能综合比对分析后发现,需要相应的非功能性需求分析。 

2.4 安全性需求分析 

2.4.1 系统的安全性 

安全性对每一个系统来说都是非常重要的。安全性很好的系统可以保护企业的信息和用户的信息不被窃取。提高系统的安全性不仅是对用户的负责,更是对企业的负责。尤其针对于民宿管理系统 来说,必须要有很好的安全性来保障整个系统。

系统具有对使用者有权限控制,针对角色的不通限制使用者的权限,以此来确保系统的安全性。

2.4.2 数据的安全性

数据库中的数据是从外界输入的,当数据的输入时,由于种种原因,输入的数据会无效,或者是脏数据。因此,怎样保证输入的数据符合规订 ,成为了数据库系统,尤其是多用户的关系数据库系统首要关注的问题。

因此,在写入数据库时,要保证数据完整性、正确性和一致性。 

2.5 数据流程分析 

对系统的数据流进行分析,系统的使用者分为二类,一般用户,管理员。系统主要对界面信息传送,登录信息的验证,注册信息的接收,用户各种操作的响应做处理。

系统顶层数据流图如下图所示。 

基于SpringBoot+Vue民宿管理系统的设计与实现_第4张图片

要判断用户是是什么身份,是根据登录的数据来判断后,跳转到对应的功能界面。在系统的内部用户就可以对数据进行操作,数据库中心就可以接收到系统传输的有效数据流来对数据sql语句进行对应操作。

系统底层数据流图如下图所示。

基于SpringBoot+Vue民宿管理系统的设计与实现_第5张图片

系统可以分为前台和后台两部分,每一种操作后系统都返回操作结果。前台和后台的数据连接主要通过数据库,既分别对数据库做不同的操作。

三、系统设计 

3.1 系统架构设计

本民宿管理系统的架构设计主要分为可以3层,主要有Web层,业务层,Model层。其中web层还包括View层和Controller层,Model层包括元数据扩展层和数据访问层。

系统架构如下图所示。

基于SpringBoot+Vue民宿管理系统的设计与实现_第6张图片

3.2 系统总体设计

民宿管理系统总体分为前台用户模块和后台管理员模块。

两个模块表现上是分别独立存在,但是访问的数据库是一样的。每一个模块的功能都是根据先前完成的需求分析,并查阅相关资料后整理制作的。

3.3 系统功能设计

登录模块:登录模块是进入系统的入口,所有用户必须登录后才能访问系统。登录需要输入用户名和密码,如果多次尝试登录需要输入验证码。登录时需要选择用户的角色,是一般用户还是管理员登录等。登录成功后,会通过数据库获取用户的权限,并跳转至用户的主页面。

管理员用户管理模块:管理员管理包括:管理员的添加,修改和删除操作。添加管理员时,先判断用户添加的管理员是否是admin(超级管理员),如果不是则添加成功。修改时候,如果是超级管理员,可以修改所有管理员的信息,如果是普通管理员,那么只能修改自己的信息。超级管理员可以删除自己以外的所有其他管理员,普通管理员不能执行删除管理员的操作。

咨询信息模块:用户可以在线咨询民宿信息,商家后台可直接与用户在线沟通。

民宿资讯模块:可分为民宿资讯浏览、民宿资讯检索、民宿资讯维护三个模块,管理员对民宿资讯有维护的权限,发布新的民宿资讯、更新已有的民宿资讯等。

民宿信息管理模块:民宿信息管理分为房间添加、修改和房间预订。房间信息由商家进行修改、添加、删除操作;房间预订由普通用户来执行。

3.4 数据库设计

根据前面的数据流程图,结合系统的功能模块设计,设计出符合系统的各信息实体。

系统ER图如下图所示。

基于SpringBoot+Vue民宿管理系统的设计与实现_第7张图片

四、系统实现

4.1注册模块的实现

用户在填写数据的时候必须与注册页面上的验证相匹配否则会注册失败,注册页面的表单验证是通过JavaScript进行验证的,用户名的长度必须在6到18之间,邮箱必须带有@符号,密码和密码确认必须相同,你输入的密码,系统会根据你输入密码的强度给出指定的值,电话号码和身份证号码必须要求输入格式与生活相符合,当你前台验证通过的时候你点击注册,表单会将你输入的值通过name值传递给后台并保存到数据库中。

用户注册流程图如下图所示。

基于SpringBoot+Vue民宿管理系统的设计与实现_第8张图片

用户注册界面如下图所示。

基于SpringBoot+Vue民宿管理系统的设计与实现_第9张图片

4.2 登录模块的实现

主要由两部分组成,登录前的登录界面以及登录后的用户功能界面。登录界面,要求用户输入用户名和密码,当用户名和密码其中一个输入为空时,给出提示“用户名,密码不能为空”。获取用户名和密码后到数据库中查找,如果用户名存在,以及对应的密码正确,则登录成功,否则登录失败。登录失败后给出提示,并把焦点停在文本框中。登录成功后将该次会话的全局变量username设置为用户名。登录成功后进入会员的功能模块,主要有会员基本信息修改,已经发布商品信息管理,发布信息,和退出功能。退出功能是清除全局变量username的值,并跳回到首页。

登录流程图如下图所示。

基于SpringBoot+Vue民宿管理系统的设计与实现_第10张图片

用户登录界面如下图所示。

基于SpringBoot+Vue民宿管理系统的设计与实现_第11张图片

4.3 民宿资讯管理模块的实现

如果民宿资讯的信息需要修改,管理员可以通过查询民宿资讯的基本信息来查询民宿资讯,查询民宿资讯是通过ajax技术来进行查询的,需要传递民宿资讯的标题、类型等参数然后在返回到该页面中,可以选中要修改或删除的那条信息,如果选中了超过一条数据,页面会挑一个窗口提醒只能选择一条数,如果没有选中数据会挑一个窗口题型必须选择一条数据。当选择确认修改的时候,后台会根据传过来的id到数据库查询,并将结果返回到修改页面中,可以在修改页面中修改刚刚选中的信息当点击确认的时候from表单会将修改的数据提交到后台并保存到数据库中,就是说如果提交的数据数据库中存在就修改,否则就保存。

民宿资讯展示界面如下图所示。

基于SpringBoot+Vue民宿管理系统的设计与实现_第12张图片

民宿资讯管理界面如下图所示。

基于SpringBoot+Vue民宿管理系统的设计与实现_第13张图片

4.4民宿信息管理模块的实现

房间预定功能整体流程:用户浏览民宿信息时,同时会显示房间的状态,系统会在其显示详细信息的页面时便会判断房间的状态,若房间状态为可预定,则会显示预定的链接按钮。在用户点击预定按钮时,会先通过拦截器判断用户是否登录,若未登录,会跳转至登录页面,提示用户先登录,若为登录用户就会跳转至填写预定信息的页面,填写好预定信息之后,点击提交按钮,预定成功之后返回提示信息,告知用户预定成功。

民宿预定流程图如下图所示。

基于SpringBoot+Vue民宿管理系统的设计与实现_第14张图片

民宿预定界面如下图所示。

基于SpringBoot+Vue民宿管理系统的设计与实现_第15张图片

预定管理界面如下图所示。

基于SpringBoot+Vue民宿管理系统的设计与实现_第16张图片

4.5 轮播图管理模块的实现

根据需求,管理员可对轮播图的信息进行管理。

轮播图管理流程图如下图所示。

基于SpringBoot+Vue民宿管理系统的设计与实现_第17张图片

轮播图管理页面设计效果如下图所示。 

基于SpringBoot+Vue民宿管理系统的设计与实现_第18张图片

五、系统测试

5.1 测试目的

对任何系统而言,测试都是必不可少的环节,测试可以发现系统存在的很多问题,所有的软件上线之前,都应该进行充足的测试之后才能保证上线后不会Bug频发,或者是功能不满足需求等问题的发生。下面分别从单元测试,功能测试和用例测试来对系统进行测试以保证系统的稳定性和可靠性。

5.2 功能测试

下表是民宿信息管理功能的测试用例,检测了民宿管理中对房间信息的增加,删除,修改,查询操作是否成功运行。观察系统的响应情况,得出该功能也达到了设计目标,系统运行正确。

前置条件;用户登录系统。

基于SpringBoot+Vue民宿管理系统的设计与实现_第19张图片

下表是预定管理功能的测试用例,检测了预定管理中预定单的操作是否成功运行。观察系统的响应情况,得出该功能也达到了设计目标,系统运行正确。

前置条件;用户登录系统。

基于SpringBoot+Vue民宿管理系统的设计与实现_第20张图片

六、部分核心代码

6.1用户注册的关键代码如下

/**
     * 注册
     * @param user
     * @return
     */
    @PostMapping("register")
    public Map signUp(@RequestBody User user) {
        // 查询用户
        Map 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;
}

6.2用户登录的关键代码如下

/**
     * 登录
     * @param data
     * @param httpServletRequest
     * @return
     */
    @PostMapping("login")
    public Map login(@RequestBody Map 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;
        Map map = new HashMap<>();
        if(username != null && "".equals(username) == false){
            map.put("username", username);
            resultList = service.select(map, new HashMap<>()).getResultList();
        }
        else if(email != null && "".equals(email) == false){
            map.put("email", email);
            resultList = service.select(map, new HashMap<>()).getResultList();
        }
        else if(phone != null && "".equals(phone) == false){
            map.put("phone", phone);
            resultList = service.select(map, new HashMap<>()).getResultList();
        }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 groupMap = new HashMap<>();
        groupMap.put("name",byUsername.getUserGroup());
        List groupList = userGroupService.select(groupMap, new HashMap<>()).getResultList();
        if (groupList.size()<1){
            return error(30000,"用户组不存在");
        }

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

        //查询用户审核状态
        if (!StringUtils.isEmpty(userGroup.getSourceTable())){
            String sql = "select examine_state from "+ userGroup.getSourceTable() +" WHERE user_id = " + byUsername.getUserId();
            String res = String.valueOf(service.runCountSql(sql).getSingleResult());
            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, "账号或密码不正确");
        }
}

6.3民宿资讯发布的关键代码如下 

 @PostMapping("/add")
    @Transactional
    public Map add(HttpServletRequest request) throws IOException {
        service.insert(service.readBody(request.getReader()));
        return success(1);
    }

    @Transactional
    public Map addMap(Map map){
        service.insert(map);
        return success(1);
}

    public Map 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 body){
        StringBuffer sql = new StringBuffer("INSERT INTO ");
        sql.append("`").append(table).append("`").append(" (");
        for (Map.Entry entry:body.entrySet()){
            sql.append("`"+humpToLine(entry.getKey())+"`").append(",");
        }
        sql.deleteCharAt(sql.length()-1);
        sql.append(") VALUES (");
        for (Map.Entry 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();
    }

6.4预定添加关键代码如下 

@RequestMapping(value = {"/avg_group", "/avg"})
	public Map avg(HttpServletRequest request) {
        Query count = service.avg(service.readQuery(request), service.readConfig(request));
        return success(count.getResultList());
}

七、总结与展望

随着计算机互联网技术的迅猛发展,各行各业都已经实现采用计算机相关技术对日益放大的数据进行管理。该课题是民宿管理系统为核心展开的,主要是为了实现民宿管理系统和用户在线预订客房的需求。

民宿管理系统的开发是以Springboot框架作为基础,在Eclipse平台上完成编码工作,系统整体为B/S架构,数据库系统使用MySQL。文中详细分析了民宿管理系统的研究背景、研究目的和意义、开发工具和相关技术以及系统需求、系统详细设计和系统测试等等一系列内容。系统实现了民宿管理系统所需的一些基本功能,并通过测试对这些实现的功能进行了完善,进而提高了系统整体的实用性。整个系统的开发过程中大量使用了Java相关的知识以及前端开发使用的html和javascript等,同时涉及到了很多开源框架和组件,例如后台系统中运用的MVVM架构、Freemarker模板引擎等,前端运用的UI框架等。

系统投入运行时,各功能均运行正常。系统的每个界面的操作符合常规逻辑,对使用者来说操作简单,界面友好。整个系统的各个功能设计合理,体现了人性化。

但是由于自己在系统开发过程中对一些用到的相关知识和技术掌握不够牢固,再加上自身开发经验欠缺,因此系统在有些方面的功能还不够完善,考虑的不够全面,因此整个系统还有待日后逐步完善。

你可能感兴趣的:(spring,boot,vue.js,java,spring)