Vue-01（Vue CLI创建项目以及文件配置说明）

已于 2025-05-26 23:40:38 修改
阅读量746 收藏 6
点赞数 14
分类专栏： VUE 文章标签： vue.js 前端 javascript
于 2025-05-26 23:38:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011290209/article/details/148241889
版权

了解 Vue CLI 及其功能

Vue CLI 是搭建、构建和管理 Vue.js 项目的标准工具。它通过提供一致的项目结构、处理复杂的构建配置以及通过插件提供一组丰富的功能来简化开发工作流程。了解 Vue CLI 对于任何 Vue.js 开发人员来说都至关重要，因为它可以显着提高生产力并确保遵循最佳实践。本课将全面概述 Vue CLI 及其功能，为你有效地创建和管理 Vue.js 项目做好准备。

Vue CLI 的核心概念

Vue CLI（命令行界面）不仅仅是一个项目生成器;它是一个完整的 Vue.js 应用程序开发生态系统。它抽象出 Webpack、Babel 和 PostCSS 等构建工具的复杂性，使开发人员能够专注于编写 Vue.js 代码。

项目初始化

Vue CLI 的主要功能是初始化新的 Vue.js 项目。它提供标准化的项目结构和配置，确保不同项目之间的一致性。

  • 基本示例： 当你运行 vue create my-project 时，Vue CLI 会提示你选择一个预设。“default” 预设提供了 Babel 和 ESLint 的基本设置。
  • 高级示例： 您还可以在项目创建过程中手动选择 Vue Router、Vuex、CSS 预处理器（Sass、Less、Stylus）、TypeScript 等功能。这使您可以根据自己的特定需求定制项目。

开发服务器

Vue CLI 包括一个具有热重载功能的内置开发服务器。这意味着，当您对代码进行更改时，浏览器会自动更新，而无需手动刷新。

  • 基本示例： 创建项目后，您可以通过运行 npm run serve 或 yarn serve 来启动开发服务器。这通常会在 http://localhost:8080 上启动服务器。
  • 高级示例： 您可以通过修改 vue.config.js 文件来自定义开发服务器的行为。例如，您可以更改端口、启用 HTTPS 或配置代理设置。

构建过程

Vue CLI 通过提供单个命令来编译用于生产的代码，从而简化了构建过程。它通过缩小代码、删除未使用的代码 （tree-shaking） 和生成优化的资产来优化您的代码。

  • 基本示例： 要构建用于生产的项目，您可以运行 npm run build 或 yarn build。这将创建一个包含优化文件的 dist 目录。
  • 高级示例： 您可以通过修改 vue.config.js 文件来自定义构建过程。例如，您可以配置代码切分、更改输出目录或添加自定义 Webpack 插件。

插件

Vue CLI 的插件系统允许您通过附加功能和集成来扩展其功能。插件可以添加对 TypeScript、CSS 预处理器、测试框架等的支持。

  • 基本示例： 要安装插件，你可以使用 vue add 命令。例如， vue add @vue/cli-plugin-eslint 将 ESLint 添加到您的项目中。
  • 高级示例： 您还可以创建自己的自定义插件来封装可重用的配置和逻辑。这样，您就可以在多个项目之间共享最佳实践并实施一致性。

Vue CLI 的主要特点

Vue CLI 提供了一系列功能，可以增强开发体验并提高项目的可维护性。

预设

预设是预配置的插件和设置集，可简化项目初始化。它们允许您快速创建具有通用配置的项目，而无需手动选择每个功能。

  • 基本示例：“default” 预设包括 Babel 和 ESLint，为现代 JavaScript 开发提供基本设置。
  • 高级示例： 您可以创建自己的自定义预设来封装您的首选配置并与您的团队共享。这确保了所有项目之间的一致性。

图形用户界面

