Html标签的详细介绍和使用

发表于 2023-04-26

Html中常见的标签

HTML（超文本标记语言）是一种用于创建Web页面的标记语言。以下是一些常见的HTML标签及其使用方法：

<html>：定义一个HTML文档。
<head>：定义文档头部，包括标题等元数据。
<title>：定义文档的标题，会显示在浏览器的标签页上。
<body>：定义文档的主体部分。
<h1>-<h6>：定义六级标题，从大到小依次排列。
<p>：定义段落。
<a>：定义一个超链接，其中href属性指定链接地址。
<img>：定义一个图像，其中src属性指定图像的URL地址。
<ul>：定义一个无序列表。
<ol>：定义一个有序列表。
<li>：定义列表中的一个项目。
<table>：定义表格。
<tr>：定义表格中的一行。
<td>：定义表格中的一个单元格。
<form>：定义表单，用于收集用户输入的数据。
<input>：定义表单中的输入字段，type属性可以指定为text、password、checkbox等不同类型。
<button>：定义按钮。
<select>：定义下拉列表。
<option>：定义下拉列表中的一个选项。
<textarea>：定义多行文本输入框。

还有很多其他的HTML标签，这里只列举了一些常见的。HTML标签可以通过属性来设置不同的样式和功能，如class、id、style等属性。使用这些标签和属性，可以创建出各种不同的Web页面。

使用form表单标签有什么优势

使用 form表单标签的优势如下：

支持各种 HTTP 请求方法：form标签支持 GET、POST、PUT、DELETE 等 HTTP 请求方法，可以根据需求选择适合的请求方式提交数据。
支持文件上传：form 标签可以通过设置 enctype 属性为"multipart/form-data 实现文件上传功能。
提供多种表单控件：form 标签提供多种类型的表单控件，包括文本框、密码框、单选框、复选框、下拉框等，可以满足各种表单需求。
支持表单验证：form 标签内的表单控件可以通过设置required、maxlength、minlength、pattern 等属性进行验证，保证用户输入的数据符合要求。
方便进行前端数据处理：通过使用 form 表单标签，可以方便地将用户提交的表单数据传递给后端服务器，实现前后端数据交互。

总之，使用form 表单标签可以简化前端开发过程，提高用户体验和数据安全性。

HTML中Label标签的应用场景

Label标签通常用于为HTML表单元素添加可点击的文本标签。下面列出了几个具体的应用场景：

关联表单控件：使用for属性将label与对应的表单控件绑定在一起，可以通过点击label来选中或激活相应的控件，提高用户体验。
提高可访问性：对于视力差或使用辅助技术（如屏幕阅读器）的用户，使用label可以更方便地读取表单控件相关信息。
增强可用性：在移动设备上，点击label标签比点击小的输入框更容易，并且可以避免误操作。另外，label标签可以通过CSS样式进行美化，提升页面整体的视觉效果。

例如，以下代码演示了如何使用label标签关联一个文本输入框：

1 2	<label for="username">用户名：</label> <input type="text" id="username" name="username">

这里的for属性指定了它对应的输入框的id，当用户点击标签时，浏览器会自动将焦点聚焦到对应的输入框中。

p标签也是块级元素它可以替代div使用吗

是的，p标签是块级元素，但它与div元素有一些不同之处。在语义上，p标签用于表示一个段落，而div标签只是一个容器，用于组织其他元素。

从布局的角度来看，p标签具有一些默认的样式和间距，这意味着使用p标签时，文本会有一些预设的格式。而div标签没有默认的样式或间距，需要手动设置CSS规则才能实现所需的布局。

因此，在某些情况下，可以使用p标签代替div标签。例如，当您希望创建一些纯文本内容时，p标签可能更适合，因为它提供了一些默认的样式和格式。但是，如果您需要创建自定义布局并且需要更多的控制，则应使用div标签。

总之，p标签可以替代div使用，但需要根据具体情况进行评估和选择。

HTML中容器标签都有哪些

HTML中常用的容器标签包括：

