Gopal
Gopal

[译]如何用 Typescript 写一个完整的 Vue 应用程序

原文地址： How to write a Vue.js app completely in TypeScript

原文作者：Preetish HS

译者：Gopal

译者推荐：Typescript 和 Vue 都是现在前端必备的知识，本文基本覆盖了目前 Vue 2.x 的一些基础用法的 Typescript 版本实现，感兴趣的了解一下，更好的迎接 Vue 3.0

译者根据文章中提到的知识点，自己写了一个 demo，已放到 Github 地址 ，建议大家可以动手实战一下，如果遇到什么问题，可以留言评论或者提 issue

image

Vue 是一个惊人的，轻量的渐进式前端框架。因为 Vue 是灵活的，所以用户不需要使用 Typescript。但是不像 Angular，老版本的 Vue 并没有很好的支持 Typescript。因为这点，大多数 Vue 应用程序都是直接使用 JavaScript 写的。

现在随着官方对 Typescript 的支持，使用 Vue CLI 可以从头开始创建 Typescript 项目。但是我们仍然需要一些带有自定义装饰器和功能的第三方包来创建一个真正的、完整的 Typescript 应用程序，而官方文档并不包含入门所需要的所有信息。

为了帮助大家全面地了解它，我们将演示如何使用 Vue CLI 构建一个新的Vue + TypeScript 应用程序。

开始

用下面这句代码开始

vue create typescript-app

选择手动选择功能并进行配置，如下所示

image

项目搭建好之后，我们将项目跑起来

cd typescript-app
npm run serve

会自动打开 localhost:8080 网页（或者会在你启动项目后打印出这个链接），这代表我们项目启动成功

我们通过这个教程，我们会回顾以下功能，并展示如何使用 Typescript 去实现

1.基于类的组件
2.Data, props, computed 属性, methods, watchers, and emit
3.生命周期
4.Mixins
5.Vuex

在 components 目录中打开 HelloWorld.vue，你会看到如下结构

注意：对于每个实例，我将同时显示 TypeScript 和 Javascript 等价代码，这样您就可以轻松地比较两者。让我们开始吧

1.基于类的组件

//Typescript code

Javascript 等价代码如下：

为了使用 Typescript，我们首先需要设置

Javascript 等价代码如下：

2. Data, props, computed 属性, methods, watchers, and emit

使用 data

要使用 data 属性，我们可以简单地将它们声明为类变量。

@Component
export default class HelloWorld extends Vue {
  private msg: string = "welcome to my app"
  private list: Array = [
    {
      name: 'Preetish',
      age: '26'
    },
    {
      name: 'John',
      age: '30'
    }
  ]
}
 
 
Javascript 等价代码如下：
 
 
export default {
  data() {
    return {
      msg: "welcome to my app",
      list: [
        {
          name: 'Preetish',
          age: '26'
        },
        {
          name: 'John',
          age: '30'
        }
      ]
    }
}

 
 
使用 props
 
 
我们可以使用 @Prop 装饰器在 Vue 组件中使用 props。在 Vue 中，我们可以给额外的配置给 props，比如 required、default 和 type。首先我们可以像下面一样从 vue-property-decorator 引入 Prop 装饰器。我们还可以使用 readonly 去避免操作改变 props。
 
 
import { Component, Prop, Vue } from 'vue-property-decorator'
@Component
export default class HelloWorld extends Vue {
  @Prop() readonly msg!: string
  @Prop({default: 'John doe'}) readonly name: string
  @Prop({required: true}) readonly age: number
  @Prop(String) readonly address: string
  @Prop({required: false, type: String, default: 'Developer'}) readonly job: string
}


 
 
Javascript 等价代码如下：
 
 
  props: {
    msg,
    name: {
      default: 'John doe'
    },
    age: {
      required: true,
    },
    address: {
      type: String
    },
    job: {
      required: false,
      type: string,
      default: 'Developer'
    }
  }
}

 
 
Computed 属性
 
 
计算属性用于编写简单的模板逻辑，例如操作、添加或连接数据。在 TypeScript 中，一个普通的计算属性也以 get 关键字作为前缀。
 
 
export default class HelloWorld extends Vue {
  get fullName(): string {
    return this.first+ ' '+ this.last
  }
}

 
 
Javascript 等价代码如下：
 
 
export default {
  fullName() {
    return this.first + ' ' + this.last
  }
}

 
 
在 Typescript 中，我们可以写一些复杂的包括 getter 和 setter 的计算属性，如下所示
 
 
export default class HelloWorld extends Vue {
  get fullName(): string {
    return this.first+ ' '+ this.last
  }
  set fullName(newValue: string) {
    let names = newValue.split(' ')
    this.first = names[0]
    this.last = names[names.length - 1]
  }
}

 
 
Javascript 等价代码如下：
 
 
fullName: {
  get: function () {
    return this.first + ' ' + this.last
  },
  set: function (newValue) {
    let names = newValue.split(' ')
    this.first = names[0]
    this.last = names[names.length - 1]
  }
}

 
 
Methods
 
 
与普通类方法一样，TypeScript 中的方法也有一个可选的访问修饰符。
 
 
export default class HelloWorld extends Vue {
  public clickMe(): void {
    console.log('clicked')
    console.log(this.addNum(4, 2))
  }
  public addNum(num1: number, num2: number): number {
    return num1 + num2
  }
}

 
 
