郄灬灬
郄灬灬

vue ssr 如何移除 window.__INITIAL_STATE__ 注入

阅读本文前，假设你已经完整的阅读过 vue ssr 的文档，知道如何搭建一个 vue ssr 的项目了。
如题，提出这个需求，多半是 SEO 大佬那边说这个东西影响收录。官方文档上虽然有这么句话：

在 2.5.0+ 版本中，嵌入式 script 也可以在生产模式 (production mode) 下自行移除。

但是实际上，虽然调试控制台上确实没有了相应的 script 标签，但是查看源码的时候依旧可以看到这块内容，这说明在服务端生成 HTML代码时依旧是有注入的，只是在到达客户端之后通过 removeChild 移除掉了而已。 显然这是无法满足 SEO 的需求的。那要如何处理呢？如果是有疯狂搜索过，那应该看过这句话：

如果能同步两端数据，那么不注入 window.INITIAL_STATE 也是可以的

这似乎就是解决方案，同步两端数据，但是具体是什么意思呢？
我们先回想一下整个服务端渲染的过程：

  1. 启动一个服务，监听指定端口，接收来自客户端的请求

    // server.js
const express = require('express')
const app = express()
const port = process.env.PORT || 80;

// 这里是 ssr 渲染处理相关的代码

app.get('*', isProd ? renderHandler : (req, res, next) => {
    readyPromise.then(() => renderHandler(req, res, next))
})

app.listen(port, () => {
    console.log(`server started at localhost:${port}`)
})

  2. 客户端发起请求，然后服务端接收，并处理之，请求先走 express 的路由，然后在这里转交 vue 中的路由适配、解析、处理，然后路由匹配到的组件请求数据接口，请求完成后把数据写入 vuex store 当中，这部基本就结束了

    renderHandler () {

	// 这里调用后进入 entry-server.js 的代码逻辑
	renderer.renderToString(context, (err, html) => {
	    if (err) {
	        return handleError(err)
	    }
	
	    res.send(html);
	})
}

    entry-server.js 基本和官方文档的内容一模一样

    export default context => {
    return new Promise((resolve, reject) => {
        const { app, router, store } = createApp()
        
        // 路由跳转
        router.push(context.url)
    
    	// 路由适配与解析完毕后获取匹配的组件，调用其获取数据的方法，请求数据
        router.onReady(() => {
            const matchedComponents = router.getMatchedComponents();
            
            if (!matchedComponents.length) {
                return reject({ code: 404 })
            }
    
            // 对所有匹配的路由组件调用 `asyncData()`，把数据写入 vuex store
            Promise.all(matchedComponents.map(Component => {
                if (Component.asyncData) {
                    return Component.asyncData({
                        store,
                        hostname: context.hostname,
                        route: router.currentRoute
                    })
                }
            })).then(() => {
                context.state = store.state;
                
                resolve(app)
            }, err => {
                reject(err);
            }).catch(() => {
                
            })
        }, reject)
    })
}

  3. 数据准备完毕后，回到 renderer，将 vue 单文件的内容结合数据转换成 HTML 字符串，返回到客户端，如果注释掉 entry-client.js 所有代码，此时访问的话客户端应该呈现与设计稿内容一致的页面，（这里需要说明一下，渲染 vue 单文件时的数据，全都取自服务端的 vuex store）

    renderer.renderToString(context, (err, html) => {
    // 将转换后的代码返回客户端
    res.send(html);
})

到这里整个渲染流程基本就结束了。

但是会有问题，我写的交互代码怎么都没生效呢？我的点击事件呢？我的炫酷特效呢？
回头想想：
交互代码写在哪呢？
vue 单文件内。
它为啥不生效呢？
因为服务端只是返回了HTML字符串，而没有返回 vue 组件
现在咋办呢？
激活它，使其变回组件

具体做法很简单：
在 entry-client.js 里只需要简单的几行代码就可以了

import { createApp } from '../app'
const { app, router, store } = createApp()

router.onReady(() => {
    app.$mount('#app')
})

// 获取服务端传过来的 vuex store 的数据，存入客户端 vuex store
if (window.__INITIAL_STATE__) {
  store.replaceState(window.__INITIAL_STATE__)
}

现在交互又好了。到这里，整个服务端渲染流程就结束了。

那怎么去除 window.INITIAL_STATE 注入呢？，这就需要用到 vue ssr 的手动资源注入

默认情况下，当提供 template 渲染选项时，资源注入是自动执行的。但是有时候，你可能需要对资源注入的模板进行更细粒度 (finer-grained) 的控制，或者你根本不使用模板。在这种情况下，你可以在创建 renderer 并手动执行资源注入时，传入 inject: false。

