登录页面：ele与tp6，跨域

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
一、element文件：
  • shop\src\view\Login.vue
  • shop\src\network\request.js
  • shop\src\network\index.js
1、Login.vue文件代码
  1. <template>
  2.     <div class="container">
  3.         <div style="text-align: center">
  4.             <!--<img src="@/assets/logo.jpg" alt="logo" />-->
  5.             <h3>后台管理</h3>
  6.         </div>
  7.         <div class="main">
  8.             <!-- label-width="auto" 导致ElementPlusError: [ElForm] unexpected width 0 -->
  9.             <el-form :model="form" size="large">
  10.                 <el-form-item prop="account">
  11.                     <el-input v-model="form.account" name="account" class="w-50 m-2" placeholder="请输入账号">
  12.                         <template #prefix>
  13.                             <el-icon class="el-input__icon" style="color: #1890ff"><Avatar /></el-icon>
  14.                         </template>
  15.                     </el-input>
  16.                 </el-form-item>
  17.                 <el-form-item prop="password">
  18.                     <el-input v-model="form.password" name="password" type="password" class="w-50 m-2" placeholder="请输入密码" show-password>
  19.                         <template #prefix>
  20.                             <el-icon class="el-input__icon" style="color: #1890ff"><Lock /></el-icon>
  21.                         </template>
  22.                     </el-input>
  23.                 </el-form-item>
  24.                 <el-form-item prop="remember">
  25.                     <el-checkbox v-model="form.remember" label="1" size="large">保存账密</el-checkbox>
  26.                 </el-form-item>
  27.                 <el-form-item>
  28.                     <el-button type="primary" style="width: 100%" @click="onSubmit()">登录</el-button>
  29.                 </el-form-item>
  30.             </el-form>
  31.         </div>
  32.     </div>
  34. </template>
  36. <style>
  37. .container {
  38.     position: relative;
  39.     width: 100%;
  40.     min-height: 100%;
  41.     padding: 110px 0 144px;
  42.     background-repeat: no-repeat;
  43.     background-position: center 110px;
  44.     background-size: 100%;
  45. }
  46. .main {
  47.     width: 368px;
  48.     min-width: 260px;
  49.     margin: 50px auto;
  50. }
  51. .el-icon {
  52.     color: #359eff;
  53. }
  54. </style>
  56. <script>
  57. import { reactive } from "vue";
  58. //import { request } from "../network/request.js";
  59. import { login } from "../network/index.js";
  60. export default {
  61.     setup() {
  62.         const form = reactive({
  63.             account: "428188207@qq.com",
  64.             password: "123456",
  65.             remember: true,
  66.         });
  67.         const onSubmit = ()=>{
  68.             login({
  69.                 account : form.account,
  70.                 password : form.password,
  71.             }).then(res =>{
  72.                 alert(res.data.msg);
  74.                 if(res.data.code == 0){
  75.                     // 跳转到新页面
  76.                 }
  77.             })
  78.         }
  79.         return {
  80.             form,
  81.             onSubmit
  82.         };
  83.     }
  84. };
  85. </script>
2、request.js文件代码
  1. import axios from "axios";
  3. export function request(config){
  4.     const create = axios.create({
  5.         baseURL : "http://tp.io/index.php/admin"
  6.     });
  8.     // 请求拦截
  9.     create.interceptors.request.use(
  10.         (config)=>{
  11.             // config 里面的数据进行判断
  12.             config.method = "POST";
  13.             return config;
  14.         },
  15.         (err)=>{
  16.             console.log(err);
  17.         }
  18.     );
  20.     // 响应拦截
  21.     create.interceptors.response.use(
  22.         (res)=>{
  23.             // res是接口的返回值
  24.             return res;
  25.         },
  26.         (err)=>{
  27.             console.log(err);
  28.         }
  30.     );
  32.     return create(config);
3、index.js文件代码
  1. import { request } from "./request.js";
  3. export function login(data){
  4.     return request ({
  5.         url : "Login/index",
  6.         data
  7.     })
  8. }
二、TP文件
  • tp6\app\admin\controller\Login.php
1、Login.php文件代码
  1. <?php
  2. namespace app\admin\controller;
  3. use think\facade\Db;
  5. class Login
  6. {
  7.     public function index()
  8.     {
  9.         // 跨域请求
  10.         header("Access-Control-Allow-Origin:*");
  11.         // 一个接口有3段
  12.         // 1、获取传值的数据，并且检查这些信息(非必须)
  13.         // 2、通过传值进行数据查询，并处理这些数据（非必须）,可以自己组装数据
  14.         // 3、返回查询的数据结果（必须）
  16.         $account = input('post.account');
  17.         $password = input('post.password');
  19.         $user = Db::table('xpcms_abc')->where('username', $account)->find();
  20.         //print_r($user);
  22.         if(empty($user)){
  23.             echo json_encode(['code'=>1, 'msg'=>'账号不存在']);
  24.             exit;
  25.         }
  26.         if($user['password'] != $password){
  27.             echo json_encode(['code'=>1, 'msg'=>'密码错误']);
  28.             exit;
  29.         }
  30.         echo json_encode(['code'=>0,'msg'=>'成功','data'=>$user]);
  31.     }
  32. }
3、登录图：

4、注意点：
  1. 1、跨域请求问题：
  2. a. 在源登录文件添加： header("Access-Control-Allow-Origin：*");
  3. b. 在middleware.php文件添加：
  4.     \think\middleware\AllowCrossDomain::class
  5. 2、TP的数据库文件需修改默认参数
  6. 3、TP修改错误信息显示： tp6\config\app.php
  7.     // 显示错误信息
  8.     'show_error_msg'   => true,
【文章原创作者：欧洲服务器 http://www.558idc.com/helan.html 复制请保留原URL】
更多阅读