Vue CLI 提供了一个图形用户界面 （GUI），允许你在不使用命令行的情况下管理项目、安装插件和配置设置。

  • 基本示例： 要打开 GUI，您可以在项目目录中运行 vue ui。
  • **高级示例：**GUI 允许您检查项目的依赖项、分析构建性能以及可视化项目的结构。

即时原型设计

Vue CLI 允许你快速构建 Vue.js 组件原型，而无需创建完整的项目。这对于试验新想法或测试不同的方法非常有用。

  • 基本示例： 你可以创建一个 .vue 文件并运行 vue serve MyComponent.vue 在浏览器中快速预览它。
  • 高级示例： 你也可以使用 vue build MyComponent.vue 来构建一个单文件组件，以便在其他项目中使用。

任务管理

Vue CLI 提供了一个任务管理系统，允许你定义和运行自定义任务。这对于自动执行常见开发任务（例如运行测试、检查代码或部署应用程序）非常有用。

  • 基本示例： 您可以使用 scripts 属性在 package.json 文件中定义自定义任务。例如，您可以使用 npm test 定义一个任务来运行单元测试。
  • 高级示例： 您可以使用 npm-run-all 等工具或并发运行多个任务，从而改进您的开发工作流程。

实际示例和演示

让我们来看看一些使用 Vue CLI 创建和管理 Vue.js 项目的实际示例。

创建新项目

  1. 安装 Vue CLI： 如果你还没有，请使用 npm install -g @vue/cli 或 yarn global add @vue/cli 全局安装 Vue CLI。
  2. 创建新项目： 运行 vue create my-new-project。
  3. 选择预设： 选择 “Manually select features” 选项。
  4. 选择功能： 选择 “Babel”、“Vue Router”、“Vuex”、“CSS Pre-processors”、“Linter / Formatter”。
  5. 选择 CSS 预处理器： 选择 “Sass/SCSS （with dart-sass）”。
  6. 选择 Linter / Formatter： 选择 “ESLint + Prettier”。
  7. 选择其他 lint 功能： 选择 “Lint on save（保存时发现 lint）”。
  8. 选择放置 Babel、ESLint 等配置的位置： 选择 “In dedicated config files”。
  9. 为将来的项目保存预设？： 选择 “No”。
  10. 导航到 Project Directory：cd my-new-project。
  11. 运行开发服务器：npm run serve 或 yarn serve。

添加插件

  1. 导航到您的项目目录：cd my-project。
  2. 添加 TypeScript 插件： 运行 vue add @vue/cli-plugin-typescript .
  3. 回答提示： Vue CLI 会问你一些关于如何配置 TypeScript 的问题。选择最适合您需求的选项。

自定义构建过程

  1. 创建 vue.config.js： 如果您还没有，请在项目的根目录中创建一个 vue.config.js 文件。
  2. 修改 vue.config.js 文件： 添加以下代码以自定义构建过程：
module.exports = {
  outputDir: 'dist', // Change the output directory
  assetsDir: 'static', // Change the assets directory
  filenameHashing: false, // Disable filename hashing
  devServer: {
    port: 8081, // Change the development server port
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // Proxy requests to a backend server
        changeOrigin: true,
        pathRewrite: {
          '^/api': '' // Remove the /api prefix from the URL
        }
      }
    }
  },
  configureWebpack: {
    // Add custom Webpack configuration
  }
};

使用 Vue CLI 设置新的 Vue 项目

设置一个新的 Vue 项目是任何 Vue.js 开发过程中至关重要的第一步。Vue CLI（命令行界面）简化了这一过程，提供了一种标准化且高效的方法来构建具有最佳实践的项目。本课将指导你完成使用 Vue CLI 设置新 Vue 项目的过程，探索可用于根据你的特定需求定制项目的各种选项和配置。我们将深入研究不同的项目预设、包管理器和基本插件，它们可以增强您的开发工作流程。

使用 Vue CLI 创建新项目

