Nuxt.js--》添加路由、视图和过渡效果

news2024/11/16 19:28:48

        博主今天开设Nuxt.js专栏，带您深入探索 Nuxt.js 的精髓，学习如何利用其强大功能构建出色的前端应用程序。我们将探讨其核心特点、灵活的路由系统、优化技巧以及常见问题的解决方案。无论您是想了解 Nuxt.js 的基础知识，还是希望掌握进阶技巧，本专栏都将满足您的需求。接下来让我们一起踏上 Nuxt.js 的旅程，开启一段令人兴奋的前端开发之旅！

需要了解的前置知识：

搜索引擎优化(SEO)：是一种通过优化网站和内容，以提高在搜索引擎中的排名和可见性的过程。它是一种有助于网站获得更多有机（非付费）流量的策略和技术。但是采用vue.js开发的应用系统对SEO并不友好。

客户端渲染(CSR)：客户端渲染是一种 Web 应用程序的渲染方式，其中页面的内容和结构主要由客户端浏览器在运行时生成和呈现，而不是在服务器端生成。在客户端渲染中，服务器主要负责提供数据和基本的 HTML、CSS 和 JavaScript 文件，然后将这些文件发送给客户端浏览器。浏览器接收到这些文件后，会解析 HTML 和 CSS，并执行 JavaScript 代码来生成动态内容和交互。

服务器渲染(SSR)：服务器渲染是一种 Web 应用程序的渲染方式，其中页面的内容和结构主要在服务器端生成，然后发送给客户端浏览器进行显示。在服务器渲染中，服务器接收到客户端的请求后，会根据请求的 URL 和参数等信息，生成相应的 HTML、CSS 和 JavaScript 文件，并将这些文件作为响应返回给客户端浏览器。浏览器接收到文件后，直接显示其中的内容，无需再执行额外的操作。

客户端渲染与服务器渲染的区别：在选择服务器渲染还是客户端渲染时需要综合考虑项目需求、技术复杂性和性能要求等因素。一般来说，对于需要快速加载、对 SEO 有较高要求的网站，服务器渲染可能更适合；而对于需要复杂交互和实时更新的应用，客户端渲染可能更具优势。

Vue.js如何实现SSR：vue.js通用应用框架Nuxt，其提供了平滑的开箱即用的体验，建立在同等的vue.js技术栈之上，但抽象出很多模板，并提供了一些额外的功能，例如静态站点生成。通过NUXT可以根据约定的规则，快速的实现Vue SSR。

对于路由器在Nuxt中的工作方式，首先应了解路由器如何在Vue中的工作方式，如果你本身就不了解vue的路由工作方式上来就看nuxt的话，那么我建议你好好看看我之前讲解的文章：Vue 3 路由进阶——从基础到高级的完整指南 ，当然vue2路由讲解也在我这篇vue专栏里面，想了解的朋友欢迎大家的订阅。

在了解完vue路由工作方式之后，接下来我们就正式开始讲解如何在Nuxt应用程序中实现路由器。

目录

创建路由

基本路由

动态路由

嵌套路由

动态嵌套路由

验证路由参数

_.vue文件处理未知路由

创建自定义视图

自定义应用程序模板

创建自定义HTML头

创建自定义布局

创建自定义错误页面

创建自定义页面

创建过渡效果

利用pageTransition实现转换

利用layoutTransition实现转换

创建路由

在Nuxt中路由的过程较为简单，因为Nuxt中包含了vue-router，这意味着从技术上讲我们略过了传统vue应用程序中的安装步骤，Nuxt将扫描/pages/目录中的.vue文件树，并自动生成路由。说的简单点就是：Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。生成的文件如下：

基本路由

基本路由可以通过简单地将包含固定文件名的 .vue 文件添加至/pages/目录中而创建，此外我们还可以通过将 .vue 文件整合至不同的文件夹中来生成子路由，考察下面示例：

随后，Nuxt将生成下列路由（无需编号），component组件路径在上面通过变量进行定义：

这一类路由适用于顶级页面，如/about，/contact和/posts。然而如果每个顶级页面中包含多个子页面，并且它们会随着时间的推移而动态增加，那么应该使用动态路由处理这些子页面的路由，接下来讨论如何创建动态路由。

