一篇文章带你快速入门 Nuxt.js 服务端渲染

在这里插入图片描述

1. Nuxt.js 概述

1.1 我们一起做过的SPA

  • SPA（single page web application）单页 Web 应用，Web 不再是一张张页面，而是一个整体的应用，一个由路由系统、数据系统、页面（组件）系统等等，组成的应用程序。

  • 我们之前学习的Vue就是SPA中的佼佼者。

  • SPA 应用广泛用于对SEO要求不高的场景中

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

1.2 什么是SEO

  • SEO：搜索引擎优化（Search Engine Optimization）, 通过各种技术（手段）来确保，我们的Web内容被搜索引擎最大化收录，最大化提高权重，最终带来更多流量。

  • 非常明显，SPA程序不利于SEO

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • SEO解决方案：提前将页面和数据进行整合

    • 前端：采用SSR

  • 后端：页面静态化 （freemarker 、thymeleaf、velocity）

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

1.3 什么是SSR技术

  • 服务端渲染（Server Side Render），即：网页是通过服务端渲染生成后输出给客户端。

    • 在SSR中，前端分成2部分：前端客户端、前端服务端
    • 前端服务端，用于发送ajax，获得数据
    • 前端客户端，用于将ajax数据和页面进行渲染，渲染成html页面，并响应给调用程序（浏览器、爬虫）

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 如果爬虫获得html页面，就可以启动处理程序，处理页面内容，最终完成SEO操作。

1.4 SPA和SSR对比

SPA单页应用程序SSR服务器端渲染
优势1.页面内容在客户端渲染
2. 只关注View层，与后台耦合度低，前后端分离
3.减轻后台渲染画面的压力		1.更好的SEO，搜索引擎工具可以直接查看完全渲染的画面
2.更快的内容到达时间 (time-to-content)，用户能更快的看到完整渲染的画面
劣势1.首屏加载缓慢
2.SEO(搜索引擎优化)不友好		1.更多的服务器端负载
2.涉及构建设置和部署的更多要求，需要用Node.js渲染
3.开发条件有限制，一些生命周期将失效
4.一些常用的浏览器API无法使用

1.5 什么是Nuxt.js

  • Nuxt.js 是一个基于 Vue.js 的通用应用框架。

    • Nuxt支持vue的所有功能，此类内容为前端客户端内容。
    • Nuxt特有的内容，都是前端服务端内容。

  • 通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI 渲染。

  • Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。

2 入门案例

2.1 create-nuxt-app 介绍

  • Nuxt.js 提供了脚手架工具 create-nuxt-app

  • create-nuxt-app 需要使用 npx

  • npx 命令为 NPM版本5.2.0默认安装组件

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2.2 安装

npx create-nuxt-app <project-name>
  • 例如
npx create-nuxt-app demo_nuxt02

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2.3 启动

npm run dev

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • nuxtjs改善

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2.4 访问

http://localhost:3000

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

3. 目录结构

3.1 目录

目录名称描述
assets资源目录，用于存放需要编译的静态资源。例如：LESS、SASS等
默认情况下，Nuxt使用Webpack若干加载器处理目录中的文件
componentsvue组件目录，Nuxt.js 不会增强该目录，及不支持SSR
layouts布局组件目录
pages页面目录，所有的vue视图，nuxt根据目录结构自动生成对应的路由。
plugins插件目录
static静态文件目录，不需要编译的文件
storevuex目录
nuxt.config.jsnuxt个性化配置文件，内容将覆盖默认
package.json项目配置文件

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

3.2 别名

  • assets 资源的引用：~ 或 @

    // HTML 标签
<img src="~assets/13.jpg" style="height:100px;width:100px;" alt="">
<img src="~/assets/13.jpg" style="height:100px;width:100px;" alt="">
<img src="@/assets/13.jpg" style="height:100px;width:100px;" alt="">// CSS
background-image: url(~assets/13.jpg);
background-image: url(~/assets/13.jpg);
background-image: url(@/assets/13.jpg);

  • static 目录资源的引用：/ 直接引用

    //html标签
