随风浅入画
随风浅入画

Next.js学习与实战

Next.js

github Next.js相关代码

一.介绍

  • Next.js是React服务端渲染应用框架.用于构建SEO友好的SPA应用
  • 支持两种预渲染方式，静态生成和服务器端渲染
  • 基于页面的路由系统，路由零配置
  • 自动代码拆分，优化页面加载速度
  • 支持静态导出，可将应用导出为静态网站
  • 内置CSS-in-JS库styled-jsx
  • 方案成熟，可用于生产环境，世界许多公司都在使用
  • 应用部署简单，拥有专属部署环境Vercel,也可以部署在其他环境

二.创建 Next.js 项目

  • 创建: npm init next-app next-guide
  • 运行: npm run dev
  • 访问: localhost:3000
  • 临时安装 create-next-app 用于创建 Next.js 项目。

三.基于页面的路由系统

创建页面

  • 在Next.js中，页面是被放置在pages文件夹中的React组件
  • 组件需要被默认导出
  • 组件文件中不需要引入React
  • 页面地址与文件地址是对应的关系
  • index页面可以直接通过/访问

页面跳转

  • Link 组件默认使用 JavaScript 进行页面跳转.即 SPA 形式的跳转
  • 如果浏览器中 JavaScript 被禁用.则使用链接跳转
  • Link 组件中只能添加 href 属性，其余属性添加到 a 标签上
  • Link 组件通过预取(在生产中)功能自动优化应用程序以获得最佳性能
import Link from 'next/link'

export default function Home() {
     
  return <div>
    index page works
    <Link href="/list">
      <a>jump to list page</a>
    </Link>
  </div>
}

四.静态资源、元数据和 CSS

静态资源

  • 应用程序根目录中的 public 文件夹用于提供静态资源。
  • public/images/1.jpg直接用/images/1.jpg访问
  • public/css/base.jpg直接用/css/base.css访问

通过 Head 组件修改元数据

import Head from 'next/head'
function List() {
     
  return (
    <>
      <Head>
        <title>list page</title>
      </Head>
      <div>这是list页面</div>
    </>
  )
}
export default List

在Next应用中添加样式的方式

内置 styled-jsx

<>
  <Link href="/list">
    <a className="demo">jump to list page</a>
  </Link>
  <style jsx>{
     `
    .demo {
      color : red
    }
  `}
  </style>
</>

CSS 模块

  • 通过使用 CSS 模块功能，允许将组件的 CSS 样式编写在单独的 CSS 文件中
  • CSS 模块约定样式文件的名称必须为"组件文件名称.module.css"
// pages/list.js
import Head from "next/head";
import style from './list.module.css'

export default function List () {
     
  return (
    <>
      <Head>
        <title>List Page</title>
      </Head>
      <div className={
     style.demo}>List Page</div>
    </>
  )
}

/* page/list.module.css */
.demo {
     
  color: green;
  font-size: xx-large;
}

添加全局样式文件

  • 在 pages 文件夹中新建 _app.js 文件并加入如下代码
  • 在项目根目录下创建 styles 文件夹，并在其中创建 global.css
  • 在 _app.js 中通过 import 引入 global.css.
  • 重新启动开发服务器
import '../styles/globals.css'
function MyApp({
      Component, pageProps }) {
     
  return <Component {
     ...pageProps} />
}
export default MyApp

五.预渲染

概述

  • 预渲染是指数据和 HTML 的拼接在服务器端提前完成
  • 预渲染可以使 SEO 更加友好
  • 预渲染会带来更好的用户体验,可以无需运行 JavaScript 即可查看应用程序 UI

预渲染的两种形式

  • 在 Next.js 中支持两种形式的预渲染：静态生成和服务器端渲染
  • 静态生成和服务器端渲染是生成 HTML 的时机不同
  • 静态生成：静态生成是在构建时生成 HTML 。以后的每个请求都共用构建时生成好的 HTML
  • 服务器端渲染：服务器端渲染是在请求时生成 HTML 。每个请求都会重新生成 HTML

如何选择

  • Next.js 允许开发者为每个页面选择不同的预渲染方式，不同的预渲染方式拥有不同的特点，应根据场景进行渲染
  • 但建议大多数页面建议使用静态生成
  • 静态生成一次构建，反复使用，访问速度快，因为页面都是事先生成好的
    • 适用场景：营销页面、博客文章、电子商务产品列表、帮助和文档
  • 服务器端渲染访问速度不如静态生成快，但是由于每次请求都会重新渲染，所以适用数据频繁更新的页面或页面内容随请求变化而变化的页面

