培训总结

第二阶段总结

0 条评论 总结 培训总结 Jonathan

总结

  • 经过两个阶段的培训增强了领悟、创新和推断能力。
  • 掌握自学的方法,学会条理、耐心的处理和完成任务。
  • 思考方式逐渐成熟,逻辑性逐渐规范明确。

完成每个阶段的任务都能学到很多,在编程中代码不断符合规范,积累了很多代码片段。
在任务中发现问题、解决问题并总结

生命周期函数/methods/watch里面不应该使用箭头函数

vue中生命周期函数, methods, watch 自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算。

对computed、watch、methods的认知

  1. computed属性的结果会被缓存,依赖的属性如果发生变化才会重新计算,把他当做普通属性来使用;
  2. watch属性,主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作,可以把他看作是computed和methods的结合体;
  3. methods方法表示一个具体的操作,主要书写业务逻辑;

关于数据的请求

如果可以的话,最好能在局部根组件里请求一次ajax数据,然后从局部根组件里把接收到的数据分别传给各个局部的子组件,而不是每个局部的子组件都发送一次ajax请求。

localStorage

可能用户会有不小的概率关闭了本地自动存储的功能,一般我们使用localStorage的时候 都要使用 try catch 代码块,这样就算用户关闭本地自动存储功能,也不会让整个代码都不能运行,只是没了这个localStorage的功能而已。

try{
  localStorage.userInfo = userInfo
} catch(e) {
  console.log(e)
}

vuex Module

Module的话,看得勉强理解,Vuex允许我们将store分割成模块(module)。每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块。
当应用变得非常复杂时,可以使用Module避免store对象变得相当臃肿。
我觉得Module具体的应用要在复杂项目中亲自练手过才能熟练,目前还是了解。


2019-03-08总结

4 条评论 总结 培训总结 Jonathan

今日目标

完善项目

已完成

  • 投票活动、调查问卷页
  • 修改原有代码实现根据路由请求数据
  • 顶部导航
  • 使用sessionStorage记录侧边菜单选中项

api params 修改


2019.03.07总结

0 条评论 总结 培训总结 Jonathan

问题

element-ui 自定义主题

在项目中改变 SCSS 变量
按照官方的方法新建 element-variables.scss 写入以下内容:

/* 改变主题色变量 */
$--color-primary: #46c37b;

