关于app跳转vueh5页面时获取url附带的参数_Nextjs使用解读二（布局与数据获取）...

最新推荐文章于 2024-06-09 19:12:44 发布

weixin_39612228

最新推荐文章于 2024-06-09 19:12:44 发布

阅读量655

点赞数

文章标签：关于app跳转vueh5页面时获取url附带的参数获取到数据el-table不显示数据

上一篇文章中我们介绍了Nextjs的基本搭建和路由系统，这一篇文章我们来看看Nextjs的布局和它特别的数据获取规范getInitialProps（）,顺带把上一篇中遗留的_app和_document也一并说了。

一、css样式布局

结合官方推荐的方式我总结了下，这三种方式应该是我们平时常用的：

1. styled-jsx

Nextjs官网明说了是内置支持styled-jsx来进行布局的，styled-jsx不了解的同学看下面这个例子就能知道怎么使用了,承接上一篇文章的index.js进行修改：

import React from 'react'
import Router from 'next/router'

export default () => {
    return(
        <>
            <button onClick={()=>Router.push('/demo')} >送我去demo页</button>
            <div id={'o'}>这里是主页</div>
            <style jsx>{`
                #o{
                    background-color:red;
                }
            `}</style>
            <style global jsx>{`
                body {
                    background: black;
                }
                #o{
                    background-color:yellow;
                }
            `}</style>
        </>
    )
}

运行结果

局部样式覆盖了全局样式，呈现红色

很简单的，就是用<style>将css样式包裹起来写成组件加入就可以了，加上global的话就是全局样式，对全局生效（但会随着对应组件的卸载而失效）

这是官方推荐的方式，但我个人不喜欢将样式与逻辑组件挤在一块，所以除非组件很简单，不然我都会采用styled-components

2. styled-components

这个熟悉react开发的同学应该大部分都用过吧，npm的周下载量都快130W了，按照以往的方式写就行了，这里就不过多介绍了。

但有一点需要注意！就是我们在写样式组件的时候，每行css语句结束后一定要加上分号";"！这个我之前再用react开发时似乎并没有影响，写不写分号都能成功运行，但在这里不写的话该行后面的所有内容都会失效！！！也算我当初使用时的发现的一个bug吧，希望大家别再踩这个坑了。

3. css文件

还有就是传统的css文件了，这个本来配置下webpack的loader就完事了，但Nextjs是内部封装了webpack的，如果我们自建配置文件的话可能会覆盖内部默认配置导致报错，所以我们按照管网的推荐，修改next.config.js文件（关于Nextjs的各项配置文件我会在下一篇文章中说明，这里只给出解决方案）
1. 安装@zeit/next-css：npm install --save @zeit/next-css
2. 在项目根目录(即与package.json同级)下创建next.config.js文件
3. 配置next.config.js文件

   const withCSS = require('@zeit/next-css')
   
   module.exports = withCSS({      //withCSS包裹配置即可
     webpack(config, options) {    //之后的其他webpack配置也在这里配置
       return config
     }
   })

二、数据获取与getInitialProps

我们挂载一个组件时，常常会需要事先获取一些初始数据，通常我们是将异步方法放入componentDidAmount周期函数里调用获取数据，Nextjs官方推荐使用getInitialProps函数作为数据获取规范。

体验getInitialProps

我们先直接看看怎么使用，修改index.js文件：

import React from 'react'
//node端没有原生fetch，需要先安装npm install node-fetch
import fetch from 'node-fetch'


const Index = (props)=>{
    return(
        <>
            <div>这里是主页</div>
            <div>获取到的数据为：{props.stars}</div>
        </>
    )
}
Index.getInitialProps = async (props) => {
     //这里调用官网提供的数据接口做测试
    const res = await fetch('https://api.github.com/repos/zeit/next.js')
    const json = await res.json()
    return { stars: json.stargazers_count }
}

export default Index

得到界面：

成功获取数据

原理与注意事项

从图中可以看到成功获取了数据。这里解释下，Nextjs在路由切换的时候会先调用对应页面的getInitialProps方法，它能异步获取JS对象，然后将指定数据（return的数据）加入到组件参数（props）中传递给组件。

原理很简单，但有几点需要注意：1. 确保getInitialProps返回的是普通对象。当服务渲染时，getInitialProps将会把数据序列化（类似JSON.stringify），想Map,Set等类型无法序列化会报错。 2. 执行时机。页面初始加载时getInitialProps只会在服务端加载。只有当路由跳转（Link组件跳转或API方法跳转），客户端才会执行getInitialProps。 3. 函数只能用于pages目录下的页面组件，不能用在非pages目录下的组件。4. 函数位置。对于函数组件getInitialProps需要定义在函数组件外面（示例就是如此），这样才能把数据传入函数组件参数。而对于类组件（class组件），函数必须声明静态方法，且放在类组件里面。参考官网示例：

   import React from 'react'
   
   export default class extends React.Component {
     static async getInitialProps({ req }) {
       const userAgent = req ? req.headers['user-agent'] : navigator.userAgent
       return { userAgent }
     }
   
     render() {
       return (
         <div>
           Hello World {this.props.userAgent}
         </div>
       )
     }
   }

