Nuxt3中请求数据-useFetch等

这篇具有很好参考价值的文章主要介绍了Nuxt3中请求数据-useFetch等。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

当前版本:

  • Nuxt  3.4.1
  • Nitro:2.3.3

Nuxt3中请求数据-useFetch等,nuxt,前端

效果图 

Nuxt3中请求数据-useFetch等,nuxt,前端 Nuxt3中请求数据-useFetch等,nuxt,前端

 

 

Nuxt接口

~/server/api里面的文件会自动在路由中加上/api的前缀。对于不需要带/api前缀的服务器路由,可以把它们放到~/server/routes目录中。 

Nuxt3中请求数据-useFetch等,nuxt,前端

查:/server/api/user.ts

export default defineEventHandler( async (event) => {
    let query = getQuery(event)
    let data = await $fetch("http://localhost:3002/system/user", {
        query
    })
    return data
})

 增:/server/api/user.post.ts

export default defineEventHandler( async (event) => {
    const body = await readBody(event)
    let data = await $fetch("http://localhost:3002/system/user", {
        method: "post",
        body
    })
    return data
})

 改:/server/api/user.put.ts

export default defineEventHandler( async (event) => {
    const body = await readBody(event)
    let data = await $fetch("http://localhost:3002/system/user", {
        method: "put",
        body
    })
    return data
})

删:/server/api/user/[id].delete.ts

export default defineEventHandler( async (event) => {
    let data = await $fetch(`http://localhost:3002/system/user/${event.context.params?.id}`, {
        method:"delete"
    })
    return data
})

app.vue:文章来源地址https://www.toymoban.com/news/detail-679309.html

<template>
  <client-only>
    <el-button type="primary" @click="openAddDialog">新增</el-button>
    <el-input v-model="state.searchByUsername" clearable placeholder="输入用户名称搜索" style="width: 400px; margin: 0 10px" />
    <el-button type="success" @click="searchUser">搜索</el-button>
    <el-table :data="state.tableData" style="width: 100%">
      <el-table-column label="用户名" prop="username" width="180"></el-table-column>
      <el-table-column label="密码" width="180">
        <template #default="scope">
          <el-tag>{{ scope.row.password }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :destroy-on-close="true" v-model="state_dialog.isShow" :title="state_dialog.type == 'add' ? '新增' : '编辑'">
      <el-form ref="ref_form" :model="state_dialog.form" :rules="state_dialog.rules">
        <el-form-item label="用户名" label-width="140px" prop="username">
          <el-input v-model="state_dialog.form.username" clearable autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" label-width="140px" prop="password">
          <el-input v-model="state_dialog.form.password" clearable autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="state_dialog.isShow = false">取消</el-button>
          <el-button type="primary" @click="submitForm(ref_form)">确定</el-button>
          <el-button type="primary" @click="resetForm(ref_form)">重置</el-button>
        </span>
      </template>
    </el-dialog>
  </client-only>

</template>
<script   setup lang="ts">
import { onMounted, reactive, ref } from "vue";
const ref_form = ref(null);
const state = reactive({
  searchByUsername: "",
  tableData: [
    // {
    //     id: 1,
    //     username: "张三",
    //     password: 333,
    // },
    // {
    //     id: 2,
    //     username: "李四",
    //     password: 444,
    // },
  ],
});
// 获取用户列表
const getUserList = async () => {
  let data = await useFetch("/api/user");
  console.log("data:", data)
  state.tableData = data.data.value.data;
};
getUserList();
// 根据username查询用户
const searchUser = async () => {
  let data = await useFetch("/api/user", {
    params: {
      username: state.searchByUsername,
    },
  });
  state.tableData = data.data.value.data;
};
// 重置表单
const resetForm = (formName: any) => {
  formName.resetFields();
};
// 打开新增窗口
const openAddDialog = () => {
  console.log("新增")
  state_dialog.isShow = true;
  state_dialog.type = "add";
  state_dialog.form = {
    id: "",
    username: "",
    password: "",
  };
};

// 打开编辑窗口
const handleEdit = (index: number, row: any) => {
  console.log("row:", row)
  state_dialog.isShow = true;
  state_dialog.type = "edit";
  state_dialog.form = {
    id: row.id,
    username: row.username,
    password: row.password,
  };
};
// 删除用户
const handleDelete = async (index: any, row: any) => {
  await useFetch(`/api/user/${row.id}`, {
    method: "delete",
  });
  getUserList();
};
const validator_password = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error("请输入密码"));
  }
  else {
    callback();
  }
};

// 弹窗
const state_dialog = reactive({
  isShow: false,
  type: "add", //edit
  form: {
    id: "",
    username: "",
    password: "",
  },

  rules: {
    username: [
      {
        required: true,
        message: "用户名不能为空",
        trigger: "blur",
      },
      { min: 1, max: 5, message: "长度1到5", trigger: "blur" },
    ],
    password: { validator: validator_password, trigger: "blur" },
  },
});

// 提交
const submitForm = (formName: any) => {
  formName.validate(async (valid: any) => {
    if (valid) {
      if (state_dialog.type == "add") {
        await useFetch("/api/user", {
          method: "post",
          body: {
            username: state_dialog.form.username,
            password: state_dialog.form.password,
          }
        });
      }
      if (state_dialog.type == "edit") {
        await useFetch("/api/user", {
          method: "put",
          body: {
            id: state_dialog.form.id,
            username: state_dialog.form.username,
            password: state_dialog.form.password,
          }
        });
      }
      state_dialog.isShow = false;
      getUserList();
    } else {
      console.log("error submit!");
      return false;
    }
  });
};

</script>

node接口

const router = require('koa-router')()

const db = require("../db.js")

router.prefix('/system/user')

//根据用户名检查用户是否已存在。注意:这种接口尽量防止靠前一点,放得靠后可能无法触发该接口
router.get('/existence', async (ctx, next) => {
    let { username } = ctx.request.query
    let sql = `select * from sys_user where username='${username}'`
    let users = await db.query(sql);
    if (users.length !== 0) {
        ctx.body = {
            code: 0,
            message: "用户已存在",
            data: {
                isExist_user: true
            }
        }
    } else {
        ctx.body = {
            code: 0,
            message: "用户未存在",
            data: {
                isExist_user: false
            }
        }
    }
})


//修改用户
router.put('/', async (ctx, next) => {
    let { id, username, password } = ctx.request.body
    let sql = `update sys_user set password='${password}',username='${username}' where id='${id}'`
    await db.query(sql);
    ctx.body = {
        code: 0,
        message: "success",
    }
})
//添加用户
router.post('/', async (ctx, next) => {
    let { username, password } = ctx.request.body
    console.log("ctx.request.body:", ctx.request.body)
    let sql = `insert into sys_user(username,password) values ('${username}','${password}')`
    await db.query(sql);
    ctx.body = {
        code: 0,
        message: "success",
    }
})


//根据username模糊查询用户,若username不存在或为空,则查询所有用户
router.get('/', async (ctx, next) => {
    let { username } = ctx.request.query

    let sql = `select * from sys_user`
    if (username) {
        sql += ` where username like '%${username}%'`
    }
    console.log("sql:", sql)
    let users = await db.query(sql);
    ctx.body = {
        code: 0,
        message: "success",
        data: users
    }
})


//根据id删除用户
router.delete('/:id', async (ctx, next) => {
    let { id } = ctx.params
    let sql = `delete from sys_user where id='${id}'`
    await db.query(sql);
    ctx.body = {
        code: 0,
        message: "success",
    }
})
// router.delete('/', async (ctx, next) => {
//     let { id } = ctx.request.query
//     let sql = `delete from sys_user where id='${id}'`
//     await db.query(sql);
//     ctx.body = {
//         code: 0,
//         message: "success",
//     }
// })




module.exports = router

到了这里,关于Nuxt3中请求数据-useFetch等的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微前端-qiankun:vue3-vite 接入 vue3、nuxt3、vue2、nuxt2等子应用

    一、了解qiankun.js qiankun - qiankun 1.1、简单, 任意 js 框架均可使用。微应用接入像使用接入一个 iframe 系统一样简单,但实际不是 iframe。 1.2、完备, 几乎包含所有构建微前端系统时所需要的基本能力,如 样式隔离、js 沙箱、预加载等。解耦,与技术无关。 1.3、生产可用, 已

    2024年02月03日
    浏览(69)
  • 【Nuxt3】nuxt3目录文件详情描述:.nuxt、.output、assets、public、utils(一)

    nuxt3的中文网站 上次简单介绍了nuxt3创建项目的方法和目录文件大概用处。 这次详细说下.nuxt、.output、assets、public、utils五个文件夹的用处。 Nuxt在开发中使用.nuxt/目录来生成你的Vue应用程序。 为了避免将开发构建的输出推送到你的代码仓库中,你应该将这个目录添加到你的

    2024年01月18日
    浏览(84)
  • 【Nuxt3】modules目录和nuxt3模块的简单介绍

    记录下nuxt3项目中module的用法 使用 modules/ 目录在应用程序中自动注册本地模块。 这是一个很好的地方,可以放置您在构建应用程序时开发的任何本地nuxt模块。 nuxt模块相当于npm包,可以发布到npm社区中 在modules/ 目录下的本地模块,会自动注册模块,无需在 nuxt.config.ts文件中

    2024年04月27日
    浏览(37)
  • 【Nuxt】在 Nuxt3 中使用 Element Plus

    在 nuxt.config.ts 中配置 类似写 vue3 项目,可以导入组件,也可以直接使用组件 在 Nuxt 3 中集成 Element Plus 的步骤 20分钟带你入门Nuxt3

    2024年02月05日
    浏览(38)
  • Nuxt3如何新建项目

    1.新建一个文件目录 nuxt-app 2.命令行cd到目录下运行 npx nuxi init nuxt-test 回车运行下 nuxt-test是文件名自己随意 3.再cd nuxt-test到目录下 运行npm install 4.运行完成后 npm run dev 启动项目 显示以下页面 1.在app.vue根目录同级新建pages文件夹 再新建一个index页面(新建文件目录参考官方文档

    2024年02月13日
    浏览(44)
  • Nuxt3环境变量配置

    Nuxt3 正式发布还不到半年,在投入生产环境使用后,遇到了不少问题,很难找到合适的解决方案,其中环境变量配置就是其中一个,之前一直未能解决,最近要上持续集成,无法绕过这个问题,所以花了点时间研究了一下,最终找到了解决方案,记录一下。 面对一个新框架,

    2024年02月01日
    浏览(58)
  • nuxt3 如何监听路由变化?

    nuxt3 如何监听路由变化?

    2024年02月11日
    浏览(57)
  • 宝塔部署Nuxt3项目(https)

    之前在服务器搭建的项目都是用http的,但是一般来说都要换成https;因为https比http更加安全,数据不再是明文传输,更不容易被攻击/被第三方广告光顾;所以就有了将http换成https的想法。 第一个需要升级的项目是我使用nuxt3重构的博客项目,期间遇到了诸多问题,所以想记录

    2024年02月04日
    浏览(49)
  • 一文搞懂Nuxt3基本用法

    在前后端分离出现之前,传统的web页面都是服务端渲染的,如JSP、PHP、Python Django,还有各种模板技术Freemarker, velocity,thymeleaf、mustache等等。其实这套技术都挺成熟的,也用了很多年。 但前后端分离出现后,带来两个好处: 工程上的分工,让前端专门盯前端技术,开发效率上

    2024年02月05日
    浏览(49)
  • nuxt3使用记录一:框架摸索

    之前直接用的Vue3,后面为了seo,了解到Vue3用SSR渲染很复杂,甚至衍生了出nuxt3这个框架,这个框架在github已经有50K star了,也已经是个非常成熟的框架了,不过我感觉国内的资料也不多,看来国内接受新事物的速度依然很慢,大厂估计都自研了,小公司就用老方法PHP啥的。

    2024年04月10日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包