从零开始，搭建一个简单的购物平台（三）

从零开始，搭建一个简单的购物平台（二）：https://blog.csdn.net/time_____/article/details/105408640
项目源码（持续更新）：https://gitee.com/DieHunter/myCode/tree/master/shopping

这篇文章在上次的服务端登录基础上增加前端界面

在开始前我们可以简单用postman测试一下token和登录的功能，可以先在后端生成一段token从前端请求

验证token（成功和失败）

紧接着验证一下用户登录（前提事先在数据库添加用户信息，添加过程及加密不做详细说明）

测试成功后我们开始配置编写前端部分（只实现功能，对界面要求不高）

文件结构：

配置config.js文件夹，新建config.js文件用于存放配置常量（和服务端config.js一样）

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"
  };
}

在utils文件中新建方法，将其放在react.component的原型中，使继承组件可以直接调用
storage：

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;

Crypto:

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;

在index.js中添加这些函数

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

随后在page/login中新增login.js，简单配置一下login页面后，在App.js中引入login页面

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

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

export default App;

在antd官网找到登录界面实例，直接把大部分复制到login界面，用less微调一下后实现以下界面

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);
      });
  };
}

效果如下：

用户token验证，登录功能前端+后端基本实现

总结

前端与后端的项目搭建顺序可能有所不同，项目周期可能也不同，这时需要灵活使用前后端数据模拟和请求模拟工具，前端可以使用easymock和mockjs生成假数据，而后端最简单的直接放到浏览器url访问（仅限于get），或者使用postman，SoapUI等接口测试工具

从零开始，搭建一个简单的购物平台（三）

猜你喜欢