位置: IT常识 - 正文

前端发起请求,后端响应请求的整个过程(前端发起请求怎么设置)

编辑:rootadmin
前端发起请求,后端响应请求的整个过程 文章目录前端注册页面axios 请求方法URL 路径配置自定义 axios方法封装后端创建服务器模块接口方法模块连接数据库

推荐整理分享前端发起请求,后端响应请求的整个过程(前端发起请求怎么设置),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:前端发起请求,前端发起请求怎么设置,前端发起请求 后端 执行完通知,前端发起请求很久才相应怎么回事,前端发起请求,控制层业务层和数据层的流程,前端发起请求怎么到后端的mvc,前端发起请求的方式,前端发起请求,内容如对您有帮助,希望把文章链接给更多的朋友!

本文分为:前端、后端两部分讲诉。以下是前端发送请求到服务器,服务器响应前端,的整个过程的图解:

前端

前端主要是发起请求,本文使用自定义的axios请求方法,分为注册页面模块、axios 请求方法模块两部分。

前端运行地址: http://localhost:8080/

注册页面

该页面主要是通过点击提交按钮,触发点击事件,发起注册请求。

目标端口是:http://localhost:3000/api/login,协议、域名、端口号之中,存在端口号与前端运行地址不一样,满足跨域请求的条件。后端部分会讲到:如何解决跨域问题。

<el-button type="primary" @click="submitForm('loginForm')">提交</el-button>

点击提交,触发并传递给submitForm方法参数loginForm。其中,loginForm数据形式是

loginForm:{ username:"", pass:"",}

第 7 行,submitForm发起请求,调用自定义的axios方法:api.login(){}

