caicai1170733165
caicai1170733165

extJS checkBoxColunmTree 可以选择带checkBox的树（tree、grid）

checkBoxColunmTree.html

可以选择节点的多列的树，也可以说是可以分组选择的grid。既是tree也是grid。

column-tree.css这个文件在ext2.2版本中的ext-2.2/examples/tree这个目录下会找到这个文件的。

 

[xhtml]  view plain copy print ?
  1. >  
  2. <html>  
  3.   <head>  
  4.     <title>checkBoxColunmTree.htmltitle>  
  5.       
  6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  7.     <meta http-equiv="description" content="this is my page">  
  8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  9.     <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />  
  10.     <link rel="stylesheet" type="text/css" href="ext/resources/css/column-tree.css" />  
  11.     <script type="text/javascript" src="ext/adapter/ext/ext-base.js">script>  
  12.     <script type="text/javascript" src="ext/ext-all.js">script>  
  13.     <script type="text/javascript" src="ext/ColumnTree.js">script>  
  14.       
  15.     <script type="text/javascript">  
  16.         Ext.onReady(function () {  
  17.             Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';  
  18.             var tree = new Ext.tree.ColumnTree({     
  19.                 width:568,     
  20.                 height:300,     
  21.                 border: false,     
  22.                 lines: false,     
  23.                 animate: false,     
  24.                 rootVisible: false,     
  25.                 autoScroll:true,     
  26.                 checkModel:'cascade',//级联多选，如果不需要checkbox,该属性去掉     
  27.                 onlyLeafCheckable: false,//所有结点可选，如果不需要checkbox,该属性去掉     
  28.                 loader: new Ext.tree.TreeLoader({  
  29.                     dataUrl: '../TreeDataServlet',//'column-data.json',  
  30.                     uiProviders:{  
  31.                         'col': Ext.ux.ColumnTreeCheckNodeUI//如果不需要checkbox,则需要使用Ext.tree.ColumnTreeNodeUI     
  32.                     }  
  33.                 }),  
  34.                 columns:[     
  35.                     { header:'商品名称', width:170, dataIndex:'commodityName'},     
  36.                     { header:'编号', width:70, dataIndex:'id'},    
  37.                     { header:'代理/公司', width:180, dataIndex:'proxyName' },     
  38.                     { header:'价格', width:70, dataIndex:'price'}    
  39.                 ],     
  40.                 root: new Ext.tree.AsyncTreeNode({  
  41.                     text: '代理/公司'  
  42.                 }),  
  43.                 tbar:['公司名称：',{xtype:'textfield',id:'proxyName'},'商品名称：',{xtype:'textfield',id:'commodityName'},{text:'查询'}]     
  44.             });     
  45.             var win = new Ext.Window({     
  46.                 title: 'Example column tree',     
  47.                 width:582,     
  48.                 height:388,     
  49.                 border :true,     
  50.                 resizable : false,     
  51.                 items: tree,     
  52.                 buttonAlign:'center',     
  53.                 buttons:[{text:'确定'},{text:'关闭'}]     
  54.             });     
  55.             win.show();    
  56.         });  
  57.     script>  
  58.   head>  
  59.     
  60.   <body>  
  61.   body>  
  62. html>  
  

 

 

后台java代码

TreeDataServlet.java

 

[java]  view plain copy print ?
  1. package com.hoo.servlet;  
  2. import java.io.IOException;  
  3. import java.io.PrintWriter;  
  4. import javax.servlet.ServletException;  
  5. import javax.servlet.http.HttpServlet;  
  6. import javax.servlet.http.HttpServletRequest;  
  7. import javax.servlet.http.HttpServletResponse;  
  8. public class TreeDataServlet extends HttpServlet {  
  9.     public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
  10.         this.doPost(request, response);  
  11.     }  
  12.     public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
  13.         response.setContentType("text/text");  
  14.         response.setCharacterEncoding("UTF-8");  
  15.         PrintWriter out = response.getWriter();  
  16.           
  17.         StringBuffer resultStr = new StringBuffer();  
  18.         resultStr.append("[{");  
  19.         resultStr.append("id: ' 10000',");  
  20.         resultStr.append("commodityName: '微软鼠标',");  
  21.         resultStr.append("uiProvider: 'col',");  
  22.         //得到group 值  
  23.         resultStr.append("children: [{");  
  24.             resultStr.append("id: ' 100000',");  
  25.             resultStr.append("proxyName: '微软代理商-中国代理 联强 ',");  
  26.             resultStr.append("commodityName: 'IO 1.0',");  
  27.             resultStr.append("price: '198.00',");  
  28.             resultStr.append("leaf:true,");  
  29.             resultStr.append("uiProvider: 'col'},");  
  30.               
  31.             resultStr.append("{id: ' 100000',");  
  32.             resultStr.append("proxyName: '微软代理商-中国代理 联强 ',");  
  33.             resultStr.append("commodityName: 'IE 3.0',");  
  34.             resultStr.append("price: '298.00',");  
  35.             resultStr.append("leaf:true,");  
  36.             resultStr.append("uiProvider: 'col'},");  
  37.               
  38.             resultStr.append("{id: ' 100000',");  
  39.             resultStr.append("proxyName: '微软代理商-中国代理 联强 ',");  
  40.             resultStr.append("commodityName: 'IO 2.0',");  
  41.             resultStr.append("price: '200.00',");  
  42.             resultStr.append("leaf:true,");  
  43.             resultStr.append("uiProvider: 'col'");  
  44.             resultStr.append("}]},{");  
  45.             resultStr.append("id: ' 20000',");  
  46.             resultStr.append("commodityName: '罗技鼠标',");  
  47.             resultStr.append("uiProvider: 'col',");  
  48.             //得到group 值  
  49.             resultStr.append("children: [{");  
  50.                 resultStr.append("id: ' 100001',");  
  51.                 resultStr.append("proxyName: '罗技',");  
  52.                 resultStr.append("commodityName: 'max 500',");  
  53.                 resultStr.append("price: '298.00',");  
  54.                 resultStr.append("leaf:true,");  
  55.                 resultStr.append("uiProvider: 'col'},");  
  56.                   
  57.                 resultStr.append("{id: ' 100000',");  
  58.                 resultStr.append("proxyName: '罗技',");  
  59.                 resultStr.append("commodityName: 'max 518',");  
  60.                 resultStr.append("price: '298.00',");  
  61.                 resultStr.append("leaf:true,");  
  62.                 resultStr.append("uiProvider: 'col'},");  
  63.                   
  64.                 resultStr.append("{id: ' 100000',");  
  65.                 resultStr.append("proxyName: '罗技',");  
  66.                 resultStr.append("commodityName: 'max 520',");  
  67.                 resultStr.append("price: '245.00',");  
  68.                 resultStr.append("leaf:true,");  
  69.                 resultStr.append("uiProvider: 'col'");  
  70.                 resultStr.append("}]");  
  71.         resultStr.append("}]");  
  72.           
  73.         out.print(resultStr.toString());  
  74.         out.flush();  
  75.         out.close();  
  76.     }  
  77. }  

 


 

 