动态路由

当使用下划线时，Nuxt将生成动态路由。在复杂应用程序中，动态路由十分有用且不可避免，因此如果需要创建动态路由，那么仅需生成一个包含前缀下划线的 .vue文件(或目录)，随后是文件名(或目录名)。考察下面示例：

随后可从Nuxt中获得下列路由，并且无需编写任何路由：

在上面的图片中你会发现名称为 users-id 的路由路径带有 :id? 参数，表示该路由是可选的。如果你想将它设置为必选的路由，需要在 users/_id 目录内创建一个 index.vue 文件。 

动态路由适用于共享公共布局页面。

例如：如果/about和/contact具有相同的布局，那么可将上述动态路由代码中的/_test/目录视为较好的选择方案；如果/users路由下共享相同布局的子页面一样，/_id.vue文件方法是这一场景很好的选择。

当渲染子页面时，我们不希望父布局完全被子布局取代，换言之我们需要在父布局中渲染子页面，这里我们需要使用更为复杂的动态路由，即嵌套路由，如下：

嵌套路由

简单来讲，嵌套组件中生成的路由被称为嵌套路由，在某些时候我们可能打算组合嵌套于其他组件(父组件)中的组件(子组件)，并希望在父组件中的特定视图中渲染这些子组件，而不是通过子组件替换父组件。

在Nuxt中可通过vue-router的子路由创建嵌套路由。如果打算定义嵌套路由的父组件，则需要创建一个与包含子视图的目录同名的vue文件。考查下列示例：

Nuxt将自动生成下列路由，可以看到Nuxt生成的路由与在vue应用程序生成的路由相同：

注意：在Nuxt中我们的父组件中包含了<nuxt-child>而在vue中我们的父组件包含了<router-view>

接下来通过<nuxt-child>组件创建一个父组件：

// pages/users.vue
<template>
  <div>
    <h1>Users</h1>
    <nuxt-child />
  </div>
</template>

这里我使用了axios发起请求，需要在nuxt.config.js进行如下配置，当你正确配置了 @nuxtjs/axios 模块之后，它会自动将 $axios 对象注入到你的组件中，你可以直接在组件中使用 $axios 对象来发起请求，而不需要再单独引入或定义 axios。

创建一个索引子组件以保存用户列表：

// pages/users/index.vue
<template>
  <ul>
    <li v-for="user in users" :key="user.id">
      <nuxt-link :to="`users/${user.id}`">{{ user.name }}</nuxt-link>
    </li>
  </ul>
</template>

<script>
export default {
  // asyncData 是 Nuxt.js 中的一个特殊方法，用于在加载页面之前预取数据。
  async asyncData({ $axios }) {
    let { data } = await $axios.get('/users');
    return { users: data }
  },
};
</script>

创建一个独立的子组件，其中包含子索引页面的链接：

// pages/users/_id.vue
<template>
  <div v-if="user">
    <h2>{{ user.name }}</h2>
    <nuxt-link class="button" to="/users">Users</nuxt-link>
  </div>
</template>

<script>
export default {
  async asyncData({params, $axios}) {
    let { data } = await $axios.get('/users/' + params.id)
    return { user: data }
  },
};
</script>

动态嵌套路由

前面内容分别讲述了动态路由合嵌套路由的工作，从理论和技术上讲，可将这两个选项组合在一起创建动态嵌套路由，即动态父元素(如 _topic)中包含动态子元素(如 _subTopic)，对应示例如下：

nuxt将自动生成下列路由

routes: [
  {
    path: '/',
    component: _136aafc6,
    name: 'index',
  },
  {
    path: '/:topic',
    component: _232b2e28,
    children: [
      {
        path: '',
        component: _26784a16,
        name: 'topic',
      },
      {
        path: ':subTopic',
        component: _4ece9572,
        children: [
          {
            path: '',
            component: _61281ad0,
            name: 'topic-subTopic',
          },
          {
            path: ':slug',
            component: _5f717988,
            name: 'topic-subTopic-slug',
          },
        ],
      },
    ],
  },
],

可以看到对应的路由更加复杂 这个应用场景比较少见，但是 Nuxt.js 仍然支持：在动态路由下配置动态子路由。 

