喜欢看球,那就手撸一个看球小程序系统

简介: 一,系统展示;二,小程序端代码;三,后端代码;四,数据库;五,手把手教你学习

一,系统展示


微信图片_20221009213235.png


微信图片_20221009213243.png


微信图片_20221009213249.png


微信图片_20221009213253.png


微信图片_20221009213257.png


微信图片_20221009213301.png


微信图片_20221009213306.png


二,小程序端代码


在这里插<!--pages/articleDetail/articleDetail.wxml-->
欢迎围观小孟朋友圈,我的V:jishulearn
<view class="container">
    <view class="articleBox" >
        <view class="article_header">
            <text class="article_title">{{article.articleTitle}}</text>
            <text class="article_date">{{article.articleDate}}</text>
        </view>
        <view class="article_pic">
            <!-- <video src="{{article.videoUrl}}" 
            poster="{{article.imgUrl}}" 
            objectFit="cover" 
            controls="{{true}}"/> -->
            <image src="{{sUrl+article.imgUrl}}"/>
        </view>
        <view class="article_content">
            <p>{{article.articleContent}}</p>
        </view>
    </view>
    <view class="comments">
            <view class="com_hd">
                <view>评论</view>
                <view class="commententy"  bindtap="showModal" data-target="bottomModal"><image class="toComment" src="../../images/pinglun.png"/>{{article.commentList.length}}</view>
            </view>
            <view class="comBox" wx:for="{{article.commentList}}" wx:for-item="comment">
                <view class="comBox_hd">
                    <view class="userInfo">
                        <image class="userThumb" src="{{comment.userThumb}}"/>
                        <text class="userName">{{comment.userName}}</text>
                    </view>
                    <text class="comTime">{{comment.comTime}}</text>
                </view>
                <view class="comBox_bd">
                    <p>{{comment.commentStr}}</p>
                </view>
            </view>
        </view>
        <view class="cu-modal bottom-modal {{modalName=='bottomModal'?'show':''}}">
            <view class="cu-dialog">
                <view class="flexcc">
                    <image class="userThumba" src="{{userInfo.avatarUrl}}"/>
                    <view>
                    <input bindfocus="InputFocus" value="{{commentInputValue}}" bindinput="commentInput" bindblur="InputBlur" adjust-position="{{true}}" focus="{{ifocus}}" maxlength="150" cursor-spacing="10"></input>
                    </view>
                    <button class="bt" bindtap="submitc">发送</button>
                </view>
            </view>
        </view>
</view>
入代码片


<!--pages/order/order.wxml-->
<view class="container">
    <view wx:if="{{hasOrder}}" class="gameOrder">
        <view class="gameOrder" wx:for="{{orderList}}" wx:key="{{orderList.id}}">
            <text class="gameDate">{{item.gameDate}}</text>
            <view class="weui-cells">
                <navigator url="/pages/order/order" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
                    <view class="weui-cell__hd">
                        <text>{{item.gameTime}}</text>
                        <text>{{item.gameName}}</text>
                    </view>
                    <view class="weui-cell__bd">
                        <view class="team_1">
                            <image src="{{item.team_1_pic}}"></image><span>{{item.team_1}}</span>
                        </view>
                        <view class="team_2">
                            <image src="{{item.team_2_pic}}"></image><span>{{item.team_2}}</span>
                        </view>
                    </view>
                    <view class="weui-cell__ft">
                        <view class="ft_left">
                            <view wx:if="{{item.isStart}}">
                                <text class="gameScore scoreM">{{item.team_1_score}}</text>
                                <text class="gameScore">{{item.team_2_score}}</text>
                            </view>
                            <view wx:else>
                                <text class="gameScore scoreM">-</text>
                                <text class="gameScore">-</text>
                            </view>
                        </view>
                        <view class="ft_right">
                            <view wx:if="{{item.gameLive}}" class="gameLive">
                                <view wx:if="{{v_live}}">
                                    <image class="livePic" src="{{vLive_pic}}"/>
                                    <span>{{vLive_text}}</span>
                                </view>
                                <view wx:else>
                                    <image class="livePic" src="{{pLive_pic}}"/>
                                    <span>{{pLive_text}}</span>
                                </view>
                            </view>
                            <view wx:else class="gameLive">
                                <span>未开始</span>
                            </view>
                        </view>
                    </view>
                </navigator>
            </view>
        </view>
    </view>
    <view wx:else class="noOrders">
        <text>没有预约比赛</text>
    </view>
