基于微信小程序的音乐播放器设计与实现(源码+lw+部署文档+讲解等)

简介: 基于微信小程序的音乐播放器设计与实现(源码+lw+部署文档+讲解等)

系统功能结构图

d0e026260e354be98416f366c2da535e.png


具体实现

5.1管理员功能实现

5.1.1 音乐管理

此页面让管理员管理音乐的数据,音乐管理页面见下图。此页面主要实现音乐的增加、修改、删除、查看的功能。


2af7e338b52ef8152e472b1fc611fc97.jpg


图5-1 音乐管理页面


5.1.2 公告信息管理

公告信息管理页面提供的功能操作有:新增公告,修改公告,删除公告操作。下图就是公告信息管理页面。


87f5177665ff0f991df90e429779ac48.jpg


图5.3 公告信息管理页面


5.1.3公告类型管理

公告类型管理页面显示所有公告类型,在此页面既可以让管理员添加新的公告信息类型,也能对已有的公告类型信息执行编辑更新,失效的公告类型信息也能让管理员快速删除。下图就是公告类型管理页面。


41279ad76e0d84f6ad2baa20495af147.jpg


图5.4 公告类型列表页面


5.2 用户功能介绍

5.2.1 音乐管理

如图5.4显示的就是音乐管理页面,此页面提供给用户的功能有:查看音乐。


ac325bd00a82348544cdfc20ce67dd35.jpg


图5.4 音乐管理页面


5.2.2 公告管理

如图5.5显示的就是公告管理页面,此页面提供给用户的功能有:查看公告。


6e696157b16327026440e91a54c95b64.jpg


图5.5 公告管理页面


代码参考

@IgnoreAuth
@PostMapping(value = "/login")
public R login(String username, String password, String captcha, HttpServletRequest request) {
   UsersEntity user = userService.selectOne(new EntityWrapper<UsersEntity>().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);
}
  @Override
  public String generateToken(Long userid,String username, String tableName, String role) {
    TokenEntity tokenEntity = this.selectOne(new EntityWrapper<TokenEntity>().eq("userid", userid).eq("role", role));
    String token = CommonUtil.getRandomString(32);
    Calendar cal = Calendar.getInstance();   
      cal.setTime(new Date());   
      cal.add(Calendar.HOUR_OF_DAY, 1);
    if(tokenEntity!=null) {
      tokenEntity.setToken(token);
      tokenEntity.setExpiratedtime(cal.getTime());
      this.updateById(tokenEntity);
    } else {
      this.insert(new TokenEntity(userid,username, tableName, role, token, cal.getTime()));
    }
    return token;
  }
/**
 * 权限(Token)验证
 */
@Component
public class AuthorizationInterceptor implements HandlerInterceptor {
    public static final String LOGIN_TOKEN_KEY = "Token";
    @Autowired
    private TokenService tokenService;
  @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
    //支持跨域请求
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with,request-source,Token, Origin,imgType, Content-Type, cache-control,postman-token,Cookie, Accept,authorization");
        response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
  // 跨域时会首先发送一个OPTIONS请求,这里我们给OPTIONS请求直接返回正常状态
  if (request.getMethod().equals(RequestMethod.OPTIONS.name())) {
          response.setStatus(HttpStatus.OK.value());
            return false;
        }
        IgnoreAuth annotation;
        if (handler instanceof HandlerMethod) {
            annotation = ((HandlerMethod) handler).getMethodAnnotation(IgnoreAuth.class);
        } else {
            return true;
        }
        //从header中获取token
        String token = request.getHeader(LOGIN_TOKEN_KEY);
        /**
         * 不需要验证权限的方法直接放过
         */
        if(annotation!=null) {
          return true;
        }
        TokenEntity tokenEntity = null;
        if(StringUtils.isNotBlank(token)) {
          tokenEntity = tokenService.getTokenEntity(token);
        }
        if(tokenEntity != null) {
          request.getSession().setAttribute("userId", tokenEntity.getUserid());
          request.getSession().setAttribute("role", tokenEntity.getRole());
          request.getSession().setAttribute("tableName", tokenEntity.getTablename());
          request.getSession().setAttribute("username", tokenEntity.getUsername());
          return true;
        }
    PrintWriter writer = null;
    response.setCharacterEncoding("UTF-8");
    response.setContentType("application/json; charset=utf-8");
    try {
        writer = response.getWriter();
        writer.print(JSONObject.toJSONString(R.error(401, "请先登录")));
    } finally {
        if(writer != null){
            writer.close();
        }
    }
//        throw new EIException("请先登录", 401);
    return false;
    }
}


论文参考

目录
打赏
0
0
0
0
114
分享
相关文章
基于SpringBoot的智慧停车场微信小程序源码分享
智慧停车场微信小程序主要包含管理端和小程序端。管理端包括停车场管理,公告信息管理,用户信息管理,预定信息管理,用户反馈管理等功能。小程序端包括登录注册,预约停车位,停车导航,停车缴费,用户信息,车辆信息,钱包充值,意见反馈等功能。
54 5
基于SpringBoot的智慧停车场微信小程序源码分享
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
49 0
跑腿小程序系统源码
这是一款跑腿小程序,带有智能派单、系统派单、同城配送、校园跑腿、预约取件、用户端+骑手端 基于FastAdmin+thinkphp和uniapp开发的优创同城跑腿系统,支持帮取、帮送模式,包含用户端、骑手端、运营后台。
106 32
|
2月前
|
圈子源码如何打包生成App小程序/开发一个圈子系统软件所需要的费用体现在哪里?
将PHP源码打包成App的过程涉及多个步骤和技术选择。以圈子源码为例,首先明确需求,确定App功能和目标用户群体,并根据需求开发小程序页面,如用户注册、圈子列表等。源码准备阶段确保源码适用于小程序开发,环境配置需安装IDE(如微信开发者工具)及依赖库。最后在IDE中打包小程序并上传至管理平台,通过审核后发布。费用方面,模板开发成本较低,定制开发则更高,具体取决于需求复杂度和第三方服务费用。
92 0
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
94 0
在线课堂+工具组件小程序uniapp移动端源码
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
653 3
|
5月前
|
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
108 0
微信小程序更新提醒uniapp
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
166 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
【避坑宝】是一款企业黑红名单吐槽小程序,旨在帮助打工人群体辨别企业优劣。该平台采用SpringBoot+MybatisPlus+uniapp+uview2等技术栈构建,具备丰富的注释与简洁的代码结构,非常适合实战练习与学习。通过小程序搜索“避坑宝”即可体验。
173 0
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等