<div>：通用块级容器，用于组织页面结构、布局和样式控制。
<span>：通用行内容器，用于包裹少量文本或其他行内元素，并通过CSS进行样式控制。
<section>：语义化的块级容器，用于划分文档内容的主题部分，例如章节、页眉、页脚等。
<article>：语义化的块级容器，用于表示独立的内容单元，如博客文章、新闻报道等。
<header>：语义化的块级容器，用于定义网页或区域的页眉，通常包含标题、logo、导航菜单等元素。
<footer>：语义化的块级容器，用于定义网页或区域的页脚，通常包含版权信息、联系方式、社交媒体链接等元素。
<nav>：语义化的块级容器，用于定义导航菜单。
<aside>：语义化的块级容器，用于定义与主要内容相关但不属于主要流程的辅助内容，如侧栏、广告等。
<main>：语义化的块级容器，用于标识文档或应用程序的主要内容区域。

这些容器标签有助于提高HTML文档的可读性、可维护性和可访问性，并且能够帮助搜索引擎正确解析和索引网页内容。在实际应用中，应根据具体情况选择合适的容器标签进行包裹，以达到最佳的结构组织和样式控制效果。

HTML中文本标签都有哪些

HTML 中常用的文本标签有以下几种：

<h1> 到 <h6>：用于定义标题，H1 是最高级别的标题，H6 是最低级别的标题，通常用于网页中的文章标题或分组标题。
1
<h1>这是一个 H1 标题</h1>
<p>：用于定义段落，通常用于网页中的正文内容。
1
<p>这是一个段落。</p>
<a>：用于定义链接，可以指向其他网站、页面或同一页面内的特定内容。
1
<a href="https://www.example.com">点击此处访问 Example 网站</a>
<ul> 和 <li>：用于定义无序列表，<ul> 表示整个列表，<li> 表示列表中的每一项。
1
2
3
4
5
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<ol> 和 <li>：用于定义有序列表，与无序列表类似，只是每一项前面会显示一个数字。
1
2
3
4
5
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>

<br>：用于插入换行符。

1	<p>这是第一行。<br>这是第二行。</p>

<strong> 和 <em>：分别用于定义加粗和斜体样式的文本。

1	<p>这是一段 <strong>加粗</strong> 的文本，这是一段 <em>斜体</em> 的文本。</p>

<blockquote>：用于定义长的引用块。

1
2
3

<blockquote>
  <p>这是一个引用。</p>
</blockquote>

<pre>：用于保留文本中的空格和换行符，通常用于显示代码片段。
1
2
3
<pre>
console.log("Hello, world!");
</pre>

以上是 HTML 中较为常用的文本标签以及它们的使用场景和示例。

css样式常用属性都有哪些

CSS 样式属性有很多，以下列出其中一些常用的：

color：设置文本颜色；
font-size：设置字体大小；
font-family：设置字体类型；
background-color：设置背景颜色；
margin：设置元素外边距；
padding：设置元素内边距；
width：设置元素宽度；
height：设置元素高度；
border：设置元素边框；
text-align：设置文本对齐方式；
display：设置元素的显示方式；
position：设置元素的定位方式。

color：用于设置文本的颜色，可以让用户更容易地阅读内容。
font-size：用于设置字体大小，可以让文字更加突出或更容易阅读。
font-family：用于设置字体类型，可以让用户更好的理解并品味页面内容。
background-color：用于设置背景颜色，可以增强页面的视觉效果以及提高用户体验。
margin：用于调整元素之间的距离和位置，达到更好的页面布局效果。
padding：用于调整元素内部元素之间的距离和位置，使页面更美观和易于阅读。
width：用于设置元素的宽度，可以让页面更加美观和易于阅读。
height：用于设置元素的高度，可以让页面更加美观和易于阅读。
border：用于设置元素的边框，可以增强页面的视觉效果以及提高用户体验。
text-align：用于设置文本对齐方式，使页面布局更清晰美观并提高易读性。
display：用于设置元素的显示方式，可以根据不同的应用场景来选择不同的显示方式。
position：用于设置元素的定位方式，可以允许将元素放置在网页上的任何位置。

本文内容来自 : ChatGPT

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

Vue3中关于组件之间的事件传递和数据共享

发表于 2023-04-25

事件传递

子组件向父组件传递事件

首先在父组件中定义一个用于接收事件的方法handleContentPage:

<!-- 这是父组件 -->
<template>
  <div id="parent">
    <!-- 接收子组件的消息 -->
    <Navbar  @update-content-page="handleContentPage"/>
  </div>
</template>


<script> 
import Navbar from "@admin/views/Navbar.vue";

