QD_ANJING
QD_ANJING

threejs！可视化数字城市效果的实现

灵感图

现在随着城市的发展，越来越多的智慧摄像头，都被互联网公司布到城市的各个角落，举一个例子，一个大楼上上下下都被布置了智能摄像头，用于监控火势，人员进出，工装工牌佩戴等监控，这时候为了美化项目，大公司都会将城市的区域作为对象，进行3d可视化交互，接下来的内容，就是基于以上元素，开发的一款城市数据可视化的demo，包含楼宇特效，飞线，特定视角，动画等交互，

用到的技术栈 vite + typescript + threejs

白模
下载白模

搜索关键词：city

压缩包包含的内容

threejs！可视化数字城市效果的实现_第1张图片

模型加载

下面是具体代码

export function loadGltf(url: string) {
    return new Promise((resolve, reject) => {
        gltfLoader.load(url, function (gltf) {
            console.log('gltf',gltf)
            resolve(gltf)
        });
    })
}
 
  
处理模型
 
  
模型上有一些咱们用不到的模型，进行删除，还有一些用的到的模型，但是名称不友好，所以进行整理
 
  
loadGltf('./models/scene.gltf').then((gltf: any) => {
    const group = gltf.scene
    const scale = 10
    group.scale.set(scale, scale, scale)

    // 删除多余模型
    const mesh1 = group.getObjectByName('Text_test-base_0')
    if (mesh1 && mesh1.parent) mesh1.parent.remove(mesh1)

    const mesh2 = group.getObjectByName('Text_text_0')
    if (mesh2 && mesh2.parent) mesh2.parent.remove(mesh2)

    // 重命名模型
    // 环球金融中心
    const hqjrzx = group.getObjectByName('02-huanqiujinrongzhongxin_huanqiujinrongzhongxin_0')
    if (hqjrzx) hqjrzx.name = 'hqjrzx'
    // 上海中心
    const shzx = group.getObjectByName('01-shanghaizhongxindasha_shanghaizhongxindasha_0')
    if (shzx) shzx.name = 'shzx'
    // 金茂大厦
    const jmds = group.getObjectByName('03-jinmaodasha_jjinmaodasha_0')
    if (jmds) jmds.name = 'jmds'
    // 东方明珠塔
    const dfmzt = group.getObjectByName('04-dongfangmingzhu_dongfangmingzhu_0')
    if (dfmzt) dfmzt.name = 'dfmzt'

    T.scene.add(group)
    T.toSceneCenter(group)

    T.ray(group.children, (meshList) => {
        console.log('meshList', meshList);
    })
    T.animate()
})

 
  
T是场景的构建函数，主要创建了场景，镜头，控制器，灯光等基础信息，并且监听控制器变化时修改灯光位置
 
  
 
  
 
  
在使用第三方模型的时候，总有一些不尽人意的地方，比如模型加载后，模型中心并不在3d世界的中心位置，所以就需要调整一下模型整体的位置，toSceneCenter 方法是自定义的一个让模型居中的方法，通过BOX3获取到模型的包围盒，获取到模型的中心点坐标信息，再取反，就会得到模型中心点在3d世界的位置信息
 
  
 
  
// 获取包围盒
getBoxInfo(mesh) {
    const box3 = new THREE.Box3()
    box3.expandByObject(mesh)
    const size = new THREE.Vector3()
    const center = new THREE.Vector3()
    // 获取包围盒的中心点和尺寸
    box3.getCenter(center)
    box3.getSize(size)
    return {
        size, center
    }
}
toSceneCenter(mesh) {
    const { center, size } = this.getBoxInfo(mesh)
    // 将Y轴置为0
    mesh.position.copy(center.negate().setY(0))
}

 
  
飞线
 
  
收集飞线的点
 
  
没有3d设计师的支持，所有的数据都来自于模型，所以利用现有条件，收集飞线经过的点位，原理就是使用到的鼠标射线，点击模型上的某个位置并记录下来，提供给后期使用
 
  
众所周知，click的调用过程是忽略mousedown的，mouseup时候就会调用，如果单纯的想要改变视角，鼠标抬起时候也会调用click事件，所以要加一个鼠标是否移动的判断，利用控制器监听start和end时的镜头位置变化来区分鼠标是否移动
 
  
控制器部分代码：
 
  
this.controls.addEventListener('start', () => {
    this.controlsStartPos.copy(this.camera.position)
})

this.controls.addEventListener('end', () => {
    this.controlsMoveFlag = this.controlsStartPos.distanceToSquared(this.camera.position) === 0
})

 
  
控制器开始变化的时候记录camera位置，跟结束时的camera的位置相减，如果为0，则表示鼠标没晃动，单纯的点击，如果不为0，说明镜头位置变化了，这时，鼠标的click回调将不会调用
 
  
射线部分代码：
 
  
ray(children: THREE.Object3D[], callback: (mesh: THREE.Intersection>[]) => void) {
    let mouse = new THREE.Vector2(); //鼠标位置
    var raycaster = new THREE.Raycaster();
    window.addEventListener("click", (event) => {
        mouse.x = (event.clientX / document.body.offsetWidth) * 2 - 1;
        mouse.y = -(event.clientY / document.body.offsetHeight) * 2 + 1;
        raycaster.setFromCamera(mouse, this.camera);
        const rallyist = raycaster.intersectObjects(children);
        if (this.controlsMoveFlag) {
            callback && callback(rallyist)
        }
    });
}

 
  
射线的回调：
 
  
let arr = []
T.ray(group.children, (meshList) => {
    console.log('meshList', meshList);
    arr.push(...meshList[0].point.toArray())
    console.log(JSON.stringify(arr));
})

 
  
