小编hrp*_*xQ4的帖子

关于if语句，可以重构此代码

（这只是一个示例，并未引用“真实”代码）

if(person === 'customer' || person === 'employee' || person === 'other')

至

if(person === ('customer' || 'employee' || 'other'))

目前，我有一个state包含3个布尔属性的对象。如果至少有一个属性返回，我想显示一个覆盖图true。我当前的解决方案是

showOverlay: state => state.isNavigating || state.isHttpRequesting || state.isProcessing

我在问是否有办法清理它。伪代码将是

showOverlay: state => (isNavigating || isHttpRequesting || isProcessing) of state

我知道不会有什么大的收获，但是它将删除所有state. ...部分。

我想创建一个像这个例子的about页面

我想我差不多了,我有一个响应容器,有4个人

#about {
  background: #ffffff;
}

#aboutHeader {
  text-align: center;
}

#members {
  display: flex;
  flex-wrap: wrap;
}

#aboutAttracting {
  text-align: center;
  margin-top: 70px;
}

.memberContainer {
  width: 50%;
  display: flex;
  margin-top: 50px;
}

.memberFocus {
  width: 70%;
}

.sectionHeader {
  margin-bottom: 70px;
}

.section {
  padding: 100px 200px;
}

@media(max-width: 1200px) {
  .section {
    padding: 80px 150px;
  }
  .memberFocus {
    width: 80%;
  }
}

@media(max-width: 1100px) {
  .memberFocus {
    width: 90%;
  }
}

