乐优商城相关工具


自定义主键使用指南

树组件的用法

示例


效果:

属性列表

属性名称 说明 数据类型 默认值
url 用来加载数据的地址,即延迟加载 String -
isEdit 是否开启树的编辑功能 boolean false
treeData 整颗树数据,这样就不用远程加载了 Array -

这里推荐使用url进行延迟加载,每当点击父节点时,就会发起请求,根据父节点id查询子节点信息

当有treeData属性时,就不会触发url加载

远程请求返回的结果格式:

[
    { 
        "id": 74,
        "name": "手机",
        "parentId": 0,
        "isParent": true,
        "sort": 2
    },
     { 
        "id": 75,
        "name": "家用电器",
        "parentId": 0,
        "isParent": true,
        "sort": 3
    }
]

事件

事件名称 说明 回调参数
handleAdd 新增节点时触发,isEdit为true时有效 新增节点node对象,包含属性:name、parentId和sort
handleEdit 当某个节点被编辑后触发,isEdit为true时有效 被编辑节点的id和name
handleDelete 当删除节点时触发,isEdit为true时有效 被删除节点的id
handleClick 点击某节点时触发 被点击节点的node对象,包含全部信息

完整node的信息

回调函数中返回完整的node节点会包含以下数据:

{
    "id": 76, // 节点id
    "name": "手机", // 节点名称
    "parentId": 75, // 父节点id
    "isParent": false, // 是否是父节点
    "sort": 1, // 顺序
    "path": ["手机", "手机通讯", "手机"] // 所有父节点的名称数组
}

级联选择组件

示例

    

效果

结果值

v-model绑定的数据结果:

属性列表

属性名称 说明 数据类型 默认值
url 延迟加载数据的地址 [{id,name},{}] String
itemText 每个选项中用来显示的字段名称 String name
itemValue 每个选项中用来作为值的字段名称 String id
children 子选项数组在父选项中的字段名称 String children
multiple 是否允许多选 boolean false
showAllLevels 是否将级联的每级选项都作为结果展示。当multiple值为true时,这个值无效,即只会显示最后一级选项的结果 boolean false
required 是否是必填项,如果是,会在文本提示后加* boolean false
rules 自定义校验规则 Array
value 选择框的结果,可以通过v-model进行双向绑定 Array
label 提示用户的文字说明 String

说明

无论是单选还是多选,value的结果格式始终是一个数组。单选时数组的长度始终为1。

数组中的对象结构为:

{
    {itemValue}:'', // 属性名取决于itemValue的值,默认是id
    {itemText}:''// 属性名取决于itemText的值,默认是name
}

文件上传组件

示例

单图片上传
        

上传前:

上传后

多图片上传

示例:


效果:

属性列表

属性名 说明 数据类型 默认值
url 上传文件的目标路径 String
value 上传成功的返回结果 单图片上传是String。多图片上传是String数组
multiple 是否运行多图片上传 Boolean true
picWidth 单图片上传后的预览宽度 Number 150
picHeight 单图片上传后的预览高度 Number 150
说明

可以通过v-model双向绑定,来获取图片上传的结果:

  • 单图片上传时,value值是一个图片地址
  • 多图片上传时,value值是一个图片地址数组
  • 文件上传的参数名是:file
  • 文件上传的返回值,就是图片的url路径

自定义富文本编辑器

示例


效果

属性说明

属性列表:

属性名 说明 数据类型 默认值
value 编辑器的输出结果,可以用v-model双向绑定 String
upload-url 上传按钮对应的图片上传地址,以项目全局的url配置为前缀 String
file-name 上传文件的参数名 String file
maxUploadSize 上传文件的大小限制,单位byte Number 500kb

备注:

默认支持的图片类型:jpg/png/jpeg/gif

Linux下使用FastDFS

安装环境

系统镜像安装后之后记得先做一份快照

  1. 在/usr/local下新建leyou目录
  2. 然后把下载的安装包上传到leyou目录下

单节点FastDFS

整个安装过程非常复杂,很容易出错,建议进行多次备份。

我们这里不打算安装多台虚拟机,因此会把tracker和storage都安装在一起。

安装gcc

GCC用来对C语言代码进行编译运行,使用yum命令安装:

yum -y install gcc

后面会用到解压命令(unzip),所以这里可以用yum把unzip 也装一下

yum install -y unzip zip

安装libevent

yum -y install libevent

安装libfastcommon

解压
tar -xvf libfastcommon-1.0.42.tar.gz

进入解压完成的目录
cd libfastcommon-1.0.42

编译并且安装:
./make.sh 
./make.sh install

安装fastdfs

