申迪——Web前端机试题——1

姜姜小妞
2,180 阅读5分钟

闲来无事，上一下手：

考题

实现页面

一、首页：

二、活动列表页面（附加页面）：

开发说明

1、 开发时间为3个小时；

2、 以首页为主要开发功能页面，附加页面在首页开发完成的基础上可开始进行；

3、 不限制使用的技术栈，可利用现有的框架以及组件库进行开发；

功能注意点：

一、 首页

（1）布局（50分）

1.完成页面布局结构，能适应不同大小屏幕尺寸，不会造成布局错乱。

（2）菜单模块（20分）

1．顶部为系统一级菜单，鼠标滑过出现高亮状态，效果如同选中状态一致；点击对应菜单，菜单高亮， 并切换到对应页面，未开发的页面，切换时无变化；

2． 切换到左侧有二级菜单的页面，自动高亮到二级菜单的第一个菜单上；

（3）我的待办模块（10分）

1． 我的待办实现自动向上滚动播放效果；

（4）公共/动态模块（10分）

1． 公共/动态模块实现可切换功能，内容也需要相应做切换；

（5）用户头像模块（10分）

1．用户头像及昵称处，实现鼠标滑上去显示退出登录的功能；

二、 活动管理页面（附加分：20分）

1． 点击“活动管理”切换到活动管理模块中的活动列表模块

2． 业务场景、活动状态选项均可点击切换高亮；

3． 页码点击可切换；

4．点击重置，时间默认为当天，活动名称清空，业务场景、活动状态均默认为选中第一个；

5．活动列表根据选项实现模糊搜索功能；

答题开始

限时3小时

主要使用的技术如下：

vue

antDesign - vue (www.antdv.com/docs/vue/in…)

echarts

以下开始上手，上手前，你需要安装git、node（自带npm包管理用于依赖安装）、vue、webpack等，嗐，真废话，不懂就百度吧。请注意，限时3小时，你需要做的就是，尽量快准狠，不要给我搞那么多自定义框架安装（除非你很熟练），费时，如果你熟悉yarn，最好使用yarn安装和启动 教程第一节是安装框架，第二节才开始上手

注意点，vue-cli升级后，脚手架包名改了

cli.vuejs.org/zh/guide/in…

1. vue-cli脚手架安装集合vue、webpack的框架

新建文件夹，命名vue-ant-echart。

进入文件夹右键git base here

命令行： vue init webpack jyz-demo 其中jyz-demo是项目名称

请有点“版权”意识哈，加上自己的名字

等待一分钟之后，一路回车

然后ctrl + c 终止运行，为了节省时间，我们进入到项目文件夹中指定安装源

由于默认的npm源安装非常慢！！！！

进入到项目文件夹中，右键git base here，输入命令行 npm install --registry=https://registry.npm.taobao.org

如果你已经全局配置npm下载源为淘宝或其他国内镜像，那你当我是个傻子吧

这通常在2分钟内安装完，不要说你没有网，那考官还让你装个锤子嘛！！，他就是不让你机试成功，这应该是想让你做不完然后压低你工资吧，嗐，这种场面我见多了，希望你能让他失望，哈哈哈

运行项目： npm run dev

直到出现提示，运行到窗口

我们来看看吧：http://localhost:8080

恭喜你领先一步！！ 没成功的同学，你们99%可能输在了网络上，安装不成功会造成依赖无法安装或安装失败，请和面试官打好交道，嗐，你瞧瞧，我这些下来就只花了3分钟就搭好vue和webpack框架了

为啥我还要用webpack，你晓得不？？嗐，百度去呀

2.安装ant-design-vue

ant-design-vue官网： www.antdv.com/docs/vue/in…

进入到项目文件夹中，右键git base here，输入命令行 npm install ant-design-vue --save --registry=https://registry.npm.taobao.org

出租房8M的宽带网络，最终耗时将近1分钟，嗐，是不是很酷！！

在main.js入口文件中引入ant-design-vue

import ant from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

Vue.use(ant)

测试ant-design-vue是否成功引入，在组件HelloWorld.vue中加入<a-button>Default</a-button>留下如图内容保存后，看8080端口是否有按钮出现

恭喜你！！！又消灭了一个敌人

3.引入百度echart

进入到项目文件夹中，右键git base here，输入命令行 npm install echarts -save --registry=https://registry.npm.taobao.org

用时1分钟以内

在main.js入口文件中全局引入echart

暂时全局引入echart，后面优化我会教你封装echart和按需引入，暂时为了争取时间，暂时全局引入

import echarts from 'echarts'
 
Vue.prototype.$echarts = echarts

测试echart是否引入成功 请复制以下内容覆盖到原来的helloWorld.vue保存后查看8080端口

<template>
  <div class="hello">
    <a-button>Default</a-button>
    <div id="chartEle1" style="height: 400px;margin: 0 auto;width: 50%"></div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted () {
    // 基于准备好的dom，初始化echarts实例
    this.Chart1 = this.$echarts.init(document.getElementById('chartEle1')) // 重点
    this.setChartOption()
  },
  methods: {
    setChartOption () {
      let option = {
        title: {
          text: 'echarts使用测试',
          subtext: '纯属虚构'
          // x:'center'
        },
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '直接访问',
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390, 330, 220]
          }
        ]
      }
      this.Chart1.setOption(option, true)
      // setOption：设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过它完成，ECharts会合并新的参数和数据，然后刷新图表。
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

安装sass和node-sass

！！！记住，如果你的网络很好，你可以下载，但是我项目的使用这个

node-sass安装npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass

耗时25秒左右

sass-loader安装npm install sass-loader --save-dev --registry=https://registry.npm.taobao.org

耗时218秒左右

vscode中ctrl+p搜索文件webpack.base.conf.js打开后配置如下

      {
        test: /\.scss$/,
        loader: ['style', 'sass', 'css']
      },

测试

恭喜你！！你已经掌握了全部内容而且不用10分钟就搭建完基础框架，本教程到此结束！！！感谢围观！！ 嗐，开玩笑，可你为啥不给我点赞，老子不想写了

以上框架全部搭建完毕，下一篇见~

体外话，请按照eslint语法校验工具，不懂的话，请看文章配置 juejin.cn/post/684490…

avatar
文章
阅读
粉丝