收集后的顶点信息：
 
  
 
  
 
  
这部分的工作只不过判断鼠标是否移动的部分不一样而已。
 
  
细化顶点
 
  
有了飞线具体经过的点位时候，要将这些点位细化，这时就要讲飞线的大致原理了，两点确定一条线段，获取线段上的100个点，每条飞线占用20个点位，每个点位创建一个着色器，用于绘制飞线的组成部分，当更新时候，飞线的首个点向下一个点前进，一次往后20个点都往前前进一次，循环往复一直到飞线的最后一个组成部分到达线段的最后一个点，飞线占用的点位数量决定飞线的长度，将线段分为多少个顶点，决定飞线的疏密程度，像图中这样的疏密度，就是单个线段的点位分少了，这个可以优化的，vector3.distanceTo(vector3)即可判断两个线段的长度，通过不同的长度，决定细化线段的点，当然，线段的顶点信息越多，对gpu的消耗越大
 
  
flyLineData.forEach((data: number[]) => {
        const points: THREE.Vector2[] = []
        for (let i = 0; i < data.length / 3; i++) {
            const x = data[i * 3]
            const z = data[i * 3 + 2]
            const point = new THREE.Vector2(x, z)
            points.push(point)
        }
        const curve = new THREE.SplineCurve(points);
        // 此处决定飞线每个点的疏密程度，数值越大，对gpu的压力越大
        const curvePoints = curve.getPoints(100);
        const flyPoints = curvePoints.map((curveP: THREE.Vector2) => new THREE.Vector3(curveP.x, 0, curveP.y))

        // const l = points.length - 1

        const flyGroup = T._Fly.setFly({
            index: Math.random() > 0.5 ? 50 : 20,
            num: 20,
            points: flyPoints,
            spaced: 50, // 要将曲线划分为的分段数。默认是 5
            starColor: new THREE.Color(Math.random() * 0xffffff),
            endColor: new THREE.Color(Math.random() * 0xffffff),
            size: 0.5
        })
        flyLineGroup.add(flyGroup)
    })

 
  
setFly参数
 
  
interface SetFly {
    index: number, // 截取起点
    num: number, // 截取长度 // 要小于length
    points: Vector3[],
    spaced: number // 要将曲线划分为的分段数。默认是 5
    starColor: Color,
    endColor: Color,
    size: number
}

 
  
endColor和starColor目前不好用，做不出渐变，不知道是不是长度不够，暂时先放放
 
  
flyLine
 
  
创建flyLine做成了一个类，开箱即用，也可以加入自己的想法，调整内容，
 
  
创建flyLine之后要在render中调用
 
  
 render() {
    this.controls.update()
    this.renderer.render(this.scene, this.camera);
    this._Fly && this._Fly.upDate()
}


 
  
可配置参数有尺寸，透明度，颜色等
 
  
 var color1 = params.starColor; //轨迹线颜色 青色
var color2 = params.endColor; //黄色
var color = color1.lerp(color2, i / newPoints2.length)
colorArr.push(color.r, color.g, color.b);

 
  
这里是引用渐变色的位置，需要再调整一下
 
  
 
  
 
  
阶段代码
 
  
线稿
 
  
将模型绘制出线稿，并添加到原有模型上，这里用到LineBasicMaterial基础线条材质，和MeshLambertMaterial基础网格材质，调节颜色和不透明度。
 
  
材质代码:
 
  
// 建筑材质
export const otherBuildingMaterial = (color: THREE.Color, opacity = 1) => {
    return new THREE.MeshLambertMaterial({
        color,
        transparent: true,
        opacity
    });
}
// 建筑线条材质
export const otherBuildingLineMaterial = (color: THREE.Color, opacity = 1) => {
    return new THREE.LineBasicMaterial(
        {
            color,
            depthTest: true,
            transparent: true,
            opacity
        }
    )
}


 
  
以下代码是之前对模型改造时写的对模型重命名的方法，现在我们来改造一下
 
  
// 重命名模型
    // 环球金融中心
    const hqjrzx = group.getObjectByName('02-huanqiujinrongzhongxin_huanqiujinrongzhongxin_0')
    if (hqjrzx) {
        hqjrzx.name = 'hqjrzx'
        changeModelMaterial(hqjrzx, otherBuildingMaterial(buildColor, buildOpacity), otherBuildingLineMaterial(buildLineColor, buildLineOpacity),buildLineDeg)
    }

    // 上海中心
    const shzx = group.getObjectByName('01-shanghaizhongxindasha_shanghaizhongxindasha_0')
    if (shzx) {
        shzx.name = 'shzx'
        changeModelMaterial(shzx, otherBuildingMaterial(buildColor, buildOpacity), otherBuildingLineMaterial(buildLineColor, buildLineOpacity),buildLineDeg)
    }
    // 金茂大厦
    const jmds = group.getObjectByName('03-jinmaodasha_jjinmaodasha_0')
    if (jmds) {
        jmds.name = 'jmds'
        changeModelMaterial(jmds, otherBuildingMaterial(buildColor, buildOpacity), otherBuildingLineMaterial(buildLineColor, buildLineOpacity),buildLineDeg)
    }
    // 东方明珠塔
    const dfmzt = group.getObjectByName('04-dongfangmingzhu_dongfangmingzhu_0')
    if (dfmzt) {
        dfmzt.name = 'dfmzt'
        changeModelMaterial(dfmzt, otherBuildingMaterial(buildColor, buildOpacity), otherBuildingLineMaterial(buildLineColor, buildLineOpacity),buildLineDeg)
    }

    T.scene.add(group)
    T.toSceneCenter(group)


    group.traverse((mesh: any) => {
        mesh as THREE.Mesh
        if (mesh.isMesh && (mesh.name.indexOf('Shanghai') !== -1 || mesh.name.indexOf('Object') !== -1)) {
            if (mesh.name.indexOf('Floor') !== -1) {
                mesh.material = floorMaterial
            } else if (mesh.name.indexOf('River') !== -1) {
            } else {
                changeModelMaterial(mesh, otherBuildingMaterial(otherBuildColor,0.8), otherBuildingLineMaterial(otherBuildLineColor,0.4),buildLineDeg)
            }
        }
    })


 
  
changeModelMaterial这个方法就是创建模型相对应的线条的方法，获取到模型的geometry，这里存着模型所有的顶点信息，索引和法向量，以此创建一个# 边缘几何体（EdgesGeometry）边缘几何体（EdgesGeometry）# 边缘几何体（EdgesGeometry）；通过边缘几何体的信息创建 # 线段（LineSegments）线段（LineSegments） # 线段（LineSegments）；并将创建出来的线段添加到原有模型中，因为我们的线段不需要单独处理，
 
  
/**
 * 
 * @param object 模型
 * @param lineGroup 线组
 * @param meshMaterial 模型材质
 * @param lineMaterial 线材质
 */
export const changeModelMaterial = (mesh: THREE.Mesh, meshMaterial: THREE.MeshBasicMaterial, lineMaterial: THREE.LineBasicMaterial, deg = 1): any => {
    if (mesh.isMesh) {
        if (meshMaterial) mesh.material = meshMaterial
        // 以模型顶点信息创建线条
        const line = getLine(mesh, deg, lineMaterial)
        const name = mesh.name + '_line'

        line.name = name
        mesh.add(line)
    }
}
// 通过模型创建线条
export const getLine = (object: THREE.Mesh, thresholdAngle = 1, lineMaterial: THREE.LineBasicMaterial): THREE.LineSegments => {
    // 创建线条，参数为 几何体模型，相邻面的法线之间的角度，
    var edges = new THREE.EdgesGeometry(object.geometry, thresholdAngle);
    var line = new THREE.LineSegments(edges);
    if (lineMaterial) line.material = lineMaterial
    return line;
}

 
  
 
  
