基于SpringBoot的食品商城系统的设计与实现.doc

《基于SpringBoot的食品商城系统的设计与实现.doc》由会员分享，可在线阅读，更多相关《基于SpringBoot的食品商城系统的设计与实现.doc（62页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、基于SpringBoot的食品商城系统的设计与实现学 院：专 业：姓 名：指导老师：计算机学院软件工程夏创林学 号：职 称：160202103532龚友明讲师中国珠海二二年五月北京理工大学珠海学院2020届本科生毕业设计诚信承诺书本人郑重承诺：本人承诺呈交的毕业设计基于SpringBoot的食品商城系统的设计与实现是在指导教师的指导下，独立开展研究取得的成果，文中引用他人的观点和材料，均在文后按顺序列出其参考文献，设计使用的数据真实可靠。本人签名： 日期： 年 月 日基于SpringBoot的食品商城系统的设计与实现摘 要“商城系统”是如今较火热的项目之一，究其原因，可能是因为互联网的逐步扩大

2、，人们的日常购物需求都是通过购物网站进行消费，方便快捷地服务人们的日常生活，还有就是各大网站电商的兴起，比如国内的淘宝、阿里巴巴、京东，国外的亚马逊网站等等。设计着重于对食品的销售网站的建立，民以食为天，让人们更好更清晰直观安全可靠地购买自己需求的食品是本系统的目标。当然这个系统不仅仅包含面对用户的，还包含面对管理者的订单管理，对一些食品销售的创业公司完成商品销售从订单建立到订单完成也能起到很实用的帮助。市面上开源的系统也属电商最多，功能最为齐全，这将对本人的学习进步有较大帮助，也对项目的设计和完善提供了较大帮助。该项目将以健身餐品牌“补食派”而设计实现以前台为主的移动端app。关键词：商城系

3、统；电商的崛起；食品的销售网站； Design and Implementation of Food Mall System Based on Spring BootAbstractMall system is one of the more popular projects today. The reason may be that the Internet is gradually expanding, and peoples daily shopping needs are consumed through shopping websites to serve peoples daily

4、 life conveniently and quickly. The rise of major e-commerce companies such as Taobao, JD.com, Alibaba in China, Amazon in foreign countries, etc. The design focuses on the establishment of a food sales website. People take food as the sky, so that people can buy foods that they need better, more cl

5、early, intuitively, safely and reliably is the goal of this system. Of course, this system includes not only the user-facing, but also the order management facing the manager, which can also be very useful for some food sales startups to complete the sale of goods from order establishment to order c

6、ompletion. The open source systems on the market also have the most e-commerce and the most complete functions, which will greatly help my learning and progress, and also provide great help for the design and improvement of the project. The project will design and implement a mobile app based on the

7、 front desk, based on the fitness food brand Supplement Pie.Keywords: Shopping mall system; the rise of e-commerce; food sales websites;目 录1绪论11.1研究背景11.2设计目标11.3解决问题11.4文档结构12系统开发依赖22.1系统开发语言、环境与工具22.1.1操作系统22.1.2 IDE22.1.3 语言22.1.4 数据库22.2系统开发框架技术22.2.1 SpringBoot+MyBatis框架22.2.2 Vue+ NodeJs框架42.3

8、系统开发服务器43系统需求分析与前后台设计63.1 需求分析63.1.1系统前后台简要设计概述63.1.2 系统图示83.2 系统设计103.2.1 系统层次划分103.2.2 数据库设计104系统详细设计与功能实现264.1 系统项目的文件夹结构264.2食品商城系统的具体实现305总结与展望54参考文献55致谢56附录571绪论1.1 研究背景（1）现今社会因为互联网的兴起，再加上一众电商的愈发壮大，人们对电子商城系统的需求越来越大。就此发展了诸如淘宝、天猫、京东的电子商务系统，但是对于一些企业入驻这些商城需要定期提交一笔高额的费用，对于部分中小型公司也是个不小的费用，所以当企业发展到一定

