Vue Nuxt.js 概述

最新推荐文章于 2024-05-11 10:40:21 发布
最新推荐文章于 2024-05-11 10:40:21 发布
阅读量1.3k 收藏 7
点赞数 2
分类专栏： # Vue 文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xianyu120/article/details/121913393
版权

文章目录

1. Nuxt.js 概述

1.1 我们一起做过的SPA

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

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

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

    image-20210428084448697

1.2 什么是SEO

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

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

    image-20210428084608523

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

    • 前端：采用SSR
    • 后端：页面静态化 （freemarker 、thymeleaf、velocity）

1.3 什么是SSR技术

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

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

    image-20210428084745029

  • 如果爬虫获得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.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默认安装组件

    image-20210428091556530

2.2 安装

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

image-20210428091536996

  • nuxtjs改善

    image-20210429094254422

2.3 启动

npm run dev

image-20210429092847194

2.4 访问

http://localhost:3000

image-20210429154438537

3. 目录结构

3.1 目录

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

image-20210428102054357

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 ？

    image-20210428213552169

  • 我们可以使用<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：首页

    image-20210428223527819

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

    image-20210428223600103

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

    image-20210428223647017

  • 需求4：点击修改按钮

    image-20210428223925292

  • 需求5：详情

    image-20210428223748334

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页面，是布局后所有组件挂载的基础。

image-20210428224921368

5.2.2 布局分析

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

image-20210428225159898

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>

image-20210428225703656

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

5.5 Nuxt组件特殊配置

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

5.5.1 模板代码

<template>
  <h1 class="red">Hello {{ name }}!</h1>
</template>

<script>
export default {
	//异步处理数据, 每次加载之前被调用
  asyncData (context) {
    // called every time before loading the component
    return { name: 'World' }
  },	
	//用于在渲染页面之前获取数据填充应用的状态树（store）
  fetch () {
    // The fetch method is used to fill the store before rendering the page
  },
	//配置当前页面的 Meta 标签
  head: {
    // Set Meta Tags for this Page
  },
  // and more functionality to discover
  ...
}
</script>

<style>
.red {
  color: red;
}
</style>

5.5.2 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 等内容。

image-20210428231033690

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

6. ajax操作

6.1 整合 axios

6.1.1 默认整合

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

    image-20210428231213876

6.1.2 手动整合（可选）

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

    image-20210428231341143

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

  • 步骤2：安装

    npm install

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

    image-20210428231458473

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

6.1.3 常见配置

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

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o1ZfTVLF-1639397669433)(assets/image-20210428231623404.png)]

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

6.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;
});

6.3 使用asyncData发送 ajax

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

6.3.1 发送一次请求

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

  • 实例

    <template>
  <div>{{echo}}</div>
</template>

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

<style>

</style>

6.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
        }
    },
}

  • 实例

<template>
  <div>{{echo}} {{echo2}}</div>
</template>

<script>
export default {
  async asyncData(context) {
    // 发送ajax
    let [{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>

6.4 使用fetch发送 ajax

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

image-20210428235932924

  • 步骤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} ) {
    // 发送ajax
    let { data } = await $axios.get('/service-consumer/feign/echo/abc')
    // 设置数据
    store.commit('setData' , data )
  }
}
</script>

<style>

</style>

6.5 插件：自定义axios

6.5.1 客户端

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

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

    image-20210429000848492

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

    image-20210429001056385

    //自定义函数
const request = {
  test : (params) => {
    return axios.get('/service-consumer/feign/echo/abc',{
      params
    })
  },
}

var axios = null
export default ({ $axios }, inject) => {

  //3） 保存内置的axios
  axios = $axios

  //4) 将自定义函数交于nuxt
  // 使用方式1：在vue中，this.$request.xxx()
  // 使用方式2：在nuxt的asyncData中，content.app.$request.xxx()

  inject('request', request)
}

6.5.2 服务端

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

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

  • 步骤二：编写 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.$request.xxx()
  // 使用方式2：在nuxt的asyncData中，content.app.$request.xxx()
  inject('request', request)
}