<img src="/12.jpg" style="height:100px;width:100px;" alt="">//css
background-image: url(/12.jpg);

  • 实例

    <template><div><!-- 引用 assets 目录下经过 webpack 构建处理后的图片 --><img src="~assets/13.jpg" style="height:100px;width:100px;" alt=""><!-- 引用 static 目录下的图片 --><img src="/12.jpg" style="height:100px;width:100px;" alt=""><!-- css --><div class="img1"></div><div class="img2"></div></div>
</template><script>
export default {}
</script><style>.img1 {height: 100px;width: 100px;background-image: url(~assets/13.jpg);background-size: 100px 100px;display: inline-block;}.img2 {height: 100px;width: 100px;background-image: url(/12.jpg);background-size: 100px 100px;display: inline-block;}
</style>

4 路由

4.1 路由概述

  • Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。
  • 要在页面之间切换路由，我们建议使用<nuxt-link> 标签。
标签名描述
<nuxt-link>nuxt.js中切换路由
<Nuxt />nuxt.js的路由视图
<router-link>vue默认切换路由
<router-view/>vue默认路由视图

4.2 基础路由

  • 自动生成基础路由规则
路径组件位置及其名称规则
/pages/index.vue默认文件 index.vue
/userpages/user/index.vue默认文件 index.vue
/user/onepages/user/one.vue指定文件

  • 实例

    情况1：访问路径，由pages目录资源的名称组成（目录名称、文件的名称）- 资源位置： ~/pages/user/one.vue- 访问路径：http://localhost:3000/user/one情况2：每一个目录下，都有一个默认文件 index.vue- 资源位置： ~/pages/user/index.vue- 访问路径：http://localhost:3000/user

  • 思考：/user 可以匹配几种文件？

    • pages/user.vue 文件 【优先级高】
    • pages/user/index.vue 文件

4.3 动态路由

  • 在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。
路由中路径匹配组件位置及其名称
/pages/index.vue
/user/:idpages/user/_id.vue
/:slugpages/_slug/index.vue
/:slug/commentspages/_slug/comments.vue
  • 实例1：获得id值，创建资源 user/_id.vue
<template><div>查询详情 {{this.$route.params.id}}</div>
</template><script>
export default {transition: 'test',mounted() {console.info(this.$route)},
}
</script><style></style>

4.4 动态命名路由

  • 路径 /news/123 匹配_id.vue还是_name.vue ？

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 我们可以使用<nuxt-link>解决以上问题

    • 通过name 确定组件名称：“xxx-yyy”
    • 通过params 给对应的参数传递值
<nuxt-link :to="{name:'news-id',params:{id:1002}}">第2新闻</nuxt-link>
<nuxt-link :to="{name:'news-name',params:{name:1003}}">第3新闻</nuxt-link>

4.5 默认路由

路径组件位置及其名称
不匹配的路径pages/_.vue
  • 404页面，可以采用 _.vue进行处理

4.6 嵌套路由(知道)

  • 创建嵌套子路由，你需要添加一个 父组件Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。

    • 要求：父组件 使用<nuxt-child/> 显示子视图内容
    pages/
--| book/						//同名文件夹
-----| _id.vue
-----| index.vue
--| book.vue					//父组件

  • 步骤1：编写父组件 pages/child/book.vue

    <template><div><nuxt-link to="/child/book/list">书籍列表</nuxt-link> |<nuxt-link to="/child/book/123">书籍详情</nuxt-link> |<hr><nuxt-child /></div>
</template><script>
export default {}
</script><style></style>

  • 步骤2：编写子组件 pages/child/book/list.vue

    <template><div>书籍列表</div>
</template><script>
export default {}
</script><style></style>

  • 步骤3：编写子组件 pages/child/book/_id.vue

    <template><div>书籍详情{{$route.params.id}} </div>
</template><script>
export default {}
</script><style></style>

4.7 过渡动效（了解）

4.7.1 全局过渡动效设置

  • Nuxt.js 默认使用的过渡效果名称为 page

    • .page-enter-active样式表示进入的过渡效果。
    • .page-leave-active样式表示离开的过渡效果。

  • 步骤1：创建 assets/main.css，编写如下内容：

    .page-enter-active, .page-leave-active {transition: opacity .5s;
}
.page-enter, .page-leave-active {opacity: 0;
}

  • 步骤2：nuxt.config.js 引入main.css文件

    module.exports = {css: ['assets/main.css']
}