tar -xvf fastdfs-6.03.tar.gz
cd  fastdfs-6.03/
./make.sh 
./make.sh install

如果安装成功,会看到/etc/init.d/下看到提供的脚本文件:

ll /etc/init.d/ | grep fdfs

  • fdfs_trackerd 是tracker启动脚本
  • fdfs_storaged 是storage启动脚本

能够在 /etc/fdfs/ 目录下看到默认的配置文件模板:

ll /etc/fdfs/

  • tarcker.conf.sample 是tracker的配置文件模板
  • storage.conf.sample 是storage的配置文件模板
  • client.conf.sample 是客户端的配置文件模板

配置并且启动tracker服务

FastDFS的tracker和storage在刚刚的安装过程中,都已经被安装了,因此我们安装这两种角色的方式是一样的。不同的是,两种需要不同的配置文件。

我们要启动tracker,就修改刚刚看到的tarcker.conf,并且启动fdfs_trackerd脚本即可。

  1. 首先将模板文件复制

    cp /etc/fdfs/tracker.conf.sample /etc/fdfs/tracker.conf
    
  2. 修改复制后的配置文件:

    vim /etc/fdfs/tracker.conf
    

    修改的内容如下:

    # 存储日志和数据的根目录
    base_path=/leyou/tracker
    

  1. 新建目录:

    mkdir -p /leyou/tracker
    
  2. 注意:关闭防火墙:

    # 关闭
    service firewalld stop
    # 禁止开机自启
    systemctl disable firewalld.service
    #查看状态
    service firewalld status
    

启动和停止

启动tracker服务器: /etc/init.d/fdfs_trackerd start

停止tracker服务器: /etc/init.d/fdfs_trackerd stop

不过安装过程中,fdfs已经被设置为系统服务,我们可以采用熟悉的服务启动方式:

service fdfs_trackerd start # 启动fdfs_trackerd服务,停止用stop

检查FastDFS Tracker Server是否启动成功:

service fdfs_trackerd status
ps -ef | grep fdfs_trackerd

设置tracker服务开机启动:

chkconfig fdfs_trackerd on

配置并启动storage服务

  1. 首先将模板文件复制

    cp /etc/fdfs/storage.conf.sample /etc/fdfs/storage.conf
    
  2. 修改复制后的配置文件:

    vim /etc/fdfs/storage.conf
    

    修改的内容如下:

    # 数据和日志文件存储根目录 
    base_path=/leyou/storage
    
    # 第一个存储目录 
    store_path0=/leyou/storage
    
    # tracker服务器(这里是安装在本机,是本机ip)IP和端口 
    tracker_server=172.16.145.141:22122
    
  3. 新建目录:

    mkdir -p /leyou/storage
    

启动和停止

启动storage服务器:/etc/init.d/fdfs_storaged start

停止storage服务器:/etc/init.d/fdfs_storaged stop

推荐使用:

service fdfs_storaged start  # 启动fdfs_storaged服务,停止用stop

设置storage服务开机启动:

chkconfig fdfs_storaged on

查看状态

service fdfs_storaged status

使用nginx访问FastDFS

为什么需要用nginx访问FastDFS

FastDFS通过Tracker服务器,将文件放在Storage服务器存储,但是同组存储服务器之间需要进入文件复制,有同步延迟的问题。

假设Tracker服务器将文件上传到了192.168.4.125,上传成功后文件ID已经返回给客户端。此时FastDFS存储集群机制会将这个文件同步到同组存储192.168.4.126,在文件还没有复制完成的情况下,客户端如果用这个文件ID在192.168.4.126上取文件,就会出现文件无法访问的错误。

而fastdfs-nginx-module可以重定向文件连接到文件上传时的源服务器取文件,避免客户端由于复制延迟导致的文件无法访问错误

安装fastdfs-nguinx-module

解压

tar -xvf fastdfs-nginx-module-1.22.tar.gz

修改config

  1. 进入src目录

    cd fastdfs-nginx-module-1.22/src/
    
  2. 编辑config

    vim config
    
  3. 使用以下替换命令:

    :%s+/usr/local/+/usr/+g
    

    将所有的/usr/local替换为 /usr,这个才是正确的目录

配置nginx与FastDFS关联配置文件

复制 fastdfs-nginx-module 源码中的配置文件到/etc/fdfs 目录, 并修改

cp /usr/local/leyou/fastdfs-nginx-module-1.22/src/mod_fastdfs.conf /etc/fdfs/

vi /etc/fdfs/mod_fastdfs.conf

修改以下配置:

# 客户端访问文件连接超时时长(单位:秒)
connect_timeout=10

