【Java】全栈社交小程序项目-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_74899080/article/details/144192080

目录

前言

一、小程序端

1.设置data中对象中某一字段的值：

2.设置data中动态属性的值：

3.解析后端jwt

4.页面效果

二、内容管理端

1.使用Vue3+element-plus

2.页面效果

三、后端

1、后端返回前端Long型数据失真问题

2.map中获取到String类型需要转成Long类型

3.谨记

总结

前言

陆续学习了java基础和Javaweb知识，在完成跟练项目之后，最终自己写了一款小程序，以运用所学知识，本文大致介绍这个小程序项目内容和过程中遇到的问题的记录。

一、小程序端

1.设置data中对象中某一字段的值：

this.setData({
      "personInfo.birthday": e.detail.value
    })

2.设置data中动态属性的值：

bindPickerPropChange(e) {
    let { prop, iprop } = e.currentTarget.dataset
    let listProp = prop + "List"
    let index = e.detail.value;
    let dataProp = "personInfo." + prop;
    this.setData({
      [iprop]: index,
      [dataProp]: this.data[listProp][index].id
    })
  }

3.解析后端jwt

无法不操作直接携带使用cookie，为了统一改为使用jwt令牌

可以使用npm安装jwt-decode包，引入要使用的js中，并使用

//info.js
// 引入jwt-decode库
import { jwtDecode } from 'jwt-decode';

let token = wx.getStorageSync('token');
let info = jwtDecode(token);
// 得到的这个info就是解析后的json对象
console.log("info》》》》》", info)

4.页面效果

包含首页，消息，我的，信息录入页，详情页，登录页等

二、内容管理端

1.使用Vue3+element-plus

2.页面效果

三、后端

后端采用Springboot、maven、mybatis plus、MySQL等

涉及用户和员工登录模块、用户操作模块，审批模块，购买等模块，不再一一叙述。还有很多需要完善的和添加的模块，因为程序限制，目前先这些。

1、后端返回前端Long型数据失真问题

使用序列化，将Long型数据返给前端时，变为String类型

/**
 * 对象映射器:基于jackson将Java对象转为json，或者将json转为Java对象
 * 将JSON解析为Java对象的过程称为 [从JSON反序列化Java对象]
 * 从Java对象生成JSON的过程称为 [序列化Java对象到JSON]
 */
public class JacksonObjectMapper extends ObjectMapper {

    public static final String DEFAULT_DATE_FORMAT = "yyyy-MM-dd";
    public static final String DEFAULT_DATE_TIME_FORMAT = "yyyy-MM-dd HH:mm:ss";
    public static final String DEFAULT_TIME_FORMAT = "HH:mm:ss";

    public JacksonObjectMapper() {
        super();
        //收到未知属性时不报异常
        this.configure(FAIL_ON_UNKNOWN_PROPERTIES, false);

        //反序列化时，属性不存在的兼容处理
        this.getDeserializationConfig().withoutFeatures(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES);


        SimpleModule simpleModule = new SimpleModule()
                .addDeserializer(LocalDateTime.class, new LocalDateTimeDeserializer(DateTimeFormatter.ofPattern(DEFAULT_DATE_TIME_FORMAT)))
                .addDeserializer(LocalDate.class, new LocalDateDeserializer(DateTimeFormatter.ofPattern(DEFAULT_DATE_FORMAT)))
                .addDeserializer(LocalTime.class, new LocalTimeDeserializer(DateTimeFormatter.ofPattern(DEFAULT_TIME_FORMAT)))

                .addSerializer(BigInteger.class, ToStringSerializer.instance)
                .addSerializer(Long.class, ToStringSerializer.instance)
                .addSerializer(LocalDateTime.class, new LocalDateTimeSerializer(DateTimeFormatter.ofPattern(DEFAULT_DATE_TIME_FORMAT)))
                .addSerializer(LocalDate.class, new LocalDateSerializer(DateTimeFormatter.ofPattern(DEFAULT_DATE_FORMAT)))
                .addSerializer(LocalTime.class, new LocalTimeSerializer(DateTimeFormatter.ofPattern(DEFAULT_TIME_FORMAT)));

        //注册功能模块 例如，可以添加自定义序列化器和反序列化器
        this.registerModule(simpleModule);
    }
}

2.map中获取到String类型需要转成Long类型

Claims claims = JwtUtils.parseJwt(jwt);
log.info("claims",claims);
Long id = Long.parseLong(claims.get("id",String.class));

3.谨记

整个后端代码开发过程中，入手写代码前设计好表结构是很重要的。表结构表字段设计好，接口的写法和返回就清晰了，往后写就是在根据脑子里定好的框架填充具体业务逻辑了，也关系到系统的业务扩展，所以设计数据表很重要。

总结

这个社交项目包含小程序用户端，内部使用的内容管理平台（Vue3），以及后端代码。后端使用springboot+maven+mybatisplus+mysql，mybatisplus的使用是操作数据库方便了一些，至少不用自己写sql了，大大简化了过程中的困难。不过数据库还是再要学习的。

整个项目印象比较深的就是表结构设计，开始设计了一版，开发过程中又不断推翻和完善，真是一个艰辛又缓慢的过程，不过最终很有满足充实感。一个页面前端想要的接口数量和返回的数据，也许跟后端大不相同，后端根据模块和表来开发，前端根据页面来（当然也会根据模块，这里只讨论接口、数据部分）。以前只写前端觉得有些页面接口没必要三四个，或者返回不太合理的地方，随着java的学习，慢慢理解了。现在前后端都写了，互相协助，理解万岁，哈哈哈哈哈。

以上。