Android使用TextView加载Html实现点击图片放大

发表于 2023-05-11

具体实现

在 Android的 TextView 中加载HTML标记时，我们可以使用 <img> 标记来显示图片，然后通过重写 onTouchEvent 方法来实现图片的放大效果。下面是一个示例代码，该代码在点击图片时会弹出一个对话框显示原图，用户可以选择是否放大图片。

public class MyTextView extends AppCompatTextView {
    private static final int LONG_CLICK_TIME_THRESHOLD = 400;
    private long mStartClickTime = 0;

    public MyTextView(Context context) {
        super(context);
    }

    public MyTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public MyTextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        CharSequence text = getText();
        if (text instanceof Spanned) {
            Spanned spanned = (Spanned) text;
            int action = event.getAction();

            if (action == MotionEvent.ACTION_DOWN) {
                mStartClickTime = System.currentTimeMillis();
            } else if (action == MotionEvent.ACTION_UP) {
                long clickDuration = System.currentTimeMillis() - mStartClickTime;

                if (clickDuration < LONG_CLICK_TIME_THRESHOLD) {
                    int x = (int) event.getX();
                    int y = (int) event.getY();
                    x -= getTotalPaddingLeft();
                    y -= getTotalPaddingTop();
                    x += getScrollX();
                    y += getScrollY();
                    Layout layout = getLayout();
                    int line = layout.getLineForVertical(y);
                    int offset = layout.getOffsetForHorizontal(line, x);

                    ClickableSpan[] link = spanned.getSpans(offset, offset, ClickableSpan.class);
                    ImageSpan[] images = spanned.getSpans(offset, offset, ImageSpan.class);

                    if (link.length != 0) {
                        link[0].onClick(this);
                        return true;
                    } else if (images.length != 0) {
                        Drawable drawable = images[0].getDrawable();
                        Bitmap bitmap = null;
                        if (drawable instanceof BitmapDrawable) {
                            bitmap = ((BitmapDrawable) drawable).getBitmap();
                        } else if (drawable instanceof GifDrawable) {
                            bitmap = ((GifDrawable) drawable).getFirstFrame();
                        }
                        if (bitmap != null) {
                            AlertDialog.Builder builder = new AlertDialog.Builder(getContext());
                            builder.setTitle("图片预览");
                            View view = LayoutInflater.from(getContext()).inflate(R.layout.dialog_image_preview, null);
                            ImageView imageView = view.findViewById(R.id.image_view);
                            imageView.setImageBitmap(bitmap);
                            builder.setView(view);
                            builder.setPositiveButton("放大", new DialogInterface.OnClickListener() {
                                @Override
                                public void onClick(DialogInterface dialog, int which) {
                                    // 进行图片放大操作
                                }
                            });
                            builder.setNegativeButton("关闭", new DialogInterface.OnClickListener() {
                                @Override
                                public void onClick(DialogInterface dialog, int which) {
                                    dialog.dismiss();
                                }
                            });
                            builder.show();
                            return true;
                        }
                    }
                }
            }
        }
        return super.onTouchEvent(event);
    }
}

// 使用方式
String html = "这是一张图片： <img src='file:///android_asset/sample.png'>";

MyTextView textView = findViewById(R.id.text_view);
textView.setText(Html.fromHtml(html, new Html.ImageGetter() {
    @Override
    public Drawable getDrawable(String source) {
        Drawable drawable = null;
        try {
            InputStream inputStream = getAssets().open(source);
            drawable = Drawable.createFromStream(inputStream, null);
            drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
        } catch (IOException e) {
            e.printStackTrace();
        }
        return drawable;
    }
}, null));
textView.setMovementMethod( LinkMovementMethod.getInstance());

在这个示例代码中，我们继承了 AppCompatTextView 并重写了 onTouchEvent 方法。在该方法中，我们使用类似于之前的方式获取点击位置，并查找到该位置对应的 ImageSpan 对象。然后我们根据该对象的 Drawable 对象生成一个 Bitmap 对象，并将其显示在一个自定义的对话框中。在对话框中，用户可以选择放大图片，也可以直接关闭对话框。

需要注意的是，当我们使用 <img> 标记来显示图片时，我们需要在第二个参数中传入一个 ImageGetter 对象，该对象用于将图片加载到 Drawable 中并返回。在本例中，我们通过从 Assets 中读取文件的方式来生成 Drawable 对象，并将其绑定到相应的 ImageSpan中。那么在触发点击事件时，我们只需要找到该位置的 ImageSpan 并获取其 Drawable 对象就能够得到原始的 Bitmap 对象了。

