JavaWeb实习总结（Springboot + vue 前后端分离）

KTV运营平台

一、系统设计概述

1、设计目的

该系统设计的目的在于使用web技术开发一个平台系统用于线下KTV门店运营管理，旨在对日常订单进行登记和门店会员的注册管理。传统的书面账单效率低下，该系统能提高KTV前台的工作效率。

2、设计思想

该系统将KTV运营所需要的数据存储在数据库中，利用网页进行交互，因此页面设计简洁和美观很重要，为了让后台响应良好，需使用框架来辅助开发

 

二、系统需求分析

1、功能需求

登录功能：因为这个系统是交给前台服务员去操作的，因此只需在数据库中添加一个一个管理员用户即可，无需注册功能。

查询包间功能：查询数据库中存储包间信息的表，将包间状态，价格，等信息已表格的形式展示出来。

包间登记功能：该功能包括包间登记信息展示和添加新的登记信息功能，登记信息展示有登记人姓名，电话，包间编号等，每个包间编号绑定一条记录，对于已经完成付款的顾客可以对该记录进行删除操作；顾客来消费可以对其做登记，并添加一条消费记录到账单里面。

酒水存量功能：该功能可以查询本店酒水库存，并用于增减操作。

 

会员功能：该功能包括会员数据表展示、会员查询和会员注册。每个会员拥有系统分配的唯一的账号，结算的时候给予相应的折扣

账单功能：该功能可以查询最近的所有账单记录，每条记录包括订单编号、包间编号、总消费和付款状态。通过查询结算包间的编号来完成离店支付。

 

2、可行性分析

技术可行性：计算机配置够高，有足够的空间可以安装运行平台、数据库和各类编程工具，在编程环境上提供了可靠的支持；在编程人员方面，可以运用以前所学各种计算机开发软件的计算机知识和管理知识，加上不断的学习，未系统的开发提供了必要的技术保障。

经济可行性：本系统采用Spring boot后台框架和vue前端框架，开源，免费，登入给予Web的KTV运营平台即可进行操作，方便快捷。

三、系统设计的基本原理和采用的主要方法与技术

1、基本原理：

本系统是基于web开发，利用Java和数据库技术对前台数据进行操作的一个集成网页系统，利用前后端分离技术进行跨域操作，将后台数据封装成JSON数据以URL向前端发送，前端通过本地域名和端口号获取数据，前端操作的数据又可以通过端口号发回后端。

2、主要方法和技术：

本系统前端采用Vue框架进行页面设计，其中在Vue里面又利用了基于Vue封装的组件库Element-ui对页面进行美化，页面设计部分大部分模块采用了Element-ui的组件进行修改组装，最终呈现出美观的页面；

后端采用Spring boot框架和Mybatis-Plus数据库框架，其中Spring是Java平台上的轻量开源框架，提供具有翻转特性的容器，Spring boot是基于Spring4.0设计，不仅继承了Spring框架原有的优秀特性，而且还通过简化配置来进一步简化了Spring应用的整个搭建和开发过程；Mybatis-Plus(MP)框架是Mybatis的增强版，在Mybatis的基础上只做增强，不做改变，简化开发，提高效率，其中Mybatis-Plus，使用的内置的代码生成工具，采用代码或者 Maven 插件可快速生成 Mapper 、 Model 、 Service 、 Controller 层代码，该分层思想满足MVC的设计模式，模块层，视图层和控制层自动生成，在控制层调用服务层接口实现一系列前后端交互操作，在服务层实现类写具体代码实现。Mybatis-Plus框架结构如下：

 

 

四、本人在此次实习负责的系统模块设计与实现。

本人在该次实习中属于个人完全开发，系统全部的模块设计均由我本人设计并实现，所有的前后台数据交互均使用Vue里面封装好的组件axios对数据进行接受与发送，我设计的模块有：

1、登录模块：该模块页面较简洁，我个人追求一切从简，从配色方面下了一番功夫，登录校验功能在后台实现。

 

2、主页模块：该模块页面设计灵感来源于以前做过的一个医院管理系统，主打黑黄配色，子页面配上淡淡的蓝色，简洁美观。主页主要由最左边导航栏和右边子页面组成，信息交互主要在子页面进行，通过绑定路由到每一个导航栏，将每一个子页面与导航栏一一对应，实现整体页面不刷新，局部刷新的功能，导航栏采用Element-ui的样式。

 

 

其中主页模块又包含五个功能模块，分别为：

3、包间查询模块，该模块实现的功能是实时查询包间空余状态，以便分配包间给客人使用，该模块会根据登记情况对包间是否空余状态进行动态修改，并同步到后台，并更新数据库的状态，并实时更新到页面上，一目了然，该页面如下：

 

 

 