Javascript 等价代码如下：
 
 
export default {
  methods: {
    clickMe() {
      console.log('clicked')
      console.log(this.addNum(4, 2))
    }
    addNum(num1, num2) {
      return num1 + num2
    }
  }
}

 
 
Watchers
 
 
Watcher 的写法跟我们平时书写 JavaScript 的方式不同，我们最常用的 JavaScript 书写 watcher 的语法如下：
 
 
watch: {
  name: function(newval) {
    //do something
  }
}

 
 
我们不经常使用 handler 语法
 
 
watch: {
  name: {
    handler: 'nameChanged'
  }
}
methods: {
  nameChanged (newVal) {
    // do something
  }
}

 
 
但是，Typescript 跟第二种方式相似。在 TypeScript 中，我们使用 @Watch 装饰器并传递需要监视的变量的名称。
 
 
@Watch('name')
nameChanged(newVal: string) {
  this.name = newVal
}

 
 
我们也可以使用 immediate 和 deep
 
 
@Watch('project', { 
  immediate: true, deep: true 
})
projectChanged(newVal: Person, oldVal: Person) {
  // do something
}

 
 
Javascript 等价代码如下：
 
 
watch: {
  person: {
      handler: 'projectChanged',
      immediate: true,
      deep: true
    }
}
methods: {
  projectChanged(newVal, oldVal) {
    // do something
  }
}

 
 
Emit
 
 
要从一个子组件 emit 一个方法到父组件，在 Typescript 中，我们将使用 @Emit 装饰器。
 
 
@Emit()
addToCount(n: number) {
  this.count += n
}
@Emit('resetData')
resetCount() {
  this.count = 0
}

 
 
在第一个示例中，函数名 addToCount 被转换为短横线分隔 (kebab-case)，这与 Vue emit 的工作方式非常类似。
 
 
在第二个示例中，我们传递方法的显式名称 resetData，并使用该名称。因为addData 是驼峰式的，所以它再次被转换为短横线分隔 (kebab-case)。
 
 



 
 
//Javascript Equivalent
 methods: {
    addToCount(n) {
      this.count += n
      this.$emit('add-to-count', n)
    },
    resetCount() {
      this.count = 0
      this.$emit('resetData')
    }
}

 
 
3.生命周期钩子
 
 
一个 Vue 组件有八个生命周期，包括 created、mounted 等等，每个钩子都使用相同的 Typescript 语法。这些被声明为普通类方法。因为生命周期钩子是自动调用的，所以它们既不接受参数也不返回任何数据。因此，我们不需要访问修饰符、输入参数或返回类型。
 
 
export default class HelloWorld extends Vue {
  mounted() {
    //do something
  }
  beforeUpdate() {
    // do something
  }
}

 
 
Javascript 等价代码如下：
 
 
export default {
  mounted() {
    //do something
  }
  beforeUpdate() {
    // do something
  }
}

 
 
4. Mixins
 
 
为了在 Typescript 中创建 mixins，我们必须首先创建 mixin 文件，其中包含我们与其他组件共享的数据。
 
 
创建一个名为 ProjectMixin.ts 的文件。在 mixin 目录中添加下面的 mixin，它共享 projName 和更新 projName 的方法。
 
 
import { Component, Vue } from 'vue-property-decorator'
@Component
class ProjectMixin extends Vue {
  public projName: string = 'My project'
  public setProjectName(newVal: string): void {
    this.projName = newVal
  }
}
export default ProjectMixin

 
 
Javascript 等价代码如下：
 
 
export default {
 data() {
   return {
     projName: 'My project'
   }
 },
 methods: {
   setProjectName(newVal) {
     this.projName = newVal
   }
 }
}

 
 
在我们的 Vue 组件中使用上面的 mixin，我们需要从 vue-property-decorator 引入 Mixins 和引入 mixin 文件，如下所示
 
 
//Projects.vue



 
 
Javascript 等价代码如下：
 
 



 
 
5. Vuex
 
 
Vuex 是大多数 Vue.js 应用程序中使用的官方状态管理库。将 store 划分为命名空间模块是一个很好的实践。我们将演示如何在 TypeScript 中编写它。
 
 
首先，我们需要安装两个流行的第三方库：
 
 
npm install vuex-module-decorators -D
npm install vuex-class -D

 
 
在 store文件夹中，让我们创建一个 module 文件夹来放置我们的命名空间存储模块。
 
 
创建一个名为 user 的文件。ts 拥有 user 的状态。
 
 
// store/modules/user.ts
import { VuexModule, Module, Mutation, Action } from 'vuex-module-decorators'
@Module({ namespaced: true, name: 'test' })
class User extends VuexModule {
  public name: string = ''
  @Mutation
  public setName(newName: string): void {
    this.name = newName
  }
  @Action
  public updateName(newName: string): void {
    this.context.commit('setName', newName)
  }
}
export default User

 
 
vuex-module-decorators 库为 Module, Mutation 和 Action 提供了装饰器。状态变量是直接声明的，就像类变量一样。这是一个简单的模块，它存储用户名，并通过一个 mutation 和一个 action 去更新用户名的操作。
 
 
我们不需要将 state 作为Mutations 和 Actions 中的第一个参数，这个库已经考虑到这一点。它已经被注入到那些方法中。
 
 
Javascript 等价代码如下：
 
 
export default {
  namespaced: true,
  state: {
    name: ''
  },
  mutations: {
    setName(state, newName) {
      state.name = newName
    }
  },
  actions: {
    updateName(context, newName) {
      context.commit('setName', newName)
    }
  }
}

 
 
