CSS Global Initial Styles

Setting CSS global initial styles is mainly for ensuring compatibility across different browsers. Here’s an example:

/* Global Initial Styles */
html, body, div, span, h1, h2, h3, h4, h5, h6, a, em, img, p, dd, dl, dt, ul, li, ol, form, label, table, tr, td, input {
    margin: 0;
    padding: 0;
    color: #333;
}
p {
    font-size: 14px;
}
body {
    width: 100%;
    font-size: 12px;
    font-family: "Microsoft YaHei", Arial, Helvetica, serif;
    background-color: #f5f4f9;
}
a, a:link, a:visited {
    text-decoration: none;
}
a:hover {
    color: #e60012;
}
li {
    list-style: none;
}
img {
    border: none;
}
.clear {
    clear: both;
}

If you’re using CSS frameworks like Bootstrap, LayUI, or Tailwind CSS, they’ve already set these global initial styles for you, so you don’t need to set them yourself.

CSS全局初始样式

设置CSS全局初始样式,主要为了兼容不同浏览器。以下是一个示例:

/* 全局初始样式 */
html,body,div,span,h1,h2,h3,h4,h5,h6,a,em,img,p,dd,dl,dt,ul,li,ol,form,label,table,tr,td,input{
    margin: 0;
    padding: 0;
    color:#333;
}
p{
    font-size:14px;
}
body{
    width:100%;
    font-size: 12px;
    font-family: 微软雅黑,Arial,Helvetica, serif;
    background-color:#f5f4f9;
}
a, a:link, a:visited{
    text-decoration: none;
}
a:hover{
    color:#e60012;
}
li{
    list-style:none;
}
img{
    border:none;
}
.clear{
    clear:both;
}

如果你使用一些CSS框架,例如Bootstrap、LayUI、Tailwind CSS等,它们已经为你设置了CSS全局初始样式,无需自己设置了。

许多人需要的其实不是实用的忠告,而是充满暖意的附和

村上春树说过,世界上许多人需要的其实不是实用的忠告,而是充满暖意的附和。

世界上最难的两件事情,一件事是把别人的钱放进自己的口袋,一件事是把自己的思想装进别人的脑袋。

一个人能吃饱穿暖,大概接下来最重要的就是被认可。一个例子,你逼着一个小孩子好好过马路很难,但是如果你说我害怕,你可不可以牵着我的手过马路?小孩子会很乖的承担起这个角色,因为他体会到了被认可的感觉。

web前端应用分类

web前端应用分类:

  • 移动端M站(移动端web App),一般是指手机浏览器里的网站。有些人也把它称为H5网页,H5是HTML5的简称,是一种高级的开发网页的技术
  • 移动端App,是手机上的软件,一般通过应用商店(App store)安装
  • 移动端小程序,微信小程序、支付宝小程序、抖音小程序、美团小程序、电报小程序等,可以理解为是大型移动端App内置的M站。M站一般可以容易地打包成小程序。PC端的软件里面也可以有小程序,例如微信PC端也可以访问小程序
  • PC端,笔记本电脑和台式电脑等大屏幕上的网站

Choosing a City, a Major, and an Industry

For most people, choosing the right city, major, and industry is crucial. Picking the right city ensures that you won’t struggle to find a job, choosing the right major can propel you into the middle class, and selecting the right industry can elevate you two whole social classes.

A Discussion on Logical Deletion (Soft Deletion): Whether It’s Necessary and How to Implement It

In the real world, some documents become obsolete and are immediately shredded, while others need to be preserved in archives for future reference.

Consider an order, which references many other pieces of information, such as seller details, buyer details, and product details. When a product is removed from the catalog, we can’t directly delete the product information; doing so would render the associated order information incomplete.

For tables that require logical deletion (referred to as “collections” in MongoDB), there are two methods:

  1. Method 1: Add fields like is_deleted or is_active to indicate whether a row has been logically deleted.
  2. Method 2: Create a corresponding archive table (recycle bin table) for each table that needs logical deletion. First, insert the rows to be deleted into the archive table (including additional fields like deletion time, ID of the person who deleted it, etc.), and then delete the rows from the source table.

Many experts have already pointed out the drawbacks of Method 1.

Method 2 is easier to implement, non-intrusive to the source table, but it comes at the cost of increased disk space usage.

When designing the database, we should analyze the specific application scenario:

