草庐IT

记录--【vue3】写hook三天，治好了我的组件封装强迫症。

林恒 2023-03-28 原文

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

前言

我以前很喜欢封装组件，什么东西不喜欢别人的，总喜欢自己搞搞，这让人很有成就感，虽然是重复造轮子，但是能从无聊的crud业务中暂时解脱出来，对我来说也算是一种休息，相信有很多人跟我一样有这个习惯。 这种习惯在独立开发时无所谓，毕竟没人会关心你咋实现的，但是在跟人合作时就给别人造成了很大的困扰了，毕竟每个人封装的东西都是根据自己习惯来的，别人看着多少会有点不顺眼，而且自己封装的组件大概率也是没有写文档和注释的，所以项目其他成员的使用率也不会太高，所以今天，我试着解决这个问题。 另外，我还在一些群里看到有人抱怨vue3不如vue2好用，主要是适应不了setup写法，希望这篇博客能改变你的看法。

怎么用hook改造我的组件

关于hook是什么之类的介绍，我这就不赘述了，请看这篇文章浅谈：为啥vue和react都选择了Hooks?？。 前言中说到重复造轮子的组件，除开一些毫无必要的重复以外，有一些功能组件确实需要封装一下，比如说，一些需要请求后端字典到前端展示的下来选择框，点击之后要展示loading状态的按钮，带有查询条件的表单，这些非常常用的业务场景，我们就可以封装成组件，但是封装成组件就会遇到前面说的问题，每个人的使用习惯和封装习惯不一样，很难让每个人都满意，这种场景，就可以让hook来解决。

普通实现

就拿字典选择下拉框来说，如果不做封装，我们是这样写的 （这里拿ant-design-vue组件库来做示例）

<script setup name="DDemo" lang="ts">
  import { onMounted, ref } from 'vue';

  //   模拟调用接口
  function getRemoteData() {
    return new Promise<any[]>((resolve) => {
      setTimeout(() => {
        resolve([
          {
            key: 1,
            name: '苹果',
            value: 1,
          },
          {
            key: 2,
            name: '香蕉',
            value: 2,
          },
          {
            key: 3,
            name: '橘子',
            value: 3,
          },
        ]);
      }, 3000);
    });
  }
  
  const optionsArr = ref<any[]>([]);

  onMounted(() => {
    getRemoteData().then((data) => {
      optionsArr.value = data;
    });
  });
</script>

<template>
  <div>
    <a-select :options="optionsArr" />
  </div>
</template>

<style lang="less" scoped></style>

看起来很简单是吧，忽略我们模拟调用接口的代码，我们用在ts/js部分的代码才只有6行而已，看起来根本不需要什么封装。

但是这只是一个最简单的逻辑，不考虑接口请求超时和错误的情况，甚至都没考虑下拉框的loading表现。 如果我们把所有的意外情况都考虑到的话，代码就会变得很臃肿了。

<script setup name="DDemo" lang="ts">
  import { onMounted, ref } from 'vue';

  //   模拟调用接口
  function getRemoteData() {
    return new Promise<any[]>((resolve, reject) => {
      setTimeout(() => {
        // 模拟接口调用有概率出错
        if (Math.random() > 0.5) {
          resolve([
            {
              key: 1,
              name: '苹果',
              value: 1,
            },
            {
              key: 2,
              name: '香蕉',
              value: 2,
            },
            {
              key: 3,
              name: '橘子',
              value: 3,
            },
          ]);
        } else {
          reject(new Error('不小心出错了！'));
        }
      }, 3000);
    });
  }

  const optLoading = ref(false);
  const optionsArr = ref<any[]>([]);

  function initSelect() {
    optLoading.value = true;
    getRemoteData()
      .then((data) => {
        optionsArr.value = data;
      })
      .catch((e) => {
        // 请求出线错误时将错误信息显示到select中，给用户一个友好的提示
        optionsArr.value = [
          {
            key: -1,
            value: -1,
            label: e.message,
            disabled: true,
          },
        ];
      })
      .finally(() => {
        optLoading.value = false;
      });
  }

  onMounted(() => {
    initSelect();
  });
</script>

<template>
  <div>
    <a-select :loading="optLoading" :options="optionsArr" />
  </div>
</template>

这一次，代码直接来到了22行，虽说用户体验确实好了不少，但是这也忒费事了，而且这还只是一个下拉框，页面里有好几个下拉框也是很常见的，如此这般，可能什么逻辑都没写，页面代码就要上百行了。

