vue中使用图像编辑器tui-image-editor(一)

news2024/9/23 5:15:49

vue中使用图像编辑器tui-image-editor(一)

场景：需要对图片进行旋转、缩放、裁剪、涂鸦、标注、添加文本等。

效果-图1

在这里插入图片描述

1、基本介绍

官网：https://ui.toast.com/tui-image-editor

官方GitHub地址：https://github.com/nhn/tui.image-editor
Api及Examples地址：http://nhn.github.io/tui.image-editor/latest/
Demo地址：https://github.com/frontend-afei/tui-image-editor-demo
参考文章：https://juejin.cn/post/7027943745530101773#heading-0

2、安装

npm i tui-image-editor

yarn add tui-image-editor

3、基础使用版

效果图-基础使用版

在这里插入图片描述

代码

<template>
  <div class="drawing-container">
    <div id="tui-image-editor"></div>
  </div>
</template>
<script>
import "tui-image-editor/dist/tui-image-editor.css";
import "tui-color-picker/dist/tui-color-picker.css";
import ImageEditor from "tui-image-editor";
export default {
  data() {
    return {
      instance: null,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.instance = new ImageEditor(
        document.querySelector("#tui-image-editor"),
        {
          includeUI: {
            loadImage: {
              path: "https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1d7a1feb60346449c1a64893888989a~tplv-k3u1fbpfcp-watermark.image",
              name: "image",
            },
            initMenu: "draw", // 默认打开的菜单项
            menuBarPosition: "bottom", // 菜单所在的位置
          },
          cssMaxWidth: 800, // canvas 最大宽度
          cssMaxHeight: 400, // canvas 最大高度
        }
      );
      document.getElementsByClassName("tui-image-editor-main")[0].style.top = "45px"; // 图片距顶部工具栏的距离
    },
  },
};
</script>

<style lang="scss" scoped>
.drawing-container {
  height: 600px;
  width: 1100px;
}
</style>

4、详细参数版

4.1、国际化

由于是外国人开发的，默认的文字描述都是英文，这里我们先汉化一下：

const locale_zh = {
  ZoomIn: "放大",
  ZoomOut: "缩小",
  Hand: "手掌",
  History: '历史',
  Resize: '调整宽高',
  Crop: "裁剪",
  DeleteAll: "全部删除",
  Delete: "删除",
  Undo: "撤销",
  Redo: "反撤销",
  Reset: "重置",
  Flip: "镜像",
  Rotate: "旋转",
  Draw: "画",
  Shape: "形状标注",
  Icon: "图标标注",
  Text: "文字标注",
  Mask: "遮罩",
  Filter: "滤镜",
  Bold: "加粗",
  Italic: "斜体",
  Underline: "下划线",
  Left: "左对齐",
  Center: "居中",
  Right: "右对齐",
  Color: "颜色",
  "Text size": "字体大小",
  Custom: "自定义",
  Square: "正方形",
  Apply: "应用",
  Cancel: "取消",
  "Flip X": "X 轴",
  "Flip Y": "Y 轴",
  Range: "区间",
  Stroke: "描边",
  Fill: "填充",
  Circle: "圆",
  Triangle: "三角",
  Rectangle: "矩形",
  Free: "曲线",
  Straight: "直线",
  Arrow: "箭头",
  "Arrow-2": "箭头2",
  "Arrow-3": "箭头3",
  "Star-1": "星星1",
  "Star-2": "星星2",
  Polygon: "多边形",
  Location: "定位",
  Heart: "心形",
  Bubble: "气泡",
  "Custom icon": "自定义图标",
  "Load Mask Image": "加载蒙层图片",
  Grayscale: "灰度",
  Blur: "模糊",
  Sharpen: "锐化",
  Emboss: "浮雕",
  "Remove White": "除去白色",
  Distance: "距离",
  Brightness: "亮度",
  Noise: "噪音",
  "Color Filter": "彩色滤镜",
  Sepia: "棕色",
  Sepia2: "棕色2",
  Invert: "负片",
  Pixelate: "像素化",
  Threshold: "阈值",
  Tint: "色调",
  Multiply: "正片叠底",
  Blend: "混合色",
  Width: "宽度",
  Height: "高度",
  "Lock Aspect Ratio": "锁定宽高比例",
};