关于颜色
 
  
对于我这种野生前端开发，没有UI和UE的支持，只能在网上找案例，那么就需要图片中的颜色，这里不得不提到一个工具色輪、調色盤產生器 | Adobe Color
 
  
色彩
 
  
这里可以根据一个颜色，调出互补色、相似色、单色等色彩信息
 
  
threejs！可视化数字城市效果的实现_第2张图片
 
  
取色
 
  
这个工具也可以根据一张图片，提取出主题色，包含主色、辅助色等信息
 
  
 
  
threejs！可视化数字城市效果的实现_第3张图片
 
  
阶段代码
 
  
预设镜头位置
 
  
 
  
threejs！可视化数字城市效果的实现_第4张图片
 
  
预埋点位
 
  
预埋的点位坐标信息获取和飞线点位获取一样的方法，标记采用的是CSS2DRenderer，将创建的element节点渲染到3d世界，3drender和2drender不在同一个图层内，所以需要新建一个dom节点，专门存放css2d的dom信息，
 
  
 
  
    


 
  
加载css2drender
 
  
createScene 文件
 
  
 +renderCss2D: CSS2DRenderer
 
 createRenderer(){
     ...
         this.renderCss2D = new CSS2DRenderer({ element: this.css2dDom });
         this.renderCss2D.setSize(this.width, this.height);
     ...
 }
 
 render(){
     ...
         this.renderCss2D.render(this.scene, this.camera);
     ...
 }

 
  
 
 
  
根据数据创建dom节点
 
  
 
  
threejs！可视化数字城市效果的实现_第5张图片
 
  
export interface CameraPosInfo {
    pos: number[], // 预设摄像机位置信息
    target: number[], // 控制器目标位置
    name: string, // 预埋标记点或其他信息
    tagPos?: number[], // 预埋标记点的位置信息
}

 
  
接下来就是要根据信息创建节点，遍历这些信息，并创建节点，这里有一个点需要提一下，2d图层和3d图层的关系
 
  
 
  
threejs！可视化数字城市效果的实现_第6张图片
 
  
从图中可以看出，2d图层始终保持在3d图层的上层，然而我们在创建控制器的时候，第二个参数使用的是3d的图层， this.controls = new OrbitControls(this.camera, this.renderer.domElement)，因为这一层被覆盖了，所以控制器失效了。
 
  
有两种解决方案，第一种是 new OrbitControls时，将第二个参数改为this.renderCss2D.domElement，还有一种方式，也就是本文采用的方式，将2d图层的css属性改变一下，忽略这个图层的任何事件。
 
  
#css2dRender {
  /* 一定要加这个属性，不然2D内容点击没效果 */
  pointer-events: none;
}

 
  
threejs！可视化数字城市效果的实现_第7张图片
 
  
由于pointer-events属性是可以继承的，2d图层内所有的元素都不响应事件，所以要将咱们创建的建筑tag的样式改一下
 
  
.build_tag {
  /* 一定要加这个属性，不然2D内容点击没效果 */
  pointer-events: all;
}

 
  
 
 
  
// 创建建筑标记
function createTag() {
    const buildTagGroup = new THREE.Group()
    T.scene.add(buildTagGroup)
    presetsCameraPos.forEach((cameraPos: CameraPosInfo, i: number) => {
        if (cameraPos.tagPos) {
            // 渲染2d文字
            const element = document.createElement('li');
            // 将信息存入dom节点中，如果是react或者vue写的，不用这么存，直接存data或者state
            element.setAttribute('data-cameraPosInfo', JSON.stringify(cameraPos))
            element.classList.add('build_tag')
            element.innerText = `${i + 1}`
            // 将初始化好的dom节点渲染成CSS2DObject，并在scene场景中渲染
            const tag = new CSS2DObject(element);
            const tagPos = new THREE.Vector3().fromArray(cameraPos.tagPos)
            tag.position.copy(tagPos)
            buildTagGroup.add(tag)
        }
    })
}

 
  
 
  
镜头动画
 
  
这里通过事件代理，点击到相应的建筑tag，从dom节点上获取到data-cameraPosInfo属性，然后通过tween动画处理器修改控制器的taget和镜头的position。事件代理是js基础内容，
 
  
 
 
  
if (css2dDom) {
    css2dDom.addEventListener('click', function (e) {
        if (e.target) {
            if(e.target.nodeName=== 'LI') {
                console.dir(e);
                const cameraPosInfo = e.target.getAttribute('data-cameraPosInfo')
                if (cameraPosInfo) {
                    const {pos,target} = JSON.parse(cameraPosInfo)
                    T.controls.target.set(...target)
                    T.handleCameraPos(pos)
                }
            }
        }
    });
}

 
  
handleCameraPos的代码
 
  
handleCameraPos(end: number[]) {
    // 结束时候相机位置
    const endV3 = new THREE.Vector3().fromArray(end)
    // 目前相机到目标位置的距离，根据不同的位置判断运动的时间长度，从而保证速度不变
    const length = this.camera.position.distanceTo(endV3)
    // 如果位置相同，不运行动画
    if(length===0) return 
    new this._TWEEN.Tween(this.camera.position)
        .to(endV3, Math.sqrt(length) * 400)
        .start()
        // .onUpdate((value) => {
        //     console.log(value)
        // })
        .onComplete(() => {
            // 动画结束的回调，可以展示建筑信息或其他操作
        })
}

 
  
 
  
 
  