9、程度有固定的消费粉丝人群时，一个自家的购物app产品就显得尤为重要。这个也是本次设计的主要背景原因。（2）在一众的电商项目中，食品购物是保持最为稳定畅销的，毕竟人们基本生活都离不开吃喝，而其中因为人们越来越看中健身锻炼，一个合理的食品搭配很重要，但快节奏的生活人们又很少有时间自己动手做饭，所以包装简洁，方便食用的健身餐也是不可或缺，电商与健身餐的结合务必会让顾客更方便地买到自己需要的产品。1.2 设计目标开发设计本系统的任务是能将健身餐品牌的所有产品展现到app页面中供顾客进行挑选，并对商品进行分门别类，使顾客更为直观地找到需要的健身餐产品。并在顾客注册登录后能添加需要的产品进入购物车选择收货

10、地址并生成订单后付款，并能在用户界面查看到自己的订单、收货地址、购物车等内容，当然也有权限分配，后台的订单管理，是不论是客户和管理员都能对自己能操作的信息进行良好的增删改查。1.3 解决问题解决了当今部分购物app设计时的操作不方便，商品展示不直观，用户操作不顺畅，数据表设计等问题。1.4 文档结构本文结构如下：第一章是绪论部分，描述了本系统的开发的背景、开发的意义、开发的目标、。第二章介绍了本系统开发时的依赖，主要是开发的环境语言和框架技术。第三章是系统需求分析与前台设计，叙述了在系统开发前需求分析，系统用图与数据库设计等等。第四章是系统的详细设计与功能实现，讲述了系统的全部功能的具体前端后

11、端实现第五章总结和展望，对项目整个的过程进行总结，并对未来项目的开发和发展完善改进做出展望。2系统开发依赖2.1 系统开发语言、环境与工具2.1.1操作系统由于采用了前后端分离的方式，将数据库信息存放到了linux操作系统，而代码将在windows操作系统中操作管理。Linux操作系统：CentOS 6.8Windows操作系统：Windows 10 专业版2.1.2 IDE后端：IntelliJ IDEA 2019.1 (Uitimate Edition)前端：Visual Studio Code 1.43.22.1.3语言后端：Java （jdk版本：11.0.2）前端：JavaScrip

12、t+HTML+CSS数据库：SQL语言2.1.4数据库MySQL 数据库：5.1.73MySQL是一种关系型数据库管理系统（RDBMS），通过最常见的数据库查询语言-结构化查询语言（SQL）对数据库进行管理。2.2系统开发框架技术2.2.1 SpringBoot+MyBatis框架（1）SpringBoot ：2.2.1.RELEASE简介：SpringBoot是由Pivotal团队在2013年开始研发、2014年4月发布第一个版本的全新开源的轻量级框架。它基于Spring4.0设计，不仅继承了Spring框架原有的优秀特性，而且还通过简化配置来进一步简化了Spring应用的整个搭建和开发过程

13、。另外SpringBoot通过集成大量的框架使得依赖包的版本冲突，以及引用的不稳定性等问题得到了很好的解决。特点：（1）可以创建独立的Spring应用程序，并且基于其Maven或Gradle插件，可以创建可执行的JARs和WARs；（2）内嵌Tomcat或Jetty等Servlet容器；（3）提供自动配置的“starter”项目对象模型（POMS）以简化Maven配置；（4）尽可能自动配置Spring容器；（5）提供准备好的特性，如指标、健康检查和外部化配置；（6）绝对没有代码生成，不需要XML配置。（2）MyBatis：2.1.1简介：MyBatis 是一款很好的持久层框架，它支持定制化 S

14、QL、存储过程以及高级映射。MyBatis 使开发者不用再写 JDBC 代码和手动设置参数以及获取结果集。MyBatis 可以使用简单的 XML 或注解来配置和映射原生信息，将接口和 Java 的 POJOs(Plain Ordinary Java Object,普通的 Java对象)映射成数据库中的记录。特点：（1）简单易学：可以让开发人员很快上手获得SQL语句映射（2）灵活： 解除SQL与程序代码的耦合：通过提供DAO层，将数据访问和业务逻辑逻辑分离，使系统的设计更为清楚，更容易维护，更容易进行单元测试。代码和SQL的分离，加强了程序可维护性。提供映射标签，支持对象与数据库的orm字段关系

15、映射提供对象关系映射标签，支持对象关系组建维护提供xml标签，支持编写动态SQL。后端开发依赖：包管理工具：Maven日志框架：logback页面模板语言 Thymeleaf 热加载工具：spring-boot-devtoolsMysql数据库连接依赖：mysql-connector-java 5.1.6 单元测试框架：junit 4.12对集合的常用工具：commons-collectionsMyBatis分页插件：com.github.pagehelper 1.2.10缓存数据库：redis连接池：druid 1.1.10 MyBatis 生成器：mybatis-generator-cor

