缩放div并在单击该div时将其显示在中心

分类：编程问答

如何解决缩放div并在单击该div时将其显示在中心

我有一个看起来像这样的页面： screenshot

我需要做的是，当我单击特定房间（div）时，它的大小应增加并显示在页面中央，其中包含该房间内的所有内容（它们也应缩放）。如果不对我拥有的每个房间都进行升级，有什么办法可以做到这一点？

下面列出了代码：

scheme.component.html： 

<div *jhiHasAnyAuthority="'ROLE_ADMIN'" class="toolbox">
  <button class="btn btn-primary toolbtn" (click)="save()">Сохранить</button>
  <button class="btn btn-primary toolbtn" (click)="openVerticallyCentered()">Добавить объект</button>
  <div class="search-form">
    <div class="search-container">
      <input class="form-control search-field" type="text" placeholder="Поиск" [(ngModel)]="searchField" />
      <span class="button-item">
        <button class="btn btn-primary search-button" (click)="highlightFoundItems()">
          <fa-icon icon="search"></fa-icon>
        </button>
      </span>
    </div>
  </div>
</div>
<div *ngIf="!letDrag" class="hidden-toolbox"></div>
<div class="my-wrapper">
  <div class="rooms-top">
    <div id="accounting">
      <p id="accounting-text" class="room-name">Бухгалтерия</p>
    </div>
    <div id="meeting-room">
      <div id="text-aligner">
        <p id="meeting-room-text" class="room-name">Переговорная</p>
      </div>
      <div id="weird-space"></div>
    </div>
    <div id="northern-lights">
      <p id="northern-lights-text" class="room-name">Северное сияние</p>
    </div>
    <div id="directors-room">
      <p id="directors-room-text" class="room-name">Директорская</p>
    </div>
    <div id="kitchen">
      <p id="kitchen-text" class="room-name">Кухня</p>
    </div>
  </div>
  <div class="coridor"></div>
  <div class="rooms-bottom" cdkDrop>
    <div id="procure-zone">
      <p id="procure-zone-text" class="room-name">Procure Zone</p>
    </div>
    <div id="server-room">
      <p id="server-room-text" class="room-name">Серверная</p>
    </div>
    <div id="indaba">
      <p id="indaba-text" class="room-name">Indaba</p>
    </div>
  </div>
  <div *ngFor="let desk of desks">
    <ng-template #customPopover>
      <jhi-popover
        [name]="desk.name"
        [position]="desk.person.position"
        [link]="desk.link"
        [linkText]="'Профиль'"
        [imagePath]="desk.imagePath"
        (isClicked)="isClicked($event)"
        [objectViaInput]="desk"
      >
      </jhi-popover>
    </ng-template>
    <jhi-desk
      class="desk"
      #desktop
      [ngbPopover]="customPopover"
      #popOver="ngbPopover"
      popoverTitle="Сотрудник"
      triggers="manual"
      (click)="popOver.open(); selectComponent(desk)"
      [imagePath]="'../../../../content/images/desk.svg'"
      *ngIf="letDrag"
      cdkDragBoundary=".my-wrapper"
      (cdkDragEnded)="dragEnd($event)"
      (cdkDragStarted)="dragStart($event)"
      cdkDrag
      [style.left.px]="desk.x"
      [style.top.px]="desk.y"
      [attr.id]="desk.itemId"
    ></jhi-desk>
    <jhi-desk
      class="desk"
      #desktop
      [ngbPopover]="customPopover"
      #popOver="ngbPopover"
      popoverTitle="Сотрудник"
      triggers="manual"
      (click)="popOver.open(); selectComponent(desk)"
      [imagePath]="'../../../../content/images/desk.svg'"
      *ngIf="!letDrag"
      [style.left.px]="desk.x"
      [style.top.px]="desk.y"
      [attr.id]="desk.itemId"
    ></jhi-desk>
  </div>
  <div *ngFor="let schemeObject of schemeObjects">
    <ng-template #customPopover1>
      <jhi-popover
        [name]="schemeObject.name"
        [link]="schemeObject.link"
        [linkText]="'Ссылка'"
        [imagePath]="schemeObject.imagePath"
        (isClicked)="isClicked($event)"
        [objectViaInput]="schemeObject"
      >
      </jhi-popover>
    </ng-template>
    <jhi-scheme-object
      class="scheme-object"
      [ngbPopover]="customPopover1"
      #popOver="ngbPopover"
      popoverTitle="Устройство"
      triggers="manual"
      (click)="popOver.open(); selectComponent(schemeObject)"
      [imagePath]="schemeObject.imagePath"
      *ngIf="letDrag"
      cdkDragBoundary=".my-wrapper"
      (cdkDragEnded)="dragEnd($event)"
      (cdkDragStarted)="dragStart($event)"
      cdkDrag
      [style.left.px]="schemeObject.x"
      [style.top.px]="schemeObject.y"
      [attr.id]="schemeObject.itemId"
    >
    </jhi-scheme-object>
    <jhi-scheme-object
      class="scheme-object"
      [ngbPopover]="customPopover1"
      #popOver="ngbPopover"
      popoverTitle="Устройство"
      triggers="manual"
      (click)="popOver.open(); selectComponent(schemeObject)"
      [imagePath]="schemeObject.imagePath"
      *ngIf="!letDrag"
      [style.left.px]="schemeObject.x"
      [style.top.px]="schemeObject.y"
      [attr.id]="schemeObject.itemId"
    >
    </jhi-scheme-object>
  </div>
  <div *ngFor="let phone of phones">
    <ng-template #customPopover2>
      <jhi-popover
        [name]="phone.name"
        [link]="'#'"
        [imagePath]="phone.imagePath"
        [phoneNumber]="phone.phoneNumber"
        (isClicked)="isClicked($event)"
        [objectViaInput]="phone"
      >
      </jhi-popover>
    </ng-template>
    <jhi-phone
      class="phone"
      [ngbPopover]="customPopover2"
      #popOver="ngbPopover"
      popoverTitle="Телефон"
      triggers="manual"
      (click)="selectComponent(phone); popOver.open()"
      [imagePath]="phone.imagePath"
      *ngIf="letDrag"
      cdkDragBoundary=".my-wrapper"
      (cdkDragEnded)="dragEnd($event)"
      (cdkDragStarted)="dragStart($event)"
      cdkDrag
      [style.left.px]="phone.x"
      [style.top.px]="phone.y"
      [attr.id]="phone.itemId"
    >
    </jhi-phone>
    <jhi-phone
      class="phone"
      [ngbPopover]="customPopover2"
      #popOver="ngbPopover"
      popoverTitle="Телефон"
      triggers="manual"
      (click)="selectComponent(phone); popOver.open()"
      [imagePath]="phone.imagePath"
      *ngIf="!letDrag"
      [style.left.px]="phone.x"
      [style.top.px]="phone.y"
      [attr.id]="phone.itemId"
    >
    </jhi-phone>
  </div>
