软件工程实践结对作业二

文章目录

• • • 一、Gitcode仓库链接和代码规范链接
    • • 1.1 Gitcode仓库地址
      • 1.2 代码规范地址
    • 二、PSP表格
    • 三、项目的访问链接
    • 四、项目成果展示
    • 五、结对讨论过程描述
    • 六、设计实现过程
    • • 6.1 功能结构图
      • 6.2 数据库设计
      • 6.3 设计概述
      • 6.4 遇到的问题以及解决方式
    • 七、代码说明
    • • 7.1 前端关键代码
      • 7.2 后端关键代码
    • 八、心路历程和收获
    • 九、 结对队友互评
    • • 参考文献

一、Gitcode仓库链接和代码规范链接

1.1 Gitcode仓库地址

• 我们的Gitcode仓库地址~

1.2 代码规范地址

引用 《阿里规约》 中的一段话：

对软件来说，适当的规范和标准绝不是消灭代码内容的创造性、优雅性，而是限制过度个性化，以一种普遍认可的统一方式一起做事，提升协作效率，降低沟通成本。代码的字里行间流淌的是软件系统的血液，质量的提升是尽可能少踩坑，杜绝踩重复的坑，切实提升系统稳定性，码出质量。

代码千万行，安全第一行；代码不规范，同事泪两行👩‍💻！ 规范的目的是为了编写高质量的代码，让你的团队成员每天的心情都是愉悦的，大家在一起是快乐的。所以我们制定了如下的代码规范：

• 我们遵守的代码规范~

二、PSP表格

三、项目的访问链接

有关项目的信息要说明一下（比如适用的浏览器之类的）后续提交时补充

四、项目成果展示

• 主要的UI设计
  因为原型设计时对页面进行了精细的讨论和设计，所以本次项目我们决定继续沿用原型设计时的UI样式，降低UI设计时的工作量。这次设计的网站是体育赛事网站，考虑到网页的特点，我们决定使用顶端导航栏+内容栏+页脚的方式来呈现
  
  

• 首页
  首页实现了轮播图来展示冬奥会的精彩瞬间。用户可以点击切换按钮或轮播图下的小图标来切换自己感兴趣的图片。

• 奖牌总榜
  首页实现了轮播图来展示冬奥会的精彩瞬间。用户可以点击切换按钮或轮播图下的小图标来切换自己感兴趣的图片。
  

• 赛程页面
  我们实现了一个赛程选项卡供用户查看北京冬奥会的赛程信息，其中选项卡分别为：赛程、中国队赛程。用户可以通过切换选项卡来切换想要查询的赛程页面。
  同时，用户还可以通过点击下拉框选择赛程的搜索条件，通过切换比赛日期、项目、场馆的形式来筛选用户希望查看的赛程

  • 按照日期查询
    

  • 按照项目查询
    

  • 按照场馆查询
    

  • 中国队赛程页面

• 冬奥历史
  我们通过地图的形式展示历年冬奥会的吉祥物和奖牌图片，用户可以移动鼠标查看举办过冬奥会的国家的吉祥物和奖牌介绍。
  

• 奖牌地图
  该界面以世界地图的形式直观地展示各个参赛国家的奖牌数，在地图上不同的颜色代表了不同的奖牌数区间，而颜色的深浅则代表了奖牌数的多少。当用户将鼠标移动到某一个国家上时，国家的色块将会高亮并显示奖牌信息。
  

五、结对讨论过程描述

• 线下讨论照片
  由于最近疫情线上授课，所以我们这次结对作业沟通的主要场所是在宿舍，遇到问题时大部分时间采用面对面沟通，晚上休息时间以后在线上继续交流。

• 前期任务分工
  因为树一同学之前有接触过一点Vue框架的知识再加上树一同学对后端代码实在是不感冒，所以决定由树一同学来完成前端部分的开发。
  加一同学在之前的项目合作当中经常主动包揽下比较繁琐的后端开发功能，对Java的应用也比较熟练，所以本次结对项目就由加一同学负责后端代码的编写。 （加一同学是天使！有困难她真的上）
  我们经过讨论后，决定采用vue+servlet+tomcat进行本次结对项目的开发
  

• 相关教程收集
  在项目实现的过程中我们会互相分享相关的教程，让项目更好地推进下去，提高开发的效率。具体教程参见附录中的参考文献。
  

