学习总结 - 《前端开发》

1. 创建vue 项目
2.创建flutter web 项目
3.JAVA 环境搭建
4.IDEA 破解

1. 创建vue 项目

安装脚手架

npm install -g @vue/cli

创建项目

npm create project-demo

安装UI库 element-ui

npm i element-ui -S
main.js 
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI, {
  size: 'small',
  menuType: 'text'
})

实现功能一：定义模板打印word

npm i docxtemplater pizzip jszip-utils file-saver jszip docxtemplater-image-module-free -S

使用：

import docxtemplater from "docxtemplater"
import PizZip from "pizzip"
import { saveAs } from "file-saver"
import JSZipUtils from "jszip-utils"
import JSZip from 'jszip'
import ImageModule from "docxtemplater-image-module-free"
export const dataURLToBase64 = (url) => {
  return new Promise((resolve, reject) => {
    // 判断下传入的地址是不是已经是base64
    const base64Regex = /^data:image\/(png|jpg|svg|svg\+xml);base64,/;
    if (base64Regex.test(url)) {
      return url;
    }
    const Img = new Image()
    let dataURL = ''
    Img.setAttribute('crossOrigin', 'Anonymous')
    Img.src = url + '?v=' + Math.random()
    Img.onload = function () {
      // 要先确保图片完整获取到，这是个异步事件
      const canvas = document.createElement('canvas') // 创建canvas元素
      const width = Img.width // 确保canvas的尺寸和图片一样
      const height = Img.height
      canvas.width = width
      canvas.height = height
      canvas.getContext('2d').drawImage(Img, 0, 0, width, height) // 将图片绘制到canvas中
      dataURL = canvas.toDataURL('image/jpeg') // 转换图片为dataURL
      resolve(dataURL)
    }
  })
}
export const exportWord = ({ file = "input.docx", data, filename = "下载文档", fileType = "docx", folder = "下载文档" } = {}) => {
  // 批量下载生成压缩包
  const Zip = new JSZip()
  if (Array.isArray(data)) {
    data.map((item, index) => {
      // 读取并获得模板文件的二进制内容
      JSZipUtils.getBinaryContent(file, (error, content) => {
        // input.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
        // 抛出异常
        if (error) {
          throw error
        }
        // 图片处理
        let opts = {}
        opts.centered = true;  // 图片居中
        opts.getImage = (tagValue, tagName) => {
          return new Promise((resolve, reject) => {
            JSZipUtils.getBinaryContent(tagValue, (error, content) => {
              if (error) {
                return reject(error);
              }
              return resolve(content);
            });
          });
        }
        opts.getSize = () => {
          return [400, 200]
        }
        let imageModule = new ImageModule(opts);
        // 创建一个JSZip实例，内容为模板的内容
        const zip = new PizZip(content);
        // 创建并加载docxtemplater实例对象
        let doc = new docxtemplater().loadZip(zip).attachModule(imageModule).compile();
        let word = Zip.folder(folder)
        doc.resolveData(item).then(() => {
          doc.render();
          const out = doc.getZip().generate({
            type: "blob",
            mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
          });
          word.file(`${item.filename ? item.filename : filename + index}.${fileType}`, out)
        })
        console.log(word, 'word')
      })
    })
    setTimeout(() => {
      Zip.generateAsync({ type: "blob" })   // zip下载
        .then((content) => {
          saveAs(content, `${folder}.zip`);  // zip下载后的名字
        });
    }, 1000)
  } else {
    // 读取并获得模板文件的二进制内容
    JSZipUtils.getBinaryContent(file, (error, content) => {
      // 抛出异常
      if (error) {
        throw error
      }
      // 图片处理
      let opts = {}
      opts.centered = true;  // 图片居中，在word模板中定义方式为{%image}
      opts.getImage = (tagValue, tagName) => {
        return new Promise((resolve, reject) => {
          JSZipUtils.getBinaryContent(tagValue, (error, content) => {
            if (error) {
              return reject(error);
            }
            return resolve(content);
          });
        });
      }
      opts.getSize = () => {
        return [600, 300]
      }
      let imageModule = new ImageModule(opts);
      const zip = new PizZip(content);
      // 创建并加载docxtemplater实例对象
      let doc = new docxtemplater().loadZip(zip).attachModule(imageModule).compile();
      // 如果包含异步数据，用resolveData，在回调之后再处理，如果都是同步数据，直接用setData就可以
      doc.resolveData(data).then(() => {
        try {
          // 用模板变量的值替换所有模板变量
          doc.render();
          // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
          const out = doc.getZip().generate({
            type: "blob",
            mimeType:
              "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
          });
          // 将目标文件对象保存为目标类型的文件，并命名
          saveAs(out, `${filename}.${fileType}`);
        } catch (error) {
          // 抛出异常
          const e = {
            message: error.message,
            name: error.name,
            stack: error.stack,
            properties: error.properties
          };
          console.log(JSON.stringify({ error: e }));
          throw error;
        }
      })
    });
  }
}

