积累：零售SaaS产品前端架构

:::tip{title="云种植模式的思考"}
日本云种植模式玩出几千万的市场，国内各种云市场普遍处于萌芽发展期，思考云市场是否真正有巨大的利润空间
:::


## 抖音矩阵
### 直播模块
    不下播直播
### 短视频模块
    抖音约探树
    抖音效果比赛
### 商城模块
    1分钱的树苗<经纬度，地标，铭牌>
    浇水 == 礼物
    施肥 == 礼物
    选地址


## 云种植应用<云种树/菜>

### 以城市划分
> 以田区创建频道，搭建社群

- 社群周末采风
- 个人采风
- 云视频在线
    构建田区与人的关系
- 种植积分胸章
    等级 = 本地生活优惠券

    close 挂单售卖
    close 众筹农业
    农场主   果农<种植用有人>
    智慧认养
    
## 原型

#### 首页
![image.png](https://seek.wiki/static/img/905766a2145e6b32e61096bee0731119.image.png)

#### 云圈
![image.png](https://seek.wiki/static/img/bdf39c4bbd7e7d6b2fb0017127b079a2.image.png)

![image.png](https://seek.wiki/static/img/ddbfbfbc28a672ae1b73afaab7c5181d.image.png)

#### 云会员
![image.png](https://seek.wiki/static/img/86d6f3222f8c57984d37d2fe7555cf25.image.png)

#### 云园详情
![image.png](https://seek.wiki/static/img/3300a9664a421db54b6bb148561b3507.image.png)

#### 探园详情
![image.png](https://seek.wiki/static/img/94c1695755b1024c2b9ba73a63461d81.image.png)

#### 云园集结
![image.png](https://seek.wiki/static/img/30a63a84a4588724d45ccaa269bc7651.image.png)

![image.png](https://seek.wiki/static/img/6b2d70e86d536dc5a255584770aae245.image.png)

原创：云园时光产品模型

:::tip{title="用车族模型"}
原创：设想草创阶段，有建议欢迎评论留言，防抓取设置密码见谅
:::



![image.png](https://seek.wiki/static/img/8e94df36ed7b0a46e66533a6e7f96422.image.png)


## 一丶思考

    设想基于洗车多门店统一会员一卡制，平台为基础，大数据推送服务，隐性设定车主档位

![微信截图_20221126205128.png](https://seek.wiki/static/img/3709fb02cce083151c9bebb707ac252e.%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20221126205128.png)


## 二丶SCAMPER创新思维模型

### 1. 原理


![微信截图_20221126205529.png](https://seek.wiki/static/img/bc4ea96b08443347e87ccf1d07e101c7.%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20221126205529.png)


### 2. 思考


![微信截图_20221126205544.png](https://seek.wiki/static/img/fd521760038be0efd8511c9ea4825bbf.%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20221126205544.png)

> 欢迎评论

原创：用车族产品模型

## 安装redis

> 切换目录
> 远程下载安装包
> 解压
> 移动路径
> 进入redis目录
> 安装redis
> 运行

```
cd /usr/local/src
wget http://download.redis.io/releases/redis-5.0.9.tar.gz
tar xzf redis-5.0.9.tar.gz
mv redis-5.0.9 /usr/local/redis
cd /usr/local/redis
sudo make && sudo make install
```

- 关于外部访问redis
```
vim redis.conf

    注释 # bind 127.0.0.1
    找到配置文件中protected-mode yes，默认protected mode yes，需要将其改为protected-mode no
```

- 启动redis
```
/usr/local/redis/src/redis-server /usr/local/redis/redis.conf
```

> 注意：开启后不要继续执行命令 退出命令执行窗口


```
// 依照上一偏部署不需要
// cd /usr/local/src
// wget http://pecl.php.net/get/redis-5.0.0.tgz
// tar zxvf redis-5.0.0.tgz
```
[关于Centos7.4部署分步集成docker+nginx+php+mysql+node](https://seek.wiki/post/34)

## 重启redis

- 查询redis进程
```
ps -ef|grep redis
```
- 杀掉进程
```
kill -9 8245
```
- 再次查询redis进程
```
ps -ef|grep redis
```
- 重新启动redis
```
/usr/local/redis/src/redis-server /usr/local/redis/redis.conf
```
- 再次查询redis进程
```
ps -ef|grep redis
```

## 开机自启动redis

- 编辑文件
```
vi /etc/systemd/system/redis.service
```
- 复制下边的内容到文件中
```
[Unit]
Description=redis-server
After=network.target
[Service]
Type=forking
PIDFile=/var/run/redis_6379.pid
ExecStart=/usr/local/redis/src/redis-server /usr/local/redis/redis.conf
ExecStop=/usr/local/redis/src/redis-cli shutdown
ExecReload=/bin/kill -s HUP $MAINPID
Restart=always
[Install]
WantedBy=multi-user.target
```
- 保存文件，执行命令，设置Redis为开机启动
```
#重新加载配置文件
systemctl daemon-reload
#启动服务
systemctl start redis.service
#开机启动
systemctl enable redis.service
```

### 查询php插件redis是否存在

```
php74 -m
php --ri redis
```


## 安装supervisor
```
pip3 install supervisor
```

- 检查安装是否ok
```
which supervisord
which supervisorctl
ps -ef | grep supervisord
supervisorctl status
supervisord -v
```

```
cd /web/dujiaoshou
```
## 执行安装独角兽docker
```
docker run -dit --name dujiaoka -p 67:80 -p 6777:9000 -e WEB_DOCUMENT_ROOT=/app/public jiangjuhong/dujiaoka
```

原创：独角数卡安装redis+supervisor

原创：动态点图片抛物线uniApp版本详解



## 原创：uniApp捕获dom核心

```js

tryTriggerPromptlyInit (domItem, d) {
  let num = d ? d : 0
  // console.log('执行捕获domItem', num)
  if (domItem) {
    // console.log('捕获domItem成功，执行初始化', num)
    domItem.init()
  } else {
    let _this = this
    // console.log('捕获domItem失败，延迟200ms再次执行初始化', num)
    setTimeout(() => {
      num++
      if (num <= 10) {
        _this.tryTriggerPromptlyInit(domItem, num)
      }
    }, 200)
  }
}

```

## 代码集合
### 插件js

```js
/*
* @function 动态点图片抛物线uniApp插件
* @author seek
* @version 1.0.0
* */
class ani {
    // 使用说明
    instructions () {
        return [
            '组件依赖全局组件Vuex通道交互数据',
            '1. add-goods-animation.vue文件和ani.js文件单独引入',
            '1.1 add-goods-animation.vue文件 使用于组件入口',
            '1.1.1 定义全局vuex查询mapGetters的GetAGoodsAniConfig方法， 定义全局vuex设置mapGetters的SetAGoodsAniConfig方法',
            // aGoodsAniConfig: []
            // GetAGoodsAniConfig: state => state.aGoodsAniConfig
            // SetAGoodsAniConfig: (state, payload) => {
            //     let aGoodsAniConfig = state.aGoodsAniConfig
            //     // 最大限制10个同时存在
            //     if (aGoodsAniConfig.length > 10) {
            //         aGoodsAniConfig = []
            //     }
            //     aGoodsAniConfig = aGoodsAniConfig.concat(payload)
            //     state.aGoodsAniConfig = aGoodsAniConfig
            // }
            // 组件
            //  <add-goods-animation :aGoodsAniConfig="GetAGoodsAniConfig"></add-goods-animation>
            '1.2 ani.js 使用于包含触发组件动画dom的组件'
            // import Ani from '@/pages/goods/components/add-goods-animation/ani'
            // Ani.goodsAddAniFn(
            //     '图片链接',
            //     '起始位置的dom类名',
            //     动画参数配置,
            //     this, // 组件入参
            //     (e) => {
            //         this.$store.commit('SetAGoodsAniConfig', [e]) //触发回调方法
            //     }
            // )
        ]
    }
    // 组件动画设置转码方法
    static goodsAddAniFn (picture, domName, domSetting, root, callBack) {
        /* 支付宝小程序不支持in(component)，使用无效果 */
        let query = uni.createSelectorQuery().in(root);
        query.selectAll(domName).boundingClientRect(data => {
            let dataK = data[0]
            callBack({
                ...domSetting,
                status: true,
                img: picture,
                width: domSetting.width ? domSetting.width : dataK.width,
                height: domSetting.height ? domSetting.height : dataK.height,
                x: domSetting.xMinus ? (dataK.left - domSetting.xMinus) : dataK.left,
                y: domSetting.yMinus ? (dataK.top - domSetting.yMinus) : dataK.top,
                toX: domSetting.toX ? domSetting.toX : 48,
                toY: domSetting.toY ? domSetting.toY : 68
            })
        }).exec(data => {
            console.log(data, "链式获取node信息");
        });
    }
}
export default ani
```

### 插件Vue


```html
<template>
  <view v-if="aGoodsAniConfig.length > 0">
    <view v-for="(item, k) in aGoodsAniConfigData" :key="k">
      <image
        :class="item.status ? 'a-goods-ani-dom' : ''"
        :src="item.img" mode="aspectFit"
        :style="item.style"></image>
    </view>
  </view>
</template>

<script>
export default {
  name: "add-goods-animation",
  data () {
    return {
      aGoodsAniConfigData: []
    }
  },
  props: {
    aGoodsAniConfig: Array
  },
  watch: {
    aGoodsAniConfig: function (e) {
      if (e.length > 0) {
        let arr = this.aGoodsAniConfigData
        arr.push(this.getNDataAniFn(e[e.length - 1]))
        this.aGoodsAniConfigData = arr
      }
    }
  },
  methods: {
    transformPx2Rpx (a) {
      const ratio = 750 / uni.getSystemInfoSync().windowWidth;
      return ratio * a;
    },
    getNDataAniFn (nData) {
      let startRight = nData.startRight ? nData.startRight : 48
      let lastRight = nData.lastRight ? nData.lastRight : 480
      let cubicBezier = nData.cubicBezier ? nData.cubicBezier : 'cubic-bezier((.32,.69,.48,1.86))'
      return {
        ...nData,
        style: `--width:${this.transformPx2Rpx(nData.width)}rpx;--height:${this.transformPx2Rpx(nData.height)}rpx;--top:${this.transformPx2Rpx(nData.y)}rpx;--left:${this.transformPx2Rpx(nData.x)}rpx;--toX:${nData.toX}rpx;--toY:${nData.toY}rpx;--cubicBezier:${cubicBezier};--startRight:${startRight}rpx;--lastRight:${lastRight}rpx`
      }
    },
  }
}
</script>

<style scoped>
.a-goods-ani-dom{
  width: var(--width);height: var(--height);visibility: hidden;
  border-radius: 50%;position: fixed;z-index: 999;
  animation-name: aniLast;
  animation-duration: .6s;
  animation-timing-function: var(--cubicBezier);
}
@keyframes aniLast
{
  0% {
    visibility: visible;
    right: var(--startRight);
    top: var(--top);
    transform: scale(.8);
  }
  30% {
    visibility: visible;
    top: calc(var(--top) - 100rpx);
    transform: scale(0.6);
  }
  90% {
    visibility: hidden;
    transform: scale(0.3);
  }
  100% {
    transform: scale(0.3);
    right: var(--lastRight);
    top: calc(100vh - var(--toY) - 100rpx);
  }
}
</style>
```