前端CryptoJS和Java后端数据互相加解密(AES)

简介: 最近刚好在做一个简单的保险代理人运营平台,主要是为了方便个人展业,由于有些客户数据比较敏感,所以在用户登录时准备对登录密码进行一波加密后再传输。

目录

一、序言

二、关于前端CryptoJS

1、CryptoJS简单介绍

2、加密和填充模式选择

3、前端AES加解密示例

(1) cryptoutils工具类

(2) 测试用例

(3) 加解密后输出内容说明

三、Java后端AES加解密

1、Java中支持的加密模式和填充说明

2、工具类CryptoUtils

3、测试用例

一、序言


最近刚好在做一个简单的保险代理人运营平台,主要是为了方便个人展业,由于有些客户数据比较敏感,所以在用户登录时准备对登录密码进行一波加密后再传输。


这里我准备用AES对称加密算法对数据进行加密传输,经过调研后前端加解密相关准备用CryptoJS,后端加解密工具类根据JDK1.8官方文档自己来实现。

二、关于前端CryptoJS


1、CryptoJS简单介绍

CryptoJS是标准安全加密算法的JavaScript实现,运行速度快,接口简单,见名知意。文档说明可参考:CryptoJS文档说明。


CryptoJS的实现主要有哈希算法,HMAC、加密算法、以及常用编解码算法。

哈希算法,如MD5、SHA-1、SHA-2等。

加密算法,如AES、DES等。

编解码算法,如Base64、Hex16等。

11.png


2、加密和填充模式选择

下图是CryptoJS支持的加密模式和填充模式,CryptoJS默认的加密模式为CBC,填充模式为Pkcs7。

12.png

常用的加密模式有CBC和ECB,由于CBC安全性更高,所以我们还是选用CBC和Pkcs7的组合。

3、前端AES加解密示例


(1) cryptoutils工具类

这里我封装了一个CryptoJS工具类

import CryptoJS from 'crypto-js'
/**
 * AES加密
 * @param plainText 明文
 * @param keyInBase64Str base64编码后的key
 * @param ivInBase64Str base64编码后的初始化向量(只有CBC模式下才支持)
 * @return base64编码后的密文
 */
export function encryptByAES(plainText, keyInBase64Str, ivInBase64Str) {
  let key = CryptoJS.enc.Base64.parse(keyInBase64Str)
  let iv = CryptoJS.enc.Base64.parse(ivInBase64Str)
  let encrypted = CryptoJS.AES.encrypt(plainText, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  })
  // 这里的encrypted不是字符串,而是一个CipherParams对象
  return encrypted.ciphertext.toString(CryptoJS.enc.Base64)
}
/**
 * AES解密
 * @param cipherText 密文
 * @param keyInBase64Str base64编码后的key
 * @param ivInBase64Str base64编码后的初始化向量(只有CBC模式下才支持)
 * @return 明文
 */
export function decryptByAES(cipherText, keyInBase64Str, ivInBase64Str) {
  let key = CryptoJS.enc.Base64.parse(keyInBase64Str)
  let iv = CryptoJS.enc.Base64.parse(ivInBase64Str)
  // 返回的是一个Word Array Object,其实就是Java里的字节数组
  let decrypted = CryptoJS.AES.decrypt(cipherText, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  })
  return decrypted.toString(CryptoJS.enc.Utf8)
}

(2) 测试用例

let secret = 'sQPoC/1do9BZMkg8I5c09A=='
let cipherText = encryptByAES('Hello', secret, secret)
let plainText = decryptByAES(cipherText, secret, secret)
console.log(`Hello加密后的密文为:${cipherText}`)
console.log(`解密后的内容为:${plainText}`)

控制台输出内容如下:

Hello加密后的密文为:3IDpt0VzxmAv10qvQRubFQ==

解密后的内容为:Hello

(3) 加解密后输出内容说明

13.png

根据官方文档,解密后的明文是一个WordArray对象,也就是我们所说的Java中的字节数组,该对象有一个toString方法可以转换成16进制、Base64、UTF8等字符串。


加密后的密文也不是字符串,而是一个CipherParams对象,其中的ciphertext属性也是一个 WordArray对象。


