鉴于该篇文章阅读量大，回复的同学也挺多的，特地抽空写了一篇 vue2.0 下的 vuex 使用方法，传送门：使用 Vuex + Vue.js 构建单页应用【新篇】

-------------------- 华丽的分割线 --------------------

原文地址：https://coligo.io/learn-vuex-by-building-notes-app/

前言：在最近学习 Vue.js 的时候，看到国外一篇讲述了如何使用 Vue.js 和 Vuex 来构建一个简单笔记的单页应用的文章。感觉收获挺多，自己在它的例子的基础上进行了一些优化和自定义功能，在这里和大家分享下学习心得。

在这篇教程中我们将通过构建一个笔记应用来学习如何在我们的 Vue 项目中使用 Vuex。我们将大概的过一遍什么是 Vuex.js，在项目中什么时候使用它，和如何构建我们的 Vue 应用。

这里放一张我们项目的预览图片：

项目源码：vuex-notes-app；有需要的同学可以直接下载源码查看。

主要知识点

  • Vuex 状态管理机制的使用
  • Vue.js 的基础 api
  • Vue-cli 脚手架的安装及使用
  • vur-router 的使用
  • ES6 的语法，这里推荐看下阮一峰的入门教程

Vuex 概述

在我们迫不及待的开始项目之前，我们最好先花几分钟来了解下 Vuex 的核心概念。

Vuex 是一个专门为 Vue.js 应用所设计的集中式状态管理架构。它借鉴了 Flux 和 Redux 的设计思想，但简化了概念，并且采用了一种为能更好发挥 Vue.js 数据响应机制而专门设计的实现。

state 这样概念初次接触的时候可能会感觉到有点模糊，简单来说就是将 state 看成我们项目中使用的数据的集合。然后，Vuex 使得 组件本地状态（component local state）和 应用层级状态(application state) 有了一定的差异

  • component local state: 该状态表示仅仅在组件内部使用的状态，有点类似通过配置选项传入 Vue 组件内部的意思。
  • application level state: 应用层级状态，表示同时被多个组件共享的状态层级。

假设有这样一个场景：我们有一个父组件，同时包含两个子组件。父组件可以很容易的通过使用 props 属性来向子组件传递数据。

但是问题来了，当我们的两个子组件如何和对方互相通信的？ 或者子组件如何传递数据给他父组件的？在我们的项目很小的时候，这个两个问题都不会太难，因为我们可以通过事件派发和监听来完成父组件和子组件的通信。

然而，随着我们项目的增长：

  • 保持对所有的事件追踪将变得很困难。到底哪个事件是哪个组件派发的，哪个组件该监听哪个事件？
  • 项目逻辑分散在各个组件当中，很容易导致逻辑的混乱，不利于我们项目的维护。
  • 父组件将变得和子组件耦合越来越严重，因为它需要明确的派发和监听子组件的某些事件。

这就是 Vuex 用来解决的问题。 Vuex 的四个核心概念分别是：

  • The state tree：Vuex 使用单一状态树，用一个对象就包含了全部的应用层级状态。至此它便作为一个『唯一数据源(SSOT)』而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。
  • Getters: 用来从 store 获取 Vue 组件数据。
  • Mutators: 事件处理器用来驱动状态的变化。
  • Actions: 可以给组件使用的函数，以此用来驱动事件处理器 mutations

如何你暂时还不太理解这个四个概念，不用着急，我们将在后面的项目实战中详细的解释。

下面这张图详细的解释了 Vuex 应用中数据的流向（Vuex 官方图）

简单解释下：

Vuex 规定，属于应用层级的状态只能通过 Mutation 中的方法来修改，而派发 Mutation 中的事件只能通过 action。

从左到又，从组件出发，组件中调用 action，在 action 这一层级我们可以和后台数据交互，比如获取初始化的数据源，或者中间数据的过滤等。然后在 action 中去派发 Mutation。Mutation 去触发状态的改变，状态的改变，将触发视图的更新。

注意事项

  • 数据流都是单向的
  • 组件能够调用 action
  • action 用来派发 Mutation
  • 只有 mutation 可以改变状态
  • store 是响应式的，无论 state 什么时候更新，组件都将同步更新

环境安装

这个应用将使用 webpack 来做模块打包，处理和热重启。使用 Vue 官方提供的脚手架 vue-cli。

安装 vue-cli

  1. npm install -g vue-cli

*Node.js >= 4.x,5.x最好

