猫哥不给力

搭建自己的SSR

一、基本使用

渲染一个Vue实例

在服务端把 Vue实例渲染为纯文本字符串

mkdir vue-ssr
cd vue-ssr
npm init -y 
npm install vue vue-server-renderer

// server.js
const vue = require('vue')
const renderer = require('vue-server-renderer').createRenderer()

const app = new Vue({
	template: `
		{{msg}}
	`,
	data: {
		msg: 'xxx'
	}
})

renderer.renderToString(app, (err, html)=> {
	if(err) throw err
	console.log(html)
})


// 运行
node server.js

结合到 Web 服务中

将渲染结果发送到客户端

// 安装 web服务
npm install express nodemon --save

// 加载并启动服务  server.js
const Vue = require('vue')
const renderer = require('vue-server-renderer').createRenderer()
const express = require('express')

const server = express()

server.get('/', (req, res) => {
    const app = new Vue({
        template: `
            {{ msg }}
        `,
        data: {
            msg: 'xxx'
        }
    })
    
    renderer.renderToString(app, (err, html) => {
        if(err) {
            return res.status(500).end('Internal Server Error.')
        }
        // 为html 设置 UTF-8编码
        res.setHeader('Content-Type', 'text/html; charset=utf-8')
        // res.end(html)
        res.end(`
            
            
            
                
                
                
                Document
            
            
                ${ html }
            
            
        `)
    })
})

server.listen('3000', () => {			// 一个端口对应一个程序，总共有 65535个端口
    console.log('server running at port 3000.')
})

// 使用nodemon 运行
npx nodemon server.js

使用 HTML 模板

//index.tempalte.html
<body>
    <!--vue-ssr-outlet-->					// html会插入到这个位置
</body>

// server.js
const fs = require('fs')
const renderer = require('vue-server-renderer').createRenderer({
    template: fs.readFileSync('./index.template.html', 'utf-8')
})
   // ...
res.end(html)						// 此时发送的html, 是与模板结合后的

在模板中使用外部数据