@media(max-width: 1000px) { …

对于Web开发，React或Vue似乎是必须具备的框架。目前，我刚刚对NodeJ和Handlebars有所了解。

我知道Handlebars运行服务器端渲染，Vue和React运行客户端渲染。使用Vue或React使可重用组件成为可能。使用服务器端模板引擎需要基本布局。

假设我有一个包含某些路由的网站/网络应用程序。为什么我应该将Vue用于HTML组件而不是Handlebars HTML？

到目前为止，我学到的是

• 改进我的SQL语句，在通过代码处理数据之前执行
• 在客户端上可以由服务器完成的操作，在服务器上执行，因为它具有更大的功能

现在每个人都在使用Vue或React，为什么我应该离开旧结构并开始将代码外包给客户端？

我想创建一个基本的Vue应用程序，该应用程序提供基本功能，例如登录，通过侧栏导航等。但是导航栏项必须是可互换的。我想创建代表这些导航栏项目的单独Vue应用程序。

基本思想：应该提供 一个REST API和一个基本容器（Vue应用程序），该容器能够在特定div元素中呈现其他Vue应用程序。这将允许其他人添加自己的前端应用程序，并在需要时使用该API。所以我只提供一些基本的应用程序。主要思想是为非常模块化的管理系统创建一个即插即用系统。我将为该自定义应用提供注册过程，以便API知道该应用及其基本URL，我的基本应用可以提取所有这些应用。

基本应用设置

所以我的基本应用程序为这些自定义应用程序提供了一条路线

{
  path: '/app/*',
  component: CustomAppContainer,
},

并将呈现此视图

<template>
  <div id="customAppContainer">Render custom apps here</div>
</template>

而我的导航栏可以提供链接/app/one来导航和渲染其中名为“ one”的应用customAppContainer。

自定义应用设置

定义路线时，我必须设置base网址

export default new Router({
  base: '/one/',
  routes: [
    {
      path: '/',
      component: Home,
    },
  ],
});

但是对于main.js，我不确定如何设置。我想我必须将其更新为

new Vue({
  router,
  render: h => h(CustomAppContainer),
}).$mount('#customAppContainer');

但显然，此应用不知道CustomAppContainer和#customAppContainer。

此外，当我只有一些index.html文件并且想要将一个文件集成到另一个文件时，我正在考虑分发。那么，当用户希望通过/app/myCustomApp将定制应用程序安装到中来访问定制应用程序时，该如何部署基本应用程序customAppContainer呢？

一个类似的例子是Nextcloud

在开发新的Vue应用程序时，我可以将其作为独立的应用程序运行。但是对于生产而言，我想从dist文件夹中获取文件，并将它们放入apps目录中，并且在运行基本容器应用程序时，它在启动时就知道所有这些子应用程序。

如果您需要更多信息，请告诉我！

目前，我正在容器/主Vue应用的对象标签（iframe也可以工作）内渲染Vue应用。首先，我设置了一个文件服务器，为该容器或请求的子应用程序提供服务，以使其在div中呈现。

为了简单起见，我将仅显示Node / Express服务器所需的路由

// serve the sub-app on demand
router.get('/subApps/:appName', function(req, res) {
    res.sendFile(path.resolve(__dirname, `../apps/${req.params.appName}/index.html`);
});

// always render the app container if no sub-app was requested
router.get('*', function(req, res) {
    res.sendFile(path.resolve(__dirname, '../base/index.html'));
});

我的应用程序容器/主Vue应用程序位于上渲染的视图文件中/apps/:appName，请求该子应用程序并将其包装到对象标签中

  document.getElementById("customAppContainer").innerHTML = `<object style="width: 100%; height:100%;" data="http://localhost:3000/subApps/${appKey}"></object>`;

这种方法可以正常工作，但呈现的子应用程序http://localhost:3000/subApps/app-one虽然应使用url，但仍使用启动URL http://localhost:3000/apps/app-one。当子应用加载路由器实例时，我必须将启动网址从iframe网址更改为浏览器网址（父网址）。

我考虑过用 history.replaceState

const router = new Router({ ... });

router.afterEach((to, from) => {
    localStorage.subAppRouteUpdate = to.path;
});

if (window.location !== window.parent.location) {
    const browserUrl = top.location.href;
    history.replaceState(null, null, browserUrl);
} …

我有一个textfield组件，它将字符串作为参数并在输入上触发输入事件。然后，使用方组件可以更新此值。

此输入组件使用此示例代码

    <template>
      <v-text-field label="Your input here" :value="name" @input="input"></v-text-field>
    </template>

    <script>
    export default {
      props: {
        name: {
          type: String,
          required: true
        }
      },
      methods: {
        input: function(v) {
          this.$emit("input", v);
        }
      }
    };
    </script>

消费组件可以使用此示例代码

    <template>
      <v-app>
        <v-card>
          <v-card-title>Your name is: {{name}}</v-card-title>
          <NameInput :name="name" @input="fieldUpdated"/>
        </v-card>
      </v-app>
    </template>

    <script>
    import NameInput from "./components/NameInput";

    export default {
      components: {
        NameInput
      },
      data: function() {
        return {
          name: "The initial name"
        };
      },
      methods: {
        fieldUpdated: function(name) {
          this.name = name; …

我想创建一个 NestJs 应用程序，并希望有一个验证请求对象中的令牌的中间件和一个验证令牌有效负载中用户的身份验证守卫。

通过拆分这个，我希望有一个干净的分离。首先是我的中间件

@Injectable()
export class TokenMiddleware implements NestMiddleware {
  use(req: any, res: Response, next: NextFunction) {
    try {
      const headers: IncomingHttpHeaders = req.headers;
      const authorization: string = headers.authorization;
      const bearerToken: string[] = authorization.split(' ');
      const token: string = bearerToken[1];

      // !! Check if token was invalidated !!

      req.token = token;
      req.tokenPayload = verifyToken(token);
      next();
    } catch (error) {
      throw new UnauthorizedException();
    }
  }
}

它只验证令牌并使用编码的令牌及其有效负载扩展请求对象。我的身份守卫

@Injectable()
export class AuthenticationGuard implements CanActivate {
  constructor(private readonly usersService: UsersService) {}

  async …

我有一个使用REST API的客户端呈现的前端。前端应根据用户授权呈现一些元素。示例权限可能是

• 删除用户
• 也可以删除主管
• 创建用户
• 将用户添加到工作流
• ...

大量的权限由管理员管理。我的问题是：

您将如何知道此呈现页面具有哪些权限以及呈现什么？

我想到的唯一想法是创建一个API端点，/user/:id/permissions并要求用户拥有每个许可。一个示例响应对象可以是

[
  {
    "permissionId": 0,
    "description": "Has access to page"
  },
  {
    "permissionId": 1,
    "description": "Can create users"
  },
  {
    "permissionId": 2,
    "description": "Can delete users"
  }
  // ...
]

然后，我可以根据这些权限开始渲染HTML（伪代码/我通常使用VueJs）

<button render-if="permissions.contains(1)">This shows up if the user can create users</button>
<button render-if="permissions.contains(2)">This shows up if the user can delete other users</button>

我认为前端代码可能会有些混乱。API端点应该很好，但是也许有更好的解决方案。是否存在最佳实践解决方案？

我想在NestJs中记录传入请求和传出响应。我从此处获取了Nest.js中的记录请求/响应信息以及docs NestJs Aspect Interception文档。

通过不使用外部软件包来实现此目标将是非常棒的，因此我非常希望使用本机的“嵌套”解决方案。

对于请求记录，我目前使用此代码

@Injectable()
export class RequestInterceptor implements NestInterceptor {
  private logger: Logger = new Logger(RequestInterceptor.name);

  intercept(context: ExecutionContext, next: CallHandler): Observable<any> {
    const {
      originalUrl,
      method,
      params,
      query,
      body,
    } = context.switchToHttp().getRequest();

    this.logger.log({
      originalUrl,
      method,
      params,
      query,
      body,
    });

    return next.handle();
  }
}

这将记录以下结果 GET /users

我还想记录传出的响应。目前，我使用此拦截器

@Injectable()
export class ResponseInterceptor implements NestInterceptor {
  private logger: Logger = new Logger(ResponseInterceptor.name);

  intercept(context: ExecutionContext, next: CallHandler): Observable<any> {
    const { statusCode } = context.switchToHttp().getResponse();

    return next.handle().pipe( …

我正在使用 TypeORM 并希望用当前的三个实体设计我的数据库。我创建了一个用于复制的存储库

Github 复制库

更新

我只能用两个小实体来复制它

非常小的复制回购

下面的更多信息

所以首先我有一个模块实体。这个很小，因为它只存储一些基本字段。

@Entity()
export class Module extends BaseEntity {
  @PrimaryGeneratedColumn('uuid')
  public id: string;

  // some other fields without references
}

接下来我有一个图形实体。这个持有多个graphNodes。所以你可以有多个图，每个图都有自己的图节点。图本身需要知道哪个 graphNode 是图中的第一个。所以我尝试设置对 graphNode 实体的外键引用。

• 可以有多个图形
• 每个图都有一个 graphNode 作为起始节点
• 每个图有多个图节点

.

@Entity()
export class Graph extends BaseEntity {
  @PrimaryGeneratedColumn('uuid')
  public id: string;

  @Column({ nullable: true })
  public startNodeId?: string;

  @ManyToOne(
    () => GraphNode,
    graphNode => graphNode.id,
  )
  @JoinColumn({ name: 'startNodeId' })
  public startNode: GraphNode;
}

最后一个实体是 …