在 store 文件夹中，我们需要创建一个 index.ts 去初始化 Vuex 并注册此模块
 
 
import Vue from 'vue'
import Vuex from 'vuex'
import User from '@/store/modules/user'
Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    User
  }
})
export default store

 
 
在组件中使用 Vuex
 
 
要使用 Vuex，我们可以利用一个名为 Vuex -class 的库。这个库提供装饰器来绑定 Vue 组件中的 State, Getter, Mutation 和 Action。
 
 
因为我们使用的是带有命名空间的Vuex 模块，所以我们首先从 Vuex 类导入命名空间，然后传递模块的名称来访问该模块。
 
 



 
 
Javascript 等价代码如下：
 
 



 
 
总结
 
 
现在，你已经掌握了在 TypeScript 中完全创建 Vue.js 应用程序所需的所有基本信息，可以使用一些官方和第三方库来充分利用类型化和自定义装饰器特性。Vue 3.0 将对 TypeScript 提供更好的支持，并且整个 Vue.js 代码都在 TypeScript 中重写，以提高可维护性。
 
 
一开始，使用 TypeScript 似乎有点让人不知所措，但是当你习惯了之后，你的代码中就会有更少的 bug，并且在相同代码基础上的其他开发人员之间的代码协作也会更顺畅。
 

                            
                        
                    
                    
                    

                    
                    
                    

                
                

                    
                

            
        
    
    

        
你可能感兴趣的:([译]如何用 Typescript 写一个完整的 Vue 应用程序)

        

            

                
    
                    
  • 斤斤计较的婚姻到底有多难？
                        白心之岂必有为

                        
    很多人私聊我会问到在哪个人群当中斤斤计较的人最多？我都会回答他，一般婚姻出现问题的斤斤计较的人士会非常多，以我多年经验，在婚姻落的一塌糊涂的人当中，斤斤计较的人数占比在20～30%以上，也就是说10个婚姻出现问题的斤斤计较的人有2-3个有多不减。在婚姻出问题当中，有大量的心理不平衡的、尖酸刻薄的怨妇。在婚姻中仅斤斤计较有两种类型：第一种是物质上的，另一种是精神上的。在物质与精神上抠门已经严重的影响
    
                    
    • 
                    
  • 情绪觉察日记第37天
                        露露_e800

                        
    今天是家庭关系规划师的第二阶最后一天，慧萍老师帮我做了个案，帮我处理了埋在心底好多年的一份恐惧，并给了我深深的力量！这几天出来学习，爸妈过来婆家帮我带小孩，妈妈出于爱帮我收拾东西，并跟我先生和婆婆产生矛盾，妈妈觉得他们没有照顾好我…。今晚回家见到妈妈，我很欣赏她并赞扬她，妈妈说今晚要跟我睡我说好，当我们俩躺在床上准备睡觉的时候，我握着妈妈的手对她说:妈妈这几天辛苦你了，你看你多利害把我们的家收拾得
    
                    
    • 
                    
  • 芦花鞋一四
                        许叶晗

                        
    又是在一个寒冷的夏日里，青铜和葵花决定今天一起去卖芦花鞋，奶奶亲手给他们做了一碗热乎乎的粥对他们说:“就靠你们两挣生活费了这碗粥赶紧趁热喝了吧！”于是青铜和葵花喝完了奶奶给她们做的粥，就准备去镇上卖卢花鞋，这回青铜和葵花穿着新的芦花鞋来到了镇上。青铜这回看到了很多人都在卖，用手势表达对葵花说:“这回有好多人在抢我们生意呢！我们必须得吆喝起来。”葵花点了点头。可是谁知他们也大声的叫，卖芦花喽！卖芦花
    
                    
    • 
                    
  • QQ群采集助手，精准引流必备神器
                        2401_87347160
其他经验分享
                        
    功能概述微信群查找与筛选工具是一款专为微信用户设计的辅助工具，它通过关键词搜索功能，帮助用户快速找到相关的微信群，并提供筛选是否需要验证的群组的功能。主要功能关键词搜索：用户可以输入关键词，工具将自动查找包含该关键词的微信群。筛选功能：工具提供筛选机制，用户可以选择是否只显示需要验证或不需要验证的群组。精准引流：通过上述功能，用户可以更精准地找到目标群组，进行有效的引流操作。3.设备需求该工具可以
    
                    
    • 
                    
  • 关于沟通这件事，项目经理不需要每次都面对面进行
                        流程大师兄

                        
    很多项目经理都会遇到这样的问题，项目中由于事情太多，根本没有足够的时间去召开会议，那在这种情况下如何去有效地管理项目中的利益相关者？当然，不建议电子邮件也不需要开会的话，建议可以采取下面几种方式来形成有效的沟通，这几种方式可以帮助你努力的通过各种办法来保持和各方面的联系。项目经理首先要问自己几个问题，项目中哪些利益相关者是必须要进行沟通的？可以列出项目中所有的利益相关者清单，同时也整理出项目中哪些
    
                    
    • 
                    
  • 机器学习与深度学习间关系与区别
                        ℒℴѵℯ心·动ꦿ໊ོ꫞
