结对作业二

这个作业属于哪个课程 2021春软件工程实践|W班 (福州大学)
这个作业要求在哪里 结对作业二
结对学号 221801403 | 221801434
这个作业的目标 1. 学会html知识
2. 完成结对编程
3. 学会部署网站到云服务器
其他参考文献 菜鸟教程 b站

git仓库链接和代码规范链接

git仓库链接

代码规范链接

PSP表格

PSP2.1 Personal Software Process Stages 预估耗时(分钟) 实际耗时(分钟)
Planning 计划
• Estimate • 估计这个任务需要多少时间 2100 2600
Development 开发
• Analysis • 需求分析 (包括学习新技术) 200 400
• Design Spec • 生成设计文档 60 60
• Design Review • 设计复审 30 30
• Coding Standard • 代码规范 (为目前的开发制定合适的规范) 30 45
• Design • 具体设计 120 120
• Coding • 具体编码 1500 2000
• Code Review • 代码复审 30 60
• Test • 测试(自我测试,修改代码,提交修改) 30 60
Reporting 报告
• Test Repor • 测试报告 60 80
• Size Measurement • 计算工作量 10 10
• Postmortem & Process Improvement Plan • 事后总结, 并提出过程改进计划 20 15
合计 2100 2600

网站访问连接

120.27.25.50

账号 密码
admin 123456

成品展示

1. 网站登录注册界面,用户可以通过注册登录进入网站首页

2. 网站首页搜索功能

3. 在搜索页面中实现添加论文和删除功能

4. 网站首页热度词跳转

5. 热度统计 不同年份大会热度动态视图

6. 论文收藏

7.关键词前十图谱及跳转

结对讨论过程描述

综述

当看到作业要求的时候,我们就意识到这次作业难度很高。从未接触过的前端、后端框架,已经生疏的web知识,更别说部署服务器方法,爬取论文信息,每一项对于我们来说都是巨大的挑战。毫无头绪的我们决定先把我们的基本思路设定好,从自己了解到的技术开始学习。我们上学期的web实践课程中学到了yii2框架的使用和html,css,js,php的编写,经过各方面咨询和百度搜索,我们决定使用bootsrtap(主要是css)完成前端的编写,使用thinkphp框架来完成作业。

过程

  • 结对的前几天我没几乎都是在试用各种框架和技术,进度十分缓慢,有些技术虽然功能齐全但是对于时间紧迫的我们来说不是很合适。我没两个人都在找可以实现基本功能的方法。万事开头难,度过迷茫期我们就会好很多。

  • 后面几天就豁然开朗了起来,找到了使用的框架,我们就着手开始实现功能,前端使用bootstrap加上基本的html知识,基本把所需要的功能表达了出来,(除了css样式)页面虽简陋,但是很抗造。使用phpadmin、数据库和ajax实现了从前端信息导入数据库。

  • 服务器的部署是在团队作业的时候,我们的后端同学给了我们思路,从网上找到了相关的教程,去阿里云试用ecs6远程操作部署wamp环境!感谢!

  • 最后,在不断地修改过程中,我们一步步添加功能,实现页面,撰写博客,完成了本次作业。

设计实现过程

过程设计图

过程描述

1.用户功能

用户填写注册信息,前端将其发送至后端,由后端进行验证,验证通过则返回注册成功;用户填写登陆用户名,前端发送至后端验证,通过则返回。登陆成功并跳转至主页面。用户可在使用过程中任意时刻点击退出。

2.论文管理

用户输入所要搜索的标题,前端发送至后端,后端thinkphp通过模糊搜索语句(%搜索内容%),将所搜索到的数据返回至前端页面,前端使用bootstrap-Table解析数据并展示。
使用table的分页器,同时自带的搜索功能能够对搜索到的论文进行更进一步的搜索。在表格右端设置查看以及删除按钮,查看能够出现弹窗并展示出改论文的大致信息,并可以点击跳转链接到原文。
点击删除可对表格对应一行数据进行删除,并且信息发送至后端进行数据库删除。论文添加功能,将输入数据发送至后端,由后端在对应表存储数据。

3.统计与分析

