结对作业二

这个作业属于哪个课程 2021春软件工程实践|W班(福州大学)
这个作业要求在哪里 作业要求
结对学号 221801433
221801407
这个作业的目标 用web技术来实现原型中的功能
其他参考文献

github仓库地址和代码规范链接

github地址
代码规范链接

PSP表格

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

访问链接

这里是个链接

成品展示

首页查询

首页换页

对论文列表进行删除

对论文列表进行查询详细信息

热门领域、热门研究方向动图呈现

对论文进行进行编辑

论文编辑 论文编辑

结队讨论过程描述

刚拿到题目后,对如何实现这个作业感觉到一些迷茫,对于如何实现之前的设计的原型我们进行了讨论,并对框架的选择进行了斟酌,我们都是第一次接触框架,为了加深对新技术的学习,我们阅读文档和阅读其他博客,看教学视频等。

论文编辑

在开发的过程中,也是边写代码边学习新的知识,在开发过程中,我们经常约在一起写代码,在出现问题的时候沟通也比较方便,当两人空闲时间交错的时候,我们也会通过QQ进行交流,每次fetch代码的时候可以从新代码中学习到新的知识,互相交流,改进彼此的代码和巩固知识。

论文编辑 论文编辑 论文编辑

代码实现过程

描述设计实现过程、给出功能结构图

1. 框架使用:使用的是thinkphp5框架来实现构建,
2. 前端:采用HTML、CSS、JS的形式来编写代码,并且用Vue渲染Element,也用Ajax来进行POST对url发送请求,通过COOKIE来实现传值
3. 后端:采用think php5框架,通过PHP语言来进行数据库操作。(TP5框架采用了MVC结构,按着TP5框架实现网页功能思路清晰)
4. 数据库用的是phpyadmin数据库结构如下
数据库 > 功能结构图 功能结构图

代码说明

首页搜索栏

搜索拦HTML部分,可以通过el-select下拉框来选择所要搜索的部分来查询

<div class="search">
            <el-row>
              <el-col :span="20">
                <el-input placeholder="请输入小写字母" icon="search" v-model="devfilter" class="search-input" clearable>
                </el-input>
              </el-col>
              <el-col :span="4">
                <el-select v-model="value" placeholder="请选择">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-col>
            </el-row>

</div>

搜索栏Vue部分,根据搜索栏的值来判断对哪一部分进行搜索来缩小论文的范围,更容易的找到需要的论文