人工智能学习深度学习python
                        
    一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入
    
                    
    • 
                    
  • 铭刻于星（四十二）
                        随风至

                        
    69夜晚，绍敏同学做完功课后，看了眼房外，没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深，都有些旧了，想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处，待到全部拆开后，又反复抚平纸张，然后仔细地一字字默看。只是开头的三个字是第一次看到，让她心漏跳了几拍。“亲爱的绍敏：从四年级的时候，我就喜欢你了，但是我一直不敢说，怕影响你学习。六年级的时候听说有人跟你表白，你接受了，我很难过，但
    
                    
    • 
                    
  • 底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说
                        造命者说

                        
    底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说我叫吴起，生于公元前440年的战国初期，正是群雄并起、天下纷争不断的时候。后人说我是军事家、政治家、改革家，是兵家代表人物。评价我一生历仕鲁、魏、楚三国，通晓兵家、法家、儒家三家思想，在内政军事上都有极高的成就。周安王二十一年（公元前381年），因变法得罪守旧贵族，被人乱箭射死。我出生在卫国一个“家累万金”的富有家庭，从年轻时候起就不甘平凡
    
                    
    • 
                    
  • 2020-01-25
                        晴岚85

                        
    郑海燕坚持分享590天2020.1.24在生活中只存在两个问题。一个问题是：你知道想要达成的目标是什么，但却不知道如何才能达成；另一个问题是：你不知道你的目标是什么。前一个是行动的问题，后一个是结果的问题。通过制定具体的下一步行动，可以解决不知道如何开始行动的问题。而通过去想象结果，对结果做预估，可以解决找不着目标的问题。对于所有吸引我们注意力，想要完成的任务，你可以先想象一下，预期的结果究竟是什
    
                    
    • 
                    
  • 随笔 | 仙一般的灵气
                        海思沧海

                        
    仙岛今天，我看了你全部，似乎已经进入你的世界我不知道，这是否是梦幻，还是你仙一般的灵气吸引了我也许每一个人都要有一份属于自己的追求，这样才能够符合人生的梦想，生活才能够充满着阳光与快乐我不知道，我为什么会这样的感叹，是在感叹自己的人生，还是感叹自己一直没有孜孜不倦的追求只感觉虚度了光阴，每天活在自己的梦中，活在一个不真实的世界是在逃避自己，还是在逃避周围的一切有时候我嘲笑自己，嘲笑自己如此的虚无，
    
                    
    • 
                    
  • 想家
                        爆米花机

                        
    也许不同于大家对家乡的思念，我对家乡甚至是疯狂的不舍。还未踏出车站就感觉到幸福，我享受这里的夕阳、这里的浓烈柴火味、这里每一口家常菜。我是宅女，我贪恋家的安逸。刚刚踏出大学校门，初出茅庐，无法适应每年只能国庆和春节回家。我焦虑、失眠、无端发脾气，是无法适应工作的节奏，是无法接受我将一步步离开家乡的事实。我不想承认自己胸无大志，选择再次踏上征程。图片发自App
    
                    
    • 
                    
  • 【iOS】MVC设计模式
                        Magnetic_h
iosmvc设计模式objective-c学习ui
                        
    MVC前言如何设计一个程序的结构，这是一门专门的学问，叫做"架构模式"（architecturalpattern），属于编程的方法论。MVC模式就是架构模式的一种。它是Apple官方推荐的App开发架构，也是一般开发者最先遇到、最经典的架构。MVC各层controller层Controller/ViewController/VC（控制器）负责协调Model和View，处理大部分逻辑它将数据从Mod
    
                    
    • 
                    
  • OC语言多界面传值五大方式
                        Magnetic_h
iosui学习objective-c开发语言
                        
    前言在完成暑假仿写项目时，遇到了许多需要用到多界面传值的地方，这篇博客来总结一下比较常用的五种多界面传值的方式。属性传值属性传值一般用前一个界面向后一个界面传值，简单地说就是通过访问后一个视图控制器的属性来为它赋值，通过这个属性来做到从前一个界面向后一个界面传值。首先在后一个界面中定义属性@interfaceBViewController:UIViewController@propertyNSSt
    
                    
    • 
                    
  • 一百九十四章. 自相矛盾
                        巨木擎天

                        
    唉！就这么一夜，林子感觉就像过了很多天似的，先是回了阳间家里，遇到了那么多不可思议的事情儿。特别是小伙伴们，第二次与自己见面时，僵硬的表情和恐怖的气氛，让自己如坐针毡，打从心眼里难受！还有东子，他现在还好吗？有没有被人欺负？护城河里的小鱼小虾们，还都在吗？水不会真的干枯了吧？那对相亲相爱漂亮的太平鸟儿，还好吧！春天了，到了做窝、下蛋、喂养小鸟宝宝的时候了，希望它们都能够平安啊！虽然没有看见家人，也
    
                    
    • 
                    
  • UI学习——cell的复用和自定义cell
                        Magnetic_h
ui学习
                        
    目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添
    
                    
    • 
                    
  • element实现动态路由+面包屑
                        软件技术NINI
vue案例vue.js前端
                        
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
    
                    
    • 
                    
  • 10月|愿你的青春不负梦想-读书笔记-01
                        Tracy的小书斋

                        
    本书的作者是俞敏洪，大家都很熟悉他了吧。俞敏洪老师是我行业的领头羊吧，也是我事业上的偶像。本日摘录他书中第一章中的金句：『一个人如果什么目标都没有，就会浑浑噩噩，感觉生命中缺少能量。能给我们能量的，是对未来的期待。第一件事，我始终为了进步而努力。与其追寻全世界的骏马，不如种植丰美的草原，到时骏马自然会来。第二件事，我始终有阶段性的目标。什么东西能给我能量？答案是对未来的期待。』读到这里的时候，我便
    
                    
    • 
                    
  • C语言宏函数
                        南林yan
