1 安装

1

npm i --save [email protected]

不要装最新版，变化比较大。

2 注册

**全局完整注册：**修改 main.js:

1
2
3
4
5
6
7
8
9
10
11

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
import settings from '@/settings';

const app = createApp(App)
app.use(store).use(router).use(Antd).mount('#app')
app.config.globalProperties.$settings = settings

3 测试

修改 ShowCenterView.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<template>
  <div class="showcenter">
    <h1>show center  | 展示中心</h1>
    <a-row>
     <a-col :span="8" :offset="8">
        <a-input-search
          v-model:value="value"
          placeholder="input text"
          enter-button="Search"
          size="large"
          @search="onSearch"
        />
     </a-col>
    </a-row>
 </div>
</template>

效果：

比特币：一个点对点的电子货币系统

10 隐私

10 Privacy
The traditional banking model achieves a level of privacy by limiting access to information to the parties involved and the trusted third party. The necessity to announce all transactions publicly precludes this method, but privacy can still be maintained by breaking the flow of information in another place: by keeping public keys anonymous. The public can see that someone is sending an amount to someone else, but without information linking the transaction to anyone. This is similar to the level of information released by stock exchanges, where the time and size of individual trades, the “tape”, is made public, but without telling who the parties were.

As an additional firewall, a new key pair should be used for each transaction to keep them from being linked to a common owner. Some linking is still unavoidable with multi-input transactions, which necessarily reveal that their inputs were owned by the same owner. The risk is that if the owner of a key is revealed, linking could reveal other transactions that belonged to the same owner.

传统的银行模型通过限制参与方和可信任第三方对信息的访问来达到一定级别的隐私保护。交易必须要公开发布就不能使用这个方法，但隐私仍可在其他地方通过阻断信息流的方式来保护：那就是保持公钥匿名。公众能看到有人正在发送一定量货币给其他人，但是不能将交易关联到某个人。这和证券交易所发布的信息级别类似，每笔交易的时间和交易量，即行情是公开的，但是不会显示交易双方是谁。

作为额外的防火墙，对每笔交易使用新密钥对可以防止他们被关联到一个共同的拥有者。由于多输入值交易存在，有些关联仍不可避免，因为多输入值交易必然暴露其多个输入是属于同一个拥有者的。风险就在于如果一个密钥的拥有者被暴露，关联性将暴露属于同一个拥有者的其他交易。

【关注点】：

• keeping public keys anonymous, 如何做到呢？
• 证券交易所发布的信息级别类似，这个类比比较有趣。

1 配置vue.config.js

1
2
3
4
5
6

devServer: {
        historyApiFallback: true,
        allowedHosts: "all",
        host:"0.0.0.0",
        port:8080
    },

2 效果

访问 http://uric.yunminitools.cn:8080 ， 当点击到展示中心后，浏览器的控制台可以返回数据：

1 安装axios

1
2

项目根目录下执行如下指令
npm install -S axios --registry https://registry.npm.taobao.org

2 修改模块代码

在开发过程中，我们可能经常会在前端项目的业务里面使用到某些变量，我们可以添加到配置文件中，比如我们在src目录下创建一个settings.js文件：

/settings.js

1
2
3

export default { // 注意，对象要抛出后，其他文件中才能引入使用
    host: 'http://api.yunminitools.cn:8000' // 我们的后台项目将来就通过这个域名和端口来启动
}

1 Vue 的目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

src/         主开发目录，要开发的客户端代码文件（单文件组件，样式、工具函数等等）全部在这个目录下
static/      静态资源目录，项目中的静态资源(css，js，图片等文件)放在这个文件夹
dist/        项目打包发布文件夹，目前没有这个文件夹，最后要上线单文件项目文件都在这个文件夹中	
		         后面使用npm build 打包项目，让项目中的vue组件经过编译变成js 代码以后,dist就出现了

node_modules/     node的包目录，项目运行的依赖包存储目录，
                  package.json和package-lock.json文件中会自动记录了这个目录下所有的包以及包的版本信息，
                  如果node_modules没有，但是有package.json，则可以在终端下，通过npm install进行恢复。

config/      配置目录，是环境配置目录与项目无关。
build/       项目打包时依赖的目录
src/router/  路由，是我们创建项目的时候，如果选择安装vue-router，就自动会生成这个目录。
src/assets/  静态资源存储目录，与static目录作用类似。
src/components/  组件存储目录，就是浏览器中用户看到的页面的一部分内容。
src/views/       组件存储目录，就是浏览器中用户看到的页面内容，views往往会加载并包含components中的组件进来

2 执行流程图

