一、element文件：

• shop\src\view\Login.vue
• shop\src\network\request.js
• shop\src\network\index.js

1、Login.vue文件代码

<template>
    <div class="container">
        <div style="text-align: center">
            <!--<img src="@/assets/logo.jpg" alt="logo" />-->
            <h3>后台管理</h3>
        </div>
        <div class="main">
            <!-- label-width="auto" 导致ElementPlusError: [ElForm] unexpected width 0 -->
            <el-form :model="form" size="large">
                <el-form-item prop="account">
                    <el-input v-model="form.account" name="account" class="w-50 m-2" placeholder="请输入账号">
                        <template #prefix>
                            <el-icon class="el-input__icon" style="color: #1890ff"><Avatar /></el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="form.password" name="password" type="password" class="w-50 m-2" placeholder="请输入密码" show-password>
                        <template #prefix>
                            <el-icon class="el-input__icon" style="color: #1890ff"><Lock /></el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="remember">
                    <el-checkbox v-model="form.remember" label="1" size="large">保存账密</el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" style="width: 100%" @click="onSubmit()">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<style>
.container {
    position: relative;
    width: 100%;
    min-height: 100%;
    padding: 110px 0 144px;
    background-repeat: no-repeat;
    background-position: center 110px;
    background-size: 100%;
}
.main {
    width: 368px;
    min-width: 260px;
    margin: 50px auto;
}
.el-icon {
    color: #359eff;
}
</style>
<script>
import { reactive } from "vue";
//import { request } from "../network/request.js";
import { login } from "../network/index.js";
export default {
    setup() {
        const form = reactive({
            account: "428188207@qq.com",
            password: "123456",
            remember: true,
        });
        const onSubmit = ()=>{
            login({
                account : form.account,
                password : form.password,
            }).then(res =>{
                alert(res.data.msg);
                if(res.data.code == 0){
                    // 跳转到新页面
                }
            })
        }
        return {
            form,
            onSubmit
        };
    }
};
</script>

2、request.js文件代码

import axios from "axios";
export function request(config){
    const create = axios.create({
        baseURL : "http://tp.io/index.php/admin"
    });
    // 请求拦截
    create.interceptors.request.use(
        (config)=>{
            // config 里面的数据进行判断
            config.method = "POST";
            return config;
        },
        (err)=>{
            console.log(err);
        }
    );
    // 响应拦截
    create.interceptors.response.use(
        (res)=>{
            // res是接口的返回值
            return res;
        },
        (err)=>{
            console.log(err);
        }
    );
    return create(config);

3、index.js文件代码

import { request } from "./request.js";
export function login(data){
    return request ({
        url : "Login/index",
        data
    })
}

二、TP文件

• tp6\app\admin\controller\Login.php

1、Login.php文件代码

<?php
namespace app\admin\controller;
use think\facade\Db;
class Login
{
    public function index()
    {
        // 跨域请求
        header("Access-Control-Allow-Origin:*");
        // 一个接口有3段
        // 1、获取传值的数据，并且检查这些信息(非必须)
        // 2、通过传值进行数据查询，并处理这些数据（非必须）,可以自己组装数据
        // 3、返回查询的数据结果（必须）
        $account = input('post.account');
        $password = input('post.password');
        $user = Db::table('xpcms_abc')->where('username', $account)->find();
        //print_r($user);
        if(empty($user)){
            echo json_encode(['code'=>1, 'msg'=>'账号不存在']);
            exit;
        }
        if($user['password'] != $password){
            echo json_encode(['code'=>1, 'msg'=>'密码错误']);
            exit;
        }
        echo json_encode(['code'=>0,'msg'=>'成功','data'=>$user]);
    }
}

3、登录图：

4、注意点：

1、跨域请求问题：
a. 在源登录文件添加： header("Access-Control-Allow-Origin：*");
b. 在middleware.php文件添加：
    \think\middleware\AllowCrossDomain::class
2、TP的数据库文件需修改默认参数
3、TP修改错误信息显示： tp6\config\app.php
    // 显示错误信息
    'show_error_msg'   => true,

批改老师：PHPz

批改状态：合格

老师批语：