首页技术栈归档照片墙音乐日记随想收藏夹友链留言关于

其他

写作时间：2026-07-08

其他

Layui动态表头

官网：http://layui.org.cn/docs/form/select.html

http://layui.org.cn/fly/extend/excel/index.html

http://layui.funadmin.com/web/demo/rate.html

后台

package com.baosight.bhcw.ch.wh.service;

import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.math.BigDecimal;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.apache.poi.xssf.streaming.SXSSFWorkbook;
import org.apache.poi.xssf.usermodel.XSSFCell;
import org.apache.poi.xssf.usermodel.XSSFRow;
import org.apache.poi.xssf.usermodel.XSSFSheet;
import org.apache.poi.xssf.usermodel.XSSFWorkbook;
import org.aspectj.weaver.bcel.AtAjAttributes;
import org.apache.poi.hssf.usermodel.HSSFCell;
import org.apache.poi.ss.usermodel.Cell;
import org.apache.poi.ss.usermodel.Row;
import org.apache.poi.ss.usermodel.Sheet;
import com.baosight.bhcw.ch.wh.domain.CHWH2002;
import com.baosight.iplat4j.core.ei.EiInfo;
import com.baosight.iplat4j.core.web.threadlocal.UserSession;

public class ServiceCHWH2003 extends com.baosight.bhcw.ch.BaseService{

	public EiInfo initLoad(EiInfo inInfo) {
		return inInfo;
	}	
	public EiInfo query(EiInfo inInfo){


		List<Map> maps=new ArrayList<>();


       HashMap<Object, Object> map1 = new HashMap<>();
	   map1.put("id","1001");
	   map1.put("username","掌声");
	   map1.put("sex","男");
	   map1.put("city", "浙江杭州");
	   map1.put("sign", "人生恰似一场修行");
		map1.put("experience", "116");
		maps.add(map1);

		  HashMap<Object, Object> map2 = new HashMap<>();
		   map2.put("id","1001");
		   map2.put("username","里四");
		   map2.put("sex","男");
		   map2.put("city", "浙江杭州");
		   map2.put("sign", "人生恰似一场修行");
			map2.put("experience", "116");
			maps.add(map2);


			  HashMap<Object, Object> map3 = new HashMap<>();
			   map3.put("id","1001");
			   map3.put("username","嘿嘿");
			   map3.put("sex","男");
			   map3.put("city", "浙江杭州");
			   map3.put("sign", "人生恰似一场修行");
			   map3.put("experience", "116");
				maps.add(map3);
				inInfo.set("queryResult",maps);
		return inInfo;
	}



public EiInfo query2(EiInfo inInfo){


		List<Map> maps=new ArrayList<>();
		List maps2=new ArrayList<>();

       HashMap<Object, Object> map1 = new HashMap<>();
	   map1.put("field","id");
	   map1.put("title","编号");

	   maps.add(map1);
       HashMap<Object, Object> map2 = new HashMap<>();
	   map2.put("field","username");
	   map2.put("title","用户");
	   maps.add(map2);
       HashMap<Object, Object> map3 = new HashMap<>();
	   map3.put("field","sign");
	   map3.put("title","签名");
	   maps.add(map3);
       HashMap<Object, Object> map4 = new HashMap<>();
	   map4.put("field","sex");
	   map4.put("title","性别");
	   maps.add(map4);
       HashMap<Object, Object> map5 = new HashMap<>();
	   map5.put("field","city");
	   map5.put("title","城市");
	   maps.add(map5);
       HashMap<Object, Object> map6 = new HashMap<>();
	   map6.put("field","experience");
	   map6.put("title","积分");
	   maps.add(map6);

	   maps2.add(maps);
		inInfo.set("head", maps2);

		return inInfo;
	}

}

前端

<!DOCTYPE html>
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="EF" tagdir="/WEB-INF/tags/EF" %>
 	 <%@ include file="../common/bp_head1.jsp"%>  
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
	<script type="text/javascript" src="./EF/iplat-ui-2.0.js"></script>
<link rel="stylesheet" href="../CH/js/layui/css/layui.css">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<EF:EFPage title="日库存" isFloat="false">

<div>