1. Based on the Business Requirements

If the business requirement is to back up data, the solution should be database backups, not logical deletions.

If the business requirement is to archive data, the solution should be archiving data, i.e., moving data into an archive table.

If the goal is simply to “freeze” data, an inactive flag should be used. This provides perfect semantic meaning and ensures consistency. It’s important to note that “freezing” is not the same as “deleting.” “Freezing” means that if you need to use the data again, you can simply “unfreeze” it. “Deleting” means the data is gone, and if you need it again, you must recreate it.

2. Based on the Database System

Some database systems already implement archival features for you. For example, SQL Server has a history table feature that automatically logs deleted records into a history table, and updates are stored with their previous values. In such cases, there’s no need to create an archive table or implement archival logic at the code level.

3. Based on the Data Type in the Table

For tables such as menu tables (dictionary tables) or log tables, logical deletion is unnecessary and physical deletion is sufficient.

Only tables that store critical data, such as account tables or balance tables, should implement logical deletion. In such cases, using an archive table may be the better approach.

For further reading:

(Note: Currently, Zhihu requires login to view the original content. Without logging in, it will show random text as part of their anti-scraping measures against AI models.)

关于逻辑删除(假删除)是否要做,该怎么做的探讨

在现实世界中,有些文档用不到了、过期了,我们直接把它放入碎纸机碎掉,而有些文档需要保存到档案室,供以后查询。

一条订单,引用了很多其他信息,例如卖家信息、买家信息、商品信息等,当某种商品被下架时,我们也不能直接物理删除商品信息,否则引用它的订单的信息就不完整了。

对于要做假删除的那些表(在MongoDB中叫作“集合”):

  • 方法一,可以增加一个is_deleted、is_active等字段来标识这行数据是否被假删除了。
  • 方法二,可以专门为要做假删除的每张表建立一张对应的归档表(回收站表),把要删除的数据行先插入到归档表(包含删除时间、删除人ID、删除人姓名等额外字段),再在源表里删除。

方法一的缺点很多大神已经讲清楚了:

方法二更容易实现,对源表没有侵入性破坏,缺点只是增加了磁盘空间的开销。

我们设计数据库时,要视具体应用场景具体分析:

一、视具体业务的需求而定

如果业务问题是要备份数据,那应该做的是数据库备份,不应该是假删除。

如果业务问题是要归档数据,那应该做的是归档数据,也就是把数据移到归档表里。

如果业务问题只是想冻结数据,应该做inactive标记,这样在语义上非常完美,一致性约束同样没有问题。注意,“冻结”不是“删除”,“冻结”的意思是是这条数据如果你要再次用到,解冻它即可;而“删除”的意思是是这条数据已经被删除了,如果你要再次用到它,只能重新创建一条数据。

二、视数据库软件系统的类型而定

有些数据库软件系统已经帮你实现了归档数据的功能,例如SQL Server有历史表的功能,删除的记录自动记录到历史表里,更新操作也会把更新前的记录保存到历史表里。那么我们就无需自己创建归档表并在代码层面实现归档逻辑了。

三、视表中的数据类型而定

对于菜单表(字典表)、流水表(例如日志表),就无需做假删除了,因为没有必要,直接物理删除即可。

只有一些存储了重要数据的表,例如账户表、余额表,才要做假删除,也许使用回收站表的做法更好。

参考

https://www.zhihu.com/question/39967106/answer/121674339 注意,知乎现在需要登录才能查看到原文,否则显示的是一段随机文本,这是知乎应对AI大模型的爬虫的反爬措施。

Vue的渲染机制

Vue的视图模板被编译为一个render函数,render函数返回一棵虚拟DOM树,虚拟DOM树挂载(mount)为实际的DOM树。render函数会跟踪Vue的视图模板的依赖(即响应式状态),当响应式状态发生变化时,会执行其副作用,重新编译出一个render函数,返回一棵新的虚拟DOM树,然后与旧的虚拟DOM树进行节点之间的比对,找出更新的节点,然后只需把这些更新的节点更新(patch)到实际的DOM树的对应节点即可。这与替换整棵实际DOM树这种更新方法比起来,无疑性能更高,并且Vue还使用了静态提升、更新类型标记、树结构打平等优化手段来使这一过程更加高效!

参考

https://cn.vuejs.org/guide/extras/rendering-mechanism.html