react-bn-面试

news2025/2/13 16:49:06

1.主要内容

工作台待办

在这里插入图片描述
在这里插入图片描述
实现思路:

1,待办list由后端返回,固定需要的字段有id(查详细)、type(本条待办的类型),还可能需要时间,状态等
2,一个集中处理待办中转路由页,所有待办都跳转到这个页面然后用逻辑控制显示内容
3,动态待办子页面单独处理需要的逻辑
4,每次改变type的值都在redux中取
5,所有跟type相关的组件都做成一个配置文件,方便后续添加新组件

代码:
在这里插入图片描述

const toDoTask=(item)=>{
    console.log(item);
    const isComp=type2Comp[item.type]
    console.log(isComp);
    dispatch(setDyComp(item.type))
    if(isComp){//跳转路由
      navigate(`/todo/${item.id}`)

    }else{
      console.error(`Unknown type: ${item.type}`);
    }
}

中转页核心代码:

function withDynamicComponent(Component, parentProps) {
  if (!Component) {
    return <div>Component not found</div>;
  }

  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <Component props={parentProps} />
    </React.Suspense>
  );
}

type配置:

import Tax from '../tax/index'
import Apply from '../apply/index'
import Mail from '../mail/index'
import Text from '../text/index'
export const type2Comp = {
    tax: Tax,
    mail: Mail,
    text: Text,
    apply: Apply,
    // 增加一个路由就增加一个配置组件
    //这里还应该考虑一个type 可能有多个子页面,这种情况可以在子页面通过status再写子页面,类似树结构
   
  };

动态子组件

function Apply({props}) {
    return <div>
        apply
      <div>{props.name}</div>
      <div>{props.id}</div>
    </div>;
  }
  
  export default Apply;

登录

Cookie + Session 登录
Token 登录
SSO 单点登录

相关资料:https://blog.csdn.net/beekim/article/details/135130179

权限管理

1.接口权限(登录后存token,通过axios请求拦截器进行拦截,每次请求的时候头部携带token)
2.路由权限\菜单权限:
	a.路由的name、path、component统一存在后端,由后端返回。配置信息也可以提供界面统一管理。
	b.后端返回后,路由通过addRoute动态挂载,将component字段换为真正的组件(注意vite项目:import.meta.glob)
	c.将菜单和路由存在vuex/pinia实时变更页面

3.按钮权限
	a.在登录的时候拉取按钮权限编码code['EXPORT_LIST','OPEN_MODAL']
    b.将编码缓存本地
    c.页面通过v-if控制按钮或是自义定指令控制按钮


extra:
前端控制权限
//1.在路由配置中配置白名单
{
   name: "Login",
   path: "/login",
   component: () => import("@/views/Login.vue"),
   meta:{
		whiteList:['admin','tom']
	}
 },
 //2.在路由守卫beforeEach中判断当前用户角色是否在meta中,是就next()

正式的项目中,权限管理一般都是在后台维护的,也就是用户登录后,从接口获取该用户权限信息(菜单权限,按钮权限等)。要实现该功能,前端项目得提供基础功能用于维护,功能如下:

必备:
1,用户管理
简介:用户基础信息

2,角色管理
简介:配置每个用户的角色,一个用户可以有多个角色
作用:
a,可以在给每个角色配置上他能看到的菜单
b,后台可以根据角色来控制列表的数据权限,列表根绝相应的角色和部门信息返回不同的值
c,按钮权限控制也是要通过角色来配置
	
3,菜单管理
简介:配置项目中的菜单信息和按钮权限
参数:
*菜单类型:一级菜单、子菜单、按钮权限
*菜单名称:xxx
*访问路径:xxx(path)
*前端组件:xxx(component/element的位置)
其他参数:角色、图标、序号等

注:
type为子菜单时要显示父级菜单。
type按钮权限时要配置权限的编码code,方便使用时匹配对应的权限

其他:
部门管理
数据字典
分类字典

在项目中具体怎么使用?

1,获取菜单后怎么渲染?
2,怎么控制按钮权限?

1,获取菜单后怎么渲染?

通过接口返回后,就前端代码只需要写一个公共方法处理返回的data->项目能识别的路由

