深海游弋的鱼 – 默默的点滴

Unable to find a target named `RunnerTests` in project `Runner.xcodeproj`, did find `Runner`

Flutter 2.x 升级到 3.10.1 版本之后，原来正常编译的项目，iOS环境下（Xcode Version 13.2.1 (13C100)），编译报错：

$ ios %  pod install
Analyzing dependencies
[!] Unable to find a target named `RunnerTests` in project `Runner.xcodeproj`, did find `Runner`.

[!] Automatically assigning platform `iOS` with version `11.0` on target `Runner` because no platform was specified. Please specify a platform for this target in your Podfile. See `https://guides.cocoapods.org/syntax/podfile.html#platform`.

$ ios % pod install

Analyzing dependencies

[!] Unable to find a target named `RunnerTests` in project `Runner.xcodeproj`, did find `Runner`.

[!] Automatically assigning platform `iOS` with version `11.0` on target `Runner` because no platform was specified. Please specify a platform for this target in your Podfile. See `https://guides.cocoapods.org/syntax/podfile.html#platform`.

继续阅读Unable to find a target named `RunnerTests` in project `Runner.xcodeproj`, did find `Runner`

Thymeleaf调用Spring的Bean的函数

问题见：https://stackoverflow.com/questions/53803497

为什么按照官网上的写法调用@Bean报错：EL1057E: No bean resolver registered in the context to resolve access to bean

有时候我们希望自己去通过thymeleaf进行解析文本，调用自定义的函数。比如

Context context = new Context();
context.setVariables(dataMap);
templateEngine.process(templateName, context);

Context context = new Context();

context.setVariables(dataMap);

templateEngine.process(templateName, context);

如果我们在模板里使用了 ${@beanName.method()}，此时会报错：

EL1057E: No bean resolver registered in the context to resolve access to bean

1	EL1057E: No bean resolver registered in the context to resolve access to bean

但是如果我们是通过模板进行MVC页面渲染就不会报错，其实原因就是因为此时的context里缺少了spring的Beans的信息，通过spring mvc渲染时，框架会加入这些信息。那么手动渲染时我们也添加Beans的信息就可以了。

Context context = new Context();
context.setVariables(dataMap);

ThymeleafEvaluationContext tec = new ThymeleafEvaluationContext(applicationContext, null);
dataMap.put(ThymeleafEvaluationContext.THYMELEAF_EVALUATION_CONTEXT_CONTEXT_VARIABLE_NAME, tec);
templateEngine.process(templateName, context);

Context context = new Context();

context.setVariables(dataMap);

ThymeleafEvaluationContext tec = new ThymeleafEvaluationContext(applicationContext, null);

dataMap.put(ThymeleafEvaluationContext.THYMELEAF_EVALUATION_CONTEXT_CONTEXT_VARIABLE_NAME, tec);

templateEngine.process(templateName, context);

此时在进行渲染就正常了。

如果想更接近 Spring MVC 解析逻辑的，参考如代码：

@RequestMapping(value = "/uploadApk", produces = "text/javascript")
@ResponseBody
public String fragUploadApk(@NonNull final HttpServletRequest request, @NonNull final HttpServletResponse response) {        
    final WebContext context = new WebContext(request, response, request.getServletContext(), request.getLocale());

    # 此处使用 Spring MVC 默认的 FormattingConversionService.class 完成对数据的格式化（Springboot 2.7.11)
    final FormattingConversionService conversionService = applicationContext.getBean(FormattingConversionService.class);
    final ThymeleafEvaluationContext thymeleafEvaluationContext = new ThymeleafEvaluationContext(requireApplicationContext(), conversionService);
    context.setVariable(ThymeleafEvaluationContext.THYMELEAF_EVALUATION_CONTEXT_CONTEXT_VARIABLE_NAME, thymeleafEvaluationContext);
    templateEngine.process(templateName, context);
}

@RequestMapping(value = "/uploadApk", produces = "text/javascript")

@ResponseBody

public String fragUploadApk(@NonNull final HttpServletRequest request, @NonNull final HttpServletResponse response) {

final WebContext context = new WebContext(request, response, request.getServletContext(), request.getLocale());

# 此处使用 Spring MVC 默认的 FormattingConversionService.class 完成对数据的格式化（Springboot 2.7.11)

final FormattingConversionService conversionService = applicationContext.getBean(FormattingConversionService.class);

final ThymeleafEvaluationContext thymeleafEvaluationContext = new ThymeleafEvaluationContext(requireApplicationContext(), conversionService);

context.setVariable(ThymeleafEvaluationContext.THYMELEAF_EVALUATION_CONTEXT_CONTEXT_VARIABLE_NAME, thymeleafEvaluationContext);

templateEngine.process(templateName, context);

}