初始化应用

  1. vue init webpack vue-notes-app
  2. cd vue-notes-app
  3. npm install // 安装依赖包
  4. npm run dev // 启动服务

初始化一个项目名为vue-notes-app的应用，并选择使用 webpack 打包方式。在命令行中按照提示选择初始化配置项。其中在选择 JSLint 校验的时候，推荐选择 AirBNB 规范。

使用你最喜欢的编辑器打开我们刚刚新建的项目，项目的结构大概如下图：

  • components/ 文件夹用来存放我们的 Vue 组件
  • vuex/ 文件夹存放的是和 Vuex store 相关的东西（state object，actions，mutators)
  • build/ 文件是 webpack 的打包编译配置文件
  • config/ 文件夹存放的是一些配置项，比如我们服务器访问的端口配置等
  • dist/ 该文件夹一开始是不存在，在我们的项目经过 build 之后才会产出
  • App.vue 根组件，所有的子组件都将在这里被引用
  • index.html 整个项目的入口文件，将会引用我们的根组件 App.vue
  • main.js 入口文件的 js 逻辑，在 webpack 打包之后将被注入到 index.html 中

功能模块

  • 新增笔记，新增一篇笔记，编辑区显示空的笔记内容
  • 删除笔记，删除一篇笔记之后，编辑区域显示当前笔记类别的第一项
  • 笔记列表切换，分为全部笔记和收藏笔记两种，在切换之后，编辑区域显示当前列表的第一条笔记
  • 收藏笔记，给当前激活的笔记打上收藏的标签

项目组件划分

在这个项目中，我们将总共使用四个组件：根组件 App.vue，操作栏组件 Toolbar.vue，别表组件 NotesList.vue，笔记编辑组件 Editor.vue。

创建 Vuex Store

按照上面我们列出来的功能模块，我们在 Vuex/ 下面建立一个 store.js 文件

  1. import Vue from 'vue';
  2. import Vuex from 'vuex';
  4. Vue.use(Vuex);
  6. // 需要维护的状态
  7. const state = {
  8.   notes: [],
  9.   activeNote: {},
  10.   show: ''
  11. };
  13. const mutations = {
  14.   // 初始化 state
  15.   INIT_STORE(state, data) {
  16.     state.notes = data.notes,
  17.     state.show = data.show;
  18.     state.activeNote = data.activeNote;
  19.   },
  20.   // 新增笔记
  21.   NEW_NOTE(state) {
  22.     var newNote = {
  23.       id: +new Date(),
  24.       title: '',
  25.       content: '',
  26.       favorite: false
  27.     };
  28.     state.notes.push(newNote);
  29.     state.activeNote = newNote;
  30.   },
  31.   // 修改笔记
  32.   EDIT_NOTE(state, note) {
  33.     state.activeNote = note;
  34.     // 修改原始数据
  35.     for (var i = 0; i < state.notes.length; i++) {
  36.       if(state.notes[i].id === note.id){
  37.         state.notes[i] = note;
  38.         break;
  39.       }
  40.     };
  41.   },
  42.   // 删除笔记
  43.   DELETE_NOTE(state) {
  44.     state.notes.$remove(state.activeNote);
  45.     state.activeNote = state.notes[0] || {};
  46.   },
  47.   // 切换笔记的收藏与取消收藏
  48.   TOGGLE_FAVORITE(state) {
  49.     state.activeNote.favorite = !state.activeNote.favorite;
  50.   },
  51.   // 切换显示数据列表类型：全部 or 收藏
  52.   SET_SHOW_ALL(state, show){
  53.     state.show = show;
  54.     // 切换数据展示，需要同步更新 activeNote
  55.     if(show === 'favorite'){
  56.       state.activeNote = state.notes.filter(note => note.favorite)[0] || {};
  57.     }else{
  58.       state.activeNote = state.notes[0] || {};
  59.     }
  60.   },
  61.   // 设置当前激活的笔记
  62.   SET_ACTIVE_NOTE(state, note) {
  63.     state.activeNote = note;
  64.   }
  65. };
  67. export default new Vuex.Store({
  68.   state,
  69.   mutations
  70. });

创建 Vuex Actions