这个时候，就需要我们来封装一下了，我们有两种选择：

  1. 把字典下拉框封装成一个组件；
  2. 把请求、加载中、错误这些处理逻辑封装到hook里；

第一种大家都知道，就不多说了，直接说第二种

封装下拉框hook
import { onMounted, reactive, ref } from 'vue';
// 定义下拉框接收的数据格式
export interface SelectOption {
  value: string;
  label: string;
  disabled?: boolean;
  key?: string;
}
// 定义入参格式
interface FetchSelectProps {
  apiFun: () => Promise<any[]>;
}

export function useFetchSelect(props: FetchSelectProps) {
  const { apiFun } = props;

  const options = ref<SelectOption[]>([]);

  const loading = ref(false);

  /* 调用接口请求数据 */
  const loadData = () => {
    loading.value = true;
    options.value = [];
    return apiFun().then(
      (data) => {
        loading.value = false;
        options.value = data;
        return data;
      },
      (err) => {
        // 未知错误，可能是代码抛出的错误，或是网络错误
        loading.value = false;
        options.value = [
          {
            value: '-1',
            label: err.message,
            disabled: true,
          },
        ];
        // 接着抛出错误
        return Promise.reject(err);
      }
    );
  };

  //   onMounted 中调用接口
  onMounted(() => {
    loadData();
  });

  return reactive({
    options,
    loading,
  });
}

然后在组件中调用

<script setup name="DDemo" lang="ts">
  import { useFetchSelect } from './hook';

  //   模拟调用接口
  function getRemoteData() {
    return new Promise<any[]>((resolve, reject) => {
      setTimeout(() => {
        // 模拟接口调用有概率出错
        if (Math.random() > 0.5) {
          resolve([
            {
              key: 1,
              name: '苹果',
              value: 1,
            },
            {
              key: 2,
              name: '香蕉',
              value: 2,
            },
            {
              key: 3,
              name: '橘子',
              value: 3,
            },
          ]);
        } else {
          reject(new Error('不小心出错了！'));
        }
      }, 3000);
    });
  }
   
   // 将之前用的 options,loading，和调用接口的逻辑都抽离到hook中
  const selectBind = useFetchSelect({
    apiFun: getRemoteData,
  });
</script>

<template>
  <div>
    <!-- 将hook返回的接口，通过 v-bind 绑定给组件 -->
    <a-select v-bind="selectBind" />
  </div>
</template>

这样一来，代码行数直接又从20行降到3行，甚至比刚开始最简单的那个还要少两行，但是功能却一点不少，用户体验也是比较完善的。

如果你觉着上面这个例子不能打动你的话，可以看看下面这个

Loading状态hook

点击按钮，调用接口是另一个我们经常遇到的场景，为了更好的用户体验，提示用户操作已经响应，同时防止用户多次点击，我们要在调用接口的同时将按钮置为loading状态，虽说只有一个loading状态，但是写多了也觉着麻烦。

为此我们可以封装一个非常简单的hook：

hook.ts

import { Ref, ref } from 'vue';

type TApiFun<TData, TParams extends Array<any>> = (...params: TParams) => Promise<TData>;

interface AutoRequestOptions {
   // 定义一下初始状态
  loading?: boolean;
  // 接口调用成功时的回调
  onSuccess?: (data: any) => void;
}

type AutoRequestResult<TData, TParams extends Array<any>> = [Ref<boolean>, TApiFun<TData, TParams>];

/* 控制loading状态的自动切换hook */
export function useAutoRequest<TData, TParams extends any[] = any[]>(fun: TApiFun<TData, TParams>, options?: AutoRequestOptions): AutoRequestResult<TData, TParams> {
  const { loading = false, onSuccess } = options || { loading: false };

  const requestLoading = ref(loading);

  const run: TApiFun<TData, TParams> = (...params) => {
    requestLoading.value = true;
    return fun(...params)
      .then((res) => {
        onSuccess && onSuccess(res);
        return res;
      })
      .finally(() => {
        requestLoading.value = false;
      });
  };

  return [requestLoading, run];
}

这次把模拟接口的方法单独抽出一个文件

api/index.ts

export function submitApi(text: string) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // 模拟接口调用有概率出错
      if (Math.random() > 0.5) {
        resolve({
          status: "ok",
          text: text,
        });
      } else {
        reject(new Error("不小心出错了！"));
      }
    }, 3000);
  });
}

