软件工程第二次结对作业(提交版)

这个作业属于哪个课程 https://edu.cnblogs.com/campus/fzu/SE2020/
这个作业要求在哪里 https://edu.cnblogs.com/campus/fzu/SE2020/homework/11277
这个作业的目标 学习html+css+javascipt
学号 031802420,031802424

1.结对信息

031802420博客 https://www.cnblogs.com/WuHuDSM/p/13802352.html
031802424博客 https://www.cnblogs.com/supercarrysjy/p/13800598.html
GitHub项目地址 https://github.com/supercarrySJY/031802424-031802420

2.分工

031802424 史金易 页面美化,实现功能代码,博客
031802420 刘任世麒 后续代码整改和性能优化

3.PSP表格

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

4.解题思路描述与设计实现说明

又是一个没有接触过得东西o(╥﹏╥)o。于是开始上网查资料。因为一位大佬恰巧光临宿舍,看到我在学网页设计,推荐了webstorm,于是用它做开发。(很好用,就是我脑子不好用。)b站小甲鱼的视频看了20集后发现有点拖拉,而且基本不涉及JavaScript部分(不过对html和css有基本了解)于是开始用菜鸟教程学习。用了两个晚上,htmlcssjs的基本功能了解了,发现学到的东西都是分散的,很难短时间把它们结合到一起去使用,于是开始网上找代码。在找到过程中看了一些代码,懂得了文本框的作用,推翻了一开始的想法:使用者在代码中修改文本。然后就知道了与文本框这方面要求有关的知识和使用,textarea,split给输入文本划分等等。要用代码和关键词实现各级层次的分层。树形结构的代码基本网上嫖的,自己写不出。接下来就是用css完成页面的设计,比如button按钮、文本框大小居中、页面背景。单元测试没有研究呜呜呜,用到就是最农民的举例法。树形结构的分支部分实现,有些结点伸缩错误,需要进一步修改。

总体框架

(1)输入文本框数据的读取与分类

(2)各级数据的处理:

(3)树形结构设计

(4)结点的添加和搜索

(5)美化网页

5.代码与界面

(1) 对输入数据进行处理

 for (const lab of labs) {
        const lines = lab.trim().split('\n')
        const mentorRegex = /导师:(.+)/
        const mentor = lines[0].match(mentorRegex)[1]
        const labData = {
            id: mentor,
            children: []
        }
        const tmp = {}
        for (let line of lines) {
            line = line.trim()
            if (line.includes('导师')) {
                continue
            }
            const kv = line.split(':')
            const key = kv[0]
            const students = kv[1].split('、')
            for (let i in students) {
                students[i] = {
                    id: students[i]
                }
            }
            const year = key.match(/[0-9]+/)[0]
            const type = key.split('级')[1]
            if (tmp[year] === undefined) {
                tmp[year] = {}
            }
            tmp[year][type] = students
        }
        for (const key of Object.keys(tmp)) {
            const yearStds = tmp[key]
            console.log(yearStds)
            const types = ['本科生', '硕士生', '博士生']
            const yearChildren = []
            types.forEach(type => {
                console.log(yearStds[type])
                console.log(type)
                if (yearStds[type] !== undefined) {
                    console.log(1)
                    yearChildren.push({
                        id: type,
                        children: yearStds[type]
                    })
                }
            })
            console.log(yearChildren)
            const yearData = {
                id: key,
                children: yearChildren
            }
            labData.children.push(yearData)
        }
        data.push(labData)
        console.log(labData)
    }

(2)树形结构实现

const generateGraph = (container, data) => {
    var graph = new G6.TreeGraph({
        container: container,
        width: 800,
        height: 500,
        pixelRatio: 2,
        modes: {
            default: [{
                type: "collapse-expand",
                onChange: function onChange(item, collapsed) {
                    var data = item.get("model").data;
                    data.collapsed = collapsed;
                    return true;
                }
            }
            ]
        },
        defaultNode: {
            size: 16,
            anchorPoints: [
                [0, 0.5],
                [1, 0.5]
            ],
            style: {
                fill: "#ff408c",
                stroke: "#d90909"
            }
        },
        defaultEdge: {
            shape: "cubic-horizontal",
            style: {
                stroke: "#babfa3"
            }
        },
        layout: {
            type: "compactBox",
            direction: "LR",
            getId: function getId(d) {
                return d.id;
            },
            getHeight: function getHeight() {
                return 16;
            },
            getWidth: function getWidth() {
                return 16;
            },
            getVGap: function getVGap() {
                return 10;
            },
            getHGap: function getHGap() {
                return 100;
            }
        }
    });

    graph.node(function (node) {
        return {
            size: 26,
            style: {
                fill: "#ff408c",
                stroke: "#d90909"
            },
            label: node.id,
            labelCfg: {
                position: node.children && node.children.length > 0 ? "left" : "right"
            }
        };
    });

    graph.data(data);
    graph.render();
    graph.fitView();

(3)页面设计部分

        ::-webkit-scrollbar {
            display: none;
        }
        html,
        body {
            overflow: scroll;
            margin: 0;
            background-image: url("img/timg1.jpg");
        }
        textarea {
            display:block;
            margin-left:auto;
            margin-right:auto;
        }
        button {
            display:block;
            margin-left:auto;
            margin-right:auto;
        }
        #input{
            width: 600px;
            min-height: 200px;
            background-color: aquamarine;
        }
        h1 {
            text-align: center;
            color: blueviolet;
        }

6.成果展示

7.使用说明

(1)在文本框输入信息

(2)点击生成按钮生成树

(3)点击树的结点进行放缩

(4)测试人员将html和js文件下载本地,用webstorm打开(其他软件亦可),右上角选择浏览器即可生成网页

8.单元测试

(1)

    导师:张三
    2016级博士生:天一、王二、吴五
    2015级硕士生:李四、王五、许六
    2016级硕士生:刘一、李二、李三
    2017级本科生:刘六、琪七、司四
    刘六:JAVA、数学建模
    李二:字节跳动、京东云

(2)

   导师:李二
   2018级本科生:王五

(3)

   导师:法外狂徒张三
   2018级博士生:鸡你太美
   2018级硕士生:加拿大电鳗
   2019级硕士生:非洲炮王,95年的郑伊健
   2019级本科生:杀破狼的甄子丹

(4)

   导师:孙笑川
   2016级博士生:卢本伟、pdd
   2015级硕士生:芜湖大司马
   2015级本科生:腾杨天下

(5)

   导师:张栋
   2018级本科生:stark,鸡哥
   2017级博士生:佚名,佚名

warning!!!:这部分会发现显示错误,因为输入文本框的“、”误写成了“,”。体现了程序的严谨。

8.Github签入截图

9遇到的困难

学习html➕css➕js,视屏和菜鸟教程一起看。不过感觉学习的内容松散,都是实现单一的功能。难以完全自主实现js的部分。
力不从心。

10评价你的队友

031802424史金易:队友031802420刘任世麒是个乐观家族,熬夜能手。希望提高效率,任务能及时完成,加油。
031802420刘任世麒:队友031802424史金易,加油奥利给!!!

posted on 2020-10-12 09:31  supercarrysjy  阅读(149)  评论(1编辑  收藏  举报