<div style="width:100%;margin: right auto;padding: 10px;">
 <div class="layui-form layui-row layui-col-space16" style="height:25px; ">



   <div style="float: left;font-size: 13px;margin-top: 6px;"><strong>存货大类:</strong></div>



  <div class="layui-form"   style="width:190px;height:20px;float: left;";>
  <select lay-filter="demo-select-filter">
    <option value="">请选择</option>
    <option value="AAA">选项 A</option>
    <option value="BBB">选项 B</option>
    <option value="CCC">选项 C</option>
  </select>
</div>

  <div style="float: left;font-size: 13px;margin-top: 7px;"><strong>基地:</strong></div>
  <div class="layui-form"   style="width:190px;height:20px;float: left;";>
  <select lay-filter="demo-select-filter">
    <option value="">请选择</option>
    <option value="AAA">选项 A</option>
    <option value="BBB">选项 B</option>
    <option value="CCC">选项 C</option>
  </select>
</div>

   </div>


   <div   class="layui-form"   style="margin-top: -10px;float: left;">
   <label class="layui-form-label"   style=""><strong>月份:</strong></label>
      <div class="layui-input-inline" ">
        <input type="text" class="layui-input" id="ID-laydate-type-month" placeholder="月份" >
      </div>
   </div>

    <div style="width:100px;margin-top: -10px;float:left;margin-left: 15px" > 
    <button class="layui-btn layui-btn-normal" id="cha">查询</button>
  </div>
</div>
<div style="margin-top: 30px; style="height:600px;">
<table class="layui-hide" id="ID-table-demo-data""></table>
</div>

</EF:EFPage>


<!-- 引入组件库 -->

<script src="./CH/js/layui/layui.js"></script>



<script>

var table = layui.table;
var dataTo=[];
var head=[[]];
layui.use('table', function(){


    var laydate = layui.laydate;

    // 年月选择器
    laydate.render({
      elem: '#ID-laydate-type-month',
      type: 'month',
      format: 'yyyyMM'
    });



	  // 已知数据渲染
	  var inst = table.render({
	    elem: '#ID-table-demo-data'
	    ,cols: [[ //标题栏

]]
	    ,data: [

	    ]
	    //,skin: 'line' // 表格风格
	    //,even: true
	    ,page: true // 是否显示分页
	    ,limits: [5, 10, 15]
	    ,limit: 10 // 每页默认显示的数量
	  });
	});

$("#cha").click(function () {
	 var inInfo = new EiInfo();



	    EiCommunicator.send("CHWH2003", "query2", inInfo, {
	        onSuccess: function (inInfo) {

	                 head =inInfo.get("head");

	     	    	console.log("head",inInfo.get("head"))
	        }, 
	        onFail: function (eMsg) {
	            alert("\u56de\u8c03\u5931\u8d25!");
	        }

	    }, {

	    	async:false
	    });


    EiCommunicator.send("CHWH2003", "query", inInfo, {
        onSuccess: function (inInfo) {


                 dataTo =inInfo.get("queryResult");


        }, 
        onFail: function (eMsg) {
            alert("\u56de\u8c03\u5931\u8d25!");
        }

    }, {

    	async:false
    });


    table.reload('ID-table-demo-data',{
   	 data:dataTo,
      cols:head
    });



    var form = layui.form;
    var layer = layui.layer;
    // select 事件
    form.on('select(demo-select-filter)', function(data){
      var elem = data.elem; // 获得 select 原始 DOM 对象
      var value = data.value; // 获得被选中的值
      var othis = data.othis; // 获得 select 元素被替换后的 jQuery 对象

      layer.msg(this.innerHTML + ' 的 value: '+ value); // this 为当前选中 <option> 元素对象
    });


})



</script>


<style type="text/css">

.i-theme-ant input.i-state-readonly, .i-theme-ant input[readonly=readonly]+span, .i-theme-ant input[readonly] {
    background: #FFFFFF;
    border-radius:4px ;
}


.layui-input-inline{
         border-radius:4px ;
}

.layui-laydate-list .layui-this {
   background: rgb(219,239,255);
    color: #fff!important;
}

#ID-laydate-type-month{
 height: 36px;
 width:150px;

}

  .layui-table-cell {
   height: 20px;
   line-height: 20px;
  }