三、Java后端AES加解密


1、Java中支持的加密模式和填充说明

前面我们前端AES加密模式用的是CBC,填充模式时是PKCS7。


现在我们先来看看Java中支持的加密模式和填充,在Java中这些被称为transformation,具体支持哪些transformation,请参考:JDK8中加密算法实现要求。


14.png

根据上图,我们只要算法、加密模式和填充模式和前端保持一致就行了,这里我们选用的transformationAES/CBC/PKCS5Padding (128)

备注:前端CryptoJS的填充模式为PKCS7,而Java中的填充模式为PKCS5,但这里并不会有啥影响。

2、工具类CryptoUtils

这里我自己封装了一个工具类,支持AES、DES、RSA、数字签名与校验等。

/**
 * 支持AES、DES、RSA加密、数字签名以及生成对称密钥和非对称密钥对
 */
public class CryptoUtils {
  private static final Charset DEFAULT_CHARSET = StandardCharsets.UTF_8;
  private static final Encoder BASE64_ENCODER = Base64.getEncoder();
  private static final Decoder BASE64_DECODER = Base64.getDecoder();
  private static final Map<Algorithm, KeyFactory> KEY_FACTORY_CACHE = new ConcurrentHashMap<>();
  private static final Map<Algorithm, Cipher> CIPHER_CACHE = new HashMap<>();
  /**
   * 生成对称密钥,目前支持的算法有AES、DES
   * @param algorithm
   * @return
   * @throws NoSuchAlgorithmException
   */
  public static String generateSymmetricKey(Algorithm algorithm) throws NoSuchAlgorithmException {
    KeyGenerator generator = KeyGenerator.getInstance(algorithm.getName());
    generator.init(algorithm.getKeySize());
    SecretKey secretKey = generator.generateKey();
    return BASE64_ENCODER.encodeToString(secretKey.getEncoded());
  }
  /**
   * 生成非对称密钥对,目前支持的算法有RSA、DSA
   * @param algorithm
   * @return
   * @throws NoSuchAlgorithmException
   */
  public static AsymmetricKeyPair generateAsymmetricKeyPair(Algorithm algorithm) throws NoSuchAlgorithmException {
    KeyPairGenerator generator = KeyPairGenerator.getInstance(algorithm.getName());
    generator.initialize(algorithm.getKeySize());
    KeyPair keyPair = generator.generateKeyPair();
    String publicKey = BASE64_ENCODER.encodeToString(keyPair.getPublic().getEncoded());
    String privateKey = BASE64_ENCODER.encodeToString(keyPair.getPrivate().getEncoded());
    return new AsymmetricKeyPair(publicKey, privateKey);
  }
  public static String encryptByRSA(String publicKeyText, String plainText) throws Exception {
    return encryptAsymmetrically(publicKeyText, plainText, Algorithm.RSA_ECB_PKCS1);
  }
  public static String decryptByRSA(String privateKeyText, String ciphertext) throws Exception {
    return decryptAsymmetrically(privateKeyText, ciphertext, Algorithm.RSA_ECB_PKCS1);
  }
  /**
   * SHA1签名算法和DSA加密算法结合使用生成数字签名
   * @param privateKeyText
   * @param msg
   * @return 数字签名
   * @throws Exception
   */
  public static String signBySHA1WithDSA(String privateKeyText, String msg) throws Exception {
    return doSign(privateKeyText, msg, Algorithm.DSA, Algorithm.SHA1WithDSA);
  }
  /**
   * SHA1签名算法和RSA加密算法结合使用生成数字签名
   * @param privateKeyText 私钥
   * @param msg 待加签内容
   * @return 数字签名
   * @throws Exception
   */
  public static String signBySHA1WithRSA(String privateKeyText, String msg) throws Exception {
    return doSign(privateKeyText, msg, Algorithm.RSA_ECB_PKCS1, Algorithm.SHA1WithRSA);
  }
  /**
   * SHA256签名算法和RSA加密算法结合使用生成数字签名
   * @param privateKeyText 私钥
   * @param msg 待加签内容
   * @return 数字签名
   * @throws Exception
   */
  public static String signBySHA256WithRSA(String privateKeyText, String msg) throws Exception {
    return doSign(privateKeyText, msg, Algorithm.RSA_ECB_PKCS1, Algorithm.SHA256WithRSA);
  }
  /**
   * SHA1签名算法和DSA加密算法检验数字签名
   * @param publicKeyText 公钥
   * @param msg 待验签内容
   * @param signatureText 数字
   * @return 检验是否成功
   * @throws Exception
   */
  public static boolean verifyBySHA1WithDSA(String publicKeyText, String msg, String signatureText) throws Exception {
    return doVerify(publicKeyText, msg, signatureText, Algorithm.DSA, Algorithm.SHA1WithDSA);
  }
  /**
   * SHA1签名算法和RSA加密算法检验数字签名
   * @param publicKeyText 公钥
   * @param msg 待验签内容
   * @param signatureText 签名
   * @return 校验是否成功
   * @throws Exception
   */
  public static boolean verifyBySHA1WithRSA(String publicKeyText, String msg, String signatureText) throws Exception {
    return doVerify(publicKeyText, msg, signatureText, Algorithm.RSA_ECB_PKCS1, Algorithm.SHA1WithRSA);
  }
  /**
   * SHA256签名算法和RSA加密算法检验数字签名
   * @param publicKeyText 公钥
   * @param msg 待验签内容
   * @param signatureText 签名
   * @return 校验是否成功
   * @throws Exception
   */
  public static boolean verifyBySHA256WithRSA(String publicKeyText, String msg, String signatureText) throws Exception {
    return doVerify(publicKeyText, msg, signatureText, Algorithm.RSA_ECB_PKCS1, Algorithm.SHA256WithRSA);
  }
  /**
   * 对称加密
   * @param secretKey 密钥
   * @param iv 加密向量,只有CBC模式才支持
   * @param plainText 明文
   * @param algorithm 对称加密算法,如AES、DES
   * @return
   * @throws Exception
   */
  public static String encryptSymmetrically(String secretKey, String iv, String plainText, Algorithm algorithm) throws Exception {
    SecretKey key = decodeSymmetricKey(secretKey, algorithm);
    IvParameterSpec ivParameterSpec = StringUtils.isBlank(iv) ? null : decodeIv(iv);
    byte[] plainTextInBytes = plainText.getBytes(DEFAULT_CHARSET);
    byte[] ciphertextInBytes = transform(algorithm, Cipher.ENCRYPT_MODE, key, ivParameterSpec, plainTextInBytes);
    return BASE64_ENCODER.encodeToString(ciphertextInBytes);
  }
  /**
   * 对称解密
   * @param secretKey 密钥
   * @param iv 加密向量,只有CBC模式才支持
   * @param ciphertext 密文
   * @param algorithm 对称加密算法,如AES、DES
   * @return
   * @throws Exception
   */
  public static String decryptSymmetrically(String secretKey, String iv, String ciphertext, Algorithm algorithm) throws Exception {
    SecretKey key = decodeSymmetricKey(secretKey, algorithm);
    IvParameterSpec ivParameterSpec = StringUtils.isBlank(iv) ? null : decodeIv(iv);
    byte[] ciphertextInBytes = BASE64_DECODER.decode(ciphertext);
    byte[] plainTextInBytes = transform(algorithm, Cipher.DECRYPT_MODE, key, ivParameterSpec, ciphertextInBytes);
    return new String(plainTextInBytes, DEFAULT_CHARSET);
  }
  /**
   * 非对称加密
   * @param publicKeyText 公钥
   * @param plainText 明文
   * @param algorithm 非对称加密算法
   * @return
   * @throws Exception
   */
  public static String encryptAsymmetrically(String publicKeyText, String plainText, Algorithm algorithm) throws Exception {
    PublicKey publicKey = regeneratePublicKey(publicKeyText, algorithm);
    byte[] plainTextInBytes = plainText.getBytes(DEFAULT_CHARSET);
    byte[] ciphertextInBytes = transform(algorithm, Cipher.ENCRYPT_MODE, publicKey, plainTextInBytes);
    return BASE64_ENCODER.encodeToString(ciphertextInBytes);
  }
  /**
   * 非对称解密
   * @param privateKeyText 私钥
   * @param ciphertext 密文
   * @param algorithm 非对称加密算法
   * @return
   * @throws Exception
   */
  public static String decryptAsymmetrically(String privateKeyText, String ciphertext, Algorithm algorithm) throws Exception {
    PrivateKey privateKey = regeneratePrivateKey(privateKeyText, algorithm);
    byte[] ciphertextInBytes = BASE64_DECODER.decode(ciphertext);
    byte[] plainTextInBytes = transform(algorithm, Cipher.DECRYPT_MODE, privateKey, ciphertextInBytes);
    return new String(plainTextInBytes, DEFAULT_CHARSET);
  }
  /**
   * 生成数字签名
   * @param privateKeyText 私钥
   * @param msg 传输的数据
   * @param encryptionAlgorithm 加密算法,见Algorithm中的加密算法
   * @param signatureAlgorithm 签名算法,见Algorithm中的签名算法
   * @return 数字签名
   * @throws Exception
   */
  public static String doSign(String privateKeyText, String msg, Algorithm encryptionAlgorithm, Algorithm signatureAlgorithm)
    throws Exception {
    PrivateKey privateKey = regeneratePrivateKey(privateKeyText, encryptionAlgorithm);
    // Signature只支持签名算法
    Signature signature = Signature.getInstance(signatureAlgorithm.getName());
    signature.initSign(privateKey);
    signature.update(msg.getBytes(DEFAULT_CHARSET));
    byte[] signatureInBytes = signature.sign();
    return BASE64_ENCODER.encodeToString(signatureInBytes);
  }
  /**
   * 数字签名验证
   * @param publicKeyText 公钥
   * @param msg 传输的数据
   * @param signatureText 数字签名
   * @param encryptionAlgorithm 加密算法,见Algorithm中的加密算法
   * @param signatureAlgorithm 签名算法,见Algorithm中的签名算法
   * @return 校验是否成功
   * @throws Exception
   */
  public static boolean doVerify(String publicKeyText, String msg, String signatureText, Algorithm encryptionAlgorithm,
    Algorithm signatureAlgorithm) throws Exception {
    PublicKey publicKey = regeneratePublicKey(publicKeyText, encryptionAlgorithm);
    Signature signature = Signature.getInstance(signatureAlgorithm.getName());
    signature.initVerify(publicKey);
    signature.update(msg.getBytes(DEFAULT_CHARSET));
    return signature.verify(BASE64_DECODER.decode(signatureText));
  }
  /**
   * 将密钥进行Base64位解码,重新生成SecretKey实例
   * @param secretKey 密钥
   * @param algorithm 算法
   * @return
   */
  private static SecretKey decodeSymmetricKey(String secretKey, Algorithm algorithm) {
    byte[] key = BASE64_DECODER.decode(secretKey);
    return new SecretKeySpec(key, algorithm.getName());
  }
  private static IvParameterSpec decodeIv(String iv) {
    byte[] ivInBytes = BASE64_DECODER.decode(iv);
    return new IvParameterSpec(ivInBytes);
  }
  private static PublicKey regeneratePublicKey(String publicKeyText, Algorithm algorithm)
    throws NoSuchAlgorithmException, InvalidKeySpecException {
    byte[] keyInBytes = BASE64_DECODER.decode(publicKeyText);
    KeyFactory keyFactory = getKeyFactory(algorithm);
    // 公钥必须使用RSAPublicKeySpec或者X509EncodedKeySpec
    KeySpec publicKeySpec = new X509EncodedKeySpec(keyInBytes);
    PublicKey publicKey = keyFactory.generatePublic(publicKeySpec);
    return publicKey;
  }
  private static PrivateKey regeneratePrivateKey(String key, Algorithm algorithm) throws Exception {
    byte[] keyInBytes = BASE64_DECODER.decode(key);
    KeyFactory keyFactory = getKeyFactory(algorithm);
    // 私钥必须使用RSAPrivateCrtKeySpec或者PKCS8EncodedKeySpec
    KeySpec privateKeySpec = new PKCS8EncodedKeySpec(keyInBytes);
    PrivateKey privateKey = keyFactory.generatePrivate(privateKeySpec);
    return privateKey;
  }
  private static KeyFactory getKeyFactory(Algorithm algorithm) throws NoSuchAlgorithmException {
    KeyFactory keyFactory = KEY_FACTORY_CACHE.get(algorithm);
    if (keyFactory == null) {
      keyFactory = KeyFactory.getInstance(algorithm.getName());
      KEY_FACTORY_CACHE.put(algorithm, keyFactory);
    }
    return keyFactory;
  }
  private static byte[] transform(Algorithm algorithm, int mode, Key key, byte[] msg) throws Exception {
    return transform(algorithm, mode, key, null, msg);
  }
  private static byte[] transform(Algorithm algorithm, int mode, Key key, IvParameterSpec iv, byte[] msg) throws Exception {
    Cipher cipher = CIPHER_CACHE.get(algorithm);
    // double check,减少上下文切换
    if (cipher == null) {
      synchronized (CryptoUtils.class) {
        if ((cipher = CIPHER_CACHE.get(algorithm)) == null) {
          cipher = determineWhichCipherToUse(algorithm);
          CIPHER_CACHE.put(algorithm, cipher);
        }
        cipher.init(mode, key, iv);
        return cipher.doFinal(msg);
      }
    }
    synchronized (CryptoUtils.class) {
      cipher.init(mode, key, iv);
      return cipher.doFinal(msg);
    }
  }
  private static Cipher determineWhichCipherToUse(Algorithm algorithm) throws NoSuchAlgorithmException, NoSuchPaddingException {
    Cipher cipher;
    String transformation = algorithm.getTransformation();
    // 官方推荐的transformation使用algorithm/mode/padding组合,SunJCE使用ECB作为默认模式,使用PKCS5Padding作为默认填充
    if (StringUtils.isNotEmpty(transformation)) {
      cipher = Cipher.getInstance(transformation);
    } else {
      cipher = Cipher.getInstance(algorithm.getName());
    }
    return cipher;
  }
  /**
   * 算法分为加密算法和签名算法,更多算法实现见:<br/>
   * <a href="https://docs.oracle.com/javase/8/docs/technotes/guides/security/StandardNames.html#impl">jdk8中的标准算法</a>
   */
  @Data
  @NoArgsConstructor
  @AllArgsConstructor
  public static class Algorithm {
    /**
     * 以下为加密算法,加密算法transformation采用algorithm/mode/padding的形式
     */
    public static final Algorithm AES_ECB_PKCS5 = new Algorithm("AES", "AES/ECB/PKCS5Padding", 128);
    public static final Algorithm AES_CBC_PKCS5 = new Algorithm("AES", "AES/CBC/PKCS5Padding", 128);
    public static final Algorithm DES_ECB_PKCS5 = new Algorithm("DES", "DES/ECB/PKCS5Padding", 56);
    public static final Algorithm DES_CBC_PKCS5 = new Algorithm("DES", "DES/CBC/PKCS5Padding", 56);
    public static final Algorithm RSA_ECB_PKCS1 = new Algorithm("RSA", "RSA/ECB/PKCS1Padding", 1024);
    /**
     * 以下为签名算法
     */
    public static final Algorithm DSA = new Algorithm("DSA", 1024);
    public static final Algorithm SHA1WithDSA = new Algorithm("SHA256WithRSA", 1024);
    public static final Algorithm SHA1WithRSA = new Algorithm("SHA1WithRSA", 2048);
    public static final Algorithm SHA256WithRSA = new Algorithm("SHA256WithRSA", 2048);
    private String name;
    private String transformation;
    private int keySize;
    public Algorithm(String name, int keySize) {
      this(name, null, keySize);
    }
  }
  @Data
  @NoArgsConstructor
  @AllArgsConstructor
  public static class AsymmetricKeyPair {
    private String publicKey;
    private String privateKey;
  }
}

