Design

Snippets text center <div class="text-center"> <h1>Welcome</h1> </div> Design Margin & padding Flex A Complete Guide to Flexbox FLexbox Playground Fonts Google Fonts Top 10 Web Fonts Serif Georgia Times New Roman Merriweather Sans-Serif Roboto Open Sans Source Sans Pro Lato Raleway Poppins Ariel Color Color Harmonies Complementary colors: Colors that are directly opposite one another on the color wheel are known as complementary colors. Complementary colors have a high contrast and can be very effective as accent colors when paired with a more neutral palette. ...

January 1, 2000

HTML

HTML Basic Template <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </body> </html>

January 1, 2000

Javascript

Basic var a = 10; // let b = 20; // 作用域以外不可引用,建议尽量用 let const c = 30; scope Hoisting Re-declaration var Function-scoped Yes, undefined if not initialized Yes let Block-scoped No, must be declared No const Block-scoped No, must be declared No String let s = "Hello, world" // => "ell": the 2nd, 3rd, and 4th characters s.substring(1,4) // => "ell": same thing s.slice(1,4) // => "rld": last 3 characters s.slice(-3) // => ["Hello", "world"]: s.split(", ") // => 2: position of first letter l s.indexOf("l") // => true: the string starts with these s.startsWith("Hell") // => true: s includes substring "or" s.includes("or") // => "Heya, world" s.replace("llo", "ya") // => "hello, world" s.toLowerCase() // => "H": the first character s.charAt(0) // => " x": add spaces on the left to a length of 3 "x".padStart(3) Template // greeting == "Hello Bill." let name = "Bill" let greeting = `Hello ${ name }.` Pattern Matching let text = "testing: 1, 2, 3" let pattern = /\d+/g pattern.test(text) text.search(pattern) text.match(pattern) text.replace(pattern, "#") text.split(/\D+/) 类型转换 // Number to string let n = 17 let s = n.toString() // String to number // => 3 parseInt("3 blind mice") // => 0.1 parseFloat(".1") // If the value is a string, wrap it in quotes, otherwise, convert (typeof value === "string") ? "'" + value + "'" : value.toString() 对象 let square = { area: function() { return this.side * this.side; }, side: 10 }; //等价于 let square = { area() { return this.side * this.side; }, side: 10 }; 数组 // forEach let data = [1, 2, 3, 4, 5], sum = 0 data.forEach(value => { sum += value; }) // map let a = [1, 2, 3] a.map(x => x*x) // filter let a = [5, 4, 3, 2, 1] a.filter(x => x < 3) // find and findIndex let a = [1, 2, 3, 4, 5] a.findIndex(x => x === 3) a.find(x => x % 5 === 0) // every and some a.every(x => x < 10) a.some(isNaN) // reduce a.reduce((x,y) => x+y, 0) // flat and flatMap [1, [2, 3]].flat() let phrases = ["hello world", "the definitive guide"] let words = phrases.flatMap(phrase => phrase.split(" ")) // concat let a = [1,2,3]; a.concat(4, 5) // stack and queue let stack = [] stack.push(1,2) stack.pop() let q = [] q.push(1,2) q.shift() // subarrays let a = [1, 2, 3, 4, 5, 6, 7, 8] a.slice(0,3) a.splice(4) // fill let a = new Array(5); a.fill(0) // indexOf let a = [0, 1, 2, 1, 0] a.indexOf(1) // includes let a = [1, true, 3, NaN] a.includes(true) // sort let a = ["banana", "cherry", "apple"] a.sort() // reverse a.reverse() // to string let a = [1, 2, 3] a.join(" ") [1,2,3].toString() 遍历 遍历列表 ...

January 1, 2000

Mini Program

