Fwenyi-Blog

琴瑟在御 莫不静好

发表于 更新于

XSS（Cross Site Scripting）：跨域脚本攻击

XSS的攻击原理

XSS攻击的核心原理是：不需要你做任何的登录认证，它会通过合法的操作（比如在url中输入、在评论框中输入），向你的页面注入脚本（可能是js、hmtl代码块等）

XSS的防范措施
1、转义字符
2、引入js-xss
3、CSP (Content Security Policy,即内容安全策略)

CSRF（Cross-site request forgery）：跨站请求伪造

阅读全文 »

发表于 更新于

monorepo

monorepo追求的是在一个仓库中管理多个模块，每个模块有独立的package.json管理各自依赖，同时在项目根目录下可以通过命令安装或升级模块依赖，并提供了一个模块共享的node_modules。

yarn workspace

yarn workspace 是实现monorepo的一种方式。

1
2
3
4
5
{
  "private": true,
  "workspaces": ["packages/*"]
}

阅读全文 »

发表于 更新于 分类于 ，

Vue3响应式方案

Vue3中使用了ES6提供的Proxy来实现对数据的侦测.

  • 可以监听属性的增删操作。
  • 可以监听数组某个索引值的变化以及数组长度的变化

Proxy

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。

阅读全文 »

发表于 分类于 ，

vue预渲染方案

下载插件

npm install prerender-spa-plugin vue-meta-info

配置插件

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
// webpack.prod.config.js

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

const NODE_ENV = process.env.NODE_ENV


if (NODE_ENV === 'production') {
  webpackConfig.plugins.push(
    // prerender
    new PrerenderSPAPlugin({
      // Required - The path to the webpack-outputted app to prerender.
      staticDir: config.build.assetsRoot,
      // Required - Routes to render.
      routes: settings.prerenderRoutes,
       // 这个很重要，如果没有配置这段，也不会进行预编译
       renderer: new Renderer({
        inject: {
            foo: 'bar'
        },
        headless: false,
        // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
        // renderAfterDocumentEvent: 'render-event'
      })
    })
  )
}

// main.js

mounted() {
  document.dispatchEvent(new Event('custom-render-trigger'))
}
阅读全文 »

发表于 更新于 分类于 ，

项目初始化

  1. npm init @vitejs/app

    1
    2
    3
    4
    5
    {
        Project name 'vue3_demo',
        framework: 'vue',
        variant: 'TypeScript'
    }

  2. cd vue3_demo -> npm i -> npm run dev

vue3知识

ref和reactive的区别

ref 的作用就是将一个原始数据类型（primitive data type）转换成一个带有响应式特性的数据类型

阅读全文 »

发表于 更新于 分类于 ，

JSX

JSX 是一个静态类型、面向对象的编程语言，主要设计用来在浏览器上运行，你可以把它当作是 JavaScript 的增强版本。

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const list = []
const flag = false
function handleClick () {
    console.log('this is the click method')
}
function paramClick (obj = {}) {
    console.log (`param is ${JSON.stringfy(obj)}`)
}
function render () {
    return (
        <div>
            <a onClick={handleClick} title={title}>绑定事件和变量</a>
            <a onClick={() => paramClick(params)} title={title}>带参事件</a>
            {
                list.map((item, index) => (
                    <div key={index} {...item}>循环显示</div>
                ))
            }
            {
                flag && <div class='flag-ele'>条件判断显示</div>
            }
        </div>
    )
}

目前 vue-cli3 和 React 已经很好地支持JSX语法了，不需要安装额外的插件来配置

阅读全文 »

发表于 更新于 分类于 ， ，

el-page-table

基于 el 的页面级列表插件

参数

参数名 说明 类型 可选值 默认值
columns 列数组 array — []
dataSource 显示的数据 array — []
total 列表总数 number — 0
currentPage 列表当前页数 number — 1
loading 列表加载中 boolean — —
searchData 请求参数 object, undefined — —
query 列表请求方法 Function, undefined — —
querySuccess 请求成功之后的回调 Function, undefined — —
showPagination 是否显示分页 boolean — true
type 对应列的类型 string selection/index/expand —
rowSelection 多选框参数集合, 设置了type=selection,可以设置多选框选中事件 Object, undefined — —
formProps 搜索表单参数 （自定义布局） Object, undefined — —
middleSlot 列表头部左侧VNode VNode, undefined — —
middleButton 列表头部右侧VNode VNode, undefined — —
handleCurrentChange 列表分页事件（静态数据有效） Function(currentPage) — —
searchCallback 筛选回调事件（静态数据有效） Function(searchData) — —

使用

阅读全文 »

发表于 分类于 ，

React Hooks

函数组件中也可以实现状态管理

Hook 是一个特殊的函数，它可以让你“钩入” React 的特性

Hook 使你在无需修改组件结构的情况下复用状态逻辑

Hook 规则

阅读全文 »
0%