graph TD
A(index.html 全局唯一入口)-->B(main.js VUE项目初始化入口)
B-->C(App.vue 根组件/路由)
C-->D1(首页页面组件)
C-->D2(登录页面组件)
C-->D3(商品页面组件)
D1-->E1(头部子组件)
D2-->E1
D3-->E1
D2-->E2(脚部子组件)
D1-->E2
D3-->E2
F(router/index.js 配置路由)-->C

Javascript 箭头函数

1
2

var arr = [11,22,33,44]
var res = arr.filter((item,index)=> item>30)

其等价形式为：

1
2
3
4

var arr = [11,22,33,44]
var res = arr.filter(function(item,index){
                    return item>30
                })

在 vue 中常常可以看到箭头函数的使用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<script>
// give each todo a unique id
let id = 0

export default {
  data() {
    return {
      newTodo: '',
      todos: [
        { id: id++, text: 'Learn HTML' },
        { id: id++, text: 'Learn JavaScript' },
        { id: id++, text: 'Learn Vue' }
      ]
    }
  },
  methods: {
    addTodo() {
      // ...
      this.todos.push({id:id++,text:this.newTodo})
      this.newTodo = ''
    },
    removeTodo(todo) {
      // ...
      this.todos = this.todos.filter((t)=>t!=todo)
    }
  }
}
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo">
    <button>Add Todo</button>    
  </form>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
</template>

其中的 this.todos = this.todos.filter ((t)=>t!=todo) 就是箭头函数。 可以实现列表的删除效果。
原理就是把不等于todo的元素筛选出来，也就是去除了todo。

比特币：一个点对点的电子货币系统

9 合并和分割货币

9 Combining and Splitting Value
Although it would be possible to handle coins individually, it would be unwieldy to make a separate transaction for every cent in a transfer. To allow value to be split and combined, transactions contain multiple inputs and outputs. Normally there will be either a single input from a larger previous transaction or multiple inputs combining smaller amounts, and at most two outputs: one for the payment, and one returning the change, if any, back to the sender.

It should be noted that fan-out, where a transaction depends on several transactions, and those transactions depend on many more, is not a problem here. There is never the need to extract a complete standalone copy of a transaction’s history.

尽管单独处理每个货币是可能的，但将一次转账按每一分拆成多次交易太笨拙。为允许交易额被分割和合并，交易将包含多个输入值和输出值。通常是一个从之前交易而得的较大输入值或多个较小输入值的组合，以及最多两个输出值：一个作为支付，另一个作为找零，如果有的话，退还给支付发送方。

需要注意的是，这里的扇出(fan-out)，即一笔交易依赖数笔交易，这数笔交易又依赖更多的交易，形成了一个树状结构。在比特币系统中，这种情况不会成为问题，因为不需要获取一笔交易历史的完整独立副本。

【关注点】：

• 扇出(fan-out), 是一个比较形象的说法，后面直接给出了定义。
• 不需要获取一笔交易历史的完整独立副本，并没有解释原因，为什么呢？

分享一个有趣的AI对话网站：https://app.myshell.ai/，目前可以免费注册，国内访问也无压力，目前有4个角色都可以尝试。

比特币：一个点对点的电子货币系统

8.简化的支付验证

8.Simplified Payment Verification
It is possible to verify payments without running a full network node. A user only needs to keep a copy of the block headers of the longest proof-of-work chain, which he can get by querying network nodes until he’s convinced he has the longest chain, and obtain the Merkle branch linking the transaction to the block it’s timestamped in. He can’t check the transaction for himself, but by linking it to a place in the chain, he can see that a network node has accepted it, and blocks added after it further confirm the network has accepted it.

As such, the verification is reliable as long as honest nodes control the network, but is more vulnerable if the network is overpowered by an attacker. While network nodes can verify transactions for themselves, the simplified method can be fooled by an attacker’s fabricated transactions for as long as the attacker can continue to overpower the network. One strategy to protect against this would be to accept alerts from network nodes when they detect an invalid block, prompting the user’s software to download the full block and alerted transactions to
confirm the inconsistency. Businesses that receive frequent payments will probably still want to run their own nodes for more independent security and quicker verification.

不运行一个完整的网络节点也是可以进行支付验证的。用户只需拥有一个最长工作量证明链的区块头副本，他可以通过向其他网络节点查询以确认他拥有了最长的链，并获取链接交易到给交易打时间戳区块的默克尔分支。虽然他自己不能核实这个交易，但如果交易已经链接到链中的某个位置，就说明一个网络节点已经接受了此交易，而其后追加的区块进一步确认网络已经接受了它。