</div>

scheme.component.css： 

.toolbox {
  width: 90%;
  height: 10%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  margin-left: auto;
  margin-right: auto;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.hidden-toolbox {
  width: 90%;
  height: 10%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  margin-left: auto;
  margin-right: auto;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.search-form {
  flex-grow: 4;
}

.search-container {
  width: 80%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.search-field {
  flex-grow: 3;
  margin-right: 0.5rem;
}
.button-item {
  flex-grow: 1;
}

.search-button {
  width: 100%;
  height: 100%;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.toolbtn {
  margin-right: 1rem;
  width: 10%;
  height: 100%;
  text-align: center;
  vertical-align: top;
}
.my-wrapper {
  width: 90%;
  border: 5px solid black;
  height: 90%;
  margin: auto;
}

.rooms-top {
  display: flex;
  border-bottom: 5px solid black;
  width: 100%;
  height: 35%;
  position: relative;
}

#accounting {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 5px solid black;
  width: 14%;
  height: 100;
}

#meeting-room {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  border-right: 5px solid black;
  width: 18%;
  height: 100%;
}

#weird-space {
  width: 100%;
  height: 20%;
  border-top: 5px solid black;
  flex-shrink: 4;
}

#text-aligner {
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#meeting-room-text {
  margin-top: 3rem;
}

#northern-lights {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 5px solid black;
  width: 30%;
  height: 100%;
}

#directors-room {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 5px solid black;
  width: 25%;
  height: 100%;
}
#kitchen {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 13%;
  height: 100%;
}
.coridor {
  width: 100%;
  height: 30%;
  position: relative;
  top: 0%;
  display: flex;
}
.rooms-bottom {
  display: flex;
  border-top: 5px solid black;
  width: 100%;
  height: 35%;
  position: relative;
}

#server-room {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 5px solid black;
  left: 28%;
  width: 22%;
  height: 100%;
}

#procure-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28%;
  border-right: 5px solid black;
  height: 100%;
}

#indaba {
  display: flex;
  align-items: center;
  justify-content: center;
  left: 50%;
  height: 100%;
  width: 50%;
}

