Rynes

发表于 更新于 分类于

在 nuxt 中使用 vuex,为了数据持久化使用 vuex-persistedstate，但是在使用中发现找不到 window 对象，因此需要借助 cookie 来完成。

使用 vuex-persistedstate

1
npm install --save vuex-persistedstate
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import createPersistedState from "vuex-persistedstate";
import vuex from "vuex";
const conststore = new vuex.Store({
  // ...
  plugins: [
    createPersistedState({
      storage: window.sessionStorage,
      reducer(val) {
        return {
          //各种操作
        };
      }
    })
  ]
});

使用 js-cookie

阅读全文 »

发表于 更新于 分类于

本文主要介绍如何使用 webpack-devServer 提供的代理服务解决跨域问题。

devServerdialing 配置

预备条件：

  1. 需要使用本地开发插件：webpack-dev-server。
  2. webpack 版本： 3.0 以上
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
module.exports = {
  //...
  devServer: {
    proxyTable: {
      "/api": {
        //将接口域名印射为/api
        target: "http://192.168.1.155:5005", // 接口域名
        secure: true, // 如果是https接口，需要配置这个参数
        changeOrigin: true, //是否跨域
        pathRewrite: {
          "^/api": "" //需要rewrite的,
        }
      }
    }
  }
};
阅读全文 »

发表于 更新于 分类于

webpack 是一个现代 JavaScript 应用程序的静态模块打包器

entry

entry 属性指定一个入口起点（或多个入口起点）。默认值为 ./src。

单个入口（简写）语法

用法：entry: string | Array

阅读全文 »

发表于 更新于 分类于

在路由 router.js 里面声明权限为 admin 的路由(异步挂载的路由 asyncRouterMap)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);

/* Layout */
import Layout from "@/views/layout/Layout";

export const constantRouterMap = [
  // 登录
  {
    path: "/login",
    name: "login",
    component: () => import("@/views/login/login")
  },
  {
    path: "/404",
    component: () => import("@/views/errorPage/404")
  },
  {
    path: "",
    redirect: "/login"
  }
];

export const asyncRouterMap = [
  //  首页
  {
    path: "/home",
    component: Layout,
    redirect: "/home/index",
    hidden: false,
    meta: {
      title: "首页",
      icon: "home",
      roles: [1]
    },
    children: [
      {
        path: "index",
        component: () => import("@/views/home/index"),
        name: "home",
        hidden: false,
        meta: { title: "首页", icon: "home", noCache: true, roles: ["admin"] }
      }
    ]
  },
  { path: "*", redirect: "/404", hidden: true }
];

export default new Router({
  mode: "hash",
  routes: constantRouterMap
});
  • constantRouterMap 是默认加载的路由表，不需要进行权限验证。
  • asyncRouterMap 是异步加载的路由表，也就是说需要进行权限验证。
  • roles 是一个数组，用来存放当前路由可以访问的权限。
  • hidden 设置 boolean 值来判断是否在菜单栏渲染。
  • noCache 设置 boolean 值来判断是否开启 vue 组件缓存，这里就先不做演示了。
  • icon 用来设置菜单栏图标。

定义 permission.js 进行路由拦截，动态添加可访问路由表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import router from "./router";
import store from "./store";
import { Message } from "element-ui";
import { getToken } from "@/utils/auth"; // getToken from localStorage

const whiteList = ["/login", "404"]; // no redirect whitelist

router.beforeEach((to, from, next) => {
  if (getToken()) {
    /* has token*/
    if (to.path === "/login") {
      next({ path: "/" });
    } else {
      if (store.getters.roles.length === 0) {
        // 判断当前用户是否已拉取完user_info信息
        store
          .dispatch("GetUserInfo")
          .then(res => {
            // 拉取user_info
            const roles = res.data.roles; // note: roles must be a array! such as: ['admin','market']
            store.dispatch("GenerateRoutes", { roles }).then(() => {
              // 根据roles权限生成可访问的路由表
              router.addRoutes(store.getters.addRouters); // 动态添加可访问路由表
              next({ ...to, replace: true }); // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
            });
          })
          .catch(err => {
            store.dispatch("FedLogOut").then(() => {
              Message.error(err);
              next({ path: "/" });
            });
          });
      } else {
        next();
      }
    }
  } else {
    /* has no token*/
    if (whiteList.indexOf(to.path) !== -1) {
      // 在免登录白名单，直接进入
      next();
    } else {
      next("/login"); // 否则全部重定向到登录页
      NProgress.done(); // if current page is login will not trigger afterEach hook, so manually handle it
    }
  }
});
阅读全文 »

发表于 更新于 分类于

高级类型

交叉类型

注：交叉类型是将多个类型合并为一个类型。

1
2
3
4
5
6
7
8
9
10
11
12
function extend<T, U>(first: T, second: U): T & U {
  let result = <T & U>{};
  for (let id in first) {
    (<any>result)[id] = (<any>first)[id];
  }
  for (let id in second) {
    if (!result.hasOwnProperty(id)) {
      (<any>result)[id] = (<any>second)[id];
    }
  }
  return result;
}

联合类型

阅读全文 »

发表于 更新于 分类于

基础类型

布尔值

1
let flag: boolean = false;

数字

注：支持十进制、十六进制、ECMAScript 2015 中引入的二进制和八进制

阅读全文 »

发表于 更新于 分类于

本文主要介绍 windows 环境下使用 git 配置 SSH，方便将代码提交到 github 上
注册 github 账号，下文中 yourName==注册用户名，yourEmail==注册邮箱
下载 git 到指定目录，Run git，选择一个防止本地仓库的目录

执行如下代码

1
2
3
git config --global user.name "yourName"
git config --global user.email "yourEmail"
ssh-keygen -t rsa -C "yourEmail"

连续按三次回车，这里设置的密码就为空了，并且创建了 key
打开.ssh 文件夹，复制 id_rsa.pub 里面的文本，在 github 上点开添加秘钥，复制过去

OK，大工告成，我们来测试一下

阅读全文 »

发表于 更新于 分类于

为什么需要测试

测试是完善的研发体系中不可或缺的一环。前端同样需要测试，你的 CSS 改动可能导致页面错位、JS 改动可能导致功能不正常。尽管测试领域工具层出不穷，在前端的自动化测试上面却实施并不广泛，但是前端偏向界面所以还是有很多人依旧以手工测试为主。

vue 中的单元测试

端到端测试(E2E)

E2E 或者端到端(End-To-End)或者 UI 测试是一种测试方法，它用来测试一个应用从头到尾的流程是否和设计时候所想的一样。简而言之，它从一个用户的角度出发，认为整个系统都是一个黑箱，只有 UI 会暴露给用户。

阅读全文 »

发表于 更新于 分类于

如何回退远程库 gitlab/github 上已经 push 的版本

gitlab 上同事的提交记录还在，找到对应的 commit id

1
git reset --soft(或者--hard) commit id

使用强制 push 的方法，git push -f 表示将目前自己本机的代码库推送到远端，并覆盖

1
git push -u origin master -f
阅读全文 »