4.7.1 自定义动画

  • 如果想给某个页面自定义过渡特效的话，只要在该页面组件中配置 transition 字段即可：

  • 步骤1：在全局样式 assets/main.css 中添加名称为test的过渡效果

    .test-enter-active, .test-leave-active {transition: all 2s;font-size:12px;
}.test-enter, .test-leave-active {opacity: 0;font-size:40px;
}

  • 步骤2：需要使用特效的vue页面编写如下：

    export default {transition: 'test'
}

4.8 案例：学生管理

  • 需求1：首页

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 需求2：点击，学生管理

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 需求3：点击“添加”按钮

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 需求4：点击修改按钮

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 需求5：详情

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

5. 视图

5.1 默认模板（了解）

  • 定制化默认的 html 模板，只需要在应用根目录下创建一个 app.html 的文件。

  • 默认模板：

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

  • 修改模板，对低版本IE浏览器进行支持（兼容IE浏览器）

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

5.2 默认布局【掌握】

5.2.1 布局概述

  • 布局：Nuxt.js根据布局，将不同的组件进行组合。

  • 模板：html页面，是布局后所有组件挂载的基础。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

5.2.2 布局分析

  • layouts/default.vue 默认布局组件
    • 访问路径根据路由，确定执行组件
    • 组件具体显示的位置，有布局来确定

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

5.2.3 公共导航

  • 修改 layouts/default.vue
<template><div><nuxt-link to="/">首页</nuxt-link> |<nuxt-link to="/user/login">登录</nuxt-link> |<nuxt-link to="/user/123">详情</nuxt-link> |<nuxt-link to="/about">默认页</nuxt-link> |<nuxt-link to="/nuxt/async">async</nuxt-link> |<hr/><Nuxt /></div>
</template>

5.3 自定义布局

  • 在layouts目录下创建组件：layouts/blog.vue

    <template><div>开头<br/><nuxt/>结束<br/></div></template><script>
export default {}
</script><style></style>

  • 在需要的视图中使用 blog布局

    <script>
export default {layout: 'blog'//...
}
</script>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

5.4 错误页面（了解）

  • 编写layouts/error.vue页面，实现个性化错误页面
<template><div><div v-if="error.statusCode == 404">404 页面不存在 {{error.message}}</div><div v-else>应用程序错误</div><nuxt-link to="/">首 页</nuxt-link></div>
</template><script>
export default {props: ['error']
}
</script><style></style>
  • 解决问题： 404 、500、连接超时（服务器关闭）
  • 总结：所学习的技术中，有2种方式处理错误页面
    • 方式1：默认路径，_.vue （先执行）
    • 方式2：错误页面，~/layouts/error.vue

6 Nuxt组件特殊配置

6.1 概述

  • Nuxt页面组件实际上是 Vue 组件，只不过 Nuxt.js 为这些组件添加了一些特殊的配置项（在Vue组件的基础上，添加了额外功能）
特殊配置项描述
asyncDataSSR进行异步数据处理，也就是服务器端ajax操作区域。
fetch在渲染页面之前获取数据填充应用的状态树（store）
head配置当前页面的head标签，整合第三方css、js等。
layout指定当前页面使用的布局
transition指定页面切换的过渡动效
scrollToTop布尔值，默认: false。 用于判定渲染页面前是否需要将当前页面滚动至顶部。

6.2 模板代码