本文内容来自 : ChatGPT

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

Android使用TextView加载Html都支持哪些标签和样式

发表于 2023-05-10

支持的标签

Android 原生的 TextView 控件通过 Html.fromHtml() 方法可以加载 HTML 内容，并自动将其转换为Spannable 对象以支持富文本样式和链接等功能。在加载 HTML 内容时，TextView支持的 HTML 标签和样式主要有以下几种：

标题标签

TextView 可以解析 HTML 中的标题标签，包括 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>，并自动转换为对应的样式。

例如：

1	myTextView.setText(Html.fromHtml("<h1>这是一级标题</h1><h2>这是二级标题</h2>"));

文本格式标签

TextView 支持的文本格式标签有 <b>（加粗）、<i>（斜体）、<u>（下划线）和 <strike>（删除线）等。在加载HTML 时，这些标签会自动被转换为相应的 Spannable 对象，并应用到对应的文字上。

例如：

1	myTextView.setText(Html.fromHtml("<b>这段文字加粗</b>，<i>这段文字斜体</i>，<u>这段文字加下划线</u>，<strike>这段文字带删除线</strike>"));

列表标签

TextView 支持的列表标签有无序列表 <ul> 和有序列表 <ol>，并会自动转换为相应的 Spannable 对象。

例如：

myTextView.setText(Html.fromHtml("<ul><li>这是无序列表的第一项</li><li>这是无序列表的第二项</li></ul><ol><li>这是有序列表的第一项</li><li>这是有序列表的第二项</li></ol>"));

链接标签

TextView 支持的链接标签有 <a>，在加载 HTML时会自动将其转换为 LinkSpan 对象，并允许用户点击跳转到对应的URL 地址。同时，在跳转时，也支持使用自定义的 Callback回调函数进行处理。

例如：

1 2	myTextView.setText(Html.fromHtml("请点击这个 <a href=\"http://www.baidu.com\">链接</a>")); myTextView.setMovementMethod(LinkMovementMethod.getInstance());

除了默认的点击行为之外，我们还可以使用自定义的 URLSpan 和 ClickableSpan 类来处理连接的点击事件，例如弹出一个对话框或者打开一个新的 Activity 等。

示例代码如下：

public class MyLinkMovementMethod extends LinkMovementMethod {
    @Override
    public boolean onTouchEvent(TextView widget, Spannable buffer, MotionEvent event) {
        int action = event.getAction();

        if (action == MotionEvent.ACTION_UP) {
            int x = (int) event.getX();
            int y = (int) event.getY();

            x -= widget.getTotalPaddingLeft();
            y -= widget.getTotalPaddingTop();

            x += widget.getScrollX();
            y += widget.getScrollY();

            Layout layout = widget.getLayout();
            int line = layout.getLineForVertical(y);
            int off = layout.getOffsetForHorizontal(line, x);

            URLSpan[] urls = buffer.getSpans(off, off, URLSpan.class);
            ClickableSpan[] cs = buffer.getSpans(off, off, ClickableSpan.class);

            if (urls.length != 0) {
                urls[0].onClick(widget);
                return true;
            } else if (cs.length != 0) {
                cs[0].onClick(widget);
                return true;
            }
        }
        return super.onTouchEvent(widget, buffer, event);
    }
}

上面的代码继承了 LinkMovementMethod 类，并重写了 onTouchEvent 方法，用于处理链接的点击事件。具体来说，当用户点击链接时，首先会判断该链接是否是一个 URLSpan 或者 ClickableSpan 对象，如果是，则调用其相应的 onClick() 方法实现自定义的行为。否则，将返回 false 继续使用默认的点击行为。

使用自定义的 MyLinkMovementMethod 可以通过以下方式设置给 TextView：

1	myTextView.setMovementMethod(new MyLinkMovementMethod());

这样，就可以在用户点击链接时实现自定义的行为了。需要注意的是，实现过程中需要根据具体的需求自己进行相应的代码编写，例如在 onClick() 方法中弹出对话框或启动新的Activity 等。

除此之外还可以使用自定义的 ClickableSpan 对象来实现不同链接的事件处理:

public class MyClickableSpan extends ClickableSpan {
    private String mHref;

    public MyClickableSpan(String href) {
        mHref = href;
    }

