【信贷后台管理系统之axios的二次封装(四)】

文章目录

  • 一、axios的二次封装
  • 二、配置后端接口地址
  • 三、登录接口api联调
  • 四、贷款申请接口api编写联调


一、axios的二次封装

示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。
src下新建utils,新建request.js用来封装axios
控制台安装axios依赖
在这里插入图片描述
在request.js文件里引入axios,router
requeset.js文件代码如下:

import axios from 'axios'

import router from '@/router'

import { Notification,Message} from "element-ui";

const requset = axios.create(
    {
        // 添加api前缀
        baseURL:'/api',
        // 请求过期时间
        timeout:5000
    }
)

// 请求拦截器
requset.interceptors.request.use(config=>{
    // 给header添加token
    let token = localStorage.getItem('token')
    if(token){
        config.headers.token = token
    }
    return config
})

// 响应拦截器
requset.interceptors.response.use(
    response=>{
        // 后端状态码20000表示成功
        if(response?.data?.code === 20000){
            // 后端返回的结构没有统一,兼容处理一下
            if (typeof response?.data?.data === 'string')
                Message.success(response?.data?.data)
            if (typeof response?.data?.data?.info === 'string')
                Message.success(response?.data?.data?.info)
            return response
        }else if(response?.data?.code === 603){
            // 603表示token失效
            Notification.error({
                title:'错误',
                message:'token失效,请重新登录'
            })
            // 替换到登录页面
            let url = window.location.href.split('/')
            if (url[url.length - 1] !== 'login'){
                router.replace('/login')
            }
        }else{
            if(response?.status !== 200){
                Notification.error({
                    title:'错误',
                    message:'响应错误'
                })
            }
        }
        return response
    }
)
export default requset


二、配置后端接口地址

在vue.config.js里,设置代理服务器

三、登录接口api联调

src下新建api文件,user.js,引入封装的reques(axios的二次封装),登录后可以打印20000数据,打印出token,然后将token加上
在这里插入图片描述

user.js代码如下:

import request from "@/utils/request";

export const  doLogin=(user)=>{
    return request.post('/user/login',{
        account:user.username,
        password:user.pass
    })
}

接口api文件写好后,到LoginView.vue文件引入import {doLogin} from "@/api/user";引入后进行调用
在这里插入图片描述
LoginView.vue代码如下

<template>
  <div class="login-box">
    <div class="login-input-box">
      <h1>信贷后台管理系统</h1>
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="70px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
          <el-input  v-model="ruleForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>

</template>

<script >
import {doLogin} from "@/api/user";

export default {
  data(){
    // 密码校验,长度不小于8位且不大于20位字符,必须包含大写字母,小写字母,数字和特殊符号
    // var ISPWD =/^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*,\._\+(){}])[0-9a-zA-Z!@#$%^&*,\\._\+(){}]{8,20}$/;
    // // 密码校验
    // const validatePass = (rule, value, callback) =>{
    //   if (!ISPWD.test(this.registerForm.password)) {
    //     callback(new Error("用户密码必须包含大写字母、小写字母、数字和特殊符号"));
    //   } else {
    //     callback();
    //   }
    // }

    // const validatePass = (rule,value,callback){
    //   if(this.ruleForm.pass === '') {
    //     callback(new Error('请输入密码'))
    //   }else if(this.ruleForm.pass.length < 6){
    //     callback(new Error('密码长度不能小于6'))
    //   }else{
    //     callback();
    //   }
    // },
    return{
      ruleForm: {
        username:'',
        pass:'',
      },
      rules:{
        username: [
          {required:true,trigger:'blur',message:'请输入用户名'}
        ],
        pass:[
          {required:true,trigger:'blur',validator:this.validatePass},
        ],
      },
    };
  },

  methods:{
    // 校验规则
    validatePass(rule,value,callback){
      if (value === ""){
        callback(new Error("请输入密码"));
      }else if (value.length < 6){
        callback(new Error("密码不能小于6位数"));
      }else{
        callback();
      }

    },
    submitForm(){
      // 验证规则
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.login(this.ruleForm);
        }else{
          return false;
        }
      });
    },
    async login(form){
      console.log(form);
      let res = await doLogin(form);
      if(res.data.code === 20000){
        if(res?.data?.data?.token){
          localStorage.setItem("token",res.data?.data?.token);
        }
        this.$router.replace("/home");
}
    },
  },
};

</script>