在 Vuex/ 下面建立一个 action.js，用来给组件使用的函数

  1. function makeAction(type) {
  2.   return ({ dispatch }, ...args) => dispatch(type, ...args);
  3. };
  5. const initNote = {
  6.   id: +new Date(),
  7.   title: '我的笔记',
  8.   content: '第一篇笔记内容',
  9.   favorite: false
  10. };
  12. // 模拟初始化数据
  13. const initData = {
  14.   show: 'all',
  15.   notes: [initNote],
  16.   activeNote: initNote
  17. };
  19. export const initStore = ({ dispatch }) => {
  20.   dispatch('INIT_STORE', initData);
  21. };
  22. // 更新当前activeNote对象
  23. export const updateActiveNote = makeAction('SET_ACTIVE_NOTE');
  25. // 添加一个note对象
  26. export const newNote = makeAction('NEW_NOTE');
  28. // 删除一个note对象
  29. export const deleteNote = makeAction('DELETE_NOTE');
  30. export const toggleFavorite = makeAction('TOGGLE_FAVORITE');
  31. export const editNote = makeAction('EDIT_NOTE');
  33. // 更新列表展示
  34. export const updateShow = makeAction('SET_SHOW_ALL');

创建 Vuex Getters

在 vuex/ 下面建立一个 getter.js 文件，用来从 store 获取数据

  1. // 获取 noteList,这里将会根据 state.show 的状态做数据过滤
  2. export const filteredNotes = (state) => {
  3.   if(state.show === 'all'){
  4.     return state.notes || {};
  5.   }else if(state.show === 'favorite'){
  6.     return state.notes.filter(note => note.favorite) || {};
  7.   }
  8. };
  10. // 获取列表展示状态 ： all or favorite
  11. export const show = (state) => {
  12.   return state.show;
  13. };
  15. // 获取当前激活 note
  16. export const activeNote = (state) => {
  17.   return state.activeNote;
  18. };

以上就是我们 Vuex 的所有逻辑了，在定下了我们需要完成的功能之后，接下来就是只需要在组件中去调用 action 来实现对应的功能了。

路由配置

在这里我们将使用 vue-router 来做路由，引用 bootstrap 样式。

index.html

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>vuex-notes-app</title>
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  7.   </head>
  8.   <body>
  9.     <div id="app"></div>
  10.     <!-- built files will be auto injected -->
  11.   </body>
  12. </html>

所有的入口逻辑我们都将在 main.js 中编写

main.js

  1. import Vue from 'vue';
  2. import App from './App';
  4. import VueRouter from 'vue-router';
  5. import VueResource from 'vue-resource';
  7. // 路由模块和HTTP模块
  8. Vue.use(VueResource);
  9. Vue.use(VueRouter);
  11. const router = new VueRouter();
  13. router.map({
  14.   '/index': {
  15.     component: App
  16.   }
  17. });
  19. router.redirect({
  20.   '*': '/index'
  21. });
  23. router.start(App, '#app');

根组件 App.vue

  1. <template>
  2.   <div id="app" class="app">
  3.     <toolbar></toolbar>
  4.     <notes-list></notes-list>
  5.     <editor></editor>
  6.   </div>
  7. </template>
  9. <style>
  10.   html, #app {
  11.     height: 100%;
  12.   }
  14.   body {
  15.     margin: 0;
  16.     padding: 0;
  17.     border: 0;
  18.     height: 100%;
  19.     max-height: 100%;
  20.     position: relative;
  21.   }
  22. </style>
  24. <script>
  25.   import Toolbar from './components/Toolbar';
  26.   import NotesList from './components/NotesList';
  27.   import Editor from './components/Editor';
  28.   import store from './vuex/store';
  29.   import { initStore } from './vuex/actions';
  31.   export default {
  32.     components: {
  33.       Toolbar,
  34.       NotesList,
  35.       Editor
  36.     },
  37.     store,
  38.     vuex: {
  39.       actions: {
  40.         initStore
  41.       }
  42.     },
  43.     ready() {
  44.       this.initStore()
  45.     }
  46.   }
  47. </script>

在根组件中引用了三个子组件：Toolbar.vue, NotesList.vue, Editor.vue。

注意：我们在配置里面加入了 vuex 这么一个选项，这里用来将我们 action 里面定义的方法给暴露出来，我们在根组件中只做了一件事情，那就是初始化模拟数据，因此我们在组件生命周期的 ready 阶段调用了 actions 里面的 initStore 来初始化我们的 store 里面的 state