使用：

import { exportWord } from './exportword'
const config = {
        file: "input.docx", // 模板地址
        imgFiled: [],// 需要处理图片地址的字段
        data: this.form// 数据
      }
      exportWord(config)

word 模板文件及语法

直接赋值： {name}
条件赋值：条件标签以＃开始，/结束，如下
{#if sex=1}男{/if}
循环赋值：循环同样以#开始，/结束，如下
{#table}
姓名： {name}    
{/table}

git 删除远程分支：

git push origin --delete new_a

2.创建flutter web 项目

添加用户环境变量

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

设置用户变量path（设置flutter sdk)

1. 下载sdk 不要放到c盘，文件名称不要是中文
2. 加sdk的目录加入到用户变量path中

检查配置

flutter doctor

创建web 项目

flutter create webflutter

运行项目

flutter run

3.JAVA 环境搭建

下载依赖

下载jdk 链接
下载maven 链接

环境配置

一. JDK 配置

（1）、复制JDK的安装目录：
（2）、点击Path，在弹出的框后面添加上下载的jdk安装目录的bin目录，和jre的bin目录
（3）、运行 cmd 输入java -version验证是否配置成功

二. Maven 配置

（1）、复制Maven的安装目录
（2）、新增MAVEN_HOME 用户变量
（3）、环境变量path 添加 %MAVEN_HOME%\bin （maven安装的bin目录）
（4）、cmd 运行 mvn —version 验证是否配置成功

配置maven 本地仓库

找到节点localRepository，在注释外添加

D:\Program Files (x86)\Java\mavenRepository

配置阿里云镜像

在settings.xml配置文件中找到mirrors节点
添加如下配置（注意要添加在和两个标签之间，其它配置同理）

<mirror>
      <id>alimaven</id>
      <mirrorOf>aliyun maven</mirrorOf>
      <name>http://maven.aliyun.com/nexus/content/groups/public/</name>
      <url>central</url>
    </mirror>

配置jdk

在settings.xml配置文件中找到profiles节点

<!-- java版本 --> 
<profile>
      <id>jdk-1.8</id>
      <activation>
        <activeByDefault>true</activeByDefault>
        <jdk>1.8</jdk>
      </activation>
      <properties>
        <maven.compiler.source>1.8</maven.compiler.source>
        <maven.compiler.target>1.8</maven.compiler.target>
        <maven.compiler.compilerVersion>1.8</maven.compiler.compilerVersion>
      </properties>
</profile>

三. 开发工具

IDEA下载：链接

有开源项目的可以去申请开源许可证链接

四. Nacos 安装

Nacos 链接

附件内容：

https://www.aliyundrive.com/s/sFdxbw79LtP

启动nacos service: startup.cmd -m standalone

字体文件引入压缩： font-spider

4.IDEA 破解

版本：2021.3.3

安装包下载（下载专业版Ultimate）
安装（安装前一定要卸载旧的版本）

学习总结 - 图5
安装完成后运行出现这个界面后直接点退出（Exit)

运行破解脚本程序

再次启动idea 输入激活码

