摘  要

本设计完成了基于Vue2+elementUI的二手书管理系统的设计与实现。现代移动化网络发展下，不同于以往的短信、邮件、收音机传递信息，网页是向用户传输信息的主要媒介之一。书籍也是向人们传递信息和知识的媒介，如今书籍印刷和出版的快速发展，以及社会文化水平的进步，越来越多的读书客使得书籍市场愈发壮大，由此为了获得需要制作书籍的纸张砍伐了更多的森林，增大了保护环境的压力。伴随着网络用户的逐渐增长，在网上通过网页或者小程序交易二手图书的人越来越多。

在本毕业设计中，前端开发方面使用了Vue.js和Element UI构建了一个带有搜索、筛选、发布、购买、订单管理等功能的Web应用程序。并且使用Vuex作为状态管理器，方便管理应用程序的多个组件之间的共享状态。同时，为了增加应用程序的可重用性和灵活性，将应用程序划分为多个组件，每个组件都可以独立开发、调试和测试。在Vue-router和axios的帮助下，实现一个完全响应式的单页面应用程序。组要功能包括：（1）用户登录与注册；（2）二手书籍搜索：（3）购物车功能；（4）书籍买卖。在后端开发方面使用Node.js和Express框架，对应用程序进行服务器端开发，同时使用MongoDB作为数据存储，对用户、书籍、订单信息进行管理和存储。  

最终实现一个基于vue2.0+node.js且功能完善、流畅易用的二手书交易平台，为用户提供了一个能登录注册，能买能卖，能搜索二手书的平台，拥有良好的用户体验，帮助他们更加便捷地进行二手书籍的交流和交易。通过该系统，用户可以轻松地添加、编辑和删除书籍信息，该系统还提供了购物车功能，以帮助用户更好地管理订单。

关键词：Vue2.0，二手书，电商，nodeJs+express  

Abstract

This design has completed the design and implementation of a second-hand book management system based on Vue2+elementUI. Under the development of modern mobile networks, unlike previous SMS, email, and radio transmissions, web pages are one of the main media for transmitting information to users. Books are also a medium for conveying information and knowledge to people. With the rapid development of book printing and publishing, as well as the advancement of social and cultural levels, more and more readers have made the book market stronger. As a result, more forests have been cut down in order to obtain the thesis needed to make books, increasing the pressure on environmental protection. With the gradual growth of online users, more and more people are trading second-hand books online through web pages or mini programs.

In this graduation design, the front-end development uses Vue. js and Element UI to build a Web application with search, filtering, publishing, purchase, order management and other functions. And using Vuex as a state manager facilitates the management of shared states between multiple components of the application. At the same time, in order to increase the reusability and flexibility of the application, the application is divided into multiple components, each of which can be independently developed, debugged and tested. With the help of Vue router and axios, implement a fully responsive single page application. The group functions include： (1) user login and registration; (2) Second hand book search： (3) Shopping cart function; (4) Book buying and selling. In terms of backend development, Node. js and Express frameworks are used for server-side development of applications, while MongoDB is used as data storage to manage and store user, book, and order information.

The ultimate implementation is a fully functional, smooth and easy-to-use second-hand book trading platform based on Vue2.0+node.js, providing users with a platform that can log in, register, buy, sell, and search for second-hand books. It has a good user experience and helps them communicate and trade second-hand books more conveniently. Through this system, users can easily add, edit, and delete book information. The system also provides a shopping cart function to help users better manage orders.

Key Words： Vue2.0, usedbooks, online retailers, nodeJs, book trading  

 

目  录

第1章　绪论 1

1.1 项目背景 1

1.2 国内外研究现状 1

1.3 项目开发意义 2

1.4 报告主要内容 2

第2章　关键技术介绍 3

2.1 前端开发技术 3

2.1.1 vue.js 3

2.1.2 element-UI 3

2.1.3 AJAX与AXIOS 3

2.2 后端开发技术 4

2.2.1 node.Js 4

2.2.2 MySQL数据库 4

2.3 本章小结 4

第3章　系统分析 5

3.1 二手书在线市场业务分析 5

3.1.1 UI分析 5

3.1.2 路由 6

3.1.3 权限 7

3.2 功能需求 8

3.2.1 用户登录功能 8

3.2.2 用户注册功能 8

3.2.3 书籍搜索功能 8

3.2.4 书籍上架功能以及购买功能 8

3.3 本章小结 9

第4章　系统设计和实现 10

4.1 系统技术架构 10

4.2 模块化编程 11

4.2.1 登录与注册模块 11

4.2.2 主页模块 13

4.2.3 购物车页面设计 14

4.2.4数据库 16

4.3 CSS与预处理器 17

4.4 数据托管与Vuex 17

第5章　系统测试 19

5.1 测试环境 19

5.1.1 硬件环境 19

5.1.2 软件环境 19

5.2 测试方案 19

5.2.1用户注册和登录的功能 19

5.2.2导航栏功能 20

5.2.3书籍列表功能 20

5.2.4添加书籍和编辑书籍的功能 21

5.2.5安性的测试 22

5.2.6稳定性和容错性的测试 22

第6章　总结与展望 23

6.1 开发工作总结 23

6.2 后续工作展望 23

参考文献 24

致  谢 26

为了保证系统安全，用户在访问系统时候，首先必须登录才能进行相关的操作。点击登录按钮时，前端就能得到登录文本框中的数据，并通过POST请求提交数据。在后端得到前端传来的数据后，就可以通过用户名来访问数据库，以此查找数据。一旦找到数据，就用MD5对密码进行加密，以确定加密的密码是否与数据库匹配。如果匹配成功，信息将被返回。如果匹配失败，前端通过返回状态提示用户输入相应数据。本设计中的前端使用了Vuex来管理数据，包括用户登录信息、书籍信息等。当用户进行操作时，比如登录、添加、修改、删除书籍等，前端通过调用Vuex的actions来发送请求并获取数据，这些请求是异步发生的。通过Vuex，可以将数据存储在全局的store对象中，并通过getter来获取数据，然后在组件中渲染数据。