Vue CLI 使用单个命令简化了项目创建：vue create <project-name>。此命令将启动交互式提示，允许您选择预设或手动选择功能。

交互式项目创建

  1. 打开您的终端： 导航到要在其中创建项目的目录。

  2. 运行 creation 命令： 执行 vue create my-vue-project（将 my-vue-project 替换为你想要的项目名称）。

  3. **选择预设：**CLI 将为您提供几个选项：

    • 默认 （[Vue 3] babel， eslint）： 此选项提供了 Vue 3 的基本设置，用于转译的 Babel 和用于代码 linting 的 ESLint。
    • 默认 （[Vue 2] babel， eslint）： 与上述类似，但使用 Vue 2。由于你正在扩展自己的技能，因此建议专注于 Vue 3。
    • 手动选择特征： 这允许您通过选择 TypeScript、Router、Vuex、CSS Pre-processors、Linters 等特定功能来自定义您的项目。

手动特征选择

选择 “Manually select features” 可以对您的项目设置进行精细控制。让我们探索您可以选择的主要功能：

  • TypeScript 中： 添加了对静态类型的 TypeScript 支持，并改进了代码可维护性。
  • 路由器： 包括用于单页应用程序 （SPA） 导航的 Vue 路由器。
  • Vuex 的： 集成 Vuex 以进行集中式状态管理，非常适合大型应用程序。
  • CSS 预处理器： 允许使用 CSS 预处理器，如 Sass/SCSS、Less 或 Stylus。
  • Linter / 格式化程序： 配置 linter （ESLint、Prettier） 以强制执行代码样式和格式。
  • 单元测试： 使用 Jest 或 Mocha 设置单元测试环境。
  • E2E 测试： 使用 Cypress 或 Nightwatch 配置端到端测试。

示例：使用 TypeScript、Router 和 Vuex 创建项目

让我们使用 TypeScript、Vue Router 和 Vuex 创建一个名为 advanced-vue-app 的项目。

  1. 运行 vue create advanced-vue-app
  2. 选择 “Manually select features”
  3. 使用箭头键和空格键选择 “TypeScript”、“Router” 和 “Vuex”。如果您更喜欢使用 SCSS 或其他预处理器，您还可以选择“CSS 预处理器”。
  4. 选择 Vue 版本（建议使用 Vue 3）。
  5. 回答有关类样式组件语法、单独配置文件以及是否保存预设以备将来使用的后续提示。

Package Manager 选择

在项目创建过程中，Vue CLI 会要求你选择一个包管理器：

  • npm： Node.js 的默认包管理器。
  • yarn： npm 的更快替代品。
  • pnpm： 一个更高效的包管理器，可节省磁盘空间。

虽然 npm 被广泛使用，但 yarn 和 pnpm 提供了性能改进。考虑将 yarn 或 pnpm 用于具有许多依赖项的大型项目。

在 GUI 中创建项目

Vue CLI 还为项目管理提供了图形用户界面 （GUI）。要访问 GUI，请在终端中运行 vue ui。这将打开一个浏览器窗口，你可以在其中创建、管理和配置你的 Vue 项目。GUI 提供了一种可视化的方式来选择功能、安装插件和运行任务。

项目结构和关键文件

创建项目后，让我们检查一下基本的项目结构：