</view>


三,后端代码


/**
 * articleController
 * @author 小孟V:jishulearn
 * @version 2022-02-13
 */
@Controller
@RequestMapping(value = "${adminPath}/article/article")
public class ArticleController extends BaseController {
  @Autowired
  private ArticleService articleService;
  /**
  * 获取数据
  */
  @ModelAttribute
  public Article get(String id, boolean isNewRecord) {
  return articleService.get(id, isNewRecord);
  }
  /**
  * 查询列表
  */
  @RequiresPermissions("article:article:view")
  @RequestMapping(value = {"list", ""})
  public String list(Article article, Model model) {
  model.addAttribute("article", article);
  return "modules/article/articleList";
  }
  /**
  * 查询列表数据
  */
  @RequiresPermissions("article:article:view")
  @RequestMapping(value = "listData")
  @ResponseBody
  public Page<Article> listData(Article article, HttpServletRequest request, HttpServletResponse response) {
  article.setPage(new Page<>(request, response));
  Page<Article> page = articleService.findPage(article);
  List<Article> articleList = new ArrayList<>();
  for (Article article1 : page.getList()) {
    List<FileUpload> fileUploadList = FileUploadUtils.findFileUpload(article1.getId(),"article_image");
    if (fileUploadList.size() > 0){
    article1.setImgUrl(FileUploadUtils.findFileUpload(article1.getId(),"article_image").get(0).getFileUrl());
    }
    articleList.add(article1);
  }
  page.setList(articleList);
  return page;
  }
  /**
  * 查看编辑表单
  */
  @RequiresPermissions("article:article:view")
  @RequestMapping(value = "form")
  public String form(Article article, Model model) {
  model.addAttribute("article", article);
  return "modules/article/articleForm";
  }
  /**
  * 保存i_article
  */
  @RequiresPermissions("article:article:edit")
  @PostMapping(value = "save")
  @ResponseBody
  public String save(@Validated Article article) {
  if(StringUtils.isEmpty(article.getId())) {
    article.setArticleDate(new Date());
  }
  articleService.save(article);
  return renderResult(Global.TRUE, text("保存i_article成功!"));
  }
  /**
  * 删除i_article
  */
  @RequiresPermissions("article:article:edit")
  @RequestMapping(value = "delete")
  @ResponseBody
  public String delete(Article article) {
  articleService.delete(article);
  return renderResult(Global.TRUE, text("删除i_article成功!"));
  }
}


/**
 * 赛事管理Controller
 * @author 小孟V:jishulearn
 * @version 2022-02-11
 */
