node-axios
viceen
这个作者很懒,什么都没留下…
展开
-
axios请求本地json文件——调用路径只支持相对路径形式 & 设置、获取、清除sessionStorage & 跨组件通信之父组件有provide选项提供数据,子组件有inject选项来使用数据
src同层级,public文件夹下的static文件夹中,新建userInfo.json。src同层级,public文件夹下新建serverConfig.json。所以如果需要引用static目录下的图片及其他资源,应该使用绝对路径。原创 2024-03-28 10:07:08 · 119 阅读 · 0 评论 -
vue3中,axios的几种用法之抽离接口、post请求、get请求、.env.dev、网关标识、基准地址
【代码】vue3中,axios的几种用法之抽离接口、post请求、get请求、.env.dev、网关标识、基准地址。原创 2024-03-28 09:01:31 · 62 阅读 · 0 评论 -
http之浏览器同源政策——端口、域名、协议,三者同及不跨域;解决跨域的方案有哪些
浏览器的同源策略(Same-Origin Policy)是一种安全机制,用于限制一个源(包括协议、域名和端口)的文档或脚本与来自其他源的资源进行交互。简单来说,同源策略要求页面中的脚本只能访问与其来源相同的资源,而不能直接访问其他源的资源。代理服务器:在同源策略限制下,通过在服务器端创建一个代理,将跨域请求转发到目标服务器并将响应返回给客户端。WebSocket:WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议,它不受同源策略的限制,可以与任意源进行通信。元素,将目标页面作为。原创 2024-03-27 09:13:29 · 211 阅读 · 0 评论 -
会话存储sessionStorage之token、用户 & 设置-sessionStorage.setItem(‘num‘, ‘张三‘)、获取sessionStorage.getItem(‘num‘)
【代码】会话存储sessionStorage之token、用户 & 设置-sessionStorage.setItem(‘num‘, ‘张三‘)、获取sessionStorage.getItem(‘num‘)原创 2023-09-06 16:52:47 · 424 阅读 · 0 评论 -
axios配置多个接口请求(四)——vue项目axios配置多个IP地址,并配置多个接口请求
2、创建axios实例:在Vue项目的根目录下,创建一个新的JavaScript文件(例如,axios-config.js),并在其中创建一个axios实例。4、在Vue组件中使用axios实例:在需要使用axios进行HTTP请求的Vue组件中,您可以通过引入创建的axios实例来进行请求。通过上述步骤,您可以在Vue项目中配置多个IP地址和多个接口请求,并在需要的地方使用相应的axios实例进行HTTP请求。请根据您的实际需求进行调整。3、配置多个IP地址和接口请求:根据您的需求,您可以通过修改。原创 2023-09-05 16:55:43 · 869 阅读 · 0 评论 -
axios配置多个接口请求(三)——vue项目axios配置多个IP地址,并配置多个接口请求
这样,你就可以在 Vue 项目中配置多个 IP 地址,并针对每个 IP 地址配置多个接口请求。根据实际需求,你可以在配置文件中添加更多的 IP 地址和接口请求配置,并在组件中根据需要使用它们进行请求。在上述示例中,通过导入 IP 地址和接口请求的配置信息,你可以在需要发起请求的地方使用这些配置来构建请求的完整 URL。的形式,你可以调用相应的接口请求函数,并发起请求到对应的 IP 地址和接口端点。2、创建一个 API 文件,例如 api.js,用于存放接口请求的定义和配置。1、创建一个配置文件,例如。原创 2023-09-05 16:55:09 · 524 阅读 · 0 评论 -
axios配置多个接口请求(二)——vue项目axios配置多个IP地址,并进行请求数据
这样,你就可以轻松地在 Vue 项目中配置多个 IP 地址,并使用 Axios 发起请求到不同的 IP 地址。根据实际需求,你可以在配置文件中添加更多的 IP 地址,并在组件中根据需要使用它们进行请求。在上述示例中,通过导入 IP 地址的配置信息,你可以在需要发起请求的地方使用这些配置来构建请求的完整 URL。的形式,你可以将 IP 地址和具体的请求端点结合起来,从而发起请求到对应的 IP 地址。2、在需要发起请求的组件中,导入 Axios 和 IP 地址的配置信息。1、在项目中的某个适当的位置(例如,原创 2023-09-05 16:54:36 · 594 阅读 · 0 评论 -
axios配置多个接口请求(一)——vue项目axios配置多个接口请求
文件中,你可以对 Axios 进行进一步的配置和自定义,例如设置请求头、错误处理等。组件中可以直接导入对应的接口请求函数,并在需要的地方调用它们来发起接口请求。文件中,导入 Axios 并创建一个 Axios 实例,可以对其进行自定义配置,例如设置请求的基本 URL、请求拦截器、响应拦截器等。通过这种方式,你可以在 Vue 项目中轻松地配置和使用 Axios 进行多个接口请求。文件中,定义多个接口请求函数,每个函数对应一个具体的接口请求。4、在需要发起接口请求的组件中,导入并调用相应的接口请求函数。原创 2023-09-05 16:54:01 · 887 阅读 · 0 评论 -
promise settimeout promise.all async/await的打印顺序
在理解 Promise、setTimeout、Promise.all 和 async/await 的打印顺序之前,我们需要了解它们的行为和执行机制。需要注意的是,由于事件循环的机制,实际的执行顺序可能会有微小的差异,但以上的顺序是最常见的情况。原创 2023-09-04 15:35:52 · 156 阅读 · 0 评论 -
Ajax跨域请求之同源政策、跨域请求 & 实现跨域请求之jsonp原理、jQuery实现跨域请求、CORS跨域 & XML格式-过时 & ajax请求遵循http协议
axios原创 2023-04-19 00:51:57 · 490 阅读 · 1 评论 -
npm相关之npm初始化、切换npm镜像源、package.json释义、require 的加载机制 & ES6降级处理-babel包
npm原创 2023-04-19 00:38:45 · 1368 阅读 · 0 评论 -
Node学习(九)065-会话技术简介之cookie和session的优缺点——cookie-优点是节省服务器空间,缺点不安全 & session-优点是安全,缺点需要服务器空间 & 语法之设置和获取
会话技术原创 2023-03-28 01:24:57 · 119 阅读 · 0 评论 -
Node学习(九)064-会话技术简介之session的设置和获取——设置与获取之express-session模块& session有效期& 删除session& cookie和session的原理
session原创 2023-03-28 01:22:03 · 685 阅读 · 0 评论 -
Node学习(九)063-会话技术简介之cookie的设置和获取——会话控制的分类之cookie-保存客户端(浏览器)、session-保存服务器 & cookie的设置与获取 & cookie有效期
cookie原创 2023-03-28 01:16:34 · 680 阅读 · 0 评论 -
网络请求状态码
http原创 2022-12-03 22:52:00 · 57 阅读 · 0 评论 -
jquery中的ajax请求方式的写法 & 重要且常用参数的释义 & ajax返回值,return获取不到数据值
ajax原创 2022-12-03 22:50:08 · 2142 阅读 · 0 评论 -
http-server使用,启动本地服务器 & 使用serve包本地启动
node,http-server,serve原创 2022-10-18 10:34:14 · 9880 阅读 · 0 评论 -
vue中,使用mock流程
vue模拟数据原创 2022-07-04 13:57:34 · 524 阅读 · 0 评论 -
去除param参数中的 null 和 undefined,过滤后给后端进行传参
去除param参数中的 null 和 undefined,过滤后给后端进行传参效果1、封装方法src/utils/transformDataNull.ts/** * 去除数据中的 null 和 undefined * @param data */import deepClone from '@/utils/clone';export default (data: Object) => { if (data instanceof FormData) { re原创 2021-11-01 17:59:14 · 1747 阅读 · 0 评论 -
共用弹框之新增编辑(三)02-弹框接口文件——配置接口文件的完整流程含:基准路径、接口配置、方法封装、接口引入
共用弹框之新增/编辑(三)02-弹框接口文件——配置接口文件的完整流程含:基准路径、接口配置、方法封装、接口引入1、页面使用index.vueimport Courseware from '@/api/PublicResource/CourseWare/index';//新增课件const addCourseWare = () => { Courseware.addCourseWare(state.formInline) .then(res => {原创 2021-11-01 17:14:45 · 225 阅读 · 0 评论 -
共用弹框之新增编辑(三)01-弹框接口文件——配置接口、引用接口、封装接口 & 下载接口的封装和使用
共用弹框之新增/编辑(三)01-弹框接口文件——配置接口、引用接口、封装接口 & 下载接口的封装和使用Courseware接口文件1、新增和编辑接口src/api/PublicResource/CourseWare/index.tsimport { ehrService } from '@/axios';const Courseware = { //新增课件__________用到了 addCourseWare(data) { return ehrSer原创 2021-11-01 17:04:31 · 111 阅读 · 0 评论 -
文件下载功能
文件下载功能结构 <label>附件:</label><span class='pointer color-1890ff' @click='openFile(attachmentUrl, fileName)'>{{ fileName }}</span >逻辑1-不抽离写法<script lang='ts'>import {downloadFile} from '@/原创 2021-09-28 10:48:30 · 129 阅读 · 0 评论 -
vue中——封装一个通用的axios请求
axios封装一个通用的请求1、封装文件http.jsimport axios from 'axios'axios.defaults.timeout = 5000//http request 拦截器axios.interceptors.request.use( config => { config.headers = { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',原创 2021-09-24 09:31:39 · 149 阅读 · 0 评论 -
表格当前行-对象数据传递给弹框 & 父组件传对象数据给子组件 & 接口写法-增删改查-post-get-delete
表格当前行-对象数据传递给弹框 & 父组件传对象数据给子组件 & 接口写法-增删改查-post-get-delete1、父组件-主页表格结构<el-table> <el-table-column label="操作"> <template slot-scope="scope"> <!-- @click="handleEdit(scope.$index, scope.row)" -->原创 2021-07-07 16:28:24 · 836 阅读 · 0 评论 -
跨域问题Response to preflight request doesn‘t pass access control check No ‘Access-Control-Allow-Origin
跨域问题Response to preflight request doesn’t pass access control check: No 'Access-Control-Allow-Origin现象释义这个问题,属于跨域没有跨过去。问题原因1:后端没有设置header解决办法:后端action(controller)里添加如下代码即可 response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader(原创 2021-07-05 20:19:12 · 9385 阅读 · 0 评论 -
vue中配置axios教程-定稿版(三)——页面index.vue中引入和使用接口文件,network查看请求和响应
vue中配置axios教程-定稿版(三)——页面index.vue中引入和使用接口文件,network查看请求和响应第四步:在页面index.vue中进行引入完整代码-src/views/knowledge/index.vue<script>import { getListAll, add, deletes } from "@/api/knowledge/entityType";export default { data(){ return{原创 2021-07-05 19:10:20 · 350 阅读 · 1 评论 -
vue中配置axios教程-定稿版(二)——自定义接口文件和main.js引入文件
vue中配置axios教程-定稿版(二)——自定义接口文件和main.js引入文件第三步:在src/main.js中进行引入import axios from '@/api'Vue.prototype.$http = axios第二步:在api文件夹下,index.js同层级,新建自定义接口集合(页面一级菜单knowledge模块所有接口)文件夹-knowledge,knowledge文件夹中新建二级菜单entityType界面所有接口-entityType.js完整代码-src/api/原创 2021-07-05 19:06:30 · 580 阅读 · 2 评论 -
vue中配置axios教程-定稿版(一)——api index.js配置文件和.env文件
vue中配置axios教程-定稿版(一)——api/index.js配置文件和.env文件第一步:在api/index.js中,配置请求拦截、响应拦截、请求头和基准路径完整代码-src/api/index.jsimport axios from 'axios'// 接口错误情况处理const errorHandler = err => { console.log(err, 'err') return Promise.reject(err)}const service =原创 2021-07-05 19:05:39 · 1152 阅读 · 0 评论 -
Todos接口重构(六)——批量清空任务- axios.delete(‘todos‘ + item.id)
Todos接口重构——批量清空任务- axios.delete(‘todos/’ + item.id)src/store/ActionCreator.jsexport const clearAllActionAsync = () => { return async (dispatch) => { // 清除所有已完成任务 let list = await axios.get('todos') list.data.forEach(item => {原创 2021-06-23 00:21:16 · 153 阅读 · 0 评论 -
Todos接口重构(五)——状态切换操作接口对接-axios.patch只更新传递数据-patch请求方式需要提供url的id,无法批量更新;axios.put会更新全部
Todos接口重构——状态切换操作接口对接-axios.patch只更新传递数据-patch请求方式需要提供url的id,无法批量更新;axios.put会更新全部控制单个条目的状态更新src/store/ActionCreator.jsexport const toggleItemActionAsync = (id) => { return async (dispatch) => { // 更新单个条目的状态 let todo = await axios.get(原创 2021-06-23 00:13:42 · 215 阅读 · 0 评论 -
Todos接口重构(三)——删除任务接口对接-let res = await axios.delete(‘todos‘ + id)
Todos接口重构——删除任务接口对接-let res = await axios.delete(‘todos/’ + id)删除异步Actionsrc/store/ActionCreator.jsexport const deleteTaskActionAsync = (id) => { return async (dispatch) => { let res = await axios.delete('todos/' + id) // 刷新列表 let原创 2021-06-21 23:41:12 · 227 阅读 · 0 评论 -
Todos接口重构(二)——添加任务对接接口-let res = await axios.post(‘todos‘, {etitle etitle })
Todos接口重构——添加任务对接接口-let res = await axios.post(‘todos’, {etitle: etitle })产生一个异步actionsrc/store/ActionCreator.jsexport const addTaskActionAsync = (etitle) => { return async (dispatch) => { // 调用接口,添加任务,调用后台接口添加任务 let res = await axios.原创 2021-06-21 23:35:05 · 271 阅读 · 0 评论 -
Todos案例对接后台接口(一)——模拟接口-json-server & 配置axios基准地址-axios.defaults.baseURL
Todos案例对接后台接口——模拟接口-json-server & 配置axios基准地址-axios.defaults.baseURL模拟后台接口安装包:yarn global add json-server自动生成CRUD接口启动服务json-server ./todos.json --port 8888./todos.json——数据文件路径页面模拟数据-效果对接后台接口数据-列表展示src/store/ActionCreator.jsexp原创 2021-06-21 23:10:22 · 244 阅读 · 0 评论 -
vue项目中,配置多个接口请求基准路径url地址
vue项目中,配置多个接口请求基准路径url地址【需求】——一个前端项目需要搭配两个服务端接口一、解决方案1.1 描述接口context-path后端的两个接口服务请求前缀,如下:前缀1: /mini-rest前缀2: /1.2 vue.config.js配置devServer: { port: 8005, proxy: { // 第一台服务器配置 '/mini-rest': { target: 'http://localhost:8085',原创 2021-06-11 10:31:44 · 13845 阅读 · 4 评论 -
配置项目(一)——vue.config.js
配置项目——vue.config.js第一步:查看接口文档的字段和端口号第二步:在vue.config.js中,proxy里面定义自定义名字/devStatusApi、target地址、pathRewrite同名字第三步:在文件src/api/serviceConfig.js中,配置和导出devStatusApilet devStatusApi,if (process.env.NODE_ENV === 'development'){ devStatusApi = '/devStatusA原创 2021-06-08 09:58:53 · 1106 阅读 · 0 评论 -
我的(四)04-axios拦截器与路由权限验证之间是什么关系
axios拦截器与路由权限验证之间是什么关系路由权限拦截用户的操作行为,如果已经登录允许访问相关组件,否则跳转到登录页如果组件显示时,需要获取接口数据,也必须添加token请求头,才有权限获取接口数据,那么可以通过axios的拦截器统一添加接口请求时携带的token...原创 2021-05-29 02:57:21 · 128 阅读 · 0 评论 -
列表找房(十)01-房源列表数据-控制数据分页——获取接口数据的方法写法 & 浏览器展示接口数据
房源列表数据-控制数据分页——获取接口数据的方法写法 & 浏览器展示接口数据控制数据分页添加分页相关参数// 获取 Filter 组件中组装好的筛选条件数据loadData = async (filters) => { // 调用后台接口 const { value } = await getCurrentCity() const res = await axios.get('/houses', { params: { ...filters,原创 2021-05-23 12:02:00 · 137 阅读 · 0 评论 -
vue.config.js文件——配置参考
vue.config.js文件——配置参考// vue.config.js文件详解module.exports = { //本地验证接口时用 //—————————————————-------------------------------------------- runtimeCompiler: true, //是否使用包含运行时编译器的Vue内核版本 lintOnSave: false, //publicPath: '/dist/', //原创 2021-05-04 19:20:35 · 389 阅读 · 0 评论 -
node+express模拟数据(三)04.03——server配置后端接口数据-demo.json格式
node+express模拟数据(三)04.03——server配置后端接口数据-demo.json格式1、demo数据在server/index.js同层级,新建demo.json文件{ "message": "成功", "code": 200, "result": { "id": "uOcno5Q0c2XpNN5LtgzKZ7g31EJb9ni6", "class_id": 41, "title": "示例456", "sco原创 2021-04-28 16:10:33 · 116 阅读 · 0 评论 -
node+express模拟数据(三)04.02——server配置后端接口数据-data.js格式
node+express模拟数据(三)04.02——server配置后端接口数据-data.js格式1、data数据在server/index.js同层级,新建data.js文件// 范本详情const express = require('express');const router = express.Router();router.get('/detail', (req, res) => { res.json( // 示例一 { "message"原创 2021-04-28 16:08:46 · 203 阅读 · 0 评论