my-vue-project/
├── node_modules/          # 项目依赖包目录（由 npm/yarn 安装，存放所有依赖库）
├── public/                # 公共静态资源目录（不会被 Webpack 处理）
│   └── index.html         # 应用在浏览器中的入口 HTML 文件，Vue 会挂载到其中的 <div id="app">
├── src/                   # 源代码目录（所有开发相关代码都放这里）
│   ├── assets/            # 静态资源，如图片、字体等
│   ├── components/        # Vue 组件目录（可复用 UI 单元）
│   ├── router/            # Vue Router 配置目录（如果项目选择了路由功能）
│   │   └── index.ts       # 路由配置文件，定义页面路径与组件的对应关系
│   ├── store/             # Vuex 状态管理配置目录（如果项目使用了 Vuex）
│   │   └── index.ts       # Vuex 配置文件，定义全局状态和 mutations/actions
│   ├── App.vue            # 应用的根组件（所有子组件的容器）
│   └── main.ts            # 应用程序的入口文件，Vue 实例在这里被创建并挂载到 DOM 上
├── .gitignore             # Git 忽略配置文件（列出不应提交到版本库的文件或文件夹）
├── babel.config.js        # Babel 转译配置文件，用于将新语法转换为兼容旧浏览器的代码
├── package.json           # 项目的元数据文件，包括项目名称、依赖、脚本命令等
├── README.md              # 项目说明文档，常用于描述项目用途、安装方法、使用指南等
├── vue.config.js          #（可选）：此文件允许你自定义 Vue CLI 配置
└── tsconfig.json          # TypeScript 配置文件，定义 TS 编译规则（若项目启用了 TypeScript）

关键文件解释

  • package.json： 此文件包含基本的项目元数据，包括依赖项、脚本和项目名称。它是项目依赖项管理的核心。
  • src/main.ts： 这是应用程序的入口点。它初始化 Vue 实例并将其挂载到 DOM 上。
  • src/App.vue ： 这是应用程序的根组件。它通常包含应用程序的主要布局和结构。
  • public/index.html： 这是用作浏览器中应用程序入口点的主 HTML 文件。
  • vue.config.js： （可选）：此文件允许你自定义 Vue CLI 配置，例如修改 webpack 设置或添加自定义插件。
  • tsconfig.json（如果选择了 TypeScript）： 此文件为您的项目配置 TypeScript 编译器选项。
  • babel.config.js： 文件配置 Babel，用于将 JavaScript 代码转换为与旧浏览器兼容的版本。

了解 package.json

package.json 文件对于管理项目的依赖项和脚本至关重要。以下是其关键部分的细分：

  • name ： 项目的名称。
  • version ： 项目的当前版本。
  • dependencies: 生产依赖项及其版本的列表。
  • devDependencies ： 开发依赖项（例如，测试库、Linter）及其版本的列表。
  • scripts： 可以使用 npm run <script-name> 或 yarn <script-name> 执行的一组命令。常见脚本包括
    • serve（用于开发）
    • build（用于生产）
    • test：unit（用于运行测试）。
    • lint：运行代码 linting。

例：

{
  "name": "advanced-vue-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0",
    "vuex": "^4.0.0"
  },
  "devDependencies": {
    "@types/jest": "^24.0.19",
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-unit-jest": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "@vue/test-utils": "^2.0.0-0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
    "typescript": "~4.1.5"
  }
}

babel.config.js

babel.config.js 文件配置 Babel，用于将 JavaScript 代码转换为与旧浏览器兼容的版本。

  • presets：此部分指定要使用的 Babel 预设。预设是针对特定环境或语言功能配置 Babel 的插件集合。最常见的预设是 @vue/cli-plugin-babel/preset，它包括为 Vue 应用程序转译现代 JavaScript 代码所需的插件。

例：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

vue.config.js

vue.config.js 文件是 Vue CLI 的主要配置文件。它允许您自定义项目构建过程的各个方面。

  • publicPath：指定应用程序的基 URL。在将应用程序部署到 Web 服务器上的子目录时使用。
  • outputDir：指定将放置构建文件的目录。默认值为 dist。
  • assetsDir：指定放置静态资源的目录。默认值为 ''。
  • devServer：此部分配置开发服务器。您可以指定端口号、代理设置和热重载行为等选项。
  • configureWebpack：此选项允许您直接配置底层 webpack 配置。这对于高级自定义非常有用。
  • chainWebpack：此选项提供了一种更灵活的方式来使用可链接的 API 来修改 webpack 配置。
  • css：此部分配置 CSS 相关选项，例如 CSS 模块和预处理器。