创建动态路由和页面通常需要使用路由中的参数(即路由参数)，以便可将其传递至所处理的动态页面中.但在处理和响应参数之前，较好的做法是对参数进行验证，因此需要我们验证路由参数：

验证路由参数

我们可以采用组件中的 validate() 方法验证动态路由中的参数，随后以替补方式处理或获取进一步的数据。这一验证的过程应返回 true 以继续后续操作，如果得到 false 那么Nuxt将终止路由并即刻抛出一个404页面错误，例如，应确保ID是一个数字，如下所示：

export default {
  validate({ params }) {
    // 必须是number类型
    return /^\d+$/.test(params.id)
  }
}

如果打算自定义404消息，则可以使用throw语句抛出一个包含Error对象的异常，如下所示：

export default {
  validate({ params }) {
    // 必须是number类型
    let test =  /^\d+$/.test(params.id)
    if (test === false) {
      throw new Error('User not found')
    }
    return true
  }
}

此外，还可将 async 与 validate() 方法一起用于 await 操作：

async validate ({ params }) {
    // ...
}

在validate()方法中，还可以使用 return 语句并返回 Promise，如下所示：

validate({ params }) {
    return new Promise(...)
}

验证路由参数是处理无效或未知路由的一种方式，另一种方法则是使用 _.vue 文件对其进行捕捉

_.vue文件处理未知路由

除了利用validate()方法抛出通用的404页面，还可以使用_.vue文件抛出自定义的错误页面，如下

在/pages/目录中创建一个空的 _.vue 文件，如下所示：

当我们在根路由随便访问一个路径时就会跳转到该页面，如下：

如果打算在特定级别上抛出一个特定的404界面，如仅在/users路由中，则可在/users/文件夹下创建另一个 _.vue 文件，如下：

如果访问/pages/users/下的路径不对，则会调用/pages/users/_.vue进行处理，如下：

创建自定义视图

从软件的架构的角度来看，HTML标记和内容(包括元信息、图像和字体)均为应用程序的视图或表示层，在nuxt中我们可方便地创建自定义视图。

Nuxt中的视图结构包含应用程序模板、HTML头、布局和页面层，我们可以通过它们创建应用程序路由的视图。在更加复杂的应用程序中，我们可通过API中的数据填充它们；而在简单的应用程序中我们可通过手动方式直接将虚拟数据嵌入其中，如下显示了Nuxt视图的完整结构：

可以看到，Document - HTML 是 Nuxt 视图的最外层，随后依次是Layout、Page以及可选的Page Child层和Vue Component层。其中 Document - HTML 文件表示为Nuxt应用程序的应用程序模板，接下来就依次讲解这些模板：

自定义应用程序模板

Nuxt在幕后创建应用程序模板，基本上讲我们无需参与其中，然而自定义操作还是需要的，如要添加脚本或样式。默认的Nuxt HTML模板较为简单，如下所示：

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

定制化默认的 html 模板，只需要在 src 文件夹下（默认是应用根目录）创建一个 app.html 的文件，如下所示，重启应用程序可以看到，自定义应用程序HTML模板包含了替换后的Nuxt默认项

<!DOCTYPE html>
<!--[if IE 9]><html lang="en-US" class="lt-ie9 ie9" {{ HTML_ATTRS }}><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html {{ HTML_ATTRS }}><!--<![endif]-->
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

注意：我们并不直接在应用程序模板中添加或自定义这些数据，而是在Nuxt配置文件和/pages/目录的文件中执行此类操作。

创建自定义HTML头

在Nuxt应用程序中创建和自定义元数据相对简单，我们可在Nuxt配置文件 nuxt.config.js 中使用head属性，进而定义默认应用程序的<meta>标签，如下所示：

如果需要针对特定页面添加自定义标签，或者覆盖Nuxt配置文件中的默认元标签，那么可直接在对应的特定页面上使用head方法，这将返回一个JavaScript对象，该对象包含了title和meta选项的数据，如下所示：

<template>
  <div>
    关于我们
  </div>
</template>
 
<script>
export default {
  // 设置 head 相应局部配置
  head() {
    return {
      title: '关于我们',
      meta: [
        { hid: 'description', name: 'description', content: '关于此页面的描述' },
        { hid: 'keywords', name: 'keywords', content: '关于此页面的关键字' },
      ]
    }
  }
}
</script>

