随风浅入画

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
    }
  }
}

基于动态路由的静态生成

创建基于动态路由的页面组件文件，命名时在文件名称外面加上 []，比如 [id].js
导出异步函数 getStaticPaths,用于获取所有用户可以访问的路由参数
导出异步函数 getStaticProps,用于根据路由参数获取具体的数据
npm run build 会根据getStaticPaths返回的paths 去生成对应的html静态文件
- 生成的html静态文件名就是文件命名对应paths参数的值
- 如下会生成1.html 2.html
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开发者编写服务器端代码创建数据接口

实现

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

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

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

访问 API Routes: localhost:3000/api/user 页面上就能展示 {“name”:“张三”,“age”:20}
- 不要在 getStaticPaths 或 getStaticProps 函数中访问 API Routes, 因为这两个函数就是在服务器端运行的，可以直接写服务器端代码。

七.项目实战

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

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

UmiJS3基础若梦plus React.js react.js javascript 前端 reactjs react
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.js java node.js nuxt
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等新概念星野睡不醒 Web nextjs react isr react18 js
前言浅窥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 运维 python java
项目实战踩坑指南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
C-Shopping基于Next.js，开源电商平台全新亮相
嗨，大家好！欢迎来到C-Shopping，这是一场揭开科技面纱的电商之旅。我是C-Shopping开源作者“继小鹏”，今天将为你介绍一款基于最新技术的开源电商平台。让我们一同探索吧！在线体验：http://shop.huanghanlian.com/项目传送门：https://github.com/huanghanzhilian/c-shopping如果你觉得有帮助，请给我一个Star，这会给我更
C-Shopping基于Next.js，开源电商平台全新亮相
嗨，大家好！欢迎来到C-Shopping，这是一场揭开科技面纱的电商之旅。我是C-Shopping开源作者“继小鹏”，今天将为你介绍一款基于最新技术的开源电商平台。让我们一同探索吧！在线体验：http://shop.huanghanlian.com/项目传送门：https://github.com/huanghanzhilian/c-shopping如果你觉得有帮助，请给我一个Star，这会给我更
三、Next.js 的布局 kami1983
简介为了测试建立一个layout.js到/components/layout目录下。文件内容：exportdefaultfunctionLayout({children}){return{children};}之后在first-post.js中添加并导入Layout组建，修改这个文件：importHeadfrom'next/head';importLinkfrom'next/link';impor
Python 潮流周刊#38：Django + Next.js 构建全栈项目 Python猫 python django javascript 开发语言后端
△△请给“Python猫”加星标，以免错过文章推送你好，我是猫哥。这里每周分享优质的Python、AI及通用技术内容，大部分为英文。本周刊开源，欢迎投稿[1]。另有电报频道[2]作为副刊，补充发布更加丰富的资讯，欢迎关注。提醒：本期有赠书活动，详见文末；春节期间，本周刊预计停更一周，祝大家春节快乐！文章&教程1、使用Django、DjangoREST和Next.js构建全栈项目[3]Django和
2024三掌柜赠书活动第四期： Next.js实战，构建现代化的可扩展Web应用三掌柜666 前端 javascript 开发语言
目录摘要前言Next.js简介关于《Next.js实战》实战示例最佳实践和进阶应用编辑推荐内容简介作者简介图书目录书中前言/序言《Next.js实战》全书速览结束语摘要：本文将介绍Next.js，一个流行的React框架，以及如何在实际项目中使用Next.js构建现代化的可扩展Web应用，以及探讨Next.js的核心概念和功能，并提供实用的示例和最佳实践，帮助读者快速上手和应用Next.js。前言
LLM应用开发与落地：使用gradio十分钟搭建聊天UI 前行的七哥 ui 人工智能
一、背景如果你是做LLM应用开发的，特别是做后端开发，你一定会遇到怎么快速写一个聊天UI界面来调试prompt或agent的问题。这时候的你可能在苦恼中，毕竟react.js,next.js,css,html也不是每个人都那么熟练，对吧？即使你是做前端开发的，你也可以尝试一下Gradio，哪天有人给你提了一个调试界面的需求，原本要半天的工作现在只需要十分钟了，多余的时机用来学习或享受生活，多美（或
【JS】基于React的Next.js环境配置与示例 DevFrank #Nodejs javascript react.js 开发语言
★,°:.☆(￣▽￣)/$:.°★这篇文章主要介绍基于React的Next.js环境配置与示例。学其所用，用其所学。——梁启超欢迎来到我的博客，一起学习，共同进步。喜欢的朋友可以关注一下，下次更新不迷路文章目录:smirk:1.Next.js介绍:blush:2.环境安装与配置:satisfied:3.应用示例添加主页添加页面和导航栏1.Next.js介绍官网：https://nextjs.org
Next.js初识 Jack魏前端开发开发语言 Next.js React 前端框架前端开发
Next.js初识Next.js：这是一个用于生产环境的React框架（国外用的比较多）。Next.js为您提供生产环境所需的所有功能以及最佳的开发体验：包括静态及服务器端融合渲染、支持TypeScript、智能化打包、路由预取等功能无需任何配置。Next.js官方教程：https://nextjs.org/learn/dashboard-app前端Web入门教程：https://develope
服务器渲染(SSR)-前端框架 new code Boy 前端 javascript vue.js
Next.js、Nuxt.js和Remix都是基于Node.js比较流行三个前端框架，它们都基于JavaScript和React/Vue构建，并提供了一些额外的功能和工具来简化开发过程。1.Next.js是一个基于React的前端框架，它提供了服务器渲染（SSR）和静态网站生成（SSG）的能力。Next.js可以帮助开发者快速构建高性能的React应用程序，并且具有热模块替换、自动代码拆分、路由管
在next.js的13.2.1版本中使用中间件，实现禁止特定ip访问网址所有页面 D浩DzD javascript 中间件开发语言
在实现实现禁止特定ip访问网址所有页面时，有两种方式，一种是针对单个页面，另一种是针对整个网站在pages/api中创建文件使用，针对单个页面,也可以应用于所有页面之前是在pages/api下创建的中间件去实现的，但是使用pages/api中的中间件需要手动调用，也就是说如果全部页面都需要使用的话，那么就要在所有页面中去调用，页面刷新会重新加载getIp文件，也就是说会重置cachedData、c
Next.js如何正确处理跨域问题？这我可不懂 javascript 开发语言 ecmascript
以前一直使用Vue来写前端。去年下半年接手了一个基于React+Next.js的项目，于是顺带学习了一下Next.js。由于Next.js的特点，这个项目的前后端是放在一起的。一开始没什么问题，看了半天文档就上手了。上周我们需要在另一个网页项目中，调用这个项目的后端接口，于是就需要处理跨域请求的问题。但我发现按照网上的方法，跨域问题依然存在。这个问题浪费了我不少时间，好在最后终于找到了原因。记录在
Next.js 学习笔记（八）——优化 Jackson-Mseven Next.js javascript 学习笔记
优化Next.js提供了多种内置优化，旨在提高应用程序的速度和核心网络生命指数。本指南将介绍可用于增强用户体验的优化功能。内置组件内置组件抽象化了实现常见UI优化的复杂性。这些组件包括：图像：基于本地元素构建。图像组件通过延迟加载和根据设备大小自动调整图像大小来优化图像的性能。链接：基于本地标签构建。链接组件在后台预取页面，以实现更快、更流畅的页面过渡。脚本：基于本地标签构建。脚本组件使你可以控制
Next.js 学习笔记（三）——路由 Jackson-Mseven Next.js javascript 学习笔记 react.js 前端前端框架 reactjs
路由路由基础知识每个应用程序的骨架都是路由。本页将向你介绍互联网路由的基本概念以及如何在Next.js中处理路由。术语首先，你将在整个文档中看到这些术语的使用情况。以下是一个快速参考：树（Tree）：用于可视化层次结构的约定。例如：具有父组件和子组件的组件树、文件夹结构等子树（Subtree）：树的一部分，从新的根开始（第一个），到叶子结束（最后一个）根（Root）：树或子树中的第一个节点，例如：
Next.js 学习笔记（七）——样式 Jackson-Mseven Next.js javascript 学习笔记
样式Next.js支持不同的应用程序样式设计方法，包括：全局CSS：对于有传统CSS使用经验的人来说，使用简单且熟悉，但随着应用程序的增长，可能会导致CSS包过大，难以管理样式。CSS模块：创建本地范围的CSS类，以避免命名冲突并提高可维护性。TailwindCSS：实用工具优先的CSS框架，可通过组合实用工具类快速实现自定义设计。Sass：一种流行的CSS预处理器，可通过变量、嵌套规则和混合体等
js获取今天剩余时间_前端教程丨手把手教你用 Next.js 搭建个人博客，从入门到吃鸡 weixin_39610774 js获取今天剩余时间用 js判断一个数是否是素数(质数)
React.js是现今前端最火的应用框架之一，而Next.js正是React.js领域最优秀的服务端渲染框架之一。基本上，现在所有的前端主流形式，从服务端渲染APP，静态站到桌面应用等，Next.js都能胜任。不论是国内还是国外，都有不少开发者和企业在使用Next.js开发网站，比如：腾讯新闻移动端门口站腾讯网大名顶顶的Hulu视频站世界最受欢迎的ReactUI组件库Material-UI魅族官网
前端教程丨手把手教你用 Next.js 搭建个人博客，从入门到吃鸡蓝桥云课 web reactjs
React.js是现今前端最火的应用框架之一，而**Next.js正是React.js领域最优秀的服务端渲染框架之一。**基本上，现在所有的前端主流形式，从服务端渲染APP，静态站到桌面应用等，Next.js都能胜任。不论是国内还是国外，都有不少开发者和企业在使用Next.js开发网站，比如：腾讯新闻移动端门口站腾讯网大名顶顶的Hulu视频站世界最受欢迎的ReactUI组件库Material-UI
【前端教程】手把手教你用 Next.js 搭建个人博客，从入门到吃鸡！实验楼v
React.js是现今前端最火的应用框架之一，而Next.js正是React.js领域最优秀的服务端渲染框架之一。基本上，现在所有的前端主流形式，从服务端渲染APP，静态站到桌面应用等，Next.js都能胜任。不论是国内还是国外，都有不少开发者和企业在使用Next.js开发网站，比如：腾讯新闻移动端门口站腾讯网大名顶顶的Hulu视频站世界最受欢迎的ReactUI组件库Material-UI魅族官网
学习Next.js 小纠结在简书
使用React构建服务器呈现的JSWeb应用程序，现在开始https://learnnextjs.com/
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 JUnit Rule 单元测试
本文将进一步探究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 java netty
先看看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的特性可以体现在哪里呢？ 比如你使用了Toolbar，下面一个ScrollView，向上滚
使用hovertree菜单作为后台导航 hvt JavaScript jquery .net hovertree asp.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 DAO Web servlet
第一篇博客不知道要写点什么，就先来点近阶段的感悟吧。这几天学了servlet和数据库等知识，就参照老方的视频写了一个简单的增删改查的，完成了最简单的一些功能，使用了三层架构。 dao层完成的是对数据库具体的功能实现，service层调用了dao层的实现方法，具体对servlet提供支持。 &
高手问答：Java老A带你全面提升Java单兵作战能力！ ITeye管理员 java
本期特邀《Java特种兵》作者：谢宇，CSDN论坛ID: xieyuooo 针对JAVA问题给予大家解答，欢迎网友积极提问，与专家一起讨论! 作者简介：淘宝网资深Java工程师，CSDN超人气博主，人称“胖哥”。 CSDN博客地址： http://blog.csdn.net/xieyuooo 作者在进入大学前是一个不折不扣的计算机白痴，曾经被人笑话过不懂鼠标是什么，

按字母分类： 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 其他