    @Override
    public void onClick(View widget) {
        Context context = widget.getContext();

        if (mHref.startsWith("myapp://activity_a")) {
            Intent intent = new Intent(context, ActivityA.class);
            context.startActivity(intent);
        } else if (mHref.startsWith("myapp://activity_b")) {
            Intent intent = new Intent(context, ActivityB.class);
            context.startActivity(intent);
        }
    }
}

// 使用方式
String html = "<a href=\"myapp://activity_a\">Activity A</a>" +
              "<a href=\"myapp://activity_b\">Activity B</a>";

TextView textView = findViewById(R.id.text_view);
textView.setText(Html.fromHtml(html));
textView.setMovementMethod(LinkMovementMethod.getInstance());
SpannableString text = (SpannableString) textView.getText();
MyClickableSpan[] links = text.getSpans(0, text.length(), MyClickableSpan.class);
for (MyClickableSpan span : links) {
    int start = text.getSpanStart(span);
    int end = text.getSpanEnd(span);
    text.setSpan(span, start, end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
}

图片标签

TextView 支持的图片标签有 <img>，在加载 HTML 时会自动将其转换为 ImageSpan 对象，并将图片显示在对应的位置上。

例如：

1	myTextView.setText(Html.fromHtml("<img src=\"https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png\"/>"));

上面所列举的标签和样式只是 TextView支持的一部分，实际上还有很多其它的标签和样式可以通过 Html.fromHtml() 方法解析并显示出来。但需要注意的是，由于安全性考虑，Android 在解析 HTML 内容时禁止加载 JavaScript、CSS 等内容，因此在使用时需要注意避免加载不安全的 HTML 内容。

支持的样式

在Android原生TextView 中，通过 Html.fromHtml() 方法加载 HTML标记时，是可以支持部分 CSS样式的。下面是一些常见的 CSS 样式以及它们在 Android原生 TextView 中的表现效果：

字体大小：font-size

可以使用 font-size 属性来设置字体大小，例如：
1
<p style="font-size: 20px;">这是一个字体大小为 20px 的段落。</p>
颜色：color

可以使用 color 属性来设置字体颜色，例如：
1
<p style="color: red;">这是一个红色的段落。</p>
字体粗细：font-weight

可以使用 font-weight 属性来设置字体粗细，例如：
1
<p style="font-weight: bold;">这是一个粗体的段落。</p>
文本对齐：text-align

可以使用 text-align 属性来设置文本对齐方式，例如：
1
<p style="text-align: center;">这是一个居中对齐的段落。</p>
背景颜色：background-color

可以使用 background-color 属性来设置背景颜色，例如：
1
<p style="background-color: yellow;">这是一个黄色背景的段落。</p>
下划线：text-decoration

可以使用 text-decoration 属性来设置下划线，例如：
1
<p style="text-decoration: underline;">这是一个带下划线的段落。</p>

需要注意的是，并不是所有的 CSS 样式都会被 Android 原生 TextView 支持。同时，在 HTML 标记中使用样式时，需要使用行内样式属性（如上面的示例代码所示），而不能使用外部样式表。如果需要添加进一步的样式，可以考虑使用 SpannableString 或自定义View来进行实现。

本文内容来自 : ChatGPT

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

如何使用npm卸载旧版本依赖库

发表于 2023-04-29

具体如下

要卸载旧版本的npm库，可以按照以下步骤进行：

确认要卸载的包名和版本号

在命令行中输入 npm ls <package-name> 命令可以查看当前安装的指定包以及其所有版本的信息。例如，如果要卸载 lodash 库的旧版本，可以运行以下命令来列出所有已安装的 lodash 版本：
1
npm ls lodash
从输出中找到要卸载的版本号，记下来备用。
卸载指定版本的包

在命令行中输入以下命令来卸载指定版本的包：
1
npm uninstall <package-name>@<version>
其中，<package-name> 是要卸载的包名，<version> 是要卸载的具体版本号。例如，如果要卸载 lodash 库的 3.10.1 版本，可以运行以下命令：
1
npm uninstall lodash@3.10.1
如果要卸载多个版本，需要分别执行多次卸载命令。
（可选）清理不需要的依赖关系

如果卸载某个包后发现其它包不再需要它作为依赖关系，可以使用以下命令来清理不需要的依赖关系：
1
npm prune
这会删除所有没有被任何包所依赖的包和版本，从而减少磁盘空间占用。

注意事项：

卸载某个版本的包不会影响已安装的其它版本。
如果要卸载的包是一个依赖项，可能需要更新其它包的依赖关系。可以使用 npm dedupe 命令来重复依赖项并优化依赖关系树。
在卸载包之前，最好备份相关代码和数据以防数据丢失。

本文内容来自 : ChatGPT

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

关于在vue3和原生Html中使用Tailwind CSS

发表于 2023-04-29

前言

Tailwind CSS封装了一套可用于多框架高复用性CSS样式, 能大大简化网页css编写, 具体可参考官网:

官网: 点击进入

在Vue3中使用Tailwind CSS

要在Vue 3中使用Tailwind CSS，需要执行以下步骤：

安装Tailwind CSS和其它必要的库

1	npm install tailwindcss postcss autoprefixer

创建并配置 postcss.config.js 文件以使用 Tailwind 和 Autoprefixer。将以下内容添加到该文件中：

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer')
  ]
}