设置完成之后，我们就可以对某个单独的局部组件页面进行相应的head设置：

查看网页源代码也可以看到我们设置的某些内容和关键字，方便能够被爬虫爬到：

当然这个head的内容也可以动态的展示，类似那种新闻列表，在当前页面点击不同的新闻，head下的title和描述都会发生相应的改变，这里就不再过多赘述了，简单提一下。 

创建自定义布局

布局是页面和组件的重要内容，用户可能需要在应用程序中包含多个不同的布局，所以我们可以在根目录中创建 layouts 文件夹，在文件夹下创建一个名为 default.vue 默认布局文件或者创建自己的自定义布局。比如我们这里创建一个自定义布局，如下：

这里的<nuxt />组件表示需要Nuxt导入的组件页面，该页面的布局就是要引入该布局组件的布局：

随后我们可在页面组件中使用layout属性，并将这一自定义布局赋予对应页面，如下所示：

<template>
  <div>
    about页面
  </div>
</template>

<script>
export default {
  layout: 'about'
  // 或者下面比较复杂的写法
  // layout (context) {
  //   return 'about'
  // }
};
</script>

当我们访问about页面时，结果如下：

创建自定义错误页面

每个安装后的Nuxt应用程序都配备了默认的错误页面，并存储于/node_modules/目录的@nuxt中，用以显示错误信息，如404、500等，另外通过将error.vue文件添加至/layouts中，还可以实现自定义错误页面。

如果我们没有设置 _.vue文件处理未知路由和设置error.vue文件，默认的错误页面如下：

如果没有设置 _.vue 文件而是想设置自定义错误页面，需要在/layouts/目录中创建如下页面：

// layouts/error.vue
<template>
  <div>
    <h2 v-if="error.statusCode === 404">Page not found</h2>
    <h2 v-else>An error occurred</h2>
    <nuxt-link to="/">Home page</nuxt-link>
  </div>
</template>

<script>
export default {
  props: ['error'],
}
</script>

注意：这个error.vue错误页面是一个页面组件，即使置于/layouts/目录中但仍然被视为一个页面，如果想设置页面布局组件，需要额外创建一个：

// layouts/layout-error.vue
<template>
  <div>
    <h1>Error!</h1>
    <nuxt/>
  </div>
</template>

将layout-error简单地添加至错误页面上的layout选项上：

最终的效果如下：

创建自定义页面

页面本质上是一个Vue组件，页面与标准Vue组件的区别在于仅在Nuxt中添加的属性和函数。在渲染页面之前，我们使用这些特定的属性和函数来设置或获取函数，接下来简单介绍一下针对Nuxt页面设计的一些属性和函数：

asyncData方法：Nuxt通常在初始化页面组件之前调用该函数，这意味着每次请求一个页面时，该函数将在渲染页面之前被调用。

<template>
  <div v-if="user">
    <h2>{{ user.name }}</h2>
    <nuxt-link class="button" to="/users">Users</nuxt-link>
  </div>
</template>

<script>
export default {
  async asyncData({params, $axios}) {
    let { data } = await $axios.get('/users/' + params.id)
    return { user: data }
  },
};
</script>

fetch方法： fetch方法的工作方式与asyncData方法基本相同。类似于asyncData方法，fetch方法以异步方式加以使用。例如可以使用fetch方法设置页面组件中的数据，注意：data方法必须于fetch方法结合使用以设置数据。由于fetch方法在页面组件初始化之后被调用，因此可使用this关键字访问方法中的对象。

// pages/users/index.vue
<template>
  <ul>
    <li v-for="user in users" :key="user.id">
      <nuxt-link :to="`users/${user.id}`">{{ user.name }}</nuxt-link>
    </li>
  </ul>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return { 
      users: []
    };
  },
  async fetch() {
    let { data } = await axios.get('https://jsonplaceholder.typicode.com/users');
    this.users = data
  },
};
</script>

head方法： 如前所述，head方法用于设置页面上的<meta>标签。此外该方法还可与/conmponents/目录中的组件结合使用。

layout属性：如前所述，layout键(或属性)用于指定页面/layout/目录中的某个布局。