.layui-form-select dl dd.layui-this {
  background-color: #ffffff;
  color: #000000;
}


.layui-form-select .layui-input {
  height: 2rem;
  padding-right: 30px;
  cursor: pointer;
  color: #000000;
  background: #FFFFFF;
<!-- border: 0.01rem solid #107eea; --> 

}

.layui-input .layui-unselect{
  background: #FFFFFF;
}

.layui-form-selected dl {
  display: block;
  background: #FFFFFF;
  color: #999;
}


.layui-form-select dl dd:hover {
   background: rgb(219,239,255);
  -webkit-transition: .5s all;
  transition: .5s all;
    color: #000000;

}
.layui-input:hover, .layui-textarea:hover {

    color: #000000;
}


.layui-laypage .layui-laypage-curr .layui-laypage-em{
  background-color: #107eea !important;
}

}
.layui-btn-normal {
    background-color: #1E9FFF;
}


.layui-btn {
    height: 32px;
    line-height: 32px;
    border: 1px solid transparent;
    padding: 0 18px;
    white-space: nowrap;
    text-align: center;
    font-size: 10px;
    border-radius: 2px;
    cursor: pointer;
}

  th  {
  background: rgb(219,239,255);
  color: #107eea;
  }
.layui-form{

}


#ID-laydate-type-month {
    height: 34px;
    width: 160px;
        border-radius:4px ;

}

 </style>

excel文件上传

UploadFile

/**
 * 文件上传
 */
@Controller
@CrossOrigin
@RequestMapping(value = "/ChuploadFile")
public class UploadFile {

    @ResponseBody
    @RequestMapping(value = "/upload2", method = RequestMethod.POST)
    public Object upload(@RequestParam(value = "multiFile", required = true) MultipartFile file,
                       HttpServletRequest request, HttpServletResponse response) throws Exception {
//
//        JSONObject returnJSON = new JSONObject();
//        response.setHeader("Content-type", "text/html;charset=UTF-8");


        response.setHeader("Content-type", "text/html;charset=UTF-8");
        JSONObject returnJSON = new JSONObject();
        String groupId = request.getParameter("groupId");
        String appCode=request.getParameter("appCode");
        String customFolder=request.getParameter("customFolder");
        String msg = "";
        // 判断file数组不能为空并且长度大于0
        if (file == null ) {
            msg = "上传失败 ！原因：参数file不能为空！";
            returnJSON.put("msg", msg);
            return returnJSON;
        }else {
            //上传路径保存设置
         //   String path = request.getServletContext().getRealPath("/wo/web/temp/upload/");
            File realPath = new File(System.getProperty("user.dir")+"/wo/web/temp/upload/");
            if (!realPath.exists()){
                realPath.mkdir();
            }

            System.out.println("上传文件保存地址："+realPath);
            file.transferTo(new File(realPath +"/"+ file.getOriginalFilename()));
            String fileName= realPath +"\\"+file.getOriginalFilename();
            System.out.println(fileName);

            MultipartFile multipartFile=file;
            Map inMap = new HashMap();
            inMap.put("appCode", appCode);
            inMap.put("customFolder", customFolder);
            inMap.put("groupId",groupId);//传入文件分组标识
            inMap.put("file",fileName);
            returnJSON = (JSONObject) JSONObject.toJSON(inMap);
            returnJSON.put("msg", "上传成功");

//            returnJSON.put("msg",fileName);
        }





        //    {recRevisor=admin, fileSize=6656, fileStatus=success,
        //    docId=94cb8ff4887683ea0188dcc955ef1235, groupId=wo,
        //    docUrl=http://eplattest.baogang.info/base-resource/doc/fileDownload/94cb8ff4887683ea0188dcc955ef1235,
        //    status=1}
        //上传文件地址


           return returnJSON;
    }



}

jsp

	<div class="layui-upload" id="layui-upload1" style="display:none;">
		<span class="layui-inline layui-upload-choose" id="layui-show-mes1">请上传xls格式文件</span>
		<button type="button" class="layui-btn layui-btn-normal" id="layui-chosefile1">选择文件</button>
		<button type="button" class="layui-btn" id="layui-ksupload1">开始上传</button>