使用：

index.vue

<script setup name="Index" lang="ts">
import { useAutoRequest } from "./hook";
import { Button } from "ant-design-vue";
import { submitApi } from "@/api";

const [loading, submit] = useAutoRequest(submitApi);

function onSubmit() {
   submit("aaa").then((res) => {
    console.log("res", res);
  });
}
</script>

<template>
  <div class="col">
    <Button :loading="loading" @click="onSubmit">提交</Button>
  </div>
</template>

这样封装一下，我们使用时就不再需要手动切换loading的状态了。

这个hook还有另一种玩法：

hook2.ts

import type { Ref } from "vue";
import { ref } from "vue";

type AutoLoadingResult = [
  Ref<boolean>,
  <T>(requestPromise: Promise<T>) => Promise<T>
];

/* 在给run方法传入一个promise，会在promise执行前或执行后将loading状态设为true，在执行完成后设为false */
export function useAutoLoading(defaultLoading = false): AutoLoadingResult {
  const ld = ref(defaultLoading);

  function run<T>(requestPromise: Promise<T>): Promise<T> {
    ld.value = true;
    return requestPromise.finally(() => {
      ld.value = false;
    });
  }

  return [ld, run];
}

使用：

index.vue

<script setup name="Index" lang="ts">
// import { useAutoRequest } from "./hook";
import { useAutoLoading } from "./hook2";
import { Button } from "ant-design-vue";
import { submitApi, cancelApi } from "@/api";

// const [loading, submit] = useAutoRequest(submitApi);

const [commonLoading, fetch] = useAutoLoading();

function onSubmit() {
  fetch(submitApi("submit")).then((res) => {
    console.log("res", res);
  });
}

function onCancel() {
  fetch(cancelApi("cancel")).then((res) => {
    console.log("res", res);
  });
}
</script>

<template>
  <div class="col">
    <Button type="primary" :loading="commonLoading" @click="onSubmit">
      提交
    </Button>
    <Button :loading="commonLoading" @click="onCancel">取消</Button>
  </div>
</template>

这里也是用到了promise链式调用的特性，在接口调用之后马上将loading置为true，在接口调用完成后置为false。而useAutoRequest则是在接口调用之前就将loading置为true。

useAutoRequest调用时代码更简洁，useAutoLoading的使用则更灵活，可以同时服务给多个接口使用，比较适合提交、取消这种互斥的场景。

解放组件

如果你翻看过我的这篇博客一个省心省力的骨架屏实现方案，那么肯定知道在骨架屏组件中，我是用了传入的res对象的code属性来判断当前显示的视图状态。长话短说就是， res是接口返回给前端的数据，如

{
    "code":0,
    "msg":'查询成功',
    "data":{
        "username":"小王",
        "age":20,
    }
}

我们假定当code为0时代表成功，不为0表示失败，为-100时表示正在加载，当然接口并不会也不需要返回-100，-100是我们本地捏造出来的，只是为了让骨架屏组件显示对应的加载状态。 在页面中使用时，我们需要先声明一个code为-100的res对象绑定给骨架屏组件，然后在onMounted中调用查询接口，调用成功后更新res对象。

如果像上面这样使用res对象来给骨架屏组件设置状态的话，就感觉非常的麻烦，有时候我们只是要设置一个初始时的加载状态，但是要搞好几行没用的代码，但是如果我们把res拆解成一个个参数单独传递的话，父组件需要维护的变量就会非常多了，这时我们就可以封装hook来解决这个问题，把拆解出来的参数都扔到hook里面保存。

上代码（这部分代码比较长，想要详细了解的话可以去看原文章）

骨架屏组件

SkeletonView/index.vue

<script setup lang="ts">
import { defineProps, computed } from "vue";
import { LoadingOutlined } from "@ant-design/icons-vue";
import { isArray } from "@/utils/is";
import { Button } from "ant-design-vue";

/* status:'loading','error','success','empty' */
type ViewStatus = "loading" | "error" | "success" | "empty";

interface SkeletonProps<T = any> {
  status: ViewStatus;
  result: T;
  placeholderResult: T;
  emptyMsg?: string;
  errorMsg?: string;
  isEmpty?: (result: T) => boolean;
}

const props = withDefaults(defineProps<SkeletonProps>(), {
  status: "loading",
  emptyMsg: "暂无数据",
  errorMsg: "未知错误",
});

const emits = defineEmits(["retry"]);

const retryClick = () => {
  emits("retry");
};