loading属性：loading属性可禁用默认的加载进度条，或者设置特定页面上的自定义加载进度条，我们可以在Nuxt配置文件 nuxt.config.js 文件中配置全局默认加载组件，如下所示：

// nuxt.config.js
export default {
    loading: {
        color: '#000000'
    }
}

利用下列代码在/pages/目录中创建index.vue页面：

// pages/users/index.vue
<template>
  <div class="container">
    <p>Hello {{ name }}</p>
    <nuxt-link to="/about">
      Go to /about
    </nuxt-link>
  </div>
</template>

<script>
export default {
  asyncData() {
    return new Promise((resolve)=>{
      setTimeout(()=>{
        resolve({name:'World'})
      },1000)
    })
  },
};
</script>

利用下列代码在/pages/目录中创建名为about.vue的另一个页面：

<template>
  <div class="container">
    <p>About Page</p>
    <nuxt-link to="/">
      Go to /
    </nuxt-link>
  </div>
</template>

<script>
export default {
  asyncData() {
    return new Promise((resolve)=>{
      setTimeout(()=>{
        resolve({})
      },1000)
    })
  },
};
</script>

在这两个页面中我们使用了setTimeout将数据响应时间延迟了一秒，因此在页面导航时，可看到在请求页面加载之前黑色的加载进度条呈现于页面的上方：

当然我们也可以在/components/目录下创建一个组件，我们可创建一个自定义加载进度条或层：

// components/loading.vue
<template>
  <div v-if="loading" class="loading-page">
    <p>loading...</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false
    }
  },
  methods: {
    // 路由改变时调用
    start(){
      this.loading = true
    },
    // 路由加载时调用
    finish(){
      this.loading = false
    }
  }
};
</script>

然后在nuxt.config.js中进行引入该文件：

export default {
  // 加载属性    
  loading: '~/components/loading.vue',
}

此外我们还可以在特定的页面上配置加载行为，如果页面上的loading键为false，这将自动终止调用finish和start方法，当然我们可以在脚本中通过手动方式对其加以控制

export default {
    loading: false
}

transition属性：transition属性用于指定页面的转换。我们可通过transition键使用一个字符串、对象或函数，这个在下个标题讲解动画的时候在着重讲解。

scrollToTop属性：当需要嵌套路由中的页面在渲染前于顶部启动时，可使用scrollToTop键。默认状态下当访问另一个页面时，Nuxt将滚动至顶部；但在嵌套路由中的子页面中，Nuxt仍处于相同的滚动位置（来自上一个子路由）。因此针对这些子页面，当通知Nuxt滚动至顶部时，可将scrollTop设置为true，如下所示：

// pages/users/_id.vue
export default {
    scrollToTop: true
}

validate方法： 上文所述，可将validate方法视为动态路由的一个验证器。

middleware属性：该属性用于页面的中间件。赋值后的中间件将在页面渲染前执行，这里后面讲解。

创建过渡效果

在Nuxt中我们还可以进一步添加页面间的效果和转换，这也是页面中的transition属性、Nuxt配置文件中pageTransition和layoutTransition选项的用武之地。

vue提供了基于下列转换模式的转换方案：

1）in-out模式：该模式令新元素首先转换，直至结束；随后当前元素实现转换。

2）out-in模式：该模式令当前元素首先转换，直至结束；随后令新元素转换。

利用pageTransition实现转换

在Nuxt中，<transition>组件不再必需并被默认添加。因此我们仅需在特定页面的/assets/目录或<style>中创建转换，对此可在Nuxt配置文件中使用pageTransition属性设置页面转换的默认属性，转换属性的默认值如下：

{
    name: 'page'
    mode: 'out-in'
}

默认状态下，Nuxt采用 page- 定义转换类，这一点与Vue有所不同(使用 v- 作为前缀)，在Nuxt中默认的转换模式被设置为out-in，接下来讲解如何在Nuxt中实现转换：

1）在/assets/目录中创建一个transition.css文件，并向其中添加下列转换：

/* assets/css/transition.css */
.page-enter, .page-leave-to{
  opacity: 0;
  color: red;
}
.page-leave, .page-enter-to{
  opacity: 1;
  color: skyblue;
}
.page.enter-active, .page-leave-active{
  transition: opacity 300ms;
}