无数据静态生成

  • next默认使用的是静态生成
    • npm run build之后在.next下生成的pages和static就是无数据生成
  • 如果组件不需要外部数据，直接进行静态生成。

有数据静态生成getStaticProps

  • 有数据静态生成是在组件需要外部数据时，在构建过程中 Next.js 会预先获取组件需要的数据，然后再对组件进行静态生成。

  • getStaticProps 方法的作用是获取组件静态生成需要的数据。并通过返回 props 的方式将数据传递给组件。

  • 该方法是一个异步函数，需要在组件内部进行导出。

  • 在开发模式下， getStaticProps在每个请求上运行。

  • 在生产模式下， getStaticProps 只会在构建的时候执行，而每次访问 /list 页面时不会再执行 getStaticProps 方法。

import Head from 'next/head'
import styles from './list.module.css'
import {
      readFile } from 'fs'
import {
      promisify } from 'util'
import {
      join } from 'path'

const read = promisify(readFile)

function List({
     data}) {
     
  return (
    <>
      <Head>
        <title>list page</title>
      </Head>
      <div className={
     styles.demo}>这是list页面</div>
      <div>{
     data}</div>
    </>
  )
}

export default List

export async function getStaticProps () {
     
  let data = await read(join(process.cwd(),'pages','_app.js'),'utf-8')
  console.log(data)
  return {
     
    props : {
     
      data
    }
  }
}

服务器端渲染 getServerSideProps

  • 如果采用服务器端渲染，需要在组件中导出 getServerSideProps 方法

    • 将 list.js 中的 getStaticProps 方法 改成 getServerSideProps 方法，其中 getServerSideProps 还有个参数为 context.
    • context.query能拿到客户端向服务端的请求参数,比如在浏览器url中的参数

  • 开发模式下每次访问都会执行 getServerSideProps 方法。

  • 生产模式下每次访问都会执行 getServerSideProps 方法：

    • 运行npm run build生成 .next 文件夹，可以看到 list 页面不会生成 HTML 页面(说明不是静态生成)。
    • 然后运行npm start 启动生产环境的代码，访问 /list 页面， node 控制台会输出 getServerSideProps 方法中的打印语句。
    • 因为使用了 getServerSideProps 则表示采用服务端渲染，而不是静态生成，所以每次访问都会执行 getServerSideProps 方法。
// export async function getStaticProps () {
     
export async function getServerSideProps (context) {
     
  let data = await read(join(process.cwd(),'pages','_app.js'),'utf-8')
  console.log(context.query) //能拿到客户端向服务端的请求参数,比如在浏览器url中的参数
  console.log('hello')
  return {
     
    props : {
     
      data
    }
  }
}

基于动态路由的静态生成

  1. 创建基于动态路由的页面组件文件，命名时在文件名称外面加上 []，比如 [id].js

  2. 导出异步函数 getStaticPaths,用于获取所有用户可以访问的路由参数

  3. 导出异步函数 getStaticProps,用于根据路由参数获取具体的数据

  4. npm run build 会根据getStaticPaths返回的paths 去生成对应的html静态文件

    • 生成的html静态文件名就是文件命名对应paths参数的值
    • 如下会生成1.html 2.html

  5. getStaticPaths 和 getStaticProps 只运行在服务器端，永远不会运行在客户端，甚至不会被打包到客户端 JavaScript 中，意味着这里可以随意写服务器端代码，比如查询数据库。

export default function Post ({
     data}) {
     
    return <div>
        <span>{
     data.id}</span>
        <span>{
     data.title}</span>
    </div>
}

// 1.创建[].js 文件,这里是[id].js
// 2.返回用户可以访问到的所有的路由参数
export async function getStaticPaths () {
     
    return {
     
        paths:[{
     params:{
     id:'1'}},{
     params:{
     id:'2'}}],
        fallback:false
    }
}

// 3.返回路由参数所对应的具体数据
// 4.npm run build 会根据getStaticPaths返回的paths 去生成对应的html文件
export async function getStaticProps (context) {
     
    const id = context.params.id;
    let data;
    switch (id) {
     
        case "1":
            data = {
     id:"1",title:'hello'}
            break;
        case "2":
            data = {
     id:"2",title:'world'}
            break;
        default:
            data = {
     }
            break;
    }
    return {
     
        props : {
     
            data
        }
    }
}

自定义 404 页面

  • 要创建自定义 404 页面，需要在 pages 文件夹中创建 404.js 文件

    export default function Error () {
       
  return <div>404 ~</div>
}