const viewStatus = computed(() => {
  const status = props.status;

  if (status === "success") {
    let isEmp = false;
    const result = props.result;
    if (props.isEmpty) {
      isEmp = props.isEmpty(props.result);
    } else {
      if (isArray(result)) {
        isEmp = result.length === 0;
      } else if (!result) {
        isEmp = true;
      } else {
        isEmp = false;
      }
    }
    if (isEmp) {
      return "empty";
    }
    return "success";
  }
  return status;
});

const placeholderData = computed(() => {
  if (props.result) {
    return props.result;
  }
  return props.placeholderResult;
});
</script>

<template>
  <div v-if="viewStatus === 'empty'" key="empty" class="empty_view flex-col">
    <span>{{ emptyMsg }}</span>
    <Button class="mt4 max-w-160px" @click="retryClick">重试</Button>
  </div>

  <div
    key="error"
    v-else-if="viewStatus === 'error'"
    class="empty_view flex-col"
  >
    <span>{{ errorMsg }}</span>
    <Button class="mt4 max-w-160px" @click="retryClick">重试</Button>
  </div>

  <div
    v-else
    key="loadingOrContent"
    :class="[
      placeholderData && viewStatus === 'loading'
        ? 'skeleton-view-empty-view'
        : 'skeleton-view-default-view',
    ]"
  >
    <div
      v-if="!placeholderData && viewStatus === 'loading'"
      class="loading-center"
    >
      <LoadingOutlined style="font-size: 40px; color: #2a6de5" />
    </div>
    <slot
      v-else
      :result="placeholderData"
      :status="viewStatus"
      :success="viewStatus === 'success'"
      :mask="viewStatus === 'loading' ? 'skeleton-mask' : ''"
    ></slot>
  </div>
</template>

<style>
.clam-box {
  width: 100%;
  height: 100%;
}
.empty_view {
  padding-top: 50px;
  padding-bottom: 50px;
  align-items: center;
}
.empty_img {
  width: 310px;
  height: 218px;
}
.trip_text {
  font-size: 20px;
  color: #999999;
}

.mt4 {
  margin-top: 4px;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.loading-center {
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.skeleton-view-default-view span,
.skeleton-view-default-view a,
.skeleton-view-default-view img,
.skeleton-view-default-view td,
.skeleton-view-default-view button {
  transition-duration: 0.7s;
  transition-timing-function: ease;
  transition-property: background, width;
}

.skeleton-view-empty-view {
  position: relative;
  pointer-events: none;
}

.skeleton-view-empty-view::before {
  content: " ";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0.1) 40%,
    rgba(180, 199, 255, 0.3) 50%,
    rgba(255, 255, 255, 0.1) 60%
  );
  background-size: 200% 100%;
  background-position-x: 180%;
  animation: loading 1s ease-in-out infinite;
  z-index: 1;
}

@keyframes loading {
  to {
    background-position-x: -20%;
  }
}

.skeleton-view-empty-view .skeleton-mask {
  position: relative;
}
.skeleton-view-empty-view .skeleton-mask::before {
  content: " ";
  background-color: #f5f5f5;
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid #f5f5f5;
  top: -1px;
  left: -1px;
  z-index: 1;
}

.skeleton-view-empty-view button,
.skeleton-view-empty-view span,
.skeleton-view-empty-view input,
.skeleton-view-empty-view td,
.skeleton-view-empty-view a {
  color: rgba(0, 0, 0, 0) !important;
  border: none;
  background: #f5f5f5 !important;
}
/* [src=""],img:not([src])*/
.skeleton-view-empty-view img {
  content: url(./no_url.png);
  border-radius: 2px;
  background: #f5f5f5 !important;
}
</style>

使用 index.vue

<script setup name="SkeletonView" lang="ts">
import SkeletonView from "@/components/SkeletonView/index.vue";
import { useAutoSkeletonView } from "./useAutoSkeletonView";
import { listApi } from "@/api";

const view = useAutoSkeletonView({
  apiFun: listApi,
});
</script>

<template>
  <div class="col">
    <SkeletonView
      v-slot="{ result }"
      v-bind="view.bindProps"
      v-on="view.bindEvents"
    >
      <span>{{ result }}</span>
    </SkeletonView>
  </div>
</template>

这里的SkeletonView不光用v-bind绑定了hook抛出的属性，还用v-on绑定的事件，目的就是监听请求报错时出现的“重试”按钮的点击事件。