16、e 1.3.3接口API 开发工具及框架：Swagger 2.9.2，Swagger ui 2.9.2，swagger-bootstrap-ui 支付接口：支付宝SDK 4.8.103.ALLJava Object 相互转换的 Java序列化/反序列化库：Gson2.2.2 Vue+NodeJs框架（1）Vue：2.6.11简介：Vue 是一套用于构建用户界面的渐进式JavaScript框架。特点：（1）易用：在有HTML CSS JavaScript的基础之上，能迅速上手。（2）灵活：小巧精简的核心，渐进式技术栈，可以应付各种规模的应用场景。（3）性能：20kb min+gzip 运行大小、

17、超快虚拟 DOM 、最省心的优化。（2） Node.js: v12.14.1简介：Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型。特点：（1）事件驱动（2）非阻塞I/O（3）轻量、可伸缩，适于实时数据交互应用（4）单进程，单线程前端开发依赖：前端资源加载/打包工具：webpack 4.42.1基于 promise 的 HTTP 库：axios 0.19.2解决移动端(已支持 PC)各种滚动场景需求的插件：better-scroll 1.15.2状态管理模式：vuex 3.1.3路由管理器：v

18、ue-router 3.1.6Vue脚手架：vue-cli3前端ui库：mint-ui2.3系统开发服务器1. Nginx：1.16.1简介：Nginx是一个高性能的HTTP和反向代理web服务器，本设计主要用来作为反向代理，保证内网的安全。2. Tomcat：11简介：服务器是一个开源免费的Web 应用服务器，属于轻量级的应用服务器，在中小型的系统中和并发访问用户较少的场合下被经常使用，是开发和调试JSP 程序的首要选择。本设计SpringBoot已自动加载，运行主函数时用于启动项目。3. vsftpd：2.2.2-24.el6简介：是一个 UNIX 类操作系统上运行的服务器的名字，本设计用

19、作存放图片的文件服务器3系统需求分析与前后台设计3.1需求分析3.1.1系统前后台简要设计概述表3.1 功能模块表功能模块表模块一级功能二级功能三级功能首页首页导航栏标题横幅横幅图轮播图商品主图分类导航按单品套餐分类点击使商品类别变化商品详情商品主图点击进入商品详情页商品标题商品价格返回顶部按钮返回顶部图片点击返回顶部标签栏视图分类与名字点击跳转到对应视图分类页分类页导航栏标题分类标签栏按产品分类点击使商品类别变化分类导航按单品套餐分类点击使商品类别变化商品详情商品主图商品标题商品价格商品详情页商品导航栏返回按钮点击返回上一页面详情分类点击滚动到对应位置商品信息轮播图商品标题商品副标题商品价格

20、商品库存及部分信息商品详情商品推荐图商品参数商品参数商品添加栏加入购物车按钮点击购物车商品数+1（若库存为0提示）去支付按钮点击跳转到购物车页面购物车页购物车导航栏返回按钮点击返回上一页面标题显示购物车商品种类数商品详情商品为空时内容图片文字商品内容单选按钮商品主图商品标题商品副标题商品价格商品数量删除按钮点击去除该商品收货地址选择栏收货地址为空显示内容点击跳转收货地址页收货地址与用户购物车底部栏全选按钮点击单选按钮全部选中总价格生成订单按钮点击生成订单跳转订单页用户信息页用户导航栏标题用户欢迎栏用户图片点击跳转用户登录页用户账号用户信息我的收货地址点击跳转收货地址页面我的订单点击跳转订单中心

21、页面我的购物车点击跳转购物车页面订单管理点击跳转订单管理页面公司信息点击跳转品牌信息页用户登录页用户导航栏标题返回按钮点击返回上一页面用户登录注册信息账号点击输入，已登录无法输入密码点击输入，已登录无法输入功能按钮登录点击成功跳转用户信息页面创建新账户点击跳转注册页面修改密码点击跳转修改密码页面退出登录点击退出登录跳转收货地址页收货地址导航栏标题返回按钮点击返回上一页面收货地址信息收货人信息点击跳转到更新收货地址页收货人地址选择按钮点击携带信息跳转到购物车页删除按钮点击去除该收货地址添加收货地址按钮点击跳转添加收货地址页添加收货地址页添加地址导航栏标题返回按钮点击返回上一页面收货地址信息栏收货

