将微信公众号素材库当作图床使用

第一步服务端获取公众号的access_token

async getWechatServiceAccountAccessToken(appid: string, appsecret: string) {
  let accessToken = await this.cacheManager.get(`${appid}_access_token`);
  if (accessToken) {
    return accessToken;
  }
  let res = await axios.get(
    `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${appsecret}`
  );
  console.log(res.data);
  // noinspection SpellCheckingInspection
  if (res.data['errcode']) {
    // noinspection SpellCheckingInspection
    throw new Error(res.data['errmsg']);
  } else {
    await this.cacheManager.set(
      `${appid}_access_token`,
      res.data['access_token'],
      {
        ttl: 7000,
      }
    );
    return res.data['access_token'];
  }
}

第二部 浏览器端直接传

HTML

<el-upload
  action="#"
  :http-request="uploadHandler"
  :drag="true"
  :name="'media'"
  :show-file-list="false"
>
  <el-icon><plus /></el-icon>
  <template #tip>
   <div class="el-upload__tip">只能上传jpg/png文件，且不超过10MB</div>
  </template>
</el-upload>

JS

const uploadActionUrl = computed(() => {
  return `/wechat-api/cgi-bin/material/add_material?access_token=${wechatAccessToken.value}&type=image`;
});
let wechatAccessToken = ref("");
async function uploadHandler({ file }: UploadRequestOptions) {
  console.log(file);
  const formData = new FormData();
  formData.append("media", file, file.name);
  let res = await axios.post(uploadActionUrl.value, formData, {});
  console.log(res);
}

上传截图

下面这个就是微信素材库的图

sudo spctl --master-disable

完成后检查

接下来执行下面命令
这里的路径是输入 sudo xattr -cr 后在Finder中直接把应用拖拽到终端即可
防止自己手动输入错误

sudo xattr -cr /Applications/Navicat\ Premium.app

<meta name="referrer" content="no-referrer"/>

Referer 头部是一个 HTTP 头部，用于标识请求是从哪个页面发出的。例如，如果你从页面 A 点击一个链接到页面 B，那么在请求页面 B 时，浏览器会发送一个 Referer 头部，值为页面 A 的 URL。

设置了 referrer 策略为 "no-referrer"。这表示浏览器在请求资源时，不会发送 Referer 头部。这意味着目标服务器无法知道请求是从哪个页面发出的。

这个策略在一些情况下可能很有用，例如，当你不希望其他人知道你的页面从哪里链接过来时，或者你不希望把你的页面的 URL 暴露给其他人时。然而，它也可能导致一些问题，因为一些服务可能依赖 Referer 头部来进行防盗链或者跟踪用户行为。

import { Rule, RuleType } from '@midwayjs/validate';

export class SendVerifyCodeValidator {
  // 手机号
  @Rule(RuleType.string().label('手机号').length(11).required())
  phoneNum: string;
}

export class BindPhoneValidator {
  // 手机号
  @Rule(RuleType.string().label('手机号').length(11).required())
  phoneNum: string;
  // 验证码
  @Rule(RuleType.string().label('验证码').length(6).required())
  verifyCode: string;
}

在控制器上加上 @Validate() 即可

  /**
   * 绑定手机号
   */
  @Post('/bindPhoneNum')
  @Validate({
    errorStatus: httpCodeEnum.PARAMS_ERROR,
  })
  async bindPhoneNum(@Body() bindPhoneData: BindPhoneValidator) {
    // TODO 绑定...
    return this.ok(null);
  }

重点：自定义错误提示语

  // 验证码
  @Rule(
    RuleType.string().label('验证码').length(6).required().messages({
      'string.length': '{{#label}}位数错误',
      'string.empty': '验证码不能为空',
      'any.required': '验证码必填',
    })
  )
  verifyCode: string;

这么写 是不行的！！

需要在这里去定义

  @Post('/bindPhoneNum')
  @Validate({
    errorStatus: httpCodeEnum.PARAMS_ERROR,
    validationOptions: {
      messages: {
      'string.length': '{{#label}}位数错误',
      'string.empty': '{{#label}}不能为空',
      'any.required': '{{#label}}必填',
      },
    },
  })
  async bindPhoneNum(@Body() bindPhoneData: BindPhoneValidator)

但是这样会更改所有字段的对应异常提示
比如这个接口要校验手机号和验证码两个参数
当手机号校验11位未通过，会提示 手机号位数错误
当验证码校验6位未通过，会提示 验证码位数错误

如果需要自定义验证器 并 提示自定义的异常信息

  // 验证码校验规则
  @Rule(
    RuleType.string()
      .label('验证码')
      .required()
      .custom((value, helpers) => {
        const reg = /^\d{6}$/;
        if (reg.test(value)) {
          return value;
        }
        throw new Error('格式错误');
      })
  )
  verifyCode: string;

  // 控制器中校验装饰器
  @Validate({
    errorStatus: httpCodeEnum.PARAMS_ERROR,
    validationOptions: {
      messages: {
        'any.custom': '{{#label}}{{#error.message}}',
      },
    },
  })

  // 最终响应
  {"code":5001,"message":"\"验证码\"格式错误"}