使用优化

经常写react的朋友可能早就看出来了，这不是跟react中的一部分hook用法如出一辙吗？没错，很多人写react就这么写，而且react中绑定hook跟组件更简单，只需要...就可以了，比如：

function Demo(){
    const select = useSelect({
        apiFun:getDict
    })
    // 这里可以直接用...将useSelect返回的属性与方法全部绑定给Select组件
    return <Select {...select}>;
}

比起vue的v-bind和v-on算是简便了不少。那么，有没有一种办法也能做到差不多的效果呢？就比如能做到v-xxx="select"。

博主首先想到的就是vue的自定义指令了，文档在这里，但是折腾了半天发现行不通，因为自定义指令主要还是针对dom来的。vue官网原话：

总的来说，不推荐在组件上使用自定义指令。

那么就只能考虑打包插件了，只要我们在vue解析template之前把v-xxx="select"翻译成v-bind="select.bindProps" v-on="select.bindEvents" 就好了，听起来并不难，只要我们开发的时候规定绑定组件的hook返回格式必须有bindProps和bindEvents就好了。

思路有了，直接开干，现在vue官网的默认创建方式也改成vite，我们就直接写vite的插件（不想看可以跳到最后用现成的）：

// component-enhance-hook
import type { PluginOption } from "vite";

// 可以自定义hook绑定的前缀、绑定的属性值合集对应的键和事件合集对应的键
type HookBindPluginOptions = {
  prefix?: string;
  bindKey?: string;
  eventKey?: string;
};
export const viteHookBind = (options?: HookBindPluginOptions): PluginOption => {
  const { prefix, bindKey, eventKey } = Object.assign(
    {
      prefix: "v-ehb",
      bindKey: "bindProps",
      eventKey: "bindEvents",
    },
    options
  );

  return {
    name: "vite-plugin-vue-component-enhance-hook-bind",
    enforce: "pre",
    transform: (code, id) => {
      const last = id.substring(id.length - 4);

      if (last === ".vue") {
        // 处理之前先判断一下
        if (code.indexOf(prefix) === -1) {
          return code;
        }
        // 获取 template 开头
        const templateStrStart = code.indexOf("<template>");
        // 获取 template 结尾
        const templateStrEnd = code.lastIndexOf("</template>");

        let templateStr = code.substring(templateStrStart, templateStrEnd + 11);

        let startIndex;
        // 循环转换 template 中的hook绑定指令
        while ((startIndex = templateStr.indexOf(prefix)) > -1) {
          const endIndex = templateStr.indexOf(`"`, startIndex + 7);
          const str = templateStr.substring(startIndex, endIndex + 1);
          const obj = str.split(`"`)[1];

          const newStr = templateStr.replace(
            str,
            `v-bind="${obj}.${bindKey}" v-on="${obj}.${eventKey}"`
          );

          templateStr = newStr;
        }

        // 拼接并返回
        return (
          code.substring(0, templateStrStart) +
          templateStr +
          code.substring(templateStrEnd + 11)
        );
      }

      return code;
    },
  };
};

应用插件

import { fileURLToPath, URL } from "node:url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";

import { viteHookBind } from "./vBindPlugin";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx(), viteHookBind()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

修改一下vue中的用法

<script setup name="SkeletonView" lang="ts">
import SkeletonView from "@/components/SkeletonView/index.vue";
import { useAutoSkeletonView } from "./useAutoSkeletonView";
import { listApi } from "@/api";

const view = useAutoSkeletonView({
  queryInMount: true,
  apiFun: listApi,
  placeholderResult: [
    {
      key: 1,
      name: "苹果",
      value: 1,
    },
    {
      key: 2,
      name: "香蕉",
      value: 2,
    },
    {
      key: 3,
      name: "橘子",
      value: 3,
    },
  ],
});
</script>

<template>
  <div class="col">
    <SkeletonView v-slot="{ result }" v-ehb="view">
      <span>{{ result }}</span>
    </SkeletonView>
  </div>
</template>

OK! 完成了！

使用npm安装

不过我也提前打包编译好了发布在了npm上，需要的话可以直接使用这个

npm i vite-plugin-vue-hook-enhance -D

改一下引入方式就可以了

import { viteHookBind } from "vite-plugin-vue-hook-enhance";

本文转载于：

https://juejin.cn/post/7181712900094951483

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

 

强迫vue3codegtclassVue