2）想Nuxt配置文件中添加上述CSS转换资源路径

// nuxt.config.js
export default {
  css: [
    '~assets/css/transition.css'
  ],
}

3）记住，默认前缀是page-。如果打算使用不同的前缀，可在Nuxt配置文件中使用pageTransition属性修改前缀：

// nuxt.config.js
export default {
    pageTransition: 'fade'
    // or
    pageTransition: {
        name: 'fade',
        mode: out-in'
    }
}

4）前全部的默认类名修改为transition.css中的fade，如下：

/* assets/css/transition.css */
.fade-enter, .fade-leave-to{
  opacity: 0;
  color: red;
}
.fade-leave, .fade-enter-to{
  opacity: 1;
  color: skyblue;
}
.fade.enter-active, .fade-leave-active{
  transition: opacity 300ms;
}

5）如果打算向特定页面应用不同的动画过渡效果，或覆盖某个页面的全局转换，则可在对应的页面的transition属性中进行设置，如下所示：

export default {
  // pages/about.vue
  transition: {
    name: 'page', // 采用默认前缀
    mode: 'out-in'
  }
};

最终的效果如下：

利用layoutTransition实现转换

CSS转换不仅适用于页面组件，同样还适用于布局，默认的layoutTransition属性如下所示，默认布局的前缀为layout，且默认转换模式是out-in：

{
    name: 'layout',
    mode: 'out-in'
}

1）在/layouts/目录下创建about.vue组件如下：

<template>
  <div>
    <div>About Layout</div>
    <nuxt />
  </div>
</template>

2）将上述布局应用到pages目录下的about组件中：

<template>
  <div class="container">
    <p>About Page</p>
    <nuxt-link to="/">
      Go to /
    </nuxt-link>
  </div>
</template>

<script>
export default {
  layout: 'about',
};
</script>

3）在/assets/目录下创建一个transition.css文件，并向其中添加下列转换：

/* assets/css/transition.css */
.layout-enter, .layout-leave-to{
  opacity: 0;
  color: red;
}
.layout-leave, .layout-enter-to{
  opacity: 1;
  color: skyblue;
}
.layout.enter-active, .layout-leave-active{
  transition: opacity 300ms;
}

4）向Nuxt配置文件添加上述CSS的转换资源路径：

// nuxt.config.js
export default {
  css: [
    '~assets/css/transition.css'
  ],
}

5）默认的前缀为layout-，但是如果打算使用不同的前缀，还可在Nuxt配置文件中通过layoutTransition属性对其进行修改：

// nuxt.config.js
export default {
    layoutTransition: 'fade-layout'
    // or
    layoutTransition: {
        name: 'fade-layout',
        mode: out-in'
    }
}

最终呈现的效果如下：

上述两个方法讲述的CSS转换仅在两种状态(即开始状态和结束状态)间执行的动画，当需要更多的中间状态时，应使用CSS动画以便实现更多的控制，即利用开始和结束状态间不同的百分比添加多个关键帧，这里就不再赘述了，感兴趣的朋友可以自行百度学习。

本文章主要讲解了Nuxt.js创建路由、视图和过渡效果的实现，下篇文件将继续讲解Nuxt.js的相关知识，关注博主不迷路，学习更多的前端知识！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/933734.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

LibreOffice新一代的办公软件for Mac/Windows免费版

LibreOffice新一代的办公软件for Mac/Windows免费版

LibreOffice是一款免费、开源的办公软件套件&#xff0c;可在多个操作系统上运行&#xff0c;包括Windows、Mac和Linux。它提供了一系列功能强大的办公工具&#xff0c;包括文档处理、电子表格、演示文稿、数据库管理等。 LibreOffice的界面简洁直观&#xff0c;与其他流行的办…
阅读更多...
mybatis与spring集成与spring aop集成pagehelper插件

mybatis与spring集成与spring aop集成pagehelper插件

Mybatis与Spring的集成 Mybatis是一款轻量级的ORM框架&#xff0c;而Spring是一个全栈式的框架&#xff0c;二者的结合可以让我们更加高效地进行数据持久化操作。 Mybatis与Spring的集成主要有两种方式&#xff1a;使用Spring的Mybatis支持和使用Mybatis的Spring支持。 使用…
阅读更多...
MySQL学习-day1