/* 改变 icon 字体路径变量,必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";

重编译后无效

目前解决方法
使用 element-ui 官方 在线主题生成工具 下载生成的文件并修改 .babelrc 的配置

{
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "~theme"
      }
    ]
  ]
}

已完成

课表页学期联动选择器样式修改

untils.js 代码抽取

知识竞答界面

api 数据查询


2019-03-06总结

0 条评论 总结 培训总结 Jonathan

GitLab

今日目标

  1. 划分功能组件与业务组件
  2. 修改目录命名
  3. 修改样式细节部分
  4. 优化axios封装


已完成

1.划分功能组件与业务组件

业务组件由功能组件组成

2.目录命名采用驼峰命名

3.利用sessionStorage记录底部APP下载的显示与隐藏

4.修改顶部下拉菜单动画,与B站官网一致

5.课程表页面BEM规范

6.优化axios封装


待完成

untils.js 代码抽取

查看vue官方文档,学习渲染函数 & JSX


第一阶段总结

0 条评论 总结 培训总结 Jonathan

bilibili 临摹静态页面

项目问题

  • 下拉菜单的动画未能实现一致,存在差异

课表页面

功能

  • 默认加载当前周期课表
  • 根据选择的学期时间,显示课程月份,并加载相应数据
  • 不同课程背景不同,相同课程的颜色值相同

由于 api 接口返回数据问题,可点击右上角...图标请求 mock 数据

问题

yarn run build

执行命令打包后 CSS 多行省略失效 (-webkit-box-orient 失效)
原始代码为:

@mixin ellipsis($count: 1) {
  display: inline-block;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: $count;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

编译后,会过滤

-webkit-box-orient: vertical;

解决方法

关闭 autoprefixer 然后再开启,用注释就可以做到,简直黑科技

@mixin ellipsis($count: 1) {
  display: inline-block;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: $count;
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  overflow: hidden;
  text-overflow: ellipsis;
}

总结

  • 查漏补缺,在导师每天的查阅下,不断改进代码的缺陷,发现自己不足的地方并加以改进;每天都在编程中不断学习,不断进步。
  • 学习了好多自己之前不懂得知识,积累经验,与一起培训的小伙伴相互沟通,一起解决问题。

不足

  • BEM 规范,代码命名方面不规范
  • 编程速度不够,需要多多练习

2019.03.01总结

3 条评论 总结 培训总结 Jonathan

遇到的问题

使用 yarn 安装项目的所有依赖时每到安装 node-sass 总会报错 Command failed

yarn install

解决方法

经过 Google yarn安装node-sass失败的解决方案

//修改yarn 淘宝镜像
yarn config set registry http://registry.npm.taobao.org
// 只指定node-sass的下载源
yarn config set sass-binary-site http://npm.taobao.org/mirrors/node-sass

map

  • 实例的属性和操作方法
  1. size属性 返回成员总数
  2. set(key,value) 设置键值对,返回Map结构
  3. get(key) 读取key对应的值,找不到就是undefined
  4. has(key) 返回布尔值,表示key是否在Map中
  5. delete(key) 删除某个键,返回true,失败返回false
  6. clear() 清空所有成员,没有返回值
  • 遍历方法

Map 结构原生提供三个遍历器生成函数和一个遍历方法。

  1. keys():返回键名的遍历器。
  2. values():返回键值的遍历器。
  3. entries():返回所有成员的遍历器。
  4. forEach():遍历 Map 的所有成员。

2019.02.28总结

0 条评论 总结 培训总结 Jonathan

已完成功能

  • 通过请求的返回的数据中,currentxq & tody 字段获得当前学期及周期,并配置联动选择器
  • 通过计算属性 配置显示学期信息
    联动选择器

问题

axios post 请求的发送
这么写正常请求获取数据

this.axios({
  method: 'post',
  url: `base_term_listBySchoolYear`,
  params: {
    apiparams: {params: {campusid: 1615, userid: '172691'}, readonly: true}
  }
})

2019.02.27总结

0 条评论 总结 培训总结 Jonathan

临摹静态 B 站手机端 布局已完成

未完成

  • 下拉菜单动画
  • 轮播指示器

props设置默认值

// 对象或数组默认值必须从一个工厂函数获取
default: function () {
  return { message: 'hello' }
}

vue-router

嵌套路由

要在嵌套的出口中渲染组件,需要在 VueRouter 的参数中使用 children 配置

vue-awesome-swiper

使用vue-awesome-swiper实现手机端拖拽滚动,
遇到的问题
无法修改内部轮播指示器样式,实现不了自定义指示器

字体加载优化方案

只有IE 和 Edge在自定义字体加载完成之前显示降级字体。所有其他的浏览器都使用 FOIT,即在自定义字体加载时隐藏文本

解决方案

让浏览器支持FOUT,即在自定义字体加载完成之前,先显示降级字体。
使用优秀的开源库可以在所有浏览器中实现FOUT的功能 bramstein/fontfaceobserver
fontfaceobserver在底层使用了css,所以需要先如下定义

@font-face
    {
        font-family: myfont;
        src: url("assets/SourceHanSans-Normal.otf");
    }
    body {
        font-family: Verdana, sans-serif;
    }
    .font-loaded {
        font-family: myfont,Verdana, sans-serif;
    }

然后在进入页面的某个地方加入如下代码:

var font = new FontFaceObserver('myfont');
font.load().then(function () {
  var html = document.querySelector('body');
  html.classList.add('font-loaded');
  console.log('Font is available');
}, function () {
  console.log('Font is not available');
});

2019-2-26总结

0 条评论 总结 培训总结 Jonathan

vue中使用sass

npm i node-sass -D
npm i sass-loader -D

// 修改build中的webpack.base.conf.js文件,在module >>> rules 中添加
{
  test: /\.scss$/,
  loaders: ["style", "css", "sass"]
}

// 使用时在 style 标签上添加 lang = "scss"

element UI 的使用

在使用element UI 的布局容器时踩的坑;在 el-aside 容器中 使用 NavMenu 导航菜单 并且可折叠,当菜单折叠后由于 el-aside 的 width 有默认值 会出现一片空白区域,不会随着 菜单自动收缩。

el-aside

el-aside 默认width为300px 清空默认的width时只需设置``即可

css实现隐藏滚动条

/*实现隐藏滚动条*/
::-webkit-scrollbar {
  width: 0 !important;
}

未解决的问题

bilibili 手机端 菜单 下拉上拉动画的实现

需改动的地方

  • 命名规范 (BEM)
  • 项目命名
  • components 组件文件位置
  • 各样式精确度
  • views