.room-name {
  font-weight: 500;
  font-size: 1.2rem;
  font-family: 'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  letter-spacing: 1px;
}

.desk {
  position: absolute;
}

.scheme-object {
  position: absolute;
}

.phone {
  position: absolute;
}

.highlight {
  box-shadow: 0 0 10px 2px rgba(48,164,231,1);
  border: 2px solid rgba(48,1);
  border-radius: 5px;
}

.change-color {
  background-color: red;
}
.search-icon {
  border: 1px solid black;
  border-radius: 4px;
  padding: 5px;
}

scheme.component.ts： 

import { AfterViewInit,Component,ElementRef,Inject,OnInit,QueryList,ViewChild,ViewChildren } from '@angular/core';
import { CdkDragEnd,CdkDragStart } from '@angular/cdk/drag-drop';
import { DeskService } from '../service/desk.service';
import { NgbModal,NgbPopover } from '@ng-bootstrap/ng-bootstrap';
import { DeskModalComponent } from '../desk-modal/desk-modal.component';
import { SchemeObject } from '../scheme-object';
import { ComponentService } from '../service/component.service';
import { PhoneService } from '../service/phone.service';
import { SchemePhone } from '../scheme-phone';
import { SchemeDesk } from '../scheme-desk';
import { EventBusService } from '../service/event-bus.service';
import { EventData } from '../utils/event.class';
import { AuthServerProvider } from 'app/core/auth/auth-jwt.service';
import { AccountService } from 'app/core/auth/account.service';
import { Account } from 'app/core/user/account.model';
import { SchemeService } from '../service/scheme.service';
import { SearchResponse } from '../utils/search-response';
import { tap } from 'rxjs/operators';
import { Observable } from 'rxjs';
import { DeskComponent } from '../scheme-component/desk/desk.component';
@Component({
  selector: 'jhi-scheme',templateUrl: './scheme.component.html',styleUrls: ['./scheme.component.scss']
})
export class SchemeComponent implements OnInit,AfterViewInit {
  desks!: SchemeDesk[];
  deskPositions!: SchemeDesk[];
  schemeObjects!: SchemeObject[];
  schemeObjectsPositions!: SchemeObject[];
  phones!: SchemePhone[];
  phonePositions!: SchemePhone[];
  currentAccount!: Account | null;
  letDrag!: boolean;
  searchField!: string;
  items!: SearchResponse;

  @ViewChild('popOver',{ static: false })
  public popover!: NgbPopover;

  @ViewChildren(DeskComponent) displayedDesks!: QueryList<DeskComponent>;

  constructor(
    private deskService: DeskService,private componentService: ComponentService,private phoneService: PhoneService,private modalService: NgbModal,private eventBus: EventBusService,private authSerice: AuthServerProvider,private accountService: AccountService,private schemeService: SchemeService,private elementRef: ElementRef
  ) {}

  ngOnInit(): void {
    this.getDesks();
    this.getSchemeObjects();
    this.getPhones();
    console.warn(this.authSerice.getToken());
    /*
    this.currentAccount = this.accountService.getUserIdentity();
    console.warn(this.currentAccount);
    */
    this.currentAccount = JSON.parse(localStorage.account);
    if (this.currentAccount.login === 'admin') {
      this.letDrag = true;
    } else {
      this.letDrag = false;
    }
    console.warn(this.letDrag);
  }

  async getSchemeObjects(): Promise<void> {
    await this.componentService.getSchemeObjects().then(res => {
      this.schemeObjects = res;
      this.schemeObjects.sort((a,b) => a.itemId - b.itemId);
      this.schemeObjectsPositions = JSON.parse(JSON.stringify(this.schemeObjects));
    });
  }

  async getPhones(): Promise<void> {
    await this.phoneService.getPhones().then(res => {
      this.phones = res;
      this.phones.sort((a,b) => a.itemId - b.itemId);
      this.phonePositions = JSON.parse(JSON.stringify(this.phones));
    });
  }

  ngAfterViewInit(): void {}

  async getDesks(): Promise<void> {
    await this.deskService.getDesks().then(res => {
      this.desks = res;
      this.desks.sort((a,b) => a.itemId - b.itemId);
      this.deskPositions = JSON.parse(JSON.stringify(this.desks));
    });
  }