<%--		<button type="button" class="layui-btn" style="margin-left:0px;" id="mbxz1">模板下载</button>--%>
		<br>
		<span class="layui-inline layui-upload-choose" id="layui-show-warning1" style="padding-top:10px;font-size:14px;"><i class="layui-icon" style="color:red">&#xe60b</i>请按照模板上传</span>
	</div>

js



$(function () {

   var upload = layui.upload;
   // queryset=__eiInfo.extAttr.webqueryset;
   // $.we_createWebQueryDiv(queryset);//创建查询





   $('#UPLOAD').click(function(){
      layer.open({
         type: 1,
         title:'预警数据维护上传',
         area: ['600px', '120px'],
         content: $("#layui-upload1"),
         offset: '180px',
         end: function(index, layero){
            $("#layui-upload1").hide();
         }
      });
   })

   var uploadInst = upload.render({
      elem: '#layui-chosefile1', //绑定元素
      accept:'file',
      exts:'xls',
      url: IPLATUI.CONTEXT_PATH+ "/ChuploadFile/upload2",//上传接口
      data:{
         groupId:'wo',
         appCode:'wo',
         customFolder:'bhwoWo',
         multiFile: function () {
            return FileInfo;
         }
      },
      before: function (obj) {//上传前
         //如果上传时需要带参数 参考下面
         layer.load(3,{shade: [0.5,'#fff']}); //上传loading
      },
      done: function(res,index){//上传成功后
         if(res.msg.indexOf("上传成功")!=-1){
            layer.closeAll();
            if(confirm(res.msg+",是否导入数据？"))
            {
               // alert(res.file);
               var inInfo = new EiInfo();
               inInfo.set("file_url",res.file);
               EiCommunicator.send("CHWH0001","act_deal", inInfo,{
                  onSuccess: function (inInfo) {

                     var flag = inInfo.get('flag');
                             if (flag==="成功") {
                         alert("数据导入成功")
                             }else {
                         alert("数据导入失败")
                             }

                  },
                  onFail: function (eMsg) {
                     alert("\u56de\u8c03\u5931\u8d25!");
                  }

               });
            }
            else{
               a
               layer.closeAll();
            }
         }
      },
      error: function(){alert("上传失败");},
      multiple:false,//单文件上传
      auto: false, //选择文件后不自动上传
      bindAction: '#layui-ksupload1', //指向一个按钮触发上传
      choose: function(obj){//选择文件的时候
         obj.preview(function(index, file, result){
            console.log(index); //得到文件索引
            console.log(file.name); //得到文件对象
            $("#layui-show-mes1").html(file.name);
            FileInfo=file;
         });
      }
   })



});



package com.baosight.bhwo.ch.wh.service;

import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.io.UnsupportedEncodingException;
import java.math.BigDecimal;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.ResultSetMetaData;
import java.sql.Statement;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.baosight.bhwo.ch.wh.domain.CHWH0001;
import org.apache.poi.hssf.usermodel.HSSFCell;
import org.apache.poi.hssf.usermodel.HSSFRow;
import org.apache.poi.hssf.usermodel.HSSFSheet;
import org.apache.poi.hssf.usermodel.HSSFWorkbook;
import org.apache.poi.poifs.filesystem.POIFSFileSystem;
import org.apache.poi.ss.usermodel.Cell;
import org.apache.poi.ss.usermodel.Row;
import org.apache.poi.ss.usermodel.Sheet;
import org.apache.poi.ss.usermodel.Workbook;
import org.apache.poi.ss.usermodel.WorkbookFactory;
import org.apache.poi.xssf.streaming.SXSSFWorkbook;

import com.baosight.bhwo.ch.zw.commen.JDBCUtils;
import com.baosight.bhwo.ch.util.DataUtils;
import com.baosight.bhwo.ch.wh.domain.CHWH0001;
import com.baosight.iplat4j.core.ei.EiBlock;
import com.baosight.iplat4j.core.ei.EiConstant;
import com.baosight.iplat4j.core.ei.EiInfo;
import com.baosight.iplat4j.core.web.threadlocal.UserSession;
import com.baosight.iplat4j.core.service.impl.ServiceEPBase;
import com.baosight.iplat4j.core.util.DateUtils;