<template><h1 class="red">Hello {{ name }}!</h1>
</template><script>
export default {asyncData (context) {					//异步处理数据, 每次加载之前被调用return { name: 'World' }},	fetch () {							//用于在渲染页面之前获取数据填充应用的状态树（store）},head: {								//配置当前页面的 Meta 标签},layout: '自定义布局名'					//自定义布局...
}
</script><style>
.red {color: red;
}
</style>

6.3 head - 入门

  • html模板代码

    <html>
<head><meta charset="UTF-8" /><title>我是标题</title><link rel="stylesheet" type="text/css" href="css外部文件"/><script src="js外部文件" type="text/javascript" charset="utf-8"></script>
</head>
<body>
</body>
</html>

  • 通过nuxt提供head属性，可以给单个也是设置：标题、外部css、外部js 等内容。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 基本模板

    <script>
export default {head: {link: [],       //导入第三方css文件，可以导入多个script: []      //导入第三方js文件，可以导入多个}
}
</script>

  • 完整代码

<template><div>详情页 {{$route.params.id}} <br/><div class="bg2"></div><div class="bg3"></div></div>
</template><script>
export default {head: {title: '详情页',link: [{rel:'stylesheet',href:'/style/img.css'},....],script: [{ type: 'text/javascript', src: '/js/news.js' }]}
}
</script><style>.bg2 {background-image: url('~static/img/2.jpg');width: 300px;height: 300px;background-size: 300px;}
</style>

7. ajax操作

7.1 整合 axios

7.1.1 默认整合

  • 在构建项目时，如果选择axios组件，nuxt.js将自动与axios进行整合

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

7.1.2 手动整合（可选）

  • 步骤1：package.json有axios的版本

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

      "dependencies": {"@nuxtjs/axios": "^5.13.1",},

  • 步骤2：安装

    npm install

  • 步骤3：nuxt.config.js 以模块的方式添加axios

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

      modules: [// https://go.nuxtjs.dev/axios'@nuxtjs/axios',],

7.1.3 常见配置

  • 修改 nuxt.config.js 进行baseURL的配置

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

      // Axios module configuration: https://go.nuxtjs.dev/config-axiosaxios: {baseURL:'http://localhost:10010/'},

7.2 使用axios发送ajax

  • 在vue页面中，通过 this. a x i o s . x x x ( ) 操作 a j a x 。 t h i s . axios.xxx() 操作ajax。this. axios.xxx()操作ajax。this.axios 与之前 axios等效。

    this.$axios.post("/search-service/search",this.searchMap).then( res => {//获得查询结果this.searchResult = res.data.data;
});

7.3 使用asyncData发送 ajax

  • asyncData中的ajax将在“前端服务端执行”，在浏览器看到是数据，而不是ajax程序。

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

7.3.1 发送一次请求

  • 语法：
export default {async asyncData( context ) {  //context就相当于其他地方的this//发送ajaxlet { data } = await context.$axios.get('路径','参数')// 返回结果return {变量: 查询结果从data获取 }},
}

  • 实例

    <template><div>{{echo}}</div>
</template><script>
export default {async asyncData(context) {// 发送ajaxlet {data} = await context.$axios.get('/service-consumer/feign/echo/abc')// 返回数据return {echo: data}},
}
</script><style></style>

7.3.2 发送多次请求

  • 语法1：

    export default {async asyncData( content ) {let [结果1,结果2] = await Promise.all([ ajax请求1, ajax请求2])return {变量1: 结果1,变量2: 结果2}},
}

  • 语法2：

    export default {async asyncData( content ) {let [{数据:别名1},{数据:别名2}] = await Promise.all([ ajax请求1, ajax请求2])return {变量1: 别名1,变量2: 别名2}},
}

    //演化过程
let response = ajax请求
let [response,response] = await Promise.all([ajax1,ajax2])
let [{data},{data}] = await Promise.all([ajax1,ajax2])
let [{data:别名1},{data:别名2}] = await Promise.all([ajax1,ajax2])

  • 实例

<template><div>{{echo}} {{echo2}}</div>
</template><script>
export default {async asyncData(context) {// 发送ajaxlet [{data:echo}, {data:echo2}] = await Promise.all([context.$axios.get('/service-consumer/feign/echo/abc'),context.$axios.get('/service-consumer/client/echo/abc')])// 返回数据return {echo,echo2}},
}
</script><style></style>

7.4 使用fetch发送 ajax

  • fetch 方法用于在渲染页面前填充应用的状态树（store）数据， 与 asyncData 方法类似，不同的是它不会设置组件的数据。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 步骤1：创建store/index.js

    export const state = () => ({str: 0
})export const mutations = {setData (state, value) {state.str = value}
}

  • 步骤2：测试页面

    <template><div><!-- 显示数据 -->{{$store.state.str}}</div>
</template><script>export default {async fetch( {store, $axios} ) {// 发送ajaxlet { data } = await $axios.get('/service-consumer/feign/echo/abc')// 设置数据store.commit('setData' , data )}
}
</script><style></style>

7.5 插件：自定义axios

7.5.0 分析

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

7.5.1 客户端

  • 步骤一：在nuxt.conf.js中配置客户端插件，设置 mode 为 client

      plugins: [{ src: '~plugins/api_client.js', mode: 'client' }//{ src: '~plugins/api.js', ssr: false }],

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 步骤二：编写 plugins/api_client.js 对 内置的 $axios进行增强

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    //自定义函数
const request = {test : (params) => {return axios.get('/service-consumer/feign/echo/abc',{params})},
}var axios = null
export default ({ $axios }, inject) => {//3） 保存内置的axiosaxios = $axios//4) 将自定义函数交于nuxt// 使用方式1：在vue中，this.$request.xxx()// 使用方式2：在nuxt的asyncData中，content.app.$request.xxx()inject('request', request)
}

7.5.2 服务端

  • 步骤一：配置服务端插件，设置 mode 为 server

      plugins: [{ src: '~plugins/api_client.js', mode: 'client' },{ src: '~plugins/api_server.js', mode: 'server' },//{ src: '~plugins/api.js', ssr: false },//{ src: '~plugins/api.server.js', ssr: true }],

  • 步骤二：编写 plugins/api.server.js 对 内置的 $axios进行增强

    const request = {test : (params) => {return axios.get('/service-consumer/feign/echo/abc',{params})},}var axios = null
export default ({ $axios, redirect, process }, inject) => {//赋值axios = $axios//4) 将自定义函数交于nuxt// 使用方式1：在vue中，this.$requestServer.xxx()// 使用方式2：在nuxt的asyncData中，content.app.$requestServer.xxx()inject('requestServer', request)
}

  • 注意：前端服务端插件，不支持切换路由。也就是说刷新可以访问，使用<nuxt-link>切换不能访问。解决方案：

    • 方案1：修改mode，支持client和service。
    • 方案2：使用 location.href = ‘路径’ 进行跳转

7.5.3 插件配置总结

//方式1：通过src设置文件，通过mode设置模式
plugins: [{ src: '~/plugins/apiclient.js', mode: 'client' },		//前端客户端{ src: '~/plugins/apiserver.js', mode: 'server' },		//前端服务端{ src: '~/plugins/api.js' }								//前端客户端 + 前端服务端
]//方式2：通过命名来确定模式
plugins: ['~/plugins/api.client.js',				//前端客户端'~/plugins/api.server.js',				//前端服务端'~/plugins/api.js',						//前端客户端 + 前端服务端
]

8. Vuex 状态树

8.1 根模块数据操作

  • 步骤一：创建 store/index.js 添加一个 counter变量，并可以继续累加操作

    export const state = () => ({counter: 0
})export const mutations = {increment (state) {state.counter++}
}

  • 步骤二：在页面中，使用

    <template><div>首页 {{counter}}<input type="button" value="+" @click="increment"/></div>
</template><script>
import { mapState,mapMutations } from 'vuex'
export default {computed: {...mapState(['counter'])},methods: {...mapMutations(['increment'])},
}
</script><style></style>

8.2 其他模块数据操作

  • 步骤一：创建其他模块 store/book.js

    export const state = () => ({money: 0
})export const mutations = {addmoney (state) {state.money += 5}
}

  • 步骤二：使用指定模块中的数据

    <template><div>金额：{{money}} <br><input type="button" value="累加" @click="addMoney(5)"></div>
</template><script>
import {mapState, mapMutations} from 'vuex'
export default {methods: {// ...mapMutations({'方法名':'模块/action名称'})...mapMutations({'addMoney':'book/addMoney'})},computed: {//...mapState('模块名称',['变量'])...mapState('book',['money'])}
}
</script><style></style>

8.3 完整vuex模板

// state为一个函数, 注意箭头函数写法
const state = () => ({user: 'jack'
})// mutations为一个对象
const mutations = {setUser(state, value) {state.counter = value}
}
// action执行mutation
const actions = {userAction (context,value){// 可以发送ajaxcontext.commit('setUser',value)}}// 获取数据
const getters = {getUser (state) {return state.user}
}
export default {namespace: true,	// 命名空间，强制要求，在使用时，加上所属的模块名，例如：book/addmoneystate,mutations,actions,getters
}

9. nuxt流程总结

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

10. Nuxt整合Element UI

11 综合练习

10.1 练习1：学生列表

  • 表结构

    #班级表
create table tab_class(cid int primary key auto_increment,cname varchar(50)
);
insert into tab_class(cid, cname) values(1,'Java56');
insert into tab_class(cid, cname) values(2,'Java78');#学生表
create table tab_student(sid int primary key auto_increment,sname varchar(50),cid int
);insert into tab_student(sname,cid) values('张三',1);
insert into tab_student(sname,cid) values('李四',1);
insert into tab_student(sname,cid) values('王五',2);
insert into tab_student(sname,cid) values('赵六',2);

  • 需求：查询学生列表信息

    • 要求1：可以进行“班级”条件查询
    • 要求2：对“班级”数据进行SEO
    • 要求3：学生数据不进行SEO

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

10.2 练习2：

10.2.1 表结构：

CREATE TABLE tb_teacher(tid INT PRIMARY KEY AUTO_INCREMENT,tname VARCHAR(50) COMMENT '老师姓名',TYPE INT COMMENT '老师类型：1.授课老师、2.助理老师、3.辅导员老师'
);
INSERT INTO tb_teacher(tid,tname,TYPE) VALUES(1,'梁桐老师',1);
INSERT INTO tb_teacher(tid,tname,TYPE) VALUES(2,'马坤老师',2);
INSERT INTO tb_teacher(tid,tname,TYPE) VALUES(3,'仲燕老师',3);
INSERT INTO tb_teacher(tid,tname,TYPE) VALUES(4,'袁新奇老师',1);
INSERT INTO tb_teacher(tid,tname,TYPE) VALUES(5,'任林达老师',2);
INSERT INTO tb_teacher(tid,tname,TYPE) VALUES(6,'王珊珊老师',3);CREATE TABLE tb_class(cid INT PRIMARY KEY AUTO_INCREMENT,cname VARCHAR(50) COMMENT '班级名称',teacher1_id INT COMMENT '授课老师',teacher2_id INT COMMENT '助理老师',teacher3_id INT COMMENT '辅导员老师'
);INSERT INTO tb_class(cid,cname,teacher1_id,teacher2_id,teacher3_id) VALUES(1,'Java56',1,2,3);
INSERT INTO tb_class(cid,cname,teacher1_id,teacher2_id,teacher3_id) VALUES(2,'Java78',1,2,3);
INSERT INTO tb_class(cid,cname,teacher1_id,teacher2_id,teacher3_id) VALUES(3,'Java12',4,5,6);
INSERT INTO tb_class(cid,cname,teacher1_id,teacher2_id,teacher3_id) VALUES(4,'Java34',4,5,6);

10.2.2 需求：查询

  • 需求：使用“自定义axios”完成
    • 查询班级详情
    • 通过班级名称模糊查询
    • 查询班级的同时，查询老师信息

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

10.2.3 扩展需求：添加

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

end

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

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

相关文章

HbuilderX使用Uniapp+Vue3安装uview-plus

HbuilderX使用Uniapp+Vue3安装uview-plus

如果你是vue2版本想使用uniapp去配置uviewui库可以参考之前的文章 小程序的第三方ui库推荐较多的还是uview的&#xff0c;看起来比较美观&#xff0c;功能也比较完善&#xff0c;下面将提一下Vue3安装uview-plus库的教程 创建项目 安装 首先进入官网 uView-Plus 直接下载并导…
阅读更多...
预训练--微调

预训练--微调

预训练–微调 一个很简单的道理&#xff0c;如果我们的模型是再ImageNet下训练的&#xff0c;那么这个模型一定是会比较复杂的&#xff0c;意思就是这个模型可以识别到很多种类别的即泛化能力很强&#xff0c;但是如果要它精确的识别是否某种类别&#xff0c;它的表现可能就不…
阅读更多...
07-2 Python模块和命名空间

07-2 Python模块和命名空间

1. 模块 概念&#xff1a;其实就是一个Python文件&#xff0c;正常文件有的变量&#xff0c;函数&#xff0c;类&#xff0c;模块都有 功能:模块可以被其它程序引入&#xff0c;以使用该模块中的函数等功能。 示例&#xff1a;test-module.py调用mymodule.py模块中的now_time…
阅读更多...
一篇文章带你快速入门 Vue 核心语法

一篇文章带你快速入门 Vue 核心语法

一篇文章带你快速入门 Vue 核心语法 一、为什么要学习Vue 1.前端必备技能 2.岗位多&#xff0c;绝大互联网公司都在使用Vue 3.提高开发效率 4.高薪必备技能&#xff08;Vue2Vue3&#xff09; 二、什么是Vue 概念&#xff1a;Vue (读音 /vjuː/&#xff0c;类似于 view) …
阅读更多...
Mysql 日期函数大全

Mysql 日期函数大全

一、时间函数 &#xff08;一&#xff09;、获取当前时间 1、NOW() 获取当前日期和时间&#xff0c;在程序一开始执行便拿到时间 返回格式 YYYY-MM-DD hh:mm:ss eg&#xff1a; NOW() 得到 2023-12-03 12:20:02 NOW(),SLEEP(2),NOW() 得到 2023-12-03 12:20:02 | 0 | 2023-…
阅读更多...
目标检测——OverFeat算法解读

目标检测——OverFeat算法解读

论文&#xff1a;OverFeat: Integrated Recognition, Localization and Detection using Convolutional Networks 作者&#xff1a;Pierre Sermanet, David Eigen, Xiang Zhang, Michael Mathieu, Rob Fergus, Yann LeCun 链接&#xff1a;https://arxiv.org/abs/1312.6229 文章…
阅读更多...
SpringAOP专栏二《原理篇》

SpringAOP专栏二《原理篇》

上一篇SpringAOP专栏一《使用教程篇》-CSDN博客介绍了SpringAop如何使用&#xff0c;这一篇文章就会介绍Spring AOP 的底层实现原理&#xff0c;并通过源代码解析来详细阐述其实现过程。 前言 Spring AOP 的实现原理是基于动态代理和字节码操作的。不了解动态代理和字节码操作…
阅读更多...
【C语言】函数递归详解（一）

【C语言】函数递归详解（一）

目录 1.什么是递归&#xff1a; 1.1递归的思想&#xff1a; 1.2递归的限制条件&#xff1a; 2.递归举例&#xff1a; 2.1举例1&#xff1a;求n的阶乘&#xff1a; 2.1.1 分析和代码实现&#xff1a; 2.1.2图示递归过程&#xff1a; 2.2举例2&#xff1a;顺序打印一个整数的…
阅读更多...
机器学习---集成学习的初步理解

机器学习---集成学习的初步理解

1. 集成学习 集成学习(ensemble learning)是现在非常火爆的机器学习方法。它本身不是一个单独的机器学 习算法&#xff0c;而是通过构建并结合多个机器学习器来完成学习任务。也就是我们常说的“博采众长”。集 成学习可以用于分类问题集成&#xff0c;回归问题集成&#xff…
阅读更多...
多线程并发Ping脚本

多线程并发Ping脚本

1. 前言 最近需要ping地址&#xff0c;还是挺多的&#xff0c;就使用python搞一个ping脚本&#xff0c;记录一下&#xff0c;以免丢失了。 2. 脚本介绍 首先检查是否存在True.txt或False.txt文件&#xff0c;并在用户确认后进行删除&#xff0c;然后从IP.txt的文件中读取IP地…
阅读更多...
CSS——sticky定位

CSS——sticky定位

1. 大白话解释sticky定位 粘性定位通俗来说&#xff0c;它就是相对定位relative和固定定位fixed的结合体&#xff0c;它的触发过程分为三个阶段 在最近可滚动容器没有触发滑动之前&#xff0c;sticky盒子的表现为相对定位relative【第一阶段】&#xff0c; 但当最近可滚动容…
阅读更多...
【MATLAB】tvfEMD信号分解+FFT+HHT组合算法

【MATLAB】tvfEMD信号分解+FFT+HHT组合算法

有意向获取代码&#xff0c;请转文末观看代码获取方式~也可转原文链接获取~ 1 基本定义 TVFEMDFFTHHT组合算法是一种结合了总体变分模态分解&#xff08;TVFEMD&#xff09;、傅里叶变换&#xff08;FFT&#xff09;和希尔伯特-黄变换&#xff08;HHT&#xff09;的信号分解方…
阅读更多...
电子学会C/C++编程等级考试2021年06月（五级）真题解析

电子学会C/C++编程等级考试2021年06月（五级）真题解析

C/C++等级考试（1~8级）全部真题・点这里 第1题：数字变换 给定一个包含5个数字(0-9)的字符串，例如 “02943”，请将“12345”变换到它。 你可以采取3种操作进行变换 1. 交换相邻的两个数字 2. 将一个数字加1。如果加1后大于9，则变为0 3. 将一个数字加倍。如果加倍后大于…
阅读更多...
Python configparser 模块：优雅处理配置文件的得力工具

Python configparser 模块：优雅处理配置文件的得力工具

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com 配置文件在软件开发中扮演着重要的角色&#xff0c;而Python中的 configparser 模块提供了一种优雅而灵活的方式来处理各种配置需求。本文将深入介绍 configparser 模块的各个方面&#xff0c;通过丰富的示例代码…
阅读更多...
嵌入式杂记 - MDK的Code, RO-data , RW-data, ZI-data意思

嵌入式杂记 - MDK的Code, RO-data , RW-data, ZI-data意思

嵌入式杂记 - Keil的Code, RO-data , RW-data, ZI-data意思 MDK中的数据分类MCU中的内部存储分布MDK中数据类型存储Code代码段例子 RO-data 只读数据段例子 RW-data 可读写数据段例子 ZI-data 清零数据段例子 在嵌入式开发中&#xff0c;我们经常都会使用一些IDE&#xff0c;例…
阅读更多...
Hadoop学习笔记（HDP）-Part.17 安装Spark2

Hadoop学习笔记（HDP）-Part.17 安装Spark2

目录 Part.01 关于HDP Part.02 核心组件原理 Part.03 资源规划 Part.04 基础环境配置 Part.05 Yum源配置 Part.06 安装OracleJDK Part.07 安装MySQL Part.08 部署Ambari集群 Part.09 安装OpenLDAP Part.10 创建集群 Part.11 安装Kerberos Part.12 安装HDFS Part.13 安装Ranger …
阅读更多...
Web前端 ---- 【Vue】Vuex的使用(辅助函数、模块化开发)

Web前端 ---- 【Vue】Vuex的使用(辅助函数、模块化开发)

目录 前言 Vuex是什么 Vuex的配置 安装vuex 配置vuex文件 Vuex核心对象 actions mutations getters state Vuex在vue中的使用 辅助函数 Vuex模块化开发 前言 本文介绍一种新的用于组件传值的插件 —— vuex Vuex是什么 Vuex 是一个专为 Vue.js 应用程序开发的状态…
阅读更多...
【ArcGIS Pro微课1000例】0053：基于SQL Server创建与启用地理数据库

【ArcGIS Pro微课1000例】0053：基于SQL Server创建与启用地理数据库

之前的文章有讲述基于SQL Server创建企业级地理数据库，本文讲述在SQL Server中创建常规的关心数据库，然后在ArcGIS Pro中将其启用，转换为企业级地理数据库。 1. 在SQL Server中创建数据库** 打开SQL Server 2019，连接到数据库服务器。 展开数据库连接，在数据库上右键→新…
阅读更多...
（四）Tiki-taka算法（TTA）求解无人机三维路径规划研究（MATLAB）

（四）Tiki-taka算法（TTA）求解无人机三维路径规划研究（MATLAB）

一、无人机模型简介&#xff1a; 单个无人机三维路径规划问题及其建模_IT猿手的博客-CSDN博客 参考文献&#xff1a; [1]胡观凯,钟建华,李永正,黎万洪.基于IPSO-GA算法的无人机三维路径规划[J].现代电子技术,2023,46(07):115-120 二、Tiki-taka算法&#xff08;TTA&#xf…
阅读更多...
基于SSH的java记账管理系统

基于SSH的java记账管理系统

基于SSH的java记账管理系统 一、系统介绍二、功能展示四、其他系统实现五、获取源码 一、系统介绍 项目类型&#xff1a;Java EE项目 项目名称&#xff1a;基于SSH的记账管理系统 项目架构&#xff1a;B/S架构 开发语言&#xff1a;Java语言 前端技术&#xff1a;HTML、CS…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023