• 相关细节和问题探讨
  我觉得这个是我们合作过程中比较默契的一点，相互之间都会主动的将自己每天做了什么任务、有什么bug没有解决，明天会完成什么任务，告知一下对方，这样子不仅让对方之间充满斗志、并且也会了解一下对方出现了什么bug，可以帮忙思考一下解决方案~
  
  

• 结对期间进度交流
  在项目实现过程中我们会对出现的问题和相关的细节进行及时地讨论和处理，比如对方出现一些问题的时候，队友也会积极的帮忙寻找解决方案，并且也会对对方的一些内容进行思考，提出改进建议~

六、设计实现过程

6.1 功能结构图

6.2 数据库设计

6.3 设计概述

前端的实现过程：

• 采用技术： Vue框架、axios库、ECharts数据可视化库

• 设计思路： 本次作业的前端部分的要点主要是页面的设计、后台数据的获取和渲染以及奖牌地图和冬奥历史地图的实现。

  • 页面的设计：
    因为本次项目前端部分只使用了Vue的语法并没有部署脚手架，且对现有的UI框架的使用方法还不太熟悉，所以这次页面的UI设计使用纯CSS来完成。（事实证明，手打CSS真的太折磨了呜呜！）
  • 后台数据的获取和渲染：
    后台数据通过基于 promise 的 HTTP 库axios向后端接口发送网络请求来获取。后台传送的数据是对象数组，所以我使用一个数组来存放后台返回的结果数组。由于本次页面需要数据的部分主要是table标签，所以我使用v-for指令进行表格数据的渲染。
  • 奖牌地图和冬奥历史地图：
    之前就了解过可以通过导入ECharts库在页面中显示世界地图，所以我们通过导入world.js和echarts.js文件并修改相关参数实现世界地图功能。

后端的实现过程：

• 采用技术： tomcat（Web轻量级应用服务器）、servlet（Java的Web服务器端技术）、mysql（关系型数据库管理系统）

• 设计思路：

  • 数据获取思路： 通过个人实战作业我们已经可以将相关数据的Json格式解析生成对应的Bean数组格式，将其存入List数组中，所以这边我们对于已经获取到的数据直接存入数据库中，方便后续数据获取操作。

  • 流程图展示：
    

  • API生成思路： 首先在IDEA中创建继承自HttpServlet的类，方便后续生成API接口，对于奖牌榜数据，后端没有参数需要获取，所以直接返回全部数据。对于赛程部分的查找功能，当前端请求对应日期、项目、场馆、中国队的相关赛程数据时，通过request.getParameter方法，获取参数值，再通过参数值利用Java编写查找语句，传入数据库后返回需要的数据，编写成Json格式后响应给浏览器（客户端），形成请求，生成API接口。

  • 流程图展示（以奖牌榜API接口为例）：
    

6.4 遇到的问题以及解决方式

前端问题：

• ECharts的tooltip显示多条标签的问题

  问题描述： 本次作业的奖牌地图需要我们从后台获取奖牌榜数据并在鼠标移动时在地图中高亮显示参赛国家的名称、奖牌总数、金银铜牌数等多条信息。而ECharts中鼠标移动时出现的组件toolstrip默认只能展示name和value两条数据，这不能满足我们的需求。
  解决方案： 通过搜索相关的教程，修改series的data数据的value为后台获取的奖牌数据，再在tooltip里重新formatter一下data，使用html拼接得到规定格式的输出字符串作为新的formatter。

• ECharts的data数据undefined的问题

  问题描述： 在将后台的奖牌榜数据显示到地图的过程中，发现在映射的步骤正确的情况，tooltip中的数据一直是undefined状态，无法将奖牌榜数据输出。我搜索了很多教程依然百思不得其解，最后尝试将国家名称修改为英文后数据就出现了。原来问题出现的原因是item对象的name属性的中英文问题。我从后台获取的数据是中文的国家名称，而世界地图中的name属性是英文的国家名称，这导致ECharts始终无法通过键值找到name属性对应的数据。
  解决方案： 为了数据能够成功映射到地图上，我将数据的name属性设置为国家的英文名，与地图的每个模块相对应。再用一个新的字段存储中文的国家名，这样就解决了地图的映射问题。（这个问题真的太难发现了，我找了整整一个晚上，没想到居然是这么简单的问题T_T）
  
  后端问题：