# tracker服务IP和端口
tracker_server172.16.145.141:22122

# 访问链接前缀加上组名
url_have_group_name=true

# 文件存储路径
store_path0=/leyou/storage

复制 FastDFS 的部分配置文件到/etc/fdfs 目录

cd /usr/local/leyou/fastdfs-6.03/conf/
cp http.conf mime.types /etc/fdfs/

安装Nginx插件

如果没有安装过nginx

  • 安装nginx的依赖库
yum -y install gcc pcre pcre-devel zlib zlib-devel openssl openssl-devel
  • 解压安装包
tar -xvf nginx-1.17.6.tar.gz
  • 配置nginx安装包,并指定fastdfs-nginx-model
cd nginx-1.17.6/

./configure --prefix=/opt/nginx --sbin-path=/usr/bin/nginx --add-module=/usr/local/leyou/fastdfs-nginx-module-1.22/src/

注意:在执行./configure配置nginx参数的时候,需要将fastdfs-nginx-moudle源码作为模块编译进去。

  • 编译并安装
make && make install

如果已经安装过nginx

进入nginx目录:

cd /usr/local/leyou/nginx-1.17.6/

配置FastDFS 模块

./configure --prefix=/opt/nginx --sbin-path=/usr/bin/nginx --add-module=/usr/local/leyou/fastdfs-nginx-module-1.22/src/

注意:这次配置时,要添加fastdfs-nginx-moudle模块

编译,注意,这次不要安装(install)

make

替换nginx二进制文件:

备份:

mv /usr/bin/nginx /usr/bin/nginx-bak

用新编译的nginx启动文件替代原来的:

cp objs/nginx /usr/bin/

启动nginx

配置nginx整合fastdfs-module模块

我们需要修改nginx配置文件,在/opt/nginx/conf/nginx.conf文件中:

vim  /opt/nginx/conf/nginx.conf