import javax.servlet.http.HttpSession;

public class ServiceCHWH0001 extends com.baosight.bhwo.ch.BaseService{

	@Override
	public EiInfo initLoad(EiInfo inInfo) {
//		inInfo.addBlock(EiConstant.queryBlock).set(EiConstant.limitStr, 100);
		CHWH0001 CHWH0001 = new CHWH0001();
		EiInfo outInfo = super.initLoad(inInfo,CHWH0001);
		outInfo.getBlock(EiConstant.resultBlock).set(EiConstant.limitStr, 100);
		return outInfo;
	}



	public EiInfo act_deal (EiInfo inInfo)  throws Exception{


		String file_url=inInfo.getString("file_url");

		System.out.println("file_url====="+file_url);
		InputStream is=new FileInputStream(file_url);
		//POIFSFileSystem fs=new POIFSFileSystem(is);
		//创建处理excel 的工厂类，处理不同版本excel
		Workbook wb = WorkbookFactory.create(is);
		//HSSFWorkbook wb=new HSSFWorkbook(fs);
		Sheet hssfSheet=wb.getSheetAt(0); // 获取第一个Sheet页
		if(hssfSheet==null){
			return inInfo;
		}
		List<Map> db_list = null;

		Map paramMap=new HashMap();
		if( hssfSheet.getLastRowNum()>=1 &&  hssfSheet.getRow(1).getLastCellNum()>=0 ){
			String time = getValue(hssfSheet.getRow(1).getCell(0));
			String account = getValue(hssfSheet.getRow(1).getCell(15));
			paramMap.put("year", time);
			paramMap.put("account", account);
			System.out.println( "time: "+time );
//			db_list  =  dao.query("CHWH0001.query2",paramMap );
//			if(null != db_list && db_list.size()>0){
//				System.out.println( "db_list.size(): "+db_list.size() );
//			}
		}

		 List<String> list = new ArrayList<String>();
		for(int rowNum=1;rowNum<=hssfSheet.getLastRowNum();rowNum++){
				Row hssfRow=hssfSheet.getRow(rowNum);
				if(hssfRow==null){
					continue;
				}
				Cell hssfCell=hssfRow.getCell(2);
				 if ( !list.contains(getValue(hssfCell))) {//如果list数组不包括num[i]中的值的话，就返回true。
	                 list.add(getValue(hssfCell) ); //在list数组中加入num[i]的值。已经过滤过。
	             }
		}
		String flag="失败";

		//按年和季度删除数据
		for(int i=0; i<list.size(); i++){
			paramMap.put("quarterCode", list.get(i));
			dao.delete("CHWH0001.delete",paramMap );
		}

		CHWH0001 CHWH0001 = new CHWH0001();
		StringBuffer t = new StringBuffer("");
		for(int rowNum=1;rowNum<=hssfSheet.getLastRowNum();rowNum++){
			String  data[ ] = new String[16];
			Row hssfRow=hssfSheet.getRow(rowNum);
			if(hssfRow==null){
				continue;
			}
			for(int cellNum=0;cellNum<=15;cellNum++){
				Cell hssfCell=hssfRow.getCell(cellNum);
				if(hssfCell==null){
					continue;
				}
				t.append( getValue(hssfCell)+"    " );
				data[cellNum] = getValue(hssfCell);
			}
			CHWH0001.setYear(data[0]);
			CHWH0001.setValidMark(data[1]);
			CHWH0001.setQuarterCode (data[2]);
			CHWH0001.setQuarterName(data[3]);
			CHWH0001.setYjType(data[4]);
			CHWH0001.setFlName1(data[5]);
			CHWH0001.setFlCode1(data[6]);
			CHWH0001.setFlName2(data[7]);
			CHWH0001.setFlCode2(data[8]);
			CHWH0001.setUnit(data[9]);
			if(data[10] == null){
				CHWH0001.setTarget( null);
			}else{
				CHWH0001.setTarget(new BigDecimal(  data[10]+""  ));
			}
			if(data[11] == null){
				CHWH0001.setTargetMin( null);
			}else{
				CHWH0001.setTargetMin(new BigDecimal(  data[11]  ));
			}
			if(data[12] == null){
				CHWH0001.setTargetMax( null);
			}else{
				CHWH0001.setTargetMax(new BigDecimal(  data[12]  ));
			}
			if(data[13] == null){
				CHWH0001.setB_value( null);
			}else{
				CHWH0001.setB_value(new Long(  data[13]  ));
			}
			if(data[14] == null){
				CHWH0001.setE_value( null);
			}else{
				CHWH0001.setE_value(new Long(  data[14]  ));
			}

			CHWH0001.setAccount(data[15]);

             dao.insert("CHWH0001.insert", CHWH0001);

			t.append( "    \n " );

			flag="成功";
		}
		System.out.println("flag==============="+flag);
		System.err.print( "++++++"+t.toString() );
		inInfo.set("execl1", t.toString() );
		inInfo.set("flag",flag);
		return inInfo;
	}


