一、实验目的

掌握Axure RP软件基本用法；

掌握软件体系结构设计；

了解常用软件设计模式；

将实验过程中形成的图形、文字内容插入本文档。

二、实验内容

1、当前Web前端最经典的软件体系结构模式是MVC模式（Model-View-Controller），其中的三个组成部分为：

V即View视图是指用户看到并与之交互的界面。比如由html元素组成的网页界面，或者软件的客户端界面。MVC的好处之一在于它能为应用程序处理很多不同的视图。在视图中其实没有真正的处理发生，它只是作为一种输出数据并允许用户操纵的方式。

M即Model模型是指模型表示业务规则。在MVC的三个部件中，模型拥有最多的处理任务。被模型返回的数据是中立的，模型与数据格式无关，这样一个模型能为多个视图提供数据，由于应用于模型的代码只需写一次就可以被多个视图重用，所以减少了代码的重复性。

C即Controller控制器是指控制器接受用户的输入并调用模型和视图去完成用户的需求，控制器本身不输出任何东西和做任何处理。它只是接收请求并决定调用哪个模型构件去处理请求，然后再确定用哪个视图来显示返回的数据。

在一个复杂的Web站点中，处理一个请求时，需要做很多类似的工作，包括安全认证、国际化、为特定用户提供特殊视图等。如果输入控制器行为分散为多个对象中，这种行为相当一部分会在各处被复制，同时，在运行时改变行为也比较难。前端控制器通过引导请求经过一个处理程序对象来统一所有的请求处理，可以执行一些通用的行为，并且在程序运行时采用decorators来修改这些行为。然后，处理程序就调度一些command对象来处理某一请求的特定行为。前端控制器模式类图如下：

根据上述描述，先画出前端控制器+MVC模式的顺序图，再根据所学的软件分析方法导出MVC模式对应的类图。

2、利用Axure RP软件模仿类似下方的一个Web页面：

操作过程：

1）准备各项元件。从元件库中将所需元件拖放到页面上。如需图片，可从百度下载或搜索得到。按照示例页面，设备各项元件的对齐关系和样式。注意：复选框和右边的链接文字是两个不同元件，只是靠得近。保存，点击菜单“发布>预览”，在浏览器中打开。以后改动该文件后，只要刷新浏览器页面，就可观察到最新的页面。

2）添加两个标签，放置在第一与第二文本框后，内容分别为“不得为空”和“密码长度不得小于6个字符”，并设置隐藏。

3）为第一个文本框添加事件。点击“失去焦点时/设置可见性”，下方选择标签“不得为空”，再点击下方“确定”按钮。然后点击“启用用例”按钮，弹出条件设置对话框，点击“添加逻辑”，设置如下。这表明如果文本框是空的，就会将“不得为空”显示出来。

你可以添加更多的逻辑，如判断手机号是否正确，判断邮箱是否正确等。

4）为密码输入框添加类似事件，当密码长度小于6时显示提示。

5）为“换一张”添加事件，点击时将其左边验证码换掉。

6）为“用户协议”标签、“注册”按钮、右上角“登录”按钮添加事件，转至其它页面（其它页面内容不作要求）。

保存本文件，随实验报告一起上交。

3、了解并练习装饰模式的用法

设计模式中装饰模式的介绍如下：

装饰（Decorator）模式的意图

意图：动态地给一个对象添加一些额外的职责。就增加功能来说，Decorator 模式比生成子类更为灵活

适用场合：

1）在不影响其他对象的情况下，以动态、透明的方式给单个对象添加职责；

2）当不能采用生成子类的方法进行扩充时。一种情况是，可能有大量独立扩展，每一种组合将产生大量的子类，使得子类数目呈爆炸性增长。另一种情况是因为类定义被隐藏，或类定义不能用于生成子类

装饰模式的结构：

Component：对象接口：可以给对象动态地添加职责

ConcreteComponent：具体对象

Decorator：维持一个指向Component对象的指针，并定义一个与Component接口一致的接口