Mini Program WXML 与 HTML 语法类似:WXML 使用 {{value}} 绑定数据 使用 wx:for 遍历数组 <view> <view class="title">Demo</view> <view> <view> <button type="default" size="mini" bind:tap="onChangeCnt">add cnt</button> cnt: {{cnt}} </view> <view> <button type="primary" size="mini" bind:tap="onChangeStr">reverse str</button> str: {{str}} </view> <view> <button type="warn" size="mini" bind:tap="onModifyObj">modify obj</button> obj.name: {{obj.name}}, obj.age: {{obj.age}} </view> <view> <button type="default" size="mini" bind:tap="onAppendArr">append arr</button> <button type="default" size="mini" bind:tap="onModifyArr">modify arr</button> <view wx:for="{{arr}}" wx:key="index"> index: {{index}}, name: {{item.name}}, age: {{item.age}} </view> </view> </view> </view> WXSS 与 CSS 语法类似:WXSS ...

January 1, 2000

Nginx

安装 自动安装 # CentOS sudo yum install nginx # Ubuntu sudo apt-get install nginx 安装后nginx路径为/usr/sbin/nginx,配置文件为/etc/nginx/nginx.conf 手动安装 下载&解压 wget http://nginx.org/download/nginx-1.17.10.tar.gz tar zxvf nginx-1.17.10.tar.gz cd nginx-1.17.10 调整配置 ./configure --without-http_rewrite_module ./configure --prefix=/usr/local/nginx --with-http_ssl_module # 安装SSL模块 如果有的依赖库没有,需要先安装 # centos yum -y install pcre* #安装使nginx支持rewrite yum -y install gcc-c++ yum -y install zlib* yum -y install openssl openssl-devel # ubuntu apt-get install openssl apt-get install libssl-dev # 安装完后再次检查配置 ./configure 查看默认安装的模块 cat nginx-1.17.2/auto/options | grep YES 编译&安装 make sudo make install 修改配置 cd /usr/local/nginx/ vi conf/nginx.conf # 参看当前 Nginx 最终的配置 sbin/nginx -T # 检查配置是否有问题 nginx -t -c <配置路径> 启动Nginx cd /usr/local/nginx # 启动 sbin/nginx # 停止/退出/重启/重载配置 sbin/nginx -s stop/quit/reopen/reload 配置 nginx 开机自启 参考:https://www.nginx.com/resources/wiki/start/topics/examples/systemd/ ...

January 1, 2000

Nodejs

Install # centos # https://github.com/nodesource/distributions#redhat-versions sudo yum install https://rpm.nodesource.com/pub_16.x/nodistro/repo/nodesource-release-nodistro-1.noarch.rpm -y sudo yum install nodejs -y --setopt=nodesource-nodejs.module_hotfixes=1 Install on Ubuntu How To Install Node.js on Ubuntu 22.04 版本管理 nvm curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash source ~/.bashrc nvm list-remote nvm install v20.10.0 node -v npm -v # change default node version nvm alias default 18 n # install sudo npm install -g n # 文档 n help # 切换版本 n # 安装指定版本 n 6.17.1 # 安装lts(newest Long Term Support official release) n lts # 删除版本 n rm 6.17.1 # 查看版本 node -v NodeJS 创建一个文件 index.js ...

January 1, 2000

Nuxtjs

Quick Start Nuxt - Introduction 基于 Vue 的 SSR (Server Side Rendering) 框架 Init: npx nuxi@latest init <project-name> # or using vite npm create vite@latest Run: # npm npm run dev -- -o # nuxi npx nuxi dev Commands Nuxt - nuxi # get nuxt info npx nuxi info # init project npx nuxi init <project_name> # add modules npx nuxi module add <NAME> # creates a .nuxt directory and generates types. npx nuxi prepare # run dev npx nuxi dev --dotenv .env.dev --host 127.0.0.1 --port 3000 # build npx nuxi build --dotenv .env.prod # preview after build npx nuxi preview # run type check npx nuxi typecheck Config Nuxt Configuration ...

January 1, 2000

Vue

Prerequisites Webpack 将 js 代码打包到一个文件中 安装:npm install webpack -g 使用:webpack <input> <output> vue cli(deprecated) Vue CLI the official webpack-based toolchain for Vue. It is now in maintenance mode and we recommend starting new projects with Vite unless you rely on specific webpack-only features. 安装:npm install -g @vue/cli 创建项目:vue create my-project # serve vue-cli-service serve --host 0.0.0.0 --port 8080 # build vue-cli-service build # lint vue-cli-service lint vite Vue.js - Tooling ...

January 1, 2000