怎么识别?

import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

// 模拟从接口返回的字符串
const getElementFromApi = async () => {
  // 假设接口返回的字符串是组件的路径
  return 'pages/Home'; // 例如:'pages/Home'
};

// 动态导入组件的函数
const loadComponent = async (componentPath) => {
  try {
    const { default: Component } = await import(`./${componentPath}`);
    return Component;
  } catch (error) {
    console.error('Error loading component:', error);
    return null;
  }
};

const App = () => {
  const [routes, setRoutes] = React.useState([]);

  React.useEffect(() => {
    const fetchRoutes = async () => {
      const elementPath = await getElementFromApi();
      const Component = await loadComponent(elementPath);

      if (Component) {
        setRoutes([
          {
            path: '/',
            element: <Component />,
          },
        ]);
      }
    };

    fetchRoutes();
  }, []);

  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          {routes.map((route, index) => (
            <Route key={index} path={route.path} element={route.element} />
          ))}
        </Routes>
      </Suspense>
    </Router>
  );
};

export default App;

2,怎么控制按钮权限?

写一个hooks接受按钮权限编码code
a,在hooks查接口判断有没有权限
b,在登录时查询所有按钮权限编码['EXPORT_LIST','OPEN_MODAL'],缓存在本地,然后再在hooks去查本地有没有权限

文件上传

普通的文件上传

核心部分:
//创建流式读取器
const reader=new FileReader();
reader.readAsDataURL(this.files[0])

//input读取完成后自动执行onload函数
	reader.onload=function(e){
	preview.src=e.target.result
    console.log(e.target.result);
    //读取完成后将e.target.result传给服务器
    //ajax....
}

const formData = new FormData();
formData.append('BizType', props.bizType);//设置文件类型(合同材料,)
formData.append('file', resultFile);//文件
formData.append('businessId', props.businessId);//其他参数

const temp: any = await useUpLoadingUrl(fileParam.value);

上传成功后,会返回对应文件的下载地址用于回显

注意:这里没有考虑大文件上传,后台限制文件最大为50M

大文件上传(分片):

  <input type="file" id="fileInput" />
    <button id="uploadButton">上传</button>
  <div id="progress"></div>

<script>
document.getElementById('uploadButton').addEventListener('click', async () => {
  const fileInput = document.getElementById('fileInput') as HTMLInputElement;
  const file = fileInput.files?.[0];

  if (!file) {
    alert('请选择一个文件');
    return;
  }

  const chunkSize = 1024 * 1024; // 每个分片的大小,1MB
  const totalChunks = Math.ceil(file.size / chunkSize);
  const uploadProgress = document.getElementById('progress') as HTMLDivElement;

  for (let i = 0; i < totalChunks; i++) {
    const start = i * chunkSize;
    const end = Math.min(start + chunkSize, file.size);
    const chunk = file.slice(start, end);

    const formData = new FormData();
    formData.append('file', chunk, file.name);
    formData.append('chunkIndex', i.toString());
    formData.append('totalChunks', totalChunks.toString());

    try {
      const response = await fetch('/upload', {
        method: 'POST',
        body: formData,
      });

      if (!response.ok) {
        throw new Error('上传失败');
      }

      const progress = ((i + 1) / totalChunks * 100).toFixed(2);
      uploadProgress.innerText = `上传进度: ${progress}%`;
    } catch (error) {
      console.error('上传出错:', error);
      alert('上传失败');
      return;
    }
  }

  alert('上传完成');
});
</script>

改造?
老的文件上传所有文件存在阿里云上的,后续的投标时,需要批量下载投标材料,阿里云上无法确认文件的准确性。
改造后将所有上传的文件分类(身份证信息,毕业证信息等),存在公司自己的nas盘方便集中管理

如果文件为图片,后台有限制不能超过固定宽高,不同手机拍的照片上传后会有翻转的情况

限制宽高:
exif.js插件获取到旋转参数
判断图片方向,重置canvas大小,确定旋转角度,
image.onload里面获取图片宽高,判断是否满足,不满足的话就就创建canvas裁剪
var canvas = document.createElement('canvas');
var context: any = canvas.getContext('2d');
context.drawImage(image, 0, 0, drawWidth * 0.8, drawHeight);
//返回校正图片
next(canvas.toDataURL(v.file.type));