4、包间登记功能：该模块包含两个功能，一个是登记信息展示和添加登记信息功能，其中，添加登记信息之后，能在信息展示页面实现更新，并向后台发送一段包含包间编号的信息，更新包间状态的状态，该功能的页面如下：

 

 

 

5、酒水饮料功能：该功能可以实时查询店内酒水存量，并查询价格信息等，对于商品的存量变化，前台人员可以对数据进行增减，保证每日的供应量。

6、会员管理功能：该功能可以实时查询已经购买本店会员的人员信息，并拥有增删功能，，可以对新注册的会员进行个人信息登记，只需发送数据到后台，然后往数据库里添加信息即可，该功能页面如下：

 

 

 

7、账单结算：该功能可以查询近期所有的账单，包括已结算的账单，前台人员可以对每一笔账单做记录，拥有修改支付状态、查询账单、删除账单权限。

 

 

 

五、个人遇到的困难与获得的主要成果

1、遇到的困难：

（1）使用旧版本IDEA的时候，配置项目的Maven 依赖总是会使用编译器自带的Maven,使得下载Spring boot依赖的时候出错，解决方法：删除项目，卸载旧版IDEA，安装最新版IDEA，安装最新版Maven，配置默认Maven版本为自己安装的。

（2）项目做到一半的时候，发现想要在一张数据表中添加一个字段，结果添加之后，由于利用到Mybatis-Plus的自动生成代码功能，于是把一开始已经存在的那张表的实体类、控制类、服务类等都删了重新生成代码，结果运行项目往这张表中添加数据时发生了意想不到的数据库出错，最后解决不了，于是重新建立一个项目，从头开始，先确定数据表要不要修改，不用修改之后才开始构建项目。这让我懂得了有时候绝不能轻易删除项目中的类，因为项目一旦构建好之后，不一定可以删除干净。

（3）前后台传值报错，有时候后台接受前台传回来的数据，因为数据传回来的时JSON数据，如果后台不使用正确的方法去接受的话，会导致传回来一些乱码，一般如果前台传回的时一个JSON对象的话，后后台也应该用一个对象去接受，并且使用正确的注解，例如使用@RequestBody注解去将前台传回的JSON对象转化为实体类对象。

（4）登录验证token拦截器失效，在登录成功时在后台生成了一个携带用户名的加密字段，传回前端前端对该token信息进行读取，如果正确传回了该信息，则说明用户已经完成登录，可以进行后续操作，否则强制跳回登录页，但是我这里token不起作用，直接输入主页的地址也能跳转，安全性还有待加强。

（5）Vue项目引入阿里云图标失败问题，引入的图标不显示。Element-ui的图标倒是可以引入。

（6）Vue项目中Element-ui table中引入计数器，绑定列名到计数器输入框问题，绑定失败，获取tableData中的值貌似只能用tableData.data来获取全部数据，不能单独将tableData.nums绑定到计数器中。

 

2、获得的主要成果：

（1）从以前使用JSP进行的前后端集成开发，转变为前后端分离开发，学会了Vue前端框架的使用，前后端分离使得数据处理更加清晰，前台负责展示数据，后台负责处理数据，将前后端进行解耦，即使前端出错也不会对后端有太大的影响，Vue框架是我用过的最好的开发框架之一，轻量化，跳转页面只需要进行简单的路由配置路径，即可随意跳转，我觉得在本系统中Vue最出色的地方在于子页面的跳转，只需要设置好子路由即可；在路由配置方面只需要在Vue项目中router下的index.js下导入每个页面的路径，然后配置好path，即可在导航栏中绑定每个子页面。

（2）在本次实习中学会了Element-ui的使用，我发现Element-ui里面的组件基本上能满足日常开发了，特别时表格用的比较多，因为表格绑定数据操作简单，只需要在每个column里面将prop的值与后台对应实体类的值一一对应即可自动完成绑定，在导航栏那里采用了Element-ui的样式，修改了布局，绑定导航栏的index为每个子页面的路由地址，使用了Element的表单，其中表单的数据绑定也比较简单明了，传值到后台只需要将form对象通过axios发送到后台即可

Element-ui官网：

 

（3）学会了Spring boot框架的基本配置搭建，在Spring boot中集成了Mybatis-Plus配置，理解了MP思想，认识到了MVC　设计模式的好处，体会到了数据库框架的好处，常用的增删改查数据不需要写SQL语句配置，直接调用Server层的实现方法，对数据进行增删改查操作。前后端进行交互前要先进行跨域配置，才可以使用Mapping方法接受前端的数据和发送数据到前端，理解了GetMapping，PutMapping,PostMapping,DeleteMapping等使用过程和方法。

 