参考链接

vue3的provide和inject

浅析

provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。

定义说明：这对选项是一起使用的。以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

通俗的说就是：组件得引入层次过多，我们的子孙组件想要获取祖先组件得资源，那么怎么办呢，总不能一直取父级往上吧，而且这样代码结构容易混乱。这个就是这对选项要干的事情。

provide：是一个对象，或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西，也就是属性和属性值。

inject：一个字符串数组，或者是一个对象。属性值可以是一个对象，包含from和default默认值。

一句话介绍：provide可以向所有子孙组件提供数据以及提供修改数据的方法，子孙组件用inject使用数据。

在组合式API中的用法

基本用法

似乎，组合式API的provide没有提供批量方法，只能每个变量写一句。

顶级组件：

<template>
  <div>
    <son />
  </div>
</template>

<script setup>
import son from "./son.vue";
import { provide } from "vue";
provide("abc", "123");
</script>

<div>

<son />

</div>

</template>

import son from "./son.vue";

import { provide } from "vue";

provide("abc", "123");

</script>

子组件：

<template>
  <div>
    <grandson />
  </div>
</template>

<script setup>
import grandson from "./grandson.vue";
</script>

<div>

</div>

</template>

import grandson from "./grandson.vue";

</script>

孙组件：

<template>
  <div>我是孙子</div>
</template>

<script setup&gt;
import { inject } from "vue";
const abc = inject("abc");
console.log(abc);
</script>

</template>

import { inject } from "vue";

const abc = inject("abc");

console.log(abc);

</script>

官方说：

inject() can only be used inside setup() or functional components.

这个意思是说，inject()只能放在setup()生命周期里运行，不能放在别的周期里运行，也不能放在事件周期里运行。所以你可以先在setup()周期取值。

例一：这是允许的，因为console.log是setup()生命周期里的同步代码

function xx() {
  console.log(inject("abc"))
}
xx()

function xx() {

console.log(inject("abc"))

}

xx()

例三：让例一的xx函数作为鼠标事件回调，也是禁止的，原因也一样。

例四：放在Promise.then()也是禁止的，比如：

Promise.resolve().then(() => {
  console.log(inject("abc"))
})

Promise.resolve().then(() => {

console.log(inject("abc"))

})

一级组件修改数据，孙子组件监听变更

provide的变量必须是响应式变量，孙子组件监听的变量也必须是响应式变量。

一级组件：

<template>
  <div>
    <son />
    <button @click="abc = '456'">{{ abc }}</button>
  </div>
</template>

<script setup>
import son from "./son.vue";
import { provide } from "vue";
ref: abc = "123";
provide("abc", $abc);
</script>

<div>

<son />

</div>

</template>

import son from "./son.vue";

import { provide } from "vue";

ref: abc = "123";

provide("abc", $abc);

</script>

孙子组件：

<template>
  <div>我是孙子 - {{abc}}</div>
</template>

<script setup>
import { inject, watch } from "vue";
ref: abc = inject("abc");
watch($abc, () => {
  console.log(abc + '变了');
});
</script>

</template>

import { inject, watch } from "vue";

ref: abc = inject("abc");

watch($abc, () => {

console.log(abc + '变了');

});

</script>

孙子组件修改数据，一级组件监听变更

一级组件除了提供数据，还要提供一个修改数据的方法，孙子组件要接收并使用这个方法，这样修改的就是一级组件的数据，修改之后又会影响孙子组件的数据。

一级组件：

<template>
  <div>
    <son />
    <button @click="abc = '456'">{{ abc }}</button>
  </div>
</template>

<script setup>
import son from "./son.vue";
import { provide } from "vue";
ref: abc = "123";
function updateAbc(val) {
  abc = val;
}
provide("abc", $abc);
provide("updateAbc", updateAbc);
</script>

<div>

<son />

</div>

</template>

import son from "./son.vue";

import { provide } from "vue";

ref: abc = "123";

function updateAbc(val) {

abc = val;

}

provide("abc", $abc);

provide("updateAbc", updateAbc);

</script>

孙子组件：

<template>
  <div @click="updateAbc('789')">我是孙子 - {{abc}}</div>
</template>

<script setup>
import { inject, watch } from "vue";
ref: abc = inject("abc");
const updateAbc = inject('updateAbc');
watch($abc, () => {
  console.log(abc + '变了');
});
</script>

</template>