• 接口API中文编码问题

  问题描述： 请把编码很重要打在公屏上！！！在个人实战作业爬取冬奥会数据的时候，其实已经有注意到编码这个问题，所以这次只要有关数据读取问题，都有注重一下统一采用UTF-8编码，然而！没想到呀！居然有一个漏网之鱼！在把数据拿出来响应给浏览器的时候，我们也应该告诉浏览器它应该采用什么编码方式和采用什么格式来读取数据。
  解决方法： 首先一步一步的对数据进行排查，从1、把数据读出来 -> 2、放到数据库中 -> 3、从数据库中读取出来 -> 4、放入ArrayList中 -> 5、将ArrayList转换成Json对象数组 -> 6、再响应给浏览器，按顺序排查下来，终于定位到数据在Json对象数组处编码都是正常的，但是使用API打开，却是异常的，所以这边通过搜索相关解决方法，解决了编码问题。

• 云服务器部署问题
  问题描述： 因为选择的是阿里云服务器，其部署的是Linux系统，但是由于没有学过Linux指令相关的内容，所以一开始我按照网络视频教程做的时候，新建了一个用户，使其只可以操作一个文件夹，并且通过SSH连接的也是此用户，导致后面我要在云服务上部署tomcat的时候，一直无法获得权限，然后我再重新看了一遍教程，才发现是用户登录错误了。
  解决方案： 通过root用户登录，并且要把对应的端口号设置在安全组中。

前后端交互问题：

• 前后端跨域问题
  问题描述： 因为是第一次写后端接口然后提供给前端，所以第一次写完后，通过在线测试，返回200 OK后就直接将API给前端了，没有考虑跨域问题，导致前端报错，无法连接。
  解决方案： 通过返回的HttpServletResponse response调用setHeader方法，设置允许跨域的主机地址。

共同问题：

• git上传文件的问题

  问题描述： 因为对git的操作还不够熟练，所以在上传代码的过程中出现了上传的项目代码结构错误、拉取远程仓库后本地文件丢失的问题。
  解决方案： 通过寻找相关教程，我学会了使用git撤销上次提交以及将本地文件上传到git中指定分支的方法。
  对于上传项目代码结构错误的问题，先使用git reset --hard HEAD^命令将前一次的提交撤销，再根据正确的流程重新提交正确的代码，解决了问题。
  对于拉取远程仓库后本地文件丢失的问题，需要注意在每次上传文件时先在空文件夹中拉取远程仓库内容，再将更改后的项目添加进来提交，避免原项目的文件丢失。（凡事留个心眼，要记得保存副本！）

七、代码说明

7.1 前端关键代码

• 奖牌总榜数据的映射：
  奖牌总榜页面使用v-for指令进行表格数据的渲染，同时使用v-bind指令动态绑定class实现中国代表团的高亮效果。
  奖牌总榜数据通过axios库向后端接口发送GET请求来获取

//HTML部分代码   <tbody>   <tr v-for="li in list" style="display: table-row;" v-bind:class="{'china':li.countryname=='中国'}">      <td>{{li.level}}</td>      <td  class="country"><img v-bind:src="li.image">{{li.countryname}}</td>      <td>{{li.gold}}</td>      <td>{{li.silver}}</td>   <td>{{li.bronze}}</td>   <td>{{li.total}}</td>   </tr>   </tbody>

//JavaScript部分代码data:{list:[],},mounted(){var that=this;axios({url:..., //接口地址method:'get',}).then(response=>{console.log(response.data);that.list=response.data.medallist;});}