阶段代码
 
  
场景背景渲染
 
  
scene的场景不仅支持颜色和texture纹理，还支持canvas，上面的黑色背景太单调了，所以利用canvas绘制一个圆渐变填充到scene.background
 
  
createScene(){
...
const drawingCanvas = document.createElement('canvas');
const context = drawingCanvas.getContext('2d');

if (context) {
   // 设置canvas的尺寸
   drawingCanvas.width = this.width;
   drawingCanvas.height = this.height;

   // 创建渐变
   const gradient = context.createRadialGradient(this.width / 2, this.height, 0, this.width/2, this.height/2, Math.max(this.width, this.height));

   // 为渐变添加颜色
   gradient.addColorStop(0, '#0b171f');
   gradient.addColorStop(0.6, '#000000');

   // 使用渐变填充矩形
   context.fillStyle = gradient;
   context.fillRect(0, 0, drawingCanvas.width, drawingCanvas.height);
   this.scene.background = new THREE.CanvasTexture(drawingCanvas)
...
}

 
  
 
  
 
 
  
其他风格
 
  
 
  
threejs！可视化数字城市效果的实现_第8张图片
 
  
 
  

                            
                        
                    
                    
                    

                    
                    
                    

                
                

                    
                

            
        
    
    

        
你可能感兴趣的:(前端,数据可视化)

        

            

                
    
                    
  • Vue-纯前端导出word文档
                        2501_90252408
前端vue.jsword
                        
    varbuf=doc.getZip().generate({type:‘nodebuffer’});//bufisanodejsbuffer,youcaneitherwriteittoafileordoanythingelsewithit.fs.writeFileSync(path.resolve(__dirname,‘output.docx’),buf);####jszip-utils[jszi
    
                    
    • 
                    
  • 纯前端导入导出txt文件
                        今天吃了嘛o
前端导入导出txt文件javascripthtmlhtml5
                        
    1.html部分导入导出{{alone}}2.js部分导出的时候我尝试了很多次改变编码格式为gb2312的，但是无果，所以我再读取的时候先读取文件判断了文件编码格式，然后再去根据编码格式读取文件并展示页面。exportdefault{data(){return{works:[],};},methods:{handleBeforeUpload(file){this.fileList=[file];c
    
                    
    • 
                    
  • vue中使用ueditor上传到服务器_vue+Ueditor集成 [前后端分离项目][图片、文件上传][富文本编辑]...
                        小西超人

                        
    写在最前面的话：鉴于近期很多的博友讨论，说我按照文章的一步一步来，弄好之后，怎么会提示后端配置项http错误，文件上传会提示上传错误。这里提别申明一点，ueditor在前端配置好后，需要与后端部分配合进行，后端部分的项目代码git地址：https://github.com/coderliguoqing/UeditorSpringboot，然后将配置ueditor.config.js里的server
    
                    
    • 
                    
  • vuecli项目实战--管理系统
                        团团kobebryant
项目前端框架javajavascript前端vue.js
                        
    一、项目搭建HBuider直接：新建--项目--填项目名称、选地址、下拉选vue项目（2.6.10）项目结构这个样子：二、前端配置1.路由配置（地址）在src文件夹下创建router文件夹在router文件夹下面创建js文件index.js---配置组件的地址还有导航守卫、路由嵌套也配在这里1.组件路由2.组件路由嵌套3.路由导航记得跟vue对象关联还有导出路由嗷importVuefrom'vue
    
                    
    • 
                    
  • 若依前后端分离集成CAS详细教程
                        Roc-xb
单点登录前后端分离CAS
                        
    目录一、后端配置1、添加cas依赖2、修改配置文件3、修改LoginUser.java4、修改Constants.java5、添加CasProperties.java6、添加CasUserDetailsService.java7、添加CasAuthenticationSuccessHandler.java8、修改SecurityConfig9、启动后端二、前端配置1、修改settings.js2、
    
                    
    • 
                    
  • 使用vue3框架vue-next-admin导出列表数据
                        乐多_L
vue.js前端javascript
                        
    在Vue3中实现Excel导出功能可以通过以下步骤完成，这里使用xlsx库来实现前端Excel导出：1.安装依赖npminstallxlsxfile-saver#或yarnaddxlsxfile-saver2.实现代码示例需要在当前页引入import*asXLSXfrom"xlsx";注释：我导出的数据为列表的全部数据（datum）；自定义我需要的表头，大家可以根据自己的需要进行替换。还可以只导出
    
                    
    • 
                    
  • spring boot基于知识图谱的阿克苏市旅游管理系统python-计算机毕业设计
                        QQ1963288475
springboot知识图谱旅游pythonvue.jsdjangoflask
                        
    目录功能和技术介绍具体实现截图开发核心技术：开发环境开发步骤编译运行核心代码部分展示系统设计详细视频演示可行性论证软件测试源码获取功能和技术介绍该系统基于浏览器的方式进行访问，采用springboot集成快速开发框架，前端使用vue方式，基于es5的语法，开发工具IntelliJIDEAx64，因为该开发工具，内嵌了Tomcat服务运行机制，可不用单独下载Tomcatserver服务器。由于考虑到
    
                    
    • 
                    
  • 【OpenTiny调研征集】共创技术未来，分享您的声音！
                        
前端vue.js开源
                        
    欢迎参与2025年OpenTiny开源社区用户调研征集调研背景随着OpenTiny开源项目的不断发展，我们一直致力于为开发者提供高质量的Web前端开发解决方案。为了更好地满足用户需求，提升项目的实用性和易用性，我们决定发起一项用户调研活动，诚挚邀请您参与。调研目的了解用户需求：收集您在使用OpenTiny开源项目过程中的需求、问题和建议，以便我们更好地改进和优化。提升用户体验：通过您的反馈，我们将
    
                    
    • 
                    
  • cesium（vue）一些面试问题（包含Three.js）
                        GIS瞧葩菜
vue.jsjavascriptcesium
                        
    1.在不同的应用场景和技术栈中，模型加载方法和格式有所不同，下面主要从Web前端三维场景（使用Three.js和cesium）使用Three.js加载模型常见模型格式及加载方法GLTF/GLB格式格式特点：GLTF（GraphicsLibraryTransmissionFormat）是一种开放的、基于JSON的三维模型传输格式，GLB是其二进制版本。它们具有文件小、加载快、支持动画、材质和骨骼等优
    
                    
    • 
                    
  • 探索 TypeScript Redux：构建大规模JavaScript应用的终极指南
                        柳旖岭

                        
    探索TypeScriptRedux：构建大规模JavaScript应用的终极指南去发现同类优质开源项目:https://gitcode.com/在当今快速发展的前端开发领域中，组合正确工具集来应对复杂性和扩展性挑战至关重要。今天，我们将深入了解一个令人兴奋的开源项目——TypeScriptRedux，它结合了TypeScript、JSPM、typings、React和Redux的强大功能，为开发者
    
                    
    • 
                    
  • 前端导出word文件—包含canvas(echarts图表)
                        Liuer_Qin
jscanvasechartsecharts前端javascript
                        
    一、使用的插件html-docx-js二、整体思路因为canvas是运行在内存中的，所以不能简单的通过dom获取canvas图片，需要手动的先将canvas转为image。三、实现先克隆要下载的DOM的副本。因为canvas是运行在内存中的，所以也不能通过cloneNode方法克隆下来（克隆下来是空的）。我们这里将原DOM中的canvas转成图片，然后插入到副本的对应位置，这样操作不会影响原DOM
    
                    
    • 
                    
  • 使用Odoo Shell卸载模块
                        odoo中国
odooodoo开源软件erp
                        
    使用OdooShell卸载模块我们在Odoo使用过程中，因为模块安装错误或者前端错误等导致odoo无法通过界面登录，这时候你可以使用OdooShell来卸载模块。OdooShell是一个交互式Pythonshell，允许你直接与Odoo数据库和模型进行交互。以下是使用OdooShell卸载模块的详细步骤：步骤1：启动OdooShell要启动OdooShell，你需要在终端中运行以下命令。确保你已经
    
                    
    • 
                    
  • 基于 Spring Boot 的社区居民健康管理系统部署说明书
                        小星袁
毕业设计原文springboot后端java
                        
    目录1系统概述2准备资料3系统安装与部署3.1数据库部署3.1.1MySQL的部署3.1.2Navicat的部署3.2服务器部署3.3客户端部署4系统配置与优化5其他基于SpringBoot的社区居民健康管理系统部署说明书1系统概述本系统主要运用了SpringBoot框架，前端页面的设计主要依托Vue框架来构建，实现丰富且交互性强的用户界面，后台管理功能则采用SpringBoot框架与MySQL数
    
                    
    • 
                    
  • 前端性能优化——如何提高页面加载速度？
                        忘川...
前端性能优化html
                        
    1.将样式表放在头部首先说明一下，将样式表放在头部对于实际页面加载的时间并不能造成太大影响，但是这会减少页面首屏出现的时间，使页面内容逐步呈现，改善用户体验，防止“白屏”。我们总是希望页面能够尽快显示内容，为用户提供可视化的回馈，这对网速慢的用户来说是很重要的。将样式表放在文档底部会阻止浏览器中的内容逐步出现。为了避免当样式变化时重绘页面元素，浏览器会阻塞内容逐步呈现，造成“白屏”。这源自浏览器的
    
                    
    • 
                    
  • 前端开发入门指南：HTML、CSS和JavaScript基础知识
                        方向感超强的
javascriptcsshtml前端
                        
    引言：大家好，我是一名简单的前端开发爱好者，对于网页设计和用户体验的追求让我深深着迷。在本篇文章中，我将带领大家探索前端开发的基础知识，涵盖HTML、CSS和JavaScript。如果你对这个领域感兴趣，或者想要了解如何开始学习前端开发，那么这篇文章将为你提供一个良好的起点。1.前端开发概述在我们深入了解前端开发的细节之前，让我们先了解一下前端开发的定义和作用。简而言之，前端开发涉及构建用户直接与
    
                    
    • 
                    
  • 前端504错误分析
                        ox0080
#北漂+滴滴出行WebVIP激励前端
                        
    前端出现504错误（网关超时）通常是由于代理服务器未能及时从上游服务获取响应。以下是详细分析步骤和解决方案：1.确认错误来源504含义：代理服务器（如Nginx、Apache）在等待后端服务响应时超时。常见架构：前端→代理服务器→后端服务，问题通常出在代理与后端之间。2.排查步骤（1）检查后端服务状态确认服务是否运行：通过日志或监控工具（如systemctlstatus,KubernetesPod
    
                    
    • 
                    
  • 部署前端项目2
                        augenstern416
前端
                        
    前端项目的部署是将开发完成的前端代码发布到服务器或云平台，使其能够通过互联网访问。以下是前端项目部署的常见步骤和工具：1.准备工作在部署之前，确保项目已经完成以下步骤：代码优化：压缩JavaScript、CSS和图片文件，减少文件体积。环境配置：区分开发环境和生产环境（如API地址、环境变量等）。测试：确保项目在本地测试通过，没有明显Bug。2.部署流程1.构建项目大多数前端项目（如React、V
    
                    
    • 
                    
  • 对象的操作
                        augenstern416
javascript开发语言ecmascript
                        
    在前端开发中，JavaScript提供了许多内置对象和方法，用于处理数据、操作DOM、处理事件等。以下是一些常用对象及其方法和扩展技巧：1.Object对象Object是JavaScript中最基础的对象，几乎所有对象都继承自Object。常用方法Object.keys(obj)：返回对象的所有可枚举属性的键名数组。constobj={a:1,b:2};console.log(Object.key
    
                    
    • 
                    
  • 前端基础入门：HTML、CSS 和 JavaScript
                        阿绵
前端前端htmlcssjs
                        
    在现代网页开发中，前端技术扮演着至关重要的角色。无论是个人网站、企业官网，还是复杂的Web应用程序，前端开发的基础技术HTML、CSS和JavaScript都是每个开发者必须掌握的核心技能。本文将详细介绍这三者的基本概念及其应用一、HTML——网页的骨架HTML（HyperTextMarkupLanguage）是构建网页的基础语言。它是网页的结构和内容的标记语言，决定了网页上的文本、图像、表单等元
    
                    
    • 
                    
  • 深入解析：Tableau在数据可视化中的高级应用
                        Echo_Wish
实战高阶大数据信息可视化数据分析数据挖掘
                        
    深入解析：Tableau在数据可视化中的高级应用引言在大数据时代，数据可视化已成为数据分析中不可或缺的一部分。作为一款广受欢迎的数据可视化工具，Tableau以其强大的功能和灵活性，赢得了众多数据分析师的青睐。然而，许多人在使用Tableau时，仅停留在基本操作层面，未能充分发挥其潜力。本文将深入探讨Tableau的高级应用，展示其在复杂数据分析中的强大能力，并以具体实例说明其实际应用效果。数据预
    
                    
    • 
                    
  • 前端超长列表，虚拟滚动实现
                        大橙子-
前端cssjavascript
                        
    虚拟滚动.container{width:300px;height:500px;overflow:hidden;border:1pxsolid#ccc;margin-top:50px;}.scroll-box{width:100%;height:100%;overflow-y:auto;overflow-x:hidden;position:relative;}.scroll-height-main
    
                    
    • 
                    
  • 前端框架虚拟DOM的产生
                        大橙子-
前端框架前端javascript
                        
    直接说结论：为了找出与命令式(原生实现步骤)所执行代码的最小差异化，从而优化代码性能。命令式：可以理解为面向过程编程，需要写好每个实现步骤constdiv=document.querySelector('#app')//获取divdiv.innerText='helloworld'//设置文本内容如果需要修改文字内容为“你好”div.innerText='你好'//设置文本内容声明式：可以理解为面
    
                    
    • 
                    
  • 27岁大龄转码秋招惨败，朋友劝我转Java来得及吗？还是继续走前端或机器学习？
                        程序员yt
java机器学习开发语言
                        
    今天给大家分享的是一位粉丝的提问，27岁大龄转码秋招惨败，朋友劝我转Java来得及吗？还是继续走前端或机器学习？接下来把粉丝的具体提问和我的回复分享给大家，希望也能给一些类似情况的小伙伴一些启发和帮助。同学提问：211建筑本科，22年毕业后gap一年转码去了英国读的QS100的it的水硕（24年12月份毕业），转码后对就业形势认知不足，时间全花在课业上，八股文和算法准备的不充足，秋招算是惨败。读研
    
                    
    • 
                    
  • 芯麦GC1808立体声ADC芯片解析：高性价比与全集成音频采集方案
                        青牛科技-Allen
GLOBALCHIP音视频单片机嵌入式硬件收录机人工智能家用电器
                        
    引言在直播设备、智能语音终端等新兴应用的推动下，高性能音频采集系统的需求持续增长。芯麦半导体推出的GC1808立体声音频模数转换器，凭借其全集成信号链设计和灵活的接口配置，为开发者提供了高性价比的音频前端解决方案。本文将从核心架构、关键技术特性及典型应用场景三个方面，深入解析这款芯片的设计亮点。一、GC1808核心特性概览全集成信号链内置64倍过采样率Δ-Σ调制器集成数字梳状滤波器（CombFil
    
                    
    • 
                    
  • 前端面试题（HTML篇）
                        每天一点点~
htmlcssjavascript
                        
    1.网络中使用最多的图片格式有哪些？JPEG，GIF，PNG最流行的是JPEG格式，可以把文件压缩到最小在PS以JPEG格式存储时，提供11级压缩等级2.Doctype作用?严格模式与混杂模式如何区分？它们有何意义?声明文档类型声明位于位于HTML文档中的第一行，处于标签之前DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。标准模式(严格模式)浏览器按照W3C的标准解析执行代码标准模式(严
    
                    
    • 
                    
  • python websocket 心跳_websocket心跳及重连机制
                        蜗牛老湿
pythonwebsocket心跳
                        
    websocket心跳及重连机制websocket是前后端交互的长连接，前后端也都可能因为一些情况导致连接失效并且相互之间没有反馈提醒。因此为了保证连接的可持续性和稳定性，websocket心跳重连就应运而生。在使用原生websocket的时候，如果设备网络断开，不会立刻触发websocket的任何事件，前端也就无法得知当前连接是否已经断开。这个时候如果调用websocket.send方法，浏览器
    
                    
    • 
                    
  • electron学习笔记
                        weixin_46452138
electron学习javascript
                        
    electron个人学习笔记一、electron简单了解Electron是一个跨平台的、基于Web前端技术的桌面GUI应用程序开发框架。可以使用HTML、CSS来绘制界面和控制布局，使用JavaScript来控制用户行为和业务逻辑，使用Node.js来通信、处理音频视频等，几乎所有的Web前端技术和框架（jQuery、Vue、React、Angular等）都可以应用到桌面GUI开发中。二、开发前基
    
                    
    • 
                    
  • 虚拟DOM和真实DOM的区别
                        水煮庄周鱼鱼
概念前端
                        
    虚拟DOM（VirtualDOM）、DOM（RealDOM）是前端开发中常用的两种概念。什么是真实DOM？真实DOM是浏览器中实际存在的DOM结构，它由浏览器解析HTML生成，并且直接与浏览器交互。当页面中的数据发生变化时，真实DOM会重新计算布局和渲染，这个过程比较耗费性能。什么是虚拟DOM?虚拟DOM是一种在内存中以JavaScript对象的形式表示的轻量级的DOM结构。它是对真实DOM的一种
    
                    
    • 
                    
  • Java开发实习面试笔试题（含答案）
                        小钊（求职中）
java面试开发语言springspringbootmaventomcat
                        
    在广州一家中大公司面试（BOSS标注是1000-9999人，薪资2-3k），招聘上写着Java开发，基本没有标注前端要求，但是到场知道是前后端分离人不分离。开始先让你做笔试（12道问答+4道SQL题），接着面试也是八股文之类的，没有问项目，没有做算法，现分享笔试和面试题目给大家做参考。（基础的没复习忘了不会，只会几道感觉已经寄了，最重要的是前端基本不会）一、笔试内容1.Java有哪些数据类型，什么
    
                    
    • 
                    
  • 鸿蒙5.0实战案例：关于图像撕裂、掉帧等异常现象的原理以及优化方案
                        敢嗣先锋
鸿蒙开发HarmonyOS移动开发harmonyos鸿蒙开发openharmony移动开发ArkUI性能优化
                        
    往期推文全新看点（文中附带全新鸿蒙5.0全栈学习笔录）✏️鸿蒙（HarmonyOS）北向开发知识点记录~✏️鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~✏️鸿蒙应用开发与鸿蒙系统开发哪个更有前景？✏️嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~✏️对于大前端开发来说，转鸿蒙开发究竟是福还是祸？✏️鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？✏️记录一场鸿蒙开发岗位面
    
                    
    • 
                                
  • java封装继承多态等
                                    麦田的设计者
javaeclipsejvmcencapsulatopn
                                    
           最近一段时间看了很多的视频却忘记总结了，现在只能想到什么写什么了，希望能起到一个回忆巩固的作用。 
    1、final关键字 
      译为：最终的 
       &
    
                                
    • 
                                
  • F5与集群的区别
                                    bijian1013
weblogic集群F5
                                    
            http请求配置不是通过集群，而是F5；集群是weblogic容器的，如果是ejb接口是通过集群。 
        F5同集群的差别，主要还是会话复制的问题，F5一把是分发http请求用的，因为http都是无状态的服务，无需关注会话问题，类似
    
                                
    • 
                                
  • LeetCode[Math] - #7 Reverse Integer
                                    Cwind
java题解MathLeetCodeAlgorithm
                                    
    原题链接：#7 Reverse Integer 
  
要求： 
按位反转输入的数字 
例1： 输入 x = 123, 返回 321 
例2： 输入 x = -123, 返回 -321 
  
难度：简单 
  
分析： 
对于一般情况，首先保存输入数字的符号，然后每次取输入的末位（x%10）作为输出的高位（result = result*10 + x%10）即可。但
    
                                
    • 
                                
  • BufferedOutputStream
                                    周凡杨

                                    
         首先说一下这个大批量，是指有上千万的数据量。 
     例子： 
     有一张短信历史表，其数据有上千万条数据，要进行数据备份到文本文件，就是执行如下SQL然后将结果集写入到文件中！ 
     select t.msisd
    
                                
    • 
                                
  • linux下模拟按键输入和鼠标
                                    被触发
linux
                                    
    查看/dev/input/eventX是什么类型的事件， cat /proc/bus/input/devices 
设备有着自己特殊的按键键码，我需要将一些标准的按键，比如0－9，X－Z等模拟成标准按键，比如KEY_0,KEY-Z等，所以需要用到按键 模拟，具体方法就是操作/dev/input/event1文件，向它写入个input_event结构体就可以模拟按键的输入了。 
 
linux/in
    
                                
    • 
                                
  • ContentProvider初体验
                                    肆无忌惮_
ContentProvider
                                    
    ContentProvider在安卓开发中非常重要。与Activity，Service，BroadcastReceiver并称安卓组件四大天王。 
在android中的作用是用来对外共享数据。因为安卓程序的数据库文件存放在data/data/packagename里面，这里面的文件默认都是私有的，别的程序无法访问。 
如果QQ游戏想访问手机QQ的帐号信息一键登录，那么就需要使用内容提供者COnte
    
                                
    • 
                                
  • 关于Spring MVC项目（maven）中通过fileupload上传文件
                                    843977358
mybatisspring mvc修改头像上传文件upload
                                    
    Spring MVC 中通过fileupload上传文件，其中项目使用maven管理。 
  
1.上传文件首先需要的是导入相关支持jar包：commons-fileupload.jar,commons-io.jar 
因为我是用的maven管理项目，所以要在pom文件中配置（每个人的jar包位置根据实际情况定） 
<!-- 文件上传 start by zhangyd-c --&g
    
                                
    • 
                                
  • 使用svnkit api，纯java操作svn，实现svn提交，更新等操作
                                    aigo
svnkit
                                    
     原文：http://blog.csdn.net/hardwin/article/details/7963318 
  
import java.io.File;  
  
import org.apache.log4j.Logger;  
import org.tmatesoft.svn.core.SVNCommitInfo;  
import org.tmateso
    
                                
    • 
                                
  • 对比浏览器，casperjs，httpclient的Header信息
                                    alleni123
爬虫crawlerheader
                                    
    		@Override
		protected void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException
		{
			String type=req.getParameter("type");
			Enumeration es=re
    
                                
    • 
                                
  • java.io操作 DataInputStream和DataOutputStream基本数据流
                                    百合不是茶
java流
                                    
    1，java中如果不保存整个对象，只保存类中的属性，那么我们可以使用本篇文章中的方法，如果要保存整个对象  先将类实例化  后面的文章将详细写到 
  
  
2，DataInputStream 是java.io包中一个数据输入流允许应用程序以与机器无关方式从底层输入流中读取基本 Java 数据类型。应用程序可以使用数据输出流写入稍后由数据输入流读取的数据。
    
                                
    • 
                                
  • 车辆保险理赔案例
                                    bijian1013
车险
                                    
    理赔案例： 
一货运车，运输公司为车辆购买了机动车商业险和交强险，也买了安全生产责任险，运输一车烟花爆竹，在行驶途中发生爆炸，出现车毁、货损、司机亡、炸死一路人、炸毁一间民宅等惨剧，针对这几种情况，该如何赔付。 
赔付建议和方案： 
客户所买交强险在这里不起作用，因为交强险的赔付前提是：“机动车发生道路交通意外事故”； 
如果是交通意外事故引发的爆炸，则优先适用交强险条款进行赔付，不足的部分由商业
    
                                
    • 
                                
  • 学习Spring必学的Java基础知识(5)—注解
                                    bijian1013
javaspring
                                    
            文章来源：http://www.iteye.com/topic/1123823，整理在我的博客有两个目的：一个是原文确实很不错，通俗易懂，督促自已将博主的这一系列关于Spring文章都学完；另一个原因是为免原文被博主删除，在此记录，方便以后查找阅读。 
  
        有必要对
    
                                
    • 
                                
  • 【Struts2一】Struts2 Hello World
                                    bit1129
Hello world
                                    
    Struts2 Hello World应用的基本步骤 
创建Struts2的Hello World应用，包括如下几步： 
1.配置web.xml 
2.创建Action 
3.创建struts.xml，配置Action 
4.启动web server，通过浏览器访问 
  配置web.xml 
<?xml version="1.0" encoding="
    
                                
    • 
                                
  • 【Avro二】Avro RPC框架
                                    bit1129
rpc
                                    
    1. Avro RPC简介 1.1. RPC 
 
 RPC逻辑上分为二层，一是传输层，负责网络通信；二是协议层，将数据按照一定协议格式打包和解包 
 从序列化方式来看，Apache Thrift 和Google的Protocol Buffers和Avro应该是属于同一个级别的框架，都能跨语言，性能优秀，数据精简，但是Avro的动态模式（不用生成代码，而且性能很好）这个特点让人非常喜欢，比较适合R
    
                                
    • 
                                
  • lua　set get cookie
                                    ronin47
lua cookie
                                    
    lua:
local access_token = ngx.var.cookie_SGAccessToken
if access_token then
    ngx.header["Set-Cookie"] = "SGAccessToken="..access_token.."; path=/;Max-Age=3000"
end
    
                                
    • 
                                
  • java-打印不大于N的质数
                                    bylijinnan
java
                                    
    

public class PrimeNumber {

	/**
	 * 寻找不大于N的质数
	 */
	public static void main(String[] args) {
		int n=100;
		PrimeNumber pn=new PrimeNumber();
		pn.printPrimeNumber(n);
		System.out.print
    
                                
    • 
                                
  • Spring源码学习-PropertyPlaceholderHelper
                                    bylijinnan
javaspring
                                    
    今天在看Spring 3.0.0.RELEASE的源码，发现PropertyPlaceholderHelper的一个bug 
当时觉得奇怪，上网一搜，果然是个bug，不过早就有人发现了，且已经修复： 
详见： 
http://forum.spring.io/forum/spring-projects/container/88107-propertyplaceholderhelper-bug 
 

    
                                
    • 
                                
  • [逻辑与拓扑]布尔逻辑与拓扑结构的结合会产生什么?
                                    comsci
拓扑
                                    
     
   如果我们已经在一个工作流的节点中嵌入了可以进行逻辑推理的代码,那么成百上千个这样的节点如果组成一个拓扑网络,而这个网络是可以自动遍历的,非线性的拓扑计算模型和节点内部的布尔逻辑处理的结合,会产生什么样的结果呢? 
 
   是否可以形成一种新的模糊语言识别和处理模型呢?  大家有兴趣可以试试,用软件搞这些有个好处,就是花钱比较少,就算不成
    
                                
    • 
                                
  • ITEYE 都换百度推广了
                                    cuisuqiang
GoogleAdSense百度推广广告外快
                                    
    以前ITEYE的广告都是谷歌的Google AdSense，现在都换成百度推广了。 
  
为什么个人博客设置里面还是Google AdSense呢？ 
  
都知道Google AdSense不好申请，这在ITEYE上也不是讨论了一两天了，强烈建议ITEYE换掉Google AdSense。至少，用一个好申请的吧。 
  
什么时候能从ITEYE上来点外快，哪怕少点
    
                                
    • 
                                
  • 新浪微博技术架构分析
                                    dalan_123
新浪微博架构
                                    
    新浪微博在短短一年时间内从零发展到五千万用户，我们的基层架构也发展了几个版本。第一版就是是非常快的，我们可以非常快的实现我们的模块。我们看一下技术特点，微博这个产品从架构上来分析，它需要解决的是发表和订阅的问题。我们第一版采用的是推的消息模式，假如说我们一个明星用户他有10万个粉丝，那就是说用户发表一条微博的时候，我们把这个微博消息攒成10万份，这样就是很简单了，第一版的架构实际上就是这两行字。第
    
                                
    • 
                                
  • 玩转ARP攻击
                                    dcj3sjt126com
r
                                    
    我写这片文章只是想让你明白深刻理解某一协议的好处。高手免看。如果有人利用这片文章所做的一切事情，盖不负责。 网上关于ARP的资料已经很多了，就不用我都说了。 用某一位高手的话来说，“我们能做的事情很多，唯一受限制的是我们的创造力和想象力”。 ARP也是如此。 以下讨论的机子有 一个要攻击的机子：10.5.4.178 硬件地址：52:54:4C:98
    
                                
    • 
                                
  • PHP编码规范
                                    dcj3sjt126com
编码规范
                                    
    一、文件格式 
1. 对于只含有 php 代码的文件，我们将在文件结尾处忽略掉 "?>" 。这是为了防止多余的空格或者其它字符影响到代码。例如：<?php$foo = 'foo';2. 缩进应该能够反映出代码的逻辑结果，尽量使用四个空格，禁止使用制表符TAB，因为这样能够保证有跨客户端编程器软件的灵活性。例
    
                                
    • 
                                
  • linux 脱机管理（nohup）
                                    eksliang
linux nohupnohup
                                    
    脱机管理 nohup 
转载请出自出处：http://eksliang.iteye.com/blog/2166699 
nohup可以让你在脱机或者注销系统后，还能够让工作继续进行。他的语法如下 
nohup [命令与参数]   --在终端机前台工作
nohup [命令与参数] & --在终端机后台工作 
  
但是这个命令需要注意的是，nohup并不支持bash的内置命令，所
    
                                
    • 
                                
  • BusinessObjects Enterprise Java SDK
                                    greemranqq
javaBOSAPCrystal Reports
                                    
    最近项目用到oracle_ADF  从SAP/BO 上调用 水晶报表，资料比较少，我做一个简单的分享，给和我一样的新手 提供更多的便利。 
  
首先，我是尝试用JAVA JSP 去访问的。 
  
官方API：http://devlibrary.businessobjects.com/BusinessObjectsxi/en/en/BOE_SDK/boesdk_ja
    
                                
    • 
                                
  • 系统负载剧变下的管控策略
                                    iamzhongyong
高并发
                                    
    假如目前的系统有100台机器，能够支撑每天1亿的点击量（这个就简单比喻一下），然后系统流量剧变了要，我如何应对，系统有那些策略可以处理，这里总结了一下之前的一些做法。 
1、水平扩展 
这个最容易理解，加机器，这样的话对于系统刚刚开始的伸缩性设计要求比较高，能够非常灵活的添加机器，来应对流量的变化。 
2、系统分组 
假如系统服务的业务不同，有优先级高的，有优先级低的，那就让不同的业务调用提前分组
    
                                
    • 
                                
  • BitTorrent DHT 协议中文翻译
                                    justjavac
bit
                                    
    前言 
做了一个磁力链接和BT种子的搜索引擎 {Magnet & Torrent}，因此把 DHT 协议重新看了一遍。 
 
 BEP: 5Title: DHT ProtocolVersion: 3dec52cb3ae103ce22358e3894b31cad47a6f22bLast-Modified: Tue Apr 2 16:51:45 2013 -070
    
                                
    • 
                                
  • Ubuntu下Java环境的搭建
                                    macroli
java工作ubuntu
                                    
    配置命令： 
　　$sudo apt-get install ubuntu-restricted-extras 
　　再运行如下命令： 
　　$sudo apt-get install sun-java6-jdk 
　　待安装完毕后选择默认Java. 
　　$sudo update- alternatives --config java 
　　安装过程提示选择，输入“2”即可，然后按回车键确定。 
    
                                
    • 
                                
  • js字符串转日期（兼容IE所有版本）
                                    qiaolevip
TODateStringIE
                                    
    	/**
	 * 字符串转时间（yyyy-MM-dd HH:mm:ss）
	 * result （分钟）
	 */
	stringToDate : function(fDate){
		var fullDate = fDate.split(" ")[0].split("-");
		var fullTime = fDate.split("
    
                                
    • 
                                
  • 【数据挖掘学习】关联规则算法Apriori的学习与SQL简单实现购物篮分析
                                    superlxw1234
sql数据挖掘关联规则
                                    
    关联规则挖掘用于寻找给定数据集中项之间的有趣的关联或相关关系。 
关联规则揭示了数据项间的未知的依赖关系，根据所挖掘的关联关系，可以从一个数据对象的信息来推断另一个数据对象的信息。 
例如购物篮分析。牛奶 ⇒ 面包 [支持度：3%，置信度：40%]  支持度3%：意味3%顾客同时购买牛奶和面包。   置信度40%：意味购买牛奶的顾客40%也购买面包。   规则的支持度和置信度是两个规则兴
    
                                
    • 
                                
  • Spring 5.0 的系统需求，期待你的反馈
                                    wiselyman
spring
                                    
            
       Spring 5.0将在2016年发布。Spring5.0将支持JDK 9。 
  
       Spring 5.0的特性计划还在工作中，请保持关注，所以作者希望从使用者得到关于Spring 5.0系统需求方面的反馈。 
 
    
                                
    •