4W9NP3KV9E-eyJsaWNlbnNlSWQiOiI0VzlOUDNLVjlFIiwibGljZW5zZWVOYW1lIjoic2NyaXAgd2FuZSIsImFzc2lnbmVlTmFtZSI6IiIsImFzc2lnbmVlRW1haWwiOiIiLCJsaWNlbnNlUmVzdHJpY3Rpb24iOiIiLCJjaGVja0NvbmN1cnJlbnRVc2UiOmZhbHNlLCJwcm9kdWN0cyI6W3siY29kZSI6IklJIiwiZmFsbGJhY2tEYXRlIjoiMjAyMy0wMS0yNCIsInBhaWRVcFRvIjoiMjAyMy0wMS0yNCIsImV4dGVuZGVkIjpmYWxzZX0seyJjb2RlIjoiUERCIiwiZmFsbGJhY2tEYXRlIjoiMjAyMy0wMS0yNCIsInBhaWRVcFRvIjoiMjAyMy0wMS0yNCIsImV4dGVuZGVkIjp0cnVlfSx7ImNvZGUiOiJQV1MiLCJmYWxsYmFja0RhdGUiOiIyMDIzLTAxLTI0IiwicGFpZFVwVG8iOiIyMDIzLTAxLTI0IiwiZXh0ZW5kZWQiOnRydWV9LHsiY29kZSI6IlBHTyIsImZhbGxiYWNrRGF0ZSI6IjIwMjMtMDEtMjQiLCJwYWlkVXBUbyI6IjIwMjMtMDEtMjQiLCJleHRlbmRlZCI6dHJ1ZX0seyJjb2RlIjoiUFBTIiwiZmFsbGJhY2tEYXRlIjoiMjAyMy0wMS0yNCIsInBhaWRVcFRvIjoiMjAyMy0wMS0yNCIsImV4dGVuZGVkIjp0cnVlfSx7ImNvZGUiOiJQUEMiLCJmYWxsYmFja0RhdGUiOiIyMDIzLTAxLTI0IiwicGFpZFVwVG8iOiIyMDIzLTAxLTI0IiwiZXh0ZW5kZWQiOnRydWV9LHsiY29kZSI6IlBSQiIsImZhbGxiYWNrRGF0ZSI6IjIwMjMtMDEtMjQiLCJwYWlkVXBUbyI6IjIwMjMtMDEtMjQiLCJleHRlbmRlZCI6dHJ1ZX0seyJjb2RlIjoiUFNXIiwiZmFsbGJhY2tEYXRlIjoiMjAyMy0wMS0yNCIsInBhaWRVcFRvIjoiMjAyMy0wMS0yNCIsImV4dGVuZGVkIjp0cnVlfSx7ImNvZGUiOiJQU0kiLCJmYWxsYmFja0RhdGUiOiIyMDIzLTAxLTI0IiwicGFpZFVwVG8iOiIyMDIzLTAxLTI0IiwiZXh0ZW5kZWQiOnRydWV9LHsiY29kZSI6IlBDV01QIiwiZmFsbGJhY2tEYXRlIjoiMjAyMy0wMS0yNCIsInBhaWRVcFRvIjoiMjAyMy0wMS0yNCIsImV4dGVuZGVkIjp0cnVlfV0sIm1ldGFkYXRhIjoiMDEyMDIyMDEyMVBTQU4wMDAwMDUiLCJoYXNoIjoiVFJJQUw6LTYyNTA2MDI4NyIsImdyYWNlUGVyaW9kRGF5cyI6NywiYXV0b1Byb2xvbmdhdGVkIjpmYWxzZSwiaXNBdXRvUHJvbG9uZ2F0ZWQiOmZhbHNlfQ==-WlwI3NBiapY7em4MmP7qdZcTK2wvAt5f7FNwaH65H6SBvWnFGpe8M2VrSWCEBIGFQpv+VFJLghJKLjaRUcVOY6ttC6G4uKTpuPzELgcckez+/9DPrYj+alvLYFpS6UWy4uqzsjC/sHgcbNiCQjZQMVhj8Wflv9ts8SfWUqTwtciG8eBrzbyipXOVrRn5Wpk3l6ifL71HZsMy3bDLU8Lkt3UQBNVFZhXWBcNyY/WB9CQGX+6aXtbFA9p/hjbTZL050UoeM30rz0UkzPmfiIupbb3KNPKPArQkU8gw6pF7AcRSLuU3HNqq8RDbrXDYSXY9vtoD3Oi18ijlagVANrhjpQ==-MIIETDCCAjSgAwIBAgIBDTANBgkqhkiG9w0BAQsFADAYMRYwFAYDVQQDDA1KZXRQcm9maWxlIENBMB4XDTIwMTAxOTA5MDU1M1oXDTIyMTAyMTA5MDU1M1owHzEdMBsGA1UEAwwUcHJvZDJ5LWZyb20tMjAyMDEwMTkwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQCUlaUFc1wf+CfY9wzFWEL2euKQ5nswqb57V8QZG7d7RoR6rwYUIXseTOAFq210oMEe++LCjzKDuqwDfsyhgDNTgZBPAaC4vUU2oy+XR+Fq8nBixWIsH668HeOnRK6RRhsr0rJzRB95aZ3EAPzBuQ2qPaNGm17pAX0Rd6MPRgjp75IWwI9eA6aMEdPQEVN7uyOtM5zSsjoj79Lbu1fjShOnQZuJcsV8tqnayeFkNzv2LTOlofU/Tbx502Ro073gGjoeRzNvrynAP03pL486P3KCAyiNPhDs2z8/COMrxRlZW5mfzo0xsK0dQGNH3UoG/9RVwHG4eS8LFpMTR9oetHZBAgMBAAGjgZkwgZYwCQYDVR0TBAIwADAdBgNVHQ4EFgQUJNoRIpb1hUHAk0foMSNM9MCEAv8wSAYDVR0jBEEwP4AUo562SGdCEjZBvW3gubSgUouX8bOhHKQaMBgxFjAUBgNVBAMMDUpldFByb2ZpbGUgQ0GCCQDSbLGDsoN54TATBgNVHSUEDDAKBggrBgEFBQcDATALBgNVHQ8EBAMCBaAwDQYJKoZIhvcNAQELBQADggIBAB2J1ysRudbkqmkUFK8xqhiZaYPd30TlmCmSAaGJ0eBpvkVeqA2jGYhAQRqFiAlFC63JKvWvRZO1iRuWCEfUMkdqQ9VQPXziE/BlsOIgrL6RlJfuFcEZ8TK3syIfIGQZNCxYhLLUuet2HE6LJYPQ5c0jH4kDooRpcVZ4rBxNwddpctUO2te9UU5/FjhioZQsPvd92qOTsV+8Cyl2fvNhNKD1Uu9ff5AkVIQn4JU23ozdB/R5oUlebwaTE6WZNBs+TA/qPj+5/we9NH71WRB0hqUoLI2AKKyiPw++FtN4Su1vsdDlrAzDj9ILjpjJKA1ImuVcG329/WTYIKysZ1CWK3zATg9BeCUPAV1pQy8ToXOq+RSYen6winZ2OO93eyHv2Iw5kbn1dqfBw1BuTE29V2FJKicJSu8iEOpfoafwJISXmz1wnnWL3V/0NxTulfWsXugOoLfv0ZIBP1xH9kmf22jjQ2JiHhQZP7ZDsreRrOeIQ/c4yR8IQvMLfC0WKQqrHu5ZzXTH4NO3CwGWSlTY74kE91zXB5mwWAx1jig+UXYc2w4RkVhy0//lOmVya/PEepuuTTI4+UJwC7qbVlh5zfhj8oTNUXgN0AOc+Q0/WFPl1aw5VV/VrO8FCoB15lFVlpKaQ1Yh+DVU8ke+rt9Th0BCHXe0uZOEmH0nOnH/0onD

或者：激活码获取地址：

破解文件下载