程式學習: 7月 2021

2021年7月27日星期二

window.NUXT 刪除 / 簡化

https://www.zhihu.com/question/430049651/answer/1574647441

作者：熊爸爸科技工坊
链接：https://www.zhihu.com/question/430049651/answer/1574647441
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

看下页面的源代码，虽然window._NUXT_还是在，但是已经显示的数据极为有限了，里面就剩两个必要的数据

一个是serverRendered:true一个是routePath

其中serverRendered是告诉框架我要在服务器端渲染哦，而routePath是告诉浏览器我当前的页面路径是什么，那么为什么这两个字段是必不可少的呢?其实按照网上其他的文章把window._NUXT_完全删除是可以正常实现服务器端渲染的，而且一般来说也不会有什么问题，唯一会产生的副作用就是客户端的一些脚本可能无法正常运行，那是因为NUXT框架会将服务器端渲染的DOM与浏览器端的DOM做一个比较，如果比对不匹配就无法正常运行浏览器端的脚本。因此不需要浏览器端什么操作的话，直接按照其他人的方法暴力删除就好了，拿如果你想完整的运行就继续往下看把。

其实要解决这删除window._NUXT_问题的入口在于NUXT有一个Hook方法可以使用vue-renderer:ssr:context，这个hook方法会在服务器端渲染前被调用，注意到了吗？是渲染前，因此serverRenderer:true这个设置就必须存在，否则就不会在服务器端渲染了！

然后就是要设置一下routePath这个设置变量，这个变量是动态的，会根据访问的页面来设定所以不能固定死，不过解决办法也很简单，因为vue-renderer:ssr:context在调用的时候会传入nuxt的上下文对象，其中就有routePath ，只要将这个值获取在赋值就好了，不过一定要记住一点请使用JSON.stringify来复制该值，因为之后我们要删除其他所有跟window._NUXT_有关的数据，也包括routePath所以一定要值复制，不能是引用复制！

  hooks: {
    'vue-renderer:ssr:context'(context){
      const routePath = JSON.stringify(context.nuxt.routePath);
      context.nuxt = {serverRendered: true, routePath }
    },
  }

一些vue增加的新功能 errorCaptured hook

https://gist.github.com/yyx990803/9bdff05e5468a60ced06c29c39114c6b

https://vuejs.org/v2/api/#errorCaptured

https://blog.fundebug.com/2019/06/17/handling-errors-in-vuejs/

2021年7月22日星期四

vue 動態屬性接return func 會一直觸發

因為

Instead of a computed property, we can define the same function as a method. For the end result, the two approaches are indeed exactly the same. However, the difference is that computed properties are cached based on their reactive dependencies. A computed property will only re-evaluate when some of its reactive dependencies have changed. This means as long as message has not changed, multiple access to the reversedMessage computed property will immediately return the previously computed result without having to run the function again.

