一个网上书店项目的设计实现。项目服务器端使用springboot实现，前端使用vue实现。

摘要：近年来，随着经济的高速发展，人们的消费水平不断提高，物质水平的提高已经满足不了大家的生活需求，人们开始关注文化水平的提高。所以，人们对书籍的需求量持续增长，毕竟，书籍是人类进步的阶梯。而随着网络的高速发展和普及，日常的书店购书已经达不到消费者的需求，越来越多的人开始在网络上购书，电子商务成为了当今世界最流行的消费方式之一。
本系统是一个基于B/S结构的网上书店系统，系统采用Vue框架搭建前端界面，采用Spring Boot搭建后台服务器，通过Axios实现前后端的请求响应和数据传递，从而实现前后端联合。本系统使用MySQL作为数据库，用于存储系统中必要的数据，选择Apache的Tomcat部署系统的服务器。从而实现了一个基于浏览器的网上书店。
用户可以通过浏览器来使用该系统，消费者用户可以在线浏览书籍，通过分类查看书籍，选择书籍加入购物车，查看购物车，选择购物车内的书籍进行结算并生成订单，用户可以查看书籍订单，在线支付订单或者取消订单，修改个人资料，管理个人收货地址等功能。管理员可以更新书籍信息，添加书籍，删除书籍，查看订单，删除订单，添加图书更新消息等功能。该系统通过浏览器使用，无需安装任何插件，界面简单，方便操作。

关键词：图书管理；Vue.js；B/S结构；在线购书

Absrtact: In recent years, with the rapid development of economy, people’s consumption level has been continuously improved. The improvement of material level can not meet everyone’s living needs. People begin to pay attention to the improvement of cultural level. Therefore, people’s demand for books continues to grow, after all, books are the ladder of human progress. With the rapid development and popularization of the network, the daily bookstores can not meet the needs of consumers. More and more people begin to buy books on the network. E-commerce has become one of the most popular consumption methods in the world today.
This system is an online bookstore system based on B/S structure. The system uses Vue framework to build the front-end interface, Spring Boot to build the back-end server, and Axios to realize the front-end and back-end request response and data transmission, thus realizing the front-end and back-end combination. This system uses MySQL as the database to store the necessary data in the system, and chooses Apache’s Tomcat deployment system server. Thus, an online bookstore based on browser is realized.
Users can use the system through browsers. Consumer users can browse books online, view books by classification, select books to join shopping carts, view shopping carts, select books in shopping carts to settle accounts and generate orders. Users can view book orders, pay orders online or cancel orders, modify personal data, manage personal receiving addresses and other functions. 。 Administrators can update book information, add books, delete books, view orders, delete orders, add books update messages and other functions. The system is used by browser without installing any plug-ins. It has a simple interface and is easy to operate.

Key words: book management; Vue.js; B/S structure; online book purchase

目录
第1章 绪论 1
1.1选题背景 1
1.2选题意义 1
1.3开发目标 1
1.4论文结构 2
第2章 开发环境和相关技术介绍 3
2.1开发环境 3
2.2相关技术 3
2.2.1 B/S结构 3
2.2.2 Spring Boot 3
2.2.3 Vue.js 4
2.2.4 Node.js 4
2.2.5 MySQL 4
2.2.6 Axios 4
2.2.7 Maven 4
第3章 需求分析 6
3.1 功能性需求分析 6
3.2 经济可行性分析 8
3.3 技术可行性分析 8
第4章 系统设计 9
4.1 系统功能模块设计 9
4.1.1整体功能模块设计 9
4.1.2登录模块 9
4.1.3 图书分类模块 10
4.1.4 分类图书 11
4.1.5 订单管理模块 12
4.1.6 图书消息更新模块 13
4.1.7 购物车管理 14
4.1.8 地址管理界面 15
4.2 数据库设计 16
4.2.1 登录模块数据库设计 16
4.2.2 分类模块数据库设计 16
4.2.3 图书模块数据库设计 16
4.2.4 订单管理模块数据库设计 17
4.2.5图书更新消息模块数据库设计 17
4.2.6 购物车模块数据库设计 17
4.2.7 地址管理模块数据库设计 17
第5章 系统实现 19
5.1 登录模块实现 19
5.1.1 数据库实现 19
5.1.2 服务器功能实现 19
5.1.3 前端交互界面实现 20
5.2 分类模块实现 20
5.2.1 数据库实现 20
5.2.2 服务器功能实现 21
5.2.3 前端交互界面实现 22
5.3 图书模块实现 23
5.3.1 数据库实现 23
5.3.2 服务器功能实现 23
5.3.3 前端交互界面实现 25
5.4 其他模块实现 25
第6章 系统测试 26
6.1 登录测试 26
6.2 地址管理测试 26
6.3 购物车测试 28
6.4 其他模块测试 28
第7章 总结 29
致谢 30
参考文献 31