this.instance = new ImageEditor(
  document.querySelector("#tui-image-editor"),
  {
    includeUI: {
      loadImage: {
        path: "https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1d7a1feb60346449c1a64893888989a~tplv-k3u1fbpfcp-watermark.image",
        name: "image",
      },
      initMenu: "draw", // 默认打开的菜单项
      menuBarPosition: "bottom", // 菜单所在的位置
      locale: locale_zh, // 本地化语言为中文
    },
    cssMaxWidth: 1000, // canvas 最大宽度
    cssMaxHeight: 600, // canvas 最大高度
  }
);

效果见图1

4.2、自定义样式

默认风格为暗黑系，如果想改成白底，或者想改变按钮的大小、颜色等样式，可以使用自定义样式。

const customTheme = {
  "common.bi.image": "", // 左上角logo图片
  "common.bisize.width": "0px",
  "common.bisize.height": "0px",
  "common.backgroundImage": "none",
  "common.backgroundColor": "#f3f4f6",
  "common.border": "1px solid #333",

  // header
  "header.backgroundImage": "none",
  "header.backgroundColor": "#f3f4f6",
  "header.border": "0px",
  
  // load button
  "loadButton.backgroundColor": "#fff",
  "loadButton.border": "1px solid #ddd",
  "loadButton.color": "#222",
  "loadButton.fontFamily": "NotoSans, sans-serif",
  "loadButton.fontSize": "12px",
  "loadButton.display": "none", // 隐藏

  // download button
  "downloadButton.backgroundColor": "#fdba3b",
  "downloadButton.border": "1px solid #fdba3b",
  "downloadButton.color": "#fff",
  "downloadButton.fontFamily": "NotoSans, sans-serif",
  "downloadButton.fontSize": "12px",
  "downloadButton.display": "none", // 隐藏

  // icons default
  "menu.normalIcon.color": "#8a8a8a",
  "menu.activeIcon.color": "#555555",
  "menu.disabledIcon.color": "#ccc",
  "menu.hoverIcon.color": "#e9e9e9",
  "submenu.normalIcon.color": "#8a8a8a",
  "submenu.activeIcon.color": "#e9e9e9",

  "menu.iconSize.width": "24px",
  "menu.iconSize.height": "24px",
  "submenu.iconSize.width": "32px",
  "submenu.iconSize.height": "32px",

  // submenu primary color
  "submenu.backgroundColor": "#1e1e1e",
  "submenu.partition.color": "#858585",

  // submenu labels
  "submenu.normalLabel.color": "#858585",
  "submenu.normalLabel.fontWeight": "lighter",
  "submenu.activeLabel.color": "#fff",
  "submenu.activeLabel.fontWeight": "lighter",

  // checkbox style
  "checkbox.border": "1px solid #ccc",
  "checkbox.backgroundColor": "#fff",

  // rango style
  "range.pointer.color": "#fff",
  "range.bar.color": "#666",
  "range.subbar.color": "#d1d1d1",

  "range.disabledPointer.color": "#414141",
  "range.disabledBar.color": "#282828",
  "range.disabledSubbar.color": "#414141",

  "range.value.color": "#fff",
  "range.value.fontWeight": "lighter",
  "range.value.fontSize": "11px",
  "range.value.border": "1px solid #353535",
  "range.value.backgroundColor": "#151515",
  "range.title.color": "#fff",
  "range.title.fontWeight": "lighter",

  // colorpicker style
  "colorpicker.button.border": "1px solid #1e1e1e",
  "colorpicker.title.color": "#fff",
};

this.instance = new ImageEditor(
  document.querySelector("#tui-image-editor"),
  {
    includeUI: {
      loadImage: {
        path: "https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1d7a1feb60346449c1a64893888989a~tplv-k3u1fbpfcp-watermark.image",
        name: "image",
      },
      initMenu: "draw", // 默认打开的菜单项
      menuBarPosition: "bottom", // 菜单所在的位置
      locale: locale_zh, // 本地化语言为中文
      theme: customTheme, // 自定义样式
    },
    cssMaxWidth: 400, // canvas 最大宽度
    cssMaxHeight: 500, // canvas 最大高度
  }
);

效果见图1

4.3、按钮优化

通过自定义样式，我们看到右上角的 Load 和 Download 按钮已经被隐藏了，接下来我们再隐藏掉其他用不上的按钮（根据业务需要），并添加一个保存图片的按钮。

<template>
  <div class="drawing-container">
    <div id="tui-image-editor"></div>
    <el-button class="save" type="primary" size="small" @click="save">保存</el-button>
  </div>
</template>

