日志-2021-8-30 | RtZhao's Blog

Layuimini

下拉选项：tableSelect

<div class="layui-form-item">
    <label class="layui-form-label">测试单选</label>
    <div class="layui-input-inline">
        <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input" id="demo4">
    </div>
</div>

tableSelect.render({
    elem: '#demo4',
    checkedKey: 'id',
    searchKey: 'username',
    searchPlaceholder: '姓名测试关键词搜索',
    height: '400',  //自定义高度  不行 layui.css 中 layui-input标签的宽高被限制
    width: '1200',  //自定义宽度
    table: {
        url: 'http://localhost:9091/test/user',
        cols: [[
            {type: 'radio'},
            {field: 'uid', title: 'ID'},
            {field: 'username', title: '姓名'},
            {field: 'gender', title: '性别'}
        ]]
    },
    done: function (elem, data) {
        var NEWJSON = [];
        var result = JSON.stringify(data.data);
        layer.alert(result, {
            title: '选择的搜索信息'
        });

        layui.each(data.data, function (index, item) {
            NEWJSON.push(item.username)
        })
        elem.val(NEWJSON.join(","))
    }
})

省市县区三级联动下拉选择器：layarea

数据都写死在本地，直接用

富文本编辑器 wangEditor

感觉这玩意很鸡肋，不过可以用在用户反馈方面。

该富文本编辑器的图片、视频上传需要设置接口等等额外信息，可以用图床api接口【七牛云】【SM.MS】（到也是可以自己写一个API暴露一个上传接口，返回图片路径，以后可以尝试一下）

SM.MS 可以个人使用，注册之后获取一个token（Make sure you’ve stored your API key somewhere secure and never share them publicly.）

1	Base https://sm.ms/api/v2/

1	POST /upload

文件上组件 zyupload

与富文本编辑器中的文件上传类似，需要提供上上传接口，并对返回结果处理，成功了要显示文件路径

这个组件有个问题，图片预览时的尺寸为高度写死，图片显示不全，同时没有文本格式的预览图片

前端与后台数据交互的多种方式

(1) ajax的data部分 ◀▶

1
2
3

$.ajax({
    data:....
})

(2) 表单传递 ▶

前端使用表单时，为name属性赋值，action属性标识提交数据的地址，method属性指明提交方式

后台controller层方法的参数只要与name的值相同，即可获取到该属性的值。

(3) session域或request域 ◀

后台将值存入request域里面，使用request.getsession.setAttribute(“名字”,”值”)

前台使用sessionScope.名字取值

(4) 通过url字符串拼接向后台提交数据▶

ajax的url中拼接数据
window.location.href指定路径提交数据
通过a标签的href属性提交数据

后台

GUNS 更简洁的代码，可插拔式架构，5年磨一剑，帮助中、小企业解决前后端架构问题

Others

雪碧图（CSS Sprites）：一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分

Dreamweaver：上个世纪的产品了，建议不用；傻瓜式，好low啊；公元2021年，看老师课件有的还写这个

切图仔：早期CSS 还相对较弱，大量的设计效果不是通过样式可以做到的。需要前端岗位工作者把设计稿内一些图形元素从 PS 等原始设计稿内裁切出来，放在页面的 img 标签中或者 CSS background-image 样式中使用。现在被用为自嘲

图书：

计算机组成原理唐朔飞高教

计算机体系结构王志英清华

TODO

自平衡二叉查找树

java 上传插件

Beetl

Guns

Gitee Pages

文件上传相关：

我有个设想建自己的图床（.exe \网页 + 打开文件夹\拖拽上传+调后台接口存在服务器目录上，返回url地址）

目前使用的PicGo，为私人开发管理，好在都存储在个人github仓库中