然后修改模板文件，去掉 vuex store 注入的代码

<html>
  <head>
    
    {{{ renderResourceHints() }}}
    {{{ renderStyles() }}}
  head>
  <body>
    
    
    {{{ renderState() }}}
    {{{ renderScripts() }}}
  body>
html>

似乎确实很简单，代码粘贴上去，保存，重启服务。刷新页面，我页面呢？刚啥没有的时候还好好的呢，你代码是不是有 BUG？
其实不是，问题其实出现在 entry-client.js 的代码里。entry-client.js 这简单的几行代码，到底做了些什么事情呢？实际上也很好理解：

  • 初始化 vue 组件
  • 构建虚拟 DOM 树
  • 然后对比当前页面已有的 DOM 结构，将不一致的部分替换为虚拟 DOM 树中的内容。

消失的内容，都是被替换掉了。为啥客户端构建的虚拟 DOM 树与服务端返回的结构不一致呢？因为数据它不一样啊，服务端获取的数据存在于服务端实例化的 vuex 对象，之前的方式是通过把数据以字符串的方式注入 HTML 内容中（即 window.INITIAL_STATE），然后在客户端获取，现在不让注入了，没有了数据，生成的 DOM 内容肯定是不一样的。

需要另想办法同步两端数据，确切的说，是得想办法把服务端的 vuex store 传递到客户端。
我的做法：

  • 在获取完数据之后，把 vuex store 缓存起来
  • 然后把缓存的 key 注入页面中（对的，还是逃不过注入，但是注入内容会少非常多，至少能让 SEO 觉得 OK）
  • 客户端通过请求的方式获取实例的数据，注入客户端的 vuex store。

缓存方式有两种，一种是直接写在内存里，另一种是使用 redis ，我对 redis 不是很熟，所以没有采用这种。下面来看看具体做法：

  1. 需要一个缓存容器，这里使用 lru-cache 来存储数据，新建文件 routerDataCache.js，代码如下

    const LRU = require('lru-cache')

const dataCache = new LRU({
    max: 1000,
    maxAge: 1000 * 60 * 15, // 单位为毫秒，这里设置为十五分钟
});

// 需要直接返回对象，作为单例调用，因为需要共享
module.exports = dataCache;

  2. 然后修改 server.js 的 render 函数，在这里做数据缓存（记得引入缓存对象 routerDataCache.js）

    function render(req, res, next) {
	// ... 原来的业务代码
	
	// 创建一个缓存 key，key 的生成规则看项目需求，只要能保证前后端能根据一定条件匹配上就可以了
	// md5 也不是必须的，开心就好
	let cachekey = md5(`vuex state cache：${ req.hostname }${ req.url }`);
	
	// 渲染上下文
	let context = {
        cachekey,
        url: req.url,
        hostname: req.hostname
    }
    
    // 判断是否有缓存，有缓存数据则读缓存里的数据
    if (dataCache.has(cachekey)) {
        context = _.assign({}, dataCache.peek(cachekey), context);
    }

	renderer.renderToString(context, (err, html) => {
        if (err) {
            return handleError(err)
        }
		
		// 走完所有的流程后，把 context 存到缓存中
        if(!dataCache.has(cachekey)) {
            dataCache.set(cachekey, context);
        }

        res.send(html)
    })
}

  3. 现在 vuex store 已经存到了内存中，客户端要怎么获取呢？得写个接口，把服务端缓存的数据返回客户端。新建文件 CacheRouter.js

    const express = require("express");
const router = express.Router();
const cache = require('routerDataCache')

router.get('/route-cache/:key', (req, res) => {
    let key = req.params.key;
    
    res.setHeader("Content-Type", "application/json")
    res.send(cache.peek(key));
})

module.exports = router

    然后挂载到 express 中，需要在 server.js 当中加入相关内容：

    const apiRouter = require('router/CacheRouter')

app.use('/apidata', apiRouter);

  4. 在客户端获取之，然后注入客户端 vuex store，需要修改模板页面和 client-entry.js 当中的代码

    模板中在之前加入以下代码：

    <script>
	window.cachekey = '{{ cachekey }}';
script>

    然后修改 client-entry.js 的代码

    import { createApp } from '../app'
import axios from '@lib/axios'

const { app, router, store } = createApp()

router.onReady(() => {
    app.$mount('#app')
})

function getStoreData () {
    let key = window.cachekey;

    axios.get(`/apidata/route-cache/${key}`).then( ({ data: result }) => {
        if(result) {
            store.replaceState(result.state);
        }
    }, (err) => {

    })
}

getStoreData();