export default {
  components: {
    Navbar,
  },
  methods:{
    handleContentPage(page){
      console.log("收到子组件传递过来的消息")
    }
  }
};
</script>

然后在子组件中借助$emit来调用父组件的函数:

<!-- 这是子组件 -->
<template>
    <div class="navbar">
        <!-- 导航栏 -->
        <nav>
            <ul>
                <li @click="navigateTo('Dashboard')">仪表板</li>
                <li @click="navigateTo('Users')">用户</li>
                <li @click="navigateTo('Settings')">设置</li>
            </ul>
        </nav>
    </div>
</template>
<script>

export default {
    methods: {
        navigateTo(page) {
            console.log("点击了菜单栏");
            //向父组件发送数据
            this.$emit('update-content-page', page);
        }
    },
};
</script>

注意: $emit闯入的第一个参数 update-content-page 需要和父组件中使用@进行一一对应

父组件向子组件传递事件

首先在子组件中定义一个供父组件调用的方法:

<!-- 这是子组件 -->
<template>
    <div class="content">
    </div>
</template>
<script>

export default {
    methods: {
      //定义一个方法供父组件调用
        updatePage(page) {
            console.log("收到来自父组件的数据"+page);
        }
    },

  }
}
</script>

然后在父组件中通过对象引用的方式调取子组件的方法:

<!-- 这是父组件 -->
<template>
  <div id="parent">
    	<button @click="handleContentPage">一键转换</button>
    
        <!-- 使用 ref 建立子组件的实例引用 方便调子组件方法 -->
        <Content  ref="contentRef"/>
  </div>
</template>
<script> 

import Content from "@admin/views/Content.vue";

export default {
  components: {
    Content,
  },
  methods:{
    handleContentPage(page){
      //调取子组件的函数
      this.$refs.contentRef.updatePage(page)
    }
  }
};
</script>

两个不相关的组件进行事件传递

在Vue 3中，可以使用事件总线Event Bus来进行两个不相关的组件之间优雅地通信。

首先在一个单独的JavaScript模块中创建事件总线：

1 2	import { createApp } from 'vue' export const eventBus = createApp({})

然后在需要发布事件的组件中导入事件总线并发送事件：

import { eventBus } from './event-bus'

export default {
  methods: {
    sendMessage() {
      eventBus.emit('message-sent', this.message)
    }
  }
}

最后，在接收事件的组件中也导入事件总线并监听事件：

import { eventBus } from './event-bus'

export default {
  created() {
    eventBus.on('message-sent', message => {
      console.log(`Received message: ${message}`)
    })
  }
}

数据传递

Vue中如果需要进行父子间数据的传递, 可以使用provide/inject来实现

在祖先组件中使用provide来提供数据：

import { provide } from 'vue'

export default {
  setup() {
    const name = 'John Doe';
    provide('name', name);
  }
}

在后代组件中使用inject来获取数据：

import { inject } from 'vue'

export default {
  setup() {
    const name = inject('name');
    console.log(name); // Output: John Doe
  }
}

这样，后代组件就可以通过inject方法访问提供的数据了。

全局数据共享

如果我们需要在所有组件中共享数据, 比如用户的信息缓存数据等等,

在Vue3中，介绍两种方案

第一种使用一个全局的`provide/inject`

具体步骤如下：

在根组件中提供要共享的数据

import { createApp, reactive } from 'vue';

const app = createApp({
  setup() {
    const sharedState = reactive({ count: 0 });
    return {
      sharedState,
    };
  },
});

app.mount('#app');

在需要使用该数据的子组件中注入它

import { inject } from 'vue';

export default {
  setup() {
    const sharedState = inject('sharedState');
    return {
      sharedState,
    };
  },
};

在子组件中就可以直接使用这个共享的状态了，比如在模板中显示它的值或者修改它的值

<template>
  <div>
    {{ sharedState.count }}
    <button @click="sharedState.count++">增加</button>
  </div>
</template>

这样就可以实现一个简单的全局数据共享了。需要注意的是，provide/inject API并不是响应式的，如果需要响应式地共享数据，可以使用reactive或者ref等Vue3提供的响应式API来实现。

使用Vuex

在Vue 3 中，可以使用 Vuex 4来实现全局数据共享。

首先需要安装Vuex：

1	npm install vuex@next

然后在 main.js 中创建一个 store 实例：

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

const app = createApp(App)
app.use(store)
app.mount('#app')