<style lagn="scss" scoped>
.login-box{
  display: flex;   /* div可成为flex容器*/
  justify-content: center;  /*上面贴着父元素,居于中间*/
  align-items: center;  /* 左侧贴着父元素,把项目位置调整到中间 */
  height: 100vh; /* 元素撑开和屏幕一致*/
  background-image: url("../assets/login-background.jpg");
  background-size: cover;
}
.login-input-box{
  width: 650px;
  height: 320px;
  background-color: #fff;
  text-align: center;
  padding: 40px 40px 12px 12px;
}
.el-button{
  width: 600px;
}
.el-input{
  width: 600px;
  margin-bottom: 16px;
}
::v-deep .el-input_inner{
  background: #e5e5e5;
}
</style>

在request.js里的请求拦截器添加个token
在这里插入图片描述

四、贷款申请接口api编写联调

在src下新建api文件,该文件下新建loan.js,引入request
loan.js代码如下

import requset from "@/utils/request";
export const createLoan =(data)=>{
    return requset({
        url:'/loan/create',
        method:'POST',
        data
    })
}

在src文件的views的loan文件下的IndexView.vue文件里引入并使用
引入import {createLoan} from "@/api/loan";
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/511532.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

用户体验:探讨Facebook如何优化用户体验

在数字化时代&#xff0c;用户体验是社交媒体平台成功与否的关键因素之一。作为全球最大的社交媒体平台之一&#xff0c;Facebook一直在努力优化用户体验&#xff0c;从功能设计到内容呈现再到隐私保护&#xff0c;不断提升用户满意度。本文将深入探讨Facebook如何优化用户体验…

解决GNU Radio+USRP实现OFDM收发在接收端存在误码问题

文章目录 前言一、OFDM 收发流程1、OFDM 收端流程2、OFDM 收端流程 二、问题所在1、find_trigger_signal 函数解读2、general_work 函数3、问题所在 三、修改源码四、运行结果1、频谱2、传输数据测试 五、调试小技巧六、资源自取 前言 在使用 GNU Radio 时使用官方例程搭建 GN…

游戏引擎中的物理系统

一、物理对象与形状 1.1 对象 Actor 一般来说&#xff0c;游戏中的对象&#xff08;Actor&#xff09;分为以下四类&#xff1a; 静态对象 Static Actor动态对象 Dynamic Actor ---- 可能受到力/扭矩/冲量的影响检测器 TriggerKinematic Actor 运动学对象 ---- 忽略物理法则…

华为审核被拒提示: 您的应用存在(最近任务列表隐藏风险活动)的行为,不符合华为应用市场审核标准

应用审核意见&#xff1a; 您的应用存在&#xff08;最近任务列表隐藏风险活动&#xff09;的行为&#xff0c;不符合华为应用市场审核标准。 修改建议&#xff1a;请参考测试结果进行修改。 请参考《审核指南》第2.19相关审核要求&#xff1a;https://developer.huawei.com/c…

【opencv】教程代码 —videoio(2)将两个视频的每一帧逐一读取并计算其PSNR 和MSSIM...

本教程开始介绍的源代码将对每一帧执行PSNR测量&#xff0c;并且只对PSNR低于输入值的帧进行SSIM测量。为了可视化的目的&#xff0c;我们在OpenCV窗口中展示两幅图像&#xff0c;并将PSNR和MSSIM值打印到控制台。期望看到如下内容&#xff1a; video-input-psnr-ssim.cpp 将两…

JeeSite Vue3:前端开发控制实现基于身份角色的权限验证

随着技术的飞速发展&#xff0c;前端开发技术日新月异。在这个背景下&#xff0c;JeeSite Vue3 作为一个基于 Vue3、Vite、Ant-Design-Vue、TypeScript 和 Vue Vben Admin 的前端框架&#xff0c;引起了广泛关注。它凭借其先进的技术栈和丰富的功能模块&#xff0c;为初学者和团…

IP代理检测:判断IP质量优劣要注意什么?

做跨境电商的用户们往往对IP代理这个词都不会感到陌生&#xff0c;那么如何去评判IP的优劣势以及再选择IP时需要注意什么呢&#xff1f; 首先要知道的是IP代理检测是确保网络安全、提高网络访问效率以及满足特定需求的重要步骤。在判断IP代理质量优劣时&#xff0c;有几个关键…

使用阿里云试用Elasticsearch学习:1.1 基础入门——入门实践

阿里云试用一个月&#xff1a;https://help.aliyun.com/search/?kelastic&sceneall&page1 官网试用十五天&#xff1a;https://www.elastic.co/cn/cloud/cloud-trial-overview Elasticsearch中文文档&#xff1a;https://www.elastic.co/guide/cn/elasticsearch/guide…

剑指Offer题目笔记24(集合的组合、排序)