ConcreteDecorator：向组件添加职责

Decorator将请求转发给它的Component对象，并有可能在转发请求前后执行一些附加的动作

装饰模式的评价：

使用Decorator模式可以很容易地向对象添加职责。可以用添加和分离的方法，在运行时添加和删除职责

使用Decorator模式可以很容易地重复添加一个特性，而两次继承则极容易出错

避免在层次结构高层的类有太多的特征：可以从简单的部件组合出复杂的功能。具有低依赖性和低复杂性

缺点：Decorator与Component不一样，使用装饰时不应该依赖对象标识；有许多小对象

基于上述内容，编写代码，以两种方式实现该模式：。

例1：游戏中，角色Character可以有属性attack, defence，可以有装备weapen, armour，可以对属性造成影响，它们可以是类的属性；可以随时变成巨人gigantize，可以变狂暴furious，都可以对attack和defence形成影响，它们可以形成装饰。

package io.shentuzhigang.demo.design;import org.junit.jupiter.api.Test;/** * @author ShenTuZhiGang * @version 1.0.0 * @date 2020-11-19 14:22 */public class DecoratorTEST{    @Test    public void t(){        Character person = new ConcreteCharacter();        Decorator decorator = new Gigantize(                new Person(person));        decorator.weapen();        decorator.armour();    }}interface Character {   public void weapen();   public void armour();}class ConcreteCharacter implements Character{    @Override    public void weapen() {        System.out.println("ConcreteCharacter+weapen");    }    @Override    public void armour() {        System.out.println("ConcreteCharacter+armour");    }}abstract class Decorator implements Character{    private Character character;    public Decorator(Character character){        this.character = character;    }    String attack;    String defence;    @Override    public void weapen() {        this.character.weapen();    }    @Override    public void armour() {        this.character.armour();    }}class Person extends Decorator {    public Person(Character character) {        super(character);    }    @Override    public void weapen() {        super.weapen();        System.out.println("Person+weapen");    }    @Override    public void armour() {        super.armour();        System.out.println("Person+armour");    }}class Gigantize extends Decorator {    public Gigantize(Character character) {        super(character);    }    public void furious(){        System.out.println("furious");    }    @Override    public void weapen() {        super.weapen();        System.out.println("Gigantize+weapen");    }    @Override    public void armour() {        super.armour();        System.out.println("Gigantize+armour");    }}

例2：考试成绩Score，如果直接告诉(report)成绩（例如65分），家长会生气；加一个装饰器，先告诉家长，这次考试比上次增加了几分，家长会比较高兴；加一个装饰器，告诉家长，这次考试最高成绩比我只高一点，家长也会比较高兴；加一装饰器，告诉家长，这次考试班级排名前列，家长也会比较高兴。

package io.shentuzhigang.demo.design.score;import org.junit.jupiter.api.Test;/** * @author ShenTuZhiGang * @version 1.0.0 * @date 2020-11-19 18:40 */public class ScoreTEST {    @Test    public void t(){        Person person = new Person();        Decorator decorator = new Decorator_zero(new Decorator_first(                new Decorator_two(person)));        decorator.report();    }}interface Reportor{    void report();}abstract class Decorator implements Reportor{    private Reportor reportor;    public Decorator(Reportor reportor){        this.reportor = reportor;    }    @Override    public void report() {        reportor.report();    }}class Decorator_zero extends Decorator {    public Decorator_zero(Reportor reportor) {        super(reportor);    }    @Override    public void report() {        System.out.println("这次考试比上次增加了几分");        super.report();    }}class Decorator_first extends Decorator {    public Decorator_first(Reportor reportor) {        super(reportor);    }    @Override    public void report() {        System.out.println("这次考试最高成绩比我只高一点");        super.report();    }}class Decorator_two extends Decorator {    public Decorator_two(Reportor reportor) {        super(reportor);    }    @Override    public void report() {        System.out.println("这次考试班级排名前列");        super.report();    }}class Person implements Reportor {    @Override    public void report() {        System.out.println("65");    }}