MySQL学习-day1

2023.8.26 今天是8月26号&#xff0c;正式开始学习MySQL&#xff0c;看的是尚硅谷的MySQL教程&#xff0c;每天记录一下自己的学习笔记&#xff0c;以供复盘。 数据库的常见概念 1、DB&#xff1a;数据库&#xff0c;存储数据的容器。 2、DBMS&#xff1a;数据…
阅读更多...
kettle实现爬虫

kettle实现爬虫

步骤概览 获取请求 请求地址 东方财富网股票请求 自定义常量数据 获取HTTP请求之前&#xff0c;必须先定义一个URL常量作为HTTP client的输入 HTTP client 注&#xff1a;此处得到的数据并不是原生的json字符串&#xff0c;自己可以用文本文件输出测试以下。如下图 JavaScri…
阅读更多...
Python实现自动登录+获取数据

Python实现自动登录+获取数据

前言 Dy这个东西想必大家都用过&#xff0c;而且还经常刷&#xff0c;今天就来用代码&#xff0c;获取它的视频数据 环境使用 Python 3.8 Pycharm 模块使用 requests selenium json re 一. 数据来源分析 1. 明确需求 明确采集网站以及数据内容 网址: https://www.dy.co…
阅读更多...
PyCharm软件安装包分享（附安装教程）

PyCharm软件安装包分享（附安装教程）

目录 一、软件简介 二、软件下载 一、软件简介 PyCharm是一种集成开发环境&#xff08;IDE&#xff09;&#xff0c;专门为Python开发者设计。它是由捷克软件公司JetBrains开发的&#xff0c;为Python开发人员提供了高效、易用和功能丰富的工具集。 以下是PyCharm软件的主要…
阅读更多...
＜JDBC＞

＜JDBC＞

文章目录 1.JDBC核心技术1.数据的持久化2.JAVA中的数据存储技术3.JDBC介绍4.JDBC体系结构5.JDBC程序编写步骤 2.获取数据库连接1.Driver接口实现类2.注册与加载JDBC驱动3.URL4.用户和密码 3. PreparedStatement 和 Statement1.PreparedStatement介绍2. PreparedStatement vs St…
阅读更多...
pytorch学习（8）——现有网络模型的使用以及修改

pytorch学习（8）——现有网络模型的使用以及修改

1 vgg16模型 1.1 vgg16模型的下载 采用torchvision中的vgg16模型&#xff0c;能够实现1000个类型的图像分类&#xff0c;VGG模型在AlexNet的基础上使用3*3小卷积核&#xff0c;增加网络深度&#xff0c;具有很好的泛化能力。 首先下载vgg16模型&#xff0c;python代码如下&…
阅读更多...
Ae 效果：CC Jaws

Ae 效果：CC Jaws

过渡/CC Jaws Transition/CC Jaws CC Jaws&#xff08;CC 锯齿&#xff09;效果为视频或图像创造独特的锯齿状过渡效果。它允许用户控制中心点、方向、高度、宽度和形状&#xff0c;从而提供多种独特的过渡样式。 ◆ ◆ ◆ 效果属性说明 Completion 完成度 控制过渡效果的完成…
阅读更多...
【MYSQL】排序时 如何将0排到最后，并让其他值按正序展示？

【MYSQL】排序时 如何将0排到最后，并让其他值按正序展示？

背景&#xff1a;展示排名时需要1&#xff0c;2&#xff0c;3&#xff0c;4&#xff0c;5&#xff0c;这样展示但是有些没有排名得数据字段默认值时0&#xff0c;这时直接用ASC就会出现问题 实现效果 实现方式&#xff1a;使用MySQL的ORDER BY语句来实现。以下是一个示例的SQL查…
阅读更多...
Creo软件安装包分享（附安装教程）

Creo软件安装包分享（附安装教程）

目录 一、软件简介 二、软件下载 一、软件简介 Creo是一款机械设计软件&#xff0c;全称为Creo Parametric&#xff0c;是PTC公司推出的一款三维CAD/CAM/CAE软件。Creo被广泛应用于机械设计、汽车、航空、航天、电子、家电、玩具等各个行业&#xff0c;是世界上应用最广泛、最…
阅读更多...
小研究 - Java虚拟机内存管理（二）