socket聊天

其他常见场景:
https://vue3js.cn/interview/http/WebSocket.html#%E4%BA%8C%E3%80%81%E7%89%B9%E7%82%B9

项目中用到的:advance-chat+socket.io
难点:
1.替换advance-chat源码中后台的firebase
看了源码,firebase有普通接口请求和ws事件请求两种功能,所以将相关代码拆成两块:普通接口,ws事件。再基于对soket.io的封装对firebase中关于ws事件那一块改写
2.socket.io的封装

1.本地创建了一个简单的node服务
/* 这里就是当客户端socket连接到服务端socket的生命周期 */
io.on("connection", function (socket) {
  /* io.emit(事件名,参数) */
  io.emit("message", "恭喜连接成功" );
 // 接受前台发过来的消息
  socket.on("sendToServer", (message) => {
    console.log(message);
    // 向客户端发送消息
    // socket.emit("sendToClient", {
    //   message: "你好我是服务端,让我们来聊天呀",
    // });
  });
});

  /* 指定连接的地址 */
      this.socket = io('ws://localhost:3333');
      this.socket.connect();
		
	//监听后台给前台发的消息
      this.socket.on('message', (message) => {
        console.log('我是客户端,接收到了数据', message);
        //业务逻辑
        if (message.type === 'getMsg') {
          console.log(message.id);
          this.getAutoChatData(message.roomId);
        }
      });

//前台给后台发的消息
      this.socket.emit('sendToServer', {
        message: '我是客户端,来陪我聊聊',
      });

更多细节见之前写的文章:
https://blog.csdn.net/beekim/article/details/135130179

几个重要的ws事件:
MessageUpdate 监听房间内的消息
RoomUpdate 监听左侧房间list
LastMessageUpdate 监听最后一条消息
如果ws监听到变化,就在相应的回调函数中更新页面上的数据

加解密

这一块主要看计算机网络方面的非对称加密:

非对称加密是一种加密方法,使用一对密钥:公钥和私钥。公钥用于加密数据,私钥用于解密数据。
公钥可以公开发布,而私钥必须保密。

加密过程:发送方使用接收方的公钥对数据进行加密,加密后的数据只能通过接收方的私钥解密。
解密过程:接收方使用自己的私钥对加密数据进行解密,恢复原始数据。

H5-原生相机

需求:在h5做身份证件拍照然后上传
方案:
利用 navigator.mediaDevices.getUserMedia 打开摄像头,将视频流放入 video 标签的 src 中,再通过 canvas.drawImage 的方法,以 video 对象为画布源,绘制最终拍照的图
问题:
1,安卓可以正常用video打开相机,ios有问题,打开时全屏的。
解决方案:

 <video ref="video"  id="video-fix" :width="width" :height="height"
  autoplay   webkit-playsinline playsinline></video>

ios端video标签必须加webkit-playsinline、playsinline属性。
android端部分视频也会存在自动全屏问题,添加webkit-playsinline属性。

2,拍出来的照片默认是640*480 ,照片不清晰
解决方案:

<video ref="video"  id="video-fix" width="1280" height="720" autoplay   webkit-playsinline playsinline></video>
<canvas ref="canvas" style="display: none" width="1280" height="720"></canvas>

video宽高要设置成 4:3或16:9才行,这里我设置成了1280*720

3,本地local能打开电脑前置,不是最终效果
localhost 只能调起电脑的前置摄像头,无法在手机本地调试。这是因为浏览器的安全限制,必须使用 https 才可以。所以需要让运维升级测试环境为https。所在在使用后置摄像头调试时非常麻烦,建议将需要调试的参数都设置成变量再逐一调试。

4,部分手机打开相机默认是放大的(手动设置焦距)

5,ios的css样式bug

原因是ios的游览器识别不到video实时的offsetHeight的值,所以在识别不到的时候,手动设置一下遮罩层的高度就可以了。
videoHeight.value=video.value.offsetHeight
if(video.value.offsetHeight<400){//解决ios不能获取到实时的offsetHeight的问题
  videoHeight.value=600
}

