用例说明书

管理员界面

用例

1.标题：管理用户发布与与评论

2.角色：管理员

成功场景：

打开hunger-killer软件，通过管理员身份验证后，进入管理员操作页面。他点击了“发布活动信息”，进入发布活动页面。首先选择目标商户，添加照片，菜品信息，是否其置为首页顶部等操作。页面编辑完毕后，有一个预览效果按钮，点击可以看到正在编辑的活动信息的呈现效果，便于修正。

在上传图像文件时，应用程序可以可以根据图像的大小进行自动修改为正常大小，页面内还可以同时进行信息文字的编辑，便于提高工作效率。

信息输入结束后，有三种操作可供其选择：

a．立即发布；

b．保存，并进入待发布状态；

c．保存到草稿箱。

选项c是保存已经输入的信息和排好的格式，以避免突发事件，保存的文件可以在草稿箱中看到，并允许继续编辑或者删除。

选项b目的是保存已输入的信息和排好的格式，并选定日期发布，并允许在发布日期之前进行修改或者删除。

选项a的作用是立即发布活动信息，但是这个立即发布在真正发布到用户页面之前会进入一个确认信息页面，页面内会有自己发布菜品的全部信息，在确认无误后方能继续发布，否则退回到主编辑页面。

选择选项a，进入确认信息页面，在浏览菜品信息有错误时，管理员可退回到编辑页面，进行进一步的信息完善。否则点击确认，直接发布到用户页面上，并提示：“发布成功”。

所有资料上传到网站上后，网站会自动生成活动主图的缩略图，并在用户端的主页进行展示，新发布的活动信息在刚发布后会被系统自动标注为“新活动”，管理员也可以将其撤销为普通菜品，并提示：“撤销成功”。

3.扩展场景：搜索不存在的不存在的活动或新品会弹出提示：“该活动/新品未发布”。

功能说明书

管理员：

登录验证

Step1: 点击软件进入登录界面 ;

Step2: 在登录界面底端选择管理员进入管理员登录界面 ;

Step3: 在相应的输入框输入用户名，密码，匹配验证 ;

Step4: 成功后进入管理员个人界面。

活动/菜品发布

Step1: 在管理员主界面面左端选择 ”活动/新品发布” 进入编辑页面 ;

Step2: 根据提示编辑文字，上传图片，输入完成后点击 “发布” 按钮发布。

活动/新品删除

Step1: 在管理员个人界面面左端选择 “活动/新品撤销” 进入删除页面 ;

Step2: 勾选相应的活动/新品，在删除页面底端选择 “删除”按钮，之后弹出提示框“您是否要删除所选项”，选择“确定”按钮后弹出提示框提示“删除成功！”。

评论删除

Step1: 在管理员个人界面面左端选择 ”删除评论” 进入评论删除页面 ;

Step2: 勾选相应的用户评论，在删除页面底端选择 “删除”按钮，之后弹出提示框“您是否要删除所选项”，选择“确定”按钮后弹出提示框提示“删除成功！”。

输出效果

1. 主页面加载显示所发布的活动/菜品。

2. 用户评论区页面和管理员删除页面相应评论/活动同时删除。

技术说明书

我主要完成五个页面的前端设计，分别是管理员主页，菜品发布页面，评论删除页面，活动发布页面，活动撤销页面。下面来详细介绍我每个界面的设计和所用到的UWP技术。

1.管理员主页

如图所示主要面设计了一个两行一列的Grid，第一行通过RelativePanal放置了三个控件，回退按钮用来控制页面跳转导航，搜索框用来直接搜索信息，方便快捷，下拉框默认选中管理员头像，同时还有两个可选项Profile,Logout分别用来进入管理员个人信息界面和退出登录。第二行则放一个Frame用来控制五个界面的加载，主页面登录即加载。在主页面中居中水平放置了四个对称的圆角Button，圆角Button的设置是通过在Page.Resources中将CornerRadius=”20″,同时设置ContentPresenter的CornerRadius=”20″来实现的。关键代码如下：

<Button Height=”200″

Width=”300″

Name=”PublishDilicious”

Click=”PublishDilicious_Click”

Background=”#26C6DA”

Style=”{StaticResource ButtonStyle1 }”> <!– Page.Resources中 <Grid x:Name=”RootGrid” CornerRadius=”20″ ，<ContentPresenter x:Name=”ContentPresenter” CornerRadius=”20″ –>