C语言c语言
                        
    一、什么是宏函数？通过宏定义的函数是宏函数。如下，编译器在预处理阶段会将Add(x,y)替换为((x)*(y))#defineAdd(x,y)((x)*(y))#defineAdd(x,y)((x)*(y))intmain(){inta=10;intb=20;intd=10;intc=Add(a+d,b)*2;cout<
                    
    • 
                    
  • 地推话术，如何应对地推过程中家长的拒绝
                        校师学

                        
    相信校长们在做地推的时候经常遇到这种情况：市场专员反馈家长不接单，咨询师反馈难以邀约这些家长上门，校区地推疲软，招生难。为什么？仅从地推层面分析，一方面因为家长受到的信息轰炸越来越多，对信息越来越“免疫”；而另一方面地推人员的专业能力和营销话术没有提高，无法应对家长的拒绝，对有意向的家长也不知如何跟进，眼睁睁看着家长走远；对于家长的疑问，更不知道如何有技巧地回答，机会白白流失。由于回答没技巧和专业
    
                    
    • 
                    
  • 谢谢你们，爱你们！
                        鹿游儿

                        
    昨天家人去泡温泉，二个孩子也带着去，出发前一晚，匆匆下班，赶回家和孩子一起收拾。饭后，我拿出笔和本子（上次去澳门时做手帐的本子）写下了1\2\3\4\5\6\7\8\9,让后让小壹去思考，带什么出发去旅游呢？她在对应的数字旁边画上了，泳衣、泳圈、肖恩、内衣内裤、tapuy、拖鞋……画完后，就让她自己对着这个本子，将要带的，一一带上，没想到这次带的书还是这本《便便工厂》(晚上姑婆发照片过来，妹妹累得
    
                    
    • 
                    
  • C语言如何定义宏函数？
                        小九格物
c语言
                        
    在C语言中，宏函数是通过预处理器定义的，它在编译之前替换代码中的宏调用。宏函数可以模拟函数的行为，但它们不是真正的函数，因为它们在编译时不会进行类型检查，也不会分配存储空间。宏函数的定义通常使用#define指令，后面跟着宏的名称和参数列表，以及宏展开后的代码。宏函数的定义方式：1.基本宏函数：这是最简单的宏函数形式，它直接定义一个表达式。#defineSQUARE(x)((x)*(x))2.带参
    
                    
    • 
                    
  • 微服务下功能权限与数据权限的设计与实现
                        nbsaas-boot
微服务java架构
                        
    在微服务架构下，系统的功能权限和数据权限控制显得尤为重要。随着系统规模的扩大和微服务数量的增加，如何保证不同用户和服务之间的访问权限准确、细粒度地控制，成为设计安全策略的关键。本文将讨论如何在微服务体系中设计和实现功能权限与数据权限控制。1.功能权限与数据权限的定义功能权限：指用户或系统角色对特定功能的访问权限。通常是某个用户角色能否执行某个操作，比如查看订单、创建订单、修改用户资料等。数据权限：
    
                    
    • 
                    
  • 理解Gunicorn：Python WSGI服务器的基石
                        范范0825
ipythonlinux运维
                        
    理解Gunicorn：PythonWSGI服务器的基石介绍Gunicorn，全称GreenUnicorn，是一个为PythonWSGI（WebServerGatewayInterface）应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具，Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置，帮助初学者快速上手。1.什么是Gunico
    
                    
    • 
                    
  • 小丽成长记（四十三）
                        玲玲54321

                        
    小丽发现，即使她好不容易调整好自己的心态下一秒总会有不确定的伤脑筋的事出现，一个接一个的问题，人生就没有停下的时候，小问题不断出现。不过她今天看的书，她接受了人生就是不确定的，厉害的人就是不断创造确定性，在Ta的领域比别人多的确定性就能让自己脱颖而出，显示价值从而获得的比别人多的利益。正是这样的原因，因为从前修炼自己太少，使得她现在在人生道路上打怪起来困难重重，她似乎永远摆脱不了那种无力感，有种习
    
                    
    • 
                    
  • 学点心理知识，呵护孩子健康
                        静候花开_7090

                        
    昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所，超越教育与技术的思考》的讲座。今天又重新学习了一遍，收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题，她说心理健康的一些基本命题，我们与我们通常的一些教育命题是不同的，她还举了几个例子，让我们明白我们原来以为的健康并非心理学上的健康。比如如果
    
                    
    • 
                    
  • 2021年12月19日，春蕾教育集团团建活动感受——黄晓丹
                        黄错错加油

                        
    感受:1.从陌生到熟悉的过程。游戏环节让我们在轻松的氛围中得到了锻炼，也增长了不少知识。2.游戏过程中，我们贡献的是个人力量，展现的是团队的力量。它磨合的往往不止是工作的熟悉，更是观念上契合度的贴近。3.这和工作是一样的道理。在各自的岗位上，每个人摆正自己的位置、各司其职充分发挥才能，并团结一致劲往一处使，才能实现最大的成功。新知:1.团队精神需要不断地创新。过去，人们把创新看作是冒风险，现在人们
    
                    
    • 
                    
  • Cell Insight | 单细胞测序技术又一新发现，可用于HIV-1和Mtb共感染个体诊断
                        尐尐呅

                        
    结核病是艾滋病合并其他疾病中导致患者死亡的主要原因。其中结核病由结核分枝杆菌（Mycobacteriumtuberculosis,Mtb）感染引起，获得性免疫缺陷综合症（艾滋病）由人免疫缺陷病毒（Humanimmunodeficiencyvirustype1,HIV-1）感染引起。国家感染性疾病临床医学研究中心/深圳市第三人民医院张国良团队携手深圳华大生命科学研究院吴靓团队，共同研究得出单细胞测序
    
                    
    • 
                    
  • c++ 的iostream 和 c++的stdio的区别和联系
                        黄卷青灯77
c++算法开发语言iostreamstdio
                        
    在C++中，iostream和C语言的stdio.h都是用于处理输入输出的库，但它们在设计、用法和功能上有许多不同。以下是两者的区别和联系：区别1.编程风格iostream（C++风格）：C++标准库中的输入输出流类库，支持面向对象的输入输出操作。典型用法是cin（输入）和cout（输出），使用>操作符来处理数据。更加类型安全，支持用户自定义类型的输入输出。#includeintmain(){in
    
                    
    • 
                    
  • 瑶池防线
                        谜影梦蝶

                        
    冥华虽然逃过了影梦的军队，但他是一个忠臣，他选择上报战况。败给影梦后成逃兵，高层亡尔还活着，七重天失守......随便一条，即可处死冥华。冥华自然是知道以仙界高层的习性此信一发自己必死无疑，但他还选择上报实情，因为责任。同样此信送到仙宫后，知道此事的人，大多数人都认定冥华要完了，所以上到仙界高层，下到扫大街的，包括冥华自己，全都准备好迎接冥华之死。如果仙界现在还属于两方之争的话，冥华必死无疑。然而
    
                    
    • 
                    
  • 爬山后遗症
                        璃绛

                        
    爬山，攀登，一步一步走向制高点，是一种挑战。成功抵达是一种无法言语的快乐，在山顶吹吹风，看看风景，这是从未有过的体验。然而，爬山一时爽，下山腿打颤，颠簸的路，一路向下走，腿部力量不够，走起来抖到不行，停不下来了！第二天必定腿疼，浑身酸痛，坐立难安！
    
                    
    • 
                                
  • Spring4.1新特性——综述
                                    jinnianshilongnian
spring 4.1
                                    
    目录 
Spring4.1新特性——综述 
Spring4.1新特性——Spring核心部分及其他 
Spring4.1新特性——Spring缓存框架增强 
Spring4.1新特性——异步调用和事件机制的异常处理 
Spring4.1新特性——数据库集成测试脚本初始化 
Spring4.1新特性——Spring MVC增强 
Spring4.1新特性——页面自动化测试框架Spring MVC T
    
                                
    • 
                                
  • Schema与数据类型优化
                                    annan211
数据结构mysql
                                    
    

目前商城的数据库设计真是一塌糊涂，表堆叠让人不忍直视，无脑的架构师，说了也不听。
在数据库设计之初，就应该仔细揣摩可能会有哪些查询，有没有更复杂的查询，而不是仅仅突出
很表面的业务需求，这样做会让你的数据库性能成倍提高，当然，丑陋的架构师是不会这样去考虑问题的。

选择优化的数据类型
 1 更小的通常更好
   更小的数据类型通常更快，因为他们占用更少的磁盘、内存和cpu缓存，
    
                                
    • 
                                
  • 第一节 HTML概要学习
                                    chenke
htmlWebcss
                                    
    第一节 HTML概要学习 
 
1. 什么是HTML 
 
HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，它规定了自己的语法规则，用来表示比“文本”更丰富的意义，比如图片，表格，链接等。浏览器（IE,FireFox等）软件知道HTML语言的语法，可以用来查看HTML文档。目前互联网上的绝大部分网页都是使用HTML编写的。 
 
打开记事本 输入一下内
    
                                
    • 
                                
  • MyEclipse里部分习惯的更改
                                    Array_06
eclipse
                                    
    继续补充中---------------------- 
 
 
 
1.更改自己合适快捷键windows-->prefences-->java-->editor-->Content Assist--> 
     Activation triggers for java的右侧“.”就可以改变常用的快捷键 
 
选中 Text 
    
                                
    • 
                                
  • 近一个月的面试总结
                                    cugfy
面试
                                    
    本文是在学习中的总结，欢迎转载但请注明出处：http://blog.csdn.net/pistolove/article/details/46753275 
 
 
前言 
      打算换个工作，近一个月面试了不少的公司，下面将一些面试经验和思考分享给大家。另外校招也快要开始了，为在校的学生提供一些经验供参考，希望都能找到满意的工作。 
    
                                
    • 
                                
  • HTML5一个小迷宫游戏
                                    357029540
html5
                                    
         通过《HTML5游戏开发》摘抄了一个小迷宫游戏，感觉还不错，可以画画，写字，把摘抄的代码放上来分享下，喜欢的同学可以拿来玩玩！ 
 
<html> 
 <head> 
 <title>创建运行迷宫</title> 
 <script type="text/javascript"
    
                                
    • 
                                
  • 10步教你上传githib数据
                                    张亚雄
git
                                    
    官方的教学还有其他博客里教的都是给懂的人说得，对已我们这样对我大菜鸟只能这么来锻炼，下面先不玩什么深奥的，先暂时用着10步干净利索。等玩顺溜了再用其他的方法。 
操作过程（查看本目录下有哪些文件NO.1）ls 
（跳转到子目录NO.2）cd+空格+目录 
（继续NO.3）ls 
（匹配到子目录NO.4）cd+ 目录首写字母+tab键+（首写字母“直到你所用文件根就不再按TAB键了”） 
（查看文件
    
                                
    • 
                                
  • MongoDB常用操作命令大全
                                    adminjun
mongodb操作命令
                                    
    成功启动MongoDB后，再打开一个命令行窗口输入mongo，就可以进行数据库的一些操作。输入help可以看到基本操作命令，只是MongoDB没有创建数据库的命令，但有类似的命令   如：如果你想创建一个“myTest”的数据库，先运行use myTest命令，之后就做一些操作（如：db.createCollection('user')）,这样就可以创建一个名叫“myTest”的数据库。   
一
    
                                
    • 
                                
  • bat调用jar包并传入多个参数
                                    aijuans

                                    
    下面的主程序是通过eclipse写的： 
1.在Main函数接收bat文件传递的参数（String[] args） 
 如：   String ip =args[0];          String user=args[1];       &nbs
    
                                
    • 
                                
  • Java中对类的主动引用和被动引用
                                    ayaoxinchao
java主动引用对类的引用被动引用类初始化
                                    
      
在Java代码中，有些类看上去初始化了，但其实没有。例如定义一定长度某一类型的数组，看上去数组中所有的元素已经被初始化，实际上一个都没有。对于类的初始化，虚拟机规范严格规定了只有对该类进行主动引用时，才会触发。而除此之外的所有引用方式称之为对类的被动引用，不会触发类的初始化。虚拟机规范严格地规定了有且仅有四种情况是对类的主动引用，即必须立即对类进行初始化。四种情况如下：1.遇到ne
    
                                
    • 
                                
  • 导出数据库 提示 outfile disabled
                                    BigBird2012
mysql
                                    
    在windows控制台下，登陆mysql，备份数据库： 
  
mysql>mysqldump -u root -p test test > D:\test.sql 
使用命令 mysqldump 格式如下： mysqldump -u root -p *** DBNAME > E:\\test.sql。 
注意：执行该命令的时候不要进入mysql的控制台再使用，这样会报
    
                                
    • 
                                
  • Javascript 中的 && 和 ||
                                    bijian1013
JavaScript&&||
                                    
            准备两个对象用于下面的讨论 
var alice = {
    name: "alice",
    toString: function () {
        return this.name;
    }
}
var smith = {
    name: "smith",
 
    
                                
    • 
                                
  • [Zookeeper学习笔记之四]Zookeeper Client Library会话重建
                                    bit1129
zookeeper
                                    
    为了说明问题，先来看个简单的示例代码： 
  
package com.tom.zookeeper.book;

import com.tom.Host;
import org.apache.zookeeper.WatchedEvent;
import org.apache.zookeeper.ZooKeeper;
import org.apache.zookeeper.Wat
    
                                
    • 
                                
  • 【Scala十一】Scala核心五：case模式匹配
                                    bit1129
scala
                                    
    package spark.examples.scala.grammars.caseclasses

object CaseClass_Test00 {

  def simpleMatch(arg: Any) = arg match {
    case v: Int => "This is an Int"
    case v: (Int, String)
    
                                
    • 
                                
  • 运维的一些面试题
                                    yuxianhua
linux
                                    
    1、Linux挂载Winodws共享文件夹 
  
mount -t cifs //1.1.1.254/ok /var/tmp/share/ -o username=administrator,password=yourpass
或
mount -t cifs -o username=xxx,password=xxxx //1.1.1.1/a /win 
  
 
    
                                
    • 
                                
  • Java lang包-Boolean
                                    BrokenDreams
boolean
                                    
             Boolean类是Java中基本类型boolean的包装类。这个类比较简单，直接看源代码吧。 
 

public final class Boolean implements java.io.Serializable,
                                      
    
                                
    • 
                                
  • 读《研磨设计模式》-代码笔记-命令模式-Command
                                    bylijinnan
java设计模式
                                    
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ 
 
 


import java.util.ArrayList;
import java.util.Collection;
import java.util.List;

/**
 * GOF 在《设计模式》一书中阐述命令模式的意图：“将一个请求封装
    
                                
    • 
                                
  • matlab下GPU编程笔记
                                    cherishLC
matlab
                                    
    不多说，直接上代码 
 
gpuDevice   %   查看系统中的gpu,,其中的DeviceSupported会给出matlab支持的GPU个数。
g=gpuDevice(1);    %会清空 GPU 1中的所有数据,,将GPU1 设为当前GPU
reset(g)  %也可以清空GPU中数据。

a=1;
a=gpuArray(a);    %将a从CPU移到GPU中
onGP
    
                                
    • 
                                
  • SVN安装过程
                                    crabdave
SVN
                                    
    SVN安装过程 
  
subversion-1.6.12 
  
./configure --prefix=/usr/local/subversion --with-apxs=/usr/local/apache2/bin/apxs --with-apr=/usr/local/apr --with-apr-util=/usr/local/apr --with-openssl=/
    
                                
    • 
                                
  • sql　行列转换
                                    daizj
sql行列转换行转列列转行
                                    
    行转列的思想是通过case when 来实现 
列转行的思想是通过union all 来实现 
 
下面具体例子： 
 
假设有张学生成绩表(tb)如下: 
Name Subject Result 
张三 语文　　74 
张三 数学　　83 
张三 物理　　93 
李四 语文　　74 
李四 数学　　84 
李四 物理　　94 
*/ 
/* 
想变成 
姓名   &
    
                                
    • 
                                
  • MySQL--主从配置
                                    dcj3sjt126com
mysql
                                    
       linux下的mysql主从配置：   说明：由于MySQL不同版本之间的(二进制日志)binlog格式可能会不一样，因此最好的搭配组合是Master的MySQL版本和Slave的版本相同或者更低，   Master的版本肯定不能高于Slave版本。（版本向下兼容）   
   mysql1  : 192.168.100.1    //master   mysq
    
                                
    • 
                                
  • 关于yii 数据库添加新字段之后model类的修改
                                    dcj3sjt126com
Model
                                    
    rules: 
array('新字段','safe','on'=>'search') 
1、array('新字段', 'safe')//这个如果是要用户输入的话，要加一下， 
2、array('新字段', 'numerical'),//如果是数字的话 
3、array('新字段', 'length', 'max'=>100),//如果是文本 
1、2、3适当的最少要加一条，新字段才会被
    
                                
    • 
                                
  • sublime text3 中文乱码解决
                                    dyy_gusi
Sublime Text
                                    
    sublime text3中文乱码解决 
原因：缺少转换为UTF-8的插件 
目的：安装ConvertToUTF8插件包 
第一步：安装能自动安装插件的插件，百度“Codecs33”，然后按照步骤可以得到以下一段代码： 
import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a30980927
    
                                
    • 
                                
  • 概念了解：CGI，FastCGI，PHP-CGI与PHP-FPM
                                    geeksun
PHP
                                    
    CGI 
CGI全称是“公共网关接口”(Common Gateway Interface)，HTTP服务器与你的或其它机器上的程序进行“交谈”的一种工具，其程序须运行在网络服务器上。 
CGI可以用任何一种语言编写，只要这种语言具有标准输入、输出和环境变量。如php,perl,tcl等。 FastCGI 
FastCGI像是一个常驻(long-live)型的CGI，它可以一直执行着，只要激活后，不
    
                                
    • 
                                
  • Git push 报错 "error: failed to push some refs to " 解决
                                    hongtoushizi
git
                                    
    Git push 报错 "error: failed to push some refs to " . 
此问题出现的原因是：由于远程仓库中代码版本与本地不一致冲突导致的。 
由于我在第一次git pull --rebase 代码后，准备push的时候，有别人往线上又提交了代码。所以出现此问题。 
解决方案： 
1： git pull    
2：
    
                                
    • 
                                
  • 第四章 Lua模块开发
                                    jinnianshilongnian
nginxlua
                                    
    在实际开发中，不可能把所有代码写到一个大而全的lua文件中，需要进行分模块开发；而且模块化是高性能Lua应用的关键。使用require第一次导入模块后，所有Nginx 进程全局共享模块的数据和代码，每个Worker进程需要时会得到此模块的一个副本（Copy-On-Write），即模块可以认为是每Worker进程共享而不是每Nginx Server共享；另外注意之前我们使用init_by_lua中初
    
                                
    • 
                                
  • java.lang.reflect.Proxy
                                    liyonghui160com

                                    
      
1.简介 
  
Proxy 提供用于创建动态代理类和实例的静态方法 
（1）动态代理类的属性 
 
 代理类是公共的、最终的，而不是抽象的 
 未指定代理类的非限定名称。但是，以字符串 "$Proxy" 开头的类名空间应该为代理类保留 
 代理类扩展 java.lang.reflect.Proxy  
 代理类会按同一顺序准确地实现其创建时指定的接口
    
                                
    • 
                                
  • Java中getResourceAsStream的用法
                                    pda158
java
                                    
    1.Java中的getResourceAsStream有以下几种： 1. Class.getResourceAsStream(String path) ： path 不以’/'开头时默认是从此类所在的包下取资源，以’/'开头则是从ClassPath根下获取。其只是通过path构造一个绝对路径，最终还是由ClassLoader获取资源。   　　2. Class.getClassLoader.get
    
                                
    • 
                                
  • spring 包官方下载地址（非maven）
                                    sinnk
spring
                                    
    SPRING官方网站改版后，建议都是通过 Maven和Gradle下载，对不使用Maven和Gradle开发项目的，下载就非常麻烦，下给出Spring Framework jar官方直接下载路径: 
  
 http://repo.springsource.org/libs-release-local/org/springframework/spring/ 
  
s
    
                                
    • 
                                
  • Oracle学习笔记(7) 开发PLSQL子程序和包
                                    vipbooks
oraclesql编程
                                    
        哈哈，清明节放假回去了一下，真是太好了，回家的感觉真好啊！现在又开始出差之旅了，又好久没有来了，今天继续Oracle的学习！ 
     这是第七章的学习笔记，学习完第六章的动态SQL之后，开始要学习子程序和包的使用了……，希望大家能多给俺一些支持啊！ 
    编程时使用的工具是PLSQL
    
                                
    •