在这里插入图片描述

详细文档:https://blog.csdn.net/beekim/article/details/143680213?spm=1001.2014.3001.5502

H5-pdf文件预览

需求:有一个H5项目要嵌入我们的主项目,嵌入方案是用的iframe,但是在H5项目中需要预览pdf文件,这里再用Iframe就会出问题。
在这里插入图片描述
在多次查找和尝试后解决了预览pdf的问题:
方案:借助pdfjs插件,将pdf文件流/pdf下载链接,传入pdfjs,插件会读取文件并识别出一些文件信息,把pdf转为图片。我们再将图片绘制到cavans上就可以完美解决这个问题了。

核心代码如下:

<template>
  <div ref="showpdfRef"></div>
</template>

<script setup>
import { ref } from 'vue';
import { getDocument } from 'pdfjs-dist/legacy/build/pdf.mjs';
import 'pdfjs-dist/build/pdf.worker.mjs';

const showpdfRef = ref(null);

const pdfPath ='xxxxxxxx'

const loadingTask = getDocument(pdfPath);
loadingTask.promise
  .then(async (pdf) => {
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    // 循环遍历每一页pdf,将其转成图片
    for (let i = 1; i <= pdf._pdfInfo.numPages; i++) {
      // 获取pdf页
      const page = await pdf.getPage(i);
      // 获取页的尺寸
      const viewport = page.getViewport({ scale: 1 });
      // 设置canvas的尺寸
      canvas.width = viewport.width;
      canvas.height = viewport.height;
      // 将pdf页渲染到canvas上
      await page.render({ canvasContext: context, viewport: viewport }).promise;
      // 将canvas转成图片,并添加到页面上
      const img = document.createElement('img');
      img.src = canvas.toDataURL('image/png');
      showpdfRef.value.appendChild(img);
    }
   
  })
  .then(
    function () {
      console.log('# End of Document');
    },
    function (err) {
      console.error('Error: ' + err);
    },
  );
</script>

<style scoped></style>


详细文档:https://blog.csdn.net/beekim/article/details/144857593?spm=1001.2014.3001.5502

3.补充内容

flex

//容器属性
flex-direction
flex-wrap
flex-flow//flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
justify-content
align-items//flex-start、flex-end、center、baseline、stretch
align-content//属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用

//项目属性
order//设置顺序
flex-grow//设置放大比例(剩余空间分配比例(默认为0,不扩展))
flex-shrink//宽度不够时设置缩小比列(空间不足时收缩比例(默认为1,可收缩))
flex-basis//项目在分配剩余空间前的初始大小
flex//flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选
align-self//允许单个项目有与其他项目不一样的对齐方式

常见问题:
如何实现水平垂直居中?

.container {
  display: flex;
  justify-content: center; /* 主轴居中 */
  align-items: center;     /* 交叉轴居中 */
}

如何实现「圣杯布局」(Header + Footer + 自适应内容区)?

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.header { height: 60px; }
.content { flex: 1; } /* 占据剩余空间 */
.footer { height: 100px; }

flex-basis 和 width 的优先级

若 flex-direction: row,flex-basis 优先级高于 width

若 flex-basis 为 auto,则使用 width 的值

例外:min-width/max-width 会限制 flex-basis。

flex-shrink: 0 的作用

禁止项目在空间不足时收缩,常用于固定侧边栏:
.sidebar {
  flex: 0 0 250px; /* flex-grow:0, flex-shrink:0, flex-basis:250px */
}

为什么设置 flex:1 的项目宽度不一致?
原因:若项目内容长度差异大,且 flex-basis:0(即 flex:1),浏览器会优先按内容比例分配空间。

解决:设置 min-width: 0 或 overflow: hidden 重置内容最小尺寸。
Flex 布局中 margin: auto 的特殊效果
现象:在 Flex 项目中,margin: auto 会吸收剩余空间,实现特定对齐效果。

示例:单个项目右对齐 → margin-left: auto。

line-height:120% 和line-height:1.2区别?