例：

module.exports = {
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'static',
  devServer: {
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  },
  configureWebpack: {
    // Custom webpack configuration
  },
  chainWebpack: config => {
    // Modify webpack configuration using chainable API
  }
}

配置 vue.config.js

vue.config.js 文件提供了广泛的配置选项，可以根据您的特定需求定制您的 Vue CLI 项目。让我们探索一些常见的配置场景。

更改输出目录

默认情况下，Vue CLI 将构建的文件放在 dist 目录中。您可以使用 outputDir 选项更改此设置。

module.exports = {
  outputDir: 'build'
}

这会将构建的文件放在 build 目录而不是 dist 中。

设置代理

在开发过程中，您可能需要访问在不同域上运行的 API。您可以使用 devServer 部分中的 proxy 选项来设置代理。

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  }
}

这会将所有对 /api 的请求代理到 http://localhost:3000。changeOrigin 选项对于处理 CORS 问题非常重要。

修改 Webpack 配置

对于更高级的自定义，您可以使用 configureWebpack 或 chainWebpack 选项直接修改底层 webpack 配置。

  • configureWebpack：此选项允许您提供 webpack 配置对象或修改现有配置的函数。
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': '/src'
      }
    }
  }
}

这将创建一个指向 src 目录的别名 @，允许你使用 @/components/MyComponent.vue 导入模块。

  • chainWebpack：此选项提供了一种更灵活的方式来使用可链接的 API 来修改 webpack 配置。这对于修改配置的特定部分而不必覆盖整个对象非常有用。
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
        .loader('vue-loader')
        .tap(options => {
          // modify the options...
          return options
        })
  }
}

这个例子展示了如何修改传递给 vue-loader 的选项。

运行开发服务器

要启动开发服务器，请在终端中导航到您的项目目录并运行 npm run serve 或 yarn serve（取决于您选择的包管理器）。这将编译您的代码并启动本地开发服务器，通常为 http://localhost:8080。由于热重载，您对代码所做的任何更改都将自动反映在浏览器中。

自定义项目设置

Vue CLI 提供了多种方法来自定义初始功能选择之外的项目设置。

查看 CLI 插件

Vue CLI 插件是扩展 Vue CLI 功能的 npm 包。他们可以添加新命令、修改构建过程或提供其他功能。你可以使用 vue add <plugin-name> 命令来安装插件。

示例：为 Vuex 添加 Vue CLI 插件。

vue add vuex

此命令将安装 Vuex 插件并自动配置您的项目以使用 Vuex。

环境变量

Vue CLI 支持不同环境（例如，开发、生产）的环境变量。您可以在 .env 文件中定义环境变量。

  • .env：默认环境变量
  • .env.development：开发模式的环境变量
  • .env.production：生产模式的环境变量

环境变量可在您的代码中使用 process.env 访问。

例：

// .env.development
VUE_APP_API_URL=http://localhost:3000/api

<template>
  <div>
    API URL: {{ apiUrl }}
  </div>
</template>