有关记录--【vue3】写hook三天，治好了我的组件封装强迫症。的更多相关文章

  1. ruby - Sinatra:运行 rspec 测试时记录噪音 - 2

    Sinatra新手；我正在运行一些rspec测试，但在日志中收到了一堆不需要的噪音。如何消除日志中过多的噪音？我仔细检查了环境是否设置为:test，这意味着记录器级别应设置为WARN而不是DEBUG。spec_helper:require"./app"require"sinatra"require"rspec"require"rack/test"require"database_cleaner"require"factory_girl"set:environment,:testFactoryGirl.definition_file_paths=%w{./factories./test/

  2. ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby​​ 变量的内容？ - 2

    我是一个Rails初学者，但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby​​中打印出变量(认为它会在终端中出现)，但没有得到任何结果。有什么建议吗？我知道Rails调试器，但更喜欢使用inspect来打印我的变量。 最佳答案 您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R

  3. ruby-on-rails - Rails 5 Active Record 记录无效错误 - 2

    我有两个Rails模型，即Invoice和Invoice_details。一个Invoice_details属于Invoice，一个Invoice有多个Invoice_details。我无法使用accepts_nested_attributes_forinInvoice通过Invoice模型保存Invoice_details。我收到以下错误:(0.2ms)BEGIN(0.2ms)ROLLBACKCompleted422UnprocessableEntityin25ms(ActiveRecord:4.0ms)ActiveRecord::RecordInvalid(Validationfa

  4. ruby - 我可以将我的 README.textile 以正确的格式放入我的 RDoc 中吗？ - 2

    我喜欢使用Textile或Markdown为我的项目编写自述文件，但是当我生成RDoc时，自述文件被解释为RDoc并且看起来非常糟糕。有没有办法让RDoc通过RedCloth或BlueCloth而不是它自己的格式化程序运行文件？它可以配置为自动检测文件后缀的格式吗？(例如README.textile通过RedCloth运行，但README.mdown通过BlueCloth运行) 最佳答案 使用YARD直接代替RDoc将允许您包含Textile或Markdown文件，只要它们的文件后缀是合理的。我经常使用类似于以下Rake任务的东西:

  5. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  6. java - 我的模型类或其他类中应该有逻辑吗 - 2

    我只想对我一直在思考的这个问题有其他意见，例如我有classuser_controller和classuserclassUserattr_accessor:name,:usernameendclassUserController//dosomethingaboutanythingaboutusersend问题是我的User类中是否应该有逻辑user=User.newuser.do_something(user1)oritshouldbeuser_controller=UserController.newuser_controller.do_something(user1,user2)我

  7. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  8. ruby-on-rails - 事件记录 : Select max of limit - 2

    我正在尝试将以下SQL查询转换为ActiveRecord，它正在融化我的大脑。deletefromtablewhereid有什么想法吗？我想做的是限制表中的行数。所以，我想删除少于最近10个条目的所有内容。编辑:通过结合以下几个答案找到了解决方案。Temperature.where('id这给我留下了最新的10个条目。 最佳答案 从您的SQL来看，您似乎想要从表中删除前10条记录。我相信到目前为止的大多数答案都会如此。这里有两个额外的选择:基于MurifoX的版本:Table.where(:id=>Table.order(:id).

  9. ruby-on-rails - 测试我的 Ruby gem:Shoulda::Matchers:Module (NoMethodError) 的未定义方法 `configure' - 2

    我正在开发我的第一个Rubygem，并捆绑了cucumber、rspec和shoulda-matches进行测试。当我运行rspec时，出现以下错误:/app/my_gem/spec/spec_helper.rb:6:in`':undefinedmethod`configure'forShoulda::Matchers:Module(NoMethodError)这是我的gem规范:#my_gem.gemspec...Gem::Specification.newdo|spec|......spec.add_development_dependency"activemodel"spec.a

  10. ruby-on-rails - Heroku 吃掉了我的自定义 HTTP header - 2

    我正在使用Heroku(heroku.com)来部署我的Rails应用程序，并且正在构建一个iPhone客户端来与之交互。我的目的是将手机的唯一设备标识符作为HTTPheader传递给应用程序以进行身份​​验证。当我在本地测试时，我的header通过得很好，但在Heroku上它似乎去掉了我的自定义header。我用ruby​​脚本验证:url=URI.parse('http://#{myapp}.heroku.com/')#url=URI.parse('http://localhost:3000/')req=Net::HTTP::Post.new(url.path)#boguspara

随机推荐