在这里插入图片描述

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

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

相关文章

Linux:一切皆文件

**文件描述符**&#xff1a;它是一种特殊的索引&#xff0c;本质上是进程中file_struct结构体成员fd_array数组的下标。在Linux等系统中&#xff0c;文件描述符是一个非负整数&#xff0c;用于标识打开的文件&#xff0c;是内核为了高效管理已被打开的文件所创建的索引。通过文…

【物联网】ARM核常用指令(详解):数据传送、计算、位运算、比较、跳转、内存访问、CPSR/SPSR、流水线及伪指令

文章目录 指令格式&#xff08;重点&#xff09;1. 立即数2. 寄存器位移 一、数据传送指令1. MOV指令2. MVN指令3. LDR指令 二、数据计算指令1. ADD指令1. SUB指令1. MUL指令 三、位运算指令1. AND指令2. ORR指令3. EOR指令4. BIC指令 四、比较指令五、跳转指令1. B/BL指令2. l…

项目集成Nacos

文章目录 1.环境搭建1.创建模块 sunrays-common-cloud-nacos-starter2.目录结构3.pom.xml4.自动配置1.NacosAutoConfiguration.java2.spring.factories 5.引入cloud模块通用依赖 2.测试1.创建模块 sunrays-common-cloud-nacos-starter-demo2.目录结构3.pom.xml4.application.ym…

QT交叉编译环境搭建(Cmake和qmake)

介绍一共有两种方法&#xff08;基于qmake和cmake&#xff09;&#xff1a; 1.直接调用虚拟机中的交叉编译工具编译 2.在QT中新建编译套件kits camke和qmake的区别&#xff1a;CMake 和 qmake 都是自动化构建工具&#xff0c;用于简化构建过程&#xff0c;管理编译设置&…

[cg] 使用snapgragon 对UE5.3抓帧

最近想要抓opengl 的api&#xff0c;renderdoc在起应用时会闪退&#xff08;具体原因还不知道&#xff09;&#xff0c;试了下snapgraon, 还是可以的 官网需要注册登录后下载&#xff0c;官网路径&#xff1a;Developer | Qualcomm 为了方便贴上已经下载好的exe安装包&#x…

物业巡更系统在现代社区管理中的优势与应用探讨

内容概要 在现代社区管理中&#xff0c;物业巡更系统正逐渐成为一种不可或缺的工具。结合先进的智能技术&#xff0c;这些系统能够有效地提升社区管理的各个方面&#xff0c;尤其是在巡检效率和信息透明度方面。通过实时记录巡检数据&#xff0c;物业管理人员能够确保工作人员…

速通Docker === Docker Compose

目录 Docker Compose 简介 Docker Compose 常用命令 使用 Docker Compose 启动 WordPress 普通启动方式&#xff08;使用 Docker 命令&#xff09; 使用 Docker Compose 启动 Docker Compose 的特性 Docker Compose 简介 Docker Compose 是一个用于定义和运行多容器 Dock…

Spring MVC 综合案例

目录 一. 加法计算器 1. 准备工作 2. 约定前后端交互接口 需求分析 接口定义 3. 服务器端代码 4. 运行测试 二. 用户登录 1. 准备工作 2. 约定前后端交互接口 需求分析 接口定义 (1) 登录界面接口 (2) 首页接口 3. 服务器端代码 4. 运行测试 三. 留言板 1. 准备…

数据分析系列--③RapidMiner算子说明及数据预处理

一、算子说明 1 新建过程 2 算子状态灯 状态灯说明: (1)状态指示灯&#xff1a; 红色:指示灯说明有参数未被设置或输入端口未被连接等问题; 黄色:指示灯说明还未执行算子&#xff0c;不管配置是否基本齐全; 绿色:指示灯说明一切正常&#xff0c;已成功执行算子。 (2)三角…

NLP自然语言处理通识

目录 ELMO 一、ELMo的核心设计理念 1. 静态词向量的局限性 2. 动态上下文嵌入的核心思想 3. 层次化特征提取 1. 双向语言模型&#xff08;BiLM&#xff09; 2. 多层LSTM的层次化表示 三、ELMo的运行过程 1. 预训练阶段 2. 下游任务微调 四、ELMo的突破与局限性 1. 技术突破 2. …