<script>
export default {
  name: 'ImgTui',
  methods: {
      init() {
        this.instance = new ImageEditor(
          document.querySelector("#tui-image-editor"),
          {
            includeUI: {
              loadImage: {
                path: "https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1d7a1feb60346449c1a64893888989a~tplv-k3u1fbpfcp-watermark.image",
                name: "image",
              },
              menu: ["resize", "crop", "rotate", "draw", "shape", "icon", "text", "filter"], // 底部菜单按钮列表 隐藏镜像flip和遮罩mask
              initMenu: "draw", // 默认打开的菜单项
              menuBarPosition: "bottom", // 菜单所在的位置
              locale: locale_zh, // 本地化语言为中文
              theme: customTheme, // 自定义主题样式
            },
            cssMaxWidth: 1000, // canvas 最大宽度
            cssMaxHeight: 600, // canvas 最大高度
          }
        );
        document.getElementsByClassName("tui-image-editor-main")[0].style.top ="45px"; // 调整图片显示位置
        document.getElementsByClassName("tie-btn-reset tui-image-editor-item help") [0].style.display = "none";  // 隐藏顶部重置按钮
      },
      // 保存图片，并上传
      save() {
        const base64String = this.instance.toDataURL(); // base64 文件
        const data = window.atob(base64String.split(",")[1]);
        const ia = new Uint8Array(data.length);
        for (let i = 0; i < data.length; i++) {
          ia[i] = data.charCodeAt(i);
        }
        const blob = new Blob([ia], { type: "image/png" }); // blob 文件
        const form = new FormData();
        form.append("image", blob);
        // upload file
      },
    }
}
 </script>                                   
<style lang="scss" scoped>
.drawing-container {
  height: 900px;
  position: relative;
  .save {
    position: absolute;
    right: 50px;
    top: 15px;
  }
}
</style>

可以看到顶部的重置按钮，以及底部的镜像和遮罩按钮都已经不见了。右上角多了一个我们自己的保存按钮，点击按钮，可以获取到 base64 文件和 blob 文件。

4.4、完整代码

index.vue

<template>
  <div class="drawing-container">
      <!-- 绘图组件容器DOM -->
    <div id="tui-image-editor"></div>
    <el-button class="save" type="primary" size="small" @click="save">保存</el-button>
  </div>
</template>
<script>
import 'tui-image-editor/dist/tui-image-editor.css'
import 'tui-color-picker/dist/tui-color-picker.css'
import ImageEditor from 'tui-image-editor'
// 中文菜单
const locale_zh = {
  ZoomIn: '放大',
  ZoomOut: '缩小',
  Hand: '手掌',
  History: '历史',
  Resize: '调整宽高',
  Crop: '裁剪',
  DeleteAll: '全部删除',
  Delete: '删除',
  Undo: '撤销',
  Redo: '反撤销',
  Reset: '重置',
  Flip: '镜像',
  Rotate: '旋转',
  Draw: '画',
  Shape: '形状标注',
  Icon: '图标标注',
  Text: '文字标注',
  Mask: '遮罩',
  Filter: '滤镜',
  Bold: '加粗',
  Italic: '斜体',
  Underline: '下划线',
  Left: '左对齐',
  Center: '居中',
  Right: '右对齐',
  Color: '颜色',
  'Text size': '字体大小',
  Custom: '自定义',
  Square: '正方形',
  Apply: '应用',
  Cancel: '取消',
  'Flip X': 'X 轴',
  'Flip Y': 'Y 轴',
  Range: '区间',
  Stroke: '描边',
  Fill: '填充',
  Circle: '圆',
  Triangle: '三角',
  Rectangle: '矩形',
  Free: '曲线',
  Straight: '直线',
  Arrow: '箭头',
  'Arrow-2': '箭头2',
  'Arrow-3': '箭头3',
  'Star-1': '星星1',
  'Star-2': '星星2',
  Polygon: '多边形',
  Location: '定位',
  Heart: '心形',
  Bubble: '气泡',
  'Custom icon': '自定义图标',
  'Load Mask Image': '加载蒙层图片',
  Grayscale: '灰度',
  Blur: '模糊',
  Sharpen: '锐化',
  Emboss: '浮雕',
  'Remove White': '除去白色',
  Distance: '距离',
  Brightness: '亮度',
  Noise: '噪音',
  'Color Filter': '彩色滤镜',
  Sepia: '棕色',
  Sepia2: '棕色2',
  Invert: '负片',
  Pixelate: '像素化',
  Threshold: '阈值',
  Tint: '色调',
  Multiply: '正片叠底',
  Blend: '混合色',
  Width: '宽度',
  Height: '高度',
  'Lock Aspect Ratio': '锁定宽高比例'
}

