Cree una plataforma de compras sencilla desde cero (3)

Empiece desde cero, cree una plataforma de compra sencilla (2): https://blog.csdn.net/time_____/article/details/105408640
Código fuente del proyecto (actualización continua): https://gitee.com/DieHunter/myCode/ árbol / amo / compras

Este artículo agrega una interfaz de front-end basada en el último inicio de sesión del servidor

Antes de comenzar, podemos simplemente usar postman para probar la función del token y el inicio de sesión. Puede generar un token en el backend y solicitarlo desde el frontend.

Token de validación (éxito y fracaso)

Luego verifique el inicio de sesión del usuario (siempre que la información del usuario se agregue a la base de datos con anticipación, el proceso de adición y el cifrado no se describirán en detalle)

Una vez que la prueba es exitosa, comenzamos a configurar y escribir la parte del front-end (solo nos damos cuenta de la función, no de los altos requisitos para la interfaz)

Estructura de archivo:

Configure la carpeta config.js y cree un nuevo archivo config.js para almacenar las constantes de configuración (igual que config.js del lado del servidor)

export default class Config {
  static Agreement = "http://";
  static BaseUrl = "127.0.0.1";
  static ServerUrl = "";
  static ServerPort = ":1024";
  static Path = "/";
  static CryptoKey = "tokenkey";//加密信息关键字
  static FilePath = this.Agreement + this.BaseUrl + this.ServerPort + this.Path;
  static ServerApi = {//接口名
    token: "checkToken",
    user: {
      userLogin: "user/userLogin",
    }
  };
  static StorageName = {//本地缓存localstorage名称
    token: "token",
    userInfo: "userInfo"
  };
}

Cree un nuevo método en el archivo utils y colóquelo en el prototipo de react.component para que el componente heredado pueda llamar directamente al
almacenamiento:

import { Component } from "react";
class Utils {
  static saveStorage(key, val) {//添加缓存
    localStorage.setItem(key, JSON.stringify(val));
  }
  static getStorage(key) {//获取缓存
    try {
      return JSON.parse(localStorage.getItem(key));
    } catch (error) {}
  }
  static clearStorage(key) {//清除缓存
    try {
      localStorage.removeItem(key);
    } catch (error) {}
  }
}
Component.prototype.$utils = Utils;

axios:

import Config from "../config/config";
import Axios from "axios";
import { Component } from "react";
import { message } from "antd";
Axios.defaults.baseURL =
  Config.Agreement + Config.BaseUrl + Config.ServerPort + Config.Path;
// 添加请求拦截器
Axios.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);
// 添加响应拦截器
Axios.interceptors.response.use(
  function (response) {
    // 对响应数据做点什么
    if (response.data.result === -999) {
      //token验证失败
      return message.error(response.data.msg);
    }
    return response.data;
  },
  function (error) {
    console.log(error)
    // 对响应错误做点什么
    message.error("操作失败");
    return Promise.reject(error);
  }
);

Component.prototype.$axios = Axios;

Cripto:

import * as CryptoJS from "crypto-js";
import { Component } from "react";
import config from "../config/config";
const { CryptoKey } = config;
class CryptoTool {
  /* Crypto加密方法
   * @param {object} _data       对用户请求后端的参数进行加密
   */
  static setCrypto(_data) {
    let key = CryptoJS.enc.Utf8.parse(CryptoKey);
    let encrypted = CryptoJS.AES.encrypt(JSON.stringify(_data), key, {
      mode: CryptoJS.mode.ECB,
      padding: CryptoJS.pad.Pkcs7
    });
    return encrypted.toString();
  }
   /* Crypto解密方法
   * @param {string} _token       将秘文解密成对象形式
   */
  static getCrypto(_token) {
    let key = CryptoJS.enc.Utf8.parse(CryptoKey);
    let decrypt = CryptoJS.AES.decrypt(_token, key, {
      mode: CryptoJS.mode.ECB,
      padding: CryptoJS.pad.Pkcs7
    });
    return JSON.parse(CryptoJS.enc.Utf8.stringify(decrypt).toString());
  }
}
Component.prototype.$crypto = CryptoTool;