<!– <TextBlock FontFamily =”Segoe MDL2 Assets” Text=””></TextBlock> –>

</StackPanel>

</Button>

2.发布菜品页面

该页面主要通过ComboBox下拉框来提示用户勾选菜品信息和运用TextBox收纳用户键入的菜品描述信息，此外通过文件的方式来上传本地图片，采用Dialog来提示用户是否确定发布。关键代码如下：

<ComboBox Name=”CaiXiComboBox”

HorizontalAlignment=”Center”

VerticalAlignment=”Center”

Grid.Row=”1″

Grid.Column=”1″

Width=”180″

Height=”40″>

</ComboBoxItem>

<TextBlock Text=”粤菜” HorizontalAlignment=”Center”

</ComboBox>

<TextBox Name=”YuanLiaoTextBox”

Grid.Row=”4″

Grid.Column=”1″

HorizontalAlignment=”Center”

VerticalAlignment=”Center”

Height=”40″

Width=”180″>

</TextBox>

private async void AddPhoto_Click(object sender, RoutedEventArgs e)

{

var srcImage = new BitmapImage();

FileOpenPicker openPicker = new FileOpenPicker();

//选择视图模式

openPicker.ViewMode = PickerViewMode.Thumbnail;

//openPicker.ViewMode = PickerViewMode.List;

//初始位置

openPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;

//添加文件类型

openPicker.FileTypeFilter.Add(“.jpg”);

openPicker.FileTypeFilter.Add(“.jpeg”);

openPicker.FileTypeFilter.Add(“.png”);

Windows.Storage.StorageFile file = await openPicker.PickSingleFileAsync();

if (file != null)

{

using (IRandomAccessStream stream = await file.OpenAsync(FileAccessMode.Read))

{

await srcImage.SetSourceAsync(stream);

ChoosenPhotoImage.Source = srcImage;

}

private async void PublishButton_Click(object sender, RoutedEventArgs e)

{

var dialog = new MessageDialog(“你确定发布，请检查是否编辑完整”, “发布提示”);

dialog.Commands.Add(new UICommand(“确定”, cmd => { }, commandId: 0));

dialog.Commands.Add(new UICommand(“取消”, cmd => { }, commandId: 1));

//设置默认按钮，不设置的话默认的确认按钮是第一个按钮

dialog.DefaultCommandIndex = 0;

dialog.CancelCommandIndex = 1;

//获取返回值

var result = await dialog.ShowAsync();

}

3.发布活动页面

由于此页面功能与发布菜品页面基本一致，请参考（2.菜品发布页面）。

4.评论删除页面

该页面的删除条目是通过ListView并结合数据绑定语法实现的。具体的实现是为ListView创建一个Template，决定每个独立的删除对象（包括Grid、StackPanel 等控件）如何呈现在屏幕上：

<DataTemplate x:DataType=”data:Fabu” >

<Grid >

<Grid.ColumnDefinitions >

</Grid.ColumnDefinitions>

<TextBlock FontSize=”16″

Text=”{x:Bind Title}”

HorizontalAlignment=”Center” >

</TextBlock>

<TextBlock FontSize=”10″

Text=”{x:Bind Date}”

HorizontalAlignment=”Center” >

</TextBlock>

</StackPanel>

</RelativePanel>

<Button FontFamily=”Segoe MDL2 Assets”

Content=””

FontSize=”23″

Background=”Transparent”

Name=”DeleteCommentButton”

Click=”DeleteCommentButton_Click”

BorderThickness=”0″

Grid.Column=”1″></Button>

</Grid>

</DataTemplate>

新建一个类Fabus并用ItemSource告知：

<ListView Grid.Row=”0″

ItemsSource=”{x:Bind Fabus}”

IsItemClickEnabled=”True”

ItemClick=”ListView_ItemClick”

HorizontalAlignment=”Center” >

最后再用Style样式对每个删除条目美化，使其看起来更加美观（注：需要用到ListView.ItemContainerStyle 属性)：

<ListView.ItemContainerStyle >

</Style>

</ListView.ItemContainerStyle>

本文链接：https://www.cnblogs.com/lingxiaokongkong/p/7211064.html

用例说明书

用例说明书的更多相关文章

随机推荐

热门专题

目录导航