cnpm - 解决 " cnpm : 无法加载文件 C:\Users\93457\AppData\Roaming\npm\cnpm.ps1,因为在此系统上禁止运行脚本。有关详细信息 。。。 "

2020-10-16 张宇童 学习日志

1.在win10 系统中搜索框 输入 Windos PowerShell

选择 管理员身份运行

1.在win10 系统中搜索框 输入 Windos PowerShell

选择 管理员身份运行

2,打开了powershell命令行之后,输入
set-ExecutionPolicy RemoteSigned
然后更改权限为A

最后通过 get-ExecutionPolicy 查看当前的状态

 完成。

标签: npm

评论(1) 浏览(509)

typescript中的类型及定义

2020-10-16 张宇童 学习日志

typescript 是一门静态类型语言

什么静态类型?

也就是说typescript 是一门强类型语言,强类型语言是在声明变量或常量的时候就已经知道变量或常量的类型是什么了

下面我们来看看typescript是如何定义变量的

首先我们知道 typescript的基础类型有

null, symbol, undefind, boolean, void

// 首先定义一个Number类型的变量
let count: number = 12;
// String类型的变量
let name: string = 'xiaozhang'
// 注意这里编辑器会报错, 因为name是typescript保留的关键字

类的定义没有什么区别

class Person {}
定义一个对象类型
const person : {
    name: string
    age: number
} = {
    name: '小张一号',
    age: 18
};
定义一个数组
const numbers: numbers[] = [1,2,3];
定义一个方法
const add: (a: number, b: number) => number = (a, b) => {
    return a + b
}
定义一个对象类型
const xiaozhang: Person = new Person();
这些就是typescript中的主要几个类型定义

为什么typescript有什么优势呢?为什么使用typescript

我们都知道JavaScript是一门弱类型语言, 在构建大型项目的时候,一旦发生逻辑错误,是十分难以排查问题的

如果是一门强类型语言的话,在编译阶段就可以十分轻松的看到ide提示问题所在

比如:

我们在方法声明处声明了形参a为number类型

而我们在调用的时候实参传入了string类型

这样就可以通过编辑器的提示看到问题所在了

标签: javascript ES6 typeScript

评论(1) 浏览(281)

在学javascript

2020-8-27 张宇童 学习日志

买了些JavaScript的书,其实主要为了买红宝书,就顺便买了JavaScript语法简明手册

感觉比较适合初学者.图文并茂可以是读者很好的理解

图书内容并不多 200页左右

刚看了50页和大家分享下今天下午阅读的内容

说JavaScript的基础首先要说的是JavaScript的基础类型

JavaScript的基础类型分为7种

1 number 

2 string 

3 null

4 undefined

5 bigint

6 symbol

7 boolean

以上七种类型

可能大家会觉得没有什么说的

是的没有什么说的

但是那些基础类型有构造函数大家知道吗?

其中4中基础类型有构造的

分别是

1 boolean

2 string

3 bigint

4 number 

关于类型强转 主要说一下

number转boolean 只有在number 为0或者-0时转为boolean的值才为false 其他的值都是true

还有NaN, "", undefined, null取反为true,其他类型或值取反均为false

Symbol类型没有构造函数

所以创建的时候只能Symbol('fun')

但是Symbol('fun') == Symbol('fun') 的求值运算为false

所以借助Symbol 这个特性可以用于作为对象的私有属性

关于全局Symbol的使用语法是Symbol.for('age')

对于Symbol.for('age') == Symbol.for('age') 的求值运算的值为true

标签: javascript ES6

评论(0) 浏览(299)

[Android]三种菜单显示方法

2020-2-21 张宇童 学习日志

android中的菜单分为三种:

第一种:选项菜单 optionMenu

第二种:上下文菜单 ContextMenu

第三种:弹出菜单 PopuMenu

首先介绍第一种的菜单选项菜单也是最简单的菜单