安装 windows-build-tools

npm install windows-build-tools

安装 windows-build-tools 后 再次打包 会下载对应操作系统的打包插件

0.SHASUMS256.txt-2.0.18
1.electron-v2.0.18-win32-x64.zip 淘宝镜像下载地址https://npm.taobao.org/mirrors/electron/
2.winCodeSign-2.4.0.7z
3.nsis-3.0.1.13.7z
4.nsis-resources-3.0.7z
5.app-builder-v0.6.1-x64.7z

最终文件夹如下：

--electron  
    C:\Users\windows用户\AppData\Local\electron\
    --Cache
        electron-v2.0.18-win32-x64.zip
        SHASUMS256.txt-2.0.18
--electron-builder
    C:\Users\windows用户\AppData\Local\electron-builder\cache\
    --cache
        --app-builder
            --app-builder-v0.6.1-x64
                解压app-builder-v0.6.1-x64.7z所得文件
        --nsis
            --nsis-3.0.1.13
                解压nsis-3.0.1.13.7z所得文件
        --nsis-resources
            --nsis-resources-3.3.0
                解压nsis-resources-3.3.0.7z所得文件
        --winCodeSign
            --winCodeSign-2.4.0
                解压winCodeSign-2.4.0.7z所得文件

overflow: hidden;

text-overflow:ellipsis;

white-space: nowrap;

多行

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;

overflow: hidden;

适用范围：

因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；

// /src/config/config.default.ts

export default {
  cors: {
    // 允许跨域的方法，【默认值】为 GET,HEAD,PUT,POST,DELETE,PATCH
    allowMethods: '*',
    // 设置 Access-Control-Allow-Origin 的值，【默认值】会获取请求头上的 origin
    // 也可以配置为一个回调方法，传入的参数为 request，需要返回 origin 值
    // 例如：http://test.midwayjs.org
    // 如果设置了 credentials，则 origin 不能设置为 *
    origin: '*',
    // 设置 Access-Control-Allow-Headers 的值，【默认值】会获取请求头上的 Access-Control-Request-Headers
    allowHeaders: '*',
    // 设置 Access-Control-Expose-Headers 的值
    exposeHeaders: '*',
    // 设置 Access-Control-Allow-Credentials，【默认值】false
    // 也可以配置为一个回调方法，传入的参数为 request，返回值为 true 或 false
    credentials: false,
    // 是否在执行报错的时候，把跨域的 header 信息写入到 error 对的 headers 属性中，【默认值】false
    keepHeadersOnError: true,
    // 设置 Access-Control-Max-Age
    maxAge: 36000,
  },
}

重点！后台管理的接口报错，经过排查是因为对 OPTIONS 请求未做特殊响应

npm ERR!Unexpected token '.'

解决方案：

1. 升级nvm版本 GitHub下载地址
2. 卸载需要用的Node版本，再安装一遍即可
   • nvm uninstall 16.18.0
   • nvm install 16.18.0
   • nvm use 16.18.0

const modules = import.meta.glob("../views/**/*.vue");
let autoRoutes: Route[] = [];
for (let key in modules) {
  console.log(key);
  autoRoutes.push({
    filePath: key,
    path: key.replace("../views/", "/").replace(".vue", ""),
    component: modules[key]
  });
}

2、使用addRoute挂载动态路由

const mountRoutes = async () => {
  for (const item of autoRoutes) {
    if (item.path) {
      const route = {
        path: item.path,
        component: () => import(item.filePath)
      };
      console.log(route);
      router.addRoute(route);
    }
  }
};

3、路由配置

import { createRouter, createWebHashHistory } from "vue-router";
import indexPage from "../views/index/index.vue";
import { mountRoutes } from "./auto-load";
import { getToken } from "../utils/token";

const routes = [
  { path: "/", component: indexPage },
  { path: "/login", component: () => import("../views-common/account/login/index.vue") }
];
export const router = createRouter({
  history: createWebHashHistory(),
  routes
});

const authWhiteList = [
  "/login"
];
// 是否已经挂载动态路由标识
let routeHasMounted = false;
router.beforeEach(async (to, from, next) => {
  // 是否为免登录白名单 是的话直接放行
  if (authWhiteList.includes(to.path)) {
    next();
  } else {
    // 需要免登录的页面 判断是否已经登录
    if (!getToken()) {
      // 未登录的直接跳转到登录页面
      next({ path: "/login", replace: true });
    } else {
      // 已经登录的 判断是否挂载动态路由
      if (!routeHasMounted) {
        // 未挂载状态 挂载动态路由
        await mountRoutes();
        // 将挂载状态设置为true
        routeHasMounted = true;
        // 重新路由到当前页面 因为此页面在第一次打开的时候是 匹配不到路由的
        // 这里replace: true 是为了让网页不能返回上一页
        next({ ...to, replace: true });
      } else {
        // 已经挂载状态 直接放行
        next();
      }
    }
  }
});