Agregue estas funciones en index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "./util/axios";
import "./util/utils";
import "./util/cryptoTool";

Luego agregue login.js en page / login, y después de configurar la página de inicio de sesión, introduzca la página de inicio de sesión en App.js

import React from "react";
import Login from "./page/login/login"

function App() {
  return (
    <div className="App">
      <Login></Login>
    </div>
  );
}

export default App;

Encuentre la instancia de la interfaz de inicio de sesión en el sitio web oficial de antd, copie la mayoría de ellos directamente en la interfaz de inicio de sesión, use menos para ajustar la siguiente interfaz

login.js

import React from "react";
import "./login.less";
import { Card, Form, Input, Button, Checkbox, message } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import config from "../../config/config";
const { ServerApi, StorageName } = config;
export default class Login extends React.Component {
  constructor(props) {
    super(props);
    this.checkToken(); //验证用户token是否过期
  }
  render() {
    return (
      <div className="cardBox">
        <Card title="登录">
          <Form
            name="normal_login"
            className="login-form"
            initialValues={
     
     { remember: true }}
            onFinish={this.sendData}
          >
            <Form.Item
              name="username"
              rules={[
                {
                  required: true,
                  message: "请输入用户名/邮箱",
                },
              ]}
            >
              <Input
                className="infoInput"
                prefix={<UserOutlined className="site-form-item-icon" />}
                placeholder="用户名/邮箱"
              />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[
                {
                  required: true,
                  message: "请输入密码",
                },
              ]}
            >
              <Input
                className="infoInput"
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="password"
                placeholder="密码"
              />
            </Form.Item>
            <Form.Item>
              <Form.Item name="remember" valuePropName="checked" noStyle>
                <Checkbox>3天内免密</Checkbox>
              </Form.Item>
              <a className="login-form-forgot" href="#aaa">
                忘记密码
              </a>
            </Form.Item>
            <Form.Item>
              <Button
                type="primary"
                htmlType="submit"
                className="login-form-button"
              >
                登录
              </Button>
              或者<a href="#aaa">注册</a>
            </Form.Item>
          </Form>
        </Card>
      </div>
    );
  }
  checkToken() {
    let token = this.$utils.getStorage(StorageName.token);
    if (!token) return;
    this.$axios
      .get(ServerApi.token, {
        params: { token },
      })
      .then((res) => {
        switch (res.result) {
          case 1:
            message.success(res.msg).then(() => {
              // this.props.history.push({
              //   pathname: "/admin/findshop",
              //   query: res,
              // });
            });
            break;
          default:
            // message.warning(res.msg);
            break;
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }
  sendData = (data) => {
    this.$axios
      .get(ServerApi.user.userLogin, {
        params: { crypto: this.$crypto.setCrypto(data) },
      })
      .then((res) => {
        switch (res.result) {
          case 1:
            this.$utils.saveStorage(StorageName.token, res.token);
            message.success(res.msg);
            // this.props.history.push({
            //   pathname: "/admin/findshop",
            //   query: res,
            // });
            break;
          default:
            message.warning(res.msg);
            break;
        }
      })
      .catch((err) => {
        console.log(err);
      });
  };
}

El efecto es el siguiente:

Verificación de token de usuario, función de inicio de sesión front-end + realización básica de back-end

para resumir

El orden de construcción de los proyectos de front-end y back-end puede ser diferente, y el ciclo del proyecto puede ser diferente. En este momento, debe usar la simulación de datos de front-end y back-end y solicitar herramientas de simulación de manera flexible. El front-end puede usar easymock y mockjs para generar datos falsos, y el back-end es el más simple de colocar directamente Acceso a la URL del navegador (solo para obtener), o use cartero, SoapUI y otras herramientas de prueba de interfaz

Cree una plataforma de compras sencilla desde cero (3)

Supongo que te gusta