Time Constant | RC 和 RL 电路中的时间常数

注&#xff1a;本文为 “Time Constant” 相关文章合辑。 机翻&#xff0c;未校。 How To Find The Time Constant in RC and RL Circuits June 8, 2024 &#x1f4a1; Key learnings: 关键学习点&#xff1a; Time Constant Definition: The time constant (τ) is define…

无心剑七绝《除夕快乐》

七绝除夕快乐 除旧迎新瑞气扬 夕阳烂漫映红妆 快言美酒佳肴味 乐享天伦福满堂 2025年1月28日 平水韵七阳平韵 无心剑这首七绝以“除夕快乐”为题&#xff0c;巧妙地运用了藏头手法&#xff0c;将“除夕快乐”四字分别嵌入诗的每一句首字&#xff0c;构思精巧&#xff0c;富有新…

Object类(3)

大家好&#xff0c;今天继续给大家介绍一下object类中的方法&#xff0c;那么话不多说&#xff0c;来看。 hashcode()这个方法,帮我们算了一个具体的对象位置,这里面涉及到数据结构,简单认为它是个内存地址,然后调用Integer.toHexString ()将这个地址以16进制输出。 该方法是一…

GPU上没程序在跑但是显存被占用

原因&#xff1a;存在僵尸线程&#xff0c;运行完但是没有释放内存 查看僵尸线程 fuser -v /dev/nvidia*关闭僵尸线程 pkill -9 -u 用户名 程序名 举例&#xff1a;pkill -9 -u grs python参考&#xff1a;https://blog.csdn.net/qq_40206371/article/details/143798866

2007-2020年各省国内专利申请授权量数据

2007-2020年各省国内专利申请授权量数据 1、时间&#xff1a;2007-2020年 2、来源&#xff1a;国家统计局、统计年鉴 3、指标&#xff1a;行政区划代码、地区名称、年份、国内专利申请授权量(项) 4、范围&#xff1a;31省 5、指标解释&#xff1a;专利是专利权的简称&…

python:洛伦兹变换

洛伦兹变换&#xff08;Lorentz transformations&#xff09;是相对论中的一个重要概念&#xff0c;特别是在讨论时空的变换时非常重要。在四维时空的背景下&#xff0c;洛伦兹变换描述了在不同惯性参考系之间如何变换时间和空间坐标。在狭义相对论中&#xff0c;洛伦兹变换通常…

电路研究9.2.3——合宙Air780EP中FTP——FTPGET 命令使用方法研究

怎么说呢&#xff0c;之前也是看的&#xff0c;但是也很迷茫&#xff0c;感觉上虽然是对的&#xff0c;但是无法联系到应用里面&#xff0c;今天研究一下FTP 命令使用方法吧。 15.29 使用方法举例 这里发现下面那些看的不懂呢&#xff0c;于是就返回FTP的应用了。 9.5.4 FTP 应…

ANSYS学习笔记(十)网格质量的诊断和提高

网格质量的好坏不能单纯只看meshing给出的网格质量结果&#xff0c;要根据实际的计算物理场景来判断&#xff0c;需要求解的地方物理量大梯度的位置网格越密越好。 网格质量&#xff1a;在有限网格数量限制下&#xff0c;离散误差小的网格是好网格&#xff0c;是高质量网格。网…

2024收尾工作

目录 开场白 栈与队列 LeetCode232. 用栈实现队列 LeetCode225. 用队列实现栈 LeetCode102. 二叉树的层序遍历 LeetCode103. 二叉树的锯齿形层序遍历 堆&#xff08;优先级队列&#xff09; 堆排序 LeetCode215. 数组中的第 k 个最大元素 总结 开场白 今天是除夕&…

搭建Spring Boot开发环境

JDK&#xff08;1.8及以上版本&#xff09; Apache Maven 3.6.0 修改settings.xml 设置本地仓库位置 <localRepository>D:/repository</localRepository> 设置远程仓库镜像 <mirror><id>alimaven</id><name>aliyun maven</name&…