watch: {
      devfilter: function (val, oldVal) {
        console.log(this.value);
        if (this.value == 'title') {
          this.tableData = this.sourceData.filter(dataNews => {
            return Object.keys(dataNews).some(key => {
              return String(dataNews['title']).toLowerCase().indexOf(val) > -1
            })
          });
        } else if (this.value == 'abstract') {
          this.tableData = this.sourceData.filter(dataNews => {
            return Object.keys(dataNews).some(key => {
              return String(dataNews['abstract']).toLowerCase().indexOf(val) > -1
            })
          });
        } else if (this.value == 'keyword') {
          this.tableData = this.sourceData.filter(dataNews => {
            return Object.keys(dataNews).some(key => {
              return String(dataNews['keyword']).toLowerCase().indexOf(val) > -1
            })
          });
        }

      }

列表部分提供了标题、摘要、关键字、发布日期四项属性来显示论文信息

<el-table :data="tableData.slice((currpage-1)*4,currpage*4)" stripe style="width: 100%"
            @cell-click="handleMainCellClick">
            <el-table-column prop="title" label="标题·" width="180">
            </el-table-column>
            <el-table-column prop="abstract" label="摘要">
            </el-table-column>
            <el-table-column prop="keyword" label="关键字" width="180">
            </el-table-column>
            <el-table-column prop="releasetime" label="发布日期" width="180">
            </el-table-column>
</el-table>

概况页面

HTML部分
通过动图形式来呈现Top10和

el-tab-pane label="概况" name="third">
        <div id="top" style="width: 280px;height: 800px; float:right;">
          <el-table :data="wordTableData" stripe @cell-click="handleCellClick" style="width: 100%">
            <el-table-column prop="hot" label="TOP 10" align="center">
            </el-table-column>
          </el-table>
        </div>
        <div id="CVPR" style="height: 400px;width: 900px;"></div>
        <div id="ECCV" style="height: 400px;width: 900px;"></div>
        <div id="ICCV" style="height: 400px;width: 900px;"></div>

      </el-tab-pane>

JS部分用echarst的时间轴与柱状图实现历年来不同峰会的关键词趋势。如CVPR峰会:

var chartDom = document.getElementById('CVPR');
  var myChart = echarts.init(chartDom,'roma');
  var option = {
    //timeline基本配置都写在baseoption 中
    baseOption: {
      timeline: {
        //loop: false,        
        axisType: 'category',
        show: true,
        autoPlay: true,
        playInterval: 3000,
        data: ['CVPR2020','CVPR2019','CVPR2018' ]
      },
      grid: { containLabel: true },
      xAxis: [{
        type: 'category',
        name: 'KeyWord',
      },],
      yAxis: { type: 'value', name: '频率' },
      series: [
        {
          type: 'bar',
        },
      ],
      tooltip: {}
    },

编辑页面

编辑页面论文列表部分,列表显示论文题目、摘要、关键词可以通过按钮来对论文进行编辑和删除,通过分页器来让列表更加直观

<div id = "table" style = "margin-top:20px">`
        <template>
            <el-table :data="tableData.slice((currPage-1)*limitCount,currPage*limitCount)" border style = "width:100%;" >
                <el-table-column fixed prop = "title" label="论文题目" align="center" min-width="20%"></el-table-column>
                <el-table-column fixed prop = "abstract" label="论文摘要"  align="center" min-width="30%">
                    <template slot-scope="scope" >
                        <span>{{scope.row.abstract|ellipsis}}</span>
                    </template>
                </el-table-column>
                <el-table-column fixed prop = "keyword" label="论文关键词" align="center" min-width="30%">
                    <template slot-scope="scope" >
                        <span>{{scope.row.keyword|ellipsis}}</span>
                    </template>
                </el-table-column>
                <el-table-column fixed prop = "url" label="论文链接" align="center" min-width="10%">
                    <template slot-scope="scope">
                        <span class="span-text" v-if="scope.row.link!== undefined && scope.row.link.length >=1">
                            <a link :href="scope.row.link" target="_blank">原文链接</a>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column fixed prop = "operation" label="操作" align="center" min-width="15%">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="primary" size="small">编辑</el-button>
                        <el-button @click="handleDelete(scope.row)" type="danger" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>

    <div id = "page" style = "margin-top: 20px;">
        <el-pagination
            @current-change="currentChange"
            :current-page= "currPage"
            layout = "prev, pager, next"
            :total="{$count}"
            :page-size = "limitCount"
            style="text-align: center"
        >
        </el-pagination>
    </div>

script部分,列表部分添加过滤器,当题目摘要等文字长度过长的时候进行省略。当点击删除,通过ajax发送POST请求给PHP文件来进行数据库操作,当点击操作按钮,通过cookie来传递所需要的值,跳转到编辑表单部分,解析cookie给表单赋值。

<script type = "text/javascript">
        var aa = {$tableData|raw};
        var Main = {
            methods:{
                handleClick:function(row){
                    var list = {
                        "abstract":row.abstract,
                        "title":row.title,
                        "link":row.link,
                        "keyword":row.keyword
                    }
                    $.cookie("list",JSON.stringify(list));
                    $.cookie("page",this.currPage);
                    // document.getElementById("app").innerHTML = 
                    window.location.href = "editdetail";
                },
                currentChange:function(val){
                    console.log(val);
                    this.currPage = val;
                },
                handleDelete:function(row){
                    var list = {
                        "abstract":row.abstract,
                        "title":row.title,
                        "link":row.link,
                        "keyword":row.keyword
                    }
                    $.cookie("deleteList",JSON.stringify(list));
                    $.cookie("page",this.currPage);

                    $.ajax({
                        type:"POST",
                        contentType: "application/x-www-form-urlencoded",
                        url:'editdetail/deletePaper',
                        data:{},
                        success:function(result){
                        location.href = "edit" 
                            console.log("修改成功");
                            alert("删除成功")
                        },
                        error:function(msg){
                            console.log("传输失败");
                            alert("删除失败")
                        }
                    });
                    
                }
            },
            data(){
                return {
                    tableData:aa,
                    limitCount:4,
                    currPage : parseInt($.cookie("page")??1),
                    input:'',
                }
            },
            filters: {
                ellipsis(value) {
                if (!value) return "";
                if (value.length > 150) {
                    return value.slice(0, 150) + "...";
                }
            return value;
            }
        },
        }  
        var Ctor = Vue.extend(Main)
        new Ctor().$mount('#app') 
    </script>

编辑详情页面

表单部分HTML 表单输入框可以通过内容只适应高度

<el-form ref="form" label-width="100px">
            <el-form-item label="论文名称">
                <el-input v-model="form.title" type="textarea" :autosize="{minRows:1,maxRows:3}">
                </el-input>
            </el-form-item>
            <el-form-item label="论文链接">
                <el-input v-model="form.link" type="textarea" :autosize="{minRows:1,maxRows:3}">
                </el-input>
            </el-form-item>
            <el-form-item label="论文关键词">
                <el-input v-model="form.keyword" type="textarea" :autosize="{minRows:2,maxRows:10}">
                </el-input>
            </el-form-item>
            <el-form-item label="论文摘要">
                <el-input v-model="form.abstract" type="textarea" :autosize="{minRows:2,maxRows:10}">
                </el-input>
            </el-form-item>
            <el-form-item type= "width:100%" align="center">
                <el-button  @click="commit()" type="success" size="small">完成修改</el-button>
                <el-button  @click="recover()" type="primary" size="small">重置</el-button>
            </el-form-item>
        </el-form>

JS部分 当需要重置的时候调用未修改的数据来对表单进行复制,需要进行修改时通过ajax发送请求给php文件,成功跳转回原页面,失败提示修改失败。

var formJSON = $.cookie("list");
        $.cookie("list",null);
        var editPaper = JSON.parse(formJSON);
        
        console.log(editPaper);
        var oldPaperString = JSON.stringify(editPaper);
        var oldPaper = JSON.parse(oldPaperString);
        var Main = {
            methods: {
                commit:function(){
                    var list = {
                        "oldTitle":oldPaper.title,
                        "title":editPaper.title,
                        "oldLink":oldPaper.link,
                        "link":editPaper.link,
                        "oldAbstract":oldPaper.abstract,
                        "abstract":editPaper.abstract,
                        "oldKeyword":oldPaper.keyword,
                        "keyword":editPaper.keyword
                    }
                    $.cookie("updateList",JSON.stringify(list));
                    
                    $.ajax({
                        type:"POST",
                        contentType: "application/x-www-form-urlencoded",
                        url:'editdetail/updatePaper',
                        data:{},
                        success:function(result){
                            window.location.href = "edit";
                            console.log("修改成功");
                        },
                        error:function(msg){
                            console.log("传输失败");
                        }
                    });
                },
                recover:function(){
                    this.form=JSON.parse(oldPaperString);
                    console.log(oldPaperString);
                }
            },
            data() {
                return {
                    form: editPaper
                }
            },
        }

        var Ctor = Vue.extend(Main)
        new Ctor().$mount('#app')
    </script>

PHP部分

php获取数据库中数据项的个数和数据,将数据项转化成json数据给页面赋值

<?php
namespace app\index\controller;

use think\Controller;
use think\Db;
use think\Request;

class Edit extends Controller
{
    protected $request;
    public function index()
    {
        $count = Db::table('paper')->count();
        $data = Db::table('paper')->select();
        $this->assign('tableData',json_encode($data));
        $this->assign('count',$count);
        return $this->fetch();
    }
    
}

对所要进行修改的论文数据进行数据库操作,修改和删除。

<?php
namespace app\index\controller;
use think\Controller;
use think\Db;

class Editdetail extends Controller{
    
    public function index(){
        return $this->fetch();
    }
    public function updatePaper(){
        $listString = $_COOKIE["updateList"];
        
        $list = json_decode($listString,true);

        
        $oldTitle =  $list["oldTitle"];
        $title = $list["title"];
        $oldLink = $list["oldLink"];
        $link = $list["link"];
        $oldAbstract = $list["oldAbstract"];
        $abstract = $list["abstract"];
        $oldKeyword = $list["oldKeyword"];
        $keyword = $list["keyword"];
        // $form = json_encode($_POST);
        $result = Db::table('paper')
            ->where("title",$oldTitle)
            ->where("link",$oldLink)
            ->where("abstract",$oldAbstract)
            ->where("keyword",$oldKeyword)
            ->update([
                "title"=>$title,
                "link"=>$link,
                "abstract"=>$abstract,
                "keyword"=>$keyword
        ]);
        if($result!==false){
            return $this->success("编辑成功");
        }
        else {
            return $this->error("编辑失败");
        }
    }
    public function deletePaper(){
        $listString = $_COOKIE["deleteList"];
        $list = json_decode($listString,true);
        
        $title = $list["title"];
      
        $link = $list["link"];
        
        $abstract = $list["abstract"];
        
        $keyword = $list["keyword"];

        $result = Db::table('paper')
            ->where("title",$title)
            ->where("link",$link)
            ->where("abstract",$abstract)
            ->where("keyword",$keyword)
            ->delete();
        if($result!==false){
            return $this->success("删除成功");
        }
        else {
            return $this->error("删除失败");
        }
    }
}

热词top10排行

通过table来展示排行情况

<div id="top" style="width: 280px;height: 800px; float:right;">
          <el-table :data="wordTableData" stripe @cell-click="handleCellClick" style="width: 100%">
            <el-table-column prop="hot" label="TOP 10" align="center">
            </el-table-column>
          </el-table>
        </div>

部署cell—click方法来实现点击列表进行转跳,转跳到首页搜索相关关键词的论文:

handleCellClick(row, event, column,cell) {

        console.log(row['hot']);
        this.activeName='first';
        this.value='keyword';
        this.devfilter=row['hot'];
      },

心路历程和收获

心路历程

结合在构建之法,分别撰写结对开发的心路历程与收获

221801433的感想:
在一开始看到云服务器的时候整个人都蒙了,还好是个结对作业,两个人互相激励互相讨论才找到了方法。因为是全新的知识,都没有做过,我和队友先是开始一起学习,到有一定基础之后便进行了分工。在这过程中遇到了很多困难(相对路径一生之敌),也收获了很多,相比起结对作业前,得到了很大锻炼。

221801407的感想:
这次结对过程中,对作业的要求不是很理解,不知道要怎么开始,对于Web基础知识也没有掌握的很好,虽然遇到了许多困难,遇到了不少困难,但是有了队友的帮助,感觉解决困难的效率高了一倍,结对编程的过程中具体分工,除了完成自己的部分以外,互相帮助,通过沟通交流,做到了1+1>2。

评价结对队友

221801433对221801407的评价:
很庆幸能有这样的队友,在一开始迷茫的时候两个人一起坚持了下来。队友很耐心而且很可靠。虽然两个人一开始基础都不好,但是两个人都是行动派,互相督促相互交流学习,能力得到了迅速提升。在遇到相对路径问题时,我人都快奔溃了,他过来耐心地和我一起debug,最终解决了问题。从他身上我学到了很多,很感谢他。

221801407对221801433的评价:
结对的队友是一个认真负责,有耐心的同学,在结对的过程中,对于Web知识并不完全了解的自己遇到不少迷茫的地方,选择框架的时候,队友推荐可以用tp框架比较简单易学,并提供给我学习的资料;当Vue渲染遇到问题的时候,会给我一些建议和参考,帮我修bug(感动QAQ),同时他对自己的部分认真负责,对css样式非常仔细,感觉到能跟他组队真是太好了,从他的身上我学会了很多新的知识,也意识到了自己还有很多不足需要改进。

posted @ 2021-03-31 12:36  Poisson7  阅读(89)  评论(0编辑  收藏  举报