import api from "@/api"submitForm(formName) { this.$refs[formName].validate((valid)=> { if(valid){ if(this.currentIndex==='login'){ api.login(this.loginForm).then(res=>{ // 用户登陆成功 if(res.data.status === 200){ //用户信息存储到 vuex 和 localstorage this.setUser(res.data) localStorage.setItem('hp',JSON.stringify(res.data)) this.$notify({ title: '登录成功', type: 'success' }); // 用户登陆成功跳转到home页面 this.$router.push('/') }else{ this.$notify.error({ title: '登录失败', message: '请重新登录' }); } }) } if(this.currentIndex==='register'){ api.register(this.registerForm).then(res =>{ console.log(res) if(res.data.status === 200){ this.$notify({ title: '注册成功', type: 'success' }); } }) } }else{ return ; } })}axios 请求方法前端发起请求,后端响应请求的整个过程(前端发起请求怎么设置)

为了请求方法的应用性更强,选择自定义请求的方式编写封装请求。

考虑到模块开发、代码可读性的好处,将请求方法封装模块分为路径配置、自定义 axios、API封装三部分。

URL 路径配置

每次请求都使用以下预定义的路径,该文件向外导出base对象

const base = { baseUrl: "http://localhost:3000", register: "/api/register",//用户的接口 login: "/api/login", selectTbItemAllByPage: '/api/backend/item/selectTbItemAllByPage',//商品列表请求路径 total: "/api/total",//商品总条数 search: "/api/search" //商品 模糊查询}export default base自定义 axios

自定义axios 易用、简洁且高效的http库,对发起的axios请求和响应进行拦截

// /api/utils/request.js 文件import axios from "axios// 引入qs模块,用来序列化post类型的数据import qs from 'qs'import router from "@/router"//主要步骤:三步// 1.创建一个axios实例// 2.拦截器--请求拦截// 3.拦截器--响应拦截// 1.创建一个axios实例const instance = axios.create({ timeout: 5000, //超时处理,超过时间告诉用户超时 // baseURL: "http://localhost:3000",})instance.all = axios.all;instance.spread = axios.spread// 设置post的请求头instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';// interceptors 拦截器// 2.请求拦截 做一个逻辑后再把请求发送,可以用于配置公用的逻辑,就不用每个请求都配一遍。instance.interceptors.request.use( // 请求拦截配置 // 拦截成功,返回非promise实例对象config config => { if (config.method === 'post') { config.data = qs.stringify(config.data); } return config; // 判断token是否存在,存在就添加到请求头上 // const token = store.state.loginModule.user.token; // if(token){ // config.headers.authorization = store.state.loginModule.user.token; // } }, // 拦截失败时,返回promise error => Promise.reject(error))const toLogin = () => { router.push("/login")}// errorHandle打印失败状态码对应的 描述和路由去向const errorHandle = (status, info) => { switch (status) { case 400: console.log("服务器收到客户端通过PUT或者POST请求提交的表示,表示的格式正确,但服务器不懂它什么意思"); toLogin(); break; case 401: console.log("客户端试图对一个受保护的资源进行操作,却又没有提供正确的认证证书"); toLogin(); break; case 403: console.log("客户端请求的结构正确,但是服务器不想处理它"); toLogin(); break; case 404: console.log("资源被围定义(网络请求地址错误)"); break; case 500: console.log("执行请求处理代码时遇到了异常,它们就发送此响应代码"); break; case 503: console.log("最可能的原因是资源不足:服务器突然收到太多请求,以至于无法全部处理"); break; default: console.log(info); break; }}// 3.interceptors拦截器配置response响应拦截instance.interceptors.response.use( // 成功时 response => response.status === 200 ? Promise.resolve(response) : Promise.reject(response), // 失败时 error => { const { response } = error; if (response) { errorHandle(response.status, response.data); return Promise.reject(response); } else { console.log("请求被中断"); } })// 封装get请求export function get(url, params) { return new Promise((resolve, reject) => { instance.get(url, params).then(res => { //请求回调成功 console.log('封装这里,', params) resolve(res.data); }).catch(err => { reject(err.data); }) })}// 封装post请求export function post(url, params) { return new Promise((resolve, reject) => { instance.post(url, params).then(res => { //请求回调成功 resolve(res.data) }).catch(err => { reject(err.data) }) })}export default instance方法封装// api/index.js 文件// 入口文件// 导入自定义ajax封装库axios: myaxios import myaxios from "@/api/utils/request"// 导入自定义路径配置,模块化开发 简化url import base from "./base"// 定义前端的发送请求方法 const api = { // 注册请求 register(params) { // 调用自定义asiox(myaxios)封装的post方法 return myaxios.post(base.baseUrl + base.register, params) } }}// 定义的请求方法全部导出export default api;后端

本文采用:node.js + express+MySQL,创建web 服务器,构建后端。后端编写分为服务器模块、接口模块、连接数据库模块三部分,都是server文件夹下的 js 文件。

后端运行地址:http://127.0.0.1:3000/

创建服务器模块

因此,需要完成获取数据请求必须解决跨域问题,跨域问题可以在前端或者后端解决。本文采取后端解决,使用 CORS。同源安全策略 默认阻止“跨域”获取资源。但是 CORS 给了 web 服务器这样的权限,即服务器可以选择,允许跨域请求访问到它们的资源。

//接口服务器 server/index.js文件// 1.导入expressconst express = require("express")//跨域请求处理 后台处理const cors = require("cors")//post传参问题const bodyParser = require("body-parser")// 导入自定义路由const router = require("./router")// 2.创建web服务器const app = express()// 注册中间件app.use(cors());// app.use(express.json());app.use(bodyParser.urlencoded({ extended: false }))//路由访问前缀app.use('/api', router)// 3.启动服务器app.listen(3000, () => { console.log('express server running at http://127.0.0.1')})

其中,web服务器服务器对象 app,通过导入接口方法模块,并使用app.use('/api', router)实现接口方法应用。

接口方法模块

注册的步骤:主要是实现服务器获取请求体的数据,然后将数据插入数据库,最后给客户端响应。

// server/router.js文件// 设置路由,定义对应post,URL的处理函数const express = require("express")// 创建路由对象const router = express.Router();//导入数据库配置对象const sqlClient = require('./dbconfig')//导入JWT生成tokenconst JWT = require("jsonwebtoken")//导入JWT解密const expressJWT = require("express-jwt")// 请求post和url=localhost:3000/api/register 的注册路由const url = require("url");const { send } = require("process");router.post("/register", (req, res) => { //接收请求对象携带的数据 const { username, pass, email } = req.body; //sqlClient实现连接数据库,并将用户数据插入数据库 并回调函数响应数据 sqlClient("insert into user values(null,?,?,?)", [username, pass, email], result => { //插入成功 并响应对象数据给客户端 if (result.affectedRows > 0) { res.send({ status: 200, msg: "注册成功" }) } else { res.send({ statu: 401, msg: "注册失败" }) } })})连接数据库

只需要导入mysql库,即可以实现数据库连接,并向外导出操作数据库的方法对象,该函数返回一个操作结果。

// server/dbconfig.js文件const mysql = require("mysql")//定义连接对象const client = mysql.createConnection({ host: "localhost", user: "root", password: "root", database: "vue_mall"})//定义操作数据库的方法,参数为sql语句,数组数据,回调函数const sqlClient = (sql, arr, callback) => { client.query(sql, arr, (error, result) => { if (error) { //发生错误,返回错误信息 console.log(error) return } //成功,则调用回调函数返回操作的结果 callback(result) })}module.exports = sqlClient

使用 mysql 对象的createConnection方法创建连接数据库对象 client,然后 定义一个sqlClient对象,其中 sqlClient 需要参数sql语句,数组数据,便会调用回调函数,并返回sql语句和数据操作数据库的结果。

本文链接地址:https://www.jiuchutong.com/zhishi/297663.html 转载请保留说明!

上一篇:路径规划 | 图解A*、Dijkstra、GBFS算法的异同(附C++/Python/Matlab仿真)(路径规划是什么意思)

下一篇:Squarespace 和 WordPress 的区别

  • 淘宝店如何迅速提高信誉(淘宝店怎么快速提升销量)

    淘宝店如何迅速提高信誉(淘宝店怎么快速提升销量)

  • 职场中,高情商是怎样炼成的?(职场中高情商怎么说话)

    职场中,高情商是怎样炼成的?(职场中高情商怎么说话)

  • 怎么设置小艺语音唤醒(怎么设置小艺语音回答)

    怎么设置小艺语音唤醒(怎么设置小艺语音回答)

  • oppok9s是什么马达(oppok9s手机参数详情)

    oppok9s是什么马达(oppok9s手机参数详情)

  • 苹果11如何给app上锁(苹果11如何给相册设置密码锁)

    苹果11如何给app上锁(苹果11如何给相册设置密码锁)

  • word制表符怎么打出来(word制表符怎么隐藏)

    word制表符怎么打出来(word制表符怎么隐藏)

  • 全站仪dhd什么意思(全站仪中dhd是什么意思)

    全站仪dhd什么意思(全站仪中dhd是什么意思)

  • 怎么解除微信手机绑定(怎么解除微信手势密码)

    怎么解除微信手机绑定(怎么解除微信手势密码)

  • 手机内屏碎了(手机内屏碎了如何补救)

    手机内屏碎了(手机内屏碎了如何补救)

  • 淘宝保存的图片为什么相册中找不到(淘宝保存的图片怎么去水印)

    淘宝保存的图片为什么相册中找不到(淘宝保存的图片怎么去水印)

  • 抖音钻卡抖音卡怎么获得(抖音钻卡是内定的吗)

    抖音钻卡抖音卡怎么获得(抖音钻卡是内定的吗)

  • 如果要将幻灯片顺序方向改变为纵向应使用的菜单是(如果要将幻灯片的方向设置为纵向可选择什么选项)

    如果要将幻灯片顺序方向改变为纵向应使用的菜单是(如果要将幻灯片的方向设置为纵向可选择什么选项)

  • 华为手机有给联系人定位功能吗(华为手机给联系人加头像)

    华为手机有给联系人定位功能吗(华为手机给联系人加头像)

  • 苹果手机可以一边充电一边使用吗(苹果手机可以一直开低电量模式吗)

    苹果手机可以一边充电一边使用吗(苹果手机可以一直开低电量模式吗)

  • 抖音怎么给别人点赞(抖音怎么给别人发红包)

    抖音怎么给别人点赞(抖音怎么给别人发红包)

  • 在计算机中文件是储存在哪里(在计算机中文件标识中的路径是指)

    在计算机中文件是储存在哪里(在计算机中文件标识中的路径是指)

  • 苹果6s plus摄像头模糊抖动什么原因(苹果6splus摄像头拍照模糊是怎么回事)

    苹果6s plus摄像头模糊抖动什么原因(苹果6splus摄像头拍照模糊是怎么回事)

  • 苹果手机为什么系统占那么多内存(苹果手机为什么没信号无服务)

    苹果手机为什么系统占那么多内存(苹果手机为什么没信号无服务)

  • 小爱音响一定要插电吗(小爱音响一定要插电源吗)

    小爱音响一定要插电吗(小爱音响一定要插电源吗)

  • OPPO k5怎么关闭开发者选项(oppok5怎么关闭hd卡功能)

    OPPO k5怎么关闭开发者选项(oppok5怎么关闭hd卡功能)

  • 唯品会退货能撤销几次(唯品会退货撤销之后还能退吗)

    唯品会退货能撤销几次(唯品会退货撤销之后还能退吗)

  • 什么是uwb(什么是UWB技术)

    什么是uwb(什么是UWB技术)

  • 哈特谢普苏特女王神庙鸟瞰图,埃及卢克索古城 (© Ratnakorn Piyasirisorost/Moment/Getty Images)(哈特谢普苏特女王享殿)

    哈特谢普苏特女王神庙鸟瞰图,埃及卢克索古城 (© Ratnakorn Piyasirisorost/Moment/Getty Images)(哈特谢普苏特女王享殿)

  • 占有统治地位的Transformer究竟是什么(占统治地位的英文短语)

    占有统治地位的Transformer究竟是什么(占统治地位的英文短语)

  • 基金份额股权转让
  • 房地产公司预分红犯法吗
  • 企业所得税费用税率
  • 固定资产造成的损失可以税前扣除吗
  • 手工现金日记账填写范本图片
  • 非货币性资产交换准则
  • 所得税预缴申报表中营业成本怎么计算
  • 会计凭证填制要求有哪些
  • 原始凭证怎么做账
  • 收到货款未开发票怎么做分录
  • 税控减免税结转怎么操作
  • 购进材料无发票会计分录
  • 预收房款发票开具需要注意哪些?
  • 企业所得税税收优惠方式有哪些
  • 教育费附加计算公式
  • 在建工程完工后如何转为固定资产
  • 是否跨期
  • 未抵扣完的进项税额可以跨年抵扣吗
  • 财产行为税税种
  • 房地产企业人防工程计入什么科目
  • 职工社保调整
  • vmware10怎么安装
  • php fork
  • php curl post请求
  • 最新专业版win10
  • win101903怎么查看
  • "php"
  • php解析html文件
  • ireike.exe - ireike是什么进程 有什么作用
  • 销售固定资产利润率
  • antvl7
  • 不能报销的发票可以丢掉吗
  • 日出的时候是圣诞节
  • php添加扩展
  • ping命令详解步骤
  • js let与var区别
  • 公司代买社保怎么收费
  • access微软
  • mysqldump -s
  • 怎么编制资金平衡表格
  • 所有者权益变动表反映的是什么
  • 购买仪器属于什么费用
  • 售后回购确认收入的时间
  • 税率与征收率是怎么回事
  • 社保怎么交最划算
  • 会计法中单位负责人均指法定代表人
  • 全资子公司的利润怎么记录母公司报表
  • 销售产品结转成本
  • 积分换物品是真的吗
  • 未认证的进项税发票入账
  • 损益类科目年末未结转怎么处理
  • 研发和技术服务属于什么大类
  • 事业单位实收资本如何做账
  • 出租房屋损坏赔偿
  • 房租费会计分录
  • 公司法规定股权转让需要满足什么条件
  • 律师的行业
  • 固定资产转为投资的条件
  • 企业收到待清算商户款项做什么分录
  • 银行承兑汇票如何背书转让
  • mysql的基本介绍
  • mysql配置文件优化详解
  • bios详细解释
  • xp系统怎么强制结束进程
  • rhel6安装
  • osk.exe
  • macos使用方法
  • centos7 ifcfg-lo
  • win10怎么添加游戏手柄
  • 微软强制升级
  • linux简单常用命令
  • js函数详解
  • jquery左右移动动画效果
  • python面向对象特征
  • vue 父子组件通信
  • 安卓应用 开发
  • 企业欠税补交后影响贷款吗
  • 增值税征税范围口诀
  • 纳税人接受教育
  • 网上发票分配
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设