// server.js     多加一个参数
 renderer.renderToString(app, {
        title: '使用外部数据',
        meta: ``
    },(err, html) => { // ... })

// index.tempalte.html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    {{{ meta }}}							// html 使用  {{{ }}}
<title>{{ title }}</title>					// 字符使用 {{  }}

二、构建配置

基本思路

服务端渲染只是将实例渲染成字符串，并没有实现客户端交互的功能。

服务端入口——> 打包——>渲染——>生成HTML

客户端入口——> 打包——>接管已生成的HTML ——> 激活交互功能

源码结构

// 1.  src/App.vue
    <template>
      <div id="app">
          <h1> {{ msg }}</h1>
          <p>
              <input type="text" v-model="msg"/>
          </p>
          <button @click="onClick">点击</button>
      </div>
    </template>

    <script>
    export default {
        name: 'App',
        data(){
            return {
                msg: 'xxx'
            }
        },
        methods: {
            onClick(){
                console.log('lagou ~')
            }
        }
    }
    </script>

// 2.  src/app.js
/**
 * 通用入口文件
 * 纯客户端时，负责创建实例，并挂载到DOM。SSR，责任转移到纯客户端的entry 文件
 * */ 
    import Vue from 'vue'
    import App from './App.vue'

    // 导出一个工厂函数，用于创建新的应用程序、router、store 实例
    export default createApp(){
        const app = new Vue({
            render: h => h(app)
        })
        return { app }
    }

// 3.  entry-client.js
/**
 * 客户端入口文件
 * 负责创建应用程序，并挂载到DOM
 * 
 * */ 
    import { createApp } from './app'

    // 客户端特定引导逻辑...

    const { app } = createApp()

    // 挂载到 App.vue 中的 id="app"
    app.$mount('#app')


// 4. entry-server.js
/**
 * 服务端入口文件
 * 
 * */ 

    import { createApp } from './app'

    export default context => {
        const { app } = createApp()

        // 服务端路由处理、数据预取... 

        return app
    }

安装依赖

// 1. 生产依赖
	vue   Vue.js核心库
	vue-server-renderer   Vue服务端渲染工具
	express   基于Node的Web服务框架
	cross-en   通过npm sripts 设置的跨平台环境变量
	
// 2. 安装开发依赖
	webpack
	webpack-cli
	webpack-merge
	webpack-node-externals		// 排除webpack中的node模块
	@babel/core
	@babel/plugin-transform-runtime
	@babel/preset-env
	babel-loader
	css-loader
	url-loader
	file-loader
	rimraf			// 基于Node封装的跨平台 rm -rf 工具，清除之前的dist
	vue-loader
	vue-template-compiler
	friendly-errors-webpack-plugin  // webpack错误提示

webpack 配置文件

build 文件夹
1. webpack.base.config.js 公共配置
2. webpack.client.config.js 客户端打包配置文件
3. webpack.server.config.js 服务端打包配置文件

配置构建命令

// package.json 
  "scripts": {
    "build:client": "cross-env NODE_ENV=production webpack --config build/webpack.client.config.js",
    "build:server": "cross-env NODE_ENV=production webpack --config build/webpack.server.config.js",
    "build": "rimraf dist && npm run build:client && npm run build:server"
  },

启动应用

// server.js 
// 在服务端将vue实例渲染为字符串
const Vue = require('vue')
const fs = require('fs')
const express = require('express')

// 加载打包资源
const template = fs.readFileSync('./index.template.html', 'utf-8')
const serverBundle = require('./dist/vue-ssr-server-bundle.json')
const clientManifest = require('./dist/vue-ssr-client-manifest.json')

const renderer = require('vue-server-renderer').createBundleRenderer(serverBundle, {        // 打包后的启动 createRenderer ——> createBundleRenderer, 并加载打包后的文件
    template,
    clientManifest
})

// 启动服务
const server = express()

// 查找静态资源，处理返回
server.use('/dist/', express.static('./dist'))

server.get('/', (req, res) => {     
    renderer.renderToString({           // 打包中自动创建的实例 
        title: '打包运行',
        meta: ``
    },(err, html) => {
        if (err) {
            console.dir(err, 'err')
            return res.status(500).end('Internal Server Error.')
        }
        // 为html 设置 UTF-8编码
        res.setHeader('Content-Type', 'text/html; charset=utf-8')
        res.end(html)
    })
})

server.listen('8080', () => {
    console.log('server running at port 8080.')
})

注意：使用【SSR + 客户端混合】时，浏览器可能会更改一些特殊的HTML结构。如

会自动注入。为能够正确匹配，请确保在模板中写入有效的HTML。

三、构建配置开发模式

基本思路

问题：路由、数据预取、每次构建都要重启服务

开发模式下，需要不断的重新生成打包文件，重新生成 renderer 成为核心操作。

 // package.json
 "scripts": {
    "start": "cross-env NODE_ENV=production node server.js",
    "dev": "node server.js"
  },

开发模式 ——> 监视打包构建 ——> 重新生成 Renderer 渲染器
开发模式等待有 renderer渲染器后，调用 render 进行渲染

提取处理模块

创建 ./build/setup-dev-server.js 定义 setupDevServer()
1. 监视构建serverBundle——> update() ——> 创建 renderer
2. 监视构建template——> update() ——> 创建 renderer
  1. 使用 chokidar 插件进行监视，替代 fs.watch()、fs.watchFile()
3. 监视构建 clientManifest ——> update() ——> 创建 renderer

/* 此时代码 vue-ssr 调试没有顺利进行 */

服务端监视打包

webpack ——> watch()

把数据写入内存中

使用 webpack-dev-middleware 插件

热更新

使用 webpack-hot-middleware 插件

四、路由处理

编写通用应用注意事项

每个请求应该都是全新的、独立的应用程序实例，以便不会有交叉请求造成的状态污染。
1. 使用工厂函数 createApp() 返回实例
2. 服务器上“预取”数据，不支持响应式数据。
只有 beforeCreate 和 created 会在服务器端渲染（SSR）过程张松被调用。
1. 避免使用产生全局副作用的代码，如使用 setInterval 设置 timer.
如果使用了像 window 或 document 这样的特定平台 API，在Node.js中执行会报错。
1. axios 可以向服务器和客户端都暴露相同的API。
自定义指令会在SSR过程中导致错误。
1. 推荐使用组件
2. 在创建服务器 renderer时，使用 directives 选项所提供的“服务器端版本”

配置 Vue-Router

使用Vue-Router处理路由

将路由注册到根实例

// app.js 
import Vue from 'vue'
import App from './App.vue'
import { createRouter  } from './router'

// 导出一个工厂函数，用于创建新的应用程序、router、store 实例
export function createApp() {
    const router = createRouter()
    const app = new Vue({
        router,
        render: h => h(App)
    })
    return {
        app,
        router
    }
}

适配服务端入口

服务端server适配

适配客户端入口

管理页面Head页面

使用 vue-meta 插件

五、数据预取

服务端不支持异步获取数据，需要 preload 或 prefetch, 放到 vuex 中。

你可能感兴趣的:(vue.js,前端,javascript,node.js)

Angular 编译前的脚本执行 t0_54manong 编程问题解决手册 angular.js 前端 javascript 个人开发
在使用Angular开发项目时，有时候我们需要在每次编译之前执行特定的脚本或JavaScript函数。这在开发环境中非常有用，比如运行某些预处理、清理或其他自定义逻辑。今天我们将探讨如何在Angularv17结合esbuild实现这个功能。问题背景假设你正在使用Angularv17进行开发，并且已经配置了esbuild作为构建工具。现在你需要在每次Angular编译之前（特别是使用ngwatch时
「Kubernetes Objects」- Service（学习笔记） @20210227 k4nzdroid
Service，服务，用于暴露Pod以供访问。官方文档及手册KubernetesAPIv1.18/Servicev1coreService?Pod会被创建，并且还会消失，这由ReplicaSets控制。每个Pod都有自己的IP地址，但是这些IP地址不能视为可靠的。那么，如果前端的一部分Pod依赖于后端的Pod，那前端的这些Pod如何找出并追踪后端的Pod？ServiceService是一个抽象，定
JavaScript基础-API 和 Web API 難釋懷前端 javascript 开发语言
在现代Web开发中，API（应用程序接口）是连接不同软件组件或系统之间的桥梁。对于前端开发者来说，JavaScript与WebAPI的结合使用尤为重要，它使得我们可以访问浏览器提供的各种功能和服务，从而构建出交互性更强、用户体验更好的网页应用。本文将介绍API的基本概念，重点探讨WebAPI及其在JavaScript中的应用。一、什么是API？API全称为“ApplicationProgrammi
Vue相关面试题努力的搬砖人. vue.js
以下是150道Vue相关面试题及详细答案：Vue基础1.Vue.js是什么？Vue.js是一个用于构建用户界面的渐进式JavaScript框架，专注于视图层，允许开发者以声明式的方式构建用户界面，具有轻量、高效、易上手等特点。2.Vue实例的作用是什么？Vue实例是应用程序的核心，它管理数据、方法、生命周期钩子等，通过数据双向绑定将数据与视图层连接起来，实现数据驱动视图。3.如何创建一个Vue实例
【概念】Node.js，Express.js MongoDB Mongoose Express-Validator Async Handler 一袋米扛几楼98 各类概念 node.js express javascript
1.Node.js定义：Node.js是一个基于ChromeV8引擎的JavaScript运行时环境，允许你在服务器端运行JavaScript代码。作用：它使得开发者可以使用JavaScript编写服务器端代码，从而实现前后端使用同一种语言。比喻：Node.js就像是“工厂的电力系统”，它为整个工厂（应用程序）提供动力（运行环境）。没有电力系统，工厂的机器（代码）就无法运转。特点：非阻塞I/O：N
理解 Node.js 中的 process`对象与常用操作 red润前端 node.js 前端 javascript
理解Node.js中的process对象与常用操作在Node.js中，process是一个全局对象，提供了与当前Node.js进程相关的信息和操作。无论是获取进程信息、处理信号、访问环境变量，还是控制进程行为，process都是不可或缺的工具。看到process不犯怵了1.获取进程信息process提供了许多属性和方法来获取当前进程的信息。process.pid：获取当前进程的PID（进程ID）。
npm详解：掌握 Node.js 包管理的艺术 Lv_Jin_Gang npm
在现代软件开发领域，包管理和依赖处理是任何项目不可或缺的一部分。对于基于Node.js的应用程序而言，NPM（NodePackageManager）不仅是安装和管理第三方库的标准工具，也是发布、共享和重用代码片段的核心平台。本文将深入探讨NPM的各个方面，从基础概念到高级用法，旨在为你提供一个全面而深入的理解。一、NPM简介与安装1.1NPM的诞生与重要性NPM伴随着Node.js的诞生而出现，它
JavaScript基础-DOM事件流難釋懷 javascript 开发语言
在Web开发过程中，理解和掌握DOM事件流是实现高效交互的关键。DOM事件流描述了当一个事件发生时，它在文档树中的传播路径。了解事件流的概念有助于我们更精确地控制事件处理逻辑，避免不必要的行为，并提升用户体验。本文将深入探讨DOM事件流的基本概念，包括事件捕获、目标阶段和事件冒泡，并通过示例展示如何应用这些知识。一、什么是DOM事件流？DOM事件流是指事件在整个页面结构中传播的过程。根据W3C标准
如何用Function Calling解锁OpenAI的「真实世界」交互能力？（附Node.js 实战） hongkid AI编程
一、FunctionCalling：大模型的「手脚延伸器」1.1核心定义FunctionCalling是OpenAI在2023年6月13日推出的革命性功能（对应模型版本gpt-3.5-turbo-0613和gpt-4-0613），允许开发者通过自然语言指令触发预定义函数，实现大模型与现实世界系统的交互。如同给语言模型安装「手脚」，使其不仅能思考，还能执行具体操作。openai官方说明：https:
Node.js系列（2）--性能优化指南一进制ᅟᅠ ‌‍‎‏ Node.js node.js 性能优化
Node.js性能优化指南⚡引言Node.js应用的性能优化是确保应用高效运行的关键。本文将深入探讨Node.js性能优化的各个方面，包括内存管理、CPU优化、I/O优化等，帮助开发者构建高性能的Node.js应用。性能优化概述Node.js性能优化主要包括以下方面：内存优化：内存泄漏检测、垃圾回收优化CPU优化：代码执行效率、异步处理、工作线程I/O优化：文件操作、网络请求、数据库访问缓存优化：
Node.js 包与 npm 详解：使用 npm 的重要注意事项与最佳实践还是鼠鼠 node.js node.js javascript vscode 前端
目录Node.js包与npm：使用npm的其它注意点详解1.package.json与package-lock.json的作用什么是package.json？什么是package-lock.json？示例：package-lock.json片段2.语义化版本（SemVer）与依赖版本管理3.全局安装vs.本地安装本地安装（默认）全局安装4.npm缓存管理与优化清理npm缓存5.依赖冲突与node_
jquery基础和导航栏声声codeGrandMaster django python 后端
jquery基础和导航栏目录1jQuery基础2jQuery事件3jQuery影藏和显示4jQuery滑动5、区块属性6、导航栏1jQuery基础介绍jQuery是一个JavaScript库。jQuery极大地简化了JavaScript编程。jQuery很容易学习。基础语法：$(selector).action()美元符号定义jQuery选择符（selector）“查询"和"查找”HTML元素jQ
.gitlab-ci.yml 配置文件详解程序媛夏天 Git gitlab ci/cd .gitlab-ci.yml
个人主页：不爱吃糖的程序媛‍♂️作者简介：前端领域新星创作者、CSDN内容合伙人，专注于前端各领域技术，成长的路上共同学习共同进步，一起加油呀！✨系列专栏：前端面试宝典、JavaScript进阶、vue实战资料领取：前端进阶资料以及文中源码可以在公众号“不爱吃糖的程序媛”领取git工具文档说明：https://docs.gitlab.com/ee/ci/yaml/gitlab_ci_yaml.ht
学习111 麋鹿叔叔学习
项目名称项目简介主要功能技术原理GitHub地址browser-use智能浏览器工具，让AI像人类一样操作浏览器，实现网页自动化网页浏览与操作、多标签页管理、视觉识别与内容提取、操作记录与重复执行、自定义动作支持、主流LLM模型支持为大语言模型服务的创新Python工具库GitHubEkoFellouAI推出的生产就绪型JavaScript框架，基于自然语言驱动创建智能代理支持所有平台，提供统一便
前端如何实现一个五星评价，鼠标滑动，前边星星颜色的变黄，后边的不变；修心光前端
直接上代码.star-rating{display:flex;padding:10px0;}.star{position:relative;width:40px;height:40px;}.half{position:absolute;top:0;width:20px;height:40px;overflow:hidden;font-size:40px;color:#e0e0e0;cursor:p
前端如何实现鼠标移上这个元素，另外一个元素变色 =^_^=银爪 css 前端 javascript
1、使用CSS选择器和伪类来实现这个效果具体步骤如下：获取要修改样式的元素使用CSS选择器选中要操作的元素，并使用伪类“:hover”来指定当鼠标悬停在该元素上时应用的样式指定要应用的样式例如，如果您有一个元素ID为“target”，需要将其颜色更改为红色，当鼠标移到ID为“trigger”的元素上时，可以使用以下代码：#trigger:hover#target{color:red;}这段代码指定
推荐开源项目：FastAPI Best Architecture — 极致的后端架构设计蓬玮剑
推荐开源项目：FastAPIBestArchitecture—极致的后端架构设计项目地址:https://gitcode.com/gh_mirrors/fa/fastapi_best_architecture项目简介在寻找一款基于FastAPI构建的强大且灵活的后端解决方案吗？那么，你已经找到了——FastAPIBestArchitecture。这是一个遵循前端与后端分离原则的中间件层解决方案，采
发现一个好用的Vue.js内置组件兴趣广泛的程序猿笔记 uniapp vue.js vue.js 前端 javascript
目录一、这个好用的内置组件是什么？二、这个组件的主要功能三、怎么使用？四、使用注意事项五、我的使用场景一、这个好用的内置组件是什么？今天在优化我的平台应用时，发现一个好用的组件标签--。是Vue.js中的一个内置组件，它的主要作用是缓存动态组件实例，避免它们在切换时被销毁和重新创建。这对于需要保留组件状态（例如表单输入、滚动位置等）的应用场景特别有用。通过使用，可以显著提升用户体验，因为不需要每次
在 Spring Boot 结合 MyBatis 的项目中，实现字段脱敏（如手机号、身份证号、银行卡号等敏感信息的部分隐藏）可以通过以下方案实现冷冷清清中的风风火火笔记 springboot spring boot mybatis 后端
在SpringBoot结合MyBatis的项目中，实现字段脱敏（如手机号、身份证号、银行卡号等敏感信息的部分隐藏）可以通过以下方案实现。以下是分步说明和完整代码示例：一、实现方案选择1.方案一：自定义注解+Jackson序列化脱敏适用场景：数据返回给前端时动态脱敏，数据库存储原始数据。优点：无侵入性，通过注解灵活控制脱敏字段，与业务逻辑解耦。核心实现：利用Jackson的JsonSerialize
Javascript基础 GesLuck javascript 开发语言 ecmascript
目录1.变量声明2.基本数据类型3.复杂数据类型4.字符串方法5.对象方法6.时间方法7.条件（if）8.循环（for/while）9.遍历（forin/of）10.多选（Switch）END1.变量声明const：除非变量需要重新赋值（优先使用）——consta=true;let：需要修改值时使用{大括号内用}（其次使用）——letb="hello"var：除非维护旧代码（避免使用）——varc
lrz 源码核心篇剖析：如何实现高效、兼容的图片压缩？沐土Arvin javascript 前端开发语言
写在前面前面是讲解了lrz基础用法,从6开始讲解源码,使用过lrz的可以直接从6开始看,中间也掺杂了一下我自己开发过程中的踩坑和经验分享,欢迎讨论!lrz（LocalResizeIMG）是一个前端图片压缩库，主要用于在浏览器中压缩图片并上传。以下是其主要特点和功能：1.主要功能图片压缩：通过调整图片质量和尺寸来减小文件大小。保持宽高比：压缩时可保持图片原始宽高比。多格式支持：支持常见图片格式如JP
github如何为开源项目作出贡献 PXM的算法星球 github 开源
就在昨天，笔者取得了第一次开源项目贡献，虽然更新的内容很小，但是也算是迈出了第一步1.选择合适的开源项目（1）兴趣优先选择自己感兴趣的项目会更有动力参与，比如你喜欢前端开发，可以关注React、Vue相关的开源项目；如果喜欢后端，可以尝试贡献Django、SpringBoot等项目。（2）关注活跃度一个活跃的开源项目通常意味着更快的反馈和更友好的开发者社区。你可以通过以下方式判断：Issue更新频
HTML5前端第七章节 NaZiMeKiY HTML5 1024程序员节
本章节为前端网页页面实战，包含我们之前所学的全部内容一.创建项目目录1.网站根目录：网站根目录指的是存放网站的第一层文件夹，内部包含当前网站的所有素材，包含HTML，CSS，需要的素材图片等等2.根目录之下的文件夹（1）.images文件夹：存放固定使用的图片素材（2）.uploads文件夹：存放非固定使用的图片素材（3）.CSS文件夹：存放CSS文件（使用link标签引入）在CSS文件夹中又分为
JavaScript 箭头函数使用总结及注意事项（适合新手到进阶）我真聪明。 javascript 开发语言 ecmascript
箭头函数（=>）是ES6的核心特性之一，它简化了函数写法并改变了this的指向逻辑，但在使用时需要明确其适用场景和限制。以下是详细总结：一、箭头函数核心特点简洁语法：//传统函数constadd=function(a,b){returna+b;};//箭头函数constadd=(a,b)=>a+b;//单行省略returnconstadd=(a,b)=>{returna+b;};//多行需显式re
使用 React 和 Cypress 进行单元测试 pxr007 单元测试 react.js junit
每个开发人员都希望发布一个没有错误的生产应用程序。为了实现这一点，我们需要考虑如何将测试集成到我们的应用程序中。我们可以使用许多测试工具、框架和测试类型。Cypress是一个现代化的自动化测试套件。它是一个基于JavaScript的完全开源的测试框架，由Mocha和Chai等支持BDD和TDD断言样式的库构建。此外，如果您熟悉用JavaScript编写测试，那么使用Cypress会很容易。Cypr
前端面试：[React] scheduler 调度机制原理？ returnShitBoy 前端 react.js javascript
ReactScheduler是React16.8引入的一种调度机制，旨在对高效渲染和复杂应用程序的性能进行优化。它允许React在空闲时间进行渲染，优先处理对用户体验最为重要的任务。以下是Scheduler调度机制的原理，以及它在实际工作中如何帮助管理渲染。1.调度机制的背景React的渲染过程可能会受到多个因素的影响，例如用户输入、网络请求以及其他状态变化。传统的渲染机制在某些情况下可能导致性能
前端小食堂 | Day17 - 前端安全の金钟罩喵爪排序前端安全状态模式
️今日盾牌：XSS/CSRF攻防全解析1.XSS防御の三重结界//危险操作：直接渲染未过滤内容document.getElementById('content').innerHTML=userInput;//✅安全姿势一：文本转义constescapeHTML=(str)=>{constmap={'&':'&','':'>','"':'"',"'":'''};ret
前端面试请叫我子鱼编程语言笔试面试程序员 web interview
前端面试之道JS基础知识点及常考面试题原始（Primitive）类型面试题：原始类型有哪几种？null是对象嘛？在JS中，存在着6种原始值，分别是：booleannullundefinednumberstringsymbol首先原始类型存储的都是值，是没有函数可以调用的对象（Object）类型面试题：对象类型和原始类型的不同之处？函数参数是对象会发生什么问题？在JS中，除了原始类型那么其他的都是对
chokidar - chokidar 初识（初识案例演示、初识案例解读、初识案例测试）我命由我12345 Node.js 简化库编程 node.js js javascript 前端框架前端 npm html5
一、chokidar1、chokidar概述chokidar是一个用于监视文件系统变化的Node.js库chokidar提供了一种简单、高效的方式来监视文件和目录的创建、修改、删除等操作chokidar是是fs.watch和fs.watchFile方法的增强版，解决了它们在一些平台上的不一致性和局限性2、chokidar的特点跨平台的支持：chokidar在Windows、Linux、macOS上
Vue前端实现多个条件表格搜索 1724580787 前端 vue.js javascript
文章目录操作实现效果测试json数据搜索栏条件过滤完成搜索表格栏完整代码操作实现效果在vue文件中通过js代码完成多条件搜索符合条件的table数据，本文使用了element-ui组件创建表格。效果如下图所示：测试json数据[{"test1":"","test2":"","test3":"","test4":""}...//这里只展示一条数据]搜索栏条件过滤完成搜索computed计算方法监视t
jquery实现的jsonp掉java后台知了ing java jsonp jquery
什么是JSONP？先说说JSONP是怎么产生的：其实网上关于JSONP的讲解有很多，但却千篇一律，而且云里雾里，对于很多刚接触的人来讲理解起来有些困难，小可不才，试着用自己的方式来阐释一下这个问题，看看是否有帮助。 1、一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准； 2、
Struts2学习笔记 caoyong struts2
SSH : Spring + Struts2 + Hibernate 三层架构(表示层,业务逻辑层,数据访问层) MVC模式 (Model View Controller) 分层原则:单向依赖，接口耦合 1、Struts2 = Struts + Webwork 2、搭建struts2开发环境 a>、到www.apac
SpringMVC学习之后台往前台传值方法满城风雨近重阳 springMVC
springMVC控制器往前台传值的方法有以下几种： 1.ModelAndView 通过往ModelAndView中存放viewName：目标地址和attribute参数来实现传参： ModelAndView mv=new ModelAndView(); mv.setViewName="success
WebService存在的必要性？一炮送你回车库 webservice
做Java的经常在选择Webservice框架上徘徊很久，Axis Xfire Axis2 CXF ，他们只有一个功能，发布HTTP服务然后用XML做数据传输。是的，他们就做了两个功能，发布一个http服务让客户端或者浏览器连接，接收xml参数并发送xml结果。当在不同的平台间传输数据时，就需要一个都能解析的数据格式。但是为什么要使用xml呢？不能使json或者其他通用数据
js年份下拉框 3213213333332132 java web ee
<div id="divValue">test...</div>测试 //年份 <select id="year"></select> <script type="text/javascript"> window.onload =
简单链式调用的实现技术归来朝歌方法调用链式反应编程思想
在编程中，我们可以经常遇到这样一种场景：一个实例不断调用它自身的方法，像一条链条一样进行调用这样的调用你可能在Ajax中，在页面中添加标签： $("<p>").append($("<span>").text(list[i].name)).appendTo("#result"); 也可能在HQ
JAVA调用.net 发布的webservice 接口 darkranger webservice
/** * @Title: callInvoke * @Description: TODO(调用接口公共方法) * @param @param url 地址 * @param @param method 方法 * @param @param pama 参数 * @param @return * @param @throws BusinessException
Javascript模糊查找 | 第一章循环不能不重视。 aijuans Way
最近受我的朋友委托用js+HTML做一个像手册一样的程序，里面要有可展开的大纲，模糊查找等功能。我这个人说实在的懒，本来是不愿意的，但想起了父亲以前教我要给朋友搞好关系，再加上这也可以巩固自己的js技术，于是就开始开发这个程序，没想到却出了点小问题，我做的查找只能绝对查找。具体的js代码如下： function search(){ var arr=new Array("my
狼和羊，该怎么抉择 atongyeye 工作
狼和羊，该怎么抉择在做一个链家的小项目，只有我和另外一个同事两个人负责，各负责一部分接口，我的接口写完，并全部测联调试通过。所以工作就剩下一下细枝末节的，工作就轻松很多。每天会帮另一个同事测试一些功能点，协助他完成一些业务型不强的工作。今天早上到公司没多久，领导就在QQ上给我发信息，让我多协助同事测试，让我积极主动些，有点责任心等等，我听了这话，心里面立马凉半截，首先一个领导轻易说
读取android系统的联系人拨号百合不是茶 android sqlite数据库内容提供者系统服务的使用
联系人的姓名和号码是保存在不同的表中,不要一下子把号码查询来,我开始就是把姓名和电话同时查询出来的,导致系统非常的慢关键代码: 1, 使用javabean操作存储读取到的数据 package com.example.bean; /** * * @author Admini
ORACLE自定义异常 bijian1013 数据库自定义异常
实例： CREATE OR REPLACE PROCEDURE test_Exception ( ParameterA IN varchar2, ParameterB IN varchar2, ErrorCode OUT varchar2 --返回值,错误编码 ) AS /*以下是一些变量的定义*/ V1 NUMBER; V2 nvarc
查看端号使用情况征客丶 windows
一、查看端口在windows命令行窗口下执行： >netstat -aon|findstr "8080" 显示结果： TCP 127.0.0.1:80 0.0.0.0:0 &
【Spark二十】运行Spark Streaming的NetworkWordCount实例 bit1129 wordcount
Spark Streaming简介 NetworkWordCount代码 /* * Licensed to the Apache Software Foundation (ASF) under one or more * contributor license agreements. See the NOTICE file distributed with
Struts2 与 SpringMVC的比较 BlueSkator struts2 spring mvc
1. 机制：spring mvc的入口是servlet，而struts2是filter，这样就导致了二者的机制不同。 2. 性能：spring会稍微比struts快。spring mvc是基于方法的设计，而sturts是基于类，每次发一次请求都会实例一个action，每个action都会被注入属性，而spring基于方法，粒度更细，但要小心把握像在servlet控制数据一样。spring
Hibernate在更新时，是可以不用session的update方法的(转帖） BreakingBad Hibernate update
地址：http://blog.csdn.net/plpblue/article/details/9304459 public void synDevNameWithItil() {Session session = null;Transaction tr = null;try{session = HibernateUtil.getSession();tr = session.beginTran
读《研磨设计模式》-代码笔记-观察者模式 bylijinnan java 设计模式
声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.List; import java.util.Observable; import java.util.Observer; /** * “观
重置MySQL密码 chenhbc mysql 重置密码忘记密码
如果你也像我这么健忘，把MySQL的密码搞忘记了，经过下面几个步骤就可以重置了（以Windows为例，Linux/Unix类似）： 1、关闭MySQL服务 2、打开CMD，进入MySQL安装目录的bin目录下，以跳过权限检查的方式启动MySQL mysqld --skip-grant-tables 3、新开一个CMD窗口，进入MySQL mysql -uroot
再谈系统论，控制论和信息论 comsci 设计模式生物能源企业应用领域模型
再谈系统论，控制论和信息论偶然看
oracle moving window size与 AWR retention period关系 daizj oracle
转自： http://tomszrp.itpub.net/post/11835/494147 晚上在做11gR1的一个awrrpt报告时,顺便想调整一下AWR snapshot的保留时间,结果遇到了ORA-13541这样的错误.下面是这个问题的发生和解决过程. SQL> select * from v$version; BANNER -------------------
Python版B树 dieslrae python
话说以前的树都用java写的,最近发现python有点生疏了,于是用python写了个B树实现,B树在索引领域用得还是蛮多了,如果没记错mysql的默认索引好像就是B树... 首先是数据实体对象,很简单,只存放key,value class Entity(object): '''数据实体''' def __init__(self,key,value)
C语言冒泡排序 dcj3sjt126com 算法
代码示例： # include <stdio.h> //冒泡排序 void sort(int * a, int len) { int i, j, t; for (i=0; i<len-1; i++) { for (j=0; j<len-1-i; j++) { if (a[j] > a[j+1]) // >表示升序
自定义导航栏样式 dcj3sjt126com 自定义
-(void)setupAppAppearance { [[UILabel appearance] setFont:[UIFont fontWithName:@"FZLTHK—GBK1-0" size:20]]; [UIButton appearance].titleLabel.font =[UIFont fontWithName:@"FZLTH
11.性能优化-优化-JVM参数总结 frank1234 jvm参数性能优化
1.堆 -Xms --初始堆大小 -Xmx --最大堆大小 -Xmn --新生代大小 -Xss --线程栈大小 -XX:PermSize --永久代初始大小 -XX:MaxPermSize --永久代最大值 -XX:SurvivorRatio --新生代和suvivor比例,默认为8 -XX:TargetSurvivorRatio --survivor可使用
nginx日志分割 for linux HarborChung nginx linux 脚本
nginx日志分割 for linux 默认情况下，nginx是不分割访问日志的，久而久之，网站的日志文件将会越来越大，占用空间不说，如果有问题要查看网站的日志的话，庞大的文件也将很难打开，于是便有了下面的脚本使用方法，先将以下脚本保存为 cutlog.sh，放在/root 目录下，然后给予此脚本执行的权限复制代码代码如下: chmo
Spring4新特性——泛型限定式依赖注入 jinnianshilongnian spring spring4 泛型式依赖注入
Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API Spring4新
centOS安装GCC和G++ liuxihope centos gcc
Centos支持yum安装，安装软件一般格式为yum install .......，注意安装时要先成为root用户。按照这个思路，我想安装过程如下：安装gcc：yum install gcc 安装g++： yum install g++ 实际操作过程发现，只能有gcc安装成功，而g++安装失败，提示g++ command not found。上网查了一下，正确安装应该
第13章 Ajax进阶（上） onestopweb Ajax
index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
How to determine BusinessObjects service pack and fix pack blueoxygen BO
http://bukhantsov.org/2011/08/how-to-determine-businessobjects-service-pack-and-fix-pack/ The table below is helpful. Reference BOE XI 3.x 12.0.0. y BOE XI 3.0 12.0. x. y BO
Oracle里的自增字段设置 tomcat_oracle oracle
　大家都知道吧，这很坑，尤其是用惯了mysql里的自增字段设置，结果oracle里面没有的。oh，no 　　我用的是12c版本的，它有一个新特性，可以这样设置自增序列，在创建表是，把id设置为自增序列 create table t ( id 　　　　 number generated by default as identity (start with 1 increment b
Spring Security（01）——初体验 yang_winnie spring Security
Spring Security（01）——初体验博客分类： spring Security Spring Security入门安全认证首先我们为Spring Security专门建立一个Spring的配置文件，该文件就专门用来作为Spring Security的配置

按字母分类： A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 其他