基于uniapp实现电子书城开发--《掌上阅读》APP开发
·
目 录
目 录 1
第一章 绪论 1
1.1 研究背景 1
1.2 研究意义 1
1.3 国内外概况 1
第二章 关键技术介绍 3
2.1 开发环境介绍 3
2.2 uniapp 3
2.3 Vue.js 3
2.4 MySQL数据库 4
2.5 Navicat 4
第三章 系统的总体设计 5
3.1 系统需求分析 5
3.2 系统实现的目标 5
第四章 系统总体实现 6
4.1 首页 6
4.2 视频 6
4.3 列表 7
4.4 我的 8
第五章 系统测试 10
5.1 测试的目的 10
5.2 测试的环境与条件 10
5.3 测试方法 10
结 论 13
参考文献 14
致 谢 15
第三章 系统的总体设计
3.1 系统需求分析
电子书城主要有两类用户：管理电子书城的管理员。以及电子书城进行查看阅读的前台用户。针对这些用户具体的功能模块，本文主要在后面的章节进行详细介绍。但在此基础上，其所需的主要功能需求都必须具备。系统管理员能够查看及操作书籍、订单、分类条目，而普通用户能查看热门书籍，评论，书籍详情。电子书城应当具有可靠性、高效性、可维护性、易操作性及易推广性[4]。可靠性说的就是我们在设计电子书城的时候，应该减少系统的错误。高效性是指电子书城在保证准确性的基础上，需要确保信息能够及时发布。可维护性也是就是在管理的时候，对于电子书城的那些数据，很轻松的就能够修改掉。易操作性及易推广性是指系统界面应当突出重点，做到书籍商城的主要功能使用户一目了然，并且易于操作，为系统用户提供尽可能的便利[5]。
3.2 系统实现的目标
电子书城的开发主要要实现的目标有以下几个方面：
(1)界面设计友好、美观。
(2)数据存储安全、可靠。
(3)信息分类清晰、准确。
(4)强大的查询功能，保证数据查询的灵活性。
(5)实现对图书上架和下架图书的全程数据信息跟踪。
(6)实现增删改查，提供图书借阅排行榜，为图书管理员提供了真实的数据信息。
(7)提供灵活、方便的权限设置功能，使整个系统的管理分工明确。
(8)具有易维护性和易操作性。
<template>
<view>
<!-- 标题栏和状态栏占位符 -->
<!-- <view class="titleNview-placing"> </view> -->
<view class="home-header pd5_15" :style="'background: '+mbgColor+';'">
<view class="home-mendian flex alcenter space plr15 cl-w9">
<navigator style="width: calc(100% - 80rpx);" url="/pages/client/tuan/ss">
<view class="flex alcenter" style="width: calc(100% - 80rpx);">
<text class="iconfont iconicon_location02 ft14 mr10"></text>
<text class="text-over ft14" style="width: calc(100% - 60rpx);">请输入搜索内容</text>
</view>
</navigator>
<text @click="saoma()" class="iconfont iconicon_saoma ft24"></text>
</view>
<view class="mt10">
<home-banner :banners="banners"></home-banner>
</view>
</view>
<view class="integral-mall-main plr15" style="margin-top: 140upx;">
<view class="integal-mall-menu flex pt16 pb16">
<view class="col2 text-center bd-left" @click="linkTo" data-link="/pages/client/tuan/ss?selectIndex=3">
<view>
<image style="width: 60rpx; height: 60rpx;" :src="statics.zhuico[2]"></image>
</view>
<view class="ft14 ftw600 mt6">精品小说</view>
</view>
<view class="col2 text-center" @click="linkTo" data-link="/pages/client/tuan/ss?selectIndex=1">
<view>
<image style="width: 60rpx; height: 60rpx;" :src="statics.zhuico[0]"></image>
</view>
<view class="ft14 ftw600 mt6">热门视频</view>
</view>
<view class="col2 text-center bd-left" @click="linkTo" data-link="/pages/client/tuan/ss?selectIndex=2">
<view>
<image style="width: 60rpx; height: 60rpx;" :src="statics.zhuico[1]"></image>
</view>
<view class="ft14 ftw600 mt6">有声读物</view>
</view>
<!-- /pages/client/integral/role -->
<view class="col2 text-center bd-left" @click="linkTo" data-link="/pages/client/indexpic">
<view>
<image style="width: 60rpx; height: 60rpx;" :src="statics.zhuico[5]"></image>
</view>
<view class="ft14 ftw600 mt6">精美壁纸</view>
</view>
</view>
<view class="mt24" v-if="dataindex[1]">
<view class="flex alcenter space">
<view class="flex alcenter">
<image style="width: 40rpx;height: 40rpx;" :src="statics.zhuico[0]"></image>
<text class="ft16 ftw600 cl-main ml15">推荐视频</text>
</view>
<navigator url="/pages/client/tuan/ss?selectIndex=1">
<view class="ft14 cl-notice">更多</view>
</navigator>
</view>
<view class="mt16 flex space">
<block v-for="(value,key) in dataindex[1]" :key="key" v-if="key<2">
<view class="box pb10" style="width: 49%; position: relative;" @click="detail(value.id,value.lx)">
<view class="btn-mini" style="position: absolute; top: 20upx; right: 20upx; border-radius: 10upx;font-size: 18upx;width: 60upx; height: 36upx; z-index: 1;" :style="getBtnStyle">{{value.lxname}}</view>
<image class="integral-mall-goods" mode="aspectFill" :src="value.img"></image>
<view class="mt8 plr10 ft14 ftw600 text-center text-over cl-main">{{value.name}}</view>
<view class="text-center mt5 ft12 cl-notice">¥{{value.price}}</view>
<view class="flex alcenter center mt5">
<image :src="statics.integralImg01" style="width: 32rpx; height: 32rpx;"></image>
<text class="ft14 cl-orange ftw600">会员价 ¥{{value.vipprice*1}}</text>
</view>
</view>
</block>
</view>
</view>
<view class="mt24" v-if="dataindex[2]">
<view class="flex alcenter space">
<view class="flex alcenter">
<image style="width: 40rpx;height: 40rpx;" :src="statics.zhuico[1]"></image>
<text class="ft16 ftw600 cl-main ml15">精品音频</text>
</view>
<navigator url="/pages/client/tuan/ss?selectIndex=2">
<view class="ft14 cl-notice">更多</view>
</navigator>
</view>
<block v-for="(value,key) in dataindex[2]" :key="key" v-if="key<3">
<view class="box pd16_15 flex alcenter mt16" style="position: relative;" @click="detail(value.id,value.lx)">
<view class="btn-mini" style="position: absolute; top: 40upx; left: 40upx; border-radius: 10upx;font-size: 18upx;width: 60upx; height: 36upx; z-index: 1;" :style="getBtnStyle">{{value.lxname}}</view>
<image class="integral-tuan-l" mode="aspectFill" :src="value.img"></image>
<view class="pl15" style="width: calc(100% - 240rpx);">
<view class="ft14 cl-main ftw600 text-over">{{value.name}}</view>
<view class="flex alcenter space mt12 cl-notice">
<view class="flex alcenter">
<text class="ft12 text-line">¥{{value.price}}</text>
</view>
<view class="flex alcenter">
<text class="ft12">{{value.updatetime}}</text>
</view>
</view>
<view class="mt12 flex alend space">
<view class="flex alcenter">
<image :src="statics.integralImg01" style="width: 32rpx; height: 32rpx;"></image>
<text class="ft14 cl-orange ftw600">会员价 ¥{{value.vipprice}}</text>
</view>
</view>
</view>
</view>
</block>
</view>
<view class="mt24" v-if="dataindex[3]">
<view class="flex alcenter space">
<view class="flex alcenter">
<image style="width: 40rpx;height: 40rpx;" :src="statics.zhuico[2]"></image>
<text class="ft16 ftw600 cl-main ml15">热门小说</text>
</view>
<navigator url="/pages/client/tuan/ss?selectIndex=3">
<view class="ft14 cl-notice">更多</view>
</navigator>
</view>
<view class="mt16 flex space ">
<block v-for="(value,key) in dataindex[3]" :key="key" v-if="key<2">
<view class="integral-mall-coupon" style="height: 420upx; width: 49%;" @click="detail(value.id,value.lx)">
<view class="top">
<view class="flex center">
<view class="coupon-value" style="position: relative; ">
<view class="btn-mini" style="position: absolute; top: 10upx; right: 10upx; border-radius: 10upx;font-size: 18upx;width: 60upx; height: 36upx; z-index: 1;" :style="getBtnStyle">{{value.lxname}}</view>
<image class="integral-tuan-l" style="height: 230upx;" mode="aspectFill" :src="value.img"></image>
<!--<view class="num cl-orange">
<text class="ft24 ftw600">¥</text>
<text class="ft24 ftw600 ml4">20</text>
</view> -->
</view>
</view>
<view class="ft14 plr10 cl-main ftw600 text-center text-over">{{value.name}}</view>
<view class="text-center mt8 ft12 cl-notice">¥{{value.price*1}}</view>
<view class="flex alcenter center mt7">
<image :src="statics.integralImg01" style="width: 32rpx; height: 32rpx;"></image>
<text class="ft14 cl-orange ftw600">会员价 ¥{{value.vipprice*1}}</text>
</view>
</view>
<view class="y-l"></view>
<view class="y-r"></view>
</view>
</block>
</view>
</view>
</view>
<home-default :datasa="datasa"></home-default>
<!-- <com-footer model="index"></com-footer> -->
</view>
</template>
<script>
export default{
data(){
return {
navLock:false,
datasa:[],
showdyxx:true,
dataconfig:[],
banners:[],
datainfo:[],
dataindex:[],
mbgColor:this.$mbgColor,
}
},
computed:{
},
onPageScroll(e){
if(e.scrollTop > 44){
if(this.navLock == false){
this.navLock = true;
uni.setNavigationBarColor({
frontColor:"#000000",
backgroundColor:"#FFFFFF",
complete:()=>{
this.navLock = false;
}
});
}
}else{
if(this.navLock == false){
this.navLock = true;
let this_=this
uni.setNavigationBarColor({
frontColor:"#ffffff",
backgroundColor:this_.mbgColor,
complete:()=>{
this.navLock = false;
}
});
}
}
},
onShareAppMessage(e){
},
onShareTimeline(e){
},
onLoad(e){
//this.getList();
},
onShow() {
this.getList();
this.getList(1);
this.getList(2);
this.getList(3);
let this_=this
},
methods:{
getList(lx) {
let this_=this
let data = {};
var limit=15;
if(lx){
data.limit=4
}else{
data.limit=limit
}
data.ishot=2
if(lx){
data.lx=lx
}
uni.request({
url: this.configs.webUrl+'/api/video/lists',
data: data,
success: data => {
//console.log(data.data)
uni.setStorage({//缓存配置信息
key: 'config',
data: data.data.config
})
this.banners=data.data.config.banner
if(data.data.config.name){
uni.setNavigationBarTitle({
title: data.data.config.name
});
}
if(data.data.config.mbgColor){
this.mbgColor=data.data.config.mbgColor
uni.setNavigationBarColor({
frontColor:"#ffffff",
backgroundColor:this_.mbgColor,
complete:()=>{
this.navLock = false;
}
});
}
if (data.data.total>0) {
this.dataconfig=data.data.config
if(lx){
this.dataindex[lx]=data.data.rows
}else{
this.datasa=data.data.rows
}
}
},
fail: (data, code) => {
}
});
},
saoma(){
//#ifdef APP-PLUS
uni.scanCode({
success: function (res) {
if(res.result.indexOf("uid") != -1){
var obj = JSON.parse(res.result);
if(obj.uid){
uni.navigateTo({
url:'/pages/login/reg?uid='+obj.uid
})
}
}else{
uni.showToast({ title: res.result,icon:"none" });
}
}
});
//#endif
},
detail(id,lx){
console.log(lx);
if(lx==1){
uni.navigateTo({
url:'/pages/client/tuan/detail?id='+id
})
}else if(lx==2){
uni.navigateTo({
url:'/pages/client/tuan/info?id='+id
})
}else if(lx==3){
uni.navigateTo({
url:'/pages/client/tuan/info?id='+id
})
}else if(lx==4){
uni.navigateTo({
url:'/pages/client/tuan/infotp?id='+id
})
}else{
uni.navigateTo({
url:'/pages/client/tuan/list?id='+id
})
}
},
linkTo(e){
if(this.isLogin == false){
this.showLogin = true;
}else{
let link = e.currentTarget.dataset.link;
uni.navigateTo({
url:link
})
}
},
exchange(e){
if(this.isLogin == false){
this.showLogin = true;
}else{
let id = e.currentTarget.dataset.id;
uni.navigateTo({
url:'/pages/client/integral/exchange?id='+id
})
}
},
},
}
</script>
<style>
.home-header{
height: 200rpx;
width: 100%;
position: relative;
border-radius: 0rpx 0rpx 48rpx 48rpx;
}
.home-main{
width: 100%;
position: relative;
margin-top: -156rpx;
padding: 0 30rpx;
}
.home-mendian{
width: 100%;
height: 84rpx;
background:rgba(255,255,255,0.1);
border-radius: 42rpx;
}
.integral-mall-header{
position: relative;
height: 320rpx;
}
.integral-mall-header .bg{
width: 100%;
height: 320rpx;
}
.integral-mall-header .main{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 320rpx;
}
.swiper-integral{
height: 32rpx;
width: 100%;
}
.integral-mall-main{
position: relative;
margin-top: -104rpx;
}
.integal-mall-menu{
width: 100%;
height: 176rpx;
background: #FFFFFF;
border-radius: 20rpx;
}
.integral-tuan-l{
width: 240rpx;
height: 180rpx;
background: #f2f2f2;
border-radius: 16rpx;
}
.integral-mall-coupon{
height: 408rpx;
width: 330rpx;
background: #FFFFFF;
position: relative;
border-radius: 16rpx;
overflow: hidden;
}
.integral-mall-coupon .top{
padding: 0rpx 0rpx 24rpx 0rpx;
border-bottom: 2rpx dashed #FEC675;
}
.integral-mall-coupon .y-l,.integral-mall-coupon .y-r{
width: 20rpx;
height: 20rpx;
border-radius: 10rpx;
background: #F5F6FA;
position: absolute;
z-index: 2;
top: 284rpx;
}
.integral-mall-coupon .y-l{
left: -10rpx;
}
.integral-mall-coupon .y-r{
right: -10rpx;
}
.integral-mall-coupon .coupon-value{
width: 100%;
height: 250rpx;
position: relative;
}
.integral-mall-coupon .coupon-value image{
width: 100%;
height: 180rpx;
}
.integral-mall-coupon .coupon-value .num{
width: 100%;
height: 64rpx;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 0;
top: 0;
}
.integral-mall-goods{
width: 100%;
height: 200rpx;
background: #F2F2F2;
border-radius: 16upx;
}
.titleNview-placing {
height: var(--status-bar-height);
padding-top: 44px;
box-sizing: content-box;
}
</style>
北京人形旗下天工造物具身智能开源社区，聚焦具身天工与慧思开物两大平台
更多推荐
17
0- 0
已为社区贡献31条内容
所有评论(0)