在 src/assets/css 目录下创建一个新文件 tailwind.css, 并添加以下代码：

1
2
3

@tailwind base;
@tailwind components;
@tailwind utilities;

将 tailwind.css 导入到 Vue 组件中, 比如在 App.vue 中：

<template>
  <div>
    ...
  </div>
</template>

<script>
import '@/assets/css/tailwind.css'

export default {
  name: 'App'
}
</script>

确保在项目的 main.js 文件中引入全局样式：

1	import '@/assets/css/main.css'

配置 vue.config.js 文件以启用 PostCSS。如果还没有该文件，则创建一个新的，并添加以下内容：

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        config: {
          path: './postcss.config.js'
        }
      }
    }
  }
}

运行 npm run serve 后，在浏览器中查看应用程序，Tailwind CSS 应该已经生效了。

例如，您可以在组件中使用以下代码来应用 Tailwind CSS 类：

<template>
  <div class="flex justify-center items-center h-screen bg-gray-100">
    <h1 class="text-4xl font-bold text-indigo-600">Hello, World!</h1>
  </div>
</template>

这将显示一个居中对齐的灰色背景的页面，其中包含一条带有粗体和蓝色文本的标题。

在原生Html中使用Tailwind CSS

要在原生 HTML 中使用 Tailwind CSS，需要遵循以下步骤：

在 HTML 文件中添加 Tailwind 的 CDN 链接。可以通过将以下代码放入 HTML 文件的 <head> 标签内来实现：

1	<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.15/dist/tailwind.min.css" rel="stylesheet">

现在可以在 HTML 文件中使用 Tailwind 的类名称了。例如，要将一个元素的文本颜色设置为红色，可以添加以下代码：

1	<p class="text-red-500">这是一段红色的文本。</p>

可以在 Tailwind 的官方文档中找到更多的类和用法示例。

注意：在使用 Tailwind 时，请确保您已经了解其工作原理并能够正确地使用它的类名称。如果您不熟悉 Tailwind，请先阅读其文档，以免出现不必要的错误。

总结

如果需要在vue中全局使用Tailwind CSS, 可以考虑使用安装插件的方式, 一旦使用那么其他自定义的style将会失效

如果是指某个模块使用, 建议使用原始的css文件导入的方式

问题

在vue中使用时报错:

1
2
3

Syntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

解决方案:

//卸载之前版本
npm uninstall tailwindcss postcss autoprefixer
 
//安装指定兼容版本
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

本文为作者原创转载时请注明出处谢谢

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

查看js对象原型的几种方法

发表于 2023-04-29

具体方法

查看 JavaScript 对象的原型有多种方法，以下是其中的几种：

使用 Object.getPrototypeOf() 方法获取对象的原型。

1
2
3

const obj = {};
const proto = Object.getPrototypeOf(obj);
console.log(proto);

使用 Object.prototype 属性获取对象的原型。

1
2
3

const obj = {};
const proto = obj.__proto__;
console.log(proto);

在控制台中使用 console.dir() 方法查看对象的属性和方法，它也会显示对象的原型。
1
2
const obj = {};
console.dir(obj);
使用 instanceof 运算符检查一个对象是否是另一个对象的实例，这个过程中会涉及到原型链。如果返回值为 true 则说明该对象的原型链中包含了这个构造函数的原型。
1
2
3
function Person() {}
const person = new Person();
console.log(person instanceof Person); // true

无论你选择哪种方法，它们都可以帮助你优雅地查看 JavaScript 对象的原型。

本文内容来自 : ChatGPT

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

vue3中如何优雅地读取yaml配置文件中的数据

发表于 2023-04-29

具体实现

要在Vue3中优雅地读取YAML配置文件的数据，可以使用js-yaml库将YAML文件解析成JavaScript对象。然后，您可以将该对象传递给Vue组件或存储在Vuex store中，以便在应用程序中使用。