一是在搜索页面处设置热词热度排行表,进去页面后向后端接口请求数据,然后展示出,可以直观地看到所有大会热门领域,点击后向后端发送对应热词,后端返回有关热词论文并展示。
二是在统计页面设置动态图,页面设置EVPR,ICCV,ECCV,ALL按钮,点击EVPR,ICCV,ECCV任意一个可出现对应大会不同年份的热门领域。动态对比图,该对比图使用ECHARTS的“经济指标图”,可以随着年份的变化展示出每年对应的热词,形成对比
三是展示出所有大会所有年份的总热词,通过饼状图展示,可以直观看出对应热度,点击相应热词可向后端发送热词数据,后端返回热词的相关论文

4.收藏夹

在搜索结果页面的论文展示表格设置收藏按钮,点击收藏前端将对应数据发送至后端,由后端将数据存储至数据库。进入收藏夹页面能够展示出所收藏的所有论文(bootstrap—table),可以进行查看与取消收藏。

代码说明

1.前端传递数据至后端

//前端传递数据至后端主要使用了三种方法,一是通过ajax,POST请求方法,将数据封装成json数据;而二十通过url跳转并传值,用window.location.href=的形式,在url后面加上参数;三是表单传递。
$("#surerigister").click(
            function()
            {
                $.post("http://localhost/tp5/public/test/index/rigister/",{
            username:$("input[name='username1']").val(),
            password:$("input[name='password1']").val(),
        },
		function(data,status){
			alert(data);
	});
            }
        )

$("#login").click(function(){
            window.location.href="http://localhost/tp5/public/test/index/login?username="+$("input[name='username']").val()+"&"+"password="+$("input[name='password']").val();

        })

<form action="http://localhost/tp5/public/test/index/search/" method="POST">
			<div class="row">
				<input type="text" class="form-control  col-md-8 col-md-offset-1" maxlength="100" name="searchContent"  placeholder="请输入要搜索的内容"  style="height: 50px;width: 800px;"> 
				<button type="submit" class="btn btn-default col-md-2" style="height: 50px; width: 100px;" >搜索</button>
			</div>
</form>

2.表格展示数据

//bootstrapTablebe表格直接通过url向后端接口获取数据并展示,column设置列属性,并可以在表格中添加按钮及其对应的点击事件
$('#table').bootstrapTable({
  url:"http://localhost/tp5/public/test/index/dele/"
  columns: [{
    field: 'title',
    title: 'title '
  },{
    field: 'typeandyear',
    title: 'typeandyear'
  },
  {
      field: 'operate',
                title: 'operate',
                width: 200,
                events: {
                    'click #edit': function (e, value, row, index) {
                        $('#title').val(row.title);
                        $('#abstract').val(row.abstract);
                    
                    },
                formatter: function (value, row, index) {
                    var result = "";
                    result += '<button id="edit" class="btn btn-info" data-toggle="modal" data-target="#myModal">查看</button>';

                    return result;
                }
            }
]
})
});

3.接受来自后端的关键词字符串,并提取出前十个单词,展示到首页