6.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',						//前端客户端 + 前端服务端
]

7. Vuex 状态树

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

7.2 其他模块数据操作

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

    export const state = () => ({
  money: 0
})

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

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

    <template>
  <div>
    首页 {{money}}
    <input type="button" value="+" @click="addmoney" />
  </div>
</template>

<script>
import { mapState,mapMutations } from 'vuex'
export default {
  computed: {
    money () {
      return this.$store.state.book.money
    }
  },
  methods: {
    ...mapMutations({
      addmoney: 'book/addmoney'
    })
  },
}
</script>

<style>

</style>

7.3 完整vuex模板

// state为一个函数, 注意箭头函数写法
const state = () => ({
  user: 'jack'
})

// mutations为一个对象
const mutations = {
  setUser(state, value) {
    state.counter = value
  }
}
// action执行mutation
const actions = {
  userAction (context,value){
    // 可以发送ajax
    context.commit('setUser',value)
  }

}

// 获取数据
const getters = {
  getUser (state) {
    return state.user
  }
}
export default {
  namespace: true,	// 命名空间
  state,
  mutations,
  actions,
  getters
}

8. nuxt流程总结

image-20210507172516686

9 综合练习

9.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

image-20210428224602547

9.2 练习2：

  • 表结构：

    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);

  • 需求：使用“自定义axios”完成

    • 查询班级详情
    • 通过班级名称模糊查询
    • 查询班级的同时，查询老师信息

image-20210428224442670

end

