nuxt介绍

目录结构

模板布局

默认布局页面 layouts/default.vue

<template>
  <div>
    <slot />
  </div>
</template>

入口界面文件

app.vue

是Nuxt自带的内置组件。 需要NuxtPage 来显示位于 pages/ 目录中的顶层页面或嵌套页面。

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

自定义公共组件

components/Tabbarlist.vue

<template>
  <div class="footerBox">
    <div class="footer">
      <ul>
        <li class="on">
          <NuxtLink to="/">
            <img src="/assets/images/f01.png" />
            <p>首页</p>
          </NuxtLink>
        </li>
        <li>
          <NuxtLink to="/business/">
            <img src="/assets/images/f4.png" />
            <p>我的</p>
          </NuxtLink>
        </li>
      </ul>
    </div>
  </div>
</template>

路由页面

pages/index.vue

<template>
    <h1>首页</h1>
    <Tabbarlist/>
</template>

全局自动加载的辅助函数

总接口文件 composables/useAPI.js

import api from '@/api/index';
export const useAPI = () => api

封装请求方法 composables/useHttp.js

useFetch接收URL并获取数据

export const useHttp = async (opts) => {
    var opts = opts || {};
    const config = useRuntimeConfig()
    let result = null
    const headers = {
        'Accept': 'application/json',
        'X-Requested-With': 'XMLHttpRequest'
    }
    if (opts.method == 'POST') {
        result = await useFetch(opts.url, {
        baseURL: config.public.baseUrl, method: "POST", headers: headers, body: opts.params
        }).then((data) => {
            return data
        })
    } else if (opts.method == 'GET') {
        result = await useFetch(opts.url, {
            baseURL: config.public.baseUrl, headers: headers, ...opts
        }).then((data) => {
            return data
        })
    } else if (opts.method == 'UPLOAD') {
        //封装表单数据对象
        var RequestData = new FormData()
        if (JSON.stringify(opts.params) != "{}") {
            for (var key in opts.params) {
                RequestData.append(key, opts.params[key])
            }
        }
        result = await useFetch(opts.url, {
            baseURL: config.public.baseUrl, method: "POST",  headers: useRequestHeaders(['authorization']), headers: headers,body: RequestData
        }).then((data) => {
            return data
        })
    }
    return result.data
}

API接口请求

api总入口文件 api/index.js

// 引入每个目录下面的index.js文件
const ModulesFile = import.meta.glob('./*/index.js', { eager: true })

//接口集合
var ApiList = {}

//提取对象下的值 同步
Object.values(ModulesFile).map(async mod => {
    if(mod.default)
    {
      //合并对象 循环多次合并
      ApiList = Object.assign(ApiList, mod.default)
    }
})

//导出接口集合
export default ApiList

api模块入口文件 api/user/index.js

//引入当前目录下面所有的文件
const ModulesFile = import.meta.glob('./*.js', { eager: true })

//接口列表
var ApiList = {}

Object.values(ModulesFile).map(async mod => {
    if(mod.default)
    {
        //合并对象 循环多次合并
        ApiList = Object.assign(ApiList,mod.default)
    }
})

export default ApiList

api模块接口文件 api/user/base.js

export default {
    register(data = {})
    {
        //注册接口
        return useHttp({
            url:'/business/register',
            params:data,
            method: 'GET'
        })
    },
}

页面调用接口

pages/index.vue

1、进入页面就请求数据
// UseFetch()在onMounted中使用，需要进行延迟调用才可以使用，否则获取不到数据。解决方式是使用nextTick()方法。
 onMounted(() => {    
  nextTick(async () => {
    const res  = await useAPI().productIndex();
    console.log(res)
  })
})

2、事件触发请求数据
const getindexData = async() =>{
    let result = await useAPI().register()
}

全局路由中间件

middleware/auth.global.js

import { showNotify } from 'vant';
//全局中间件，仅在调用的页面有效
export default defineNuxtRouteMiddleware((to, from) => {
  //如果有 NoLogin 并且为 true 就说明不需要登录就可以访问 否则就需要登录
  const toPath = to.fullPath;
  // 无需登录的路由页面
  let noNeedLogin = ['/', '/business/login', '/business/register', '/list/3', '/list/4', '/list/info']
  if(!noNeedLogin.includes(toPath))
  {
    //判断是否有登录信息
    let AuthLogin = useCookie('AuthLogin')

    if(!AuthLogin.value)
    {
      //  停止当前导航 navigateTo 导航跳转到指定页面.
      abortNavigation();
      showNotify({
        type: 'danger',
        message: '请先登录',
        duration: 1000
      });
      return navigateTo('/business/login')
    }
  }
})