第1章 绪论
1.1选题背景
计算机的兴起仅仅过了半个世纪，互联网的发展速度早已无法形容，当今社会，计算机似乎已经像普通的家用电器一样，开始出现在各家各户，人们日常生活中的越来越多的事情可以通过计算机来实现。随着经济和科技的发展，电商网站也得到了普及，网购成为了日常生活中必不可少的一部分。人们除了购买日常生活用品来满足自己的物质需要以外，也开始在网络上购买图书来满足自己的文化需求。当今时代，网上书店五花八门各不相同，却难得有一个界面相对简单易操作的系统，界面花里胡哨的对部分中老年人群不适应，这时候就需要一个界面简单、书籍丰富的网上书店来满足绝大多数人的需求，几乎所有人都可以使用的书店系统。
1.2选题意义
通过这项课题，开发一个简单易操作、图书丰富、购买方便的网上书店系统，可以满足几乎所有人的购书需求，书店种类丰富，可以添加，图书可以按照分类添加和管理，人们选书、购书简便快捷，实现了图书在线销售的新模式。通过该系统，用户不仅可以方便快捷的选书、购书，管理员也可以更加简便快捷的管理图书、管理订单、管理用户。总之，该项目非常有意义。
1.3开发目标
本系统的开发目标是搭建一个基于B/S结构的书店系统。所谓B/S结构即浏览器/服务器结构，用户界面通过浏览器呈现给用户，数据和请求处理模块部署在服务器上。通过该结构，用户在使用该系统时不要安装任何插件，只需要使用系统自带的浏览器就可以，只需要一个网址就可以很方便地实现用户的扩展。
用户通过该系统可以实现以下功能：

1. 在线浏览图书分类；
2. 在线按照分类浏览该分类的图书；
3. 选择喜欢的图书加入购物车；
4. 购物车中选择图书结算；
5. 管理购物车中的图书；
6. 管理结算时生成的订单；
7. 查看图书更新消息；
8. 管理个人收货地址；
9. 管理个人资料
   管理员通过该系统可以实现以下功能：
10. 管理书籍分类；
11. 按照分类管理该分类下的图书；
12. 管理系统中的订单；
13. 管理系统用户；
14. 管理图书更新消息
    1.4论文结构
    第1章 绪论。介绍系统的选题背景、选题意义、开发目标和论文的结构安排。
    第2章 开发环境和相关技术介绍。介绍系统的开发环境和系统中用到的关键技术。
    第3章 需求分析。介绍系统的需求分析。
    第4章 系统设计。根据需求分析完成系统的设计工作。
    第5章 系统实现。根据系统设计实现系统。
    第6章 系统测试。测试系统的功能是否满足需求并且可以正常使用。
    第7章 总结。总结。
    致谢。对所有提供过帮助的人表示感谢。
    参考文献。列出所有参考过的文献。
    第2章 开发环境和相关技术介绍
    2.1开发环境
    操作系统：Windows 10；
    Java：JDK 1.8；
    数据库：MySQL 5.5；
    Node.js: Node.js 10.15.3；
    数据库可视化管理工具：Navicat for MySQL；
    开发工具：IntelliJ IDEA（服务器端）WebStorm（前端）；
    服务器：Apache Tomcat 8.5；
    2.2相关技术
    2.2.1 B/S结构
    B/S结构（Browser/Server，浏览器/服务器模式），是WEB兴起后的一种网络结构模式，WEB浏览器是客户端最主要的应用软件。这种模式统一了客户端，将系统功能实现的核心部分集中到服务器上，简化了系统的开发、维护和使用。客户机上只要安装一个浏览器），如Netscape Navigator或Internet Explorer，服务器安装SQL Server、Oracle、MYSQL等数据库。浏览器通过Web Server 同数据库进行数据交互。
    2.2.2 Spring Boot
    Spring Boot是由Pivotal团队提供的全新框架，其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置，从而使开发人员不再需要定义样板化的配置。通过这种方式，Spring Boot致力于在蓬勃发展的快速应用开发领域(rapid application development)成为领导者。
    2.2.3 Vue.js
    Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
    Vue是目前最流行的前端框架之一。丰富的模板语法在使用时非常方便。
    2.2.4 Node.js
    Node 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。
    本系统使用Node.js和Node自带的Npm管理工具，来安装前端所需的框架和启动前端代码，这使得前端的JavaScript无需服务器，在Node上就可以运行，实现了真正的前后端分离。
    2.2.5 MySQL
    MySQL是最好的Web系统的关系数据库管理系统。本系统采用MySQL作为数据库。
    2.2.6 Axios
    Axios 是一个基于 promise（一个 Promise 就是一个对象，它代表了一个异步操作的最终完成或者失败）的 HTTP 库，可以用在浏览器和 node.js 中，前端通过Axios发送请求和获取请求的返回参数，以及前后端数据的传递，通过Axios实现了前后端的异步请求，在前后端分离开发的基础上实现前后端的联合。
    2.2.7 Maven
    Maven项目对象模型(POM)，可以通过一小段描述信息来管理项目的构建，报告和文档的项目管理工具软件。
    使用Maven，在创建Spring Boot项目时，不必再下载每一个需要的Jar包放到系统依赖中，只需要配置Maven的配置文件pom.xml，通过几行代码就可以引入所需要的包，非常方便。

