hide show vue 动画_初级全栈 vue-egg

源码已上传码云：小朋友/广州云景信息科技有限公司全栈工程师实习考核 未使用UI框架

知乎视频​www.zhihu.com

vuejs

• v-if 与 v-show
• $emit
• props
• watch
• ref 与 $refs
• 同源判断
• sessionStorage
• token

eggjs

• 字段类型 datetime
• jwt

1. v-if 与 v-show

v-if 条件不成立时相当于 display:none; DOM 节点被移除

v-show 条件不成立时相当于 visibility: hidden; DOM节点仍在

我写代码过程中曾经遇到过这样一个问题，v-if 条件不成立时相当于 DOM 节点被移除掉了，那么该组件的方法和属性都是不可使用的，使用就会报错。

2. $emit

比如说你现在要封装一个按钮，带页面刷新功能的 vue2.x 官方文档 vm.$emit

// 子组件 Button/index.vue
<template>
  <button @click="_refresh"><button>
</template>
<script>
  methods: {
    _refresh(){
      this.$emit("refresh");
    }
  }
</script>

// 父组件
<template>
  <Button @refresh="refresh" />
</template>
<script>
  import Button from '@/components/Button/index.vue';
  components: {
    Button
  },
  methods: {
    refresh(){
      // ...
    }
  }
</script>

3. props

父组件向子组件传值（单向），区别于上面的，下面我们用 input vue2.x 官方文档 props

// 子组件 Input/index.vue 
<template>
  <div>
    <label :for="name">{{ labelValue }}</label>
    <input :id="name" :name="name" :value="defaultValue" :type="type" :placehodler="placehodler"/>
  </div>
</template>
<script>
  props: [
    type,
    name,
    labelValue,
    defaultValue,
    placehodler,
  ]
</script>

// 父组件
<template>
    <Input :name="search" :type="text" :placehodler="请输入" :labelValue="百度一下"/>
</template>

4. watch

监听器：观察 Vue 实例上的一个表达式或者一个函数计算结果的变化 vue2.x 官方文档 watch

<template>
</template>
<script>
  data(){
    return {
      flag: false,
    }
  },
  watch: {
    flag(val){
      // 只要 this.flag 发生改变就会触发
      console.log(val);
    }
  }
</script>

5. ref 与 $refs

$refs 就是一个对象，ref 就是往 $refs 里面添加项 vue2.x 官方文档 ref

<!-- views/home.vue 代码片段 -->
<section
  :class="{
    left: true,
    full: isFullScreen,
    hide: isStatistics
  }"
>
  <Left :edit="edit" ref="LC" @update="update" />
</section>
<section
  :class="{
    right: true,
    full: isStatistics,
    hide: !((isFullScreen && isStatistics) || !isFullScreen)
  }"
>
  <Right ref="RC" />
</section>

// views/home.vue 代码片段
update() {
  this.isFormShow = false;
  if (this.$refs.RC) {
    this.$refs.RC.drawCharts();
  }
  if (this.$refs.LC) {
    this.$refs.LC.getData(this.isTableShow);
  }
},

以下是我 views/home.vue 下面打印的 $refs

6. 同源判断

不同源：协议不同或主机不同或端口不同

http://localhost.com 默认 80 端口

https://localhost.com 协议不同

http://localhast.com 主机不同

http://localhost.com:8080 端口不同

7. sessionStorage

• 关闭标签页即刻删除（sessionStorage 过期）（不是关闭浏览器）
• 同一个域名也不共享（仅在那一个使用页面有限）

8. token

感觉这里直接叫 jwt 不太合适

// main.js
import axios from 'axios'

Vur.prototype.axios = axios;

每一次请求都要携带 token，token 在登录的时候获取到并保存到 sessionStorage 中

// main.js
axios.interceptors.request.use(config => {
  if(config.push !== '/'){
    if(sessionStorage.getItem('token')){
      config.headers.Authorization = `Bearer ${sessionStorage.getItem('token')}`;
    }
  }
  return config;
}.error => {
  return Promise.reject(error);
});

此外，当 token 过期或没有 token，应该跳转到登录页（假设没有 token，后端返回 code: 403）

// main.js
axios.intercepors.response.use(res => {
  if(res.data.code && res.data.code == 403){
    sessionStorage.removeItem('token');
    router.push('/login');
  }else{
    return res;
  }
})

那么问题就来了，有了 jwt 还有必要用 cookie-session 吗？

---

9. 字段类型 datetime

这里用到了 momentjs 专门处理时间格式的

moment(new Date()).format('YYYY-MM-DD HH:mm:ss')

10. jwt

egg-jwt：npmjs/egg-jwt 用法见作者写的文档 （登录时候时候生成 token 并返回给前端）

'use strict';

// middleware/jwt.js

module.exports = options => {
  return async function jwt(ctx, next) {
    const token = ctx.request.header.authorization;
    let decode;
    if (token) {
      try {
        decode = ctx.app.jwt.verify(token, options.secret);
        await next();
        console.log(decode);
      } catch (error) {
        ctx.status = 401;
        ctx.body = {
          message: error.message,
          code: 403,
        };
        return;
      }
    } else {
      ctx.status = 401;
      ctx.body = {
        message: '没有token',
        code: 403,
      };
      return;
    }
  };
};

// app/router.js
const jwt = app.middleware.jwt(app.config.jwt);

router.post('/login', controller.user.login);  // 登录不要做 token 验证
router.get('/getdata', jwt, controller.home.getdata);  // 其他每一次请求都要验证 token

想要了解更多内容，看官方文档

---

叄贰壹的博客_CSDN博客-渗透测试,java基础,leetcode领域博主​blog.csdn.net

带只拖鞋去流浪 - 简书​www.jianshu.com

警告

商业转载请联系本人，非商业转载请注明出处。