Alexandr_Yakovlev's questions

大家好，我在mac上测试网站时遇到了问题

下载同一个文件时，它不允许在 Windows 上再次下载；

我第一次下载它并将其发送到服务器 - 一切正常

我尝试再次下载相同的文件，但没有任何反应，一切都是空的，控制台中没有错误

这是带有 vue 方法的代码

    sendMessage() {
      this.$emit("new-message", {
        version: this.getAIVersion,
        chat: this.getActiveChat,
        message: this.getTrimMessage,
        file: this.file,
        username: this.getUsername,
        type_data: typeData,
      });

      this.message = "";
      this.file = null;
    },
    uploadFile(e) {
      const file = e.currentTarget.files[0];

      this.file = file;
    }

任务是布置这个块

我不知道如何用剪辑路径制作形状

*,
*::after,
*::before {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style-type: none;
  resize: none;
  outline: none;
  text-decoration: none;
}

.info {
  width: 680px;
}

.info__inner {
  height: 100%;
}

.info__advantages {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 25px;
}

.info__advantage {
  padding: 15px;
  color: #ffffff;
  font-size: 28px;
  letter-spacing: 0.56px;
  text-transform: lowercase;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  line-height: 22px;
  align-self: flex-end;
}

.info__advantage:not(.info__advantage--rhombus) {
  background-image: linear-gradient(98deg, #4BA6DD 16.55%, #D96BC1 42.44%, #F90 81.89%);
}

.info__advantage--rhombus {
  position: relative;
  z-index: 9;
  width: 217px;
  height: 217px;
  transform: translateY(-40px);
  margin: auto;
}

.info__advantage--rhombus::before {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: inherit;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform: rotateZ(45deg);
  background-image: linear-gradient(98deg, #4BA6DD 16.55%, #D96BC1 42.44%, #F90 81.89%);
}

.info__advantage--onion {
  padding: 175px 30px 30px 30px;
  clip-path: polygon(50% 50%, 55% 50%, 100% 0, 100% 100%, 70% 100%, 30% 100%, 0 100%, 0 0);
  position: relative;
  overflow: hidden;
}

.info__advantage:nth-child(1) {
  grid-column-start: 1;
  grid-column-end: 3;
  width: 256px;
  height: 140px;
}

.info__advantage:nth-child(2) {
  grid-row-start: 2;
  grid-column-start: 3;
  margin: auto;
}

.info__advantage:nth-child(3) {
  grid-column-start: 4;
  grid-column-end: 13;
}

.info__advantage:nth-child(4) {
  width: 165px;
  height: 165px;
}

.info__advantage:nth-child(5) {
  grid-column-start: 6;
  grid-column-end: 13;
  width: 161px;
  height: 170px;
}

.info__advantage:nth-child(6) {
  grid-row-start: 3;
  width: 184px;
  height: 213px;
}

.info__advantage:nth-child(7) {
  grid-row-start: 3;
  grid-column-start: 3;
}

.info__advantage:nth-child(8) {
  grid-row-start: 3;
  grid-column-start: 5;
  grid-column-end: 13;
  width: 184px;
  height: 178px;
}

.info__advantage--br-20 {
  border-radius: 20px;
}

.info__advantage--br-140 {
  border-radius: 140px;
}

<div class="info">
  <div class="info__inner">
    <ul class="info__advantages">
      <li class="info__advantage info__advantage--br-20">профессиональное комьюнити</li>
      <li class="info__advantage info__advantage--br-20 info__advantage--rhombus">дипломная работа — собственный мультфильм</li>
      <li class="info__advantage info__advantage--br-140">только в России свыше 12 000 заказов ежедневно</li>
      <li class="info__advantage info__advantage--br-140">портфолио к выпуску</li>
      <li class="info__advantage info__advantage--br-20">растущая индустрия с оборотом 150 млрд</li>
      <li class="info__advantage info__advantage--br-140">стажировки и практики с 1 курса</li>
      <li class="info__advantage info__advantage--br-20 info__advantage--onion">преподаватели-практики</li>
      <li class="info__advantage info__advantage--br-140">уникальная творческая профессия</li>
    </ul>
  </div>
</div>

我想使用 keycloak 进行用户授权，我发送了一个 get 请求access_token，但收到错误Missing form parameter: grant_type，这意味着缺少正确的标头Content-Type（需要该值application/x-www-form-urlencoded）。

代码

    public function login(Request $req) {
        $url = env('KEYCLOAK_HOST').'/auth/realms/'.env('KEYCLOAK_REALM').'/protocol/openid-connect/token';
        $options = [
            'client_id' => env('KEYCLOAK_CLIENT_ID'),
            'client_secret' => env('KEYCLOAK_CLIENT_SECRET'),
            'grant_type' => env('KEYCLOAK_GRANT_TYPE'),
            'username' => $req->username,
            'password' => $req->password,
            'scope' => 'openid'
        ];
        $ch = curl_init($url);

        curl_setopt($ch, CURLOPT_HTTPHEADER, ['Content-Type: application/x-www-form-urlencoded']);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
        curl_setopt($ch, CURLOPT_POST, true);
        curl_setopt($ch, CURLOPT_POSTFIELDS, $options);

        $response = curl_exec($ch);
        $error = curl_error($ch);

        curl_close($ch);

        return response(['res' => json_decode($response), 'err' => json_decode($error)], 200)
            ->header('Content-Type', 'application/json');
    }

如何正确设置标题Content-Type的值application/x-www-form-urlencoded？

如何创建这样的表格（仅限 html）？

我正在尝试在网站上显示 Excel 电子表格，但编码存在问题。所有功能都有效，仅适用于西里尔字母问题。

为了使用表格，我使用了库Sheet.js。

import xlsx from "xlsx";

export default class Table {
    constructor(selectorTable, selectorBtnDownload, selectorBtnSave, selectorInputUpload) {
        this.table = document.querySelector(selectorTable);
        this.btnDownload = document.querySelector(selectorBtnDownload);
        this.btnSave = document.querySelector(selectorBtnSave);
        this.inputUpload = document.querySelector(selectorInputUpload);
    }

    htmlTableToExcel() {
        const file = xlsx.utils.table_to_book(this.table);

        xlsx.write(file, { bookType: "xlsx", bookSST: true, type: "base64", });
        xlsx.writeFile(file, "file.xlsx", { cellStyles: true, });
    }

    _setEventForBtnDownload() {
        if (!this.btnDownload) {
            return;
        }

        this.btnDownload.addEventListener("click", this.htmlTableToExcel.bind(this));
    }

    _getElementTable(htmlResult) {
        const block = document.createElement("div");

        block.innerHTML = htmlResult;

        return block.querySelector("table");
    }

    _setEventForUploadInput() {
        this.inputUpload.addEventListener("change", (e) => {
            const reader = new FileReader();

            reader.readAsArrayBuffer(e.target.files[0]);

            reader.addEventListener("load", () => {
                this.inputUpload.classList.add("is-valid");
                this.inputUpload.classList.remove("is-invalid");

                const data = new Uint8Array(reader.result);
                const wb = xlsx.read(data, { type: "array", });
                const htmlStr = xlsx.write(wb, { type: "binary", bookType: "html", cellStyles: true, });
                const table = this._getElementTable(htmlStr);

                this.table.innerHTML = table.innerHTML;
            });

            reader.addEventListener("error", () => {
                this.inputUpload.classList.remove("is-valid");
                this.inputUpload.classList.add("is-invalid");

                throw reader.error;
            });
        });
    }

    init() {
        this._setEventForBtnDownload();
        this._setEventForUploadInput();
    }
}

卓越

结论

如何通过 3 步获得 200 到 1000 的值范围？

在这个图表中，y轴上有从0到1000的值，我知道它们相对于画布（canvas）的坐标

如何获得相对于 y 轴的像素坐标，假设该值为 235？

我想创建一个用户，但是在发送请求的时候，在控制台中显示了一个错误，即People关系不存在。

original: error: отношение "People" не существует

用户模型

const sequelize = require("../db");
const { DataTypes } = require("sequelize");

const Person = sequelize.define("Person", {
  name: {
    type: DataTypes.STRING
  },
  surname: {
    type: DataTypes.STRING
  },
  id: {
    type: DataTypes.INTEGER,
    autoIncrement: true,
    primaryKey: true
  }
});

module.exports = Person;

用户控制器

const Person = require("../models/Person");

class UserController {
  async createUser(req, res) {
    const { name, surname } = req.body;

    await Person.create({
      name,
      surname
    });

    return res.status(200).json({ ok: true, Persons: await Person.findAll() });
  }
}

module.exports = new UserController();

用户路由器

const express = require("express");
const router = express.Router();
const userController = require("../controllers/user.controller");

router.post("/user", userController.createUser);

module.exports = router;

使用 post 和 person 表

如何在js中获取数组中的唯一元素？我知道有new Set，但是如果数组中有对象，那么它将不起作用

例如，此代码将输出以下内容：[1, 2, { key: "1" }, { key: "1" }, { key: "1" }]

[...new Set([1, 1, 2, { key: "1" }, { key: "1" }, { key: "1" }])];

我需要这个结果

[1, 2, { key: "1" }]

我在页面上有一个元素，应该只在计算机上显示。

我该怎么做？这可以用 css @media 实现吗？

我想点击另一个站点的链接，但 Nuxt 不允许这样做：

<nuxt-link to="https://www.google.com/"></nuxt-link>

localhost:3000/https://www.google.com/它会是这样的：

如何去其他网站？

当我向服务器发送请求时，我收到 500 错误代码：Found non-callable @@iterator.

可能是什么问题呢？

向服务器发送数据

    async change({ commit }, { token, fd, orderId }) {
      try {
        const res = await fetch(`${serv}/orders/change`, {
          method: "POST",
          headers: {
            "Accept-Type": "application/json",
            "Content-Type": "application/json",
            Authorization: `Bearer ${token}`
          },
          body: JSON.stringify({ updates: fd, orderId })
        });

        const { ok, message, orders } = await res.json();

        if (ok) {
          commit("setOrders".orders);
        }

        return { ok, message, orders };
      } catch (err) {
        throw err;
      }
    },

获取服务器上的数据

router.post("/change", isAdmin, async (req, res) => {
  try {
    if (req.isAdmin) {
      const { orderId, updates } = req.body;

      await Order.findByIdAndUpdate(orderId, ...updates);

      return res.status(200).json({ ok: true, message: "Заказ изменен" });
    } else {
      return res.status(403).json({ ok: false, message: "У вас нет доступа" });
    }
  } catch (err) {
    console.log(err);

    return res.status(500).json({ ok: false, message: "Произошла ошибка сервера" });
  }
});

我怎样才能继承接口IPerson，从那里获取除之外的所有属性parents？

interface IPerson {
  name: string;
  age: number;
  parents: Array<string>;
}

interface IAlex extends IPersong {
  status?: string;
  place?: string;
}

我有一个可以过滤的产品列表，但是当我使用query:执行此操作时?category=all，带有产品的 JSON 来自服务器直接到页面（我知道它来到页面，因为我返回它），而不是我的内容网站。

是否可以使用query过滤产品过滤产品并在页面上仅显示过滤产品？

也许有nuxt这样的文件名，例如user/_settings仅用于query？

服务器

const express = require('express');
const router = express.Router();
const Product = require("../models/Product");

router.get("/", async (req, res) => {
  try {
    const { query: { category } } = req;
    const products = await Product.find();
    const productsByCategory = category === "all" ? products : products.filter(prd => prd.category === category);

    return res.status(200).json({ ok: true, products: productsByCategory });
  } catch (err) {
    return res.status(500).json({ ok: false, message: "Произошла ошибка сервера", });
  }
});

module.exports = router;

客户

const serv = process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : '';

    async fetchProducts() {
      try {
        const data = await fetch(`${serv}/`, {
          method: 'GET',
          headers: {
            "Content-Type": "application/json",
          }
        });

        return data.json();
      } catch (err) {
        throw err;
      }
    }

我有一个元素列表，其父元素与display: flex. 我想重新分配其中一个元素的顺序，例如，我取第一个并给它order: 1or order: 2，但是它从第一个位置转移到最后一个（总共有 5 个元素）。为什么会这样？

scss

.boolmarks {
  max-width: 500px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: auto;
}

.boolmark {
  width: 100px;
  height: 100px;

  &:first-child {
    order: 2;
  }

  &__inner,
  &__link {
    height: inherit;
  }

  &__link {
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    transition: background-color .5s;
    padding: 10px;
    color: #dbdbdb;

    &:hover {
      background-color: rgba(#383838, .6);
    }

    &:hover > h3 {
      text-decoration: underline;
    }
  }

  &__title {
    white-space: nowrap;
    word-break: break-word;
    max-width: 75px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
  }
}

html

    <ul class="boolmarks">
      <li class="boolmark">
        <div class="boolmark__inner">
          <a class="boolmark__link" href="#">
            <h3 class="boolmark__title">1</h3>
          </a>
        </div>
      </li>
      <li class="boolmark">
        <div class="boolmark__inner">
          <a class="boolmark__link" href="#">
            <h3 class="boolmark__title">2</h3>
          </a>
        </div>
      </li>
      <li class="boolmark">
        <div class="boolmark__inner">
          <a class="boolmark__link" href="#">
            <h3 class="boolmark__title">3</h3>
          </a>
        </div>
      </li>
      <li class="boolmark">
        <div class="boolmark__inner">
          <a class="boolmark__link" href="#">
            <h3 class="boolmark__title">4</h3>
          </a>
        </div>
      </li>
      <li class="boolmark">
        <div class="boolmark__inner">
          <a class="boolmark__link" href="#">
            <h3 class="boolmark__title">5</h3>
          </a>
        </div>
      </li>
    </ul>

当我将歌曲上传到数据库时，我将自己重定向到显示所有歌曲的主页，但我收到此错误：Cannot find module './my_song.mp3'尽管重新加载页面后一切正常，没有错误

从数据库中获取歌曲

  async mounted() {
    try {
      const token = this.$store.getters["auth/getToken"];
      const { result, ok } = await this.$store.dispatch("user/getData", {
        data: ["songs"],
        token,
      });

      let songs = [];

      if (ok) {
        songs = result.songs.map((song) => {
          song.active = false;
          // Думаю, что ошибка здесь
          song.audio = new Audio(require(`@/uploads/${song.file}`).default);
          song.currentTime = 0;
          song.audio.volume = this.getVolume;
          song.volume = this.getVolume;

          return song;
        });
      }

      this.$store.commit("setSongs", songs);

      if (localStorage.getItem("volume")) {
        this.$store.commit(
          "setVolume",
          JSON.parse(localStorage.getItem("volume"))
        );
      }
    } catch (err) {
      throw err;
    }
  },

当您按空格键时，我想删除页面滚动。试过了preventDefault()- 没用。然后我想像这样修复它：

window.addEventListener('keydown', e => {
 if (e.keyCode === 32) {
   document.documentElement.scrollIntoView({
     block: 'start'
   });
 }
});

但它不能正常工作，我想知道如何解决它

我有一个按钮，当单击它时，它会执行某种功能。所以如果我点击空格键，这个事件也会发生。应用 preventDefault() - 不起作用。这种现象只发生在火狐浏览器中。

HTML

<button class="btn-start">Начать</button>

JS

const btn = document.querySelector('.btn-start');

btn.addEventListener('click', () => console.log('Hello, world!'));