扶贫助农管理系统--请求的封装与登录的实现

本篇文章主要是对项目整体的数据请求进行封装并且完成登录模块的实现

必备依赖的安装

使用axios对数据进行请求

npm i axios

登录时对密码进行加密，通过第三方库进行处理，这里使用的是crypto-js

pnpm i crypto-js

axios请求的封装

其中的baseUrl是我这边后端服务器的基地址，如果你有服务器的话可以替换成你自己的服务器，当然你也可以来联系我领取我的服务器。如果看到的时间比较晚的童鞋可以看看我的主页，后期会再开一个专栏进行同步服务器的开发。其中请求拦截器和响应拦截器可根据自己选择进行封装

export class ApiService {
    constructor(baseURL = BASE_URL.BASE_URL)) {
        this.instance = axios.create({
            baseURL: baseURL,
            timeout: 10000, 
            headers: { "Content-Type": "application/json" },
        });
        this.setInterceptors();
    }
    setInterceptors() {
        this.instance.interceptors.request.use(
            (config) => {
                console.log("Sending request", config);
                return config;
            },
            (error) => {
                console.error("Request Error:", error);
                return Promise.reject(error);
            }
        );

        this.instance.interceptors.response.use(
            (response) => {
                console.log("Received response", response);
                return response.data;
            },
            (error) => {
                console.error("Response Error:", error);
                return Promise.reject(error);
            }
        );
    }
}

登录功能请求的封装使用

export const LoginReq = (obj) => {
    api.instance.post(PASSAGE.LOGIN_ROUTER, obj).then((res) => {
        console.log("res", res);
        if (res.code === 200) {
            layer.msg("登录成功");
        } else {
            layer.msg("登录失败");
        }
    });
};

登录界面的ui

<div class="card-container">
        <lay-card>
            <template v-slot:title>
                <div class="title">扶贫助农管理系统</div>
            </template>
            <template v-slot:body>
                <div class="dialog">
                    <lay-form :model="model">
                        <lay-form-item label="账户" prop="username">
                            <lay-input v-model="model.username"></lay-input>
                        </lay-form-item>
                        <lay-form-item label="密码" prop="password">
                            <lay-input v-model="model.password" type="password"></lay-input>
                        </lay-form-item>
                        <lay-form-item style="text-align: center; margin-left: 30px">
                            <lay-button type="primary" @click="submit">提交</lay-button>
                            <lay-button type="default" @click="">注册</lay-button>
                        </lay-form-item>
                    </lay-form>
                </div>
            </template>
        </lay-card>
    </div>

登录界面的js逻辑

import Login from "@/api/index";
const model = reactive({});
const submit = () => {
    console.log("model", model.password);
    let obj = {
        username: model.username,
        password: CryptoJS.AES.encrypt(model.password, "secret key").toString(),
    };
    Login(obj);
};

效果图

联系我

如有需求，可扫描下方二维码添加我QQ，承接毕设和竞赛项目指导