Toolbar.vue

  1. <template>
  2.   <div id="toolbar">
  3.     <i class="glyphicon logo"><img src="../assets/logo.png" width="30" height="30"></i>
  4.     <i @click="newNote" class="glyphicon glyphicon-plus"></i>
  5.     <i @click="toggleFavorite" class="glyphicon glyphicon-star" :class="{starred: activeNote.favorite}"></i>
  6.     <i @click="deleteNote" class="glyphicon glyphicon-remove"></i>
  7.   </div>
  8. </template>
  10. <script>
  11. import { newNote, deleteNote, toggleFavorite } from '../vuex/actions';
  12. import { activeNote } from '../vuex/getters';
  14. export default {
  15.   vuex: {
  16.     getters: {
  17.       activeNote
  18.     },
  19.     actions: {
  20.       newNote,
  21.       deleteNote,
  22.       toggleFavorite
  23.     }
  24.   }
  25. }
  26. </script>
  28. <style lang="scss" scoped>
  29.   #toolbar{
  30.     float: left;
  31.     width: 80px;
  32.     height: 100%;
  33.     background-color: #30414D;
  34.     color: #767676;
  35.     padding: 35px 25px 25px 25px;
  37.     .starred {
  38.       color: #F7AE4F;
  39.     }
  41.     i{
  42.       font-size: 30px;
  43.       margin-bottom: 35px;
  44.       cursor: pointer;
  45.       opacity: 0.8;
  46.       transition: opacity 0.5s ease;
  48.       &:hover{
  49.         opacity: 1;
  50.       }
  51.     }
  52.   }
  53. </style>

在这里，我们用到了 Vuex 的一个案例就是我们需要知道当前的激活的笔记是否是收藏类别的，如果是，我们需要高亮收藏按钮，那么如何知道呢？那就是通过 vuex 里面的 getters 获取当前激活的笔记对象，判断它的 favorite 是否为 true。

始终牢记一个概念，vuex 中数据是单向的，只能从 store 获取，而我们这个例子中的 activeNote 也是始终都在 store.js 中维护的，这样子就可以给其他组件公用了

  1. // 需要维护的状态
  2. const state = {
  3.   notes: [],
  4.   activeNote: {},
  5.   show: ''
  6. };

NotesList.vue

  1. <template>
  2.   <div id="notes-list">
  3.     <div id="list-header">
  4.       <h2>Notes | heavenru.com</h2>
  5.       <div class="btn-group btn-group-justified" role="group">
  6.         <!-- all -->
  7.         <div class="btn-group" role="group">
  8.           <button type="button" class="btn btn-default"
  9.             @click="toggleShow('all')"
  10.             :class="{active: show === 'all'}">All Notes</button>
  11.         </div>
  13.         <!-- favorites -->
  14.         <div class="btn-group" role="group">
  15.           <button type="button" class="btn btn-default"
  16.             @click="toggleShow('favorite')"
  17.             :class="{active: show === 'favorite'}">Favorites</button>
  18.         </div>
  19.       </div>
  20.     </div>
  22.     <!-- 渲染笔记列表 -->
  23.     <div class="container">
  24.       <div class="list-group">
  25.         <a v-for="note in filteredNotes"
  26.          class="list-group-item" href="#"
  27.          :class="{active: activeNote === note}"
  28.          @click="updateActiveNote(note)">
  29.           <h4 class="list-group-item-heading">
  30.             {{note.title.trim().substring(0,30)}}
  31.           </h4>
  32.         </a>
  33.       </div>
  34.     </div>
  35.   </div>
  36. </template>
  38. <script>
  39.   import { updateActiveNote, updateShow } from '../vuex/actions';
  40.   import { show, filteredNotes, activeNote } from '../vuex/getters';
  42.   export default {
  43.     vuex: {
  44.       getters: {
  45.         show,
  46.         filteredNotes,
  47.         activeNote
  48.       },
  49.       actions: {
  50.         updateActiveNote,
  51.         updateShow
  52.       }
  53.     },
  54.     methods: {
  55.       toggleShow(show) {
  56.         this.updateShow(show);
  57.       }
  58.     }
  59.   }
  60. </script>

笔记列表组件，主要有三个操作

  • 渲染笔记
  • 切换渲染笔记
  • 点击列表 title，切换 activeNote

我们通过 getters 中的 filteredNotes 方法获取笔记列表

  1. // 获取 noteList,这里将会根据 state.show 的状态做数据过滤
  2. export const filteredNotes = (state) => {
  3.   if(state.show === 'all'){
  4.     return state.notes || {};
  5.   }else if(state.show === 'favorite'){
  6.     return state.notes.filter(note => note.favorite) || {};
  7.   }
  8. };

