基于Java+Vue+uniapp微信小程序音乐播放器设计和实现
科技的发展赋予了听音乐新的途径,微信小程序名词的出现改变了用户生活的习惯,同时也为管理者打开了新的市场。微信小程序也可以理解为利用小程序来解决需求,这种方式可以打破时间和地点的限制,可以为用户提供随时听歌的平台,用户可以在平台上随时找喜欢的歌曲进行播放。微信小程序的音乐播放器将用户与音乐更加紧密的结合在一起,减少时间与地点的问题。本基于微信小程序的音乐播放器采用微信端和服务端相结合的方式进行开发。
博主介绍:✌全网粉丝30W+,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌
🍅文末获取源码联系🍅
👇🏻 精彩专栏推荐订阅👇🏻 不然下次找不到哟
2022-2024年最全的计算机软件毕业设计选题大全:1000个热门选题推荐✅
感兴趣的可以先收藏起来,还有大家在毕设选题,项目以及论文编写等相关问题都可以给我留言咨询,希望帮助更多的人
系统介绍:
科技的发展赋予了听音乐新的途径,微信小程序名词的出现改变了用户生活的习惯,同时也为管理者打开了新的市场。微信小程序也可以理解为利用小程序来解决需求,这种方式可以打破时间和地点的限制,可以为用户提供随时听歌的平台,用户可以在平台上随时找喜欢的歌曲进行播放。微信小程序的音乐播放器将用户与音乐更加紧密的结合在一起,减少时间与地点的问题。
本基于微信小程序的音乐播放器采用微信端和服务端相结合的方式进行开发。在服务端采用java语言和mysql数据库进行设计,在运行中需要idea软件的调试。本系统就是采用随听随放的理念进行开发,用户可以在系统上浏览不同歌曲,找到符合要求的歌曲就可以在线播放,也可以在线评论;评论后可以收到其它用户的回复。为了更加方便用户使用本系统,本系统中也加入了会员办理的功能,用户办理了会员后可以享受会员优惠。本系统的实现可以帮助用户听音乐,非常符合现代人的音乐需求。
一般对系统的模块总体设计采用层次图来设计,层次图属于一种树形图,也就是利用一层一层的图形来表达不同的关系。可以由一些特定的线条和矩形来表达不同的意思。下一层为上一层的子集,可以根据实际情况进行不同的分割,一般都为三层结构。
本系统分为用户和管理员两个角色,用户的操作主要为微信端,管理员的操作为服务端。用户在微信端可以根据不同的分类浏览歌曲,可以播放、收藏和评论,办理会员和管理收藏信息等;管理员可以管理歌曲信息、用户信息、会员优惠信息以及会员办理和会员信息等。用户和管理员的功能相互串连形成完整的基于微信小程序的音乐播放器。
根据用户和管理员的功能可以分为微信端和服务端两个界面,在微信端中主要的功能为:
- 歌曲信息功能,根据不同的分类进行歌曲的展示;
- 查询功能,用户可以根据不同的字段来进行特定歌曲的搜索,本功能是一个系统最基本的功能;
- 评论功能,在歌曲的详情里可以直接评论;
- 用户管理功能,包括注册用户和对用户资料的信息;
- 会员优惠信息功能,可以查看管理员发布的会员优惠;
- 会员办理功能,可以购买会员卡成为会员享受优惠;
- 收藏管理功能,可以管理收藏记录。
本系统的管理员服务端功能包括:
- 歌曲信息管理功能,对歌曲进行上传、删除、编辑;
- 个人中心管理功能,对管理员账号、密码进行管理;
- 会员优惠管理功能,对会员优惠进行发布和管理;
- 歌曲分类信息管理功能,可以管理分类信息;
- 会员办理管理功能,包括查询会员办理信息和审核会员办理信息;
- 会员信息管理功能,可以管理会员信息;
- 用户管理功能,查询和管理用户的信息。
本系统的服务端功能模块结构图如下图3.2所示:
程序上交给用户进行使用时,需要提供程序的操作流程图,这样便于用户容易理解程序的具体工作步骤,现如今程序的操作流程都有一个大致的标准,即先通过登录页面提交登录数据,通过程序验证正确之后,用户才能在程序功能操作区页面操作对应的功能。
程序操作流程图
相关技术框架
Vue框架
Vue是最近几年最火的前端应用,在H5以及APP和小程序上面,有着很大的市场份额。作为一个不断的向前发展的生态系统,Vue不仅仅只是作为了网页的开发,Vue的概念主要是让以前静态写的DOM,变成了动态生成,超快运行虚拟DOM,DOM就是HTML里面W3C设置的标准,是文档对象模型。使用Vue,让文档对象生成变得更加智能化,在使用过程中对该机构进行访问,就能改变文档的结构、样式以及内容。让用户能体现到极简界面,急速打开,从上往下的打开层次感,使用的更加舒适。
微信小程序
小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。尤其拥抱微信生态圈,让微信小程序更加的如虎添翼,发展迅猛。
uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。
DCloud公司拥有800万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件。
uni-app在手,做啥都不愁。即使不跨端,uni-app也是更好的小程序开发框架更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目,你都可以快速交付,不需要转换开发思维、不需要更改开发习惯。
功能截图:
4.1系统运行平台设置
想要本系统运行,需要硬件和软件两个环境的支持。本系统服务端的硬件环境为电脑一台,软件环境为windows操作系统和idea软件以及mysql数据库。微信端的环境为手机一部和微信开发者工具。
4.2系统首页界面的设计实现
系统的首页可以看到标题、功能导航栏、搜索框、歌曲信息等,在首页的上方可以看到搜索框、背景图片。系统首页的功能设计效果如下图4.1所示:
图4.1系统首页界面的运行效果图
4.3用户注册功能的设计实现
为了保证系统的安全性和满足用户的听歌要求,用户需要先进行注册才可以进行操作,用户注册时需要注意表单信息的填写,在表单信息填写完成后,系统可以实现对表单信息进行自我检测,当检测为正确时,可以实现注册成功,当有信息检测为错误时会提示重新填写。用户注册成功后系统会把填写的表单保存到数据库中。用户注册的实现界面如下图4.2所示:
图4.2用户注册功能的界面实现
4.4用户登录功能的设计实现
用户注册完成后,可以点击登录功能进行登录,在登录时会进行账号和密码的数据验证,账号和密码验证正确则登录成功,账号和密码验证错误则登录失败,需要重新登录。用户登录功能的实现界面如下图4.3所示:
图4.3用户登录功能实现界面效果
4.5用户个人信息修改功能设计实现
用户登录后可以对自己的个人资料进行修改维护,包括对图片的设置,在用户个人信息修改界面设置了保存按钮和退出登录按钮,方便用户提交和重新填写信息。用户个人信息修改功能的实现界面如下图4.4所示:
图4.4用户个人信息修改实现界面
4.6歌曲信息功能的设计实现
歌曲信息为基本的功能,歌曲信息可以按照推荐进行排名,对于歌曲信息的展示以图片展示为主,可以使用户更加的一目了然,歌曲信息的实现界面如下图4.5所示:
图4.5歌曲信息实现运行效果界面
4.7评价功能的设计实现
在看到喜欢的歌曲后可以在线评论。评论功能的设计界面如下图4.6所示:
图4.6评论功能的运行效果界面
4.8会员优惠功能界面的设计实现
用户可以通过本功能进行会员卡的信息了解。会员优惠功能的界面实现如下图4.7所示:
图4.7会员优惠功能的运行界面实现
4.9会员办理功能的设计实现
用户可以选择会员优惠进行会员卡的办理。会员办理功能的界面实现如下图4.8所示:
图4.8会员办理功能的运行效果界面
4.10我的功能的界面实现
在我的功能里可以查询会员优惠和进行会员办理以及管理会员信息、收藏信息,实现界面如下图4.9所示:
图4.9我的功能的实现界面
4.11管理员功能模块的设计实现
管理员可以管理用户信息、歌曲信息、会员优惠信息和会员办理信息、歌曲分类信息等。管理员的实现界面如下图4.10所示:
图4.10管理员功能运行效果界面
代码实现:
package com.controller;
import java.util.Arrays;
import java.util.Calendar;
import java.util.Date;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import com.annotation.IgnoreAuth;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.entity.TokenEntity;
import com.entity.UserEntity;
import com.service.TokenService;
import com.service.UserService;
import com.utils.CommonUtil;
import com.utils.MD5Util;
import com.utils.MPUtil;
import com.utils.PageUtils;
import com.utils.R;
import com.utils.ValidatorUtils;
/**
* 登录相关
*/
@RequestMapping("users")
@RestController
public class UserController{
@Autowired
private UserService userService;
@Autowired
private TokenService tokenService;
/**
* 登录
*/
@IgnoreAuth
@PostMapping(value = "/login")
public R login(String username, String password, String captcha, HttpServletRequest request) {
UserEntity user = userService.selectOne(new EntityWrapper<UserEntity>().eq("username", username));
if(user==null || !user.getPassword().equals(password)) {
return R.error("账号或密码不正确");
}
String token = tokenService.generateToken(user.getId(),username, "users", user.getRole());
return R.ok().put("token", token);
}
/**
* 注册
*/
@IgnoreAuth
@PostMapping(value = "/register")
public R register(@RequestBody UserEntity user){
// ValidatorUtils.validateEntity(user);
if(userService.selectOne(new EntityWrapper<UserEntity>().eq("username", user.getUsername())) !=null) {
return R.error("用户已存在");
}
userService.insert(user);
return R.ok();
}
/**
* 退出
*/
@GetMapping(value = "logout")
public R logout(HttpServletRequest request) {
request.getSession().invalidate();
return R.ok("退出成功");
}
/**
* 密码重置
*/
@IgnoreAuth
@RequestMapping(value = "/resetPass")
public R resetPass(String username, HttpServletRequest request){
UserEntity user = userService.selectOne(new EntityWrapper<UserEntity>().eq("username", username));
if(user==null) {
return R.error("账号不存在");
}
user.setPassword("123456");
userService.update(user,null);
return R.ok("密码已重置为:123456");
}
/**
* 列表
*/
@RequestMapping("/page")
public R page(@RequestParam Map<String, Object> params,UserEntity user){
EntityWrapper<UserEntity> ew = new EntityWrapper<UserEntity>();
PageUtils page = userService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.allLike(ew, user), params), params));
return R.ok().put("data", page);
}
/**
* 列表
*/
@RequestMapping("/list")
public R list( UserEntity user){
EntityWrapper<UserEntity> ew = new EntityWrapper<UserEntity>();
ew.allEq(MPUtil.allEQMapPre( user, "user"));
return R.ok().put("data", userService.selectListView(ew));
}
/**
* 信息
*/
@RequestMapping("/info/{id}")
public R info(@PathVariable("id") String id){
UserEntity user = userService.selectById(id);
return R.ok().put("data", user);
}
/**
* 获取用户的session用户信息
*/
@RequestMapping("/session")
public R getCurrUser(HttpServletRequest request){
Long id = (Long)request.getSession().getAttribute("userId");
UserEntity user = userService.selectById(id);
return R.ok().put("data", user);
}
/**
* 保存
*/
@PostMapping("/save")
public R save(@RequestBody UserEntity user){
// ValidatorUtils.validateEntity(user);
if(userService.selectOne(new EntityWrapper<UserEntity>().eq("username", user.getUsername())) !=null) {
return R.error("用户已存在");
}
userService.insert(user);
return R.ok();
}
/**
* 修改
*/
@RequestMapping("/update")
public R update(@RequestBody UserEntity user){
// ValidatorUtils.validateEntity(user);
UserEntity u = userService.selectOne(new EntityWrapper<UserEntity>().eq("username", user.getUsername()));
if(u!=null && u.getId()!=user.getId() && u.getUsername().equals(user.getUsername())) {
return R.error("用户名已存在。");
}
userService.updateById(user);//全部更新
return R.ok();
}
/**
* 删除
*/
@RequestMapping("/delete")
public R delete(@RequestBody Long[] ids){
userService.deleteBatchIds(Arrays.asList(ids));
return R.ok();
}
}
论文参考:
源码获取:
大家点赞、收藏、关注、评论啦 、查看👇🏻获取微信联系方式👇🏻
精彩专栏推荐订阅:在下方专栏👇🏻
更多推荐
所有评论(0)