찾다
웹 프론트엔드JS 튜토리얼각도 회로도란 무엇입니까? 구축하는 방법? (상해)

Angular 회로도란 무엇인가요? Angular Schematics를 로컬로 개발하는 방법은 무엇입니까? 다음 기사에서는 자세한 소개를 제공하고 예제를 사용하여 더 잘 익숙해질 수 있기를 바랍니다.

각도 회로도란 무엇입니까? 구축하는 방법? (상해)

Angular Schematics란 무엇인가요?

Angular Schematics는 템플릿 기반의 Angular 전용 코드 생성기입니다. 물론 코드를 생성할 뿐만 아니라 Angular CLI를 기반으로 자체 자동화를 구현할 수도 있습니다. [관련 튜토리얼 추천: "angular tutorial"]

저는 Angular 프로젝트를 개발할 때 모든 사람들이 ng 생성 컴포넌트 컴포넌트 이름, ng @angular/materials 추가를 사용했다고 믿습니다. code>, ng generate module module-name, 이것들은 Angular에서 우리를 위해 구현된 일부 CLI인데, 우리 프로젝트에서 우리 자신의 프로젝트를 기반으로 CLI를 어떻게 구현해야 할까요? 이 글은 ng-devui-adminng generate component component-name, ng add @angular/materials, ng generate module module-name,这些都是 Angular 中已经为我们实现的一些 CLI,那么我们应该如何在自己的项目中去实现基于自己项目的 CLI 呢?本文将会基于我们在 ng-devui-admin 中的实践来进行介绍。欢迎大家持续的关注,后续我们将会推出更加丰富的 CLI 帮助大家更快搭建一个 Admin 页面。

如何在本地开发你的 Angular Schematics

在本地开发你需要先安装 schematics 脚手架

npm install -g @angular-devkit/schematics-cli

# 安装完成之后新建一个schematics项目
schematics blank --name=your-schematics

新建项目之后你会看到如下目录结构,代表你已经成功创建一个 shematics 项目。

각도 회로도란 무엇입니까? 구축하는 방법? (상해)

重要文件介绍

  • tsconfig.json: 主要与项目打包编译相关,在这不做具体介绍

  • collection.json:与你的 CLI 命令相关,用于定义你的相关命令

{
  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
  "schematics": {
    "first-schematics": {
      "description": "A blank schematic.",
      "factory": "./first-schematics/index#firstSchematics"
    }
  }
}

first-schematics: 命令的名字,可以在项目中通过 ng g first-schematics:first-schematics 来运行该命令。description: 对该条命令的描述。factory에서의 관행을 바탕으로 소개됩니다. 앞으로도 여러분의 지속적인 관심을 환영합니다. 관리 페이지를 더욱 빠르게 구축할 수 있도록 더욱 풍부한 CLI를 출시하겠습니다. schema,我们将在后面进行讲解。

  • index.ts:在该文件中实现你命令的相关逻辑
import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';

export function firstSchematics(_options: any): Rule {
  return (tree: Tree, _context: SchematicContext) => {
    return tree;
  };
}

在这里我们先看几个需要了解的参数:tree:在这里你可以将 tree 理解为我们整个的 angular 项目,你可以通过 tree 新增文件,修改文件,以及删除文件。_context:该参数为 schematics 运行的上下文,比如你可以通过 context 执行 npm installRule:为我们制定的操作逻辑。

实现一个 ng-add 指令

现在我们通过实现一个 ng-add 指令来更好的熟悉。

同样是基于以上我们已经创建好的项目。

新建命令相关的文件

首先我们在 src 目录下新建一个目录 ng-add,然后在该目录下添加三个文件 index.ts, schema.json, schema.ts,之后你的目录结构应该如下:

각도 회로도란 무엇입니까? 구축하는 방법? (상해)

配置 <span style="font-size: 18px;">collection.json</span>

之后我们在 collection.json 中配置该条命令:

{
  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
  "schematics": {
    ...,
    "ng-add": {
      "factory": "./ng-add/index",
      "description": "Some description about your schematics",
      "schema": "./ng-add/schema.json"
    }
  }
}