// 画布组件自定义样式
const customTheme = {
  "common.bi.image": "", // 左上角logo图片
  "common.bisize.width": "0px",
  "common.bisize.height": "0px",
  "common.backgroundImage": "none",
  "common.backgroundColor": "#f3f4f6",
  "common.border": "1px solid #333",

  // header
  "header.backgroundImage": "none",
  "header.backgroundColor": "#f3f4f6",
  "header.border": "0px",
  
  // load button
  "loadButton.backgroundColor": "#fff",
  "loadButton.border": "1px solid #ddd",
  "loadButton.color": "#222",
  "loadButton.fontFamily": "NotoSans, sans-serif",
  "loadButton.fontSize": "12px",
  "loadButton.display": "none", // 可以直接隐藏掉

  // download button
  "downloadButton.backgroundColor": "#fdba3b",
  "downloadButton.border": "1px solid #fdba3b",
  "downloadButton.color": "#fff",
  "downloadButton.fontFamily": "NotoSans, sans-serif",
  "downloadButton.fontSize": "12px",
  "downloadButton.display": "none", // 可以直接隐藏掉

  // icons default
  "menu.normalIcon.color": "#8a8a8a",
  "menu.activeIcon.color": "#555555",
  "menu.disabledIcon.color": "#ccc",
  "menu.hoverIcon.color": "#e9e9e9",
  "submenu.normalIcon.color": "#8a8a8a",
  "submenu.activeIcon.color": "#e9e9e9",

  "menu.iconSize.width": "24px",
  "menu.iconSize.height": "24px",
  "submenu.iconSize.width": "32px",
  "submenu.iconSize.height": "32px",

  // submenu primary color
  "submenu.backgroundColor": "#1e1e1e",
  "submenu.partition.color": "#858585",

  // submenu labels
  "submenu.normalLabel.color": "#858585",
  "submenu.normalLabel.fontWeight": "lighter",
  "submenu.activeLabel.color": "#fff",
  "submenu.activeLabel.fontWeight": "lighter",

  // checkbox style
  "checkbox.border": "1px solid #ccc",
  "checkbox.backgroundColor": "#fff",

  // rango style
  "range.pointer.color": "#fff",
  "range.bar.color": "#666",
  "range.subbar.color": "#d1d1d1",

  "range.disabledPointer.color": "#414141",
  "range.disabledBar.color": "#282828",
  "range.disabledSubbar.color": "#414141",

  "range.value.color": "#fff",
  "range.value.fontWeight": "lighter",
  "range.value.fontSize": "11px",
  "range.value.border": "1px solid #353535",
  "range.value.backgroundColor": "#151515",
  "range.title.color": "#fff",
  "range.title.fontWeight": "lighter",

  // colorpicker style
  "colorpicker.button.border": "1px solid #1e1e1e",
  "colorpicker.title.color": "#fff",
};
export default {
  name: 'ImgTui',
  data() {
    return {
      instance: null // 创建的画布对象
    }
  },
  mounted() {
    this.init()  // 页面创建完成后调用
  },
  methods: {
    init() {
      this.instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
        includeUI: {
          loadImage: {
            path: 'https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1d7a1feb60346449c1a64893888989a~tplv-k3u1fbpfcp-watermark.image',
            name: 'image'
          },
          menu: ['resize', 'crop', 'rotate', 'draw', 'shape', 'icon', 'text', 'filter'], // 底部菜单按钮列表 隐藏镜像flip和遮罩mask
          initMenu: 'draw', // 默认打开的菜单项
          menuBarPosition: 'bottom', // 菜单所在的位置
          locale: locale_zh, // 本地化语言为中文
          theme: customTheme // 自定义样式
        },
        cssMaxWidth: 400, // canvas 最大宽度
        cssMaxHeight: 500 // canvas 最大高度
      })
      document.getElementsByClassName('tui-image-editor-main')[0].style.top = '45px' // 调整图片显示位置
      document.getElementsByClassName(
        'tie-btn-reset tui-image-editor-item help'
      )[0].style.display = 'none' // 隐藏顶部重置按钮
    },
    // 保存图片，并上传
    save() {
      const base64String = this.instance.toDataURL() // base64 文件
      const data = window.atob(base64String.split(',')[1])
      const ia = new Uint8Array(data.length)
      for (let i = 0; i < data.length; i++) {
        ia[i] = data.charCodeAt(i)
      }
      const blob = new Blob([ia], { type: 'image/png' }) // blob 文件
      const form = new FormData()
      form.append('image', blob)
      // upload file
    }
  }
}
</script>

