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>
程序模塊：
程序流程圖：