22、人信息点击输入信息收货人地址确认添加按钮点击添加并跳转到收货地址页更新收货地址页添加地址导航栏标题返回按钮点击返回上一页面收货地址信息栏收货人信息点击输入信息收货人地址确认更新按钮点击更新并跳转到收货地址页订单中心页订单中心导航栏标题返回按钮点击返回上一页面订单搜索框点击输入订单号搜索订单信息订单信息点击跳转到订单详情页支付订单按钮点击跳转到支付页取消订单按钮点击更改订单状态为已取消订单发货按钮点击更改订单状态为已发货订单分类栏点击跳转到对应订单分类订单详情页订单详情导航栏标题返回按钮点击返回上一页面订单信息栏收货地址信息收货人信息收货人地址商品信息主图标题单价总价数量支付页支付页导航栏标题返

23、回按钮点击返回上一页面订单信息二维码3.1.2 系统图示系统总体架构图单体架构: 优点：容易部署、测试，在项目的初期，单体应用可以很好地运行缺点：复杂性高，可靠性差，拓展能力差图 3.1 系统架构图图 3.2 功能架构图系统总体用例图图3.3 用例图3.2系统设计3.2.1系统层次划分系统总共分为五层，分别为表现层、控制层、业务逻辑层、数据访问层，数据层表现层：Vue，运用Vue框架与axios封装传来的数据呈现到视图中控制层：Controller层，封装SpringMVC的控制层转发数据业务逻辑层：Service层，业务逻辑处理数据访问层：Dao层，封装方法文件访问Mapper.xml文件数

24、据层：Mybatis，运用MyBatis自动生成Mapper文件生成Sql语句3.2.2数据库设计（1）数据库环境说明数据库名称：mmall 数据库管理系统：MySQL 5.1.73（2）数据库命名规则表3.2 数据库术语表缩写、术语解 释mmall健身餐食品商城数据库名称user用户基本信息order订单详细信息category分类详细信息pay_info支付信息cart购物车信息shipping收货地址信息product产品详细信息（3）数据库E-R设计图图3.4 用户E-R图图3.5 商品E-R图图3.6 分类E-R图图3.7 购物车E-R图图3.8 收货地址E-R图图3.9 订单E-R

25、图：图3.10 订单信息E-R图：图3.11 支付信息（支付宝调用）E-R图（4）数据逻辑图图3.12 数据逻辑图表设计以不设外键只设置主键和唯一索引的方式进行，原因：1.如果设置外键那么每次做DELETE 或者UPDATE操作都必须考虑外键约束，会导致开发的时候很麻烦，而且需要更为复杂的错误捕获机制。2. 处理数据时会受到很多的束缚，有些地方原本有部分可以允许冗余，但是由于外键约束的设计，只能放弃。3.出现BUG的时候追踪很麻烦。（5）数据字典表3.3 数据库总表表名数据库总表英文表名中文描述表名功能说明mmall_user用户用户信息表mmall_product产品产品信息表mmall_c

26、ategory分类分类信息表mmall_ shipping收货地址收货地址信息表mmall_ cart购物车购物车信息表mmall_ order订单订单信息表mmall_ order_item订单子表订单子表信息表mmall_pay_info支付信息支付信息表表3.4 用户表表名mmall_user（用户）属性名称属性描述数据类型空/非空id用户表idint (11)not nullusername用户名varchar (50)not nullpassword用户密码，MD5加密varchar (50)not nullrole角色0-管理员,1-普通用户int (4)not nullcreat

27、e_time创建时间datetimenot nullupdate_time最后一次更新时间datetimenot null表3.5 产品表表名mmall_product（产品）属性名称属性描述数据类型空/非空id商品idInt(11)not nullcategory_id分类id,对应mmall_category表的主键Int(11)not nullname商品名称varchar(100)not nullsubtitle商品副标题varchar(200)nullmain_image产品主图,url相对地址varchar(500)nullrecommend_image产品推荐图,url相对地址v