同时，getInitialProps函数本身还提供了一些参数方便我们直接获取路由、请求等相关信息。

pathname - URL 的 path 部分
query - URL 的 query 部分，并被解析成对象
asPath - 显示在浏览器中的实际路径（包含查询部分），为String类型
req - HTTP 请求对象 (只有服务器端有)
res - HTTP 返回对象 (只有服务器端有)
jsonPageRes - 获取数据响应对象 (只有客户端有)
err - 渲染过程中的任何错误

这些参数都可以在getInitialProps函数传入的props中直接调用。

有同学可能会觉得这和DidAmount周期函数很相像。是的，的确很像，如果单纯是获取数据的话，使用周期函数或者useEffect同样能达到目的，而且就我的开发经验来说也并没有什么不妥。

但官方推荐自有它的道理，这个函数提供的这些参数（像req,jsonPageRes）可以帮我们同时处理客户端和服务端，获取我们想要的数据。而且它获取数据是在组件挂在之前，这就给了我们其他骚操作的空间（个人臆想）

三、自定义布局

理解了getInitialProps后，我们来说下之前谈到的_app和_document，这两个文件其实就是用来定义Nextjs页面通用的状态和状态的。

_app.js

Nextjs通过_app.js这个文件来初始化页面，即加载所有页面时都会先加载_app.js这个文件，这么一来我们就可以进行以下操作：
1. 定义页面通用布局
比如网站加头部组件，在_app.js中定义后，网站的所有页面都会带上这个头部组件。
2. 给页面注入额外数据
_app.js里获取的数据可以传给每一个组件
3. 导入全局样式、通用错误处理等

使用举例：
1. 我们要自定义其实就是重写_app.js文件，既然是重写，那么实现的默认配置我们得遵循，官网给出的默认配置如下：

   import App, {Container} from 'next/app'
   import React from 'react'
   
   export default class MyApp extends App {
     //对于所有组件，如果有定义getInitialProps则执行
     static async getInitialProps ({ Component, router, ctx }) {
       let pageProps = {}
   
       if (Component.getInitialProps) {
         pageProps = await Component.getInitialProps(ctx)
       }
       return {pageProps}
     }
   
     render () {
       const {Component, pageProps} = this.props
       return (
              //Container默认包裹容器，但似乎快被移除了
              <Container>
                  //Component即具体的页面组件
                  <Component {...pageProps} />
              </Container>
       )
     }
   }

2. 比如我们想给所有页面加上头部组件Header，我们只需要修改上面Container处：

  ......          
     <Container>
            //别忘了import进来
            <Header>
                 <Component {...pageProps} />
             </Header> 
     </Container>
  ......

这样，所有的页面就都加上了Header组件的内容了，如果是想定义共有的数据，修改这里的getInitialProps即可。

_document.js

和_app.js一样，_document.js也可以定义通用的getInitialProps来注入数据，但_document侧重于对文档内容的修改，比如对<html>和<body>的修改。而且只会在服务端渲染时调用。（这个文件好像很少用得到啊！）

默认配置如下：

import Document,{ Html,Head,Main,NextScript } from 'next/document'

    class Mydocument extends Document {
        static async getIntialProps(ctx) {
            const props = await Document.getInitialProps(ctx)
            return {
                ...props
            }
        }

        render(){
            return(
                <Html>
                    <Head>          
                    </Head>

                    <body>
                      <Main></Main>
                      <NextScript></NextScript>
                    </body>  
                </Html>

                )
            }
        }

_error.js

除了_app和_document外，pages目录下还有_error.js，用于定义错误界面的（404等）
默认配置如下：

import React from 'react'

export default class Error extends React.Component {
  static getInitialProps({ res, err }) {
    const statusCode = res ? res.statusCode : err ? err.statusCode : null;
    return { statusCode }
  }

  render() {
    return (
      <p>
        {this.props.statusCode
          ? `An error ${this.props.statusCode} occurred on server`
          : 'An error occurred on client'}
      </p>
    )
  }
}

以上就是Nextjs关于布局和数据获取规范的大体内容了，下一篇文章会讲解Nextjs的配置文件以及静态目录。

欢迎收藏，欢迎讨论！

也欢迎关注我的其他平台账号：【知乎】均远【公众号】佛系前端【个人博客】http://xujunyuan.com【GitHub】JunYuanHub

weixin_39612228

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于app跳转vueh5页面时获取url附带的参数_Nextjs使用解读二（布局与数据获取）...

上一篇文章中我们介绍了Nextjs的基本搭建和路由系统，这一篇文章我们来看看Nextjs的布局和它特别的数据获取规范getInitialProps（）,顺带把上一篇中遗留的_app和_document也一并说了。一、css样式布局结合官方推荐的方式我总结了下，这三种方式应该是我们平时常用的： 1. styled-jsxNextjs官网明说了是内置支持styled-jsx来进行布局的，styl...
复制链接

扫一扫