第3章 需求分析
3.1 功能性需求分析
首先，该系统是一个基于Web的网上书店系统，其主要目的是为了方便管理员管理和消费者用户购书。
其次，该系统的用户类型可以划分为管理员用户和消费者用户。用户类型不同则能使用的功能也不同。
最后，根据用户类型的不同分析用户功能需求。具体的功能需求按照用户类型的不同在下面分别进行介绍。
管理员用户的功能介绍：

1. 管理书籍分类；进入书籍分类页面（首页），可以看到系统中所有的书籍分类，并且可以对分类进行添加和修改操作，由于分类中存在关联书籍，所以不允许删除分类操作。
2. 按照分类管理该分类下的图书；通过分类界面（首页），点击不同分类进入该分类中所有的图书界面，可以对该分类的图书进行查询、添加、修改和删除操作。添加图书时，系统会自动将图书划分到该分类之下。所以添加图书时应提前进入相应的分类。
3. 管理系统中的订单；查看系统中所有的订单，并可以对系统订单进行简单的修改（收货地址的修改，未支付订单价格的修改等），删除订单（已取消的订单、未支付的订单、已支付但是用户不想要的订单）
4. 管理系统用户；管理系统中的用户，查询、修改、添加等。
5. 管理图书更新消息；图书上新时发布新的图书更新消息。
   消费者用户的功能介绍：
6. 在线浏览图书分类；首页查看系统中所有的图书分类。提供分类搜索功能。
7. 在线按照分类浏览该分类的图书；点击首页的分类，进入该分类中，并且查看系统中所有该分类的图书，可以提供搜索功能。
8. 选择喜欢的图书加入购物车；查看图书时，可以点击图书后的加入购物车按钮，将该图书加入到购物车中。
9. 购物车中选择图书结算；进入购物车界面，选择需要购买的图书进行结算，生成订单。
10. 管理购物车中的图书；进入购物车界面，查看所有加入购物车的图书，选择不想要的进行删除操作。
11. 管理结算时生成的订单；查看购物车结算时生成的所有订单，对订单进行取消和支付操作。
12. 查看图书更新消息；查看发布的图书上新消息。
13. 管理个人收货地址；进入地址管理界面，管理自己的收货地址，包括地址的添加、修改和删除操作。
14. 管理个人资料：进入个人资料界面，编辑和修改自己的资料。
    根据以上的功能需求分析，使用面向对象分析法可以得到系统的用例图，如图3-1所示。

图3-1 系统功能用例图
3.2 经济可行性分析
该系统采用B/S架构，开发完成之后，只需要一台服务器就可以部署，运行、维护简单，成本极低，投入后，用户扩展方便，收益巨大，所以经济上是可行的。
3.3 技术可行性分析
系统服务器端使用Spring Boot框架开发，前端界面使用Vue框架开发，使用Axios实现前后端的联合，数据存放于MySQL数据库中，后端服务器运行在Tomcat上，前端运行在Node上，这些技术都是目前最为流行的技术之一，成熟且方便运用，所以该系统在技术上是可行的。

第4章 系统设计
4.1 系统功能模块设计
4.1.1整体功能模块设计
根据系统需求分析，得到该系统的整体功能结构图，如图4-1所示。

图4-1 系统整体功能结构图
根据系统的整体功能模块，下面分模块进行设计。
4.1.2登录模块
功能描述：用户输入用户名和密码并点击登录，系统验证用户名和密码是否匹配并返回数据。
界面设计：用户名输入框，密码输入框，登录按钮。
数据库设计：用户表（ID，用户名，密码，昵称，手机号，用户类型）主键：ID
服务器端：用户实体类、映射文件mapper、SQL文件xml、接受请求controller、请求处理层service。
功能流程图如图4-2所示。

图4-2 登录功能模块流程图
4.1.3 图书分类模块
功能描述：用户登录成功后进入系统首页即图书分类页面，根据用户类型为用户呈现不同的操作，管理员用户可以查询分类、添加分类、编辑分类，消费者用户只可以查看分类。
界面设计：分类搜索框和和搜索按钮、添加分类（仅管理员）、分类显示列表、总页数和分页控制、编辑按钮（仅管理员）。
数据库设计：图书分类表（ID，名称，简介）主键：ID。
服务器端：图书类别实体类、映射文件mapper、SQL文件xml、接收请求层和数据返回层controller、请求处理层service。
功能流程图如图4-3所示。

图4-3 图书类别界面功能流程图

4.1.4 分类图书
功能描述：用户通过图书分类界面，点击响应的分类进入到该分类的图书界面，根据用户类型为用户呈现不同的操作，管理员用户可以查询图书、添加图书、编辑图书和删除图书，消费者用户只可以查询图书。
界面设计：图书搜索框和和搜索按钮、添加图书按钮（仅管理员）、图书显示列表、总页数和分页控制、编辑和删除按钮（仅管理员）。
数据库设计：图书表（ID，图片，名称，价格，作者，出版社，分类（图书类别表主键ID），简介）主键：ID。
服务器端：图书实体类、映射文件mapper、SQL文件xml、接收请求层和数据返回层controller、请求处理层service。
功能流程图如图4-4所示。

