分类 学习笔记 下的文章

前言:

经验分享,业务场景中日常使用Tabs切换组件,而Uniapp路由,滑动切换,写项目的时候整理了下面这样的一个模板

效果图:

晚点补充

关键点:

1.Swiper需要固定高度的,无法被内容撑开,这边写了一个函数setSwiperHeight()去动态计算高度

HTML:
<swiper :current="tabIndex" :style="{ height: swiperheight + 'px' }" @change="swiperChange">
    <swiper-item class="wisdomActivity" v-for="(tabitem, tabs_i) in tablist" :key="tabs_i">
    </swiper-item>
</swiper>
JS:
setSwiperHeight() {
    let windowHeight = uni.getSystemInfoSync().windowHeight;
    var query = uni.createSelectorQuery();
        query
        .select('.uni-swiper-header')
        .boundingClientRect(rect => {
            if (rect) {
                this.swiperheight = windowHeight - rect.height;
            }
        })
        .exec();
}
摘自Uniapp官方文档:

nodesRef.boundingClientRect(callback)添加节点的布局位置的查询请求。相对于显示区域,以像素为单位。其功能类似于 DOM 的 getBoundingClientRect。返回 NodesRef 对应的 SelectorQuery

2.NoContent与Content

这里实现的目的是tabs切换页面的时候,如果Content为空,则请求数据,否则就不请求。

tablist: [
                {
                    Name: '标签1',
                    noContent: true, //Content是否有内容
                    Content: []
                },
                {
                    Name: '标签2',
                    noContent: false,
                    Content: []
                },
                ......
            ]
JS请求内容方法

isconcat true下拉加载更多(是否拼接数据) false刷新重新请求整个列表

        getContentList(isconcat) {
            //isconcat True下拉加载更多 false 刷新
            let offset = 0;
            let that = this;
            if (isconcat) {
                offset = that.tablist[that.tabIndex].Content;
            }
            // 假象接口  offset 10为获取内容长度
            GetContent(offset, 10).then(res => {
                let TmpList = that.tab;
                if (res.Success) {
                    if (res.Data == null) {
                        res.Data == {};
                    }
                    if (isconcat) {
                        TmpList = TmpList.concat(res.Data);
                    } else {
                        TmpList = res.Data;
                    }
                    that.tablist[that.tabIndex].Content = TmpList;
                }
            });
        }
使用位置
// 初始化
onReady() {
         this.getContentList(false);
    },
    // 下拉加载更多
getMore() {
             this.getContentList(true);
        },

最后这边贴上源码地址

https://github.com/RogisterDu/TabsNavTemplate

IntelliJ IDEA Maven快速查询添加依赖

最近在学习Spring 框架过程中,由于笔者本人使用的一直是JDK11版本

使用过程中 出现了javax.annotation.Generated报错情况

查询后得知 jdk11及其以上移除了该包,可以使用Jar替代

在查询Maven 添加依赖的过程中 发现了以下方法

在pom.xml 页面 右键->Generate (快捷键 Alt + Insert)

image-20210511085256659

image-20210511085326427

image-20210511085604975

在此窗口 可直接查询 以javax.annotation为例

image-20210511085705309

image-20210511085751004

左键下拉可直接选择选版本

ADD之后 直接V(Maven)一键添加a

Fastjson--拼接复杂嵌套Json

后端向前端需要返回一个如下格式的json格式数据
{
    "status":"200",
    "message":"登录成功",
    "user-info":{
        "username":"student"
        "identity":"3",
        "password":"123456",
        "class-id":"1"
    }
}
这是我最近在写的一个项目的后端的LoginServlet的返回数据

起初返回的数据为

{
    "status":"200",
    "message":"登录成功",
    "username":"student"
    "identity":"3",
    "password":"123456",
    "class-id":"1"
}

后面在前端获得数据的时候,想将user-info内部的信息改为获取如上

原本方法为通过Hashmap类实例化一个map对象,添加数据后,通过fastjson框架直接转换为Json数据

原代码
        HashMap<String, String> BackData = new HashMap<String, String>();
        BackData.put("status", "201");
        BackData.put("message", "登陆成功");
        BackData.put("name", s1.getStudent_Name());
        BackData.put("identity", "3");
        BackData.put("class", s1.getClass_ID());
        BackData.put("number", s1.getStudent_Number());
        BackData.put("password", s1.getStudent_Password());

起初的想法是很天真美好的将数据先存入一个map中转为JsonString

然后添加到原来的map中测试后发现转义的问题!

image-20210417015731678

后查询文章后发现FastJson有两大主要类 JSONObject(表示Json对象)与JSONArray(表示Json数据组)

我们来复习一下JSON对象与JSON数组:
//JSON对象 在大括号 {} 中书写:
{key1 : value1, key2 : value2, ... keyN : valueN }
//JSON数组 在中括号 [] 中书写:
[
    { key1 : value1-1 , key2:value1-2 }, 
    { key1 : value2-1 , key2:value2-2 }, 
    { key1 : value3-1 , key2:value3-2 }, 
    ...
    { keyN : valueN-1 , keyN:valueN-2 }, 
]

JSON数组只能添加{}的元素而不能直接添加键值对

于是在JSONArray中只有add()方法来添加Object类型对象

而JSONObject是一个对象,不能容纳/添加其他对象只有put()方法来添加键值对。

有意思的是JSONObect的put(String key,Object value) value也正好能是JSONArray类型

正确代码
    JSONArray UserInfo = new JSONArray();
    UserInfo.add(s1);     //FastJson会自动将实体类自动转为json对象
    jsonObject.put("code",200);
    jsonObject.put("message","查询成功");
    jsonObject.put("user-info",UserInfo);

    //发送 biu!
    response.getWriter().print(jsonObject.toJSONString());
    response.getWriter().flush();
成功截图:

image-20210417014355171

写代码的一点小插曲/(ㄒoㄒ)/~~

JSONArray与JsonArray

image-20210417014229124

总结

大概是对JSON数据格式使用还是太少

后面大概要从头补习 计算机网络 数据结构 计算机组成原理了吧。。。。。。。

参考文章:

https://www.cnblogs.com/gocode/p/parse-key_value-without-entity-and-concat-nested-json-by-fastjson.html