28、archar(500)nullsub_images产品副图,url相对地址textnulldetail商品详情textnullprice价格,单位-元保留两位小数decimal(20)(2位小数)not nullstock库存数量int 11not nullstatus商品状态.1-在售 2-下架 3-删除int 6nullcreate_time创建时间datetimenullupdate_time更新时间datetimenull表3.6 分类表表名mmall_category（分类）属性名称属性描述数据类型空/非空id类别idint (11)not nullparent_id父类别id当id

29、=0时说明是根节点,一级类别int (11)nullname类别名称varchar (50)nullstatus类别状态1-正常,2-已废弃tinyint (1)nullcreate_time创建时间datetimenull表3.7购物车表表名mmall_ cart（购物车）属性名称属性描述数据类型空/非空id购物车idint (11)not nulluser_id用户idint (11)not nullproduct_id商品idint (11)nullquantity数量int (11)nullchecked是否选择,1=已勾选,0=未勾选int (11)nullcreate_time创建

30、时间datetimenullupdate_time最后一次更新时间datetimenull表3.8收货地址表表名mmall_ shipping（收货地址）属性名称属性描述数据类型空/非空id收货地址idInt(11)not nulluser_id用户idInt(11)nullreceiver_name收货姓名varchar(20)nullreceiver_phone收货固定电话varchar(20)nullreceiver_mobile收货移动电话varchar(20)nullreceiver_province省份varchar(20)nullreceiver_city城市varchar(20

31、)nullreceiver_district区/县varchar(20)nullreceiver_address详细地址varchar(200)nullreceiver_zip邮编varchar(6)nullcreate_time创建时间datetimenullupdate_time最后一次更新时间datetimenull表3.9订单表表名mmall_ order（订单）属性名称属性描述数据类型空/非空id订单idInt(11)not nullorder_no订单号bigint(20)nulluser_id用户idInt(11)nullshipping_id收货地址idInt(11)nullp

32、ayment实际付款金额,单位是元,保留两位小数decimal(20)nullpayment_type支付类型,1-在线支付Int(4)nullstatus订单状态:0-已取消-10-未支付，20-已付款，40-已发货，50-订单完成int(10)nullpayment_time支付时间datetimenullsend_time发货时间datetimenullend_time交易完成时间datetimenullclose_time交易关闭时间datetimenullcreate_time创建时间datetimenullupdate_time最后一次更新时间datetimenull表3.10订单

33、子表表表名mmall_ order_item（订单子表）属性名称属性描述数据类型空/非空id订单子表idInt(11)not nulluser_id用户idInt(11)nullorder_no订单号bigint(20)nullproduct_id商品idInt(11)nullproduct_name商品名称varchar(100)nullproduct_image商品图片地址varchar(500)nullcurrent_unit_price生成订单时的商品单价，单位是元,保留两位小数decimal(20)（2位小数）nullquantity商品数量int(10)nulltotal_pric

34、e商品总价,单位是元,保留两位小数decimal(20)（2位小数）nullcreate_time创建时间datetimenullupdate_time最后一次更新时间datetimenull表3.11支付信息表表名mmall_pay_info（支付信息）属性名称属性描述数据类型空/非空id支付信息idInt(11)not nulluser_id用户idInt(11)nullorder_no订单号bigint(20)nullpay_platform支付平台:1-支付宝Int(10)nullplatform_number支付宝支付流水号varchar(200)nullplatform_statu

35、s支付宝支付状态varchar(20)nullcreate_time创建时间datetimenullupdate_time最后一次更新时间datetimenull4系统详细设计与功能实现4.1系统项目的文件夹结构1.后端：图 4.1 后端项目结构图主结构解析：（1） mall：项目主文件（2） .idea：项目的配置信息。其中包括数据源，类库，项目字符编码，历史记录，版本控制信息等。（3） .mvn：存放mvnw相关文件，存放着maven-wrapper.properties和相关jar包以及名为MavenWrapperDownloader的java文件（4）.setting: IDEA查看j

36、s文件的时候用的，记录了用什么编码方式查看。（5）src：source简写，项目源码文件夹（6）main：源码主要文件夹（7）java、com：java源码文件夹（8）alipay：支付宝测试文件夹（9）mall：mall项目主代码文件夹（10）annotation：自定义注解的文件夹（11）aspect：给注解定义切面的文件夹（12）common：项目常量定义和高复用响应式文件夹（13）config：一些配置文件夹HttpConfig：解决跨域问题配置文件RedisConfig：使redis在存取object对象的时候将jdk编码改成json编码进行存取RfcConfig：tomcat 8.

