Young`s Blog

发表于 分类于

开发时间久了，本地的远程分支会很多，因此可以用下面的命令

git branch -a // 查看所有分支
git remote show origin // 查看本地分支对应的远程分支状态
git remote prune origin // 删除远程没有与本地关联的所有分支

发表于 更新于 分类于

前言

  1. 目前js常用的两种模块系统分别是：CommonJs以及ES Module（推荐使用）
  2. 在 CommonJS 模块系统中，模块的导出和引用使用 module.exports 和 require，这是 Node.js 的默认模块系统（如果 package.json 没有指定 “type”: “module”）
  3. 在ES Module中则使用我们目前常用到的export，import语法

问题描述

  1. 如果明确指定了package.json中**type=”module”**的话，引用文件在导入时需要添加后缀，示例如下：
// index.js
import xx from "xx" // 错误写法，node执行会抛出 ERR_MODULE_NOT_FOUND 错误
import xx from "xx.js" // 正确写法
  1. 如果是在TypeScript项目中引用，开发阶段不编译的情况下也是可以直接引入js后缀文件，示例如下：
// index.ts
import xx from "xx.js" // 可以使用xx.js写法引入xx.ts文件，代码是可以正常运行的

原因

ES标准要求，在 Node.js 中，当你设置了 "type": "module"，要求开发者明确指定文件的路径和扩展名，这是为了遵循 ES 模块标准，与浏览器行为保持一致，并减少模块解析的歧义，与 CommonJS 的模块解析机制不同，Node.js 不会自动推断文件的扩展名

发表于 更新于 分类于

  1. 前端项目根目录下添加==bunconfig.toml==

  2. 新增如下配置：

[install]
# 添加淘宝源（注意旧的淘宝源http://registry.npm.taobao.org已不再更新）
registry = "https://registry.npmmirror.com"

发表于 更新于 分类于

概述

  1. 前后端通信，可采用restful风格的api，除了restful api还有另一种风格的api Graphql
  2. 本质上其实就是编写http请求的一种规范

常见的http方法

  • GET：获取资源（请求参数一般附加在url后面）
  • POST：创建新资源（请求参数一般放在请求体body中）
  • PUT：更新现有资源（请求参数一般也是放在body中）
  • DELETE：删除资源（删除一般是删除指定id，id放在url后面）

URL设计

  1. url应该表示资源，而不是动作，应该使用http方法表示动作

    例子：

    • GET /users （正确）GET /getUsers（不推荐）

    • POST /users （正确）POST /createUser（不推荐）

  2. 使用复数形式表示资源集合

    例子：

    • GET /users （正确）GET /user（不推荐）

请求和响应设计

  1. http状态码
分类 描述
1** 信息性状态码，一般不常用
2** 成功状态码
3** 重定向状态码，一般不常用
4** 客户端错误状态码，多半是前端参数错误
5** 服务端错误状态码，多半是后端接口错误
  1. 常用的状态码（避免滥用200状态码来表示所有情况）
状态码 描述
200（OK） 请求成功时使用
400（Bad Request） 客户度（一般是前端）语法错误，后端服务不能理解
401（Unauthorized） 没有授权，需要进行身份认证
403（Forbidden） 访问被禁止，原因很多
404（Not Found） 请求资源找不到
500（Internal Server Error） 服务端内部错误
502（Bad Gateway） 网关错误或者代理服务器错误，一般是挂掉了
504（Gateway Time-out） 网关超时，没有及时响应
  1. 请求响应传输格式：使用JSON
  2. 响应实体设计（golang为例）
// Response 常规响应实体封装
type Response struct {
	/* 响应码 */
	Code StatusCode `json:"code"`
	/* 响应描述 */
	Message string `json:"message"`
	/* 响应数据(可以为空) */
	Data interface{} `json:"data,omitempty"`
	/* 响应时间戳 */
	Time int64 `json:"time"`
}

// PageResponse 列表响应实体封装
type PageResponse struct {
	/* 响应码 */
	Code StatusCode `json:"code"`
	/* 响应描述 */
	Message string `json:"message"`
	/* 响应数据(可以为空) */
	Data interface{} `json:"data,omitempty"`
	/* 响应时间戳 */
	Time int64 `json:"time"`
	/* 响应分页页码 */
	Page int `json:"page"`
	/* 响应分页大小 */
	Size int `json:"size"`
	/* 响应分页总条数 */
	Total int `json:"total"`
}

// 自定也业务状态码

type StatusCode int

const (
	// Successful responses
	StatusOK StatusCode = 200

	// Client error responses
	StatusBadRequest   StatusCode = 400
	StatusUnauthorized StatusCode = 401
	StatusForbidden    StatusCode = 403
	StatusNotFound     StatusCode = 404

	// Server error responses
	StatusInternalServerError StatusCode = 500
	StatusNotImplemented      StatusCode = 501
	StatusBadGateway          StatusCode = 502
	StatusServiceUnavailable  StatusCode = 503
)

// 实现 StatusCode 类型的string方法，会返回状态码对应的描述
func (s StatusCode) String() string {
	switch s {
	case StatusOK:
		return "OK"
	case StatusBadRequest:
		return "Bad Request"
	case StatusUnauthorized:
		return "Unauthorized"
	case StatusForbidden:
		return "Forbidden"
	case StatusNotFound:
		return "Not Found"
	case StatusInternalServerError:
		return "Internal Server Error"
	case StatusNotImplemented:
		return "Not Implemented"
	case StatusBadGateway:
		return "Bad Gateway"
	case StatusServiceUnavailable:
		return "Service Unavailable"
	default:
		return "Unknown Status"
	}
}


// 通用方法调用
// HandleOk 成功时调用
func HandleOk(c *gin.Context, code utils.StatusCode, message string, data interface{}) {
	json := &utils.Response{Code: code, Message: message, Data: data, Time: time.Now().UnixMilli()}
	c.JSON(int(code), json)
}

// HandleError 失败时调用，失败时Data为 nil
func HandleError(c *gin.Context, code utils.StatusCode, message string) {
	json := &utils.Response{Code: code, Message: message, Data: nil, Time: time.Now().UnixMilli()}
	c.JSON(int(code), json)
}

发表于 更新于 分类于 ，

Dockerfile编写

  1. 随便新建一个文件夹(比如是：mysql文件夹)，使用vim Dockerfile并添加下面的内容
# 使用官方MySQL 8.0镜像作为基础镜像
FROM mysql:8.0

# 设置环境变量
ENV MYSQL_ROOT_PASSWORD=mypwd
ENV MYSQL_DATABASE=mydb

# 拷贝初始化脚本到docker-entrypoint-initdb.d目录
COPY ./init.sql /docker-entrypoint-initdb.d/

# 暴露MySQL端口
EXPOSE 3306

  1. 在mysql文件夹下，使用vim init.sql并添加下面的内容
-- 创建数据库（如果需要）
CREATE DATABASE IF NOT EXISTS mydb;
-- 选择要使用的数据库（如果需要）
USE mydb;
-- 你可以添加更多的SQL语句来初始化数据库，表结构等。

镜像构建&运行

在新建的mysql目录下执行下面的命令

sudo docker build -t my-mysql:8.0 .

运行该镜像

sudo docker run --name mysql-container -d -p 3306:3306 my-mysql:8.0

验证安装

sudo docker exec -it mysql-container mysql -u root -p

数据库连接

比如Navicat远程连接该数据库，博主此处mysql是装在云服务器上的，所以可以使用ip端口号密码就可以连接；需要注意的是，服务器上一般不会默认开发3306端口，所以使用Navicat测试连接会失败，所以需要去对应的服务器控制台，开放对应的端口规则，访问才能生效

发表于 更新于 分类于 ，

安装(mysql8.0)

升级源并安装mysql8.0

sudo apt update
sudo apt install mysql-server

安装后，mysql服务会自己启动，验证方式如下

sudo systemctl status mysql

运行安全安装脚本

MySQL 安装文件附带了一个名为mysql_secure_installation的脚本，它允许你很容易地提高数据库服务器的安全性。

sudo mysql_secure_installation

你将会被要求配置VALIDATE PASSWORD PLUGIN，它被用来测试 MySQL 用户密码的强度，并且提高安全性：

There are three levels of password validation policy:

LOW    Length >= 8
MEDIUM Length >= 8, numeric, mixed case, and special characters
STRONG Length >= 8, numeric, mixed case, special characters and dictionary                  file

Please enter 0 = LOW, 1 = MEDIUM and 2 = STRONG: 2

如果你设置了验证密码插件，这个脚本将会显示你的新密码强度。输入y确认密码：

Estimated strength of the password: 50 
Do you wish to continue with the password provided?(Press y|Y for Yes, any other key for No) : y

下一步，你将被要求移除任何匿名用户，限制 root 用户访问本地机器，移除测试数据库并且重新加载权限表。你应该对所有的问题回答y。

登录mysql

密码是运行安全安装脚本时设置的密码

sudo mysql -u root -p

发表于 分类于

yalc介绍

该工具用于本地包开发联调，以前常用的是npm link，但是npm link调试方式相对繁琐，yalc简直是本地开发包的神奇，简单高效

yalc使用

全局安装
npm i yalc -g
使用

  1. 开发包下执行该命令，发布该依赖

    yalc publish

  2. 需要使用该包的项目中，添加需要调试的包

    yalc add xxx

  3. 开发的包有更新的话，执行该命令，全局add了该包的项目都会更新包内容

    yalc push

  4. 移除依赖

    yalc remove xxx

发表于 分类于

Hexo插件分类

插件类别 插件作用
渲染插件 界面渲染逻辑处理，例如：hexo-renderer-ejs、hexo-renderer-pug
部署插件 静态文件发布
分析插件 数据分析：例如文章字数、阅读时间等
SEO插件 搜素引擎优化插件
生成器插件 生成特定的页面或者文件：例如标签页面、分类页面等
过滤器插件 过滤器插件在 Hexo 的生命周期的各个阶段对内容进行处理。例如，添加代码高亮、处理图片等。
显示插件 显示插件提供辅助功能，通常用于模板或布局中，例如生成导航菜单、分页等。
模版插件 模板插件提供主题和样式相关的功能，帮助美化博客的外观。
扩展插件 扩展插件增加或修改 Hexo 的核心功能，提供额外的特性和功能。
数据插件 数据插件用于处理外部数据源，例如从数据库或 API 获取数据，并在博客中展示。

Hexo插件使用

安装插件
npm i hexo-create-issues
配置插件
# _config.yml 文件
plugins:
  - hexo-create-issues # 你想要使用的插件名，需要安装依赖后使用

Hexo插件开发

Tips 1: 建议使用commonjs方式编写，新的一些package大都是esmodule编写，commonjs中引入需要动态导入import()

Tips 2: Hexo 插件需要以hexo-前缀开头，同时不能重名

脚本模式开发
  1. hexo工程目录下新建scripts文件夹
  2. 根据需求编写对应脚本
npm包形式开发

  1. 新建项目，按照npm包开发流程即可

  2. 项目依赖安装，其他需要的依赖自行安装，hexo是必须的

    npm install hexo

  3. 根据需求编写脚本

    • hexo.on() 可以监听hexo执行的生命周期钩子，可以编写相关逻辑

    • hexo.config可以获取_config.yml中的所有配置项，逻辑中可以调用获取

  4. 本地联调：建议使用yalc，具体使用方式可以参考博主的这篇文章，yalc使用

  5. 调试完成，发布至npm

    npm login
    npm publish

  6. 项目中使用：安装发布的npm包后，_config.yml中再配置一下即可(plugins以及所需变量配置)

Hexo插件发布至hexo列表

  1. 需要先发布npm包

  2. 然后fork hexojs/site

  3. clone fork后的仓库到本地

  4. 在clone后的项目中的source/_data/plugins/ 中创建一个新的 yaml 文件，使用您的插件名称作为文件名

  5. 编辑yaml文件，按需求录入以下内容

    description: Server module for Hexo.
    link: https://github.com/hexojs/hexo-server
    tags:
      - official
      - server
      - console

  6. push修改，再向hexo site官方提交一个pull request，请注意提交的commit msg格式规范

发表于 更新于 分类于

css中透明度

  • opacity ：属性用于设置元素的整体透明度。它会影响元素本身及其所有子元素
  • rgba：rgba 颜色值中的 a 代表 alpha 通道，用于设置颜色的透明度。rgba 可以用来设置背景色、边框色、文字颜色等
  • hsla：hsla 颜色值类似于 rgba，但使用色相 (Hue)、饱和度 (Saturation)、亮度 (Lightness) 和 alpha 通道来定义颜色。

opacity叠加效果计算

opacity方式叠放：例如opacity 值都是60%，叠加元素的透明度 ：0.6 + 0.6 * （1 - 0.6）= 0.84

发表于 分类于 ，

准备工作

  • 安装swagger cli（用与格式化注释以及生成swagger json文件）
go get -u github.com/swaggo/swag/cmd/swag
  • mac中安装后需要将swag移动到下面的路径下，确保shell中swag命令全局可用：
sudo mv $GOPATH/bin/swag /usr/local/go/bin
  • 检测是否成功安装
swag -v
  • 其他扩展文件安装
go get -u -v github.com/swaggo/gin-swagger # 集成 Swagger 文档到 Go 的 Gin 框架中的库
go get -u -v github.com/swaggo/files # Go 项目中集成 Swagger UI
go get -u -v github.com/alecthomas/template # Go 语言中用于文本和 HTML 模板处理的库

使用流程

注释

官方文档

注解 说明
@Summary 摘要
@Produce 生成的文档的MIME类型，json、xml等
@Param 参数，左=>右分别为：参数名、入参类型、数据类型、是否必填、注释
@Success 响应成功，从左到右分别为：状态码、参数类型、数据类型、注释
@Failure 响应失败，从左到右分别为：状态码、参数类型、数据类型、注释
@Router 路由，从左到右分别为：路由地址，HTTP 方法

代码示例

Tips: 需要注意的是，注释中引用其他类型，比如model.Tool ，需要在Tool上添加注释，swag init才会自动做类型的关联，不然swag识别不了该写法

// Tool represents a tool entity
// @Description Tool represents a tool entity
type Tool struct {
	ID       uint   `json:"id,omitempty" gorm:"column:id" swaggerignore:"true"`
	Category string `json:"category" gorm:"column:category"`
	Name     string `json:"name" gorm:"column:name"`
	Url      string `json:"url" gorm:"column:url"`
}
//	@Summary	我的工具信息列表获取
//	@Produce	json
//	@Success	200	{object}	model.Tool	"请求成功"
//	@Failure	400	{string}	string		"请求错误"
//	@Failure	500	{string}	string		"内部错误"
//	@Router		/tool/list [get]
func (T ToolController) ToolListController(c *gin.Context) {
  // do something
}

//	@Summary	我的工具项新增
//	@Produce	json
//	@Param		tool	body		model.Tool	true	"Tool object to be added"
//	@Success	200		{object}	model.Tool	"成功"
//	@Failure	400		{object}	string		"请求错误"
//	@Failure	500		{object}	string		"内部错误"
//	@Router		/tool/add [post]
func (T ToolController) ToolAddController(c *gin.Context) {
  // do something
}
格式化
swag fmt # 会扫描该项目所有包含注释的方法，对注释进行格式化
文档生成

swag init 扫描文件，一般都需要包含main.go，不然会报错，笔者项目main.go不在根目录下，所以需要手动指定swag扫描的文件，这里我们指定了，./cmd/my_website_backend该文件包含main.go，./internal/app/controller该文件中包含添加注释的控制器函数，./internal/app/model该文件包含数据模型映射的类型，注释中有时候需要引用该类型；最后-o ./api/swagger指定生成的文档存储在./api/swagger文件夹中

swag init --dir ./cmd/my_website_backend,./internal/app/controller,./internal/app/model -o ./api/swagger
文档路由添加

生成的文档需要有专门的路由进行展示，需要我们配置：

package router

import (
	"github.com/gin-gonic/gin"
	swaggerFiles "github.com/swaggo/files"
	ginSwagger "github.com/swaggo/gin-swagger"
	_ "web_backend.com/m/v2/api/swagger" // 这里替换成swag init 生成后的go package 路径即可
)

// GenSwaggerRouters swagger页面路由
func GenSwaggerRouters(r *gin.Engine) {
	r.GET("/swagger/*any", ginSwagger.WrapHandler(swaggerFiles.Handler))
}

前端接口文档自动生成

  • 前后端对接接口，前端手动去添加typescript类型的话，费时费力
  • 行业有这样一种解决方案，利用openApi规范，后端按规范写好json注释，我们利用提供的openapi-generatorcli工具生成支持的任意类型的接口，避免重复声明类型
  • 官方有现成的解决方案，行业内也有许多，咱们这里选用国内阿里开源的库@umijs/openapi去生成接口文档，更好的其他方式，可以自己去探索
安装
pnpm add -D @umijs/openapi
使用
  • 博主这里是放在根目录下的script/genOpenApi.js文件中的
import { generateService } from "@umijs/openapi";

generateService({
  schemaPath: "http://127.0.0.1:8001/swagger/doc.json", // swagger.json地址，按需修改
  serversPath: "src",// 生成后的文件路径，按需修改
});

  • package.json scripts中添加生成的脚本命令，按自己需求更改
"openApi": "node script/genOpenApi.js"
其他配置参照官方文档
0%