ext/ColumnTree.js

这个是扩展Ext.tree.ColumnTree的组件，只是添加了一个Ext.ux.ColumnTreeCheckNodeUI组件。有了这个组件我们才可以选择节点，所以这个是必须的；

 

[javascript]  view plain copy print ?
  1. /* 
  2.  * Ext JS Library 2.0 
  3.  * Copyright(c) 2006-2007, Ext JS, LLC. 
  4.  * [email protected] 
  5.  *  
  6.  * http://extjs.com/license 
  7.  */  
  8. Ext.tree.ColumnTree = Ext.extend(Ext.tree.TreePanel, {  
  9.     //lines:false,  
  10.     borderWidth: Ext.isBorderBox ? 0 : 2, // the combined left/right border for each cell  
  11.     cls:'x-column-tree',  
  12.     scrollOffset : 18,  
  13.       
  14.     onRender : function(){  
  15.         Ext.tree.ColumnTree.superclass.onRender.apply(this, arguments);  
  16.         this.headers = this.body.createChild(  
  17.             {cls:'x-tree-headers '},this.body.dom);  
  18.         var cols = this.columns, c;  
  19.         var totalWidth = 0;  
  20.         for(var i = 0, len = cols.length; i < len; i++){  
  21.              c = cols[i];  
  22.              totalWidth += c.width;  
  23.              this.headers.createChild({  
  24.                  cls:'x-tree-hd ' + (c.cls?c.cls+'-hd':''),  
  25.                  cn: {  
  26.                      cls:'x-tree-hd-text',  
  27.                      html: c.header  
  28.                  },  
  29.                  style:'width:'+(c.width-this.borderWidth)+'px;'  
  30.              });  
  31.         }  
  32.           
  33.         this.headers.createChild({  
  34.              cls:'x-tree-hd ',  
  35.              cn: {  
  36.                  html: ''  
  37.              },  
  38.              style:'width:'+this.scrollOffset+'px;'  
  39.          });  
  40.         totalWidth += this.scrollOffset;  
  41.           
  42.         this.headers.createChild({cls:'x-clear'});  
  43.         // prevent floats from wrapping when clipped  
  44.         this.headers.setWidth(totalWidth);  
  45.         totalWidth -= this.scrollOffset;  
  46.         this.innerCt.setWidth(totalWidth);  
  47.     }  
  48. });  
  49. Ext.tree.ColumnTreeNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {  
  50.     focus: Ext.emptyFn, // prevent odd scrolling behavior  
  51.     renderElements : function(n, a, targetNode, bulkRender){  
  52.         this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';  
  53.         var t = n.getOwnerTree();  
  54.         var cols = t.columns;  
  55.         var bw = t.borderWidth;  
  56.         var c = cols[0];  
  57.         var cb = typeof a.checked == 'boolean';  
  58.         if(typeof this.checkModel != 'undefined'){  
  59.             cb = (!this.onlyLeafCheckable || n.isLeaf());  
  60.         }  
  61.         var href = a.href ? a.href : Ext.isGecko ? "" : "#";  
  62.         var buf = [',n.id,'" class="x-tree-node-el x-tree-node-leaf x-unselectable ', a.cls,'" unselectable="on">',  
  63.                 ',c.width-bw,'px;">',  
  64.                     '',this.indentMarkup,"",  
  65.                     ', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow">',  
  66.                     ', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on">',  
  67.                     cb ? (' + (a.checked ? 'checked="checked" />' : '/>')) : '',  
  68.                     ',href,'" tabIndex="1" ',  
  69.                     a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '>',  
  70.                     '', n.text || (a[c.dataIndex]?(c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]):'')," ",  
  71.                 "
"];  
  •          for(var i = 1, len = cols.length; i < len; i++){  
  •              c = cols[i];  
  •              buf.push(',(c.cls?c.cls:''),'" style="width:',c.width-bw,'px;">',  
  •                         '',(a[c.dataIndex]?(c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]):'')," 
    • ",  
  •                       "
    • ");  
  •          }  
  •          buf.push('
    • ',  
  •             '
    • ',  
  •             '',  
  •             "
    • ");  
  •               
  •         if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){  
  •             this.wrap = Ext.DomHelper.insertHtml("beforeBegin",n.nextSibling.ui.getEl(), buf.join(""));  
  •         }else{  
  •             this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));  
  •         }  
  •         this.elNode = this.wrap.childNodes[0];  
  •         this.ctNode = this.wrap.childNodes[1];  
  •         var cs = this.elNode.firstChild.childNodes;  
  •         this.indentNode = cs[0];  
  •         this.ecNode = cs[1];  
  •         this.iconNode = cs[2];  
  •           
  •         var index = 3;  
  •         if(cb){  
  •             this.checkbox = cs[3];  
  •             index++;  
  •         }  
  •         this.anchor = cs[index];  
  •         this.textNode = cs[index].firstChild;  
  •     }  
  • });  
  • //这个组件是扩展的，加入这个组件即可  
  • Ext.ux.ColumnTreeCheckNodeUI = function() {  
  •     //多选: 'multiple'(默认)  
  •     //单选: 'single'  
  •     //级联多选: 'cascade'(同时选父和子);'parentCascade'(选父);'childCascade'(选子)  
  •     this.checkModel = 'multiple';  
  •       
  •     //only leaf can checked  
  •     this.onlyLeafCheckable = false;  
  •       
  •     Ext.ux.ColumnTreeCheckNodeUI.superclass.constructor.apply(this, arguments);  
  • };  
  • Ext.extend(Ext.ux.ColumnTreeCheckNodeUI, Ext.tree.ColumnTreeNodeUI, {  
  •       
  •     renderElements : function(n, a, targetNode, bulkRender){  
  •         var t = n.getOwnerTree();  
  •         this.checkModel = t.checkModel || this.checkModel;  
  •         this.onlyLeafCheckable = t.onlyLeafCheckable || false;  
  •           
  •         Ext.ux.ColumnTreeCheckNodeUI.superclass.renderElements.apply(this, arguments);  
  •           
  •         var cb = (!this.onlyLeafCheckable || n.isLeaf());  
  •         if(cb){  
  •             Ext.fly(this.checkbox).on('click', this.check.createDelegate(this,[null]));  
  •         }  
  •     },  
  •       
  •     // private  
  •     check : function(checked){  
  •         var n = this.node;  
  •         var tree = n.getOwnerTree();  
  •         this.checkModel = tree.checkModel || this.checkModel;  
  •           
  •         if( checked === null ) {  
  •             checked = this.checkbox.checked;  
  •         } else {  
  •             this.checkbox.checked = checked;  
  •         }  
  •           
  •         n.attributes.checked = checked;  
  •         tree.fireEvent('check', n, checked);  
  •           
  •         if(!this.onlyLeafCheckable){  
  •             if(this.checkModel == 'cascade' || this.checkModel == 'parentCascade'){  
  •                 var parentNode = n.parentNode;  
  •                 if(parentNode !== null) {  
  •                     this.parentCheck(parentNode,checked);  
  •                 }  
  •             }  
  •             if(this.checkModel == 'cascade' || this.checkModel == 'childCascade'){  
  •                 if( !n.expanded && !n.childrenRendered ) {  
  •                     n.expand(false,false,this.childCheck);  
  •                 }else {  
  •                     this.childCheck(n);    
  •                 }  
  •             }  
  •         } else if(this.checkModel == 'single'){  
  •             var checkedNodes = tree.getChecked();  
  •             for(var i=0;i
  •                 var node = checkedNodes[i];  
  •                 if(node.id != n.id){  
  •                     node.getUI().checkbox.checked = false;  
  •                     node.attributes.checked = false;  
  •                     tree.fireEvent('check', node, false);  
  •                 }  
  •             }  
  •         }  
  •     },  
  •       
  •     // private  
  •     childCheck : function(node){  
  •         var a = node.attributes;  
  •         if(!a.leaf) {  
  •             var cs = node.childNodes;  
  •             var csui;  
  •             for(var i = 0; i < cs.length; i++) {  
  •                 csui = cs[i].getUI();  
  •                 if(csui.checkbox.checked ^ a.checked)  
  •                     csui.check(a.checked);  
  •             }  
  •         }  
  •     },  
  •       
  •     // private  
  •     parentCheck : function(node ,checked){  
  •         var checkbox = node.getUI().checkbox;  
  •         if(typeof checkbox == 'undefined')return ;  
  •         if(!(checked ^ checkbox.checked))return;  
  •         if(!checked && this.childHasChecked(node))return;  
  •         checkbox.checked = checked;  
  •         node.attributes.checked = checked;  
  •         node.getOwnerTree().fireEvent('check', node, checked);  
  •           
  •         var parentNode = node.parentNode;  
  •         if( parentNode !== null){  
  •             this.parentCheck(parentNode,checked);  
  •         }  
  •     },  
  •       
  •     // private  
  •     childHasChecked : function(node){  
  •         var childNodes = node.childNodes;  
  •         if(childNodes || childNodes.length>0){  
  •             for(var i=0;i
  •                 if(childNodes[i].getUI().checkbox.checked)  
  •                     return true;  
  •             }  
  •         }  
  •         return false;  
  •     },  
  •       
  •     toggleCheck : function(value){  
  •         var cb = this.checkbox;  
  •         if(cb){  
  •             var checked = (value === undefined ? !cb.checked : value);  
  •             this.check(checked);  
  •         }  
  •     }  
  • });  

    你可能感兴趣的:(【extjs】)

    • NextJs - 服务端组件如何拿到当前页面的URL或者参数 Zong_0915 javascript前端开发语言NextJs
      NextJs-服务端组件如何拿到当前页面的URL或者参数前言一.NextJs如何拿到当前页面URL二.NextJs拿URL参数的两种方式前言NextJs中，如果你是服务端组件，并且是App路由模式，如果想拿到当前URL，我们只能通过中间件获取，并通过header来实现交互。想再学习下中间件的可以参考我的这篇文章：NextJs初级篇-安装|路由|中间件一.NextJs如何拿到当前页面URL我们编写根
    • NextJs - antd5 降级兼容方案 Zong_0915 NextJsantd前端
      NextJs-antd5降级兼容方案前言一.降级解决方案1.1解决message等通知静态方法的样式丢失问题1.1解决非静态的样式兼容前言目前antd5对于SSR的兼容还有各方面都是很不错的，比如性能、UI设计等，不过，我们作为开发人员，在使用antd5作为UI组件库的时候，还需要考虑版本兼容问题，这里就说明下NextJs中如何进行antd5的降级。和本篇内容有关的前序文章：NextJs-SSR渲
    • Mongodb Error: queryTxt ETIMEOUT xxxx.wwwdz.mongodb.net 佛一脚 errorreactmongodb数据库
      背景每天都能遇到奇怪的问题，做个记录，以便有缘人能得到帮助！换了一台电脑开发nextjs程序。需要连接mongodb数据，对数据进行增删改查。上一台电脑好好的程序，新电脑死活连不上mongodb数据库。同一套代码，没任何修改，搞得我怀疑人生了，打开浏览器进入mongodb官网毫无问题，也能进入线上系统查看数据，网络应该是没问题。于是我尝试了一下手机热点，这次代码能正常跑起来，连接数据库了！！！是不
    • 【网络安全】URL解析器混淆绕过CSP实现XSS 秋说 网络安全web安全xss漏洞挖掘
      未经许可，不得转载。文章目录前言正文前言许多流行的静态网站生成器都存在图像CDN功能，它们通过优化网站中的图像来加快页面加载速度。例如：1、OptimizingImages|Next.js利用内置的next/image组件优化图像（nextjs.org）2、NuxtImage:Nuxt应用的图像优化即插即用的图像优化功能，使用内置优化器对图像进行调整（image.nuxt.com）这些工具的目标都
    • Java 上传读取Excel文件 Ben_1043556915 Java进阶javaservlet开发语言
      Web中導入Excel文件ExtJs前端代碼://=========上傳Excel=============================uploadPanel=newExt.form.FormPanel({fileUpload:true,id:'fileUploadForm',frame:true,labelAlign:'right',buttonAlign:'center',labelWid
    • NextJs 请求数据 （fetch axios） Nightne reactjses6
      NextJs请求数据（fetchaxios）在使用nextJs请求数据之前首先我们来说一下nextJsnextJs是一个轻量级的react服务端渲染应用框架，所以他不用考虑前端经常要涉及到的跨域nextJs不用写router即路由的配置只需在pages下创建js文件即生成路由路径例如创建about.js就可以用过localhost:3000/about访问的到请求数据官方推荐的是fetch注意fe
    • nextjs代理转发fetch请求封装 lllomh #SSR#React我的代码世界vue.jsjavanode.jsnuxt
      demo请狠狠的戳这里https://download.lllomh.com/cliect/#/product/G909746950517113一.配置代理使用create-next-app创建的Next.js项目配置接口跨域代理转发需要用到customserver功能。先安装好express和http-proxy-middlewareyarnaddexpresshttp-proxy-middle
    • 初步认知Next.js中ISR/RSC/Edge Runtime/Streaming等新概念 星野睡不醒 Webnextjsreactisrreact18js
      前言浅窥nextjs到目前v12版本的几个重点新概念，我们有：定义说明ISR增量静态渲染EdgeRuntime边缘运行时StreamingSSR流式传输SSRReactServerComponents服务器组件下面我们对这几个新概念进行一个初步的认知，在阅读前，我们默认读者已经预备了nextjs的基本知识。含义认知ISRSSR、SSG这两个是冷饭，我们都耳熟能详，那所谓ISR增量再渲染的概念，其实
    • extjs 中store 关于baseParams的一个bug hwssz extjsactionfunctionnull
      困扰于roload参数不变的问题，很幸运在网上找到了答案，贴在下面：http://www.javaeye.com/topic/713163ExtJs中，我们使用GirdPanel的时候往往需要给后台传递查询条件。一般是通过修改Store的baseParams。Js代码varstore=GirdPanel.getStore();store.baseParams={查询条件}store.reload(
    • NextJS + Trpc + PayloadCMS + MongoDB 自定义服务器搭建 长沙彭小黑 mongodbnode.jsreact.js
      自定义服务器启动相关依赖dotenv读取env文件数据expressnode框架基础示例如下//src/server/index.tsimport'dotenv/config';importexpressfrom'express';importchalkfrom'chalk';constport=Number(process.env.PORT)||3000;constapp=express();c
    • Astro + NextUI 搭建个人博客（导航组件篇）
      Astro简介由于我之前的个人博客是Vue3+Quasar+Koa+MySql搭建的，整体就是SPA的思路，作为练手倒是可以锻炼前后端各方面的能力。但考虑到后期的迁移和更新等，实在过于麻烦，个人博客其实使用SSR或SSG之类的框架就行了，比如Nextjs，Nuxtjs，Remix等等。于是我接触到了Astro这个框架，它厉害的是不与任何前端框架进行强行绑定，比如Nextjs是与React强绑定的，
    • Expo Router + Supabase使用流程 懒编程-二两
      unsetunset前言unsetunsetExpo是一个React-native生态中的一个工具包，提供了非常多的功能，ExpoRouter是Expo最近推出的功能，其效果类似于Nextjs的router，可以基于目录结构来实现路由。Supabase是一个开源的postgres数据库，还带有用户体系功能，可以快速实现login、register这些功能。我将记录一下，我使用这2个工具，构建基础基
    • 【NextJS】nextjs+qiankun遇ReferenceError: window is not defined 陀螺蚁 Web前端#Reactjavascript前端react.js
      实验环境：qiankun:^2.10.16next:14.1.0react:^18.2.0根据官方手册快速上手教程(链接)构建主程序实验代码：qiankun部分：//file:micro-base/plugins/qiankun/index.tsimporttype{AppMetadata}from'qiankun';import{registerMicroApps,start}from"qian
    • 【NextJS】整个项目跨域配置 陀螺蚁 Web前端#React前端node.jsnext.js
      项目跨域是指：本项目作为被访问方，由另一个项目对本项目发起fetch等动作获取数据页面数据实验环境：next:14.1.0react:^18配置文件：next.config.[mjs|js|ts]假定原始范本内容：/**@type{import('next').NextConfig}*/constnextConfig={};exportdefaultnextConfig;项目跨域配置：/**@ty
    • Nextjs styled-jsx animation aibinMr
      Nextjs自带的styled-jsx（v3.2.1）可能是不支持css3动画中@keyframes，多次尝试失败，现在采用把@keyframes写入css文件中，通过页面入口引入，（注意，在组件内部使用Head组件会编译出错）importReactfrom'react'importHeadfrom'next/head'classIndexextendsReact.Component{render
    • Astro + NextUI 搭建个人博客（导航组件篇）
      Astro简介由于我之前的个人博客是Vue3+Quasar+Koa+MySql搭建的，整体就是SPA的思路，作为练手倒是可以锻炼前后端各方面的能力。但考虑到后期的迁移和更新等，实在过于麻烦，个人博客其实使用SSR或SSG之类的框架就行了，比如Nextjs，Nuxtjs，Remix等等。于是我接触到了Astro这个框架，它厉害的是不与任何前端框架进行强行绑定，比如Nextjs是与React强绑定的，
    • 浏览器historyAPI和Next路由掉坑记录 sasaraku. 前端reactjs
      浏览器historyAPI和Next路由掉坑记录浏览器操控历史记录真的好大一个坑啊，我的天，看上去好像99%的浏览器都对history兼容良好，实际上呢？啊，怎么某个操作突然就不好使了，为什么这里能跳到那里，为什么nextJS突然就报错了，是next的原因还是啥？本文记录了开发一个“多步骤页面拆分成多个页面”的需求研发过程。因为采用NEXT的SSR模式，每一次刷新页面都会发起一个新的http请求，
    • 155套JSP源码 梦の落花 java开发语言jsp
      项目地址：文件分享包括:ERP管理系统（jsp+servlet）、Java聊天室程序(java)、车辆管理系统(struts+hibernate+spring+oracle)、图书管理系统(struts+hibernate+spring+ext)学生成绩管理系统(SSH+MYSQL)、ExtJS2.2开源网络硬盘系统_dogdisk、简易java开源订销管理系统、Java网络爬虫(蜘蛛)源码Jsp
    • NextJS开发：使用swiper实现轮播图 ArslanRobot NextJS开发教程NextJSreactjs
      安装swipernpmiswiper创建组件一定要添加"useclient"，作为客户端组件来使用示例代码中的样式使用的tailwindcss"useclient"import{Swiper,SwiperSlide}from"swiper/react"import{Pagination}from'swiper/modules';//ImportSwiperstylesimport'swiper/c
    • 利用Docker Compose快速部署FastGPT知识库问答 aixiaoxin520 dockergptchatgpt前端AIGC
      FastGPT是一个基于LLM大语言模型的知识库问答系统，提供开箱即用的数据处理、模型调用等能力。同时可以通过Flow可视化进行工作流编排，从而实现复杂的问答场景！它是基于文档的知识库问答，用户可以上传文档，通过FastGPT实现对文档的解读，方便用户理解文章！该开源项目的技术栈：NextJs+TS+ChakraUI+Mongo+Postgres（Vector插件）FastGPT的架构图一、部署前
    • go websocket 聊天室 douyacun
      环境原文链接后端语言golang数据库elastisearchweb框架是基于gin封装的websocket库用的是gorilla/websocket日志:zapError:pkg/errors前端框架:react服务端渲染:nextjsUI:MaterialUI登录认证:cookienookiewebsocket是浏览器原生支持后续聊天功能模仿：https://getstream.io/登录gi
    • 【JS】基于React的Next.js环境配置与示例 DevFrank #Nodejsjavascriptreact.js开发语言
      ★,°:.☆(￣▽￣)/$:.°★这篇文章主要介绍基于React的Next.js环境配置与示例。学其所用，用其所学。——梁启超欢迎来到我的博客，一起学习，共同进步。喜欢的朋友可以关注一下，下次更新不迷路文章目录:smirk:1.Next.js介绍:blush:2.环境安装与配置:satisfied:3.应用示例添加主页添加页面和导航栏1.Next.js介绍官网：https://nextjs.org
    • Next.js初识 Jack魏 前端开发开发语言Next.jsReact前端框架前端开发
      Next.js初识Next.js：这是一个用于生产环境的React框架（国外用的比较多）。Next.js为您提供生产环境所需的所有功能以及最佳的开发体验：包括静态及服务器端融合渲染、支持TypeScript、智能化打包、路由预取等功能无需任何配置。Next.js官方教程：https://nextjs.org/learn/dashboard-app前端Web入门教程：https://develope
    • NextJS 14新版本有什么变化 soragui 前端前端前端框架
      这个版本充满了令人兴奋的功能，极大地提升了开发者的体验。这个版本侧重于几个关键领域：改进了自托管、Turbopack的进展、增强的错误消息、新的并行和拦截路由的功能，以及在next/image组件中的显著改进。更易于自托管Next.js14.1为使用Node.js服务器、Docker容器或静态导出进行自托管提供了更清晰的指南。文档的彻底改革详细介绍了运行时的环境变量、增量静态再生(ISR)的自定义
    • 学习Next.js 小纠结在简书
      使用React构建服务器呈现的JSWeb应用程序，现在开始https://learnnextjs.com/
    • 前端周刊第64期 写代码的宝哥 前端
      快讯Dan神从Meta离职，但仍将作为独立三方开发者留在React团队文章如何使用Nextjs、React和GitHubCopilot构建GPT-3应用程序-GitHub并不经常在其博客上写教程，这篇文章中他们推广现代面向Copilot的编程方式，提升我们的开发效率Hono+Htmx+Cloudflare-一套可选的、全栈使用JS构建网站的技术栈解构YouTube的“环境模式”功能-学习如何使用H
    • nextjs通过使用getServerSideProps实现登录后跳转上一页 D浩DzD react.js前端javascript
      在实际开发中，经常遇到登录后跳转到之前的页面，可使用getServerSideProps实现该功能，getServerSideProps是next.js中的一项特色功能，可以让我们在给页面设置一些初始的props参数。getServerSideProps是定义在页面中的API，但是其执行环境是node端，而不是客户端，一般常见使用场景为：页面前置权限校验页面必备参数获取使用时需要在对应的page文
    • nextjs中beforePopState使用 D浩DzD 工作中的坑Reactreact.js前端前端框架
      在某些情况下，希望监听popstate并在路由器对其进行操作之前执行某些操作。可以使用beforePopState。在Next.js中，beforePopState是一个可选的生命周期函数，用于在浏览器的历史记录发生更改之前执行一些操作。具体来说，beforePopState会在用户点击浏览器的后退或前进按钮时触发。在Next.js中，beforePopState通常用于处理路由的变化。你可以在b
    • nextjs + react + antd 冲突错误解决方案 简壹零
      1、使用了antd-mobile并且需要对它进行按需加载，下面是官方的文档，推荐我们使用babel-plugin-import。2、按照nextjs官方文档我们在.babelrc中添加插件{"presets":["next/babel"],"plugins":[["import",{"libraryName":"antd-mobile","style":true}]]}可当我运行的时候报错了，报错
    • 开源人工智能AI壁纸生成器--AI Wallpaper Generator sagima_sdu 人工智能
      AIWallpaperGeneratorAIWallpaperGenerator：AIWallpaperGenerator|AIWallpaperShopGitHub地址：https://github.com/all-in-aigc/aiwallpaper一款开源人工智能AI壁纸生成器，根据用户的输入提示词，即可生成对应的高清壁纸，目前开源代码包括nextjs全栈开发API和Web/dalle-3
    • 集合框架 天子之骄 java数据结构集合框架
         集合框架 集合框架可以理解为一个容器，该容器主要指映射(map)、集合(set)、数组(array)和列表(list)等抽象数据结构。 从本质上来说，Java集合框架的主要组成是用来操作对象的接口。不同接口描述不同的数据类型。   简单介绍：   Collection接口是最基本的接口，它定义了List和Set，List又定义了LinkLi
    • Table Driven（表驱动）方法实例 bijian1013 javaenumTable Driven表驱动
      实例一： /** * 驾驶人年龄段 * 保险行业，会对驾驶人的年龄做年龄段的区分判断 * 驾驶人年龄段：01-[18,25);02-[25,30);03-[30-35);04-[35,40);05-[40,45);06-[45,50);07-[50-55);08-[55,+∞) */ public class AgePeriodTest { //if...el
    • Jquery 总结 cuishikuan javajqueryAjaxWebjquery方法
      1.$.trim方法用于移除字符串头部和尾部多余的空格。如：$.trim('   Hello   ') // Hello2.$.contains方法返回一个布尔值，表示某个DOM元素（第二个参数）是否为另一个DOM元素（第一个参数）的下级元素。如：$.contains(document.documentElement, document.body); 3.$
    • 面向对象概念的提出 麦田的设计者 java面向对象面向过程
              面向对象中，一切都是由对象展开的，组织代码，封装数据。   在台湾面向对象被翻译为了面向物件编程，这充分说明了，这种编程强调实体。       下面就结合编程语言的发展史，聊一聊面向过程和面向对象。      c语言由贝尔实
    • linux网口绑定 被触发 linux
      刚在一台IBM Xserver服务器上装了RedHat Linux Enterprise AS 4，为了提高网络的可靠性配置双网卡绑定。 一、环境描述 我的RedHat Linux Enterprise AS 4安装双口的Intel千兆网卡，通过ifconfig -a命令看到eth0和eth1两张网卡。 二、双网卡绑定步骤： 2.1 修改/etc/sysconfig/network
    • XML基础语法 肆无忌惮_ xml
      一、什么是XML？ XML全称是Extensible Markup Language，可扩展标记语言。很类似HTML。XML的目的是传输数据而非显示数据。XML的标签没有被预定义，你需要自行定义标签。XML被设计为具有自我描述性。是W3C的推荐标准。   二、为什么学习XML？ 用来解决程序间数据传输的格式问题 做配置文件 充当小型数据库   三、XML与HTM
    • 为网页添加自己喜欢的字体 知了ing 字体 秒表 css
      @font-face { font-family: miaobiao;//定义字体名字 font-style: normal; font-weight: 400; src: url('font/DS-DIGI-e.eot');//字体文件 } 使用： <label style="font-size:18px;font-famil
    • redis范围查询应用-查找IP所在城市 矮蛋蛋 redis
      原文地址： http://www.tuicool.com/articles/BrURbqV 需求 根据IP找到对应的城市 原来的解决方案 oracle表（ip_country）： 查询IP对应的城市： 1.把a.b.c.d这样格式的IP转为一个数字，例如为把210.21.224.34转为3524648994 2. select city from ip_
    • 输入两个整数， 计算百分比 alleni123 java
      public static String getPercent(int x, int total){ double result=(x*1.0)/(total*1.0); System.out.println(result); DecimalFormat df1=new DecimalFormat("0.0000%");
    • 百合——————>怎么学习计算机语言 百合不是茶 java 移动开发
          对于一个从没有接触过计算机语言的人来说，一上来就学面向对象，就算是心里上面接受的了，灵魂我觉得也应该是跟不上的，学不好是很正常的现象，计算机语言老师讲的再多，你在课堂上面跟着老师听的再多，我觉得你应该还是学不会的，最主要的原因是你根本没有想过该怎么来学习计算机编程语言，记得大一的时候金山网络公司在湖大招聘我们学校一个才来大学几天的被金山网络录取，一个刚到大学的就能够去和
    • linux下tomcat开机自启动 bijian1013 tomcat
      方法一： 修改Tomcat/bin/startup.sh 为: export JAVA_HOME=/home/java1.6.0_27 export CLASSPATH=$CLASSPATH:$JAVA_HOME/lib/tools.jar:$JAVA_HOME/lib/dt.jar:. export PATH=$JAVA_HOME/bin:$PATH export CATALINA_H
    • spring aop实例 bijian1013 javaspringAOP
      1.AdviceMethods.java package com.bijian.study.spring.aop.schema; public class AdviceMethods { public void preGreeting() { System.out.println("--how are you!--"); } } 2.beans.x
    • [Gson八]GsonBuilder序列化和反序列化选项enableComplexMapKeySerialization bit1129 serialization
      enableComplexMapKeySerialization配置项的含义  Gson在序列化Map时，默认情况下，是调用Key的toString方法得到它的JSON字符串的Key，对于简单类型和字符串类型，这没有问题，但是对于复杂数据对象，如果对象没有覆写toString方法，那么默认的toString方法将得到这个对象的Hash地址。   GsonBuilder用于
    • 【Spark九十一】Spark Streaming整合Kafka一些值得关注的问题 bit1129 Stream
      包括Spark Streaming在内的实时计算数据可靠性指的是三种级别： 1. At most once，数据最多只能接受一次，有可能接收不到 2. At least once, 数据至少接受一次，有可能重复接收 3. Exactly once  数据保证被处理并且只被处理一次，   具体的多读几遍http://spark.apache.org/docs/lates
    • shell脚本批量检测端口是否被占用脚本 ronin47
      #!/bin/bash cat ports |while read line do#nc -z -w 10 $line nc -z -w 2 $line 58422>/dev/null2>&1if[ $?-eq 0]then echo $line:ok else echo $line:fail fi done 这里的ports 既可以是文件
    • java-2.设计包含min函数的栈 bylijinnan java
      具体思路参见：http://zhedahht.blog.163.com/blog/static/25411174200712895228171/ import java.util.ArrayList; import java.util.List; public class MinStack { //maybe we can use origin array rathe
    • Netty源码学习-ChannelHandler bylijinnan javanetty
      一般来说，“有状态”的ChannelHandler不应该是“共享”的，“无状态”的ChannelHandler则可“共享” 例如ObjectEncoder是“共享”的, 但 ObjectDecoder 不是 因为每一次调用decode方法时，可能数据未接收完全（incomplete）， 它与上一次decode时接收到的数据“累计”起来才有可能是完整的数据，是“有状态”的 p
    • java生成随机数 cngolon java
      方法一： /** * 生成随机数 * @author [email protected] * @return */ public synchronized static String getChargeSequenceNum(String pre){ StringBuffer sequenceNum = new StringBuffer(); Date dateTime = new D
    • POI读写海量数据 ctrain 海量数据
      import java.io.FileOutputStream; import java.io.OutputStream; import org.apache.poi.xssf.streaming.SXSSFRow; import org.apache.poi.xssf.streaming.SXSSFSheet; import org.apache.poi.xssf.streaming
    • mysql 日期格式化date_format详细使用 daizj mysqldate_format日期格式转换日期格式化
      日期转换函数的详细使用说明  DATE_FORMAT(date,format) Formats the date value according to the format string. The following specifiers may be used in the format string. The&n
    • 一个程序员分享8年的开发经验 dcj3sjt126com 程序员
        在中国有很多人都认为IT行为是吃青春饭的，如果过了30岁就很难有机会再发展下去!其实现实并不是这样子的，在下从事.NET及JAVA方面的开发的也有8年的时间了，在这里在下想凭借自己的亲身经历，与大家一起探讨一下。 明确入行的目的 很多人干IT这一行都冲着“收入高”这一点的，因为只要学会一点HTML, DIV+CSS，要做一个页面开发人员并不是一件难事，而且做一个页面开发人员更容
    • android欢迎界面淡入淡出效果 dcj3sjt126com android
      很多Android应用一开始都会有一个欢迎界面，淡入淡出效果也是用得非常多的，下面来实现一下。 主要代码如下： package com.myaibang.activity; import android.app.Activity;import android.content.Intent;import android.os.Bundle;import android.os.CountDown
    • linux 复习笔记之常见压缩命令 eksliang tar解压linux系统常见压缩命令linux压缩命令tar压缩
      转载请出自出处:http://eksliang.iteye.com/blog/2109693 linux中常见压缩文件的拓展名 *.gz gzip程序压缩的文件 *.bz2 bzip程序压缩的文件 *.tar tar程序打包的数据，没有经过压缩 *.tar.gz tar程序打包后，并经过gzip程序压缩 *.tar.bz2 tar程序打包后，并经过bzip程序压缩 *.zi
    • Android 应用程序发送shell命令 gqdy365 android
      项目中需要直接在APP中通过发送shell指令来控制lcd灯，其实按理说应该是方案公司在调好lcd灯驱动之后直接通过service送接口上来给APP，APP调用就可以控制了，这是正规流程，但我们项目的方案商用的mtk方案，方案公司又没人会改，只调好了驱动，让应用程序自己实现灯的控制，这不蛋疼嘛！！！！ 发就发吧！ 一、关于shell指令： 我们知道，shell指令是Linux里面带的
    • java 无损读取文本文件 hw1287789687 读取文件无损读取读取文本文件charset
      java 如何无损读取文本文件呢？ 以下是有损的 @Deprecated public static String getFullContent(File file, String charset) { BufferedReader reader = null; if (!file.exists()) { System.out.println("getFull
    • Firebase 相关文章索引 justjavac firebase
      Awesome Firebase 最近谷歌收购Firebase的新闻又将Firebase拉入了人们的视野，于是我做了这个 github 项目。 Firebase 是一个数据同步的云服务，不同于 Dropbox 的「文件」，Firebase 同步的是「数据」，服务对象是网站开发者，帮助他们开发具有「实时」（Real-Time）特性的应用。 开发者只需引用一个 API 库文件就可以使用标准 RE
    • C++学习重点 lx.asymmetric C++笔记
      1.c++面向对象的三个特性：封装性，继承性以及多态性。   2.标识符的命名规则：由字母和下划线开头，同时由字母、数字或下划线组成；不能与系统关键字重名。   3.c++语言常量包括整型常量、浮点型常量、布尔常量、字符型常量和字符串性常量。   4.运算符按其功能开以分为六类：算术运算符、位运算符、关系运算符、逻辑运算符、赋值运算符和条件运算符。 &n
    • java bean和xml相互转换 q821424508 javabeanxmlxml和bean转换java bean和xml转换
      这几天在做微信公众号 做的过程中想找个java bean转xml的工具，找了几个用着不知道是配置不好还是怎么回事，都会有一些问题， 然后脑子一热谢了一个javabean和xml的转换的工具里，自己用着还行，虽然有一些约束吧 ， 还是贴出来记录一下      顺便你提一下下，这个转换工具支持属性为集合、数组和非基本属性的对象。   packag
    • C 语言初级 位运算 1140566087 位运算c
      第十章 位运算   1、位运算对象只能是整形或字符型数据，在VC6.0中int型数据占4个字节   2、位运算符： 运算符 作用 ~ 按位求反 << 左移 >> 右移 & 按位与 ^ 按位异或 | 按位或 他们的优先级从高到低；   3、位运算符的运算功能： a、按位取反： ~01001101 = 101
    • 14点睛Spring4.1-脚本编程 wiselyman spring4
      14.1 Scripting脚本编程 脚本语言和java这类静态的语言的主要区别是:脚本语言无需编译,源码直接可运行; 如果我们经常需要修改的某些代码,每一次我们至少要进行编译,打包,重新部署的操作,步骤相当麻烦; 如果我们的应用不允许重启,这在现实的情况中也是很常见的; 在spring中使用脚本编程给上述的应用场景提供了解决方案,即动态加载bean; spring支持脚本
    按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他