(https://vuejs.org/v2/guide/computed.html)

在外層寫上v-once 可以讓裡面的element只render第一次

2021年7月18日星期日

npm-cache

https://www.axihe.com/api/npm/cli/npm-cache.html

https://docs.npmjs.com/cli/v7/commands/npm-cache

2021年7月15日星期四

Vue Test Utils

// error.test.js

/**
 * @jest-environment jsdom
 */

import { shallowMount } from '@vue/test-utils'
import store from '@/store/index';
import router from '@/router';
import Error from '@/layouts/error.vue'

describe('MyComponent', () => {
  it('render without crashing', () => {
    const wrapper = shallowMount(Error, {
      router,
      store,
      propsData: { error: {msg: 'Hello, World!' }}
    })
    expect(wrapper.html()).toContain('內容!') 
  })
})

// error.server.test.js

import { render } from '@vue/server-test-utils'
import store from '@/store/index';
import router from '@/router';
import Error from '@/layouts/error.vue'
 
describe('MyComponent', () => {
  it('render without crashing', async () => {
  const wrapper = await render(Error, {
    router,
    store,
    propsData: { error: {msg: 'Hello, World!' }}
  })

    expect(wrapper.text()).toContain('內容!') 
  })
})

Vuex mocking not working? (不認識dispatch / vuex ...)

https://github.com/vuejs/vue-test-utils/issues/116

How to unit test a typescript Vue Component that uses vuex-class 不認得(Vuex)
https://stackoverflow.com/questions/59245479/how-to-unit-test-a-typescript-vue-component-that-uses-vuex-class

不認得 ts ↓

https://vue-test-utils.vuejs.org/zh/installation/#%E9%80%89%E6%8B%A9%E4%B8%80%E4%B8%AA%E6%B5%8B%E8%AF%95%E8%BF%90%E8%A1%8C%E5%99%A8

英文版test: https://livebook.manning.com/book/testing-vue-js-applications/chapter-13/54

中文版test: https://ithelp.ithome.com.tw/articles/10241568

When you write unit tests for server-side rendered components, you should run the tests in a Node environment, not a jsdom environment.

The problem is that Jest runs tests inside a jsdom environment by default, which means DOM properties like document are defined when you run the test.

You should split server-side tests and client tests into separate files. You can run each test file in only one environment.

test runner:

1.jest

2.mocha

Vue Test Utils 都能够支持。它是与测试运行器(test runner)无关的

2021年7月14日星期三

BEC, Business Email Compromise, 商業電子郵件詐騙

1. 電子郵件詐騙

按郵件內的回覆，帶入的收件人和原本的寄件人不同

2.網路釣魚

2021年7月13日星期二

Is it not possible to stringify an Error using JSON.stringify? The problem is that I end up with an empty object.

https://stackoverflow.com/questions/18391212/is-it-not-possible-to-stringify-an-error-using-json-stringify

// String-keyed array elements are not enumerable and make no sense in JSON
let a = ['foo', 'bar'];
a['baz'] = 'quux';      // a: [ 0: 'foo', 1: 'bar', baz: 'quux' ]
JSON.stringify(a);
// '["foo","bar"]'

Error object doesn't have its enumerable properties, that's why it prints an empty object

express res 參數說明

https://expressjs.com/zh-tw/api.html#res

res.render的說明

https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/200136/

// ssr error handle基礎框架

export default { // ... hooks: { render: { errorMiddleware(app) { app.use((error, _req, _res, next) => { if (error) { console.log("Logged in errorMiddleware", error); } next(error); }); }, }, },

};

// 實際應用

hooks: {
    render: {
      errorMiddleware(app) {
        app.use((error, req, res, next) => {
          // handle ssr error to browser
          if (error) {
            res.writeHead(200, {
              'Content-Length': Buffer.byteLength(JSON.stringify(error, Object.getOwnPropertyNames(error))),  
              'Content-Type': 'text/plain'
            });
              
            res.end(JSON.stringify(error, Object.getOwnPropertyNames(error)));   // Error object doesn't have its enumerable properties, that's why we use replacer. or it'll print an empty object
          } else {
            next(error);
          }

          // setTimeout ok了，timeout就是沒有錯誤而超過時間才會出現，所以直接告訴timeout就可以~~
          res.setTimeout(1000, function(){
            // console.log('Request has timed out.');
            res.writeHead(307, {
              Location: '/timeout'
            });
            res.end();
          });
         
        })
      },
    },
  },

2021年7月4日星期日

D3.js是一个数据可视化库。它使基于数据的生成和修改图形变得容易。但是，这与3D(webGL)无关。

2021年7月1日星期四

正式機上shutdown 畫面卡住

畫面卡住意指:

畫面沒有完全出來或是 hover行為沒有動作 等等

同時本機是好的

(還可能正式機上打開開發者工具畫面就正常了)

這一次在遇到問題時有出現下面這個錯誤

那很可能就是try...catch... 太多次，所以壞了

從這個方向去找bug

訂閱：文章 (Atom)

文章加密

2021年7月27日 星期二

2021年7月22日 星期四

2021年7月18日 星期日

2021年7月15日 星期四

2021年7月14日 星期三

2021年7月13日 星期二

2021年7月4日 星期日

2021年7月1日 星期四