可以看到，我们获取的列表是依赖于 state.show 这个状态的。而我们的切换列表操作恰好就是调用 actions 里面的方法来更新 state.show ，这样一来，实现了数据列表的动态刷新，而且我们对树的操作都是通过调用 actions 的方法来实现的。

我们再看，在切换列表的时候，我们还需要动态的更新 activeNote 。 看看我们在 store.js 中是如何做的：

  1. // 切换显示数据列表类型：全部 or 收藏
  2. SET_SHOW_ALL(state, show){
  3.   state.show = show;
  4.   // 切换数据展示，需要同步更新 activeNote
  5.   if(show === 'favorite'){
  6.     state.activeNote = state.notes.filter(note => note.favorite)[0] || {};
  7.   }else{
  8.     state.activeNote = state.notes[0] || {};
  9.   }
  10. }

触发这些操作的是我们给两个按钮分别绑定了我们自定义的函数，通过给函数传入不同的参数，然后调用 actions 里面的方法，来实现对数据的过滤，更新。

Editor.vue

  1. <template>
  2.   <div id="note-editor">
  3.     <div class="form-group">
  4.       <input type="text" name="title"
  5.         class="title form-control"
  6.         placeholder="请输入标题"
  7.         @input="updateNote"
  8.         v-model="currentNote.title">
  9.       <textarea
  10.         v-model="currentNote.content" name="content"
  11.         class="form-control" row="3" placeholder="请输入正文"
  12.         @input="updateNote"></textarea>
  13.     </div>
  14.   </div>
  15. </template>
  17. <script>
  18.   import { editNote } from '../vuex/actions';
  19.   import { activeNote } from '../vuex/getters';
  21.   export default {
  22.     vuex: {
  23.       getters: {
  24.         activeNote
  25.       },
  26.       actions: {
  27.         editNote
  28.       }
  29.     },
  30.     computed: {
  31.       // 通过计算属性得到的一个对象，这样子我们就能愉快的使用 v-model 了
  32.       currentNote: activeNote
  33.     },
  34.     methods: {
  35.       // 为什么这么做？ 因为在严格模式中不允许直接在模板层面去修改 state 中的值
  36.       updateNote() {
  37.         this.editNote(this.currentNote);
  38.       }
  39.     }
  40.   }
  41. </script>

在 Editor.vue 组件中，我们需要能够实时的更新当前的 activeNote 组件和列表中对应的我们正在修改的笔记对象的内容。

由于我们前面提到过，在组件中是不允许直接修改 store.js在里面的状态值的，所以在这里的时候，我们通过一个计算属性，将 store 里面的状态值赋值给一个对象，然后在自定义的 updateNotes() 方法中，去调用 action,同时传入 currentNote 对象。

在 store.js 中，我们是这么做的，找到对应的 id 的对象，重新赋值，因为前面提到过，我们的数据是响应式的，在这里进行了改变，对应的视图也将刷新改变，这样一来就实现了实时编辑，实时渲染的功能了。

  1. // 修改笔记
  2. EDIT_NOTE(state, note) {
  3.   state.activeNote = note;
  4.   // 修改原始数据
  5.   for (var i = 0; i < state.notes.length; i++) {
  6.     if(state.notes[i].id === note.id){
  7.       state.notes[i] = note;
  8.       break;
  9.     }
  10.   };
  11. },

Q&A

在这个项目中，我们并没有引入 vue-resource 插件，只是自己模拟了部分的数据，有兴趣的同学可以自己去试试。

由于我们的例子相对简单，没有涉及到很深入的东西，更深层次的研究需要大家花更多的时间去实践了。

最后，再说一句，在 action 里面，我们其实可以做的还有更多，比如根据 id 动态的异步获取笔记内容等等，这些有兴趣的同学可以自己去尝试，一点点的丰富这个例子。