37、0以后对请求URL做了严格的过滤所以需要配置使得一些特殊字符也能通过SwaggerConfig：接口框架Swagger的配置文件（14）controller：控制层文件夹，主要处理外部请求，调用服务层。其中包含前台portal和后台backend文件夹。包含接口供前端调用。（15）dao：Data Access Object数据层文件夹，直接进行数据库的读写操作返回数据对象，数据对象与数据库表一一对应。是面向对象的数据库接口。供服务层调用（16） pojo： Plain Ordinary Java Object即普通Java类，具有一部分getter/setter方法。（17）service：

38、服务层文件夹，提供服务接口供控制层调用，包含impl为服务实现文件夹，是方法的具体实现。（18）util：工具类文件夹BigDecimalUtil：BigDecimal的工具类 对其进行构造即将double类型的数据转换成string类型以确保进行运算时不会丢失精度。 DateTimeUtil：转换日期的格式的工具类，可将字符串转换成需要的日期格式，也可以将datetime格式转换成字符串格式。FTPUtil：上传文件时与FTP服务器对接的工具类MD5Util：数据加密工具类，将用户注册密码以MD5加密存入数据库。PropertiesUtil：对配置文件进行处理的工具类。（19）vo：View

39、 Object 的视图对象文件夹，将普通对象封装成抽象对象，用于展示层，把某个指定页面（或组件）的所有数据封装起来。（20）Application：项目运行的主文件（21）resources：资源文件夹（22） mappers：Mybatis生成的存放SQL语句的Mapper.xml文件夹（23）application.yml：SpringBoot项目特有的yaml配置文件，包含数据库连接配置，mybatis配置，日志输出配置，服务器端口配置等等。（24）generatorConfig.xml：Mybatis-generator自动生成mapper.xml和mpper文件的配置文件。（25）l

40、ogback-spring.xml：日志框架logback输出日志的配置文件（26）mall.properties：自定义的配置文件，包含FTP服务器配置，支付宝授权回调接口地址配置等等。（27）zfbinfo. properties：调用支付宝功能信息的配置文件。（28）webapp：网络相关文件夹（29）templates：Thymeleaf供后台生成页面时所需的文件夹（30）upload：文件上传时得先存到本地的文件夹，不建立在上传过程中也会自动创建，里面的上传的文件待上传成功后就会自动删除。（31）WEB-INF：网络信息文件夹，包括上传时的限制等配置。（32）target：该文件夹用

41、来存放项目构建后的文件和目录、jar包、war包、编译的class文件,所有都是Maven构建时生成的。（33）.classpath：包含了项目编译需要的环境信息，包含源码路径、编译后的class文件路径、依赖的jar包路径、依赖的外部项目信息、运行的容器信息等。（34）.gitignore：分布式版本控制系统git的配置文件，意为忽略提交（35）.project：指定源文件位置，指定编译以后class文件的默认输出路径，指定工程所用到的库文件或目录（36）mvnw：在maven-wrapper.properties文件中记录你要使用的maven版本，如果用户执行mvn指令时发现当前版本与期望

42、版本不一致将会下载期望版本。（37）mvnw.cmd：执行mvnw命令的cmd入口（38）pom.xml：需要mvn自动导入的依赖文件2.前端：图 4.2 前端项目结构图主结构解析：（1）mall：项目主文件（2）dist：项目通过webpack打包发布后的文件夹（3）node_modules：安装node后用来存放用包管理工具下载安装的包的文件夹。比如webpack等等（4）public：项目在浏览器运行时的配置包括标题头图等文件夹（5）src：项目源码文件夹（6）assets：项目资源文件夹（7）css：css样式文件夹，其中划分成各个视图文件夹。（8）img：图片资源文件夹，其中划分成各个视图文件夹。（9）common：放项目公共的js文件（常量、混入、工具类）（10）component：放.vue组件文件夹（11）common：为下个项目可能用到的共有组件文件夹（12）navbar：封装项目导航栏的组件文件夹（13）scroll：封装better-scroll框架的文件夹（14）swiper：封装轮播图组件的文件夹（15）tabbar：封装底部标签栏的文件夹（16）toast：封装弹出提示框的文件夹（17）content：为当前业务才会用到的组件文件夹（18）backTop