vue之登录权限
router.js
// 全局路由导航守卫
router.beforeEach((to, from, next) => {
const tokenStr = localStorage.getItem('token')
if (to.path === '/main' && !tokenStr) {
// 证明用户要访问后台主页
next('/login')
} else {
// 访问的不是后台主页
next()
}
})
来源：https://www.cnblogs.c ...
js iterator protocol & next() All In One
js iterator protocol & next() All In One
.next()
// Satisfies both the Iterator Protocol and Iterable
const myIterator = {
next: function() {
// ...
},
[Symbol.iterator]: function() { return this; }
};
iterator protocol
迭代器协议
// .next()
// .next().value
// .next().do ...
[Next.js] Override the Default Next.js Document
The Document is like the top level HTML structure of your Next.js application. You can use document to change the default language, set favicon;
Because Document only render on Server side, so it doesn't support event such as onClick....
pages/_document.txs
import { Html, Head, Main, NextScript } fr ...
[Next.js] Override the Default App Component in Next.js
You can override the default App component in Next.js by creating a _app.tsx file and defining your own App component. By doing this, you can use global styles, pass custom props, and more.
pages/_app.tsx
import type {AppProps} from "next/app";
const App = ({Component, pageProps ...
[Next.js] Serve Optimized Images Using the Next.js Image Component
The image component from Next.js comes with excellent performance optimizations that make it worth using. It comes with improved performance, better visual stability, faster page loads, and more!
In this lesson you’ll learn how to use this component to serve both local and remote images in your Nex ...
关于Next.js项目启动后页面空白（控制台报错）问题的排查
初始化Next.js工程项目后，打开开发环境下的默认地址，页面空白，打开控制台出现如下错题信息：
Uncaught TypeError: Cannot read properties of undefined (reading 'forEach')
让人一脸茫然。。
因为是刚初始化的项目，代码也没有改动，所以直接去网上查找相似问题。
最后，将引起问题的原因聚焦到了React的浏览器开发调 ...
LeetCode每日一练【24】
Swap Nodes in Pairs
我的提交
介绍
罗里吧嗦
思路
循环遍历链表
交换两个节点
找到下两个节点,继续进行交换
代码
/*
* @Author: fox
* @Date: 2022-05-05 08:01:04
* @LastEditors: fox
* @LastEditTime: 2022-05-05 10:04:31
* @Description: https://leetcode.com/problems/swap-nodes-in-pairs/
*/
/**
* @de ...
Next.js 在 Serverless 中从踩坑到破茧重生
本文作者：杨苏博
偏后端的全栈开发，目前负责腾云扣钉的 Cloud Studio 产品。对 WebIDE 领域中的 VS Code 和 Theia IDE 有深入研究与丰富实践；多年 Serverless 领域从业经验，是 Serverless First Malagu 开源框架的作者；热爱开源，敢于创新。
前言
Next.js 是由 Vercel 团队研发的一款全栈应用开发框架，我们使用 Nex ...
vue导航守卫
main.js
router.beforeEach((to, from, next) => {
let token = sessionStorage.getItem('token')
if (to.meta.require) {
if (token) {
// 允许进入
next()
} else {
// 跳登录
}
} else {
next()
}
})
router.js
{
path: '/demo',
name: 'demo'
component: () => imp ...
[Next.js] Hide Sensitive Information from the Consumers of Next.js API
We'll learn how to use Next.js API Routes to hide sensitive information from the clients. In this case, we're calling the JSON Placeholder API with a "secret" value in the headers. All that sensitive information is hidden from the clients since they don't call, or even know, that we're calling the J ...
[Next.js] Add Middleware to an API Route Created with next-connect
We'll learn how to create a middleware function for next-connect. This middleware will work at the route level, for example, for every request that hits the /api/next-connect-middleware endpoint, or at the HTTP verb level, GET /api/next-connect-middleware
import nextConnect from 'next-connect'
con ...
[Next.js] Create an API Route Using the next-connect Package
We'll learn an alternative way of creating API routes using the next-connect package. next-connect gives us an alternative that would feel familiar to anyone that has worked with Express in the past.
https://github.com/hoangvvo/next-connect
import nextConnect from "next-connect"
const handler = ...
next.js
参考：https://nextjs.org/learn/foundations/from-react-to-nextjs/getting-started-with-nextjs
next.js是react的一个前端框架。react本质上是一个UI库，用于操作虚拟DOM。next.js是基于react的一个前端框架，类似于springboot，有很多约定俗成的配置。
1 不用脚手架创建next.js项目
在一个空路径下面创建package.json,内 ...
js使用reduce对数组求和
let arr = [3, 4, 5, 2, 1];
let sum = arr.reduce((pre, next) => {
pre += next;
return pre;
}, 0)
console.log('结果:', sum);
这是我的签名
来源：https://www.cnblogs.com/zxcv123/p/16070778.html
Next.js的Babel及拆包优化
1 Babel兼容
1.2 Babel按需加载规则（useBuiltIns）
在Babel>7的条件下，支持通过useBuiltIns参数来实现按需加载必要的垫片。
useBuiltIns=false
不会自动引入垫片。
useBuiltIns=entry
通过@babel/preset-env插件，按照浏览器环境按需加载需要的模块来替换对core-js的直接引用 ...
the next generation block styled editor -- eidtor.js
what’s editor?
Next generation block styled editor. Free. Use for pleasure.
Editor.js is a block-style editor for rich media stories. It outputs clean data in JSON instead of heavy HTML markup. And more important thing is that Editor.js is designed to be API extendable and pluggable.
So there ar ...
Next.js -- SSG of React
SSR
https://css-tricks.com/server-side-react-rendering/
react代码在客户端渲染，这样导致SEO不友好。
由此引入，SSR 服务器端渲染技术：ReactDomServer库。
The Benefits of Server-Side Rendering
SEO might be the conversation that starts your team talking about server-side rendering, but it’s not the only ...
乘风破浪，遇见未来元宇宙(Metaverse)之面向效率至上的利器Next.js，开启元宇宙时代的前端开发
什么是Next.js
https://www.nextjs.cn
这是一个用于生产环境的React框架
Next.js为您提供生产环境所需的所有功能以及最佳的开发体验：包括静态及服务器端融合渲染、支持TypeScript、智能化打包、路由预取等功能无需任何配置。
为什么选择Next.js
全球领先的公司都在使用并喜爱Next.js
理由
要从头开始使用React构 ...
链表
//JS没有链表，可以用object 模拟链表
const a = { val: 'a'};
const b = { val: 'b'};
const c = { val: 'c'};
const d = { val: 'd'};
a.next = b;
b.next = c;
c.next = d;
//遍历链表
let p = a;
while (p) {
console.log(p.val);
p = p.next;
}
//插入
const e = { val: 'e'}
c.next = e;
e.next = d;
来 ...
Next.js 是怎么做预渲染的
前言
打开 next.js 官网，首先映入眼帘的是它的 Slogan 和介绍：
The React Framework for ProductionNext.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more ...