@Controller
@RequestMapping(value = "${adminPath}/match/match")
public class MatchController extends BaseController {
  @Autowired
  private MatchService matchService;
  @Autowired
  private GameTypeService gameTypeService;
  @Autowired
  private TeamService teamService;
  /**
  * 获取数据
  */
  @ModelAttribute
  public Match get(String id, boolean isNewRecord) {
  return matchService.get(id, isNewRecord);
  }
  /**
  * 查询列表
  */
  @RequiresPermissions("match:match:view")
  @RequestMapping(value = {"list", ""})
  public String list(Match match, Model model) {
  model.addAttribute("match", match);
  return "modules/match/matchList";
  }
  /**
  * 查询列表数据
  */
  @RequiresPermissions("match:match:view")
  @RequestMapping(value = "listData")
  @ResponseBody
  public Page<Match> listData(Match match, HttpServletRequest request, HttpServletResponse response) {
  match.setPage(new Page<>(request, response));
  Page<Match> page = matchService.findPage(match);
  List<GameType> gameTypeList = gameTypeService.findList(new GameType());
  List<Team> teamList = teamService.findList(new Team());
  List<Match> matcheList = new ArrayList<>();
  for (Match match1 : page.getList()) {
    for (GameType gameType : gameTypeList) {
    if (gameType.getId().equals(match1.getGameType())) {
      match1.setGameType(gameType.getName());
    }
    }
    matcheList.add(match1);
  }
  List<Match> matcheList1 = new ArrayList<>();
  for (Match match1 : matcheList) {
    for (Team team : teamList) {
    if (team.getId().equals(match1.getHomeField())) {
      match1.setHomeField(team.getName());
    }
    if (team.getId().equals(match1.getGuestField())) {
      match1.setGuestField(team.getName());
    }
    }
    matcheList1.add(match1);
  }
  page.setList(matcheList1);
  return page;
  }
  /**
  * 查看编辑表单
  */
  @RequiresPermissions("match:match:view")
  @RequestMapping(value = "form")
  public String form(Match match, Model model) {
  List<GameType> gameTypeList = gameTypeService.findList(new GameType());
  List<Team> teamList = teamService.findList(new Team());
  model.addAttribute("match", match);
  model.addAttribute("gameTypeList", gameTypeList);
  model.addAttribute("teamList", teamList);
  return "modules/match/matchForm";
  }
  /**
  * 保存赛事管理
  */
  @RequiresPermissions("match:match:edit")
  @PostMapping(value = "save")
  @ResponseBody
  public String save(@Validated Match match) {
  matchService.save(match);
  return renderResult(Global.TRUE, text("保存赛事管理成功!"));
  }
  /**
  * 删除赛事管理
  */
  @RequiresPermissions("match:match:edit")
  @RequestMapping(value = "delete")
  @ResponseBody
  public String delete(Match match) {
  matchService.delete(match);
  return renderResult(Global.TRUE, text("删除赛事管理成功!"));
  }


四,数据库


SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;
-- ----------------------------
-- Table structure for i_article
-- ----------------------------
DROP TABLE IF EXISTS `i_article`;
CREATE TABLE `i_article`  (
  `id` varchar(32) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL,
  `article_title` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  `article_date` datetime(0) NULL DEFAULT NULL,
  `img_url` text CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL,
  `videoUrl` text CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL,
  `article_content` varchar(2000) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  `match_id` varchar(32) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;
-- ----------------------------
-- Records of i_article
-- ----------------------------
-- Table structure for i_comment
-- ----------------------------
DROP TABLE IF EXISTS `i_comment`;
CREATE TABLE `i_comment`  (
  `id` varchar(32) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL,
  `open_id` varchar(32) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  `comment_str` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  `com_time` datetime(0) NULL DEFAULT NULL,
  `article_id` varchar(32) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;
-- ----------------------------
-- Records of i_comment
-- ----------------------------
INSERT INTO `i_comment` VALUES ('1229650608296800256', 'oR9X80PNiduNcTgo7_AiwaGUO9G4', '123', '2020-02-18 14:15:25', '1227912896076685312');
-- ----------------------------
-- Table structure for i_game_type
-- ----------------------------
DROP TABLE IF EXISTS `i_game_type`;
CREATE TABLE `i_game_type`  (
  `id` varchar(32) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL,
  `name` varchar(32) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;
-- ----------------------------
-- ----------------------------
-- Table structure for i_match
-- ----------------------------
DROP TABLE IF EXISTS `i_match`;
CREATE TABLE `i_match`  (
  `id` varchar(32) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL,
  `home_field` varchar(64) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '主场',
  `guest_field` varchar(64) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '客场',
  `home_score` varchar(8) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '比分',
  `guest_score` varchar(8) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  `start_time` datetime(0) NULL DEFAULT NULL,
  `game_type` varchar(32) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '所属赛事',
  `game_type_a` varchar(32) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '赛事小分类',
  `is_start` int(0) NULL DEFAULT NULL,
  `highlight_name1` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  `highlight_name2` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  `highlight_name3` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  `highlight_name4` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  `highlight_u1` text CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL,
  `highlight_u2` text CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL,
  `highlight_u3` text CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL,
  `highlight_u4` text CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;
-- ----------------------------
-- Records of i_match
-- ----------------------------
-- Table structure for i_player
-- ----------------------------
DROP TABLE IF EXISTS `i_player`;
CREATE TABLE `i_player`  (
  `id` varchar(32) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL,
  `player_thumb` varchar(2000) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  `player_name` varchar(32) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  `team` varchar(32) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  `score` varchar(5) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  `assist` varchar(5) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  `backboard` varchar(5) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  `steal` varchar(5) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  `block` varchar(5) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;
-- ----------------------------
-- Records of i_player
-- ----------------------------
INSERT INTO `i_player` VALUES ('1228343814021251072', 'https://nba.sports.qq.com/media/img/players/head/260x190/203507.png', '托尼斯-阿德托昆博', '1228247876190314496', '30.0', '5.5', '13.5', '1.1', '1.1');
INSERT INTO `i_player` VALUES ('1228344572263333888', 'https://nba.sports.qq.com/media/img/players/head/260x190/202695.png', '莱昂纳德', '1227162154749386772', '27.2', '5.3', '7.4', '1.8', '0.7');
-- ----------------------------
-- Table structure for i_team
-- ----------------------------
DROP TABLE IF EXISTS `i_team`;
CREATE TABLE `i_team`  (
  `id` varchar(32) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL,
  `name` varchar(32) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  `icon` text CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL,
  `type` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  `win_num` int(0) NULL DEFAULT NULL,
  `lost_num` int(0) NULL DEFAULT NULL,
  `location` varchar(10) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;
-- ----------------------------


五,手把手教你学习


前面分享了很多的项目、教程、面试题。大家可以跟着学习。

目录
相关文章
|
10天前
|
移动开发 小程序 PHP
校园圈子论坛系统采取的PHP语音和uni账号开发的小程序APP公众号H5是否只需要4800元?是的,就是只需要4800元
关于校园圈子论坛系统采用PHP语言和uni-app开发的小程序、APP、公众号和H5是否仅需4800元这个问题,实际上很难给出一个确定的答案。这个价格可能受到多种因素的影响
40 8
|
13天前
|
缓存 移动开发 小程序
uni-vue3-wetrip自创跨三端(H5+小程序+App)酒店预订app系统模板
vue3-uni-wetrip原创基于vite5+vue3+uniapp+pinia2+uni-ui等技术开发的仿去哪儿/携程预约酒店客房app系统。实现首页酒店展示、预订搜索、列表/详情、订单、聊天消息、我的等模块。支持编译H5+小程序+App端。
50 8
|
28天前
|
移动开发 小程序
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
55 3
|
1月前
|
小程序 数据挖掘 UED
开发1个上门家政小程序APP系统,都有哪些功能?
在快节奏的现代生活中,家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题,如服务质量不稳定、价格不透明等,我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式,解决了私单、复购、推广和盈利四大痛点,全面提升了服务质量和用户体验,旨在成为家政行业的领导者。
|
2月前
|
存储 传感器 小程序
跳绳计数小程序开发系统
首先,我们需要明确跳绳计数小程序的核心功能:为用户提供跳绳计数的便捷方式。这意味着小程序需要能够准确地记录用户的跳绳次数,并为用户提供清晰、直观的计数展示。
|
4月前
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序,根据系统主题展示不同样式(darkMode)
本文介绍如何在Taro项目中配置深色模式。通过在`src/app.config.ts`设置`darkmode`选项和在`theme.json`中定义主题变量,可以实现跟随系统主题的界面风格切换。
113 0
Taro@3.x+Vue@3.x+TS开发微信小程序,根据系统主题展示不同样式(darkMode)
|
4月前
|
小程序
关于我花了一个星期学习微信小程序开发、并且成功开发出一个商城项目系统的心得体会
这篇文章是作者关于学习微信小程序开发并在一周内成功开发出一个商城项目系统的心得体会,分享了学习基础知识、实战项目开发的过程,以及小程序开发的易上手性和开发周期的简短。
关于我花了一个星期学习微信小程序开发、并且成功开发出一个商城项目系统的心得体会
|
5月前
|
小程序 数据挖掘 UED
餐饮店小程序开发定制桌边二维码点餐系统
随着技术不断进步,各行各业都在使用新工具来提高效率和服务质量。餐饮业也不例外。餐饮点餐小程序系统是基于微信公众平台开发的在线点餐方式。顾客可以通过手机微信扫描餐桌上的二维码,进入餐厅的点餐小程序,选择菜品、数量和口味,直接完成点餐。点餐系统会自动保存并发送给厨房,避免了传统手工点餐容易出错的问题。
|
5月前
|
小程序 前端开发 物联网
无人桌球室小程序平台系统定制开发方案
【项目摘要】随着社会进步和科技发展,无人桌球室小程序应运而生,解决传统桌球室管理难题。提供在线预订、自动计分、赛事查询及会员管理功能,采用微信小程序前端、微服务后端及物联网智能设备技术实现。市场推广结合社交媒体、线下活动及口碑营销。需开发支持,请联系小编。
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的高校毕业生就业信息系统小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的高校毕业生就业信息系统小程序附带文章源码部署视频讲解等
56 2
下一篇
DataWorks