以下是一个基本示例：

安装js-yaml库：npm install js-yaml --save
创建一个config.yml文件并添加以下内容：

1
2
3

api:
  url: https://example.com/api
  timeout: 5000

在Vue组件中导入js-yaml和config.yml文件：

1 2	import yaml from 'js-yaml'; import config from './config.yml';

使用js-yaml将config.yml解析为JavaScript对象：

1	const configObj = yaml.load(config);

现在，您可以在组件中使用configObj中的数据：

export default {
  data() {
    return {
      apiUrl: configObj.api.url,
      apiTimeout: configObj.api.timeout
    };
  }
};

这样，您就可以在Vue3应用程序中优雅地读取YAML配置文件的数据了。

本文内容来自 : ChatGPT

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

vue3中如何实现全局通用的js工具类其他组件使用的时候无需导包

发表于 2023-04-28

具体实现

第一种使用全局Properties

在Vue 3中，可以通过在全局app.config.globalProperties对象上添加方法或属性来创建一个通用的工具类。这样在应用的任何地方都可以直接使用。

以下是一个简单的示例：

// main.js
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.config.globalProperties.$myUtil = {
  //定义一个通用的方法
  getDate: function() {
    return new Date().toLocaleDateString()
  },
  //定义一个通用的属性
  version: '1.0.0'
}

app.mount('#app')

现在，我们已经在全局范围内定义了一个名为 $myUtil 的工具类，其中包含一个 getDate 方法和一个 version 属性。这使得我们可以在Vue组件中直接调用这些方法而无需导入它们。例如：

<template>
  <div>
    <p>Today's date is: {{ $myUtil.getDate() }}</p>
    <p>This app uses version {{ $myUtil.version }}</p>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$myUtil.getDate())
  }
}
</script>

需要注意的是，这种做法虽然方便，但容易导致代码的可读性变差。如果要写大量的工具函数，最好还是将它们放在单独的模块中，然后在需要的地方导入使用。

第二种使用全局mixin

在Vue3中可以使用全局混入（global mixin来编写通用的工具类，从而实现在不需要导包的情况下在所有组件中使用。

具体步骤如下：

1.创建一个单独的js文件，例如utils.js，编写你需要的工具函数，并将它们作为一个对象返回。例如：

// utils.js
export default {
  formatDate(date) {
    // 格式化日期，返回字符串
  },
  debounce(func, delay) {
    // 防抖函数，返回函数
  },
  // 其他工具函数...
}

在main.js文件中引入该文件，并将其作为一个全局混入。例如：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import utils from './utils.js'

const app = createApp(App)

app.mixin({
  methods: {
    ...utils,
  }
})

app.mount('#app')

以上代码中，我们通过调用createApp()函数创建了一个应用程序实例，然后通过app.mixin()方法将utils.js文件导出的所有工具函数添加到Vue实例的原型链上，使得在所有组件中都可以直接调用这些工具函数。

在组件中使用工具函数

现在，我们可以在任何组件中使用formatDate()、debounce()和其他在utils.js文件中定义的工具函数，例如：

<template>
  <div>
    <p>{{ formatDate(new Date()) }}</p>
    <input type="text" @input="debounce(handleInput, 500)">
  </div>
</template>

<script>
export default {
  methods: {
    handleInput() {
      // ...
    }
  }
}
</script>

在上面的代码中，我们直接调用了formatDate()和debounce()函数，并且不需要在组件中导入这些工具函数，因为它们已经被添加到Vue实例的原型链上了。

注意：全局混入虽然方便，但也有潜在的问题。因此，在使用该方法时应当谨慎，确保不会影响到其他组件的正常运行。

本文内容来自 : ChatGPT

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

nodeJs中如何实现全局通用的js工具类其他组件使用的时候无需导包

发表于 2023-04-28

具体实现

为了编写一个在 Node.js 中全局通用的工具类，有两种方法：

使用全局对象 global

首先，可以将工具类定义为一个模块并导出。然后，在应用程序的入口文件中使用全局对象 global 将其设置为全局变量。这样，就可以在应用程序的任何地方使用该工具类。

例如，创建一个名为 myUtils.js 的工具类文件，其中包含以下函数：

function sayHello() {
  console.log('Hello, world!');
}

function add(a, b) {
  return a + b;
}

module.exports = {
  sayHello,
  add
}

接下来，在应用程序的入口文件中，如 app.js 文件中添加以下代码：

1 2	const myUtils = require('./myUtils'); global.myUtils = myUtils;