<span style="font-size: 18px;">files</span> 目录中加入我们想要插入的文件

关于 template 的语法可以参考 ejs 语法

app.component.html.template

<div class="my-app">
  <% if (defaultLanguage === &#39;zh-cn&#39;) { %>你好,Angular Schematics!<% } else { %>Hello, My First Angular Schematics!<% } %>
  <h1 id="nbsp-title-nbsp">{{ title }}</h1>
</div>

app.component.scss.template

.app {
  display: flex;
  justify-content: center;
  align-item: center;
}

app.component.ts.template

import { Component } from &#39;@angular/core&#39;;

@Component({
  selector: &#39;app-root&#39;,
  templateUrl: &#39;./app.component.html&#39;,
  styleUrls: [&#39;./app.component.scss&#39;]
})
export class AppComponent {
  title = <% if (defaultLanguage === &#39;zh-cn&#39;) { %>&#39;你好&#39;<% } else { %>&#39;Hello&#39;<% } %>;
}

开始实现命令逻辑

  • schema.json:在该文件中定义与用户的交互
{
  "$schema": "http://json-schema.org/schema",
  "id": "SchematicsDevUI",
  "title": "DevUI Options Schema",
  "type": "object",
  "properties": {
    "defaultLanguage": {
      "type": "string",
      "description": "Choose the default language",
      "default": "zh-cn",
      "x-prompt": {
        "message": "Please choose the default language you want to use: ",
        "type": "list",
        "items": [
          {
            "value": "zh-cn",
            "label": "简体中文 (zh-ch)"
          },
          {
            "value": "en-us",
            "label": "English (en-us)"
          }
        ]
      }
    },
    "i18n": {
      "type": "boolean",
      "default": true,
      "description": "Config i18n for the project",
      "x-prompt": "Would you like to add i18n? (default: Y)"
    }
  },
  "required": []
}

在以上的定义中,我们的命令将会接收两个参数分别为 defaultLanguagei18n,我们以 defaultLanguage

로컬에서 Angular Schematics를 개발하는 방법🎜🎜로컬에서 개발하려면 먼저 schematics 스캐폴딩을 설치해야 합니다🎜
{
  "defaultLanguage": {
    "type": "string",
    "description": "Choose the default language",
    "default": "zh-cn",
    "x-prompt": {
      "message": "Please choose the default language you want to use: ",
      "type": "list",
      "items": [
        {
          "value": "zh-cn",
          "label": "简体中文 (zh-ch)"
        },
        {
          "value": "en-us",
          "label": "English (en-us)"
        }
      ]
    }
  }
}
🎜새 프로젝트를 생성한 후 다음 디렉터리 구조를 볼 수 있습니다. shematics 프로젝트를 성공적으로 생성했습니다. 🎜🎜각도 회로도란 무엇입니까? 구축하는 방법? (상해)🎜🎜중요 파일 소개🎜
  • 🎜tsconfig.json: 주로 프로젝트 패키징 및 컴파일과 관련되어 있으며 자세한 소개는 여기에 없습니다🎜
  • 🎜collection.json: 관련 명령을 정의하는 데 사용되는 CLI 명령과 관련됨🎜
export interface Schema {
  defaultLanguage: string;
  i18n: boolean;
}
🎜first-schematics: 프로젝트에 전달할 수 있는 명령의 이름 ng first-schematics:first-schematics 명령을 실행합니다. 설명: 이 명령에 대한 설명입니다. factory: 명령 실행을 위한 입력 함수 일반적으로 나중에 설명할 또 다른 속성인 schema가 있습니다. 🎜
  • index.ts: 이 파일에서 명령의 관련 논리를 구현합니다.
import {
  apply,
  applyTemplates,
  chain,
  mergeWith,
  move,
  Rule,
  SchematicContext,
  SchematicsException,
  Tree,
  url
} from &#39;@angular-devkit/schematics&#39;;
import { NodePackageInstallTask } from &#39;@angular-devkit/schematics/tasks&#39;;
import { Schema as AddOptions } from &#39;./schema&#39;;

let projectWorkspace: {
  root: string;
  sourceRoot: string;
  defaultProject: string;
};

export type packgeType = &#39;dependencies&#39; | &#39;devDependencies&#39; | &#39;scripts&#39;;
export const PACKAGES_I18N = [
  &#39;@devui-design/icons@^1.2.0&#39;,
  &#39;@ngx-translate/core@^13.0.0&#39;,
  &#39;@ngx-translate/http-loader@^6.0.0&#39;,
  &#39;ng-devui@^11.1.0&#39;
];
export const PACKAGES = [&#39;@devui-design/icons@^1.2.0&#39;, &#39;ng-devui@^11.1.0&#39;];
export const PACKAGE_JSON_PATH = &#39;package.json&#39;;
export const ANGULAR_JSON_PATH = &#39;angular.json&#39;;

export default function (options: AddOptions): Rule {
  return (tree: Tree, context: SchematicContext) => {
    // 获取项目空间中我们需要的相关变量
    getWorkSpace(tree);

    // 根据是否选择i18n插入不同的packages
    const packages = options.i18n ? PACKAGES_I18N : PACKAGES;
    addPackage(tree, packages, &#39;dependencies&#39;);

    // 执行 npm install
    context.addTask(new NodePackageInstallTask());

    // 自定义的一系列 Rules
    return chain([removeOriginalFiles(), addSourceFiles(options)]);
  };
}
🎜여기서 먼저 필요한 몇 가지 매개변수를 살펴보겠습니다. 이해: tree: 여기서는 tree를 전체 각도 프로젝트로 이해할 수 있습니다. 트리를 통해 파일을 추가하고, 파일을 수정하고, 삭제할 수 있습니다. _context: 이 매개변수는 schematics가 실행되는 컨텍스트입니다. 예를 들어 context를 통해 npm install을 실행할 수 있습니다. . 규칙: 우리를 위해 공식화 된 작업 논리입니다. 🎜🎜ng-add 지시문 구현🎜🎜이제 ng-add 지시문을 구현하여 이에 더 익숙해질 것입니다. 🎜🎜또한 위에서 만든 프로젝트를 기반으로 합니다. 🎜🎜새 명령 관련 파일 만들기🎜🎜먼저 src 아래에 새 디렉터리를 만듭니다. 디렉터리ng-add를 선택한 다음 index.ts, schema.json, schema.ts 세 파일을 추가합니다. 이 디렉토리 >인 경우 디렉토리 구조는 다음과 같아야 합니다: 🎜🎜각도 회로도란 무엇입니까? 구축하는 방법? (상해)🎜🎜구성<span style="font-size: 18px;">컬렉션 .json</span>🎜🎜그런 다음 collection.json에서 다음 명령을 구성합니다. 🎜
// getWorkSpace
function getWorkSpace(tree: Tree) {
  let angularJSON;
  let buffer = tree.read(ANGULAR_JSON_PATH);
  if (buffer) {
    angularJSON = JSON.parse(buffer.toString());
  } else {
    throw new SchematicsException(
      &#39;Please make sure the project is an Angular project.&#39;
    );
  }

  let defaultProject = angularJSON.defaultProject;
  projectWorkspace = {
    root: &#39;/&#39;,
    sourceRoot: angularJSON.projects[defaultProject].sourceRoot,
    defaultProject
  };

  return projectWorkspace;
}
🎜<span style="font-size: 18px;">파일</span> 삽입된 파일🎜🎜 템플릿 구문은 ejs 구문🎜🎜🎜app.comComponent.html.template🎜
// removeOriginalFiles
// 根据自己的需要选择需要删除的文件
function removeOriginalFiles() {
  return (tree: Tree) => {
    [
      `${projectWorkspace.sourceRoot}/app/app.component.ts`,
      `${projectWorkspace.sourceRoot}/app/app.component.html`,
      `${projectWorkspace.sourceRoot}/app/app.component.scss`,
      `${projectWorkspace.sourceRoot}/app/app.component.css`
    ]
      .filter((f) => tree.exists(f))
      .forEach((f) => tree.delete(f));
  };
}
🎜app.comComponent.scss.template🎜
// addSourceFiles
function addSourceFiles(options: AddOptions): Rule {
  return chain([
    mergeWith(
      apply(url(&#39;./files&#39;), [
        applyTemplates({
          defaultLanguage: options.defaultLanguage
        }),
        move(`${projectWorkspace.sourceRoot}/app`)
      ])
    )
  ]);
}
🎜app.comComponent. ts.template🎜<pre class='brush:php;toolbar:false;'>// readJson function readJson(tree: Tree, file: string, type?: string): any { if (!tree.exists(file)) { return null; } const sourceFile = tree.read(file)!.toString(&amp;#39;utf-8&amp;#39;); try { const json = JSON.parse(sourceFile); if (type &amp;&amp; !json[type]) { json[type] = {}; } return json; } catch (error) { console.log(`Failed when parsing file ${file}.`); throw error; } } // writeJson export function writeJson(tree: Tree, file: string, source: any): void { tree.overwrite(file, JSON.stringify(source, null, 2)); } // readPackageJson function readPackageJson(tree: Tree, type?: string): any { return readJson(tree, PACKAGE_JSON_PATH, type); } // writePackageJson function writePackageJson(tree: Tree, json: any): any { return writeJson(tree, PACKAGE_JSON_PATH, json); } // addPackage function addPackage( tree: Tree, packages: string | string[], type: packgeType = &amp;#39;dependencies&amp;#39; ): Tree { const packageJson = readPackageJson(tree, type); if (packageJson == null) { return tree; } if (!Array.isArray(packages)) { packages = [packages]; } packages.forEach((pck) =&gt; { const splitPosition = pck.lastIndexOf(&amp;#39;@&amp;#39;); packageJson[type][pck.substr(0, splitPosition)] = pck.substr( splitPosition + 1 ); }); writePackageJson(tree, packageJson); return tree; }</pre>🎜<strong><span style="font-size: 18px;">명령 로직 구현 시작</span></strong>🎜<ul><li> <code>스키마. json: 이 파일에서 사용자와의 상호 작용을 정의합니다.rrreee🎜위 정의에서 명령은 두 개의 매개변수인 defaultLanguage, i18n을 받습니다. 에서는 매개변수의 관련 구성을 설명하기 위해 defaultLanguage를 예로 사용합니다. 🎜
{
  "defaultLanguage": {
    "type": "string",
    "description": "Choose the default language",
    "default": "zh-cn",
    "x-prompt": {
      "message": "Please choose the default language you want to use: ",
      "type": "list",
      "items": [
        {
          "value": "zh-cn",
          "label": "简体中文 (zh-ch)"
        },
        {
          "value": "en-us",
          "label": "English (en-us)"
        }
      ]
    }
  }
}

type 代表该参数的类型是 stringdefault 为该参数的默认值为 zh-cnx-prompt 定义与用户的交互,message 为我们对用户进行的相关提问,在这里我们的 typelist 代表我们会为用户提供 items 中列出的选项供用户进行选择。

  • schema.ts:在该文件中定义我们接收到的参数类型
export interface Schema {
  defaultLanguage: string;
  i18n: boolean;
}
  • index.ts:在该文件中实现我们的操作逻辑,假设在此次 ng-add 操作中,我们根据用户输入的 defaultLanguage, i18n 来对用户的项目进行相应的更改,并且插入相关的 npm 包,再进行安装。
import {
  apply,
  applyTemplates,
  chain,
  mergeWith,
  move,
  Rule,
  SchematicContext,
  SchematicsException,
  Tree,
  url
} from &#39;@angular-devkit/schematics&#39;;
import { NodePackageInstallTask } from &#39;@angular-devkit/schematics/tasks&#39;;
import { Schema as AddOptions } from &#39;./schema&#39;;

let projectWorkspace: {
  root: string;
  sourceRoot: string;
  defaultProject: string;
};

export type packgeType = &#39;dependencies&#39; | &#39;devDependencies&#39; | &#39;scripts&#39;;
export const PACKAGES_I18N = [
  &#39;@devui-design/icons@^1.2.0&#39;,
  &#39;@ngx-translate/core@^13.0.0&#39;,
  &#39;@ngx-translate/http-loader@^6.0.0&#39;,
  &#39;ng-devui@^11.1.0&#39;
];
export const PACKAGES = [&#39;@devui-design/icons@^1.2.0&#39;, &#39;ng-devui@^11.1.0&#39;];
export const PACKAGE_JSON_PATH = &#39;package.json&#39;;
export const ANGULAR_JSON_PATH = &#39;angular.json&#39;;

export default function (options: AddOptions): Rule {
  return (tree: Tree, context: SchematicContext) => {
    // 获取项目空间中我们需要的相关变量
    getWorkSpace(tree);

    // 根据是否选择i18n插入不同的packages
    const packages = options.i18n ? PACKAGES_I18N : PACKAGES;
    addPackage(tree, packages, &#39;dependencies&#39;);

    // 执行 npm install
    context.addTask(new NodePackageInstallTask());

    // 自定义的一系列 Rules
    return chain([removeOriginalFiles(), addSourceFiles(options)]);
  };
}

下面时使用到的函数的具体实现:

// getWorkSpace
function getWorkSpace(tree: Tree) {
  let angularJSON;
  let buffer = tree.read(ANGULAR_JSON_PATH);
  if (buffer) {
    angularJSON = JSON.parse(buffer.toString());
  } else {
    throw new SchematicsException(
      &#39;Please make sure the project is an Angular project.&#39;
    );
  }

  let defaultProject = angularJSON.defaultProject;
  projectWorkspace = {
    root: &#39;/&#39;,
    sourceRoot: angularJSON.projects[defaultProject].sourceRoot,
    defaultProject
  };

  return projectWorkspace;
}
// removeOriginalFiles
// 根据自己的需要选择需要删除的文件
function removeOriginalFiles() {
  return (tree: Tree) => {
    [
      `${projectWorkspace.sourceRoot}/app/app.component.ts`,
      `${projectWorkspace.sourceRoot}/app/app.component.html`,
      `${projectWorkspace.sourceRoot}/app/app.component.scss`,
      `${projectWorkspace.sourceRoot}/app/app.component.css`
    ]
      .filter((f) => tree.exists(f))
      .forEach((f) => tree.delete(f));
  };
}

将 files 下的文件拷贝到指定的路径下,关于 chain, mergeWith, apply, template 的详细使用方法可以参考 Schematics

// addSourceFiles
function addSourceFiles(options: AddOptions): Rule {
  return chain([
    mergeWith(
      apply(url(&#39;./files&#39;), [
        applyTemplates({
          defaultLanguage: options.defaultLanguage
        }),
        move(`${projectWorkspace.sourceRoot}/app`)
      ])
    )
  ]);
}
// readJson
function readJson(tree: Tree, file: string, type?: string): any {
  if (!tree.exists(file)) {
    return null;
  }

  const sourceFile = tree.read(file)!.toString(&#39;utf-8&#39;);
  try {
    const json = JSON.parse(sourceFile);
    if (type && !json[type]) {
      json[type] = {};
    }
    return json;
  } catch (error) {
    console.log(`Failed when parsing file ${file}.`);
    throw error;
  }
}

// writeJson
export function writeJson(tree: Tree, file: string, source: any): void {
  tree.overwrite(file, JSON.stringify(source, null, 2));
}

// readPackageJson
function readPackageJson(tree: Tree, type?: string): any {
  return readJson(tree, PACKAGE_JSON_PATH, type);
}

// writePackageJson
function writePackageJson(tree: Tree, json: any): any {
  return writeJson(tree, PACKAGE_JSON_PATH, json);
}

// addPackage
function addPackage(
  tree: Tree,
  packages: string | string[],
  type: packgeType = &#39;dependencies&#39;
): Tree {
  const packageJson = readPackageJson(tree, type);

  if (packageJson == null) {
    return tree;
  }

  if (!Array.isArray(packages)) {
    packages = [packages];
  }
  packages.forEach((pck) => {
    const splitPosition = pck.lastIndexOf(&#39;@&#39;);
    packageJson[type][pck.substr(0, splitPosition)] = pck.substr(
      splitPosition + 1
    );
  });

  writePackageJson(tree, packageJson);
  return tree;
}

为了保持 index.ts 文件的简洁,可以将相关操作的方法抽取到一个新的文件中进行引用。

测试 <span style="font-size: 18px;">ng-add</span>

至此我们已经完成了 ng-add 命令,现在我们对该命令进行测试:

  • ng new test 初始化一个 Angular 项目
  • cd test && mkdir libs 在项目中添加一个 libs 文件夹,将图中标蓝的文件拷贝到其中

각도 회로도란 무엇입니까? 구축하는 방법? (상해)

  • 之后在命令行中执行 npm link libs/
  • link 完成之后 cd libs && npm run build && cd ..
  • 现在执行 ng add first-schematics 之后会看到如下提示

각도 회로도란 무엇입니까? 구축하는 방법? (상해)

  • 最后我们通过 npm start 来查看执行的结果如下

각도 회로도란 무엇입니까? 구축하는 방법? (상해)

结语

综上简单介绍了一个 Schematics 的实现,更多的一些应用欢迎大家查看 ng-devui-admin 中的实现。

更多编程相关知识,请访问:编程学习!!

위 내용은 각도 회로도란 무엇입니까? 구축하는 방법? (상해)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
이 기사는 掘金社区에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
聊聊Angular中的元数据(Metadata)和装饰器(Decorator)聊聊Angular中的元数据(Metadata)和装饰器(Decorator)Feb 28, 2022 am 11:10 AM

本篇文章继续Angular的学习,带大家了解一下Angular中的元数据和装饰器,简单了解一下他们的用法,希望对大家有所帮助!

angular学习之详解状态管理器NgRxangular学习之详解状态管理器NgRxMay 25, 2022 am 11:01 AM

本篇文章带大家深入了解一下angular的状态管理器NgRx,介绍一下NgRx的使用方法,希望对大家有所帮助!

浅析angular中怎么使用monaco-editor浅析angular中怎么使用monaco-editorOct 17, 2022 pm 08:04 PM

angular中怎么使用monaco-editor?下面本篇文章记录下最近的一次业务中用到的 monaco-editor 在 angular 中的使用,希望对大家有所帮助!

项目过大怎么办?如何合理拆分Angular项目?项目过大怎么办?如何合理拆分Angular项目?Jul 26, 2022 pm 07:18 PM

Angular项目过大,怎么合理拆分它?下面本篇文章给大家介绍一下合理拆分Angular项目的方法,希望对大家有所帮助!

聊聊自定义angular-datetime-picker格式的方法聊聊自定义angular-datetime-picker格式的方法Sep 08, 2022 pm 08:29 PM

怎么自定义angular-datetime-picker格式?下面本篇文章聊聊自定义格式的方法,希望对大家有所帮助!

Angular + NG-ZORRO快速开发一个后台系统Angular + NG-ZORRO快速开发一个后台系统Apr 21, 2022 am 10:45 AM

本篇文章给大家分享一个Angular实战,了解一下angualr 结合 ng-zorro 如何快速开发一个后台系统,希望对大家有所帮助!

聊聊Angular Route中怎么提前获取数据聊聊Angular Route中怎么提前获取数据Jul 13, 2022 pm 08:00 PM

Angular Route中怎么提前获取数据?下面本篇文章给大家介绍一下从 Angular Route 中提前获取数据的方法,希望对大家有所帮助!

浅析Angular中的独立组件,看看怎么使用浅析Angular中的独立组件,看看怎么使用Jun 23, 2022 pm 03:49 PM

本篇文章带大家了解一下Angular中的独立组件,看看怎么在Angular中创建一个独立组件,怎么在独立组件中导入已有的模块,希望对大家有所帮助!

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

DVWA

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

PhpStorm 맥 버전

PhpStorm 맥 버전

최신(2018.2.1) 전문 PHP 통합 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

MinGW - Windows용 미니멀리스트 GNU

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

ZendStudio 13.5.1 맥

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경