	private static String getValue(Cell cell){
		if(cell==null){
			return null;
		}
        String cellValue = null;      
        switch (cell.getCellType()) {      
	        case HSSFCell.CELL_TYPE_STRING://字符串类型   
	            cellValue = cell.getStringCellValue();      
	            if(cellValue.trim().equals("")||cellValue.trim().length()<=0)      
	                cellValue=" ";      
	            break;      
	        case HSSFCell.CELL_TYPE_NUMERIC: //数值类型   
	            cellValue = String.valueOf(cell.getNumericCellValue());      
	            break;      
	        case HSSFCell.CELL_TYPE_FORMULA: //公式   
	            cell.setCellType(HSSFCell.CELL_TYPE_NUMERIC);      
	            cellValue = String.valueOf(cell.getNumericCellValue());      
	            break;      
	        case HSSFCell.CELL_TYPE_BLANK:      
	            cellValue=null;      
	            break;      
	        case HSSFCell.CELL_TYPE_BOOLEAN:      
	            break;      
	        case HSSFCell.CELL_TYPE_ERROR:      
	            break;      
	        default:      
	            break;      
        }      
        return cellValue;      
	}









}

nodejs版本管理工具

注意：如果已经安装了node，那么在安装nvm之前，需要先卸载node，如果没有安装可以直接跳过这一步到下一步了

为了确保彻底删除node，看下node安装目录中还有没有node文件夹，有的话一起删除。
删除以下文件夹（如果存在的话）
C:\Program Files (x86)\Nodejs
C:\Program Files\Nodejs
C:\Users{User}\AppData\Roaming\npm
C:\Users{User}\AppData\Roaming\npm-cache
删除C:\Users\用户名 下的 .npmrc文件以及 .yarnrc 文件
环境变量中npm、node的所有相关统统删掉

1.nvm

nvm（node.js version management），是一个nodejs的版本管理工具。nvm和n都是node.js版本管理工具，为了解决node.js 各种版本存在不兼容现象 可以通过它可以安装和切换不同版本的node.js。【可同时在一个环境中安装多个node.js版本（和配套的npm）

官网：https://github.com/coreybutler/nvm-windows/releases

安装完nvm后先不要着急安装node版本。

找到nvm安装路径 =》找到 setting.txt 文件 =》新增两行信息，配置下载源

node_mirror: https://npmmirror.com/mirrors/node/
npm_mirror: https://npmmirror.com/mirrors/npm/

保留一下即可

第一行是 nvm安装路径 第二行是 nodejs路径 第三行是 node下载镜像 第四行是 npm下载镜像

2.检查检查nvm是否安装完成

win + R，调用cmd，输入nvm，出现下面这一堆就表示安装成功了。

如果安装不成功，查看之前自己安装的 node.js 有没有彻底删除、安装nvm过程中有没有漏掉什么，可重新卸载再安装一次nvm包。

3.使用nvm安装node版本

win + R，调用cmd