将文件中,原来的server 80{ ...} 部分代码替换为如下代码:

    server {
        listen       80;
        server_name  image.leyou.com;

        # 监听域名中带有group的,交给FastDFS模块处理
        location ~/group([0-9])/ {
            ngx_fastdfs_module;
        }

        location / {
            root   html;
            index  index.html index.htm;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

启动nginx:

nginx    # 启动nginx

nginx -s stop    # 停止nginx

nginx -s reload    # 重新载入配置文件

可通过ps -ef | grep nginx查看nginx是否已启动成功

启动nginx开机自启

创建一个开机启动的脚本:

vim /usr/lib/systemd/system/nginx.service

添加以下内容:

[Unit]
Description=nginx
After=network.target

[Service]
Type=forking
ExecStart=/usr/bin/nginx
ExecReload=/usr/bin/nginx -s reload
ExecStop=/usr/bin/nginx -s quit
PrivateTmp=true

[Install]
WantedBy=multi-user.target

粘贴后注意检查一遍头尾

设置开机启动

systemctl enable nginx

如果提示Failed to execute operation: Access denied,执行下面后再重新执行上面

systemctl daemon-reexec

然后重启系统后,查看是否是运行状态

service nginx status

Docker安装FastDFS

拉取镜像

docker run -d --restart=always --privileged=true --net=host --name=fastdfs -e IP=47.95.234.255 -e WEB_PORT=80 -v ${HOME}/fastdfs:/var/local/fdfs registry.cn-beijing.aliyuncs.com/tianzuo/fastdfs

其中-v ${HOME}/fastdfs:/var/local/fdfs是指:将${HOME}/fastdfs这个目录挂载到容器里的/var/local/fdfs这个目录里。所以上传的文件将被持久化到${HOME}/fastdfs/storage/data里,IP 后面是自己的服务器公网ip或者虚拟机ip,-e WEB_PORT=80 指定nginx端口

测试

docker exec -it fastdfs /bin/bash

echo "Hello FastDFS!">index.html

fdfs_test /etc/fdfs/client.conf upload index.html

Thymeleaf快速上手

简单使用:https://codekiller.top/2020/03/20/springboot/#toc-heading-47

springboot已经集成了thymeleaf,用到时只需要引入thymeleaf的start即可



    4.0.0

    com.leyou.demo
    thymeleaf-demo
    0.0.1-SNAPSHOT
    jar

    thymeleaf-demo
    Demo project for Spring Boot

    
        org.springframework.boot
        spring-boot-starter-parent
        2.0.6.RELEASE
         
    

    
        UTF-8
        UTF-8
        1.8
    

    
        
            org.springframework.boot
            spring-boot-starter-thymeleaf
        
        
            org.springframework.boot
            spring-boot-starter-web
        

        
            org.springframework.boot
            spring-boot-starter-test
            test
        
    

    
        
            
                org.springframework.boot
                spring-boot-maven-plugin
            
        
    


默认配置

不需要做任何配置,启动器已经帮我们把Thymeleaf的视图器配置完成:

而且,还配置了模板文件(html)的位置,与jsp类似的前缀+ 视图名 + 后缀风格:

  • 默认前缀:classpath:/templates/
  • 默认后缀:.html

所以如果我们返回视图:users,会指向到 classpath:/templates/users.html

Thymeleaf默认会开启页面缓存,提高页面并发能力。但会导致我们修改页面不会立即被展现,因此我们关闭缓存:

# 关闭Thymeleaf的缓存
spring.thymeleaf.cache=false

另外,修改完毕页面,需要使用快捷键:Ctrl + Shift + F9来刷新工程。

快速开始

我们准备一个controller,控制视图跳转:

@Controller
public class HelloController {

    @GetMapping("show1")
    public String show1(Model model){
        model.addAttribute("msg", "Hello, Thymeleaf!");
        return "hello";
    }
}

新建一个html模板:




    
    hello




    

大家好

注意,把html 的名称空间,改成:xmlns:th="http://www.thymeleaf.org" 会有语法提示

启动项目,访问页面:http://localhost:8080/show1

Thymeleaf的主要作用是把model中的数据渲染到html中,因此其语法主要是如何解析model中的数据。从以下方面来学习:

  • 变量
  • 方法
  • 条件判断
  • 循环
  • 运算
    • 逻辑运算
    • 布尔运算
    • 比较运算
    • 条件运算
  • 其它

变量

我们先新建一个实体类:User

public class User {
    String name;
    int age;
    User friend;// 对象类型属性
}

然后在模型中添加数据

@GetMapping("show2")
public String show2(Model model){
    User user = new User();
    user.setAge(21);
    user.setName("Jack Chen");
    user.setFriend(new User("李小龙", 30));

    model.addAttribute("user", user);
    return "show2";
}

语法说明:

Thymeleaf通过${}来获取model中的变量,注意这不是el表达式,而是ognl表达式,但是语法非常像。

示例:

我们在页面获取user数据:

欢迎您:请登录

效果:

感觉跟el表达式几乎是一样的。不过区别在于,我们的表达式写在一个名为:th:text的标签属性中,这个叫做指令

动静结合

指令:

Thymeleaf崇尚自然模板,意思就是模板是纯正的html代码,脱离模板引擎,在纯静态环境也可以直接运行。现在如果我们直接在html中编写 ${}这样的表达式,显然在静态环境下就会出错,这不符合Thymeleaf的理念。

Thymeleaf中所有的表达式都需要写在指令中,指令是HTML5中的自定义属性,在Thymeleaf中所有指令都是以th:开头。因为表达式${user.name}是写在自定义属性中,因此在静态环境下,表达式的内容会被当做是普通字符串,浏览器会自动忽略这些指令,这样就不会报错了!

现在,我们不经过SpringMVC,而是直接用浏览器打开页面看看:

  • 静态页面中,th指令不被识别,但是浏览器也不会报错,把它当做一个普通属性处理。这样span的默认值请登录就会展现在页面
  • 如果是在Thymeleaf环境下,th指令就会被识别和解析,而th:text的含义就是替换所在标签中的文本内容,于是user.name的值就替代了 span中默认的请登录

指令的设计,正是Thymeleaf的高明之处,也是它优于其它模板引擎的原因。动静结合的设计,使得无论是前端开发人员还是后端开发人员可以完美契合。

向下兼容

但是要注意,如果浏览器不支持Html5怎么办?

如果不支持这种th:的命名空间写法,那么可以把th:text换成 data-th-text,Thymeleaf也可以兼容。

escape

另外,th:text指令出于安全考虑,会把表达式读取到的值进行处理,防止html的注入。

例如,你好将会被格式化输出为$lt;p$gt;你好$lt;/p$lt;

如果想要不进行格式化输出,而是要输出原始内容,则使用th:utext来代替.

ongl表达式的语法糖

刚才获取变量值,我们使用的是经典的对象.属性名方式。但有些情况下,我们的属性名可能本身也是变量,怎么办?

ognl提供了类似js的语法方式:

例如:${user.name} 可以写作${user['name']}

自定义变量

场景

看下面的案例:

Name: Jack.

Age: 21.

friend: Rose.

我们获取用户的所有信息,分别展示。

当数据量比较多的时候,频繁的写user.就会非常麻烦。

因此,Thymeleaf提供了自定义变量来解决:

示例:

Name: Jack.

Age: 21.

friend: Rose.