结对第二次作业

这个作业属于哪个课程	软件工程-23年春季学期
这个作业要求在哪里	结对第二次作业-编程实现
结对学号	<222000304\222000325>
这个作业的目标	<用web实现原型的功能>
其他参考文献	CSDN

gitcode仓库地址和代码规范地址

仓库

代码规范

访问链接

阿里云服务

成品展示

根据不同颜色区分当前页面

视频展示

• 展示平时面板，后端运行后界面渲染数据

作业展示

项目讨论

设计

实现过程

• 前端采用vue实现，同时应用vuerouter,element-ui,axios进行前端的设计
  用VueRouter制作导航栏，方便快捷
  Element-ui的组件方便美观，适合用在本次作业
  axios用来获取后端的数据
  +后端采用springboot+mybatis-plus实现，先建好数据库，对于数据库的每张表创建实体类，mapper,controller,mapper用于进行查询，controller返回json给前端。

功能结构图

关键代码

前端代码

获取后端数据

<script>
import axios from 'axios'
export default {
  created: function () {
    axios.get('http://localhost:8081/menrank').then((response) => {
      this.MenData = response.data
    })
    axios.get('http://localhost:8081/womenrank').then((response) => {
      this.WomenData = response.data
    })
  },
  data () {
    return {
      MenData: [],
      WomenData: []
    }
  }
}
</script>

---

主页展示

<div id="app">
    <router-link class="ac" active-class="on" to="/main">首页</router-link>
    <router-link class="ac" active-class="on" to="/ranking">排名</router-link>
    <router-link class="ac" active-class="on" to="/schedule">每日赛程</router-link>
    <router-link class="ac" active-class="on" to="/map">晋级图</router-link>
    <router-link class="ac" active-class="on" to="/more">更多</router-link>
    <router-view></router-view>
  </div>

---

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

---

后端代码

 //返回每日赛程
    @GetMapping("/match")
    public Map<String,List<Match>> match(String date){
        String datetransform="2023-01-"+date;

        List<Match> matchList=matchMapper.findmatchbycourt_id_and_date(datetransform);

        for(int i=0;i<matchList.size();i++){
            JSONArray teamjsonArray=JSONArray.parseArray(matchList.get(i).getTeams()) ;
            List<PlayerScore> playerScoreList=new ArrayList<>();//作为中介存两个比赛记录
            for(int j=0;j<teamjsonArray.size();j++){//得到teams的jsonarray
                JSONObject scoreJsob=teamjsonArray.getJSONObject(j);
                String name=playerMapper.findShort_nameByUuid(TeamidIntoUuid(scoreJsob.getString("team_id")));
                String score="";
                String status="";
                String temp=playerMapper.findNationalityByUuid(TeamidIntoUuid(scoreJsob.getString("team_id")));
                String natioanlity=nationalityIntoNationUrl(temp);


                JSONArray scoreJsonArray=scoreJsob.getJSONArray("score");//得到score的jsonarray
                for(int k=0;k<scoreJsonArray.size();k++){
                    JSONObject setjsob=scoreJsonArray.getJSONObject(k);
                    score+=setjsob.getString("game");
                    score+="  ";//将比分作为字符串存储
                }
                if(scoreJsob.containsKey("status")){
                    status="winner";//赢家json里有status这个key
                }else{
                    status="loser";
                }
                PlayerScore playerScore=new PlayerScore(natioanlity,name,score,status);
                playerScoreList.add(playerScore);
               // matchList.get(i).setTeams(status);
            }
           /* matchList.get(i).setTeams(
                    JSONArray.parseArray(JSON.toJSONString(playerScoreList)).toString());*/
            matchList.get(i).setTeams("test");
            matchList.get(i).setTeamsJson(JSONArray.parseArray(JSON.toJSONString(playerScoreList)));

        }
        Map<String,List<Match>> map=new HashMap<>();
        //map.put(date,matchList);

        String numIntoEn[] =new String[]{"sixteen","seventeen"};
        map.put(numIntoEn[Integer.parseInt(date)-16],matchList);

        return  map;

    }

   //晋级图的实现
    @GetMapping("/promotion")
    public List<Promotion> findMenAllPromotion(){
        List<Promotion> promotionList=promotionMapper.findAllPromotion();
        for(int i=0;i<promotionList.size();i++){

            String winPlayerId=promotionList.get(i).getWinTeam();
            String losePlayerId=promotionList.get(i).getLooseTeam();
            String winName=playerMapper.findShort_nameByUuid(TeamidIntoUuid(winPlayerId));
            String loseName=playerMapper.findShort_nameByUuid(TeamidIntoUuid(losePlayerId));
            promotionList.get(i).setWinShortName(winName);
            promotionList.get(i).setLoseShortName(loseName);

            String winNationalFlag=playerMapper.findNationalityByUuid(TeamidIntoUuid(winPlayerId));
            String winNationUrl=nationalityIntoNationUrl(winNationalFlag);
            String loseNationalFlag=playerMapper.findNationalityByUuid(TeamidIntoUuid(losePlayerId));
            String loseNationUrl=nationalityIntoNationUrl(loseNationalFlag);
            promotionList.get(i).setWinNationality(winNationUrl);
            promotionList.get(i).setLoseNationality(loseNationUrl);
        }
        return promotionList;

    }

PSP

PSP	预计时间	实际时间
计划	60	70
预估时间	20	30
开发	740	1300
需求分析（包括学习新技术）	300	350
生成设计文档	30	30
设计复审	60	60
代码规范	20	20
具体设计	60	100
具体编码	400	600
代码复审	60	100
测试	60	80
计算工作量	20	20
事后总结	60	70
合计	1830	2830

结对

心路历程与收获

本次作业的过程中我们学习了关于vue和springboot前后端分离的开发方式，在学习和作业的路上收获颇多，也经历了很多的挫折,本来我们不打算用vue+spingboot,原本我们准备用html+css+php来实现，到考虑到这样的代码会过于简陋且繁琐，所以我们放弃原来的方案，采用vue+spingboot,但对于vue和sping boot了解不多，所以在短时间学习并应用是件很头疼的事。但好在我们克服了这个困难，让我们学会了vue和sping boot框架并简单应用。

评价

• 222000304对222000325

乐于学习，富有团队合作精神，可以及时沟通，做事认真负责，积极进取，不拖泥带水

• 222000325对222000304

善于交流，学习新东西很快，能够及时反馈问题，对问题能迎难而上