//通过ajax的GET请求,向后端接口接受热度前十关键词数据
$.get("http://localhost/tp5/public/test/index/keyword",function(data,status){
		
		var n=1;
		for(x in data){
			
			$("#t"+n).text(data[x]);
			n++;
		}
}

4.热词动态分析图

//这是热词动态分析图,直截取其中关键部分,timeline设置三个时间点变化,会出现三张图表进行对比,yAxis设置了动态图的纵坐标类型,xAxis设置了横坐标的数据及其对应的值,通过多个xAxis来设置多个年份的数据。
var option;
option = {
    baseOption: {
        timeline: {
            autoPlay: true,
            // currentIndex: 2,
            playInterval: 2000,
  
          data: [
               'CVPR2018','CVPR2019','CVPR2020'
            ],
        },

        tooltip: {
        },
      yAxis: { type: 'value', name: '频率' },
 }
    options: [
      {
        xAxis: [{
          data: [data[0], data[1],data[2],data[3],data[4],data[5],data[6],data[7],data[8],data[9]]
        }],
        series: [
        {
            data: [284,192,152,143,140,127,113,111,88,86]
          },
                {data: [
            {name: 'learning (artificial intelligence)', value:284},
            {name: 'feature extraction', value:192},
            {name:  'training', value:152},
            {name: 'image reconstruction', value:143},
            {name:'neural nets', value:140},
            {name: 'task analysis', value:127},
            {name:'computer vision', value:113},
            {name: 'cameras', value:111},
            {name: 'object detection', value:88},
            {name: 'convolutional neural nets', value:86},
                ]}
            ]
      },
      {
        xAxis: [...
      },
      {
        xAxis: [ ...
  
};
option && myChart.setOption(option);

5.导航栏

//使用的是bootstrap框架,通过class="active"来设置当前所处页面,并给每个li属性设置跳转点击事件
<nav class="navbar navbar-inverse" >
          <div class="container-fluid">
              <a class="navbar-brand" href="#">论文管理系统</a>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                <li  id="home"><a href="#">论文搜索 <span class="sr-only">(current)</span></a></li>
          <li id="statistics"><a href="#">统计</a></li>
          <li id="btcollect" class="active"><a href="#">收藏</a></li>
              </ul>
            </div>
          </div>
      </nav>

6.搜索页面

//后端thinkphp模糊查询接口,接收前端数据,在数据库中进行查询,通过thinkphp的赋值语句assign()将查询到的数据赋给income,然后跳转至informshow.html页面并将数据传递给该页面。后端主要进行数据库的操作与页面返回,相关增删改操作与此类似。
  public function search()
    {
        $content=input('searchContent');
        $data=paper::where('title like "%'.$content.'%"')->select();
        $this->assign('income', $data);
        return $this->fetch('informshow');

    }

心路历程和收获

221801403:

一开始就感觉压力很大,自己的代码能力太过薄弱,很担心最后项目是否能完成。不过在经过一段时间的学习,发现只要认真地学习,将功能划分好一个个去实现,其实一个项目的开发没有自己想象中的困难。而且我发现了在寒假指定的学习计划里本来要学习的东西,都在这个项目里完成了一部分的学习,完全是意外之喜。还以为要拖到有空的时候再去学习了。这几天的学习虽然很辛苦但是也收获满满,之前还在迷茫自己从未经手过什么项目,也不了解如何将学到的知识运用出来。现在已经学会了如何去完成一个项目,如何去编写前端,联系后端,部署服务器,与别人同时开发一个项目,提高了自己对软工学习的自,对未来的项目开发有了底气。

221801434:

一开始查看完作业之后,心中是十分焦虑的,因为说起web程序设计的基础,我的水平仅仅是停留在简单的html+css+js,以至于担心是否能完成好这次作业。前期花费了很多时间在查找合适的前端框架和后端框架上,以及如何将前后端的数据交互起来。最后是决定thinkphp框架与bootstrap。通过学习网上的教程视频,逐步掌握了thinkphp的使用和前端知识,也通过不断的代码尝试后也开始了对本次程序的编写,虽然在代码编写过程中遇到了很多问题,但这些也在自己的琢磨,结对伙伴和他人的帮助下一一化解,最终也是将其完成并且部署到服务器上。本次的收获便是能够更进一步地了解web前后端的结构和知识,并且学到了关于服务器的部署的相关知识,同时也体会到了结对编程中双方合作的好处与便利,特别是体现在信息的共享,知识的探讨,以及之间的互帮互助。希望能够在下一次中做得更好。

评价结对队友

221801403:

队友非常优秀,学习能力很强,做事十分可靠。我不会的问题问他基本都可以得到解决。他总是能很明白我们所需要做得功能是什么,而且会给我意料之外的惊喜操作。做事比较细心,有规划。在寻找完成功能和要求的过程中,给了我不少灵感和思路。他对整个项目的思路十分清晰,为我们的项目节省了很多时间。他的结对儿做得也太好了,和他结对真是太快乐了!

221801434:

绪豪在这次结对作业的过程中是一个十分可靠的队友。在搜寻和查找资料时,总能够找到我们所需要的信息,有时也能够提供不错的灵感,大大提高了我们的工作效率。同时学习能力强,熟练掌握了自己所负责的前端技术,能够很好地使用bootstrap,并完成自己所负责的内容。同时在代码的复审和web页面的测试上提供了很大的帮助。他的结对儿做得也太好了,和他结对真是太快乐了!

posted @ 2021-03-28 18:01  hhhhxx  阅读(73)  评论(4编辑  收藏