一、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>后臺(tái)管理</h3>
        </div>
        <div class="main">
            <!-- label-width="auto" 導(dǎo)致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="請輸入賬號(hào)">
                        <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){
                    // 跳轉(zhuǎn)到新頁面
                }
            })
        }
        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 里面的數(shù)據(jù)進(jìn)行判斷
            config.method = "POST";
            return config;
        },
        (err)=>{
            console.log(err);
        }
    );
    // 響應(yīng)攔截
    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:*");
        // 一個(gè)接口有3段
        // 1、獲取傳值的數(shù)據(jù)，并且檢查這些信息(非必須)
        // 2、通過傳值進(jìn)行數(shù)據(jù)查詢，并處理這些數(shù)據(jù)（非必須）,可以自己組裝數(shù)據(jù)
        // 3、返回查詢的數(shù)據(jù)結(jié)果（必須）
        $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'=>'賬號(hào)不存在']);
            exit;
        }
        if($user['password'] != $password){
            echo json_encode(['code'=>1, 'msg'=>'密碼錯(cuò)誤']);
            exit;
        }
        echo json_encode(['code'=>0,'msg'=>'成功','data'=>$user]);
    }
}

3、登錄圖：

4、注意點(diǎn)：

1、跨域請求問題：
a. 在源登錄文件添加： header("Access-Control-Allow-Origin：*");
b. 在middleware.php文件添加：
    \think\middleware\AllowCrossDomain::class
2、TP的數(shù)據(jù)庫文件需修改默認(rèn)參數(shù)
3、TP修改錯(cuò)誤信息顯示： tp6\config\app.php
    // 顯示錯(cuò)誤信息
    'show_error_msg'   => true,

批改老師：PHPz

批改狀態(tài)：合格

老師批語：