  updateInfos(): void {
    const schemeObjectsInfos = new Map(this.schemeObjects.map(item => [item.itemId,item.info]));
    const schemeDesksInfos = new Map(this.desks.map(item => [item.itemId,item.info]));
    const schemePhonesInfos = new Map(this.phones.map(item => [item.itemId,item.info]));

    this.schemeObjectsPositions
      .filter(item => item.info !== schemeObjectsInfos.get(item.itemId))
      .forEach(item => (item.info = schemeObjectsInfos.get(item.itemId)));

    this.deskPositions
      .filter(item => item.info !== schemeDesksInfos.get(item.itemId))
      .forEach(item => (item.info = schemeDesksInfos.get(item.itemId)));

    this.phonePositions
      .filter(item => item.info !== schemePhonesInfos.get(item.itemId))
      .forEach(item => (item.info = schemePhonesInfos.get(item.itemId)));
  }

  save(): void {
    this.updateInfos();
    this.deskService.updateDesks(this.deskPositions).subscribe();
    this.componentService.updateSchemeObjects(this.schemeObjectsPositions).subscribe();
    this.phoneService.updatePhones(this.phonePositions).subscribe();
  }

  dragStart($event: CdkDragStart): void {
    console.warn($event);
    if ($event.source.element.nativeElement.tagName === 'JHI-SCHEME-OBJECT') {
      this.schemeObjectsPositions[$event.source.element.nativeElement.id].x = this.schemeObjects[$event.source.element.nativeElement.id].x;
      this.schemeObjectsPositions[$event.source.element.nativeElement.id].y = this.schemeObjects[$event.source.element.nativeElement.id].y;
    } else if ($event.source.element.nativeElement.tagName === 'JHI-DESK') {
      this.deskPositions[$event.source.element.nativeElement.id].x = this.desks[$event.source.element.nativeElement.id].x;
      this.deskPositions[$event.source.element.nativeElement.id].y = this.desks[$event.source.element.nativeElement.id].y;
    } else if ($event.source.element.nativeElement.tagName === 'JHI-PHONE') {
      this.phonePositions[$event.source.element.nativeElement.id].x = this.phones[$event.source.element.nativeElement.id].x;
      this.phonePositions[$event.source.element.nativeElement.id].y = this.phones[$event.source.element.nativeElement.id].y;
    }
  }

  dragEnd($event: CdkDragEnd): void {
    if ($event.source.element.nativeElement.tagName === 'JHI-SCHEME-OBJECT') {
      this.schemeObjectsPositions[$event.source.element.nativeElement.id].x += $event.source.getFreeDragPosition().x;
      this.schemeObjectsPositions[$event.source.element.nativeElement.id].y += $event.source.getFreeDragPosition().y;
    } else if ($event.source.element.nativeElement.tagName === 'JHI-DESK') {
      this.deskPositions[$event.source.element.nativeElement.id].x += $event.source.getFreeDragPosition().x;
      this.deskPositions[$event.source.element.nativeElement.id].y += $event.source.getFreeDragPosition().y;
    } else if ($event.source.element.nativeElement.tagName === 'JHI-PHONE') {
      this.phonePositions[$event.source.element.nativeElement.id].x += $event.source.getFreeDragPosition().x;
      this.phonePositions[$event.source.element.nativeElement.id].y += $event.source.getFreeDragPosition().y;
    }
  }

  openVerticallyCentered(): void {
    this.modalService.open(DeskModalComponent,{ centered: true });
  }

  closePopover(): void {
    this.popover.close();
  }

  isClicked(clicked: any): void {
    console.warn(this.popover);
    if (clicked === true) {
      this.closePopover();
    }
  }

  selectComponent(object: any): void {
    this.eventBus.emit(new EventData('selected',object));
    console.warn(object);
  }

  async findItemsByName(): Promise<any> {
    return await this.schemeService.search(this.searchField);
  }

  removeHighlight(): void {
    const deskRefs = this.elementRef.nativeElement.querySelectorAll('.desk');
    const deviceRefs = this.elementRef.nativeElement.querySelectorAll('.scheme-object');
    const phoneRefs = this.elementRef.nativeElement.querySelectorAll('.phone');

    deskRefs.forEach(((desk: { firstChild: { classList: { remove: (arg0: string) => void; }; }; classList: { remove: (arg0: string) => void; }; }) => {
      desk.firstChild.classList.remove('no-border');
      desk.classList.remove('highlight');
    }));
    deviceRefs.forEach(((device: { firstChild: { classList: { remove: (arg0: string) => void; }; }; classList: { remove: (arg0: string) => void; }; }) => {
      device.firstChild.classList.remove('no-border');
      device.classList.remove('highlight');
    }));
    phoneRefs.forEach(((phone: { firstChild: { classList: { remove: (arg0: string) => void; }; }; classList: { remove: (arg0: string) => void; }; }) => {
      phone.firstChild.classList.remove('no-border');
      phone.classList.remove('highlight');
    }));
  }