使用 Vuex + Vue.js 构建单页应用的更多相关文章

  1. 使用 Vuex + Vue.js 构建单页应用【新篇】

    使用 Vuex + Vue.js 构建单页应用[新篇] 在去年的七月六号的时候,发布了一篇 使用 Vuex + Vue.js 构建单页应用 的文章,文章主要是介绍 vuex 的基本使用方法,发现对大部 ...

  2. 通过Web Api 和 Angular.js 构建单页面的web 程序

    通过Web Api 和 Angular.js 构建单页面的web 程序 在传统的web 应用程序中,浏览器端通过向服务器端发送请求,然后服务器端根据这个请求发送HTML到浏览器,这个响应将会影响整个的 ...

  3. Web API 2 入门——使用ASP.NET Web API和Angular.js构建单页应用程序（SPA）（谷歌翻译）

    在这篇文章中 概观 演习 概要 由网络营 下载网络营训练包 在传统的Web应用程序中,客户机(浏览器)通过请求页面启动与服务器的通信.然后,服务器处理请求,并将页面的HTML发送给客户端.在与页面的后 ...

  4. 基于VUE的SPA单页应用开发－加载性能篇

    1.基于异步数据的vue页面刷新 先看看基于异步数据的vue页面刷新后,都发生了啥- 如图所示: 图1 基于异步数据的vue页面刷新 网络请求图 步骤如下: step1:请求页面: step2:请求页 ...

  5. vue2.0 构建单页应用最佳实战

    vue2.0 构建单页应用最佳实战   前言 我们将会选择使用一些 vue 周边的库vue-cli, vue-router,vue-resource,vuex 1.使用 vue-cli 创建项目2.使 ...

  6. React构建单页应用方法与实例

    React作为目前最流行的前端框架之一,其受欢迎程度不容小觑,从这门框架上我们可以学到许多其他前端框架所缺失的东西,也是其创新性所在的地方,比如虚拟DOM.JSX等.那么接下来我们就来学习一下这门框架 ...

  7. 借助 Vue 来构建单页面应用

    原文: https://github.com/MeCKodo/vue-tutorial 主题 Vue.js (1/2)Vue构建单页应用最佳实战 前言 我们将会选择使用一些vue周边的库 1.使用no ...

  8. Nodejs in Visual Studio Code 12.构建单页应用Scrat实践

    1.开始 随着前端工程化深入研究,前端工程师现在碉堡了,甚至搞了个自己的前端网站http://div.io/需要邀请码才能注册,不过里面的技术确实牛.距离顶级的前端架构,目前博主应该是far away ...

  9. require.js实现单页web应用（SPA）

    本文转载自:https://blog.csdn.net/qq_33401924/article/details/53815922 移动端单页应用基本上是做移动端最流行的的方式了,但是对于很多前端来说, ...

随机推荐

  1. Qt：QWebEngineView

    0.说明 QWebEngineView提供一个用于展示和编辑网页内容的Widget,QWebEngineView本质是一个Widget. 一个Web View通过load( QUrl )方法加载一个U ...

  2. C++二维动态数组

    //创建 int **a=new int *[n]; for(i=0;i<n;i++) a[i]=new int[n]; // -- // 删除 for(i=0;i<n;i++) dele ...

  3. 错误try……except……else……finally 记录错误logging 抛出错误raise

    1.错误处理机制 try--except--finally 格式: try: 可能出错的代码 except xxx1Error as e: 处理1 except xxx2Error as e: 处理2 ...

  4. 翻译 | 解读首部 Kubernetes 纪录片

    引言 Honeypot.io 自诩为欧洲最大的技术人才招聘平台,同时提供开发者视频网站,又被称其为 "开发者的 Netflix".2022 年 1 月,该公司与 Red Hat.G ...

  5. c++ 11 线程池---完全使用c++ 11新特性

    前言: 目前网上的c++线程池资源多是使用老版本或者使用系统接口实现,使用c++ 11新特性的不多,最近研究了一下,实现一个简单版本,可实现任意任意参数函数的调用以及获得返回值. 0 前置知识 首先介 ...

  6. 火狐firebug&firepath插件安装

    火狐浏览器下掉了firebug和firepath插件,用户即使下载了火狐55以下的版本,也无法查找到这两个插件,以下方法可以解决哦 第1步:下载火狐55以内版本安装包,安装时迅速设置禁止自动更新版本, ...

  7. 使用tc配置后端设备，来限制虚拟机网卡带宽

    如果通过tc来限制虚拟机网卡接收方向带宽呢,实际上使用tc对接收方向限制的不够好,使用tc ingress可以限制接收,但是功能不够多,而且会形成丢包问题.一般是采用将流量重定向到一个虚拟设备ifb上 ...

  8. DDOS攻击应用

    0x01 环境 包含3台主机 attact 作为攻击方,使用Centos7.2,安装slowhttptest server 作为被攻击服务器,安装有apached windows,用于访问 serve ...

  9. 查找goog13的ip

    C:\Users\Deen>ping 172.217.24.14 Pinging 172.217.24.14 with 32 bytes of data: Reply from 172.217. ...

  10. 浅析memcmp 和 strcmp

    eg: #include <stdio.h> #include <string.h> int main(void) { char string[7] = "ABCDE ...