（4）学会了利用框架和组件的文档在理解的基础上嵌入到项目当中，并逐渐熟练运用不同的组件对整个项目进行美化完善，融会贯通，不写重复代码，提高了技术文档阅读能力。

（5）学会了使用IDEA的Debug功能，掌握了前后台发生数据交互的时候合理的设置断点，观察数据的传递，可看出哪里出错，数据有没有传回后台，进一步提高了调试能力，理解了一些网页页面检查信息的功能。

（6）学会了排查错误，善于利用百度等搜索引擎去搜索解决方案，养成了自己纠错的习惯，提高了开发技术，可以举一反三，融会贯通。

 

六、测试与运行记录

1、登录调试运行记录：

前台向后台发送数据：

 

后台接受到的数据：

 

 

 

登录成功后返回前台的数据：

 

 

 

登录功能测试完毕。

2、包间查询测试：

可以看到后台以List集合的形式向前端发送包间信息

 

 

 

3、包间登记测试：

前台数据：

 

 

 

后台拿到的数据：

 

 

 

删除登记信息测试：

 

后台获取被删除的id：

 

 

 

4、酒水模块测试：

更新库存

 

 

 

后台调试数据：

 

5、会员模块测试：

搜索会员：

 

 

添加会员：

 

 

 

后台调试获取到的数据：

 

 

 

前台更新会员列表：

 

 

 

删除会员测试：

 

 

 

后台获取待删除的id：

 

 

 

6、账单模块测试：

删除测试：

 

 

 

 

 

1号账单删除成功

账单结算后更新付款状态：

 

后台更新：

 

 

 

可以看到11号账单变为已支付。

 

 

本次系统测试运行完毕！

 

七、系统设计完成结果分析与个人小结

本系统设计完成度达到90%，经调试运行，除了存在一些安全性问题外，系统基本可以正常运作，数据精确不出错，但是系统设计结构上可能没有那么严谨，功能也不够全面，后续会增添新功能；结果也算达到了我想要的效果，毕竟完全属于个人开发，时间只有十几天，从熟悉框架开始入门，也逐渐学到了很多技术，特别时Mybatis-Plus框架给予了我很大的帮助，在页面的设计方面，Vue框架给了我很大的自信，我越来越喜欢使用Vue框架，看着自己精心设计出来的界面，有一股巨大的成就感。通过这次实习，我体会到了模块化开发的优点，提高了对整体项目的管理能力，在独立开发中可以学到更多技术，虽然离开了团队合作，但是有利有弊吧，在接下来的日子里，我应该不忘初心，继续深入学习，做更有深度的项目，为以后的就业打下基础。

八、附录

一、软件配置

Spring boot pom.xml配置

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.example</groupId>
    <artifactId>ktvMag</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>ktvMag</name>
    <description>ktvMag</description>

    <properties>
        <java.version>1.8</java.version>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <spring-boot.version>2.3.7.RELEASE</spring-boot.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>

        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.2</version>
        </dependency>

        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-generator</artifactId>
            <version>3.3.2</version>
        </dependency>

        <dependency>
            <groupId>org.apache.velocity</groupId>
            <artifactId>velocity</artifactId>
            <version>1.7</version>
        </dependency>

        <dependency>
            <groupId>io.jsonwebtoken</groupId>
            <artifactId>jjwt</artifactId>
            <version>0.9.1</version>
        </dependency>
        <dependency>
            <groupId>javax.xml.bind</groupId>
            <artifactId>jaxb-api</artifactId>
            <version>2.3.0</version>
        </dependency>
        <dependency>
            <groupId>com.sun.xml.bind</groupId>
            <artifactId>jaxb-impl</artifactId>
            <version>2.3.0</version>
        </dependency>
        <dependency>
            <groupId>com.sun.xml.bind</groupId>
            <artifactId>jaxb-core</artifactId>
            <version>2.3.0</version>
        </dependency>
        <dependency>
            <groupId>javax.activation</groupId>
            <artifactId>activation</artifactId>
            <version>1.1.1</version>
        </dependency>
    </dependencies>

    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-dependencies</artifactId>
                <version>${spring-boot.version}</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>

    </dependencyManagement>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.8.1</version>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                    <encoding>UTF-8</encoding>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>2.3.7.RELEASE</version>
                <configuration>
                    <mainClass>com.example.KtvMagApplication</mainClass>
                </configuration>
                <executions>
                    <execution>
                        <id>repackage</id>
                        <goals>
                            <goal>repackage</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

</project>

 

 

程序模块：

 

 

 

程序流程图：