# uniapp图书商城

**Repository Path**: aimh/uni-book-shop

## Basic Information

- **Project Name**: uniapp图书商城
- **Description**: 用uniapp写的图书商城，下载即用，README文档详细，可用作大作业
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2024-05-15
- **Last Updated**: 2024-05-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

**项目名称**

**基于vue的图书商城app的设计和实现**



**目 录**

[1. 概述](#_Toc90500162)

[1.1 项目背景](#11-项目背景)

[1.2国内外研究状况](#12国内外研究状况)

[1.3 研究的主要内容](#13-研究的主要内容)

[2. 相关技术](#相关技术)

[3. 系统分析](#系统分析)

[4. 系统设计](#_Toc90500168)

[4.1 功能模块的流程说明](#41-功能模块的流程说明)

[4.2 数据库设计](#42-数据库设计)

[4.3系统功能原型设计](#43系统功能原型设计)

[4.3.1图书商城首页设计](#_Toc90500172)

[5. 系统实现](#_Toc90500173)

[6. 系统测试](#系统测试)

[7. 总结](#总结)

[7.1难点分析](#_Toc90500176)

[7.2 解决方案](#_Toc90500177)



# 1.概述

## 1.1 项目背景

随着国家it行业的迅速发展，在通过查询资料，参考CSDN注册用户数和知乎及悟空问答等一些问题的情况下，预估中国程序员至少有180万。中国已发展成为世界上程序员最多的国家。如今，传统行业的就业形势十分严峻，一些人想转入it程序员行业进行深入学习研究。“互联网”作为学习和沟通交流的桥梁，为it行业的交流带来了方便的网络条件和重大变革。相较于it书籍传统的营销模式，电商模式则具备渠道链条短、进入成本低等显著优势。如何挖掘线上潜力，拓展程序员消费群体成为当前书籍市场所面临的一大困境。根据上述状况，开发了基于 Vue.js框架的it图书商城与电子商务平台，为其取名为“it书城”平台。

## 1.2国内外研究状况

国内研究状况

Vue 已经具备了商业项目开发的必备条件，如语法精炼、优雅而简洁、代码的可读性高，当然，还有商业项目开发最为看重的与第三方控件的结合能力。正是这些能力，确保了“后浪” Vue 能够与 React、Angular 等老牌前端开发框架并驾齐驱，在国内开发者当中占据越来越重要的位置，逐渐有发展成为国内三大前端框架之首的趋势。不过，在大家看来，Vue 作为近几年发展最快的JS框架， 其崛起主要原因不单单是因为粉丝的过度追捧，也并不是因为某个大公司的权威推动。和 React、Angular 相比，Vue 在可读性、可维护性和趣味性之间做到了很好的平衡。很多初学者能够在短时间内就能完成一个Vue的项目。

国外研究状况

Vue的使用在国外整体占有率整体稳步提升。npm 的数据跟 React 比维持在 1:4 左右的比例。Vue 插件的周活是 1.92M（stable 1.7M + beta 0.22M），换言之纯 web 端的占有比例在 1:2 ～ 1:1.5 之间。是很高的一个使用占比。说明了vue框架在国外被越来越多的人群使用，并且这个数据随着时间还会不断增长。

## 1.3 研究的主要内容

本项目研究it行业书籍的电商平台开发。

# 2.相关技术

本项目采用一套用于构建用户界面的渐进式框架—vue框架，依据Vue被设计为可以自底向上逐层应用的特性，核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。页面文件遵循 Vue 单文件组件 (SFC) 规范，组件标签靠近小程序规范，接口能力（JS API）靠近微信小程序规范，数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期。

本项目使用Hbuilder的ide进行开发。下载Hbuilder的ide进行可视化界面代码编辑，在安卓手机进行测试，最后进行app云打包发行。

# 3.系统分析

从上面的功能描述中，可以把图书商城系统分为4个模块，如图3.1所示。

![](media/6d5b96ba84b5e2e174f7b1dea3b14a1f.png)

1、搜索系统模块

该模块主要是在分类界面进行图书名的检索。

2、购物车系统模块

该模块主要用于对购物车进行增加、删除、全选的操作。

3、注册登录模块

该模块用于对用户进行注册和登录

# 4.系统设计

## 4.1 功能模块的流程说明

1、用户登录模块

在登录模块的设计中，用户输入邮箱、密码，系统将得到的登录信息与数据库中的用户信息进行比对，当用户账号存在且密码与验证码正确的话，则登录成功，系统将根据用户的权限级别跳转到相应的主界面，若用户账号不存在、密码或验证码错误则无法进行登录，将在登录页面弹窗提示错误。登录模块的时序图如图 4.1 所示。![](media/a39d935d873530137b5305e4acbb9db2.png)

图4.1 用户登录模块时序图

2.用户浏览商品模块

在浏览商品模块的设计中，用户通过打开搜索界面，来到搜索页面，用户可以根据查询条件，对商品的不同分类，价格等进行筛选，找到自己心仪的商品，输入相应商品的字段，提交到数据库，接着数据库查询到相应的符合条件的商品后，会返回查询的结果。

![](media/9aff67b86d6592ab04e4a0ef2f7bebe0.png)

## 4.2 数据库设计

1、用户表

| **字段**          | **类型**     | **注释**                  |
|-------------------|--------------|---------------------------|
| id                | int(11)      | 自增长主键ID              |
| name              | varchar(255) | 昵称                      |
| email             | varchar(255) | 邮箱                      |
| password          | varchar(255) | 密码                      |
| phone             | varchar(255) | 手机                      |
| avatar            | varchar(255) | 头像                      |
| is_locked         | int(4)       | 用户禁用状态: 0正常 1禁用 |
| password_verified | timestamp    | 邮箱认证时间              |
| remember_token    | varchar(255) | 记住我token               |
| created_at        | timestamp    | 添加时间                  |
| updated_at        | timestamp    | 修改时间                  |

2.商品表

| **字段**     | **类型**     | **注释**               |
|--------------|--------------|------------------------|
| id           | int(11)      | 自增长主键ID           |
| user_id      | int          | 创建者                 |
| category_id  | int          | 分类                   |
| title        | varchar(255) | 标题                   |
| description  | varchar(255) | 描述                   |
| price        | int          | 价格                   |
| stock        | int          | 库存                   |
| cover        | varchar(255) | 封面图                 |
| pics         | json         | 小图集                 |
| details      | text         | 详情                   |
| sales        | int          | 销量                   |
| is_on        | int          | 是否上架 0不上架 1上架 |
| is_recommend | int          | 是否推荐 0不推荐 1推荐 |
| created_at   | timestamp    | 添加时间               |
| updated_at   | timestamp    | 修改时间               |

3.购物车表

| **字段**   | **类型**  | **注释**              |
|------------|-----------|-----------------------|
| id         | int(11)   | 自增长主键ID          |
| user_id    | int(11)   | 用户ID                |
| goods_id   | int(11)   | 商品ID                |
| num        | int       | 商品数量              |
| is_checked | int       | 是否选择: 0不选 1选中 |
| created_at | timestamp | 添加时间              |
| updated_at | timestamp | 修改时间              |

## 4.3系统功能原型设计

4.3.1图书商城首页设计

网站前台网站首页在在设计上应该让消费者产生愉悦的心情。该页面采用蓝色色调，网页在上方设置了轮播图片播放模式，中上部导航栏上放了上放置了“默认”、“销量”、“推荐”、“最新”四个栏目，这样用户在进入网站时就能根据自己的需要选择栏目。

# 5.系统实现

1.注册登录界面

![](media/df0de8552236e8e188061c1cc3a48013.jpeg)![](media/a243f1e472970bd00507e0e0eaad32bf.jpeg)![](media/82d5f7274a3c6f8d5985cccbc677aa84.jpeg)![](media/575bb077b6b087bdd93153346837a3dd.jpeg)如图5.1所示，在该界面中可以实现用户的登录。在未登录状态时一些信息无法显示。

**图5.1 登录**

实现该模块的核心代码如下：

``` vue
<template>
	<view>
		<view class="u-flex user-box u-p-30">
			<view class="u-m-r-10 avatar" @tap="previewImage">
				<u-avatar :src="vuex_user.avatar_url" size="140"></u-avatar>
			</view>
			<view class="u-flex-1" v-if="Object.keys(userInfo).length">
				<view class="u-font-18 u-p-b-20">Estella</view>
				<view class="u-font-14 u-tips-color">
					<text>邮箱: {{userInfo.email}}</text>
					<br>
				</view>
			</view>
			<view class="u-flex-1" v-else  @tap="$u.utils.isLogin()">
				<view class="u-font-18 u-p-b-20">未登录</view>
			</view>
		</view>
		
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="account" title="修改信息" @tap="updateMsg"></u-cell-item>
			</u-cell-group>
		</view>
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="star" title="商品收藏" @tap="showCollect"></u-cell-item>
			</u-cell-group>
		</view>
		<view class="u-m-t-20" v-if="Object.keys(userInfo).length">
			<u-button type="error" :ripple="true" @click="showLoginout">退出登录</u-button>
		</view>
		<!-- 退出登录模态框 -->
		<u-modal v-model="isShowLoginout" content="确定退出登录吗？" :show-cancel-button="true" @confirm="loginOut" @cancel="showLoginout"></u-modal>
	</view>
</template>

```



2.首页界面

![](media/080ab6a055a96147ecc0e8ba18e6bd8d.jpeg)![](media/9a99842207108ff6973b11b6e1b26801.jpeg)![](media/d2a9cc7eff445e7a2c4df24e5b5d55b8.png)![](media/3da0a2efae0aa2a20a2f82f2c1a80709.jpeg)最上面是轮播图，下面是书籍的简要介绍，将书籍分为了默认、销量、推荐、最新四个分类。

**图5.2 首页界面**

实现该模块的核心代码如下：

``` vue
<template>
	<view class="u-p-b-20">
		<u-swiper :list="swperList" height="328" name="img_url"></u-swiper>
		<!-- tabs -->
		<view class="u-text-center u-m-t-20">
			<u-tabs :gutter="20" :item-width="160" :bar-height="12" :list="sortList" :current="sortCurrent" @change="sortChange"></u-tabs>
		</view>
		<u-row gutter="16"  class="u-skeleton">
			<u-col span="6" v-for="(goods,index) in goodsList.length ? goodsList : 4" :key="index">
				<goods-card :goods="goods"></goods-card>
			</u-col>
			<u-col span="12">
				<u-loadmore :status="isShowLoading" icon-color="#2979ff" color="#2979ff" />
			</u-col>
		</u-row>
		<!-- 返回顶部 -->
		<u-back-top :scroll-top="scrollTop"></u-back-top>
		<!-- 骨架屏 -->
		<u-skeleton :loading="loading" :animation="true" bgColor="#fff"></u-skeleton>
	</view>
</template>

<script>
	export default {
		async onLoad() {
			this.getIndexData()
			// await this.$u.api.setBanner(81,params)
			// // await this.$u.api.sortBanner(81,1)
			// const res=await this.$u.api.getBanner()
			// console.log(res)
		},
		data() {
			return {
				swperList: [],
				goodsPage:1,
				goodsList:[],
				sortList: [
					{name:"默认"},
					{name:"销量"},
					{name:"推荐"},
					{name:"最新"},
				],
				sortCurrent: 0,
				isShowLoading:'loading',
				loading: false, // 是否显示骨架屏组件
				scrollTop: 0,
			}
		},
		methods: {
			sortChange(index) {
				this.sortCurrent = index;
				// 重置商品数据和分页
				this.page=1
				this.goodsList=[]
				this.getIndexData()
			},
			
			async getIndexData(){
				this.loading=!this.loading
				const params = {
					page:this.goodsPage
				}
				// 判断tabs
				if(this.sortCurrent===1) params.sales=1
				if(this.sortCurrent===2) params.recommend=1
				if(this.sortCurrent===3) params.new=1
				// 拿到首页商品数据
				const indexData = await this.$u.api.getIndex(params)
				this.swperList=indexData.slides
				// 将分页数据累加上
				this.goodsList.push(...indexData.goods.data)
				this.loading=!this.loading
			}
		},
		onReachBottom() {
			// 如果请求到的数据不再是10条，说明数据到底
			if(this.goodsList.length % 10 ==0){
				this.goodsPage++
				this.getIndexData()
			}else{
				this.isShowLoading="nomore"
			}
		},
		onPageScroll(e) {
			// 返回顶部
			this.scrollTop = e.scrollTop;
		}
	}
</script>

```



3.分类模块

![](media/0914e6c585aba1002b93ab5e4e939bce.jpeg)左边为书籍品类导航，根据导航实时显示当前类型的所有书籍

4.购物车界面

实现购物车的增加删除选中

# 6.系统测试

针对上述的测试项目，设计了下表6.1-6.5的各个功能的测试用例。

表6. 1 测试用例

| 测试项目名称：普通用户登录                                   |                                                              |                       |
| ------------------------------------------------------------ | ------------------------------------------------------------ | --------------------- |
| 测试用例编号： TestCase-FUNC-01                              | 测试人员：  zzz                                              | 测试时间： 2021.12.15 |
| 测试项目标题：身份登录功能测试                               |                                                              |                       |
| 测试内容： 验证身份登录功能正常                              |                                                              |                       |
| 测试输入数据：                                               | 1.用户名：[test@a.com](mailto:test@a.com) 密码：123123 2.用户名：[super@a.com](mailto:super@a.com) 密码：123123 2.用户名：[super@a.com](mailto:super@a.com) 密码：456456 |                       |
| 测试次数：每个测试过程做2次。                                |                                                              |                       |
| 预期结果： 可以正确验证身份                                  |                                                              |                       |
| 测试过程：按提示输入以下三种数据：  1. [test@a.com](mailto:test@a.com) 123123 [2.super@a.com](mailto:2.super@a.com) 123123 3. [super@a.com](mailto:super@a.com) 456456 |                                                              |                       |
| 测试结果： 1.输出“登录成功”信息  2.输出“登录成功”信息 3.输出“用户名或密码错误！”错误信息 |                                                              |                       |
| 测试结论： 身份登录功能                                      |                                                              |                       |

# 总结

## 7.1难点分析

在项目开发中遇到的主要困难是组件的调用与项目的结合和api的调用，数据的整合和调用，未登录与登录状态时页面的区别。

## 7.2 解决方案

针对程序设计过程中遇到的困难，我采取了积极有效的解决方法：从官方文档上寻找答案、上csdn搜索以及向有经验的人员请教，及时发现导致程序出现错误的问题。最终经过反复的调试及测试，解决了上述的难点，实现了数据库连接、页面跳转等功能。

## 7.3 答辩问题

1.登录界面如何与数据库联系

登录界面打开后，输入邮箱和密码，通过双向绑定可以获取到输入的数据，登录中运用submit的点击事件，获取到后台/api/auth/login的登录数据，进行数据校验，如果一致，则执行登录操作，否则登录失败。

2.书本的具体信息如何显示

在商品文件夹中建立goods-details.vue文件，写出商品详情的骨架模板，:url="\`/pages/goods/goods-detail/goods-detail?id=\${goods.id}\`表示双向绑定的点击跳转事件的路径。点击后，即可实现书本的具体信息。