图4-4 分类图书查看流程图
4.1.5 订单管理模块
功能描述：用户进入系统订单管理界面页面，根据用户类型为用户呈现不同的操作，管理员用户可以查看系统中所有的订单并且对订单进行修改和删除操作，消费者用户只可以查看自己的订单，并对订单进行支付和取消操作。
界面设计：订单搜索框和和搜索按钮、订单显示列表、总页数和分页控制、编辑和删除按钮（仅管理员）、支付和取消按钮（仅消费者用户）。
数据库设计：图书订单表（订单号，用户ID，总价，支付状态，创建时间，收货地址（地址ID），支付方式，支付时间）主键：订单号。
服务器端：订单实体类、映射文件mapper、SQL文件xml、接收请求层和数据返回层controller、请求处理层service。
功能流程图如图4-5所示。

图4-5 订单管理功能流程图
4.1.6 图书消息更新模块
功能描述：用户进入系统图书消息更新界面，根据用户类型为用户呈现不同的操作，管理员用户可以查看系统中的图书更新消息并对消息进行添加、修改和删除操作，消费者用户只可以查看系统中的图书更新消息。
界面设计：添加按钮（仅管理员）、图书更新消息显示列表、总页数和分页控制、编辑和删除按钮（仅管理员）。
数据库设计：图书更新消息表（ID，更新内容，更新时间）主键：ID。
服务器端：图书更新消息实体类、映射文件mapper、SQL文件xml、接收请求层和数据返回层controller、请求处理层service。
功能流程图如图4-6所示。

图4-6 图书更新消息界面流程图
4.1.7 购物车管理
功能描述：消费者用户进入购物车管理界面，并且可以对购物车中的图书进行删除和选中结算操作，结算时生成订单。
界面设计：购物车图书显示列表、总页数和分页控制、删除按钮、实时显示选中项目总价、结算按钮。
数据库设计：购物车表（ID，图书ID，用户ID，图书数量，加入时间）主键：ID。
服务器端：购物车实体类、映射文件mapper、SQL文件xml、接收请求层和数据返回层controller、请求处理层service。
功能流程图如图4-7所示。

图4-7 购物车管理界面流程图
4.1.8 地址管理界面
功能描述：消费者用户进入地址管理界面，并且可以对地址信息进行删除和修改以及添加地址的操作。
界面设计：添加地址按钮、地址显示列表、总页数和分页控制、删除按钮、编辑按钮。
数据库设计：地址表（ID，省，市，区，具体地址，用户ID）主键：ID。
服务器端：地址表实体类、映射文件mapper、SQL文件xml、接收请求层和数据返回层controller、请求处理层service。
功能流程图如图4-8所示。

图4-8 地址管理模块流程图

4.2 数据库设计
根据上一节中的模块设计和各模块设计中所需要的数据库，设计数据库表格的形式。
4.2.1 登录模块数据库设计
根据登录模块的设计，用户表格设计如表4.1所示
表4.1 用户表（user）
列名 类型 长度 允许为空 是否主键 注释
ID int 11 否 是 ID
username varchar 50 否 否 用户名
password varchar 50 否 否 密码
nickname varchar 50 是 否 昵称
type int 1 否 否 用户类型（1：管理员；2：消费者）

4.2.2 分类模块数据库设计
根据4.1.3图书分类设计，图书类别表格设计如表4.2所示。
表4.2 图书类别表（category）
列名 类型 长度 允许为空 是否主键 注释
id Int 11 否 是 ID
catename varchar 50 否 否 分类名称
cate_info varchar 255 否 否 分类简介

4.2.3 图书模块数据库设计
根据4.1.4 图书查看功能设计，图书表格设计如表4.3所示。
表4.3 图书表（book）
列名 类型 长度 允许为空 是否主键 注释
id int 11 否 是 ID
img varchar 255 否 否 图片地址
name varchar 50 否 否 名称
price decimal 10 否 否 价格
author varchar 50 否 否 作者
press varchar 100 否 否 出版社
category_id int 11 否 否 所属分类
introduction varchar 255 否 否 简介
4.2.4 订单管理模块数据库设计
根据4.1.5订单管理模块的设计，得到订单表格的设计如表4.4所示。
表4.4订单表（orders）
列名 类型 长度 允许为空 是否主键 注释
order_num int 11 否 是 订单号
user_id int 11 否 否 用户ID
total_price decimal 10 否 否 总价
state int 1 否 否 支付状态
create_time datetime 0 否 否 创建时间
address_id int 10 否 否 地址ID
payment_id int 1 是 否 支付方式
paytime datetime 0 是 否 支付时间