小研究 - Java虚拟机内存管理（二）

Java 语言的面向对象&#xff0c;平台无关&#xff0c;安全&#xff0c;开发效率高等特点&#xff0c;使其在许多领域中得到了越来越广泛的应用。但是由于Java程序由于自身的局限性&#xff0c;使其无法应用于实时领域。由于垃圾收集器运行时将中断Java程序的运行&#xff0c;其…
阅读更多...
PC端版面设计之尾部设计

PC端版面设计之尾部设计

1、莫拉王子&#xff0c;底部就放了一个返回顶部 2 麻辣王子就放了一个认证--放了产地和得到的奖 3 阿芙:就是精油 4阿芙放的是品牌故事 5 这里可以做微博粉丝群体 6 基本返回底部是一个标配&#xff0c;点一下就可以反悔了 7 加一下旺旺店铺 8 BetyBoop的底部 9 底部 10 返回底…
阅读更多...
【C++】priority_queue优先级队列

【C++】priority_queue优先级队列

&#x1f3d6;️作者&#xff1a;malloc不出对象 ⛺专栏&#xff1a;C的学习之路 &#x1f466;个人简介&#xff1a;一名双非本科院校大二在读的科班编程菜鸟&#xff0c;努力编程只为赶上各位大佬的步伐&#x1f648;&#x1f648; 目录 前言一、priority_queue的介绍二、pr…
阅读更多...
PHP聚合支付网站源码/对接十多个支付接口 第三方/第四方支付/系统源码

PHP聚合支付网站源码/对接十多个支付接口 第三方/第四方支付/系统源码

PHP聚合支付网站源码/对接十多个支付接口 第三方/第四方支付/系统源码 内附数十个支付接口代码文件。 下载地址&#xff1a;https://bbs.csdn.net/topics/616764485
阅读更多...
window系统中如何判断是物理机还是虚拟机

window系统中如何判断是物理机还是虚拟机

总结了如何判断物理机&#xff1a; 1. 用systeminfo的系统型号。&#xff08;注&#xff0c;有资料是看处理器和bios。但是我这台不明确。看系统型号准确一些&#xff09; 2. 在任务管理器》性能中查看“逻辑处理器”还是“虚拟处理器”。虚拟机&#xff0c;看“是“、”否”。…
阅读更多...
金融客户敏感信息的“精细化管控”新范式

金融客户敏感信息的“精细化管控”新范式

目 录 01 客户信息保护三箭齐发&#xff0c;金融IT亟需把握四个原则‍ 02 制度制约阻碍信息保护的精细化管控 ‍‍‍‍‍‍‍ 03 敏感信息精细化管控范式的6个关键设计 04 分阶段实施&#xff0c;形成敏感信息管控的长效运营的机制 05 未来&#xff0c;新挑战与新机遇并存 …
阅读更多...
postgresql常用函数-数学函数

postgresql常用函数-数学函数

postgresql常用函数 简介数学函数算术运算符绝对值取整函数乘方与开方指数与对数整数商和余数弧度与角度常量 π符号函数生成随机数 简介 函数&#xff08;function&#xff09;是一些预定义好的代码模块&#xff0c;可以将输入进行计算和处理&#xff0c;最终输出一个 结果值…
阅读更多...
VScode的PHP远程调试模式Xdebug

VScode的PHP远程调试模式Xdebug

目录 第一步、安装VScode中相应插件 remote-ssh的原理 ssh插件&#xff1a; PHP相关插件&#xff1a; 第二步、安装对应PHP版本的xdebug 查看PHP具体配置信息的phpinfo页面 1、首先&#xff0c;打开php编辑器&#xff0c;新建一个php文件&#xff0c;例如&#xff1a;inde…
阅读更多...
林【2021】

林【2021】

三、应用 1.字符串abaaabaabaa&#xff0c;用KMP改进算法求出next和nextval的值 2.三元组矩阵 4.二叉树变森林 四、代码&#xff08;单链表递增排序&#xff0c;二叉树查找x&#xff0c;快速排序&#xff09;
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023