首先我们需要在resource中新建一个android资源目录 选择为Menu

1.gif

然后创建一个菜单文件 我在这里命名为option, 你们随意

2.gif

我在这里顺带提一下 item 里面的属性可以设置为showAsAction="always"为直译过来的意思是总是显示,就是说一直都能看见

3.png

然后我们在Activity中重写方法onCreateOptionMenu没记错的话,IDE会有提示的你们直接输入OCOM就直接出来了

我们在这里要使用getMenuInFlater().inFlater(Menu文件);

4.gif

然后我们运行

5.png

下面我们来介绍上下文菜单

我先介绍一下什么是上下文菜单吧

就是我们屏幕上假如有一个按钮

那么长按这个按钮就会跳出

so easy! 然我们现在就开始coding吧!

第一步  我们写一个组键 button

第二部 在Activity中注册组键

5.gif

下一步创建 contextMenu

6.gif

效果展示

7.gif

但是还没哟结束 context 还要一个形式

我也要说一下

我们让Activity实现ActionMode.Callback接口里面的几个方法

大家点击下面图片看视频

8.gif

然后我们给按钮加个监听

9.gif

10.png

标签: java android

评论(4) 浏览(1158)

MAC下安装配置Tomcat

2020-2-20 张宇童 学习日志

第一步我们进入官方网站https://tomcat.apache.org/download-80.cgi进行下载下图所示

w1.png

然后我们解压缩 复制到资源目录

w2.png

最后我们运行一下命令

sudo sh ./bin/startup.sh

标签: tomcat java

评论(1) 浏览(635)

webpack开启热更新模块

2019-12-17 张宇童 学习日志

首先上代码

注意代码中的devServer

里面的hot、hotOnly都设置为true

拉下webpack的 HotModuleReplacementPlugin模块

然后实例化即可

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const webpack = require('webpack')

module.exports ={
  mode: 'development',
  devServer: {
    hot: true,
    hotOnly: true,
    contentBase: path.resolve(__dirname, 'dist')
  },
  entry: {
    main: './src/index.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader'
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new CleanWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ]
}

标签: 配置 webpack

评论(0) 浏览(653)

BFF中间层

2019-12-9 张宇童 学习日志

中间层

目前我发现的最大的改良架构的通解 就是**增加中间层**。

比方说 前后端分离,使用 node 来做**BFF(backend for frontend)**,实际上就是在传统前后端 增加了 node这一层,通过此有两点好处,一个是前端彻底接管了 view 层,后端渲染也开始全部由前端掌控,另一个就是 接口层 增加了一层。

 BFF 的前端接口层

我称之为前端接口层,众所周知,后端接口返回的数据往往是不适合前端使用,因为后端的数据是来自于领域建模,而前端作为数据的消费者,所想要的数据其实是 ui数据,无论是数据的含义、还是需要的数据种类、数据结构都往往有巨大的改变,所以我们需要做 **数据转换**。

 service 层

如果把这些数据转换 **集中式处理**的时候,通常会称之为 service 层。在有 node 之前 这个 service层实际上是在前端完成的,这有时候会导致严重的性能问题,

性能上

比方用户的一个点击事件,我们需要三种数据源,并且数据源之间互相依赖,这时候,我们必须异步串行的请求数据,一个交互事件所需的等待耗时大大加剧。

其次,复用和缓存 很难做,比方说跨页面的 相同service 需求。

在 node 端 实现的 BFF 的前端接口层实际上还是 service 层,只不过 service 层 是在服务器上运行的,缓存就很好利用起来了,比方说,A 需要 一种service,B 也需要相同的 service ,又恰好 A、B 的输入 key 相同,则这个 service的结果可以缓存起来,并且被复用。

开发上

BFF 的 service 层,可以很容易做到**应用级别的复用**。

还有很重要的一点是,**解耦**。