3、测试用例

import com.universe.crypto.CryptoUtils.Algorithm;
/**
 * @author 刘亚楼
 * @date 2022/6/12
 */
public class AESDemo {
  public static void main(String[] args) throws Exception {
    String key = CryptoUtils.generateSymmetricKey(Algorithm.AES_CBC_PKCS5);
    System.out.println("生成的key为:" + key);
    String cipherText = CryptoUtils.encryptSymmetrically(key, key, "Hello", Algorithm.AES_CBC_PKCS5);
    System.out.println("加密后的密文为:" + cipherText);
    String plainText = CryptoUtils.decryptSymmetrically(key, key, cipherText, Algorithm.AES_CBC_PKCS5);
    System.out.println("解密后的明文为:" + plainText);
  }
}

控制台输出如下:

生成的key为:sQPoC/1do9BZMkg8I5c09A==

加密后的密文为:3IDpt0VzxmAv10qvQRubFQ==

解密后的明文为:Hello

相关实践学习
在云上部署ChatGLM2-6B大模型(GPU版)
ChatGLM2-6B是由智谱AI及清华KEG实验室于2023年6月发布的中英双语对话开源大模型。通过本实验,可以学习如何配置AIGC开发环境,如何部署ChatGLM2-6B大模型。
相关文章
|
11月前
|
Java API 开发工具
【Azure Developer】Java代码实现获取Azure 资源的指标数据却报错 "invalid time interval input"
在使用 Java 调用虚拟机 API 获取指标数据时,因本地时区设置非 UTC,导致时间格式解析错误。解决方法是在代码中手动指定时区为 UTC,使用 `ZoneOffset.ofHours(0)` 并结合 `withOffsetSameInstant` 方法进行时区转换,从而避免因时区差异引发的时间格式问题。
430 4
|
12月前
|
数据采集 JSON Java
Java爬虫获取1688店铺所有商品接口数据实战指南
本文介绍如何使用Java爬虫技术高效获取1688店铺商品信息,涵盖环境搭建、API调用、签名生成及数据抓取全流程,并附完整代码示例,助力市场分析与选品决策。
|
12月前
|
数据采集 存储 前端开发
Java爬虫性能优化:多线程抓取JSP动态数据实践
Java爬虫性能优化:多线程抓取JSP动态数据实践
|
11月前
|
存储 前端开发 安全
实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
405 5
|
11月前
|
算法 Java
Java多线程编程:实现线程间数据共享机制
以上就是Java中几种主要处理多线程序列化资源以及协调各自独立运行但需相互配合以完成任务threads 的技术手段与策略。正确应用上述技术将大大增强你程序稳定性与效率同时也降低bug出现率因此深刻理解每项技术背后理论至关重要.
625 16
|
人工智能 监控 前端开发
AI工具:前端与后端的终极对决?谁将成为新时代的宠儿?
深入探讨AI工具对前端和后端开发的具体影响、各自的机遇与挑战,并分析未来开发者如何驾驭AI,实现能力跃迁。
783 0
|
存储 缓存 负载均衡
后端开发中的性能优化策略
本文将探讨几种常见的后端性能优化策略,包括代码层面的优化、数据库查询优化、缓存机制的应用以及负载均衡的实现。通过这些方法,开发者可以显著提升系统的响应速度和处理能力,从而提供更好的用户体验。
651 6
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
791 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
人工智能 Java API
后端开发必看:零代码实现存量服务改造成MCP服务
本文介绍如何通过 **Nacos** 和 **Higress** 实现存量 Spring Boot 服务的零代码改造,使其支持 MCP 协议,供 AI Agent 调用。全程无需修改业务代码,仅通过配置完成服务注册、协议转换与工具映射,显著降低改造成本,提升服务的可集成性与智能化能力。
3342 1
|
存储 消息中间件 前端开发
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践
校园圈子系统校园论坛小程序采用uni-app前端框架,支持多端运行,结合PHP后端(如ThinkPHP/Laravel),实现用户认证、社交关系管理、动态发布与实时聊天功能。前端通过组件化开发和uni.request与后端交互,后端提供RESTful API处理业务逻辑并存储数据于MySQL。同时引入Redis缓存热点数据,RabbitMQ处理异步任务,优化系统性能。核心功能包括JWT身份验证、好友系统、WebSocket实时聊天及活动管理,确保高效稳定的用户体验。
782 4
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    1274
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    582
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    444
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    442
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    560
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    738
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1437
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    319
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    1174
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    515