到这里整个数据注入的调整就结束了。

如果页面的内容更新不频繁，还可以在服务端渲染时也从缓存中读取数据，减少接口请求，我们修改一下 entry-server.js 文件：

router.onReady(() => {
    // ... 代码

    // 如果已有缓存数据，则直接 resolve ，否则执行获取数据的相关操作
    if(context.state) {

        // 这一步很重要，服务端渲染期间的数据，全部都是从这里读取的，而不是 context 对象
        store.replaceState(context.state);
        resolve(app); return;
    }

    // ... 代码
    
}, reject)

这里要注意，读取缓存数据的代码一定要放在路由的回调 router.onReady 里，直接在外面 resolve 的话，是不会好使的。

好了，现在如果有缓存，则读取缓存当中的数据。

已知的问题：

  • 如果启用 pm2 来管理进程，同时启动多个进程，那把数据缓存在内存中的做法是不行的，因为进程之间的内存不共享，页面的请求与获取 vuex store 数据的请求不是同一个进程处理的话，就获取不到对应的数据里，这种情况推荐使用别的缓存方案，比如 redis

如果还有啥问题，就自己探索吧，毕竟博主并不是个好心人，啊哈哈哈哈。。。。

vue ssr 如何移除 window.__INITIAL_STATE__ 注入_第1张图片