<script>
export default {
  computed: {
    apiUrl() {
      return process.env.VUE_APP_API_URL;
    }
  }
};
</script>
万能密码：‘or 1=1-- 实战SQL注入，华为财经2024春招面试
04-02 1362
在面试前我整理归纳了一些面试学习资料，文中结合我的朋友同学面试美团滴滴这类大厂的资料及案例由于篇幅限制，文档的详解资料太全面，细节内容太多，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！大家看完有什么不懂的可以在下方留言讨论也可以关注。来粗略的介绍，每个小节点里面都有更细化的内容！**大家看完有什么不懂的可以在下方留言讨论也可以关注。
一篇学会SQL注入 | 详解SQL注入（基础向，基础到每个参数）
weixin_47075747的博客
06-14 1332
**括号里面的查询被称之为子查询，在执行顺序中子查询先执行，然后再执行外面的 select **2) 的值是确定性的，假随机。
SQL注入中的1=1
Away From Comfort Zone
12-15 1780
1<>1 的用处：用于只取结构不取数据的场合,例如： create table table_temp tablespace tbs_temp as select * from table_ori where 1<>1 建成一个与table_ori 结构相同的表table_temp，但是不要table_ori 里的数据。 （除了表结构，其它结构也同理)1=1用于动态SQL,例如:lv_str
SQL注入详解
最新发布
TXyyd1的博客
04-03 923
这使得查询条件恒真，可能返回所有用户信息。若页面正常返回大量数据而非报错，就可能存在 SQL 注入漏洞。时，最终 SQL 语句变为。
sql注入之or 1 = 1
m0_62851980的博客
08-20 5341
其中，以上语句的select,from,where是不区分大小写的，一般分行写select,from,where语句。select一般是查询结果要展示的字段，from后一般是要查询的表名，where是进行行数据筛选的条件。而sql注入中，username和passwd未知的情况下，我们可以通过注入来绕过后端的检测，比如。or进行运算，1=1恒成立为真，则全真。
or1=1脚本分析
weixin_30252709的博客
06-06 376
先用or 1=1和or 1=2来测试是否存在注入点，我们先来看正常页面的面貌。我们现在用or 1=1测试是否存在注入漏洞。返回的是另外一个页面，我们再来测试or 1=2。返回的是正常的页面，说明猜测正确的时候是错误，猜测错误的时候是正常，这就是真正的"假是真时真是假"，比lake2大哥哥的IP欺骗更经典 哦，呵呵。 我们来构造测试语句： vpro.asp?id=1 or exists(...
SQL万能密码：' or 1='1
热门推荐
friendan的专栏
08-15 6万+
select name,pass from tbAdmin where name='admin' and pass='123456' 输入用户名：' or 1='1 SQL变成下面这个样子： select name,pass from tbAdmin where name='' or 1='1' and pass='123456' 1='1' 永远为真，所以
asp中一段防SQL注入的通用脚本
10-30
if InStr(strItem, "select") >= 1 or InStr(strItem, "insert") >= 1 or InStr(strItem, "update") >= 1 or InStr(strItem, "delete") >= 1 or InStr(strItem, "exec") >= 1 or InStr(strItem, "declare") >= 1 ...
SQL注入详解.docx
07-11
### SQL注入详解 #### 一、SQL注入概述 SQL注入是一种常见的网络安全攻击方式，通过将恶意的SQL代码插入到应用程序的输入字段中，利用应用程序的安全漏洞执行非授权操作，如非法获取敏感数据、修改数据库中的数据...
Web脚本攻击：SQL注入与XSS详解
检测SQL注入的常见方法是构造特定的输入，如尝试使用'or'a'='a'（用于绕过认证检查），通过对比不同输入结果来判断是否存在注入可能。此外，攻击者还会试图识别数据库类型，因为不同数据库平台的函数和注入方式有所...
【安全加固】：ADAMS函数输入验证与防注入技术详解
[【安全加固】：ADAMS函数输入验证与防注入技术详解](https://ucc.alicdn.com/pic/developer-ecology/bd51aff2b28240c193a50acd967f16a1.jpg?x-oss-process=image/resize,h_500,m_lfit) # 摘要 本文系统性地探讨了...
SQL注入1之基本原理
weixin_56218159的博客
05-26 439
免责声明 本文章仅用于信息防御技术的交流和学习，请勿用于其他用途； 在未得到网站授权前提下，禁止对政府、事业单位、企业或其他单位网站及系统进行渗透测试；技术是把双刃剑，请遵纪守法，做一名合格的白帽子安全专家，为国家的网络安全事业做出贡献； SQL注入基本原理 SQL注入基础原理 1）SQL注入概念及产生原因 当web应用向后台数据库传递SQL语句进行数据库操作时，如果对用户输入的参数没有经过严格的过滤处理，那么攻击者就可以构造特殊的SQL语句，直接输入数据库引擎执行，获取或修改数据库中的数据。
mysql数据库注入1=1_Mysql注入（1）——整体大纲
weixin_39541121的博客
02-07 314
学习web安全也快3个月了，从一开始的小白到现在开始了解web渗透的整体流程和一些常见漏洞。现在想写一个整体的Mysql注入的文章，其目的为了复习sql注入的知识点，也想记录我学习的心酸的过程。整体大纲1.注入的产生(1)注入攻击的本质，是把用户输入的数据当做代码执行。这里有两个关键条件，第一个是用户能控制输入；第二个是原本程序要执行的代码，拼接了用户输入的数据。(2)程序在开发的时候没对用户的数...
四、注入（1）SQL注入原理分析
weixin_45540609的博客
04-14 423
一、本质 用户输入的数据当做代码执行 条件： 用户能控制输入 原本程序要执行的代码，拼接了用户输入的数据后执行 应用场景：任何和数据库交互的传参 二、分析 1、判断 （1）and and 1=1 正确 and 1=2 错误 有几率有SQL注入 （2）加减乘除符号 但输入id=2-1，返回id=1的页面的时候，类似，加减乘除运算生效，一定存在SQL注入漏洞 ps：url栏里内容经过url编码，会把空格编码成+，所以要输入+，则需要转编码为%2b，在站长工具URL编码中转换 （..
有关一些反黑(脚本注入)的经验
xiao_jun_0820的专栏
08-10 880
今天公司的网络被入侵了,貌似侵入者是韩国的..(域名看出来的),入侵者冒充了局域网里的一个IP.然后串改了网关,搞的我们每次请求服务期的时候,都先把请求发到入侵者电脑了,也就是被拦截拉...- -#,郁闷的很.我们是要访问服务期器,来签到和签退的啊...55555555555,现在访问服务期上的公司OA系统被拦截了(是怎么发现被拦截的呢?因为我们在IIS中把站点的端口改了之后,就不会被拦截了,
where 1 = 1 or 0 = 0
swrd
10-15 990
sql where 1 = 1 0 = 1 and the role of where 1 = 1; this condition is always True, in the case of variable number of query, 1 = 1 can be easily standardized statement. First, no where 1 = 1 i
初识SQL注入万能语句’or 1=1#
wwwwxiaobai的博客
04-29 1万+
sql注入什么的也是挺有意思的，初识了SQL注入的万能语句’or 1=1# 我们在编写登陆过程一般都是这样的： 输入用户名：”username" 输入密码：“password" 当语句编写如下时： 当我们输入相应正确的用户名和密码时，就可以登陆进去，错误的，时无法登陆的。但是这个验证机制可以通过SQL语句来构造一个特殊的”字符串“通过验证。 当我们在用户名处输入' or 1=1#,密码随便写，就可...
sql中1=1的and和or问题
weixin_34128839的博客
01-02 1096
SELECT * FROM mentor_teacher WHERE 1 = 1 AND status = ? limit 0, 10 sql语句中如果有1=1的问题， 那么，如果是and并且的关系那么久随便写了，没什么问题。 如果是or或者的关系，那么1=1，会出问题的，会把其他条件过滤掉。就是查找全部了 转载于:https://www.cnblogs.com/renjianjun/p...
老有人问，那就放一些常用的手工SQL注入的
无言的世界~~ 无心，无情，无爱，无缘，无义，无怨，无..........
03-10 653
' or 1='1 1′ and 1=1 –+ ‘or 1=1# 01："or "a"="a 02：')or('a'='a 03：or 1=1-- 04：'or 1=1-- 05：a'or' 1=1-- 06："or 1=1-- 07：'or'a'='a 08："or"="a'='a 09：'or''=' 10：'or'='or' 11：1 or '1'='1'=1 12：1 or '1'='1...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值