六.API Routes

概念

  • API Routes可以理解为接口,客户端向服务端发送请求获取数据的接口
  • Next.js应用允许React开发者编写服务器端代码创建数据接口

实现

  1. 在 pages/api 文件夹中创建 API Routes 文件。比如 user.js

  2. 在文件中默认导出请求处理函数，函数有两个参数， req 为请求对象， res 为响应对象

    export default (req, res) => {
       
    res.send({
       name:'张三',age:20})
}

  3. 访问 API Routes: localhost:3000/api/user 页面上就能展示 {“name”:“张三”,“age”:20}

    • 不要在 getStaticPaths 或 getStaticProps 函数中访问 API Routes, 因为这两个函数就是在服务器端运行的，可以直接写服务器端代码。

七.项目实战

学习了以上这些next相关概念即可实战了,这里贴一下实战项目的地址项目实战github地址

你可能感兴趣的:(Next.js)

  • 构建 Next.js 应用时的安全保障与风险防范措施 前端javascript
    ReactHook深入浅出CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读在Web应用开发过程中，确保应用的安全性至关重要，这不仅能保护用户数据，还能防止应用本身遭受各种安全攻击。Next.js作为一款备受欢迎的React框架，内置了许多安全功能和推荐做法，但开发者仍需清楚地了解潜在的安全隐患，并采取合适的防范策略。一、Next.js安全问题概述尽管Next.js为构建安全应用提
  • Next.js v15-样式处理 红绿鲤鱼 javascript开发语言Next.js
    #题引：我认为跟着官方文档学习不会走歪路Next.js支持多种为应用程序添加样式的方法，包括：CSSModules：创建局部作用域的CSS类，避免命名冲突并提高可维护性。全局CSS：使用简单，对于有传统CSS经验的人来说很熟悉，但可能导致CSS包体积较大，且随着应用程序增长难以管理样式。TailwindCSS：一个实用优先的CSS框架，通过组合实用类可以快速创建自定义设计。CSS预处理器：比如Sa
  • 推荐：Next.js 企业级脚手架模板 潘俭渝Erik
    推荐：Next.js企业级脚手架模板next-enterpriseAnenterprise-gradeNext.jsboilerplateforhigh-performance,maintainableapps.PackedwithfeatureslikeTailwindCSS,TypeScript,ESLint,Prettier,testingtools,andmoretoacceleratey
  • next.js + react基础（持续更新） wanfeng_09 react.js学习前端
    umijshttps://umijs.org/docs/introduce/introducereact：环境搭建、jsx、组件、useState、useEffect、useRef、自定义Hook、智能组件和UI组件redux：RTK、同步状态、异步状态、状态和视图分离Router：基础使用、嵌套路由、路由模式、声明/编程式导航基础扩展：useMemo/useCallback、useReducer
  • 半天实现的NextJS轮子项目 前端next.js独立开发者
    缘起最近在学习NextJS，并且从去年的AI崛起，独立开发者这个职业逐渐火了起来，很多项目都是使用NextJS实现的，NextJS也被更多的开发者熟悉，之所以选择做一个landingpage，就是独立开发者都需要一个landingpage来展示自己的作品，所以有了本项目。HorizonWingLandingPage一个使用Next.js、TailwindCSS和next-intl构建的现代化多语言
  • React 与 Next.js 熬夜的猪 前端javascriptreactnext.js
    先说说React与Next.js结合的作用：高效构建高性能与搜索引擎优化（SEO）的网页一.React=网站的“积木”React用于构建网站中的各个组件，像是“积木”一样组成页面元素（如按钮、图片、表单等）。这些组件组合在一起形成完整的页面，并允许用户互动。例子：例如，点击按钮或填写表单等操作都可以通过React实现。二.Next.js=提供后台支持与加速Next.js是一个基于React的框架，
  • Web-3.0学习路线 奶龙牛牛 web3
    方向学习内容✅区块链基础区块链、智能合约、共识机制✅智能合约Solidity/Rust（Ethereum/Solana）✅前端React.js,Next.js,Web3.js,ethers.js✅后端Node.js,Python,Golang（链上数据）✅存储IPFS,Arweave,Filecoin（去中心化存储）✅交互MetaMask,WalletConnect（钱包）如果你是前端开发Reac
  • 什么是 Next.js 中的代码分割？如何提升性能？ javascript前端
    CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读什么是Next.js中的代码拆分？它如何提升性能？代码拆分是现代Web开发中一个重要的性能优化技术，特别是在Next.js应用中。代码拆分的核心思想是将应用的代码分解成更小、更易管理的部分，并在需要时动态加载这些部分。通过减少应用的初始加载时间，这一技术显著提升了性能和用户体验。在本文中，我们将深入探讨代码拆分的概念、它在Next.
  • 全面掌握React：2025年学习路径指南 chenNorth。 前端reactreact.js学习前端
    文章目录第一步：Web开发的基石——JavaScript与TypeScript第二步：Web设计的核心——HTML与CSS第三步：进入React的世界第四步：用TailwindCSS进行样式设计第五步：用Shadcn/UI增强你的UI第六步：用ReactHookForm处理表单第七步：用Next.js提升你的技能第八步：用Remix掌握全栈开发第九步：ReactNative+Expo：轻松开发移动
  • Next.js 高级缓存策略分析
    CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读在Next.js中，缓存机制往往是被诟病最多的特性之一。许多开发者对其工作方式并不满意。虽然缓存对提升React应用的性能至关重要，但如果对其原理不够理解，很容易导致棘手的错误。例如，页面在客户端显示陈旧数据的问题可能让你在调试时痛苦不堪。对Next.js缓存机制缺乏深入理解，就会让你不断遭遇意料之外的行为和Bug，每次都在不必要的
  • 如何在Next.js使用Blitz.js的功能
    如何在Next.js使用Blitz.js的功能前言大家好，我是倔强青铜三。是一名热情的软件工程师，我热衷于分享和传播IT技术，致力于通过我的知识和技能推动技术交流与创新，欢迎关注我，微信公众号：倔强青铜三。欢迎点赞、收藏、关注，一键三连！！！@blitzjs/next@blitzjs/next适配器公开了特定于Next.js框架的函数和组件。概览@blitzjs/next适配器公开了特定于Next
  • 开发基于WebRTC和OpenAI实时API的AI语音助手框架：技术解析与最佳实践 花生糖@ AIGC学习资料库webrtc人工智能
    随着人工智能（AI）和实时通信技术的发展，构建一个能够提供即时响应、多语言支持以及个性化用户体验的AI语音助手变得越来越重要。本文将深入探讨如何使用现代Web技术和先进的AI工具开发这样一个语音助手框架，具体来说，我们将基于Next.js、WebRTC和OpenAIAPI创建一个高效且用户友好的解决方案。技术架构主框架-Next.js选择Next.js作为主框架不仅因为它提供的服务端渲染（SSR）
  • React Remix框架：前端开发的“瑞士军刀” 程序员
    ReactRemix框架：前端开发的“瑞士军刀”大家好，我是你们的前端小伙伴大鱼，今天咱们来聊聊一个最近挺火的前端框架——Remix。如果你是个React开发者，那你一定听说过Next.js，但Remix这个“新秀”也不容小觑。它不仅是React生态中的一员猛将，还带着一股“颠覆传统”的气息。今天我们就来扒一扒Remix的底细，顺便和Next.js来个正面PK。什么是Remix？Remix是一个全
  • Next.js 实战 (十)：中间件的魅力，打造更快更安全的应用 白雾茫茫丶 Nextjs15实战系列Next.jsmiddleware
    什么是中间件？在Next.js中，中间件（Middleware）是一种用于处理每个传入请求的功能。它允许你在请求到达页面之前对其进行修改或响应。通过中间件，你可以实现诸如日志记录、身份验证、重定向、CORS配置、压缩等任务。中间件是构建高效和安全的web应用的重要组成部分。应用场景身份验证你可以在中间件中检查用户的身份验证状态，比如从cookie或头部信息中读取JWT令牌，并根据验证结果决定是否允
  • 2025年个人博客网站-零成搭建-终极指南 Ktovoz 经验分享前端react
    作者:KTO原文:《零成本博客建站终极指南》如果你需要站立自己的博客网可以参考本文。背景故事在接触前端领域之前,我和许多刚入门前端的新手一样，面对纷繁复杂的技术栈选择陷入迷茫,不知道从何下手。最初雄心勃勃想用Next.js从零搭建博客，却在实战中屡屡碰壁。最终找到「模板先行，逐步精进」的破局之道："先有后优"原则：通过成熟模板快速搭建可运行版本➡️持续迭代优化➡️渐进式学习技术细节本文将分享这一方
  • Next.js 中为什么 App Router 可能是未来，但 Pages Router 仍然重要？
    Next.js作为一个强大的React框架，为开发者提供了两种路由系统：AppRouter和PagesRouter。这两种路由系统各有特色，适用于不同的场景。本文将深入探讨这两种路由系统的区别、优缺点和使用场景，帮助你做出最佳选择。AppRouter：新一代的路由革命AppRouter是Next.js13引入的新路由系统，它使用app目录来组织路由，带来了许多令人兴奋的新特性。优点：React服务
  • Next.js服务器操作：优势、局限与审慎应用 exploration-earth javascript服务器开发语言
    类似于任何技术，它们亦非尽善尽美，故而保持警觉至关重要。通过亲身经历中的挫折汲取了教训，现将之与诸位共勉。一大诟病在于潜在的紧密绑定问题。若服务器端代码嵌入组件之中，则可能导致代码库模块化程度削弱，维护成本攀升。后端逻辑的任何变动或许都将迫使前端相应更新，反之亦然。对于追求关注点严格分离的大型项目或团队而言，这无疑构成了严峻挑战。唯有秉持严谨的纪律与条理，方能避免代码库陷入混乱。再者，便是学习曲线
  • Next.js 15 重大更新解析
    作为React框架的佼佼者，Next.js的第15个版本带来了诸多激动人心的更新。这次更新重点优化了开发工作流程、性能表现，并加强了安全性。现在就来深入了解这些新特性。自动化升级工具Next.js15引入了全新的codemodCLI工具，大大简化了版本升级流程。只需要运行以下命令即可升级到最新版本：npx@next/codemod@canaryupgraderc该工具不仅能自动更新依赖，还会展示可
  • UmiJS3基础 若梦plus React.jsreact.jsjavascript前端reactjsreact
    UmiJS3基础https://umijs.org/UmiJSUmiJS是一个类Next.JS的react开发框架。他基于一个约定，即pages目录下的文件即路由，而文件则导出react组件然后打通从源码到产物的每个阶段，并配以完善的插件体系，让我们能把umi的产物部署到各种场景里。安装umi源码create-umiumi-plugin-react文档umi-plugin-react源码umi-p
  • 【网络安全】URL解析器混淆绕过CSP实现XSS 秋说 网络安全web安全xss漏洞挖掘
    未经许可，不得转载。文章目录前言正文前言许多流行的静态网站生成器都存在图像CDN功能，它们通过优化网站中的图像来加快页面加载速度。例如：1、OptimizingImages|Next.js利用内置的next/image组件优化图像（nextjs.org）2、NuxtImage:Nuxt应用的图像优化即插即用的图像优化功能，使用内置优化器对图像进行调整（image.nuxt.com）这些工具的目标都
  • Next.js脚手架进阶 — 封装fetch && 增加中间件 weixin_33923148 json前端后端ViewUI
    Next.js脚手架进阶系列完美契合ant-design封装fetch&&增加中间件部署上线封装fetch首先先来说一下为什么要用fetch而不是axios吧，主要有以下两点：第一，我在另一个脚手架express-react-scaffold里使用的就是axios,秉着学习新东西的想法，想自己封装一下fetch。第二，个人觉得fetch的功能更为强大，因为fetch是原生支持的API，更加的底层，
  • 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 -获取数据 wuhuaguoyouhua javascript前端开发语言
    -getStaticProps(StaticGeneration):Fetchdataat**buildtime**.-getStaticPaths(StaticGeneration):Specifydynamicroutestopre-renderpagesbasedondata.-getServerSideProps(Server-sideRendering):Fetchdataon**eac
  • next中ISG在开发环境和正式环境的区别 曹天骄 javascript前端开发语言
    在开发模式下（即运行nextdev时），Next.js的IncrementalStaticGeneration(ISG)页面并不会像在生产模式中那样被持久化存储。这是因为在开发模式下，Next.js每次请求页面时都会重新生成页面内容，以确保开发者能够立即看到最新的更改。具体来说，在开发模式下：没有文件被写入磁盘：在开发模式下，Next.js不会将生成的静态页面缓存到磁盘。这意味着每次你访问一个IS
  • 初步认知Next.js中ISR/RSC/Edge Runtime/Streaming等新概念 星野睡不醒 Webnextjsreactisrreact18js
    前言浅窥nextjs到目前v12版本的几个重点新概念，我们有：定义说明ISR增量静态渲染EdgeRuntime边缘运行时StreamingSSR流式传输SSRReactServerComponents服务器组件下面我们对这几个新概念进行一个初步的认知，在阅读前，我们默认读者已经预备了nextjs的基本知识。含义认知ISRSSR、SSG这两个是冷饭，我们都耳熟能详，那所谓ISR增量再渲染的概念，其实
  • Next.js 12 On-Demand Revalidation 教程 曹天骄 javascript前端开发语言
    概述On-DemandRevalidation是Next.js自11.1版本开始支持的一项功能，它允许开发者通过API路由手动触发页面的重新验证和重新生成。这在需要手动控制内容更新，而不想等待增量静态生成（ISR，IncrementalStaticRegeneration）的默认时间间隔时，特别有用。在Next.js12中，这项功能得到了完全支持。下面是实现On-DemandRevalidatio
  • next.js 开启Proxy反向代理 思绪万千133 javascript前端开发语言
    本地开发使用需要安装的包http-proxy-middlewareexpressconstexpress=require('express')constnext=require('next')constcreateProxyMiddleware=require('http-proxy-middleware').createProxyMiddleware;consthostname='0.0.0.0
  • Next.js项目实战踩坑指南 weixin_33961829 运维pythonjava
    项目实战踩坑指南1.移动端overflow:auto，ios滚动卡顿解决方案：主容器增加样式-webkit-overflow-scrolling:touch;2.devmode路由跳转后样式丢失原因：dev下样式根据页面动态加载，浏览器缓存文件styles.chunk.css造成样式不更新。解决方案：利用版本号强制重载样式文件示例1：//在Layout组件中{title}{process.env.
  • 探索全栈魔法：Next.js + Prisma + Next-auth + vercel/postgres
    最近，我完成了一个新的网站项目，是用来收录GithubProfile和ReadmeComponents。一开始，我并没有计划将其发展成一个全栈应用，包括点赞和收藏在内的一些功能都是基于本地存储的。然而，随着网站发布后的逐渐迭代，我感觉增加全栈支持可能是一个必要的方向。不仅有助于项目之后的扩展，还能提升用户体验。于是，我在工作之余大概做了一周多的时间将项目转变为一个完整的全栈网站。下面是我的项目链接
  • 四、clsx library 库 kami1983
    简介这个库实际上与Next.js无关，这里整合记录类库安装yarnaddclsx用法举例来说创建一个Alter组件，这个组件接收一个传入变量，来改变提示信息的颜色，如果是success显示为绿色，error为红色。建立components/alert.jsimportstylesfrom'./alert.module.css';import{clsx}from'clsx';exportdefaul
  • JVM StackMapTable 属性的作用及理解 lijingyao8206 jvm字节码Class文件StackMapTable
            在Java 6版本之后JVM引入了栈图(Stack Map Table)概念。为了提高验证过程的效率，在字节码规范中添加了Stack Map Table属性，以下简称栈图，其方法的code属性中存储了局部变量和操作数的类型验证以及字节码的偏移量。也就是一个method需要且仅对应一个Stack Map Table。在Java 7版
  • 回调函数调用方法 百合不是茶 java
    最近在看大神写的代码时,.发现其中使用了很多的回调 ,以前只是在学习的时候经常用到 ,现在写个笔记 记录一下   代码很简单:           MainDemo  :调用方法  得到方法的返回结果        
  • [时间机器]制造时间机器需要一些材料 comsci 制造
          根据我的计算和推测,要完全实现制造一台时间机器,需要某些我们这个世界不存在的物质     和材料...       甚至可以这样说,这种材料和物质,我们在反应堆中也无法获得......      
  • 开口埋怨不如闭口做事 邓集海 邓集海 做人 做事 工作
    “开口埋怨，不如闭口做事。”不是名人名言，而是一个普通父亲对儿子的训导。但是，因为这句训导，这位普通父亲却造就了一个名人儿子。这位普通父亲造就的名人儿子，叫张明正。 　　 　　张明正出身贫寒，读书时成绩差，常挨老师批评。高中毕业，张明正连普通大学的分数线都没上。高考成绩出来后，平时开口怨这怨那的张明正，不从自身找原因，而是不停地埋怨自己家庭条件不好、埋怨父母没有给他创造良好的学习环境。 　　 　　
  • jQuery插件开发全解析，类级别与对象级别开发 IT独行者 jquery开发插件　函数
    jQuery插件的开发包括两种： 一种是类级别的插件开发，即给 jQuery添加新的全局函数，相当于给 jQuery类本身添加方法。 jQuery的全局函数就是属于 jQuery命名空间的函数，另一种是对象级别的插件开发，即给 jQuery对象添加方法。下面就两种函数的开发做详细的说明。   1 、类级别的插件开发 类级别的插件开发最直接的理解就是给jQuer
  • Rome解析Rss 413277409 Rome解析Rss
    import java.net.URL;  import java.util.List;    import org.junit.Test;    import com.sun.syndication.feed.synd.SyndCategory;  import com.sun.syndication.feed.synd.S
  • RSA加密解密 无量 加密解密rsa
    RSA加密解密代码 代码有待整理 package com.tongbanjie.commons.util; import java.security.Key; import java.security.KeyFactory; import java.security.KeyPair; import java.security.KeyPairGenerat
  • linux 软件安装遇到的问题 aichenglong linux遇到的问题ftp
    1 ftp配置中遇到的问题    500 OOPS: cannot change directory   出现该问题的原因:是SELinux安装机制的问题.只要disable SELinux就可以了   修改方法:1 修改/etc/selinux/config 中SELINUX=disabled    2 source /etc
  • 面试心得 alafqq 面试
    最近面试了好几家公司。记录下； 支付宝，面试我的人胖胖的，看着人挺好的；博彦外包的职位，面试失败； 阿里金融，面试官人也挺和善，只不过我让他吐血了。。。 由于印象比较深，记录下； 1，自我介绍 2，说下八种基本类型；（算上string。楼主才答了3种，哈哈，string其实不是基本类型，是引用类型） 3，什么是包装类，包装类的优点； 4，平时看过什么书？NND，什么书都没看过。。照样
  • java的多态性探讨 百合不是茶 java
    java的多态性是指main方法在调用属性的时候类可以对这一属性做出反应的情况 //package 1; class A{ public void test(){ System.out.println("A"); } } class D extends A{ public void test(){ S
  • 网络编程基础篇之JavaScript-学习笔记 bijian1013 JavaScript
    1.documentWrite <html> <head> <script language="JavaScript"> document.write("这是电脑网络学校"); document.close(); </script> </h
  • 探索JUnit4扩展：深入Rule bijian1013 JUnitRule单元测试
            本文将进一步探究Rule的应用，展示如何使用Rule来替代@BeforeClass，@AfterClass，@Before和@After的功能。         在上一篇中提到，可以使用Rule替代现有的大部分Runner扩展，而且也不提倡对Runner中的withBefores()，withAfte
  • [CSS]CSS浮动十五条规则 bit1129 css
    这些浮动规则，主要是参考CSS权威指南关于浮动规则的总结，然后添加一些简单的例子以验证和理解这些规则。   1. 所有的页面元素都可以浮动 2. 一个元素浮动后，会成为块级元素，比如<span>,a, strong等都会变成块级元素 3.一个元素左浮动，会向最近的块级父元素的左上角移动，直到浮动元素的左外边界碰到块级父元素的左内边界；如果这个块级父元素已经有浮动元素停靠了
  • 【Kafka六】Kafka Producer和Consumer多Broker、多Partition场景 bit1129 partition
    0.Kafka服务器配置 3个broker 1个topic，6个partition，副本因子是2 2个consumer，每个consumer三个线程并发读取   1. Producer package kafka.examples.multibrokers.producers; import java.util.Properties; import java.util.
  • zabbix_agentd.conf配置文件详解 ronin47 zabbix 配置文件
    Aliaskey的别名，例如 Alias=ttlsa.userid:vfs.file.regexp[/etc/passwd,^ttlsa:.:([0-9]+),,,,\1]， 或者ttlsa的用户ID。你可以使用key：vfs.file.regexp[/etc/passwd,^ttlsa:.: ([0-9]+),,,,\1]，也可以使用ttlsa.userid。备注: 别名不能重复，但是可以有多个
  • java--19.用矩阵求Fibonacci数列的第N项 bylijinnan fibonacci
    参考了网上的思路，写了个Java版的： public class Fibonacci { final static int[] A={1,1,1,0}; public static void main(String[] args) { int n=7; for(int i=0;i<=n;i++){ int f=fibonac
  • Netty源码学习-LengthFieldBasedFrameDecoder bylijinnan javanetty
    先看看LengthFieldBasedFrameDecoder的官方API http://docs.jboss.org/netty/3.1/api/org/jboss/netty/handler/codec/frame/LengthFieldBasedFrameDecoder.html API举例说明了LengthFieldBasedFrameDecoder的解析机制，如下： 实
  • AES加密解密 chicony 加密解密
    AES加解密算法，使用Base64做转码以及辅助加密： package com.wintv.common; import javax.crypto.Cipher; import javax.crypto.spec.IvParameterSpec; import javax.crypto.spec.SecretKeySpec; import sun.misc.BASE64Decod
  • 文件编码格式转换 ctrain 编码格式
    package com.test; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.io.OutputStream;
  • mysql 在linux客户端插入数据中文乱码 daizj mysql中文乱码
    1、查看系统客户端，数据库，连接层的编码  查看方法： http://daizj.iteye.com/blog/2174993 进入mysql，通过如下命令查看数据库编码方式： mysql>  show variables like 'character_set_%'; +--------------------------+------
  • 好代码是廉价的代码 dcj3sjt126com 程序员读书
      长久以来我一直主张：好代码是廉价的代码。 当我跟做开发的同事说出这话时，他们的第一反应是一种惊愕，然后是将近一个星期的嘲笑，把它当作一个笑话来讲。 当他们走近看我的表情、知道我是认真的时，才收敛一点。 当最初的惊愕消退后，他们会用一些这样的话来反驳： “好代码不廉价，好代码是采用经过数十年计算机科学研究和积累得出的最佳实践设计模式和方法论建立起来的精心制作的程序代码。” 我只
  • Android网络请求库——android-async-http dcj3sjt126com android
    在iOS开发中有大名鼎鼎的ASIHttpRequest库，用来处理网络请求操作，今天要介绍的是一个在Android上同样强大的网络请求库android-async-http，目前非常火的应用Instagram和Pinterest的Android版就是用的这个网络请求库。这个网络请求库是基于Apache HttpClient库之上的一个异步网络请求处理库，网络处理均基于Android的非UI线程，通
  • ORACLE 复习笔记之SQL语句的优化 eksliang SQL优化Oracle sql语句优化SQL语句的优化
    转载请出自出处：http://eksliang.iteye.com/blog/2097999   SQL语句的优化总结如下   sql语句的优化可以按照如下六个步骤进行： 合理使用索引 避免或者简化排序 消除对大表的扫描 避免复杂的通配符匹配 调整子查询的性能 EXISTS和IN运算符 下面我就按照上面这六个步骤分别进行总结：
  • 浅析：Android 嵌套滑动机制（NestedScrolling） gg163 android移动开发滑动机制嵌套
    谷歌在发布安卓 Lollipop版本之后，为了更好的用户体验，Google为Android的滑动机制提供了NestedScrolling特性 NestedScrolling的特性可以体现在哪里呢？<!--[if !supportLineBreakNewLine]--><!--[endif]--> 比如你使用了Toolbar，下面一个ScrollView，向上滚
  • 使用hovertree菜单作为后台导航 hvt JavaScriptjquery.nethovertreeasp.net
      hovertree是一个jquery菜单插件，官方网址：http://keleyi.com/jq/hovertree/ ，可以登录该网址体验效果。 0.1.3版本：http://keleyi.com/jq/hovertree/demo/demo.0.1.3.htm hovertree插件包含文件： http://keleyi.com/jq/hovertree/css
  • SVG 教程 （二）矩形 天梯梦 svg
    SVG <rect> SVG Shapes SVG有一些预定义的形状元素，可被开发者使用和操作： 矩形 <rect> 圆形 <circle> 椭圆 <ellipse> 线 <line> 折线 <polyline> 多边形 <polygon> 路径 <path>
  • 一个简单的队列 luyulong java数据结构队列
    public class MyQueue { private long[] arr; private int front; private int end; // 有效数据的大小 private int elements; public MyQueue() { arr = new long[10]; elements = 0; front
  • 基础数据结构和算法九：Binary Search Tree sunwinner Algorithm
      A binary search tree (BST) is a binary tree where each node has a Comparable key (and an associated value) and satisfies the restriction that the key in any node is larger than the keys in all
  • 项目出现的一些问题和体会 Steven-Walker DAOWebservlet
         第一篇博客不知道要写点什么，就先来点近阶段的感悟吧。     这几天学了servlet和数据库等知识，就参照老方的视频写了一个简单的增删改查的，完成了最简单的一些功能，使用了三层架构。 dao层完成的是对数据库具体的功能实现，service层调用了dao层的实现方法，具体对servlet提供支持。  &
  • 高手问答：Java老A带你全面提升Java单兵作战能力！ ITeye管理员 java
    本期特邀《Java特种兵》作者：谢宇，CSDN论坛ID: xieyuooo 针对JAVA问题给予大家解答，欢迎网友积极提问，与专家一起讨论! 作者简介： 淘宝网资深Java工程师，CSDN超人气博主，人称“胖哥”。 CSDN博客地址： http://blog.csdn.net/xieyuooo 作者在进入大学前是一个不折不扣的计算机白痴，曾经被人笑话过不懂鼠标是什么，
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他