假如没有 service层,我们可以想象,当后端数据源发生了改变,那么前端页面也需要改变,当然,我们通常会要求后端数据源不变,但是总有万一,一旦数据源发生改变,由于前端页面是紧密耦合到数据接口的,所以需要改动的地方非常之多。但是在这种情况下,如果我们有数据转换这一层,实际上在这一层改改,保证前端消费的数据格式不变,即可应对这次数据源的变化。

缓存

上面提到了缓存,其实,**缓存也是中间层的一个显著代表**,它就是 数据源 和 数据消费者 中间的一层。只不过它的用途不是 fordev 而是 for performance。

缓存的思想在计算机领域被广泛应用,cpu、内存、外存、web 后端开发、web 前端开发,实际上我们也可以理解成 中间层在计算机领域被广泛利用,最著名的还包括 计算机网络 五层模型。

 总结

以上只是我罗列的几点,实际上我觉得,基本上中间层的意义 就在于 **开发上的复用和解耦、性能上的提升**(其实缓存也就是在复用)。

标签: nodejs node 中间层 BFF

评论(0) 浏览(741)

ant-design-pro 的入口文件?

2019-12-6 张宇童 学习日志

今天在项目中遇到一个问题

在ant-design-pro中需要加入script标签

于是找了好久没有找到入口文件 没有index.html 也没有index.ejs

最后在src中的docment.ejs

ant-design-pro加入script标签

只需要在docment.ejs中加入即可

标签: javascript ES6

评论(0) 浏览(489)

ant-design下载二进制字节流文件

2019-12-4 张宇童 学习日志

今天在做一个项目的时候遇到了一个问题。

其实下在文件是很简单的一件事情。但是使用到前后分离的这个概念,下载文件就变得稍微有一点点复杂了。

因为用户使用的是前端路由。而不能够直接使用后端的路由

所有任何操作都要通过API来实现

这样的话即使服务器上面有文件也很难下载。

因为链接不能够直达

所有我就用服务器返回我们需要下载文件的二进制字节流格式

然后在前端直接下载即可。但是由于经过前端的一层layer所以最好就是下载小文件。大文件就不必使用这种方法了

首先我们在前端ant-design中新建一个路由

export async function download(id) {
    return request(`/api/testadmin/download_template/${id}`,{
        responseType : 'blob'
    })
}
注意⚠️responseType一定要为blob

屏幕快照 2019-12-04 下午4.59.39.png

然后在模型中写一个方法effect

屏幕快照 2019-12-04 下午5.02.39.png

*_download({ id }, { call }) {
            return yield call(download, id)
        }
然后就可以直接下载保存了

屏幕快照 2019-12-04 下午5.03.43.png

if (window.navigator.msSaveOrOpenBlob) {
                navigator.msSaveBlob(temp_data, '项目必要文件.zip');
            } else {
                const link = document.createElement('a');
                const evt = document.createEvent('MouseEvents');
                link.style.display = 'none';
                link.href = window.URL.createObjectURL(temp_data);
                link.download = '项目必要文件.zip';
                document.body.appendChild(link); // 此写法兼容可火狐浏览器
                evt.initEvent('click', false, false);
                link.dispatchEvent(evt);
                document.body.removeChild(link);
            }
后端的代码我就不贴了

标签: javascript ES6

评论(0) 浏览(645)

如何自己为Array实现一个flat即扁平化输出

2019-11-26 张宇童 学习日志

let a = [1,2,3,4,5,[6,7, 8, [9,[10,11,[12,[13]]]]]]
console.log(a)
// (6) [1, 2, 3, 4, 5, Array(4)]
console.log(flat(a))
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]

function flat(arr) {
    const temp_arr = [];
    arr.forEach(x => {
        if (x instanceof Array) {
            temp_arr.push(...flat(x))
        }else {
            temp_arr.push(x)
        }
    })
    return temp_arr;
}

标签: javascript ES6

评论(0) 浏览(525)

Powered by emlog