面试题79&#xff1a; 问题&#xff1a; ​ 输入一个不含重复数字的数据集合&#xff0c;找出它的所有子集。 解决方案&#xff1a; ​ 使用回溯法。子集就是从一个集合中选出若干元素。如果集合中包含n个元素&#xff0c;那么生成子集可以分为n步&#xff0c;每一步从集合中…

数据可视化:智慧农业发展的催化剂

数据可视化在智慧农业中发挥着不可替代的作用。随着科技的不断进步&#xff0c;农业领域也在不断探索创新&#xff0c;以提高生产效率、优化资源利用&#xff0c;从而实现可持续发展。而数据可视化技术的应用&#xff0c;则成为了实现智慧农业目标的重要途径。下面我就从可视化…

ABAP OOALV标题设置

ABAP OOALV标题设置 OOALV默认标题是SAP&#xff0c;需要我们自己创建GUI 标题 创建GUI 标题&#xff0c;写好要展示的描述 添加截图中的代码即可。 下面的ALV 报表标题修改的位置在以下代码区域。 这时候通过查询layout&#xff08;wa_layout TYPE lvc_s_layo&#xff0…

mini2440移植lvgl(v8.2)

目录 概述 1 下载源码 1.1 登录LVGL git地址 1.2 LVGL linux平台上的库文件介绍 1.3 下载代码 1.3.1 下载lvgl 1.3.2 下载lv_drivers 1.3.3 下载lv_port_linux_frame_buffer 2 配置编译环境 2.1 创建工程目录 2.2 完善工程目录下的文件 2.2.1 构建工程文件 2.2.2 匹…

Oracle常用sql命令(新手)

1、备份单张表 创建复制表结构 create table employeesbak as select * from cims.employees 如果只复制表结构&#xff0c;只需要在结尾加上 where 10 插入数据 insert into employeesbak select * from cims.employees 删除一条数据 delete from…

水泥设备如何实现物联网远程监控?

水泥设备如何实现物联网远程监控&#xff1f; 在当今的工业4.0时代&#xff0c;水泥行业正在经历一场深度的技术革新&#xff0c;其中构建智慧工厂并采用物联网远程监控解决方案成为了提升生产效率、保障产品质量、实现节能减排的关键路径。该方案通过集成先进的信息技术、物联…

list使用与模拟实现

目录 list使用 reverse sort unique splice list模拟实现 类与成员函数声明 节点类型的定义 非const迭代器的实现 list成员函数 构造函数 尾插 头插 头删 尾删 任意位置插入 任意位置删除 清空数据 析构函数 拷贝构造函数 赋值重载函数 const迭代器的设计 …

【PostgreSQL】用pgAdmin轻松管理PostgreSQL

pgAdmin 是一个功能强大的开源Web界面工具&#xff0c;专为管理和维护PostgreSQL数据库而设计。它提供了一个直观的图形界面&#xff0c;使得用户能够轻松地执行复杂的数据库操作&#xff0c;如查询、更新、导入/导出数据以及管理数据库对象等。pgAdmin 支持几乎所有的PostgreS…

EasyExcel 模板导出excel、合并单元格及单元格样式设置。 Freemarker导出word 合并单元格

xls文件&#xff1a; 后端代码&#xff1a; InputStream filePath this.getClass().getClassLoader().getResourceAsStream(templateFile);// 根据模板文件生成目标文件ExcelWriter excelWriter EasyExcel.write(orgInfo.getFilename()).excelType(ExcelTypeEnum.XLS).withTe…

redis 数据库的安装及使用方法

目录 一 关系数据库与非关系型数据库 &#xff08;一&#xff09;关系型数据库 1&#xff0c;关系型数据库是什么 2&#xff0c;主流的关系型数据库有哪些 3&#xff0c;关系型数据库注意事项 &#xff08;二&#xff09;非关系型数据库 1&#xff0c;非关系型数据库是…

37.HarmonyOS鸿蒙系统 App(ArkUI) 创建第一个应用程序hello world

HarmonyOS App(ArkUI) 创建第一个应用程序helloworld 线性布局 1.鸿蒙应用程序开发app_hap开发环境搭建 3.DevEco Studio安装鸿蒙手机app本地模拟器 打开DevEco Studio,点击文件-》新建 双击打开index.ets 复制如下代码&#xff1a; import FaultLogger from ohos.faultL…

鸿蒙OS元服务开发说明:【WebGL网页图形库开发接口】

一、场景介绍 WebGL主要帮助开发者在前端开发中完成图形图像的相关处理&#xff0c;比如绘制彩色图形等。目前该功能仅支持使用兼容JS的类Web开发范式开发。 二、接口说明 表1 WebGL主要接口列表 鸿蒙OS开发更多内容↓点击HarmonyOS与OpenHarmony技术鸿蒙技术文档开发知识更…