<style lang="scss" scoped>
.drawing-container {
  height: 400px;
  width: 600px;
  position: relative;
  .save {
    position: absolute;
    right: 50px;
    top: 15px;
  }
}
</style>

相比其他插件，tui.image-editor 的优势是功能强大，简单易上手。

插件固然好用，但本人也发现一个小 bug，当放大图片，用手掌拖动显示位置，再点击重置按钮时，图片很可能就消失不见了。解决办法有两个，一是改源码，在重置之前，先调用 resetZoom 方法，还原缩放比列；二是自己做一个重置按钮，点击之后调用 this.init 方法重新进行渲染。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/67561.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

数据库设计

数据库设计

概述 数据库设计是一项十分复杂的操作&#xff0c;首先需要理清数据之间的关系&#xff0c;绘制ER图&#xff0c;接着根据ER图设计Relation Schema&#xff0c;最后添加字段属性和索引生成数据表。一个好的ER图是一个数据库的基础。 数据库设计的好坏中最重要的一项指标就是重…
阅读更多...
完整版在xcode打测试专用ipa包流程​

完整版在xcode打测试专用ipa包流程​

前言&#xff1a;有时候&#xff0c;想要把自己的程序运行在别人的iphone手机上&#xff0c;但又不能通过本地真机调试的方法安装&#xff0c;这个时候我们就要打一个测试专用的ipa包给远方的测试小伙伴们测试。​ 步骤&#xff1a;​ 首先希望你的发布证书已经安装好了。​ 1.…
阅读更多...
分布式文件存储系统FastDFS[2]-上传和下载文件工具类

分布式文件存储系统FastDFS[2]-上传和下载文件工具类

一、文件上传流程 1 时序图 2 流程说明 客户端访问Tracker Tracker 返回Storage的ip和端口 客户端直接访问Storage&#xff0c;把文件内容和元数据发送过去。 Storage返回文件存储id。包含了组名和文件名 1 添加依赖 <dependencies><dependency><groupId&g…
阅读更多...
基于jsp+mysql+ssm峰值预警停车场管理系统-计算机毕业设计

基于jsp+mysql+ssm峰值预警停车场管理系统-计算机毕业设计

项目介绍 随着城市建设与经济的不断发展,城市车辆的数量也不断增涨,为解决停车问题修建停车场。基于经营、安全、管理等多角度的考虑&#xff0c;希望在目前传统的大型车库管理系统中有机地结合车牌识别技术&#xff0c;以求得日后在停车库运营时更安全、管理上更细致、经营中…
阅读更多...
13个小众有趣的网站，只有程序员才看得懂

13个小众有趣的网站，只有程序员才看得懂

欢迎来到程序员的世界&#xff0c;分享一些关于程序员的小众网站&#xff0c;不仅干货满满的实用类网站&#xff0c;也有一些有趣的娱乐网站&#xff0c;有些网站只有程序员才看得懂。1、程序员音乐 地址&#xff1a;https://musicforprogramming.net/ 一个仿代码样式的背景音乐…
阅读更多...
使用JAR签名进行代码签名

使用JAR签名进行代码签名

JavaArchive(JAR)包格式可用于打包Java应用程序和库。 签名的JAR文件可以选择包含来自TSA时间戳响应&#xff0c;使用RFC#3161格式。 添加JAR签名者添加JAR签名者的链接&#xff0c;SignServer中的JAR签名器称为JArchiveSigner。 要配置JArchiveSigner&#xff0c;请按照以下…
阅读更多...
[附源码]计算机毕业设计农产品销售网站Springboot程序

[附源码]计算机毕业设计农产品销售网站Springboot程序

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
用R语言模拟M / M / 1随机服务排队系统

用R语言模拟M / M / 1随机服务排队系统

本文中我在R中构造一个简单的M / M / 1队列的离散事件模拟 。最近我们被客户要求撰写关于随机服务的研究报告&#xff0c;包括一些图形和统计输出。 模拟变量 像往常一样&#xff0c;我们从模拟及其检测所需的变量 开始。 t.end <- 10^5 # 模拟的持续时间 t.clock <- 0…
阅读更多...
【OpenCV-Python】教程：4-3 Shi-Tomasi 角点检测