import { inject, watch } from "vue";

ref: abc = inject("abc");

const updateAbc = inject('updateAbc');

watch($abc, () => {

console.log(abc + '变了');

});

</script>

禁止孙子组件修改一级组件的数据

禁止的话，一级组件传递的变量必须是只读的，可以是readonly，也可以是shallowRef。这样孙子组件修改数据的话，一级组件不会有反应。

一级组件：

<template>
  <div>
    <son />
    <button @click="abc = '456'">{{ abc }}</button>
  </div>
</template>

<script setup>
import son from "./son.vue";
import { shallowRef, provide } from "vue";
let abc = shallowRef("123");
function updateAbc(val) {
  abc = val;
}
provide("abc", abc);
provide("updateAbc", updateAbc);
</script>

<div>

<son />

</div>

</template>

import son from "./son.vue";

import { shallowRef, provide } from "vue";

let abc = shallowRef("123");

function updateAbc(val) {

abc = val;

}

provide("abc", abc);

provide("updateAbc", updateAbc);

</script>

在配置项式API中的用法

跟Vue 2差不多，简单说一下。

provide

provide语法比在组合式API里要灵活，毕竟可以用对象。比如：

provide: {
    user: 'John Doe',
 },

provide: {

user: 'John Doe',

如果要把data里的数据provide，说白了就是打算用this，provide要写成函数：

provide() {
    return {
      user: this.user,
      updateUser: this.updateUser
   }
},

provide() {

return {

user: this.user,

updateUser: this.updateUser

}

如果要提供计算属性，也是一样的道理，不过，如果不打算用配置项式计算属性，而是想用vue的computed方法

可以写成：

provide() {
    return {
      userLength: computed(() => this.user.length),
      updateUser: this.updateUser
    }
},

provide() {

return {

userLength: computed(() => this.user.length),

updateUser: this.updateUser

}

inject

inject的用法更简单，比如inject: ['user', 'updateUser']。

双向修改而且响应 想要双向修改而且响应，就必须借助reactive或者ref家族方法和computed方法。provide的数据必须是computed返回的数据，才能保证数据有变化时刷新孙子组件的数据。孙子组件要用computed + unref来解包装且计算属性，才能得到真正需要的数据。

可以看到，由于孙子组件的inject和computed的属性不能重名，所以我造出一个abcabc变量名，这就比较麻烦了。我们再看组合式API，就没有abcabc这种中间变量，原因是ref: abc = inject("abc");让接收和加响应式一气呵成，这也是组合式API的优势之一。

一级组件：

<template>
  <div>
    <son />
    <button @click="abc = '456'">{{ abc }}</button>
  </div>
</template>

<script>
import son from "./son.vue";
import { ref, shallowRef, computed, provide } from "vue";
export default {
  components: {
    son,
  },
  data() {
    return {
      abc: 123,
    }
  },
  provide() {
    return {
      abcabc: computed(() => this.abc),
      updateAbc: this.updateAbc
    }
  },
  methods: {
    updateAbc(val) {
      this.abc = val;
    }
  }
}
</script>

<div>

<son />

</div>

</template>

import son from "./son.vue";

import { ref, shallowRef, computed, provide } from "vue";

export default {

components: {

son,

data() {

return {

abc: 123,

}

provide() {

return {

abcabc: computed(() => this.abc),

updateAbc: this.updateAbc

}

methods: {

updateAbc(val) {

this.abc = val;

}

</script>

孙子组件：

<template>
  <div @click="updateAbc('789')">我是孙子 - {{ abc }}</div>
</template>

<script>
import { unref } from "vue";

export default {
  inject: ["abcabc", "updateAbc"],
  computed: {
    abc() {
      return unref(this.abcabc);
    },
  },
};
</script>

</template>

import { unref } from "vue";

export default {

inject: ["abcabc", "updateAbc"],

computed: {

abc() {

return unref(this.abcabc);

};

</script>

参考链接

vue3的provide和inject

iOS开发：报错The sandbox is not in sync with the Podfile.lock …的解决方法

问题

具体在Xcode中的报错提示如下所示：

Showing Recent Messages
diff: /Users/admin/Documents/WorkSpace/Flutter/portal/ios/Pods/Manifest.lock: No such file or directory
error:The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.

Showing Recent Messages

diff: /Users/admin/Documents/WorkSpace/Flutter/portal/ios/Pods/Manifest.lock: No such file or directory

error:The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.

继续阅读iOS开发：报错The sandbox is not in sync with the Podfile.lock …的解决方法

一	二	三	四	五	六	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31