4.2.5图书更新消息模块数据库设计
根据4.1.6图书更新消息模块的设计，得到数据库图书更新消息表的设计如表4.5所示。
表4.5图书更新消息表（bookmessage）
列名 类型 长度 允许为空 是否主键 注释
id int 11 否 是 ID
update_content varchar 500 否 否 更新内容
update_time datetime 0 否 否 更新时间
4.2.6 购物车模块数据库设计
根据4.1.7购物车模块设计，得到购物车表的设计如表4.6所示。
表4.6购物车表（shopcart）
列名 类型 长度 允许为空 是否主键 注释
id int 11 否 是 ID
book_id int 11 否 否 图书ID
user_id int 11 否 否 用户ID
book_num int 5 否 否 图书数量
add_time datetime 0 否 否 添加时间

4.2.7 地址管理模块数据库设计
根据4.1.8地址管理模块的功能设计和数据需求，得到地址管理模块的数据库表格设计如表4.7所示。

表4.7地址表（address）
列名 类型 长度 允许为空 是否主键 注释
id int 11 否 是 ID
province varchar 255 否 否 省/直辖市/自治区
city varchar 255 否 否 市
conuty varchar 255 否 否 县/区
juti varchar 255 否 否 具体地址
user_id int 11 否 否 用户ID

