hello 大家好,我是老张,一个立志于做全栈开发的程序猿。
人生是没有穷尽的,所以也就没有什么所谓的归宿。
上一篇文章介绍了uni-app 的一些介绍,下面我将介绍下这个使用uni-app知识付费系统
项目简介
这个是使用uni-app 开发的一个在线教育系统一个集视频,音频,图文为一体的在线教育系统,市面上有很多知识付费系统,由于疫情的原因出现了一大批的在线教育系统,无所谓反正我是为了增长自己的技术开发的,完成之后会开源出来,提供给大家学习。目前已经在根据原型图进行开发,没错,原型图也是我设计的,根据网上的一些原型进行调整改造,这个系统采用前后端分离。前端使用uni-app 服务端使用PHP 后端VUE 进行开发,我是一个颜值控,虽然我张的不咋的。哈哈下面先给大家一睹首页的风采吧!
自我感觉还不错吧!毕竟是自己的处女作
开发感悟
做这个首页的都采用了swiper组件来开发轮播图,liuyuno-tabs 来开发选项卡,其中感觉最难的一点就是轮播图下面的那块颜色区域,没错就是搜索框部分这个地方是切换的颜色,当时也想用一张图来搞,对于设计师来说不友好,于是让他根据图片最底部的颜色进行切换,这样设计师设计只需要注意底部的图片颜色即可,这样就能无缝链接,写这个大概花费了我2个小时的时间,由于工作比较忙,经常加班,但是对于这个爱好前端的我来说,这个时间还是值得的。
底下的就是table切换了,根据上面的ID去请求对应的接口获取数据进行渲染。这个其实不难
下面的页脚采用了thour组件,没错这个首页就是我用组件拼接的。无所谓适用就行,后面有能力了慢慢优化,光有想法不行,还是需要实践。别逼逼,动手就完了
下面粘贴下我的部分代码,不足之处大家多多指教。
<template>
<view class="page_edu">
<!-- 头部模块 -->
<view class="page_edu_header">
<!-- 头部模块 -->
<view class="content" >
<swiper class="swiper-box" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
<swiper-item v-for="(item, index) in info" :key="index">
<view class="swiper-item" :style="{background:item.colorClass}">
<image class="image" :src="item.url" mode="aspectFill" />
</view>
</swiper-item>
</swiper>
</view>
<!-- 搜索模组 -->
<view class="header">
<view class="input">
<image src="/static/search.png" class="search"></image>
<input type="text" value="" placeholder="请输入搜索的课程名称" />
</view>
</view>
<!-- 搜索模组 -->
</view>
<!-- 头部模块 -->
<!-- 内容模组 -->
<view class="page_content">
<view class="WhatclssContent">
<view class="What_edu_tabs">
<liuyuno-tabs :config="defaultConfig" :tabData="tabs" />
<view class="course">
<view class="course-bottom">
<view class="course-bottom-list" >
<image src="http://zsvideo.86itn.cn/3aa0c20200602105628774.png" mode="aspectFit"></image>
<text>课程标题</text>
<text>共4课时<text>|</text>2222人已学</text>
<view class="mask">专栏</view>
</view>
<view class="course-bottom-list" >
<image src="http://zsvideo.86itn.cn/3aa0c20200602105628774.png" mode="aspectFit"></image>
<text>课程标题</text>
<text>共4课时<text>|</text>2222人已学</text>
<view class="mask">专栏</view>
</view>
<view class="course-bottom-list" >
<image src="http://zsvideo.86itn.cn/3aa0c20200602105628774.png" mode="aspectFit"></image>
<text>课程标题</text>
<text>共4课时<text>|</text>2222人已学</text>
<view class="mask">专栏</view>
</view>
<view class="course-bottom-list" >
<image src="http://zsvideo.86itn.cn/3aa0c20200602105628774.png" mode="aspectFit"></image>
<text>课程标题</text>
<text>共4课时<text>|</text>2222人已学</text>
<view class="mask">专栏</view>
</view>
<view class="course-bottom-list" >
<image src="http://zsvideo.86itn.cn/3aa0c20200602105628774.png" mode="aspectFit"></image>
<text>课程标题</text>
<text>共4课时<text>|</text>2222人已学</text>
<view class="mask">专栏</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
总结
做任何是不能光想,去做,万一实现了呢,及时没实现这个过程也是值得享受的。加油
学习开发前端第一天。