现在可以在应用程序的任何地方使用 myUtils 工具类，如下所示：

1
2
3

// 不需要导入或引用
myUtils.sayHello(); // 输出 "Hello, world!"
console.log(myUtils.add(2, 3)); // 输出 5

修改原型对象

另一种方法是在全局原型对象上添加方法或属性。这样，所有 JavaScript 对象都可以访问它们。但是，这种方法可能会影响到其他模块或库的行为，因此需要小心使用。

例如，创建一个名为 myUtils.js 的工具类文件，其中包含以下函数：

Object.prototype.sayHello = function() {
  console.log('Hello, world!');
};

Object.prototype.add = function(a, b) {
  return a + b;
};

现在可以在应用程序的任何地方使用 sayHello 和 add 方法，如下所示：

// 不需要导入或引用
const obj = {};
obj.sayHello(); // 输出 "Hello, world!"
console.log(obj.add(2, 3)); // 输出 5

请注意，这种方法会将新方法添加到所有对象的原型中，包括 JavaScript内置对象。因此，可能会影响到其他代码库的行为，并且存在潜在的命名冲突和安全风险。

本文内容来自 : ChatGPT

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

Bearer token和jwt有什么区别

发表于 2023-04-27

前言

Bearer token和JWT是两种不同的身份验证/授权机制，它们在设计和用途上有所不同。

Bearer Token是一种简单的身份验证机制，它通常由服务器发放给客户端，用于标识客户端是否被授权执行某些操作。Bearer Token本质上是一个字符串，客户端将其包含在HTTP请求的Authorization头部中发送到服务器进行身份验证。

例如，一个典型的Bearer Token可能如下所示:

1	Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

Bearer Token通常没有明确的过期时间，因此每次请求时，服务器都需要重新验证令牌的有效性

与之相反，JWT（JSON Web Token）是一种基于JSON的开放标准，用于在各个应用程序之间安全地传输信息。JWT通常由三个部分组成：头部、负载和签名。其中头部和负载都是Base64编码的JSON数据，签名则是使用私钥对头部和负载进行加密后得到的一串字符串。

例如，一个典型的JWT可能如下所示：

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyLCJleHAiOjE1MTYyMzkwMjIsImRhdGEiOnsiYXBwbGljYXRpb24iOiJmb28ifX0.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

JWT可以包含过期时间和其他自定义信息，使得服务器可以更有效地控制访问权限

Bearer Token和JWT虽然都可以用于身份验证和授权，但它们的设计和用途存在很大的差异。Bearer Token只是一个简单的字符串，没有任何加密或解密的过程，因此不需要进行数据解密。而JWT则是经过加密的数据，需要使用私钥进行解密才能访问其中的负载数据。

本文内容来自 : ChatGPT

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

如何使用git统计项目代码量

发表于 2023-04-27

前言

有时候公司可能会需要开发者统计项目总代码量和个人提交代码量

此时我们可以通过Git工具获取到项目的代码行数

查看项目总代码量

在工程目录下,输入以下指令查看:

1	git log --pretty=tformat: --numstat \| awk '{ add += $1; subs += $2; loc += $1 - $2 } END { printf "added lines: %s, removed lines: %s, total lines: %s\n", add, subs, loc }'

打印如下内容:

1	added lines: 105628, removed lines: 21640, total lines: 83988

查看某个人的代码量

添加--author参数即可:

1	git log --author="你的用户名" --pretty=tformat: --numstat \| awk '{ add += $1; subs += $2; loc += $1 - $2 } END { printf "added lines: %s, removed lines: %s, total lines: %s\n", add, subs, loc }'

查看某个时间段的代码量

添加--since和--before参数:

git log --since="2018-03-01" --before="2019-01-09" --author="username" --pretty=tformat: --numstat | awk '{ add += $1; subs += $2; loc += $1 - $2 } END { printf "added lines: %s, removed lines: %s, total lines: %s\n", add, subs, loc }'

本文为作者原创转载时请注明出处谢谢

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

具体实现

支持的标签

标题标签

文本格式标签

列表标签

链接标签

图片标签

支持的样式

具体如下

前言

在Vue3中使用Tailwind CSS

在原生Html中使用Tailwind CSS

总结

问题

具体方法

具体实现

具体实现

第一种 使用全局Properties

第二种 使用全局mixin

具体实现

前言

前言

查看项目总代码量

查看某个人的代码量

查看某个时间段的代码量

第一种使用全局Properties

第二种使用全局mixin