你可能感兴趣的:(SSR)

  • TPAMI 2024 | SSR-2D: 从2D图像进行语义3D场景重建 小白学视觉 论文解读IEEETPAMI深度学习顶刊论文论文解读TPAMI
    论文信息题目：SSR-2D:Semantic3DSceneReconstructionFrom2DImagesSSR-2D:从2D图像进行语义3D场景重建作者：JunwenHuang,AlexeyArtemov,YujinChen,ShuaifengZhi,KaiXu,andMatthiasNießner论文创新点首次提出了一种基于深度学习的方法，能够在不使用任何3D标注的情况下，从不完整的RGB
  • 责任链设计模式 Jerry._ 爪哇开发设计模式
    责任链其实就是依次执行多个过滤器，最终拿到想要的结果。下面我用一个例子来讲解：从简单的代码开始理解责任链模式我们先用一个简单的例子来帮助大家理解责任链模式。假设我们有一些杂物（小米、红豆、黄豆），我们想要在这些杂物中只保留“黄豆”，那么就需要过滤掉“小米”和“红豆”。一种简单的方式是直接通过if条件语句来判断和过滤，代码如下：publicclassRequest{privateStringdata
  • Java高级特性 - Java反射 Ssaty. java开发语言java-ee
    第1关：了解Class对象本关任务：实现获取Class对象的三种方式packagestep1;/***学员任务文件*/publicclassReflect_stu{publicstaticvoidmain(String[]args){System.out.println<
  • （转）@JsonRawValue 按原样序列化属性 SomeOtherTime java开发语言后端
    @JsonRawValue按原样序列化属性_赵丙双的博客-CSDN博客_序列化属性@JsonRawValue注解能够按原样序列化属性。属性值不会被转义或者加引号（或者说，会自动去掉转义，多余的引号）。属性值已经是一个JSONString，或者属性值已经被加了引号时很有用。ExamplePOJOpublicclassReport{privatelongid;privateStringname;@Js
  • String的基础知识 GordonH1991 java
    前提：androidsdk和jdk版本对照中可以看到从android5.0后就需要使用jdk7以上的版本，这里讨论的默认字符串常量池放置在虚拟机的堆内存中，不再过多讨论永久代(PermanentGeneration,PermGen)的方法区，事实上从java8后，JVM就已经没有永久代了，取而代之的是元空间(MetaSpace)1.String.java的开头注释TheStringclassrep
  • intellij idea篇 IT逐梦人 intellij-ideajavaide
    intellijidea2023.1.7中使用git拉取远端代码提示错误error:unabletoreadaskpassresponsefrom'C:\Users\ASUS\.IntelliJIdea2019.1\system\tmp\intellij-git-askpass.bat'bash:/dev/tty:Nosuchdeviceoraddress并弹框提示错误“无法定位程序输入点”原因：
  • 你对 Vue 项目进行哪些优化？ LuckXinXin Vuevue
    答：第一个方面：代码层面的优化•v-if和v-show区分使用场景•computed和watch区分使用场景•v-for遍历必须为item添加key，且避免同时使用v-if•长列表性能优化•事件的销毁•图片资源懒加载•路由懒加载•第三方插件的按需引入•优化无限列表性能•服务端渲染SSRor预渲染第二个方面：Webpack层面的优化•Webpack对图片进行压缩•减少ES6转为ES5的冗余代码•提取
  • 结合实际讲NR系列2—— SIB1 写代码写到手抽筋 NR学习实战复盘网络5G
    这是在基站抓取的sib1的一条信令L3MessageContentBCCH-DL-SCH-Messagemessagec1systemInformationBlockType1cellSelectionInfoq-RxLevMin:-64q-QualMin:-19cellAccessRelatedInfoplmn-IdentityListPLMN-IdentityInfoplmn-Identity
  • 开源sip客户端 linux,开源SIP服务器 Kamailio weixin_28795975 开源sip客户端linux
    Kamailio是一个开源的SIP服务器，原名OpenSER。Kamailio项目诞生于2005年7月，它是从德国FhGFOKUS研究所主导的SIPExpressRouter(SER)项目组分裂出来的。新项目建立的目标是创建一个开放的开发环境，以建立一个强大的可扩展的开源SIP服务器。最初，新项目命名为OpenSer，后来因为商标侵权问题，在2008年7月28号，重命名为Kamailio(另外一个
  • [实战]推流服务SRS安装 江湖一码农 直播推流SRSrtmp
    业务场景在Web浏览器端展示摄像头的视频数据。协议物联代理推流协议：rtmp浏览器器拉流协议：http-flv推流方案1、Nginx加nginx-http-flv-modules模块2、采用SRS服务器推流服务SRS网站：https://ossrs.io/lts/zh-cn/推流服务GitHub:https://github.com/ossrs/srs两种方案。建议使用SRS服务器，简单、性能高。
  • 【前端框架与库】「React 全面解析」：从 JSX 语法到高阶组件，深度剖析前端开发中的核心概念与最佳实践 呀啊~~ 【前端框架与库】前端框架javascriptreact.js前端学习
    React全面解析前言1.React的JSX语法JSX的特点：JSX编译2.组件通信父子组件通信（通过Props）兄弟组件通信3.React生命周期4.组件化开发组件化的好处：5.服务端渲染（SSR）为什么使用SSR？SSR的基本流程：客户端水合：6.ReactHooks自定义Hook：7.数据更新机制8.组件设计模式高阶组件（HOC）9.组件性能优化10.高阶组件（HOC）高阶组件的用途：HOC
  • leetcode1313--解压缩编码列表 m0nesy_8680 算法leetcode数据结构
    题目描述：给你一个以行程长度编码压缩的整数列表nums。考虑每对相邻的两个元素[freq,val]=[nums[2*i],nums[2*i+1]]（其中i>=0），每一对都表示解压后子列表中有freq个值为val的元素，你需要从左到右连接所有子列表以生成解压后的列表。请你返回解压后的列表。Code(java):classSolution{public:vectordecompressRLElist
  • 【排序算法】桶排序 中东大鹅 排序算法算法
    不能排序负数，适合数据较小但数据量较大的时候使用。定义了0-9十个桶，先排序个位，向高位排序首先，拿到数值后，先看个位，个位是几就放到对应的桶，以队列的形式进行排列。从0-9取出数据，先进来的先取走，依次取出从个位到高位依次进行上述操作。时间复杂度：O(Kn)，K值不能省。运行次数为最大位数×2nimportjava.util.Arrays;publicclassRadixSort{publics
  • Unity3D 范围检测 扇形 圆形 矩形 等腰三角形 码农小飞飞 Unity3D开发日常随笔Unity3D开发日常随笔
    代码如下：usingUnityEngine;publicclassRangeCheck{//--扇形publicstaticboolCurveRange(Transformself,Transformtarget,floatmaxDistance,floatmaxAngle){returnCurveRange(self,target,0,maxDistance,maxAngle);}publics
  • 2024年hw蓝队初级面试总结_weblogic反序列化流量特征(1) 2401_84254530 面试职场和发展
    apache：解析漏洞1.php%0a换行解析1.php.xxx未知后缀解析SSI远程命令执行路径穿越nginx：解析漏洞1.jpg/.php目录穿越（nginx配置别名的时候alias的时候，忘记加/将造成目录穿越漏洞）CRLF注入(Nginx会将$uri进行解码，导致传入%0a%0d即可引入换行符，造成CRLF注入漏洞)jboss:反序列化war后门部署weblogic：反序列化ssrf任意文
  • OrangePi香橙派usb摄像头+srs服务+ffmpeg+h264解码 Fatfish_treeFans ffmpegh.264linuxwebrtc视频编解码
    1、香橙派用的zero2，debian系统，usb免驱摄像头usb摄像头默认地址：/dev/video0查看usb是否识别：lsusb。查看可以用：ls/dev/video*,查看所有设备。2、安装srs服务，并推流webrtc参考：Build|SRS下载镜像到当前命令行路径：gitclone-bdevelophttps://gitee.com/ossrs/srs.git编译，注意需要切换到srs
  • Android Xfermode 实战 实现圆形、圆角图片 大厂在职_Xbg android
    2、原理====原理就不多说了，这张图在我博客里出现的次数大概有3次以上了，我们这次使用的模式DST_IN；也就是先绘制图片，再绘制形状了~~3、Xfermode实战============1、自定义属性首先依然是自定义属性，和上篇一致。2、构造中获取属性publicclassRoundImageViewByXfermodeextendsImageView{privatePaintmPaint;p
  • 追洞计划 | Gitlab CI Lint API未授权 SSRF漏洞(CVE-2021-22214) Ms08067安全实验室 javagit安全gitlabdocker
    文章来源｜MS08067Web安全知识星球本文作者：Taoing（Web安全攻防合伙人）GitLab是一个用于仓库管理系统的开源项目，使用Git作为代码管理工具，并在此基础上搭建起来的Web服务。一、漏洞描述GitLab是美国GitLab公司的一款使用RubyonRails开发的、自托管的、Git（版本控制系统）项目仓库应用程序。该程序可用于查阅项目的文件内容、提交历史、Bug列表等。CVE-20
  • C#面试常考随笔13: 泛型的主要约束和次要约束是什么？ Dr.勿忘 c#面试开发语言游戏引擎
    在C#泛型中，主要约束和次要约束用于限制泛型类型参数的使用，确保类型参数满足一定的条件，从而提高代码的可靠性和可维护性。以下是主要约束和次要约束的详细介绍：主要约束引用类型约束（class）：表示泛型类型参数必须是引用类型，包括类、接口、委托和数组类型等。例如，定义一个只能接受引用类型的泛型方法：voidProcessReferenceType(Tobj)whereT:class{//这里可以安全
  • Jmeter - 从入门到精通进阶篇 - Jmeter配置文件的刨根问底 - 上篇（详解教程）_jmeter 2401_87378238 jmeter
    Unlessrequiredbyapplicablelaworagreedtoinwriting,softwaredistributedundertheLicenseisdistributedonan“ASIS”BASIS,WITHOUTWARRANTIESORCONDITIONSOFANYKIND,eitherexpressorimplied.SeetheLicenseforthespecifi
  • Java多线程——对象的共享 松仔log #java多线程java开发语言
    可见性一个线程修改了对象状态后，其他线程能够看到发生的状态变化publicclassNoVisibility{privatestaticbooleanready;privatestaticintnumber;privatestaticclassReaderThreadextendsThread{@Overridepublicvoidrun(){while(!ready)Thread.yield()
  • 记一次从 Legacy OSSRH 到 Central Portal 进行迁移 zimoyin javamaven
    记录一次琐事的起因自从CentralPortal出现后，OSSRH已经被初步弃用，到如今访问OSSRH会被重定向到CentralPortal开始，OSSRH已经走下了历史舞台。但是对于我这个只是在OSSRH注册过并创建了io.github.zimoyin的命名空间没有上传过Deployments的人来说这无疑是好消息。因为对比OSSRH我更喜欢CentralPortal上传与发布Deploymen
  • 前端——vue代码结构 Alisazxy 前端
    默认代码结构README.md---项目说明文件package.json---定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。package-lock.json---会自动为npm修改node_modules树或任何操作而生成package.jsonLICENSE---开源协议index.html---项目默认首页模板.postcssrc.js---是对pos
  • vue项目代码结构 很小白的小白 Vue
    最外层文件：README.md————>说明文件package.json————>依赖文件存储地package-lock.json————>依赖的版本LICENSE————>开源协议说明index.heml————>项目首页的默认文件（深入）postcssrc.js————>postcss的配置项。gitignore————>git配置项（把不想上传的文件配置在里面，不会被提交）我添加了我不想提交
  • leetcode5186.区间内查询数字的频率（周赛，中等） 重you小垃 周赛题letcode5186区间内查询数字的频率
    看到调用query不超过10^5次，则query()必须控制在O(logn)以内自己的思路：定义一个unordered_maphash;//值->set的下标映射autole=hash[value].lower_bound(left);for(;*lehash;//值->vector下标映射classRangeFreqQuery{public:unordered_map>hash;RangeFre
  • 力扣2080.区间内查询数字的频率 阳光男孩01 leetcode算法职场和发展
    力扣2080.区间内查询数字的频率题目题目解析及思路题目要求求出[l,r]上val的出现次数用哈希表把所有元素的所有下标存起来，在val的数组中分别对l,r二分找到在[l,r]内的下标数量在下标上做二分把所有下标存入哈希表在left,right的范围内做二分求个数代码classRangeFreqQuery{unordered_map>pos;public:RangeFreqQuery(vector
  • 有限元python NSidle pythonpygame开发语言
    importnumpyasnpimportcopyimportpygame,sysfrompygame.localsimport*classNode:def__init__(self):self.id=-1self.coordinate=[0,0]self.type=-1defcopy(self):returnselfclassRodElement:def__init__(self):self.i
  • YOLOv10-1.1部分代码阅读笔记-loss.py 红色的山茶花 YOLO笔记深度学习
    loss.pyultralytics\utils\loss.py目录loss.py1.所需的库和模块2.classVarifocalLoss(nn.Module):3.classFocalLoss(nn.Module):4.classBboxLoss(nn.Module):5.classRotatedBboxLoss(BboxLoss):6.classKeypointLoss(nn.Module)
  • YOLOv9-0.1部分代码阅读笔记-common.py 红色的山茶花 笔记
    common.pymodels\common.py目录common.py1.所需的库和模块2.defautopad(k,p=None,d=1):3.classConv(nn.Module):4.classAConv(nn.Module):5.classADown(nn.Module):6.classRepConvN(nn.Module):7.classSP(nn.Module):8.classMP
  • YOLOv7-0.1部分代码阅读笔记-common.py 红色的山茶花 YOLO笔记
    common.pymodels\common.py目录common.py1.所需的库和模块2.defautopad(k,p=None):3.classMP(nn.Module):4.classSP(nn.Module):5.classReOrg(nn.Module):6.classConcat(nn.Module):7.classChuncat(nn.Module):8.classShortcut
  • 解线性方程组 qiuwanchi
    package gaodai.matrix; import java.util.ArrayList; import java.util.List; import java.util.Scanner; public class Test { public static void main(String[] args) { Scanner scanner = new Sc
  • 在mysql内部存储代码 annan211 性能mysql存储过程触发器
    在mysql内部存储代码 在mysql内部存储代码，既有优点也有缺点，而且有人倡导有人反对。 先看优点： 1 她在服务器内部执行，离数据最近，另外在服务器上执行还可以节省带宽和网络延迟。 2 这是一种代码重用。可以方便的统一业务规则，保证某些行为的一致性，所以也可以提供一定的安全性。 3 可以简化代码的维护和版本更新。 4 可以帮助提升安全，比如提供更细
  • Android使用Asynchronous Http Client完成登录保存cookie的问题 hotsunshine android
    Asynchronous Http Client是android中非常好的异步请求工具 除了异步之外还有很多封装比如json的处理，cookie的处理 引用 Persistent Cookie Storage with PersistentCookieStore This library also includes a PersistentCookieStore whi
  • java面试题 Array_06 java面试
    java面试题 第一，谈谈final, finally, finalize的区别。 final-修饰符（关键字）如果一个类被声明为final，意味着它不能再派生出新的子类，不能作为父类被继承。因此一个类不能既被声明为 abstract的，又被声明为final的。将变量或方法声明为final，可以保证它们在使用中不被改变。被声明为final的变量必须在声明时给定初值，而在以后的引用中只能
  • 网站加速 oloz 网站加速
    前序:本人菜鸟，此文研究总结来源于互联网上的资料，大牛请勿喷！本人虚心学习，多指教. 1、减小网页体积的大小，尽量采用div+css模式，尽量避免复杂的页面结构，能简约就简约。 2、采用Gzip对网页进行压缩；    GZIP最早由Jean-loup Gailly和Mark Adler创建，用于UNⅨ系统的文件压缩。我们在Linux中经常会用到后缀为.gz
  • 正确书写单例模式 随意而生 java 设计模式 单例
    　　单例模式算是设计模式中最容易理解，也是最容易手写代码的模式了吧。但是其中的坑却不少，所以也常作为面试题来考。本文主要对几种单例写法的整理，并分析其优缺点。很多都是一些老生常谈的问题，但如果你不知道如何创建一个线程安全的单例，不知道什么是双检锁，那这篇文章可能会帮助到你。 　　懒汉式，线程不安全 　　当被问到要实现一个单例模式时，很多人的第一反应是写出如下的代码，包括教科书上也是这样
  • 单例模式 香水浓 java
    懒汉  调用getInstance方法时实例化 public class Singleton { private static Singleton instance; private Singleton() {} public static synchronized Singleton getInstance() { if(null == ins
  • 安装Apache问题：系统找不到指定的文件 No installed service named "Apache2" AdyZhang apachehttp server
    安装Apache问题：系统找不到指定的文件 No installed service named "Apache2" 每次到这一步都很小心防它的端口冲突问题，结果，特意留出来的80端口就是不能用，烦。 解决方法确保几处： 1、停止IIS启动 2、把端口80改成其它 （譬如90，800，，，什么数字都好） 3、防火墙(关掉试试) 在运行处输入 cmd 回车，转到apa
  • 如何在android 文件选择器中选择多个图片或者视频？ aijuans android
    我的android app有这样的需求，在进行照片和视频上传的时候，需要一次性的从照片/视频库选择多条进行上传 但是android原生态的sdk中，只能一个一个的进行选择和上传。 我想知道是否有其他的android上传库可以解决这个问题，提供一个多选的功能，可以使checkbox之类的，一次选择多个 处理方法 官方的图片选择器(但是不支持所有版本的androi，只支持API Level
  • mysql中查询生日提醒的日期相关的sql baalwolf mysql
    SELECT sysid,user_name,birthday,listid,userhead_50,CONCAT(YEAR(CURDATE()),DATE_FORMAT(birthday,'-%m-%d')),CURDATE(),  dayofyear( CONCAT(YEAR(CURDATE()),DATE_FORMAT(birthday,'-%m-%d')))-dayofyear(
  • MongoDB索引文件破坏后导致查询错误的问题 BigBird2012 mongodb
    问题描述： MongoDB在非正常情况下关闭时，可能会导致索引文件破坏，造成数据在更新时没有反映到索引上。 解决方案：   使用脚本，重建MongoDB所有表的索引。 var names = db.getCollectionNames(); for( var i in names ){ var name = names[i]; print(name);
  • Javascript Promise bijian1013 JavaScriptPromise
            Parse JavaScript SDK现在提供了支持大多数异步方法的兼容jquery的Promises模式，那么这意味着什么呢，读完下文你就了解了。 一.认识Promises         “Promises”代表着在javascript程序里下一个伟大的范式，但是理解他们为什么如此伟大不是件简
  • [Zookeeper学习笔记九]Zookeeper源代码分析之Zookeeper构造过程 bit1129 zookeeper
       Zookeeper重载了几个构造函数，其中构造者可以提供参数最多，可定制性最多的构造函数是     public ZooKeeper(String connectString, int sessionTimeout, Watcher watcher, long sessionId, byte[] sessionPasswd, boolea
  • 【Java命令三】jstack bit1129 jstack
    jstack是用于获得当前运行的Java程序所有的线程的运行情况(thread dump），不同于jmap用于获得memory dump   [hadoop@hadoop sbin]$ jstack Usage: jstack [-l] <pid> (to connect to running process) jstack -F
  • jboss 5.1启停脚本　动静分离部署 ronin47
    以前启动jboss，往各种xml配置文件，现只要运行一句脚本即可。start nohup sh /**/run.sh -c servicename  -b ip -g  clustername   -u broatcast jboss.messaging.ServerPeerID=int  -Djboss.service.binding.set=p
  • UI之如何打磨设计能力? brotherlamp UIui教程ui自学ui资料ui视频
      在越来越拥挤的初创企业世界里，视觉设计的重要性往往可以与杀手级用户体验比肩。在许多情况下，尤其对于 Web 初创企业而言，这两者都是不可或缺的。前不久我们在《右脑革命：别学编程了，学艺术吧》中也曾发出过重视设计的呼吁。如何才能提高初创企业的设计能力呢?以下是 9 位创始人的体会。 1.找到自己的方式 如果你是设计师，要想提高技能可以去设计博客和展示好设计的网站如D-lists或
  • 三色旗算法 bylijinnan java算法
    import java.util.Arrays; /** 问题： 假设有一条绳子，上面有红、白、蓝三种颜色的旗子，起初绳子上的旗子颜色并没有顺序， 您希望将之分类，并排列为蓝、白、红的顺序，要如何移动次数才会最少，注意您只能在绳 子上进行这个动作，而且一次只能调换两个旗子。 网上的解法大多类似： 在一条绳子上移动，在程式中也就意味只能使用一个阵列，而不使用其它的阵列来
  • 警告:No configuration found for the specified action: \'s chiangfai configuration
    1.index.jsp页面form标签未指定namespace属性。 <!--index.jsp代码--> <%@taglib prefix="s" uri="/struts-tags"%> ... <s:form action="submit" method="post"&g
  • redis -- hash_max_zipmap_entries设置过大有问题 chenchao051 redishash
    使用redis时为了使用hash追求更高的内存使用率，我们一般都用hash结构，并且有时候会把hash_max_zipmap_entries这个值设置的很大，很多资料也推荐设置到1000，默认设置为了512，但是这里有个坑   #define ZIPMAP_BIGLEN 254 #define ZIPMAP_END 255     /* Return th
  • select into outfile access deny问题 daizj mysqltxt导出数据到文件
    本文转自：http://hatemysql.com/2010/06/29/select-into-outfile-access-deny%E9%97%AE%E9%A2%98/ 为应用建立了rnd的帐号，专门为他们查询线上数据库用的，当然，只有他们上了生产网络以后才能连上数据库，安全方面我们还是很注意的，呵呵。 授权的语句如下： grant select on armory.* to rn
  • phpexcel导出excel表简单入门示例 dcj3sjt126com PHPExcelphpexcel
    <?php error_reporting(E_ALL); ini_set('display_errors', TRUE); ini_set('display_startup_errors', TRUE);   if (PHP_SAPI == 'cli') die('This example should only be run from a Web Brows
  • 美国电影超短200句 dcj3sjt126com 电影
    1. I see． 我明白了。2. I quit! 我不干了!3. Let go! 放手!4. Me too． 我也是。5. My god! 天哪!6. No way! 不行!7. Come on． 来吧(赶快)8. Hold on． 等一等。9. I agree。 我同意。10. Not bad． 还不错。11. Not yet． 还没。12. See you． 再见。13. Shut up!
  • Java访问远程服务 dyy_gusi httpclientwebservicegetpost
        随着webService的崛起，我们开始中会越来越多的使用到访问远程webService服务。当然对于不同的webService框架一般都有自己的client包供使用，但是如果使用webService框架自己的client包，那么必然需要在自己的代码中引入它的包，如果同时调运了多个不同框架的webService，那么就需要同时引入多个不同的clien
  • Maven的settings.xml配置 geeksun settings.xml
    settings.xml是Maven的配置文件，下面解释一下其中的配置含义： settings.xml存在于两个地方： 1.安装的地方：$M2_HOME/conf/settings.xml 2.用户的目录：${user.home}/.m2/settings.xml 前者又被叫做全局配置，后者被称为用户配置。如果两者都存在，它们的内容将被合并，并且用户范围的settings.xml优先。
  • ubuntu的init与系统服务设置 hongtoushizi ubuntu
    转载自：  http://iysm.net/?p=178 init Init是位于/sbin/init的一个程序，它是在linux下，在系统启动过程中，初始化所有的设备驱动程序和数据结构等之后，由内核启动的一个用户级程序，并由此init程序进而完成系统的启动过程。 ubuntu与传统的linux略有不同，使用upstart完成系统的启动，但表面上仍维持init程序的形式。 运行
  • 跟我学Nginx+Lua开发目录贴 jinnianshilongnian nginxlua
    使用Nginx+Lua开发近一年的时间，学习和实践了一些Nginx+Lua开发的架构，为了让更多人使用Nginx+Lua架构开发，利用春节期间总结了一份基本的学习教程，希望对大家有用。也欢迎谈探讨学习一些经验。    目录 第一章 安装Nginx+Lua开发环境 第二章 Nginx+Lua开发入门 第三章 Redis/SSDB+Twemproxy安装与使用 第四章 L
  • php位运算符注意事项 home198979 位运算PHP&
    $a = $b = $c = 0; $a & $b = 1; $b | $c = 1  问a,b,c最终为多少?   当看到这题时，我犯了一个低级错误，误 以为位运算符会改变变量的值。所以得出结果是1 1 0 但是位运算符是不会改变变量的值的，例如： $a=1;$b=2; $a&$b;  这样a,b的值不会有任何改变
  • Linux shell数组建立和使用技巧 pda158 linux
    1.数组定义 　　[chengmo@centos5 ~]$ a=(1 2 3 4 5) 　　[chengmo@centos5 ~]$ echo $a 　　1 　　一对括号表示是数组，数组元素用“空格”符号分割开。 　　 2.数组读取与赋值 　　得到长度： 　　[chengmo@centos5 ~]$ echo ${#a[@]} 　　5 　　用${#数组名[@或
  • hotspot源码(JDK7) ol_beta javaHotSpotjvm
    源码结构图，方便理解：   ├─agent                            Serviceab
  • Oracle基本事务和ForAll执行批量DML练习 vipbooks oraclesql
    基本事务的使用： 从账户一的余额中转100到账户二的余额中去，如果账户二不存在或账户一中的余额不足100则整笔交易回滚 select * from account; -- 创建一张账户表 create table account( -- 账户ID id number(3) not null, -- 账户名称 nam
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他