• 奖牌地图的实现：
  奖牌地图使用ECharts第三方数据可视化库导入world.js实现。通过axios向后台发送GET请求获取奖牌榜数据，将获取到的数据作为地图参数series的data属性值。通过修改tooltip对象的formatter参数值更改鼠标悬浮时的标签格式。添加visualMap组件显示渐变的图例效果。

  ECharts地图关键参数设置

  series: [data:[], //图表数据来源itemStyle:{emphasis: { //鼠标移动或点击时的样式borderColor:'#B0C4E2',...},},roam : false, //关闭鼠标缩放和平移漫游zoom : 1.2, //设置地图缩放大小}],    visualMap : {//视觉映射组件min : 1, //数值的上下限max : 37,textStyle : { //文本样式fontSize : 15,...},text : ['高', '低'],realtime : false,  //拖拽时实时更新calculable : true,  //显示拖拽用的手柄inRange : { //颜色变化color : [ '#d4deeb', '#B0C4E2','#7c9ad9']}},// 鼠标悬浮、单击产生的效果tooltip : {show : true,trigger : "item", //触发器triggerOn : "mousemove|click", //触发事件为鼠标单击或悬浮//悬浮框文本formatter: function(params) {      if (params['data']!=null){ //相应国家的奖牌数据不为空      var medal="";      //按照指定格式输出奖牌信息      medal+=''+params['data'].countryname+'
金牌榜第'+params['data'].level+'名
金牌：'+params['data'].gold+'';      medal+='
银牌：'+params['data'].silver+'
';      medal+='铜牌：'+params['data'].bronze+'';      return medal;      } }, textStyle : { ... }, ... //其余样式信息},

• 奖牌地图数据的获取

    mounted(){ this.chart= echarts.init( document.getElementById('medalsMap'), 'white', {renderer: 'canvas'});  this.getData(); //从后端接口中获取数据 }, methods:{ getData(){ axios({ url:"http://192.168.0.105:8080/pairProject_war_exploded/medal_api", //接口地址 method:'get', }).then(response=>{this.medalData = response.data.medallist.map((item) => {    let medal =new Object();    //根据接口数据设置奖牌数据对象的值    medal.name = item.country; ...return medal; }); //设置地图的数据源为获得的奖牌数据      option.series[0].data=this.medalData;  this.chart.setOption(option);  });  },

• 赛程数据的查询：
  因为赛程信息的查询需要传递参数，所以使用form表单结合下拉框和提交按钮来提交查询的数据。同时我封装了一个函数来获取用户传入的查询参数，通过输入查询项来获得表单传递的参数

   //HTML部分代码   <form  method=GET action="schedules.html" style="display:inline">  <select name="date">    <option value="fiat" selected="selected">选择比赛日期</option>...</select><button type="submit">查询</button>   </form>

   //Javascript部分代码   //获取用户传入的查询参数   method:{getQueryValue(queryName){var query = decodeURI(window.location.search.substring(1));var vars = query.split('&'); //通过&分割键值对for(var i=0;i<vars.length;i++){    var pair = vars[i].split('=');    if(pair[0]==queryName){ //查询项名称如date等 return pair[1]    } } return null;   }   },   mounted(){axios({url:..., //赛程接口地址method:'get',params:{item:this.getQueryValue("item"), //根据查询项获取用户输入的参数}}).then(response=>{this.list=response.data.detaillist; //通过参数获取到相应的赛程数据});}   

7.2 后端关键代码

• Json数据解析：

    //功能描述：指令为schedule并且日期正确时的输出内容解析    //参数：指定的日期    //返回值：指定的日期，其当天的赛程信息集合    public static List<Json_Schedule.Data.match> schedule_analyse(String date) throws IOException { //获取日程版数据 String path = "./src/data/schedule/"+date+".json"; //从data下面的赛程日期.json中获取对应冬奥会日期的赛程 BufferedReader bufferedReader = new BufferedReader(new InputStreamReader(new FileInputStream(path),"UTF-8")); Gson gson = new Gson(); //将json内容一一对应赛程类 java.lang.reflect.Type type = new TypeToken<Json_Schedule>() {}.getType();  Json_Schedule json_define = gson.fromJson(bufferedReader , Json_Schedule.class); //把json中赛程榜的内容放入matchList中方便获 List<Json_Schedule.Data.match> matchList = json_define.getData().getMatchList();取 bufferedReader.close(); //返回赛程榜所有内容，方便后续文件输写 return matchList;     }

• 数据存入数据库（以奖牌榜数据为例）

    //功能描述：将奖牌榜的内容写入数据库    public static void write_medal() throws Exception {   //连接数据库 Connection con = new SqlCon().getcon();  //创建用于执行静态SQL语句并返回它所生成结果的对象 Statement s1 = con.createStatement();  //存放奖牌数据 List<Json_Medal.Data.medal> medalsList = total_analyse();  for (Json_Medal.Data.medal m:medalsList) {     //sql插入语句书写     String str1 = "INSERT INTO all_medal(gold,silver,bronze,level,total,countryname) VALUES ('"      +m.getGold()+"','"+m.getSilver()+"','"+m.getBronze()+"','"      +m.getRank()+"','"+m.getCount()+"','"+m.getCountryname()+"')";     s1.executeUpdate(str1); //执行SQL语句 }    }

• 形成API接口—解决跨域问题 （以生成奖牌榜数据为例）

 //允许跨域的主机地址 response.setHeader("Access-Control-Allow-Origin", "*"); //允许跨域的请求方法GET, POST, HEAD等 response.setHeader("Access-Control-Allow-Methods", "*");

• 形成API接口—获取数据库中的数据

 //连接数据库 SqlCon sqlCon = new SqlCon(); Connection getcon = null; try {     //创建数据库连接     getcon = sqlCon.getcon();     //sql语句     String sql="select * from all_medal";     PreparedStatement preparedStatement = getcon.prepareStatement(sql);     //执行sql并且返回结果     ResultSet resultSet = preparedStatement.executeQuery();     //while循环next方法，判断是否还有数据，若有返回true，没有false     ArrayList<servlet_medal> list = new ArrayList<>();     while (resultSet.next()){  servlet_medal medal_list = new servlet_medal();  //从resultSet中取值,并且把数据封装到bean对象中(实体类)  medal_list.setGold(resultSet.getString("gold"));  medal_list.setSilver(resultSet.getString("silver"));  medal_list.setBronze(resultSet.getString("bronze"));  medal_list.setLevel(resultSet.getString("level"));  medal_list.setTotal(resultSet.getString("total"));  medal_list.setCountryname(resultSet.getString("countryname"));  medal_list.setImage(resultSet.getString("image"));  medal_list.setCountry(resultSet.getString("country"));  //最后添加到集合中  list.add(medal_list);     }     ······      } catch (Exception e) {     e.printStackTrace(); }finally {     //sql执行完要记得释放连接     sqlCon.closeCon(getcon);

• 形成API接口—将数据响应给浏览器

     //告诉浏览器使用什么方式进行解析     response.setCharacterEncoding("utf-8");     response.setContentType("text/html");     //将ArrayList转为JSON形式，方便前端解析     JSONArray js = JSONArray.fromObject(list);     //将所有返回数据进行键值对命名，方便前端获取数据     JSONObject jsonObject = new JSONObject();     jsonObject.put("medallist", js);     //将数据以utf-8形式转换为string类型     String all_medal = new String(jsonObject.toString().getBytes(StandardCharsets.UTF_8), "UTF-8");     //获取流，将数据相应给客户端     PrintWriter writer = response.getWriter();     //写入数据     writer.write(all_medal);     //关闭流     writer.close(); }    }

八、心路历程和收获

• 树一同学的心路历程和收获：

  • 因为时间安排的不够合理，再加上技术不够熟练，所以很遗憾真正开发出的项目和原型图设计的功能有一些出入。希望下一次完成作业时，能够早一点开始进行规划！只有时间充足才能以更加从容的心态投入项目的开发过程中，这可以帮助项目更加顺利地进行。不要再被deadline追着跑了！！

  • 要学会使用框架！框架的使用真的能大大提高项目开发的效率，不能因为惧怕花费学习成本就放弃学习。框架带来的效益的提高远比学习框架消耗的时间大。这次作业就是因为没有合理利用好框架走了很多弯路 （来自手敲UI样式的经验教训T_T）

  • 虽然寒假时已经系统地学习过git的相关知识，但当时只是通读了一遍，并没有进行实际演练，导致知识过目就忘，学完以后还是两眼一摸黑，啥都不会做。 （眼睛：我会了我会了；脑子：漏！这是什么T_T）。这让我意识到了自己一直以来在学习上存在的坏毛病：惰性太大，知识只是看一遍就当理解了，没有及时对所学的知识进行巩固和实践，导致学习的效率不高，对知识的理解也不够透彻。
    古话说的很对：“纸上得来终觉浅，绝知此事要躬行”，学习不能只流于纸面知识，想要深入理解其中的道理，必须要亲自实践才行。 希望自己在以后的学习和工作生涯中，能够改掉在学习上的坏毛病，积极地实践所学的知识，这样才能保证学有所得！（还是要多敲代码！拒绝摆烂！纸上谈兵万万不可！）

  • 本次项目的开发我最大的感受就是自己距离一名真正的软件工程师真的还有太远太远的路要走了。自己的心态还是不够成熟，遇到问题容易慌乱阵脚，消极应对困难。（无数次被bug打败，几度精神崩溃） 。要成为一名合格的程序员，肯定要好好培养自己的抗压能力，保持良好的心态，积极解决问题。（要不然怎么扛得住甲方爸爸的需求！ ）
    在网站开发的过程中我也从许多优秀的网站中学到了很多开发过程中的技巧，也意识到自己项目开发经验的匮乏。归根结底，还是自己了解的不够多，学的不够多，做的不够多，”路漫漫其修远兮“，我还需要好好努力！

• 加一同学的心路历程和收获：

  • 每一次软工实践作业都能让孩子都能迅速成长，雄起！可以明显地感觉到，这次的效率相对之前会高一点，并且这次比上次分工更加明确了。树一同学主要负责前端工作，我负责后端和云服务器的部署，所以在前期大家沟通较少，虽然前期我们的任务可能没有什么重叠的部分，但是！作为一个团队 （团队之魂熊熊燃烧） 我们两个还是会在完成当天任务的时候互相交换一下今天我们各自做了什么内容，遇到了什么bug，明天大概会完成什么任务。主动的和队友沟通一下自己的工作进度，不仅是对自己的督促，也是对给予队友动力的过程。
  • 每一次软工实践作业都锻炼了自己的自学能力，对于如何部署云服务器、对git的使用、如何形成后端接口等问题有了一定的初步了解 （不会像刚开始一头雾水，两眼懵逼） 不要等着别人给你输入知识，而是要主动去让知识进行输入，主动学习真的很重要，自律是强者的本能！这次我感觉自己有一个缺点是没有提前做好准备，应该提前了解有关任务需要掌握的知识，先去主动学习，而不是等到任务发布下来了，才去被动学习！ （和被动学习say goodbye！）
    

九、 结对队友互评

• 树一同学对加一同学的评价： 这一次的作业我们总结了上一次结对作业中存在的问题，一起努力改正。加一同学这次的效率提高了很多，时间安排也比原型设计时更加合理了！加一同学有任何问题都会积极解决，主动参与，不会埋怨。同时，这次作业由于工作量有点大，再加上本周的事情实在是太多了，程序又遇到了很多bug （bug生产者就是我！） ，我个人出现了比较消极的情绪。加一同学也没有抱怨，及时地安慰我稳定我的情绪，努力帮助我解决遇到的难题。我认为加一同学称得上是非常优秀的合作伙伴。总而言之，这次合作非常愉快的过程非常愉快，我也从加一同学身上学到了很多，对我来说是一段非常宝贵的财富！

• 加一同学对树一同学的评价： 树一同学yyds，和树一同学合作每次都很安心，因为树一同学都会很完整有质量的完成自己那部分的任务。虽然这次作业前端的任务量相对后端会大一点，但是在每日交流中还是可以看出，树一同学在时间安排上还是很合理的，并且也在一开始我们制定的时间范围内完成了任务。最后提一提树一同学的一个小小的不完美但是又很好的点，就是太过注重细节了！这次树一同学做前端，导致只剩下她一个人在抠细节，所以有时候树一同学就会陷入纠结之中，不过有时候树一同学会意识到这个问题，所以会选择两三个版本发给我，我们两个通过交流，迅速解决选择。
  

参考文献

• git 将本地文件(夹)上传到gitee指定分支的处理方法
• git如何撤销上次提交
• ECharts图表tooltip显示多条数据效果
• ECharts地图中tooltip提示框通过formatter分别显示多个数值
• ECharts实现视觉映射组件的参考
• 使用EChart.js来绘制世界地图
• vue.js axios 加载数据到table
• （JavaWeb全套零基础教程）Servlet+JSP+Maven+FreeMarker
• 阿里云服务器环境部署apache-tomcat mysql
• 云服务器快速部署网站
• 阿里云服务器ECS创建之后无法ssh连接的问题处理