  async highlightFoundItems(): Promise<any> {
    this.removeHighlight();
    this.items = await this.findItemsByName();
    console.warn(this.items); // undefined;

    const deskRefs = this.elementRef.nativeElement.querySelectorAll('.desk');
    const deviceRefs = this.elementRef.nativeElement.querySelectorAll('.scheme-object');
    const phoneRefs = this.elementRef.nativeElement.querySelectorAll('.phone');

    const desks: SchemeDesk[] = Array.from(this.items.desks);
    const schemeObjects: SchemeObject[] = Array.from(this.items.devices);
    const phones: SchemePhone[] = Array.from(this.items.phones);

    if (Array.isArray(desks) && desks.length) {
      desks.forEach(desk => {
        deskRefs[desk.itemId].firstChild.classList.add('no-border');
        deskRefs[desk.itemId].classList.add('highlight');
      });
    }

    if (Array.isArray(schemeObjects) && schemeObjects.length) {
      schemeObjects.forEach(schemeObject => {
        deviceRefs[schemeObject.itemId].firstChild.classList.add('no-border');
        deviceRefs[schemeObject.itemId].classList.add('highlight');
      });
    }

    if (Array.isArray(phones) && phones.length) {
      phones.forEach(phone => {
        phoneRefs[phone.itemId].firstChild.classList.add('no-border');
        phoneRefs[phone.itemId].classList.add('highlight');
      });
    }
  }
}

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog.csdn.net/weixin_42420249/article/details/81191861 依赖版本报错：更换其他版本 无法下载依赖可参考：https://blog.csdn.net/weixin_42628809/a
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下 2021-12-03 13:33:33.927 ERROR 7228 [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPL
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://blog.csdn.net/weixin_43501566/article/details/112482302 # 在gradle-wrapper.properties 添加以下内容 org.gradle.jvmargs=-Df
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起作用 &lt;select id=&quot;xxx&quot;&gt; SELECT di.id, di.name, di.work_type, di.updated... &lt;where&gt; &lt;if test=&qu
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct redisServer’没有名为‘server_cpulist’的成员 redisSetCpuAffinity(server.server_cpulist); ^ server.c: 在函数‘hasActiveC
微服务启动错误：Command line is too long. Shorten command line for
解决方案1 1、改项目中.idea/workspace.xml配置文件，增加dynamic.classpath参数 2、搜索PropertiesComponent，添加如下 &lt;property name=&quot;dynamic.classpath&quot; value=&quot;tru
vue常见错误
删除根组件app.vue中的默认代码后报错：Module Error (from ./node_modules/eslint-loader/index.js): 解决方案：关闭ESlint代码检测，在项目根目录创建vue.config.js，在文件中添加 module.exports = { lin
spark常见错误
查看spark默认的python版本 [root@master day27]# pyspark /home/software/spark-2.3.4-bin-hadoop2.7/conf/spark-env.sh: line 2: /usr/local/hadoop/bin/hadoop: No s
matplotlib报错：AttributeError: module 'backend_interagg' has no attribute 'FigureCanvas'. Did you mean: 'FigureCanvasAgg'?
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
gitlab登录失败，报错：This challenge page was accidentally cached by an intermediary and is no longer available.
设置时间 控制面板
后端开发常见错误
错误1：Request method ‘DELETE‘ not supported 错误还原：controller层有一个接口，访问该接口时报错：Request method ‘DELETE‘ not supported 错误原因：没有接收到前端传入的参数，修改为如下 参考 错误2：cannot r
docker常见错误
错误1：启动docker镜像时报错：Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法：重启docker -&gt; systemctl r
idea常见错误
错误1：private field ‘xxx‘ is never assigned 按Altʾnter快捷键，选择第2项 参考：https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2：启动时报错，不能找到主启动类 #
pip安装依赖失败
报错如下，通过源不能下载，最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
maven常见错误
错误1：maven打包报错 错误还原：使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
cloud项目中常见错误
错误1：服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
springboot常见错误
错误1：运行项目后报如下错误 解决方案 报错2：Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案：在pom.
springmvc拦截器中使用redisTemplate报空指针异常
参考 错误原因 过滤器或拦截器在生效时，redisTemplate还没有注入 解决方案：在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
vite报错：npm ERR! command C:WINDOWSsystem32cmd.exe /d /s /c C:UsersychenAppDataLocalTempnpx-dde1c848.cmd
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot