axios + json-server用法演示

最新推荐文章于 2024-06-11 15:21:59 发布
最新推荐文章于 2024-06-11 15:21:59 发布
阅读量369 收藏 7
点赞数 7
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tongkongyu/article/details/119760844
版权

json-server axios HTTP请求 模拟API 前端开发
关键词由CSDN通过智能技术生成

json-server可以在前端模拟服务器返回json格式数据，使用时需要全局安装json-server包

npm i -g json-server

使用时需要开启服务，需要在终端找到自己的json文件并且监视：

 json-server --watch db.json

在这里插入图片描述
然后就可以开始写代码了：

基础使用：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>

<body>
    <div class="container">
        <h2 class="page-header">基本使用</h2>
        <button class="btn btn-primary">发送GET请求</button>
        <button class="btn btn-warning">发送POST请求</button>
        <button class="btn btn-success">发送PUT请求</button>
        <button class="btn btn-danger">发送DELETE请求</button>
    </div>

    <script>
        // 获取按钮
        const btns = document.querySelectorAll('button');

        // GET请求
        btns[0].onclick = () => {
            axios({
                // 请求类型
                method: 'GET',
                // URL
                url: 'http://localhost:3000/posts'
            }).then(response => {
                console.log(response);
            })
        }

        // POST请求
        btns[1].onclick = () => {
            axios({
                // 请求类型
                method: 'POST',
                // URL
                url: 'http://localhost:3000/comments',
                // 设置请求体
                data: {
                    id: 2,
                    title: "这是一个POST请求",
                    author: "eyes++"
                }
            }).then(response => {
                console.log(response);
            })
        }

        // PUT请求
        btns[2].onclick = () => {
            axios({
                // 请求类型
                method: 'PUT',
                // URL
                url: 'http://localhost:3000/comments/2',
                // 设置请求体
                data: {
                    id: 2,
                    title: "这是一个PUT请求",
                    author: "eyes"
                }
            }).then(response => {
                console.log(response);
            })
        }

        // delete请求
        btns[3].onclick = () => {
            axios({
                // 请求类型
                method: 'delete',
                // URL
                url: 'http://localhost:3000/comments/2',
            }).then(response => {
                console.log(response);
            })
        }
    </script>
</body>
</html>

axios的一些方法：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>

<body>
    <div class="container">
        <h2 class="page-header">其他方法</h2>
        <button class="btn btn-primary">发送GET请求</button>
        <button class="btn btn-warning">发送POST请求</button>
    </div>
    <script>
        // 获取按钮
        const btns = document.querySelectorAll('button');

        // 发送GET请求
        btns[0].onclick = () => {
            axios.request({
                method: 'GET',
                url: 'http://localhost:3000/comments'
            }).then(response => {
                console.log(response);
            })
        }

        // 发送POST请求
        btns[1].onclick = () => {
            axios.post(
                'http://localhost:3000/comments',
                {
                    "body": "这是一个POST请求",
                    "postId": 2
                }
            ).then(response => {
                console.log(response);
            })
        }
    </script>
</body>

</html>

更多内容大家可以前往我的个人博客浏览：eyes++的个人空间

耶瞳
关注
  • 7
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【axios】使用json-server 搭建REST API - 使用axios - 自定义axios - 取消请求 - 拦截器
YK菌的博客
03-04 1万+
文章目录1. 自己创建一个API1.1 API 的分类1.2 使用json-server 搭建REST API2.9.1 json-server 是什么?2.9.2 使用json-server2.9.3 使用浏览器访问测试2.9.4 使用axios 访问测试4. XHR 的 ajax 封装 (简单版axios)4.1 特点4.2 编码实现4.3 使用测试6 axios 的理解和使用6.1 axios 是什么?6.2 axios 特点6.3 axios 常用语法6.4 难点语法的理解和使用6.4.1 axio
axios基础（一）：json-server服务搭建
Always-Learning
03-16 227
搭建步骤 1：npm安装 npm install -g json-server 2：创建db.json文件 { "posts": [ { "id": 1, "title": "json-server", "author": "typicode" } ], "comments": [ { "id": 1, "body": "some comment", "postId": 1 } ], "profile": { "name": "typicode" } } 3：启动js
json-server(利用数据自动生成后端接口)的安装和使用、Vue3中axios的安装、封装和使用
最新发布
qq_63064285的博客
06-11 1007
很容易想到，有时候多个页面需要用到同一个请求地址，仍然有很多重复的代码，并且在渲染页面写请求数据占据了很多空间，不利于维护。为了解决这种问题，我们可以将不同的请求地址封装为一个方法，这样我们只有时只需要调用方法传参就可以获得请求数据了，这里仅提供一个想法，不做具体的介绍。
@vue/cli 3.0 + axios + json-server (前后端分离，前端进行数据模拟)
Dark_programmer的博客
04-22 822
@vue/cli 3.0 + axios + json-server一、创建vue项目二、json-server相关2.1 安装json-server2.2 创建.json文件2.3 配置启动命令三、axios请求3.1 安装axios3.2 二次封装axios3.2.1 创建 utils/http.js3.2.2 编写http.js3.3 项目使用axios3.3.1 配置代理3.3.2 发送a...
axios基本使用配合json-server
m0_45136861的博客
06-11 221
全部引入 json-server 配置地址github https://github.com/typicode/json-server npm install -g json-server 启动 json server json-server --watch db.json 代码 //获取按钮组 var btns = document.querySelectorAll('button'); //获取所有数据 btns[0].onclick =function(){
6.axios、json-server基本使用
借风拥你
10-31 609
Axios是一个基于promise 的异步 ajax 请求库,前端最流行的 ajax 请求库。简单的讲就是可以发送get、post请求，负责与后端交互Vue、React等框架的出现**，**促使了Axios轻量级库的出现， react/vue 官方都推荐使用 axios 发 ajax 请求。
学习axios必知必会（1）~axios基本介绍、axios配置、json-server接口模拟工具
Coder-coco的博客
09-07 154
① 基于 xhr + promise的异步ajax 请求库②浏览器端/node 端都可以使用③ 支持请求／响应拦截器④ 支持请求取消⑤ 请求/响应数据转换⑥ 批量发送多个请求①baseURL设置url的基本结构（请求根地址），域名和协议，再结合属性url某个请求路径，axios会自动将baseURL 和 url 进行拼接，从而得出正确的请求路径。②method：请求方式 get/post③timeout：延时时间（超过多少时间就取消请求）【单位是毫秒】①。
Ajax+Json+JQuery+案例演示知识整理.docx
10-25
Ajax，全称Asynchronous JavaScript and XML，是一种在无需重新...在实际应用中，Ajax结合Json和JQuery或Axios库，可以实现诸如表格数据动态加载、表单无刷新提交等多种功能，显著提高Web应用的响应速度和用户体验。
axios和server之间的调用
11-30
下面是一个简单的示例，演示如何使用Axios调用Server的API： 首先，我们需要创建一个API目录，并在其中封装各种方法，例如： ``` // api/index.js import axios from 'axios'; const api = { getData: () => { ...
vue-api-server.zip
05-06
"vue-api-server.zip" 文件很可能是为了演示如何在Vue.js项目中设置一个API服务器，以便于开发和测试。 首先，我们来理解Vue.js的核心概念。Vue.js通过声明式的模板语法使得DOM更新变得简单，它的响应式系统能够...
React-Native-Wallpapers：演示壁纸应用程序
02-20
React-Native-Wallpapers 是一个基于React Native框架开发的演示应用程序，主要目的是展示如何使用React Native来构建一个壁纸应用。这个项目对于初学者和有一定经验的开发者来说都是一个很好的学习资源，因为它涉及...
blockfood-demo:BlockFood的交互式演示
05-01
3. **状态管理**：学习Redux或MobX等状态管理库的原理和使用方法。 4. **API设计与调用**：熟悉如何使用TypeScript编写API接口，以及如何通过Axios等库进行HTTP请求。 5. **前端构建工具**：掌握Webpack或Parcel等...
axios 的简单增删查改 使用json-server启动的josn
weixin_43055079的博客
09-06 1605
使用axios 获取json-server启动的json数据 进行增删查改 一.启动json-server 1.1启动 json-server是用来模仿后台接口而使用的。 安装：npm install -g json-server 安装完成后cd 到json的文件目录下 启动 我为了方便启动在package.json中设置了命令 "dx": "json-server --watch src/...
前置准备 -- json-server的介绍与服务搭建、axios的介绍与页面配置
十八岁讨厌编程的博客
04-08 3679
文章目录json-server什么是json-serverJson-Server作用json-server的安装axiosaxios的特点安装axios json-server 什么是json-server Json-Server 作为工具，基于 Express 开发，而且它足够简单，写少量数据，即可使用，Json-Server 的主要作用就是搭建本地的数据接口，创建 json 文件，便于调试调用。 Json-Server 支持 CORS 和 JSONP 跨域请求，支持 GET, POST, PUT, PA
json-server与axios的简单使用
weixin_42132044的博客
06-02 998
json-server与axios的简单使用一、json-server的简单使用1、安装2、新建json数据3、启动服务4、接口规则-RESTful说明二、axios部分使用1、查询所有数据2、删除单条数据3、实时查询4、实现数据新增 一、json-server的简单使用 json-server参考链接 1、安装 npm install -g json-server 2、新建json数据 新建一个文件夹 在此文件夹中新建db.json文件，数据如下所示 { "posts": [ { "id
axios_json-server的介绍与服务器搭建---axios工作笔记002
添柴程序猿的专栏
02-20 380
我们先来认识一下这个json server,这个jsonserver,可以帮助我们快速的搭建一个假的后台服务,类似于我们 用这个json server开启一个http服务,然后这个服务可以提供给咱们一个restful的api接口. 然后我们后面去测试axios的时候直接访问这些接口就可以了. 可以去上面的地址去看看介绍,可以看到,上面说用少于30秒就可以搭建一个http服务 可以看到,首先在控制台执行 npm install -g json-server 然后再去创建一个文件,叫db.j..
json-server的使用以及axios的发起的ajax请求
业余前端的职业经历
10-30 854
作为一个前端工程师,在后端没有数据接口的时候，本身又不喜欢用静态数据 那么 json-server就是必备的一个技能 json-server是第三方 插件包 要想使用首先得安装 1.可以使用npm 也可以使用yarn安装 : npm install -g json-server //建议全局安装 下次使用就不用再次安装 2.安装完之后书写一个data.json文...
vue3 + typescript +json-server +axios 写一个登录功能
05-16
好的，下面我为你提供一个简单的示例代码： 首先，我们需要在项目中安装需要的依赖： ``` npm install vue@next vue-router@next vuex@next axios json-server --save npm install --save-dev typescript @types/node @types/vue @types/vue-router @types/vuex ``` 接下来，我们先创建一个 `api.ts` 文件来处理登录请求： ```typescript import axios from "axios"; export const login = (username: string, password: string) => axios.post("/api/login", { username, password }); ``` 然后在 `main.ts` 中初始化 `axios`： ```typescript import { createApp } from "vue"; import App from "./App.vue"; import router from "./router"; import store from "./store"; import axios from "axios"; axios.defaults.baseURL = "http://localhost:3000"; createApp(App) .use(store) .use(router) .mount("#app"); ``` 接着，在 `store` 目录下创建一个 `auth.ts` 文件来管理用户登录状态： ```typescript import { Module } from "vuex"; import { login } from "../api"; interface AuthState { isLoggedIn: boolean; username: string; } const authModule: Module<AuthState, any> = { namespaced: true, state: { isLoggedIn: false, username: "", }, mutations: { login(state, username: string) { state.isLoggedIn = true; state.username = username; }, logout(state) { state.isLoggedIn = false; state.username = ""; }, }, actions: { async login({ commit }, { username, password }) { try { const response = await login(username, password); commit("login", response.data.username); } catch (error) { console.error(error); throw error; } }, logout({ commit }) { commit("logout"); }, }, }; export default authModule; ``` 最后，在 `views` 目录下创建一个 `Login.vue` 文件，用于用户登录： ```vue <template> <div> <form @submit.prevent="login"> <label> Username: <input type="text" v-model="username" /> </label> <label> Password: <input type="password" v-model="password" /> </label> <button type="submit">Submit</button> </form> </div> </template> <script lang="ts"> import { defineComponent } from "vue"; import { useStore } from "vuex"; export default defineComponent({ name: "Login", setup() { const store = useStore(); const username = ref(""); const password = ref(""); const login = async () => { try { await store.dispatch("auth/login", { username: username.value, password: password.value }); router.push("/"); } catch (error) { console.error(error); alert("Error logging in, please try again."); } }; return { username, password, login, }; }, }); </script> ``` 最后，在 `router` 目录下定义路由： ```typescript import { createRouter, createWebHistory } from "vue-router"; import Home from "../views/Home.vue"; import Login from "../views/Login.vue"; import { store } from "../store"; const routes = [ { path: "/", name: "Home", component: Home, meta: { requiresAuth: true, }, }, { path: "/login", name: "Login", component: Login, }, ]; const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes, }); router.beforeEach((to, from, next) => { const requiresAuth = to.matched.some((record) => record.meta.requiresAuth); if (requiresAuth && !store.state.auth.isLoggedIn) { next("/login"); } else { next(); } }); export default router; ``` 现在，你可以通过访问 `/login` 路径来尝试进行登录了。如果登录成功，你将被重定向到 `/` 路径，否则会提示错误信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值