第5章 系统实现
该章节主要讲述系统的实现过程，首先通过IDEA开发工具创建Spring Boot项目，项目类型选择Maven，使用Maven管理项目依赖的包。其次，使用Node.js中的npm工具创建Vue项目，用于构建前端交互界面，这里使用淘宝提供的npm镜像cnpm。
5.1 登录模块实现
5.1.1 数据库实现
使用Navicat for MySQL数据库管理工具命令行建立数据库，建表SQL命令如下：
DROP TABLE IF EXISTS user;
CREATE TABLE user (
id int(11) NOT NULL AUTO_INCREMENT,
username varchar(50) NOT NULL,
password varchar(50) NOT NULL,
nickname varchar(50) DEFAULT NULL,
qq varchar(50) DEFAULT NULL,
phone varchar(50) DEFAULT NULL,
PRIMARY KEY (id)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8;
5.1.2 服务器功能实现
首先，配置MyBatis的GeneratorConfig.xml文件，通过Maven使用自动生成命令，生成映射文件UserMapper、实体类User和数据库SQL文件UserMapper.xml。
其次，创建请求映射接受层loginController和业务逻辑处理层LoginService。请求处理层controller的关键代码：
@PostMapping("/login")
public User checkLogin(String username, String password){
User user = loginService.checkLogin(username, password);
return user;
}
业务逻辑处理层LoginService的关键代码：
public User checkLogin(String username,String password){
User user = userMapper.checkLogin(username, password);
return user;
}
Mapper映射文件：
User checkLogin(String username,String password);
SQL文件Mapper.xml：

select * from user
where
username = #{username} and password = #{password}

5.1.3 前端交互界面实现
首先，使用WebStorm开发工具打开创建的Vue项目，创建登录界面Login.vue，结合element-UI创建登录视图，包含用户名输入框、密码输入框和登录提交按钮。
其次，编写JS方法绑定登录提交按钮，通过JS方法获取输入框的用户名和密码，这里使用Vue中的v-model实现。
最后，将获取到的用户名和密码作为Axios请求的参数发送登录请求给后台服务器。后台服务器通过用户名和密码查找匹配的User实体并作为Axios请求的返回参数传递给前端。关键代码：
var params = new URLSearchParams();
params.append(‘username’,this.form.username);
params.append(‘password’,this.form.password);
this.axios.post(‘http://localhost:8200/login/login’,params)
界面如图5-1所示。

图5-1 登录界面
5.2 分类模块实现
5.2.1 数据库实现
使用Navicat for MySQL数据库管理工具命令行建立数据库，建表SQL命令如下：
DROP TABLE IF EXISTS category;
CREATE TABLE category (
id int(11) NOT NULL AUTO_INCREMENT,
catename varchar(255) DEFAULT NULL,
cate_info varchar(255) DEFAULT NULL COMMENT ‘简介’,
PRIMARY KEY (id)
) ENGINE=InnoDB AUTO_INCREMENT=19 DEFAULT CHARSET=utf8;
5.2.2 服务器功能实现
首先，配置MyBatis的GeneratorConfig.xml文件，通过Maven使用自动生成命令，生成映射文件CategoryMapper.java、实体类Category.java和数据库SQL文件CategoryMapper.xml。
其次，创建请求映射接受层categoryController.java和业务逻辑处理层CategoryService.java。
请求处理层controller的关键代码：
@GetMapping("/getCategory")//获取分类
public Object getCategory(){
Map<String,Object> map = new HashMap<>();
map.put(“data”,categoryService.getCategory());
return map;
}
@PostMapping("/updateCategory")//更新分类
public ResponseBody updateCategory(UpdateRequest request){
categoryService.updateCategory(request);
return new ResponseBody();
}
@PostMapping("/addCategory")//添加分类
public ResponseBody addCategory(BaseRequest request){
categoryService.addCategory(request);
return new ResponseBody();
}
@GetMapping("/searchCategory")//搜索分类
public Object searchSingers(String catename){
Map<String,Object> map = new HashMap<>();
map.put(“data”,categoryService.searchCategory(catename));
return map;
}
业务逻辑处理层CategoryService的关键代码：
@Override
public List getCategory(){//获取分类
List categories = categoryMapper.selectAll();
List mapList = new ArrayList<>();
for(Category category : categories){
Map map = new HashMap();
map.put(“id”,category.getId());
map.put(“catename”,category.getCatename());
map.put(“cateInfo”,category.getCateInfo());
mapList.add(map);
}
return mapList;
}
@Override
public void updateCategory(UpdateRequest request){//更新分类
Category category = categoryMapper.selectByPrimaryKey(request.getId());
category.setCatename(request.getCatename());
category.setCateInfo(request.getCateInfo());
categoryMapper.updateByPrimaryKeySelective(category);
}
@Override
public void addCategory(BaseRequest request){//添加分类
Category category = new Category();
category.setCatename(request.getCatename());
category.setCateInfo(request.getCateInfo());
categoryMapper.insert(category);
}
@Override
public List searchCategory(String catename){//搜索分类
List categories = categoryMapper.searchCategory(catename);
List listMap = new ArrayList<>();
for(Category category : categories){
Map map = new HashMap();
map.put(“id”,category.getId());
map.put(“catename”,category.getCatename());
map.put(“cateInfo”,category.getCateInfo());
listMap.add(map);
}
return listMap;
}
5.2.3 前端交互界面实现
首先，使用WebStorm创建图书分类界面category.vue，结合element-UI创建分类视图，包含搜索输入框、搜索提交按钮、分类显示列表、分页控制、添加和删除以及选中分类查看该类图书按钮。
其次，编写JS方法绑定各个操作按钮，通过v-model实现输入框与JS方法参数双向绑定。
最后，通过Axios发送请求，实现前后端的数据传递。
详细代码省略。界面如图5-2所示。

图5-2 分类界面展示图
5.3 图书模块实现
5.3.1 数据库实现
使用Navicat for MySQL数据库管理工具命令行建立数据库，建表SQL命令如下：
DROP TABLE IF EXISTS book;
CREATE TABLE book (
id int(11) NOT NULL AUTO_INCREMENT,
img varchar(500) DEFAULT NULL,
name varchar(50) DEFAULT NULL,
price decimal(10,2) DEFAULT NULL,
author varchar(50) DEFAULT NULL,
press varchar(100) DEFAULT NULL COMMENT ‘出版社’,
category_id int(11) DEFAULT NULL,
introduction varchar(255) DEFAULT NULL COMMENT ‘简介’,
PRIMARY KEY (id)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;
5.3.2 服务器功能实现
首先，配置MyBatis的GeneratorConfig.xml文件，通过Maven使用自动生成命令，生成映射文件BookMapper.java、实体类Book.java和数据库SQL文件BookMapper.xml。
其次，创建请求映射接受层bookController.java和业务逻辑处理层BookService.java。
请求处理层controller的关键代码：
@GetMapping("/getCategoryBook")//获取图书列表
public Object getCategoryBook(Integer categoryId){
Map<String,Object> map = new HashMap<>();
map.put(“data”,bookService.getCategoryBook(categoryId));
return map;
}
@PostMapping("/delBook")//删除图书
public ResponseBody delBook(Integer id){
bookService.delBook(id);
return new ResponseBody();
}
@PostMapping("/addBook")//添加图书
public ResponseBody addBook(BaseRequest request){
bookService.addBook(request);
return new ResponseBody();
}
业务逻辑处理层BookService.java的关键代码：
@Override
public List getCategoryBook(Integer categoryId){//获取图书
List books = bookMapper.selectByCategory(categoryId);
List mapList = new ArrayList<>();
for(Book book : books){
Map map = new HashMap();
map.put(“id”,book.getId());
map.put(“author”,book.getAuthor());
map.put(“category”,categoryService.getCategoryById(book.getCategoryId()).getCatename());
map.put(“name”,book.getName());
map.put(“img”,book.getImg());
map.put(“price”,book.getPrice());
map.put(“press”,book.getPress());
map.put(“introduction”,book.getIntroduction());
mapList.add(map);
}
return mapList;
}
@Override
public void delBook(Integer id){//删除图书
bookMapper.deleteByPrimaryKey(id);
}
@Override
public void addBook(BaseRequest request){//添加图书
Book book = new Book();
book.setImg(request.getImg());
book.setAuthor(request.getAuthor());
book.setCategoryId(request.getCategoryId());
book.setIntroduction(request.getIntroduction());
book.setName(request.getName());
book.setPress(request.getPress());
book.setPrice(request.getPrice());
bookMapper.insert(book);
}
@Override
public void updateBook(UpdateRequest request){//更新图书
Book book = bookMapper.selectByPrimaryKey(request.getId());
book.setImg(request.getImg());
book.setCategoryId(categoryService.selectCategoryIdByCatename(request.getCatename()));
book.setAuthor(request.getAuthor());
book.setIntroduction(request.getIntroduction());
book.setName(request.getName());
book.setPress(request.getPress());
book.setPrice(request.getPrice());
bookMapper.updateByPrimaryKeySelective(book);
}
5.3.3 前端交互界面实现
首先，使用WebStorm创建图书分类界面book.vue，结合element-UI创建图书视图，包含搜索输入框、搜索提交按钮、图书显示列表、分页控制、管理员用户包括添加和删除图书按钮，消费者用户包括加入购物车按钮。
其次，编写JS方法并绑定各个操作按钮，通过v-model实现输入框与JS方法参数双向绑定。
最后，通过Axios发送请求，实现前后端的数据传递。
详细代码省略。界面如图5-3所示。

图5-3 图书浏览界面（管理员）
5.4 其他模块实现
其他功能模块的实现过程与前三节所述相差不大，总体结构一样，只是JS方法和所需的参数不同，后台也只是获取到的数据名称不一样，由于篇幅原因，这里不再具体叙述其他模块的具体实现过程。

第6章 系统测试
6.1 登录测试
前提：系统用户表中存在管理员用户：用户名：admin；密码：123456；
存在消费者用户：用户名：qwer123；密码：123456；
测试编号 用户名 密码 提示 结果
1 用户名和密码不能为空 符合需求
2 admin 用户名和密码不能为空 符合需求
3 123456 用户名和密码不能为空 符合需求
4 admin 123456 登录成功 符合需求
5 admin 1234 用户名或密码错误 符合需求
6 add 123456 用户名或密码错误 符合需求
7 qwer123 123456 登录chengg 符合需求
通过设计测试用例和得到的测试结果，证明登录模块功能正常。
6.2 地址管理测试
测试前如图6-1所示。

图6-1 测试前
添加地址测试，添加后如图6-2所示。

图6-2 添加地址后

图6-3 删除地址

图6-4 编辑地址

图6-5 编辑地址后
6.3 购物车测试

通过实际操作测试，购物车功能基本正常。
6.4 其他模块测试
其他模块均采用黑盒测试的方法，通过实际操作来验证各项功能是否得到实现，经测试，系统中存在的功能都已经得到实现，而且满足预期需求，总体上，系统符合需求，非常成功。

第7章 总结
经过接近一学期的不懈努力，我终于完成了这次毕业设计，本设计是一个基于Web的网上书店系统。系统才用了B/S结构，前端界面通过浏览器呈现给用户，后端部署在服务器上。本系统前端使用目前最为流行的前端框架之一Vue.js实现，本系统服务器通过Spring Boot、Maven实现。并且系统使用Axios来完成前后端的联合。
通过该系统，消费者用户可以在线浏览书籍、加入购物车、结算购物车、提交订单、取消订单、支付订单等。管理员通过该系统可以在线管理图书分类、管理图书、管理订单等。使用起来界面简单，易于操作。基本上完成了设计最初的目标。
当然，由于个人技术水平等原因，系统还有很多不足的地方，比如说，系统不能直接完成支付操作。以后这些方方面面还需要继续完善。由于时间原因，论文或许有不足之处，望老师能批评指正！谢谢！

致谢
随着本次毕业设计的落幕，大学生活就要结束了，不舍之情溢于言表。我非常感谢在本次毕业设计中给予过我帮助的人。我的指导老师、我的同学以及我的舍友。特别感谢我的指导老师，给予了我选题上的建议，并且在设计过程中的指导与督促，感谢我的舍友在方方面面的支持，没有大家的帮助和鼓励，我或许自己很难完成这项艰巨的任务，谢谢大家的帮助！

参考文献
[1]何军,陈倩怡.Vue+Springboot+Mybatis开发消费管理系统[J].电脑编程技巧与维护,2019(02):87-88+102.
[2]李宇,刘彬.前后端分离框架在软件设计中的应用[J].无线互联科技,2018,15(17):41-42.
[3]王志任. 基于Vue.js的开发平台的设计与实现[D].广东工业大学,2018.
[4]刘翔宇. 基于Vue的数据可视化系统的设计与实现[D].北京邮电大学,2018.
[5]朱二华.基于Vue.js的Web前端应用研究[J].科技与创新,2017(20):119-121.
[6]陈岩.轻量级响应式框架Vue.js应用分析[J].中国管理信息化,2018,21(03):181-183.
[7]曾安军. 基于Node.js和REST风格的移动端页面可视化构建平台[D].电子科技大学,2018.
[8]程岚岚,田文涛,汪剑.基于Spring Boot的网页健康性评级系统的设计与实现[J].电脑与信息技术,2018,26(02):45-47.
[9]刘云浩,李沛.基于Spring Boot的后台服务器开发[J].中国科技信息,2018(17):61-62
[10]刘超. 基于Spring Boot+Mybatis的在线投票管理系统的设计与实现[D].吉林大学,2018.
[11]王志任. 基于Vue.js的开发平台的设计与实现[D].广东工业大学,2018.
[12]王永和,张劲松,邓安明,周智勋.Spring Boot研究和应用[J].信息通信,2016(10):91-94.
[13]张峰.应用SpringBoot改变web应用开发模式[J].科技创新与应用,2017(23):193-194.
[14]方圆. 基于Spring Boot的综合数据管理系统的设计与实现[D].大连理工大学,2018.
[15]吴晓珊,曹旭东,王森,魏文龙.基于B/S架构的管理系统软件开发[J].计算机测量与控制,2019,27(02):123-128.

web书店的设计与实现毕业设计相关推荐

1. java web怎么快速设计网页_Javaweb毕业设计快速开发指南（一）

   在开篇之前,我们先聊一个问题.一个合格的某某管理系统,应该有哪些内容呢? 很多同学在这一步就开始出问题了.拿到了题目,一般是基于Java的会员管理系统.基于SSM的员工管理系统.基于Springboo ...

2. (附源码)基于Python的“书怡”在线书店系统的设计与实现 毕业设计082332

   Django书怡在线书店系统 摘 要 随着科学技术的飞速发展,社会的方方面面.各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,在线书店系统当然也不能排除在外.书怡在线书店系统是以实 ...

3. pythoot+mysql+基于Python的“书怡”在线书店系统的设计与实现 毕业设计-附源码082332

   Django书怡在线书店系统 摘  要 随着科学技术的飞速发展,社会的方方面面.各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,在线书店系统当然也不能排除在外.书怡在线书店系统是以 ...

4. java计算机毕业设计网上书店的设计与实现源程序+mysql+系统+lw文档+远程调试

   java计算机毕业设计网上书店的设计与实现源程序+mysql+系统+lw文档+远程调试 java计算机毕业设计网上书店的设计与实现源程序+mysql+系统+lw文档+远程调试 本源码技术栈: 项目架构 ...

5. JAVA毕业设计Web美食网站设计计算机源码+lw文档+系统+调试部署+数据库

   JAVA毕业设计Web美食网站设计计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计Web美食网站设计计算机源码+lw文档+系统+调试部署+数据库 本源码技术栈: 项目架构:B/S架构 开 ...

6. java计算机毕业设计Web美食网站设计MyBatis+系统+LW文档+源码+调试部署

   java计算机毕业设计Web美食网站设计MyBatis+系统+LW文档+源码+调试部署 java计算机毕业设计Web美食网站设计MyBatis+系统+LW文档+源码+调试部署 本源码技术栈: 项目架构 ...

7. （附源码）计算机毕业设计SSM基于Web美食网站设计

   (附源码)计算机毕业设计SSM基于Web美食网站设计 项目运行 环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(In ...

8. java计算机毕业设计Web美食网站设计源码+数据库+系统+lw文档

   java计算机毕业设计Web美食网站设计源码+数据库+系统+lw文档 java计算机毕业设计Web美食网站设计源码+数据库+系统+lw文档 本源码技术栈: 项目架构:B/S架构 开发语言:Java语言 ...

9. java计算机毕业设计网上书店的设计与实现源码+数据库+系统+lw文档+mybatis+运行部署

   java计算机毕业设计网上书店的设计与实现源码+数据库+系统+lw文档+mybatis+运行部署 java计算机毕业设计网上书店的设计与实现源码+数据库+系统+lw文档+mybatis+运行部署 本源 ...

最新文章

1. 手机网站开发必修课[1]：手机浏览器 本文来自：http://www.fool2fish.cn/?p=290
2. OpenCV支持向量机SVM用于非线性可分离数据
3. 终极Java日志字典：开发人员最常记录的单词是什么？
4. python连接mysql代码_Python3连接MySQL（pymysql）转账代码
5. java高级教程_Java高级教程02
6. 数学建模学习笔记（七）——图论最短路问题
7. Unity 导出切片精灵
8. android -------- Data Binding的使用 ( 四 )ListView
9. CSS水平垂直居中布局方案概述
10. UIPickView 和 UIDatePicker
11. 智能一代云平台（三十四）:后端架构一些总结
12. js数组去重方法分析与总结
13. ubantu删除文件(夹)
14. 软考信息系统项目管理师论文范文：论项目的质量管理论项目的质量管理
15. 使用crash工具分析高通ramdump
16. Token验证失败的解决方法
17. oracle服务名XDB_Oracle XDB和XPT
18. kappa一致性检验教程_Kappa一致性分析
19. Hypermedia 简介
20. php连接外卖打印机,javaScript 连接打印机,打印小票实例分享

热门文章

1. 【产业互联网周报】微软官宣把聊天机器人植入Office；任正非：4月份华为自研MetaERP将面世；...
2. 值得学的C++餐厅餐饮管理点菜系统！
3. fence机制 linux_关于RHCS中fence设备的讨论
4. 2017年诺奖：百年现代物理学，今天做了个了断！
5. linux 问答式学习
6. （半搬）植物大战僵尸python代码
7. Adobe Acrobat DC无法生成pdf：an unexpected error occurred pdfmaker was unable to produce the adobe pdf
8. linux 英文 资料,学习linux步骤(国外英文资料).doc
9. 专访贺利坚：给编程初学者的金玉良
10. 18V降压5V,15V降压5V的芯片方案选型问题