【OpenCV-Python】教程：4-3 Shi-Tomasi 角点检测

OpenCV Python Shi-Tomasi 角点检测器 【目标】 Shi-Tomasi 角点检测器cv2.goodFeaturesToTrack 【理论】 上一个章节中学习了Harris角点&#xff0c;J. Shi and C. Tomasi 做了一些修改&#xff0c;Good Features to Track显示了比Harris角点更好的效果。 Harris 角点检测…
阅读更多...
私人定制AI绘画——快速finetune stable diffusion教程

私人定制AI绘画——快速finetune stable diffusion教程

最近AI绘图非常火&#xff0c;只需要输入文本就能得到令人惊艳的图。 举个例子&#xff0c;输入 “very complex hyper-maximalist overdetailed cinematic tribal darkfantasy closeup portrait of a malignant beautiful young dragon queen goddess megan fox with long bl…
阅读更多...
springcloud之Eureka

springcloud之Eureka

idea项目创建 1.创建一个project&#xff0c;然后把src目录删掉 2.修改pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instanc…
阅读更多...
java+springboot的社区维修平台

java+springboot的社区维修平台

JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven 系统结构图&#xff0c;如图4-3所示。 图4-3 系统结构图管 效果图 目 录 第一…
阅读更多...
小迪-day15(Oracle，MongoDB、access、msSQL、postgresql注入)

小迪-day15(Oracle，MongoDB、access、msSQL、postgresql注入)

1、sqlmap使用 基本操作笔记&#xff1a;-u #注入点 -f #指纹判别数据库类型 -b #获取数据库版本信息 -p #指定可测试的参数(?page1&id2 -p "page,id") -D "" #指定数据库名 -T "" #指定表名 -C "" #指定字段 -s &q…
阅读更多...
[附源码]Python计算机毕业设计Django校刊投稿系统

[附源码]Python计算机毕业设计Django校刊投稿系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…
阅读更多...
项目经理如何做好跨部门沟通？

项目经理如何做好跨部门沟通？

在项目管理中&#xff0c;计划不明确&#xff0c;职责定义不清晰&#xff0c;会造成沟通不畅&#xff0c;互相推诿的情况&#xff0c; 也会遇到跨部门沟通&#xff0c;就是相互相对独立的部门之间的沟通协调。这也让项目经理苦不堪言。 1、明确目标&#xff0c;计划制定 制…
阅读更多...
Java API操作HDFS

Java API操作HDFS

文章目录1. 创建Maven项目2. 添加相关依赖3. 创建日志属性文件4. 启动集群HDFS服务5. 在HDFS上创建文件6. 写入HDFS文件6.1 将数据直接写入HDFS文件6.2 将本地文件写入HDFS文件7. 读取HDFS文件7.1 读取HDFS文件直接在控制台显示7.2 读取HDFS文件&#xff0c;保存为本地文件8. 重…
阅读更多...
[附源码]计算机毕业设计青栞系统Springboot程序

[附源码]计算机毕业设计青栞系统Springboot程序

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
[附源码]JAVA毕业设计沙县小吃点餐系统（系统+LW）

[附源码]JAVA毕业设计沙县小吃点餐系统（系统+LW）

[附源码]JAVA毕业设计沙县小吃点餐系统&#xff08;系统LW&#xff09; 项目运行 环境项配置&#xff1a; Jdk1.8 Tomcat8.5 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术…
阅读更多...
硬核性感！沉浸式体验 ZStack Cube 超融合的7大亮点功能

硬核性感！沉浸式体验 ZStack Cube 超融合的7大亮点功能

什么是硬核性感&#xff1f;技术够硬核&#xff0c;体验够性感&#xff01;&#xff01; ———by 东川路最靓的仔 传统数据中心承载核心业务&#xff0c;需要采购大量硬件设备堆叠实现整体冗余架构&#xff0c;同时还需消耗大量人力成本分散运维管理。ZStack Cube 超融合一体…
阅读更多...
为什么这几年钱越来越难赚了？而有的人完全不受影响？

为什么这几年钱越来越难赚了？而有的人完全不受影响？

为什么这几年钱越来越难赚了&#xff1f;而有的人完全不受影响&#xff1f; 很多人都在说这几年赚钱越来越难了&#xff0c;尤其疫情这几年。放眼望去&#xff0c;无论是线下还是线上&#xff0c;哀鸿遍野。 大家也习惯性的将自己生意垮掉和项目垮掉的原因归结于疫情。那疫情大…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023