接着在 src 目录下创建一个 store.js 文件，用于定义 store：

import { createStore } from 'vuex'

const store = createStore({
  state() {
    return {
      count: 0
    }
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment(context) {
      context.commit('increment')
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  }
})

export default store

这里的state 定义了初始状态，mutations 定义了修改状态的方法，actions 定义了异步操作，getters定义了从状态中派生出来的值。

在组件中使用store 的数据和方法：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'

export default {
  setup() {
    const store = useStore()
    const count = computed(() => store.state.count)
    const doubleCount = computed(() => store.getters.doubleCount)

    const increment = () => {
      store.dispatch('increment')
    }

    return {
      count,
      doubleCount,
      increment
    }
  }
}
</script>

在组件中使用 useStore 获取store 实例，在 setup函数中使用computed函数将 store 中的数据和方法转化为响应式的值，然后在模板中使用即可。

以上是一个简单的示例，具体使用还可以根据实际需求进行修改和扩展。

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

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

Springboot中关于如何设置实体类中的部分属性对用户可见性的方案

发表于 2023-04-20

前言

关于实体类的属性对用户的可见性问题, 我们第一时间可能会想到定义一个性的类, 里面只定义需要给用户看见的属性, 然后进行属性值拷贝

显然这种做法极其不优雅, 实体类一旦增多, 后期维护会非常的累

那有没有轻松一点的方法呢, 能不能某个表的实体类就只创建一个, 然后复用呢

答案是有的

我们可以使用注解来实现, 根据不同的需求, 选择不同的注解, 具体如下:

需求一

用户在请求接口的时候, 实体类中的某些字段不给用户返回(序列化), 同时也不允许用户传值(反序列化), 比如大部分的实体类中我们都会有createTime和updateTime字段, 像这种是不需要给用户返回的, 同时也不允许用户传值

那么此时我们就可以用到jackson包中的@JsonIgnore注解来实现这一功能, 具体示例代码如下:

@Entity
@Table(name = "deleted_user")
data class DeleteUser(
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    val id: Long? = null,
    
    @JsonFormat(
        pattern = "yyyy-MM-dd HH:mm:ss a",
        locale = "zh",
        timezone = "GMT+8"
    )
    @JsonIgnore
    val createTime: LocalDateTime = LocalDateTime.now(ZoneId.of("GMT+8")),
)

使用该注解后, 哪怕用户刻意传了也不影响数据, 无论用户传与不传都写入的都是默认值

如果我们需要对多个字段进行可见性隐藏, 除了挨个属性添加@JsonIgnore, 我们还可以在类中使用@JsonIgnoreProperties注解来忽略某个属性, 其效果和@JsonIgnore一样, 具体示例代码如下:

@Entity
@Table(name = "deleted_user")
@JsonIgnoreProperties(value = ["createTime"])
data class DeleteUser(
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    val id: Long? = null,

    @JsonFormat(
        pattern = "yyyy-MM-dd HH:mm:ss a",
        locale = "zh",
        timezone = "GMT+8"
    )
    val createTime: LocalDateTime = LocalDateTime.now(ZoneId.of("GMT+8")),
)

需求二

用户在请求接口的时候, 实体类中的某些字段需要给用户返回, 但是不允许用户传值, 比如id字段, 那此时我们可以在类中使用@JsonIgnoreProperties注解, 并设置allowGetters = true即可, 具体代码如下:

@Entity
@Table(name = "deleted_user")
@JsonIgnoreProperties(value = ["id"],allowGetters = true)
data class DeleteUser(
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    val id: Long? = null,

    @JsonFormat(
        pattern = "yyyy-MM-dd HH:mm:ss a",
        locale = "zh",
        timezone = "GMT+8"
    )
    val createTime: LocalDateTime = LocalDateTime.now(ZoneId.of("GMT+8")),
)

需求三

用户在请求接口的时候, 实体类中的某些字段不给用户返回, 但是允许用户传值, 那此时我们可以在类中使用@JsonIgnoreProperties注解, 并设置allowSetters = true即可, 具体代码如下:

@Entity
@Table(name = "deleted_user")
@JsonIgnoreProperties(value = ["content"],allowSetters = true)
data class DeleteUser(
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    val id: Long? = null,
	  val content: String = "",
    @JsonFormat(
        pattern = "yyyy-MM-dd HH:mm:ss a",
        locale = "zh",
        timezone = "GMT+8"
    )
    val createTime: LocalDateTime = LocalDateTime.now(ZoneId.of("GMT+8")),
)

需求四

用户在请求接口的时候, 实体类中的某些字段不给用户返回, 但是允许用户传值, 同时另外某些字段需要给用户返回, 但是不允许用户传值, 这种又该怎么办呢, 此时我们需要用到另外一个注解@JsonProperty, 在这个注解中配置access值, 具体代码如下:

@Entity
@Table(name = "deleted_user")
@JsonIgnoreProperties(value = ["id"],allowGetters = true)
data class DeleteUser(
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    val id: Long? = null,
  	@JsonProperty(access = JsonProperty.Access.WRITE_ONLY)
	  val content: String = "",
    @JsonFormat(
        pattern = "yyyy-MM-dd HH:mm:ss a",
        locale = "zh",
        timezone = "GMT+8"
    )
    val createTime: LocalDateTime = LocalDateTime.now(ZoneId.of("GMT+8")),
)

这样一来, 我们在实现id字段只读的同时, 又实现了content字段的可写入但不可见

access属性常用选项:

JsonProperty.Access.WRITE_ONLY: 只允许用户传值, 但不给用户返回
JsonProperty.Access.READ_ONLY: 只给用户返回该字段, 但不允许用户传值

需要注意的是: @JsonProperty(access = JsonProperty.Access.READ_ONLY注解放置在父类的属性中无效. 具体原因我也不是太清楚

需求五

假如需要给客户端出两个用户接口, 一个只返回用户名, 另一个返回用户名和用户id, 那这种情况下上面的方案就不适用了, 此时我们需要用到注解@JsonView, 分别作用在属性和Controller中的具体接口方法上, 代码如下:

实体类:

@Entity
@Table(name = "user")
@JsonView(Views::class) //这个地方很关键 首先给所有属性一个默认视图 
data class User(
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
  	@JsonView(Views.Detail::class)//表示id归属于Detail视图
	  var id: Long? = null,
  
  	@JsonView(Views.Basic::class)//表示username归属于Basic视图
    val userName: String = "",
)
//用接口来进行视图分类
interface Views {
    interface Basic
    interface Detail : Basic
}

Controller类:

@CrossOrigin
@RestController
@RequestMapping("/user")
class UserController {
  
     
    @GetMapping(value = ["/userInfoWithId"])
    @JsonView(Views.Detail::class)//返回归属于Detail视图的字段
    fun getUserInfoWithId(
        request: HttpServletRequest
    ): BaseEntity<EmptyModel> {
            val info = tokenUtil.parseToken(request)
            val user = service.getUserInfo(info.id, info.userAccount)
            return BaseEntity(data = user)
    
    }
  
  
   @GetMapping(value = ["/userInfo"])
    @JsonView(Views.Basic::class)//返回归属于Basic视图的字段
    fun getUserInfo(
        request: HttpServletRequest
    ): BaseEntity<EmptyModel> {
            val info = tokenUtil.parseToken(request)
            val user = service.getUserInfo(info.id, info.userAccount)
            return BaseEntity(data = user)
    
    }
}

此时如果你运行程序请求接口发现返回一个空对象{}, 这是由于没有配置objectMapper, 我们需要在WebConfig中进行配置, 具体代码如下:

@Configuration
open class WebConfig : WebMvcConfigurer {



    @Autowired
    private val jsonConverter: MappingJackson2HttpMessageConverter? = null

    override fun configureMessageConverters(converters: MutableList<HttpMessageConverter<*>>) {
        converters.removeIf { mc -> mc is MappingJackson2HttpMessageConverter }
        converters.add(jsonConverter!!)
    }

    @Bean
    open fun objectMapper() : ObjectMapper = ObjectMapper().apply {
        setSerializationInclusion(JsonInclude.Include.NON_NULL)
        registerModule(KotlinModule())
        configure(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES, false)
        configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS, false)
        configure(SerializationFeature.WRITE_DATES_WITH_ZONE_ID, true)

    }

    @Bean
    open fun jsonConverter(objectMapper: ObjectMapper): MappingJackson2HttpMessageConverter =
        MappingJackson2HttpMessageConverter(objectMapper)




}

上面WebConfig类是我自己创建的, 你如果没有该类则手动创建一个,继承WebMvcConfigurer, 别忘了添加@Configuration注解

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

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

解决iframe标签插入视频无法禁止自动播放的问题

发表于 2023-04-19

问题与解决方案

最近发现有瓣音频博客出现多个视频合奏唱戏的问题, 非常影响阅读体验, 于是准备将视频自动播放给禁止了

尝试了几种方案, 不论是加入"allow="autoplay=false""属性还是autoplay=false乃至sandbox都不生效

最后通过在 src 属性的最后面加上&autoplay=no, 问题解决

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

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

如何将vscode调教成IntelliJ IDEA风格的编辑器

发表于 2023-04-19

前言

最近项目需要使用到vscode, 对于习惯了Android Studio的我来说, 突然切换开发工具一时间有点难以适应, 主要还是IntelliJIDEA的编辑器太香了

之前本来想将Android Studio武装成兼容各种语言的开发神器, 无奈很多插件不兼容, 只能暂时作罢

所以只能先凑合着用vscode先, 所谓工欲善其事必先利其器, 为了快速进入开发状态, 首先需要将vscode编辑器的风格设置成尽量接近Android Studio

vscode配置剖析

vscode配置主要分为四大块, 每一块的配置都对应一个json文件:

基础设置: 使用setting.json, 主要包含一些编辑器的偏好设置
键盘快捷键设置: 使用keybindings.json
扩展设置: 使用extension.json
UI状态设置: 使用globalState.json, 主要包含一些全局UI状态的设置

对vscode进行改造

第一步对快捷键进行改造

安装插件IntelliJ IDEA Keybindings

我们会发现这个插件附带了一个通过xml文件快速导入的功能, 接下来我们需要用它
将Android Studio的配置进行导出

熟悉IDEA系编辑器的小伙伴应该都知道如何导出配置文件, 这里不过多解释, 直接上图:

导出的配置文件是一个zip压缩包, 我们将其解压, 下一步我们会用到里面keymap目录下的xml文件
将Android Studio导出的快键键配置文件进行格式转换

我们按住ctrl+shift+p打开动作指令面板, 然后输入Import IntelliJ Keybindings执行该动作:

这里可以选择对导入的xml文件中的快捷键进行平台转换,

由于我的AndroidStudio的配置文件是windows平台导出的, 而我目前使用的是Mac平台,我想继续保持windows的快捷键习惯, 也就是依然使用ctrl而不是cmd

所以这里我选择了Windows to Windows

导入xml文件后, 会自动生成已经转换成json格式的快捷键配置:
将转换好的配置导入到vscode中

我们只需要将里面的内容拷贝至vscode的keybindings.json文件中然后保存即可:

此时, 我们的快捷键就基本改造完毕了, 现在只需双击shift就能打开动作指令面板, 和Android Studio一致, 满意😊

第二步对vscode外观进行改造

这一步, 具体改造因人而异, 毕竟每个人的需求和审美不同, 大家只需要了解如何修改即可

这里主要是对setting.json文件进行修改,简单说一下我的配置:

编辑器字体大小调整

首先vscode默认的外观给我的第一印象就是字太小了, 看着特别费眼

那么我们进入设置面板, 输入字体, 然后找到setting中编辑字样点击它可以打开setting.json文件:

在里面我输入editor.fontSize": 14.5, 将代码字体大小调整成14.5:

同理, 如果需要修改字体风格则输入editor.fontFamily

以此类推, 所有配置属性都有代码提示, 操作起来也很方便
工作台字体大小调整

我们会发现, 通过setting.json我们可以调整编辑器的字体大小, 但是工作台的字体没有提供相关属性配置, 只能通过快捷键cmd+=来进行缩放调整, 如果快捷键无法使用那就使用动作指令面板通过关键字 放大 或者Zoom进行搜索调用

记住一点有问题先尝试在动作指令面板中搜一下
工作目录图标修改

接下来我们需要调整一下工作目录的图标, 先来看一下vscode默认的目录树长啥样:

是不是立马让人感到崩溃, 哪个文件在哪个包下面, 估计得费劲辨别半天

这个要改的话, 需要在安装图标插件, 我们直接在插件市场搜索关键字icon就行, 可以找到很多:

每个都尝试一下, 选一种自己喜欢的就行
颜色主题选择

最后我们对编辑器整体的配色进行调整, 可以直接选择现成的主题, 直接在插件市场搜索即可:

由于个人习惯, 最后我直接选择了JetBrains风格的主题和图标样式:

调整后我的编辑器样子如下:

配置的同步功能

官方自带云端同步

目前vscode编辑器自带了配置同步功能, 实现多端配置同步, 非常方便, 只需要在编辑器左下角进行登录, 然后打开同步功能即可:

这里支持Github或者微软账号登录

云端同步历史恢复

当我们不小心将编辑器还原出厂设置了, 由于我们开启了自动同步功能, 此时所有配置已经同步到了云端, 旧的配置直接被覆盖了, 那么我们想恢复之前的配置该怎么办呢?

不用担心

首先我们打开命令窗口显示已同步的数据记录:

然后选择对应时间下的历史配置文件, 将里面的内容拷贝至我们的当下的配置文件中即可:

手动拷贝有些繁琐, 不过我相信未来官方能实现一键恢复功能

除此之外我们还可以通过资源管理器的时间线进行文件内容的快速恢复, 不过这种方案仅支持短期时间的恢复, 如果要恢复几个月甚至一年前的配置, 那么只能使用云端同步方案了:

配置文件导出本地

如果你对于这种云端配置同步不是太放心, 还可以将配置文件导出到本地进行存储:

官方默认支持导出到Git和本地

配置文件同步到自己的云端

如果你有更多的同步需求, 比如同步到云盘, 那么我推荐你安装Sync Settings这个插件, 它支持本地、本地Git仓库、远程Git仓库、服务器rsync甚至Webdav:

具体使用方法:

对仓库进行配置

动作面板输入:

1	Sync Settings: Open the repository settings

将配置文件上传同步至仓库:

动作面板输入:
1
Sync Settings: Download (repository -> user)
从仓库中同步配置文件到vscode:

动作面板输入:
1
Sync Settings: Download (repository -> user)

如果你觉得手动同步太累人, 还可以配合cron-tasks插件开启定时任务, 实现配置文件的自动同步功能

问题汇总

关于回车快捷键无法设置的问题

由于两个编辑器的差异性存在, 导致部分快捷键和预想中的不太一致, 此时我们需要手动修改, 这里我需要将acceptAlternativeSelectedSuggestion的快捷键设置为回车, 另外将acceptSelectedSuggestion的快捷键改为tab, 在设置的过程中, 我发现回车无法设置, 这应该是个编辑器bug, 好在可以直接修改json文件:

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

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

关于Web server failed to start. Port 8080 was already in use

发表于 2023-04-18

前言

Web开发时偶尔会碰到这种错误, 主要是上一次服务未关闭导致的

解决方案

Windows平台

打开cmd命令窗口,查看被占用端口号所对应的进程
1
netstat -aon|findstr "端口号"

终止对应进程

1	taskkill /pid 这里填查询到的pid /f

Mac平台

查看被占用端口号所对应的进程
1
lsof -i:端口号
终止对应进程
1
kill PID

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

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

ChatGPT于我而言有如神助如虎添翼

发表于 2023-04-18

前言

在ChatGPT诞生之前, 如果我们想获取信息一般是通过搜索引擎, 在鱼龙混杂的网页中筛选相对有用的信息, 光是信息筛选甄别就极其消耗时间和脑力

ChatGPT出来后, 大大地简化了这一操作, 它可以帮我们进行大部分的垃圾信息过滤, 从而使得知识的获取变得简单直接

以前的操作流程:

关键词搜索👉鱼龙混杂的信息👉筛选得到各种碎片化的可用信息👉对得到的碎片信息进行可用性验证👉总结归纳

借助ChatGPT的操作流程:

关键词询问👉得到相对合理可靠的信息👉可用性验证->总结归纳

尝试

周杰伦的主持水平如何😀
乱码三千这个博客你觉得怎么样👀
你觉得歌手十二越写的歌如何🌹
给码box这个平台写一句吸引人的宣传语🤩

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

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

关于POST请求的一些细节

发表于 2023-04-18

请求传递参数的方式

POST 请求传递参数有两种方式：

将数据放在请求体（body）中

一般用form-urlencoded格式进行编码传递，例如：
1
name=value&age=20&gender=male
这种方式的优点是可以传递大量的数据，安全性较高，传递的数据类型也比较灵活，可以传递文本、文件等。
将数据放在 URL 查询字符串中

例如：
1
https://www.example.com?name=value&age=20&gender=male
这种方式的优点是简单易用，实现比较容易，不需要对数据进行编码，对于一些小规模数据传输比较恰当。

以上两种方式在传递数据时都可能存在数据篡改、伪造等问题。一些安全敏感的数据（如密码等）应该采用更安全的传输方式（如加密传输）。

使用请求体传输，数据会按照具体的编码方式进行编码，而使用查询字符串进行传输，数据会经过 URL编码处理，因为URL中只能使用一部分 ASCII 字符，其他字符需要进行转义。

编码方式

POST常用的编码方式有三种, 分别为:

application/x-www-form-urlencoded

这是最常用的编码方式，也是默认的编码方式。它将请求参数编码成 key1=value1&key2=value2 的形式，并将每个键值对用 & 连接起来。参数会被URL 编码，以便在传输时能够正确地处理特殊字符，例如空格会被转换为加号 (+)。
multipart/form-data

这种编码方式适用于上传文件或二进制数据。它将请求参数分割成多个部分，每个部分都有一个Content-Disposition 头部和一个Content-Type 头部来描述它的内容类型。这个 Content-Disposition 通常包含一个表单字段的名称和一些其他的元数据，例如上传文件的名称。
application/json

这种编码方式适用于传输 JSON格式的数据。JSON格式是一种轻量且易于使用的数据表示格式，广泛用于 Web 应用程序中。请求参数将被作为 JSON对象发送，它们必须以正确的 JSON格式进行编码。需要根据具体的场景和需求选择合适的编码方式。

注意: 使用查询字符串进行传输的数据只能使用application/x-www-form-urlencoded的编码格式,而使用请求体传输则可以使用各种编码格式

GET请求和POST请求的区别

POST 请求和 GET 请求是HTTP 协议中常用的两种请求方法，它们之间的区别如下：

参数传递方式：GET请求只能通过 URL 中的查询字符串来传递参数，而 POST 请求不仅可以通过URL还可以将参数信息放在请求主体中。
请求参数长度：GET 请求传递参数的长度是有限制的，具体取决于浏览器和 Web 服务器的限制，而 POST 请求则没有这些限制。
对服务器数据的影响：GET请求不会改变服务器上的资源状态，只是请求该资源的数据，而 POST 请求可能会改变服务器上的资源状态，如在服务器上创建新的资源或更新已有资源。
安全性：GET请求会将参数暴露在 URL 中，比较容易被追踪和窃取，而 POST 请求的参数则放在请求主体中，安全性比 GET请求更高。
使用场景：GET 请求通常用于请求数据，如获取某个页面的内容，而 POST请求用于提交数据，如提交表单信息。

总的来说，GET 请求适合请求数据，而 POST请求适合提交数据。需要根据具体的业务场景和需求选择合适的请求方法。

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

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

去哪儿找好用的轮子

发表于 2023-04-17

开源大轮子聚集地

Dromara社区

官网: 点击进入
Gitee GVP

官网: 点击进入
Github 中文社区排行榜

官网: 点击进入

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

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

Html中常见的标签

使用form表单标签有什么优势

HTML中Label标签的应用场景

p标签也是块级元素 它可以替代div使用吗

HTML中容器标签都有哪些

HTML中文本标签都有哪些

css样式常用属性都有哪些

事件传递

数据传递

全局数据共享

第一种 使用一个全局的provide/inject

使用Vuex

前言

需求一

需求二

需求三

需求四

需求五

前言

免费ChatGPT网站

收费的ChatGPT网站

ChatGPT插件

vscode平台插件

IntelliJ IDEA平台插件

AI导航

问题与解决方案

前言

vscode配置剖析

对vscode进行改造

第一步 对快捷键进行改造

第二步 对vscode外观进行改造

配置的同步功能

官方自带云端同步

云端同步历史恢复

配置文件导出本地

配置文件同步到自己的云端

问题汇总

关于回车快捷键无法设置的问题

前言

解决方案

Windows平台

Mac平台

前言

尝试

请求传递参数的方式

编码方式

GET请求和POST请求的区别

开源大轮子聚集地

p标签也是块级元素它可以替代div使用吗

第一种使用一个全局的`provide/inject`

第一步对快捷键进行改造

第二步对vscode外观进行改造