1+X证书Web前端开发高级:实操考试样题_现有两个项目,项目一为文学信息库系统,项目名为literary。-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_46844278/article/details/105738320

2019年下半年 Web前端开发高级实操考试

共4道题，满分100分。(考试时间共150分钟)

实操考试样题
实操考试答案

在这里插入图片描述

试题一（30分）

阅读下列说明、效果图和代码，填写（1）至（15）代码。

【说明】
现有两个项目，项目一为文学信息库系统，项目名为literary，项目二为电子相册系统，项目名为album。
项目1：使用Vue.js框架编程，项目核心文件包括路由文件index.js，模板文件（公共头部模板header.vue、文学库首页模板homeView.vue和书籍详细信息页模板infoView.vue），页面需要的数据采用硬编码方式，存放在文学库首页模板的books对象中。
（1）文学库首页分为两部分，最上面是公共头部组件。下面是书籍列表，列表显示书籍封面图、书籍名称、发行时间，点击选中书籍使用vue-router路由方式跳转到infoView.vue模板
（2）书籍详细信息页分为三部分，最上面是公共头部组件。中间是书籍的详细详细信息，详细信息显示书籍封面图、书籍名称、书籍发行时间和作品简介。最下面是书籍PC和Mobile平台阅读量柱形统计图表，图表使用html5的Canvas绘制
（3）文学库首页和书籍详细信息页样式使用less语法编写
项目2：使用jQuery Mobile框架编程，项目核心文件包括电子相册首页index.html、电子相册CSS样式文件style.css、svg图片close.svg和电子相册JavaScript文件index.js。
（1）电子相册首页分为两部分，上面是页面的头部，中间有页面标题。下面是相册图片列表，列表使用jQuery Mobile的Grid网格布局，点击图片后使用弹出层将该图放大显示，弹出层右上角有一个关闭按钮，点击关闭按钮后弹出层关闭。
（2）SVG图片绘制了弹出层的关闭按钮图标，使用CSS的背景图引入到页面。

【项目1效果图】
在这里插入图片描述
【项目2效果图】
【项目1代码：homeView.vue】

<template>
  <div class="main">
    <!--公共头部-->
    <subHeader></subHeader>
    <div class="wrapper">
      <ul class="img_box">
<!--根据books数据循环输出li标签-->
        <li （1）>
          <!--路由导航组件-->
          <（2） v-bind:to="{ name: 'infoView', params: { bookInfo: item } }">
            <!--将books内的图片地址绑定到<img>标签-->
<img （3）/>
            <div class="item_info">
              <div class="info_name">{
   {
    item.name }}</div>
              <div class="info_time">发行时间：{
   {
    item.time }}</div>
            </div>
          </（2）>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import subHeader from '@/components/header';
export default {
   
  data() {
   
    return {
   
      books: []
    };
  },
/*注册公共头部组件*/
  （4）: {
    subHeader },
  /*在Vue实例创建完成后被立即调用*/
  （5）() {
   
/*name书籍名称 content书籍简介 time发行时间 img封面图片 readCount阅读量*/
this.books =[{
   name: '......',content:'......',time: '......',img: '......',readCount: {
   pc: ......, mobile: ......}, ......}];
}
};
</script>

【项目2代码：infoView.vue】

<script>
/*绘制Vanvas表图*/
   draw() {
   
      let drawElm = this.$refs.chart_canvas;
      /*获取Vanvas的2d绘制环境*/
let ctx = drawElm.（6）('2d');
      let elmWidth = drawElm.offsetWidth, elmHeight = drawElm.offsetHeight;
      //四周留白距离
      let topGap = 10,btmGap = 20,leftGap = 40;let maxReadNum = 0;
      drawX();
      function drawX() {
   
        //绘制X轴
        ctx.beginPath();
        /*移动路径到指定坐标*/
        ctx.（7）(leftGap, elmHeight - btmGap);
        ctx.lineTo(elmWidth, elmHeight - btmGap);
        ctx.stroke();
        //绘制X轴标签
        ctx.beginPath();
        ctx.font = '16px Arial';
/**/
        ctx.fillText('pc', 70 + leftGap, elmHeight - 5);
        ctx.fillText('mobile', 210 + leftGap, elmHeight - 5);
        ctx.stroke();
      }
/*此处省略绘制Y轴和柱形代码*/
    }
</script>
<style lang="less">
/*定义变量，变量名为contentPadding*/
（8）: 0.625rem;
/*定义文本居中方法，方法名为textAlign*/
（9）(@arguments) {
   
  	text-align: @arguments;
}
#book_content {
   
  padding: @contentPadding;
  h4 {
   
    margin: 0;
    padding-bottom: @contentPadding;
  }
  #content_txt {
   
    font-size: 0.8125rem;
    color: #5e5e5e;
    line-height: 1.25rem;
  }
}
#chart_box {
   
  padding: @contentPadding;
  .textAlign(center)
  .name {
   
    margin-bottom: 1.25rem;
  }
}
</style>

【项目2代码：infoView.vue】

<body>
    <div data-role="page" id="page_photo">
      <div data-role="header">
        <h2>照片</h2>
      </div>
      <div data-role="main">
        <div class="ui-content">
          <!--jQuery Mobile网格布局，每行两列-->
          <ul class="ui-grid-a img_list">
            <li class="（10）">
              <div class="img_box"><img src="img/1.jpg" /></div>
            </li>
            <li class="（11）">
              <div class="img_box"><img src="img/2.jpg" /></div>
            </li>
            <!--此处省略剩余图片li列-->
          </ul>
        </div>
      </div>
      <div id="popup_photo">
        <a id="popup_close" href="#"></a>
        <div id="popup_img_box"><img class="popphoto" src="img/1.jpg"></div>
      </div>
    </div>
</body>

【项目2代码：style.css】

.img_box {
   
  /*设置被转换元素的的基点位置*/
  （12）: top left;
}
.scale {
   
  animation: imgScale 0.3s linear forwards;
}
@keyframes imgScale {
   
  0% {
   
    transform: scale(1);
    opacity: 0;
  }
  30% {
   
    opacity: 1;
  }
  100% {
   
opacity: 1;
/*设置元素的放大倍率为两倍*/
    transform:（13）
  }
}

【项目2代码：close.svg】

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300" height="300" version="1.1"
xmlns="http://www.w3.org/2000/svg">
  <!--14题SVG矩形形状 15题SVG形变-->
  <（14） x="50" y="50" rx="10" ry="10" width="20" height="280" （15）="rotate(-45 70 50)" style="fill:white;" xmlns="http://www.w3.org/2000/svg" />
</svg>