Nuxt.js详解(二)

喜欢ヅ旅行 2024-04-06 13:06 8阅读 0赞

**目录**

6. ajax操作

6.1 整合 axios

6.1.1 默认整合

6.1.2 手动整合（可选）

6.1.3 常见配置

6.2 使用axios发送ajax

6.3 使用asyncData发送 ajax

6.3.1 发送一次请求

6.3.2 发送多次请求

6.4 使用fetch发送 ajax

6.5 插件：自定义axios

6.5.0 分析

6.5.1 客户端

6.5.2 服务端

6.5.3 插件配置总结

6.5.4 服务器端插件使用总结

7. Vuex 状态树

7.1 根模块数据操作

7.2 其他模块数据操作

7.3 完整vuex模板

8. nuxt流程总结

9 综合练习

9.1 练习1：学生列表

9.2 练习2：

9.2.1 表结构：

9.2.2 需求：查询

9.2.3 扩展需求：添加

## **6. ajax操作** ##

### **6.1 整合 axios** ###

#### **6.1.1 默认整合** ####

*  在构建项目时，如果选择axios组件，nuxt.js将自动与axios进行整合
    
    ![7a1cb0c1c63a44dda74d8d6cfe00e0e4.png][]

#### **6.1.2 手动整合（可选）** ####

* 步骤1：package.json有axios的版本
 
 ![6cba6081ebc7411581326fbe156442af.png][]
 
  "dependencies": {
    "@nuxtjs/axios": "^5.13.1",
 },
 * 步骤2：安装
 
 npm install
 * 步骤3：nuxt.config.js 以模块的方式添加axios
 
 ![e8eb5ab2756e4791ab80d066abb68374.png][]
 
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
 ],

#### **6.1.3 常见配置** ####

* 修改 nuxt.config.js 进行baseURL的配置
 
 ![bf993475f33a4d4790a8e2779f753516.png][]
 
  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    baseURL:'http://localhost:10010/'
 },

### **6.2 使用axios发送ajax** ###

* 在vue页面中，通过 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程序。
    
    ![063de2b1479945eb94c80032ee2a5a0b.png][]

#### **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
       }
   },
 }
 
 //演化过程
 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) {
    // 发送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 方法类似，不同的是它不会设置组件的数据。

![92958d40a95c47bca68463c39d39eb18.png][]

* 步骤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.0 分析** ####

![1fd9d844c7ed4c03a024281be31a5956.png][]

#### **6.5.1 客户端** ####

* 步骤一：在`nuxt.conf.js`中配置客户端插件，设置 mode 为 client
 
  plugins: [
   { src: '~plugins/api.js', mode: 'client' }
    //{ src: '~plugins/api.js', ssr: false }
 ],
 
 ![baf15c7fd6d942bfb0da6d0ad12af7b5.png][]
 * 步骤二：编写 `plugins/api.js` 对 内置的 $axios进行增强
 
 ![24a74988462d40dc932aa994e4896841.png][]
 
 //自定义函数
 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' },
    //{ 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>`切换不能访问。解决方案：修改mode，支持client和service。

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

#### **6.5.4 服务器端插件使用总结** ####

## **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, // 命名空间，强制要求，在使用时，加上所属的模块名，例如：book/addmoney
  state,
  mutations,
  actions,
  getters
 }

## **8. nuxt流程总结** ##

![7da135628dba48b2a312c69e2e5e61bf.png][]

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

### **9.2 练习2：** ###

#### **9.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);

#### **9.2.2 需求：查询** ####

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

![c9b42685739c4c0d98702037b78b070a.png][]

#### **9.2.3 扩展需求：添加** ####

![f35f909218da4e8ab5acbb7978c8738b.png][]

[7a1cb0c1c63a44dda74d8d6cfe00e0e4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/5acc320e4f9e446cafb24bf817e6aa0f.png
[6cba6081ebc7411581326fbe156442af.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/bf608fd591254b908626fb8e1ce2fff5.png
[e8eb5ab2756e4791ab80d066abb68374.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/e5e684f59c7b4db0a21b5d22cbfb3e67.png
[bf993475f33a4d4790a8e2779f753516.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/d85bef7f42ab4219873ece14273188d9.png
[063de2b1479945eb94c80032ee2a5a0b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/36846dc25e9a40fc8848400d8824370c.png
[92958d40a95c47bca68463c39d39eb18.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/c554902dd4c4440ba9dac46549027f3c.png
[1fd9d844c7ed4c03a024281be31a5956.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/29d160845a464587bc1f45260ac60aa3.png
[baf15c7fd6d942bfb0da6d0ad12af7b5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/4ca746fa0e3145778ec1ffa6bba830ff.png
[24a74988462d40dc932aa994e4896841.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/1e386af7aafe4ce7b233655acd5f4bdb.png
[7da135628dba48b2a312c69e2e5e61bf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/4eacfeabd0eb466a9ae6579568364ed9.png
[c9b42685739c4c0d98702037b78b070a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/043cb0dff5214c16b60399c5b9e53459.png
[f35f909218da4e8ab5acbb7978c8738b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/c0386d3938d84073a6780d203cfc7c7c.png