同样地，只要诚实节点控制着网络，这种简化验证就是可靠的；如果网络被攻击者控制，简化验证会变得比较脆弱。虽然网络节点可以验证他们自己的交易，但只要攻击者持续控制网络，那么这种简化的方法就可能被攻击者的伪造交易欺骗。一种对策是接受其他网络节点发现一个无效区块时发出的警告，提醒用户软件下载整个区块和被警告的交易来检查一致性。为了更加独立的安全性以及更快的支付确认，收款频繁的公司可能仍需运行他们自己的节点。

【关注点】：

• 向其他网络节点查询以确认他拥有了最长的链, 如何做到？
• 仍需运行他们自己的节点，是指要运行全节点吗？

比特币：一个点对点的电子货币系统

6. 激励

6 Incentive
By convention, the first transaction in a block is a special transaction that starts a new coin owned by the creator of the block. This adds an incentive for nodes to support the network, and provides a way to initially distribute coins into circulation, since there is no central authority to issue them.
The steady addition of a constant of amount of new coins is analogous to gold miners expending resources to add gold to circulation. In our case, it is CPU time and electricity that is expended. The incentive can also be funded with transaction fees. If the output value of a transaction is less than its input value, the difference is a transaction fee that is added to the incentive value of the block containing the transaction. Once a predetermined number of coins have entered circulation, the incentive can transition entirely to transaction fees and be completely inflation free.
The incentive may help encourage nodes to stay honest. If a greedy attacker is able to assemble more CPU power than all the honest nodes, he would have to choose between using it to defraud people by stealing back his payments, or using it to generate new coins. He ought to find it more profitable to play by the rules, such rules that favour him with more new coins than everyone else combined, than to undermine the system and the validity of his own wealth.

我们约定，区块中的第一笔交易是区块创建者开创一枚属于他的新货币的特殊的交易。这就加入了对支持网络的节点的激励，并提供了一种初始分发货币到流通领域的方法，因为这里没有中央机构来发行货币。新货币按固定量稳定地增加就像金矿矿工消耗资源并增加黄金到流通领域一样。对我们而言，消耗的是 CPU 时间和电力激励也可以由交易费充当。如果交易的输出值小于其输入值，差价就作为交易费被加到包含此交易的区块的激励中。一旦预定量的货币进入了流通领域，激励将变为只含有交易费，这样可以完全避免通货膨胀。
激励会有助于鼓励节点保持诚实。如果一个贪心的攻击者有能力聚集比所有诚实节点更多的 CPU 算力，他将面临是以骗回已付款的方式欺诈别人还是使用这些算力生成新货币的抉择。他将发现遵守规则比破坏系统和他自己财产的有效性更有利，因为这些规则准许他获得比所有其他人都多的新货币。

7. 回收磁盘空间

7. Reclaiming Disk Space
   Once the latest transaction in a coin is buried under enough blocks, the spent transactions before it can be discarded to save disk space. To facilitate this without breaking the block’s hash, transactions are hashed in a Merkle Tree [7][2][5], with only the root included in the block’s hash. Old blocks can then be compacted by stubbing off branches of the tree. The interior hashes do not need to be stored.
   
   A block header with no transactions would be about 80 bytes. If we suppose blocks are generated every 10 minutes, 80 bytes * 6 * 24 * 365 = 4.2MB per year. With computer systems typically selling with 2GB of RAM as of 2008, and Moore’s Law predicting current growth of 1.2GB per year, storage should not be a problem even if the block headers must be kept in memory.

一旦某个货币的最新交易已经被足够多的区块覆盖，这之前的支付交易就可以被丢弃以节省磁盘空间。为便于此而又不破坏区块的哈希值，交易将被哈希进默克尔树 [7][2][5]，只有根节点被纳入到区块的哈希值。老的区块可通过剪除树枝的方式被压缩。树枝内部的哈希不需要被保存。

每个不包含交易的区块头大约是 80 bytes。如果每 10 分钟生成一个区块，每年生成80 bytes * 6 * 24 * 365 = 4.2 MB，2008 年在售的典型计算机有 2 GB 内存，并且摩尔定律预测目前每年内存增加 1.2 GB，所以就算区块头一定要存在内存里，存储也不是问题。

【关注点】：

• If the output value of a transaction is less than its input value，这句话不是太理解，什么情况下会出现？
• favour him with more new coins，翻译为 有利于他 获得更多的新币。问题是当到后期新币越来越少的时候，做这个事情是否是就有利可图了？
• enough blocks ，多少算足够？
• transactions are hashed in a Merkle Tree，为什么这样就可以不改变Hash值？