AIMaynor
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Nuxt.js功能齐全的样板-专业代理前端模板，可通过vuejs / nuxtjs构建快速，健壮和适应性强的Web应用程序或网站。-Vue.js开发
05-27
与我分享：Grabarz与合作伙伴-...演示网站源代码沙箱报告webpack客户端webpack现代webpack服务器packtracker现代柏树组件概述故事书快速入门IDE建议使用VSCode Editor。 https://code.visualstudio.com/打开wo
Nuxt.js开启SSR渲染的教程详解
12-10
第一节：nuxt.js相关概述 nuxt.js简单的说是Vue.js的通用框架，最常用的就是用来作SSR（服务器端渲染）.Vue.js是开发SPA（单页应用）的,Nuxt.js这个框架，用Vue开发多页应用，并在服务端完成渲染，可以直接用命令把...
Nuxt.js 使用教程指北
假面猫的博客
03-07 1848
Nuxt .js 是脱胎与 React 中的 SSR 方案 Next.js 的，基本使用方法都类似。 1，破剑式： 安装: yarn create nuxt-app &lt;项目名&gt; 需要注意的是，这类 SSR 框架推崇约定大于配置，所以生成的项目目录结构是不能修改的，不过其实这个结构和我们平常使用的 Vue-cli 生成的目录结构是差不多的。 2，破刀式： 配置： Nuxt.js 默认...
Nuxt.js的详细使用
qq_43340606的博客
07-06 3639
Nuxt.js 是一个基于 Vue.js 的服务端渲染应用框架，它可以帮我们轻松的实现同构应用。通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。我们的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有 Node.js 项目中使用 Nuxt.js。Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。除此之外，我们还提供了一种命令叫： ，为基于 Vue.js 的应用提供生成对应的静态站点的功能。我们相信这个命令所提
Nuxt.js实战：Vue.js的服务器端渲染框架
最新发布
天涯学馆
05-11 612
方法是Nuxt.js特有的，它允许你在服务器端预取数据并在客户端复用这些数据。在上面的示例中，我们简单地更改了message的值，但在实际应用中，你可能会在这里调用API获取数据。若要使用 TypeScript，设置 typescript: true 在 nuxt.config.js 中，Nuxt.js 会自动配置 TypeScript 支持。： 设置 generate.fallback 为 true 会为未预渲染的动态路由生成一个404页面，当用户访问这些路由时，Nuxt.js 会尝试在客户端渲染它们。
Nuxt3 初学，基础配置，页面结构搭建，引入element
欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！
03-12 1253
Nuxt是一个开源框架，它使web开发直观而强大。自信地创建高性能和生产级全栈web应用程序和网站。Nuxt 中文站 - 直观的Web框架 Nuxt3文档 · Nuxt。
Nuxt.js--》解密Nuxt.js：构建优雅、高效的现代化Vue.js应用
ztK63LrD的博客
07-15 2706
Nuxt.js 是一个基于 Vue.js 的开源框架，旨在简化和加速前端应用程序的开发过程。它结合了 Vue.js 强大的渐进式 JavaScript 框架和服务端渲染（SSR）的能力，提供了一种简单且灵活的方式来构建高性能、可扩展的 web 应用。这意味着，与传统的服务器端(或多页面)应用程序相比，Nuxt应用程序的渲染速度更快。
Vue生态及实践 - Nuxt
qq_35729091的博客
07-11 183
nuxt-帮助我们更快的实现ssr的同构。
jamstack-blog:Nuxt.js JAMstack博客
04-11
在Nuxt.js中使用SSG可以预先生成静态页面。 使用“ JAMstack”创建博客站点，该技术可以通过在CDN上准备HTML文件的缓存并进行分发来实现高速Web页面显示。 它使用Netlify（一种静态托管服务）从构建中进行托管，并...
pre-vue-Vue + Nuxt样板项目，为OpenGraph标签，Google Analytics（分析），站点地图和robots.txt提供内置支持。-Vue.js开发
05-27
pre-vue概述这是生成预渲染的静态站点的Vue + Nuxt配置的示例。 代替生成常规的单pa预先预览，而不是概述此示例是Vue + Nuxt配置的示例，该配置可生成预先渲染的静态站点。 它不会为网站上的每条路线生成一个静态...
nuxt-ssr-secure-website:使用 Vue NuxtJS、Express、Vuetify、Knexjs 和 Joi 验证的基本、安全、生产就绪型网站
07-24
Nuxt SSR 安全网站演示概述该项目是一个基本的、安全的、可用于生产的网站。 它有： 带有现代 UI 和示例部分的登陆页面带有移动友好菜单的导航邮箱注册和登录具有创建、读取、更新和删除操作的管理页面贯穿始终的...
真正可行的vue3迁移到nuxt3方法（本人亲测，完全避坑）
jiaohuizhuang6019的博客
12-16 3011
真正可行的vue3迁移到nuxt3方法（本人亲测，完全避坑）
vue项目改造nuxt（SEO优化）
bright的博客
05-17 3904
欢迎大家进群，一起探讨学习 微信公众号，每天给大家提供技术干货 博主技术平台地址 博主开源微服架构前后端分离技术博客项目源码地址，欢迎各位star 1. 背景 今年开源了一个博客系统；但其中一个项目开发完成后，遇到了大问题：由于采用的是Vue的单页面模式进行开发，网站信息搜索引擎无法做索引,导入收录只有是首页！ 搜索引擎无法进行索引的核心原因就是，其在爬取网站数据的时候，是不会执行其中包含的JS过程的；而采用Vue的方式开发的应用，其数据都是来源于axios或者其它的ajax方法获取的数据！也就是说
vue使用nuxt.js详情
高性价比服务器就选：蓝易云
01-03 314
Nuxt.js是基于Vue.js的一个开源的服务器端渲染框架，它可以帮助开发者快速构建通用、高性能的Vue.js应用。通过以上简要详情，你可以快速上手Nuxt.js，并利用其强大的服务端渲染能力构建通用、高性能的Vue.js应用。安装Nuxt.js：使用npm或者yarn全局安装Nuxt.js命令行工具。创建Nuxt.js项目：使用Nuxt.js命令行工具创建一个新的项目。运行项目：进入项目目录后，使用以下命令运行开发服务器。
php 服务器端渲染vue,如何使用Vue+Nuxt.js 实现服务端渲染
weixin_32271623的博客
03-11 336
这次给大家带来如何使用Vue+Nuxt.js 实现服务端渲染，使用Vue+Nuxt.js 实现服务端渲染的注意事项有哪些，下面就是实战案例，一起来看一下。直接使用 Vue 构建前端单页面应用，页面源码时只有简单的几行 html，这并不利于网站的 SEO，这时候就需要服务端渲染2016 年 10 月 25 日，zeit.co 背后的团队对外发布了一个 React 的服务端渲染应用框架 Next.js...
Nuxt.js+BootstrapVue+Json-server 基础入门到项目实战
08-18
为什么要学习服务端渲染 nuxt.js ? 现在我们的项目大多数都是SPA（单页面应用），在实际开发过程中单页面应用比之前的模板渲染要好很多，首先单页面应用是前后端分离，架构清晰，前端负责交互逻辑，后端负责数据，前后端单独开发，独立测试。但是，SPA不利于SEO（搜索引擎优化）。让搜索引擎更为信任该网站，通过提升排名获得更多网站流量，对于某些类型的网站是非常有必要的。目前大部分的Vue项目本质是 SPA 应用，React、Angular也都是SPA应用。SPA应用广泛用于对SEO要求不高的场景中。在我们开发的过程中，我们有 SEO 的需求，我们需要搜索引擎更多地抓取到我们的项目内容，此时我们需要SSR。SSR保证用户尽快看到基本的内容，也使得用户体验性更好。 Nuxt.js 是一个 Node 程序，基于vue.js开发的一套服务端渲染的框架，必须使用 Node 环境。我们对 Nuxt.js 应用的访问，实际上是在访问这个 Node.js 程序的路由，程序输出首屏渲染内容 + 用以重新渲染的 SPA 的脚本代码，而路由是由 Nuxt.js 约定好的 pages 文件夹生成的，开发只需要遵循一定的约定，直接使用vue.js开发我们项目也是非常轻松的。 课程案例 (1) HOME PAGE (2) Jokes Page  （3）About Page  课程概述 在本课程中，大喵将使用 nuxt.js + bootstrapVue + json-server 开发实战性质一个入门级项目，带着大家来体验服务端渲染（SSR ）项目构建的过程；介绍 nuxt.js项目目录的结构，每个文件夹和文件的基本概念和作用，以及nuxt.config.js 配置文件的基本介绍；页面公共结构处理，路由页面跳转配置处理；axios 接口请求；带着大家来熟悉及掌握 bootstrapVue UI组件库的使用；
Nuxt.js ---- 基于 Vue.js 的服务端渲染应用框架(实战篇一)
热门推荐
业余丰富各种技术栈
07-03 1万+
手把手教你用Nuxt.js ---- 基于 Vue.js 的服务端渲染应用框架(实战篇一)
Vue的SSR 与NUXT.JS
tianruine的博客
05-20 856
首先来看一张图 通过这张图可以一个页面要通过服务端与客户端共同进行渲染操作 首先在客户端上，注意在客户端只能生成一个静态页面返回到客户端，事件等一些操作是在客户端进行完成的 接下来我们模拟一下在客户端渲染 首先创建一个名字为template.html的HTML模板，为了让服务器渲染生成的字符串插入到这个模板里面 注意<!--vue-ssr-outlet--> 必须在里面写入这个相当于插槽，让服务器渲染的字符串插入到这个地方，并且也可以加style样式 //首先创建一个HTML模板
nuxt.js和vue.js的区别
05-19
Vue.js 是一个流行的 JavaScript 框架，用于构建交互式的 Web 用户界面。Nuxt.js 是一个基于 Vue.js 的应用框架，它提供了许多额外的功能和约定来帮助开发者构建更好的 Web 应用。下面是它们之间的几个区别： 1. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

AIMaynor

觉得有用，要个免费的三连可有？

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值