安装完成后开始插入nodejs首先使用 nvm list available 查询可插入版本号，LST表示可插入稳定版本。【如未指定版本，建议安装LTS下的版本】

  1. 安装指定node.js版本 ： nvm install 16.14.0
  2. nvm use 切换node版本。(如果报错，用管理员身份打开重新 nvm use 你指定的版本） ：nvm use 16.14.0
  3. 安装完成后可以分别输入命令行 node -v 和 npm -v，检验node.js以及对应npm是否安装成功

  1. nvm list

查看当前已安装的node.js版本，带*号的是正在使用的：

nvm list 或者 nvm ls

5、修改npm默认镜像源为淘宝镜像

修改npm镜像源为淘宝镜像，加快npm包的下载速度，减少发生连接错误和超时的概率。

npm config set registry https://registry.npmmirror.com

检查是否设置淘宝镜像成功（会返回这个地址表示成功：https://registry.npmmirror.com）

npm config get registry

关于使用 淘宝镜像 https://registry.npm.taobao.org 报错的问题

是因为从 2024 年1 月 22 日，淘宝原镜像域名（registry.npm.taobao.org）的 HTTPS 证书正式到期，这就导致旧的 npm 淘宝镜像在使用时出错了，所以遇到上述问题，或者还在使用旧的 npm 淘宝镜像，直接将 npm 源切换到新的源即可

// 1. 清空缓存
npm cache clean --force
// 2. 切换新源
npm config set registry https://registry.npmmirror.com

6.使用 nrm 来管理 npm 源

nrm（npm registry manager）是一个用于管理和切换 npm 源的命令行工具。它允许您在不同的 npm 源之间进行切换，以加快包的下载速度，或者解决特定源无法访问的问题。nrm 提供了一组命令，可以列出可用的 npm 源、添加新源、测试源的响应速度，并切换当前使用的源。

首先，通过以下命令来安装 nrm：

npm install -g nrm

以下是一些常见的 nrm 命令：

1）列出可用的源：当前配置的所有可用 npm 源以及它们的名称和 URL。

nrm ls

2）切换源：将当前的 npm 源切换为指定的源。可以使用源的名称或 URL 作为 参数。

nrm use <registry>

3）添加源：添加一个新的 npm 源并指定其名称和 URL。

nrm add <registry> <url>

4）删除源：删除指定的 npm 源，需要提供源的名称或 URL 作为 参数。

nrm del <registry>

5）测试源的速度：测试指定源的响应速度，并显示测试结果。

nrm test <registry>

6）显示当前使用的源：当前正在使用的 npm 源的名称和 URL。

nrm current

VUE3使用的新框架组件arco-design—vue

官网：https://arco.design/vue/docs/start

安装

npm install --save-dev @arco-design/web-vue

在main.js配置

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ArcoVue from '@arco-design/web-vue'  #引入arco-design—vue组件框架

import App from './App.vue'
import router from './router'
import '@arco-design/web-vue/dist/arco.css'   #引入arco-design—vue组件样式

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(ArcoVue);  #注册框架
app.mount('#app')

在App.vue写入

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const columns = [
      {
        title: 'Name',
        dataIndex: 'name',
      },
      {
        title: 'Salary',
        dataIndex: 'salary',
      },
      {
        title: 'Address',
        dataIndex: 'address',
      },
      {
        title: 'Email',
        dataIndex: 'email',
      },
    ];
    const data = reactive([{
      key: '1',
      name: 'Jane Doe',
      salary: 23000,
      address: '32 Park Road, London',
      email: 'jane.doe@example.com'
    }, {
      key: '2',
      name: 'Alisa Ross',
      salary: 25000,
      address: '35 Park Road, London',
      email: 'alisa.ross@example.com'
    }, {
      key: '3',
      name: 'Kevin Sandra',
      salary: 22000,
      address: '31 Park Road, London',
      email: 'kevin.sandra@example.com'
    }, {
      key: '4',
      name: 'Ed Hellen',
      salary: 17000,
      address: '42 Park Road, London',
      email: 'ed.hellen@example.com'
    }, {
      key: '5',
      name: 'William Smith',
      salary: 27000,
      address: '62 Park Road, London',
      email: 'william.smith@example.com'
    }]);

    return {
      columns,
      data
    }
  },
}
</script>


<template>
  <a-table :columns="columns" :data="data" />

</template>

<style scoped>

</style>

出来如下图则成功

avatar

yuanyourdomain

写代码，做研究，记录生活。

RECOMMENDED

MyBatis 动态 SQL

2026-07-08

Nginx 基础入门

2026-07-08

Maven 多模块与私服

2026-07-08