小编Raz*_*fir的帖子

我有 5 个盒子：三个在第一行，接下来的两个在第二行：

我希望除第二个之外的所有盒子都具有相同的高度，并且第五^{个盒子位于第三个}盒子的正下方。

我用 flexbox 尝试过，现在我用display: grid. 如果可能的话，我正在寻找纯CSS解决方案。

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-auto-rows: min-content;
  grid-gap: 0;
  background-color: #2196F3;
}
.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  border: 1px solid #ccc;
  font-size: 30px;
}
.item4 {
  grid-column-start: 1;
  grid-column-end: 3;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="grid-container">
  <div class="item1"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
  <div class="item2"><p>Lorem ipsum dolor sit amet, consectetur …

我正在使用Express、EJS和 MongoDB 开发博客应用程序（单击链接以查看GitHub 存储库）。

我为帖子制作了一个简单的寻呼机。

在帖子控制器中，我有：

exports.getPosts = async (req, res, next) => {

  const posts = await Post.find({}, (err, posts) => {

      const perPage = 10;

      const currPage = req.query.page ? parseInt(req.query.page) : 1;

      const postsCount = posts.length;

      const pageCount = Math.ceil(postsCount / perPage);

      const pageDecrement = currPage > 1 ? 1 : 0;

      const pageIncrement = currPage < pageCount ? 1 : 0;

      if (err) {
        console.log("Error: ", …

假设我在Tailwindcss的帮助下制作了这个 2 x 2 的网格布局：

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css" rel="stylesheet"/>
<div class="inline-grid grid-cols-2 grid-rows-2">
  <div class="px-1">Full name:</div>
  <div class="px-1">Favoutite fruits:</div>
  <div class="px-1">John Doe</div>
  <div class="px-1">
    <ul>
      <li>Apples</li>
      <li>Oranges</li>
      <li>Bananas</li>
    </ul>
  </div>
</div>

上述布局的问题在于行的高度相等，换句话说，所有网格项都被迫具有它们中最高的高度。

第一行的项目必须具有仅一行文本所需的高度。

我如何做到这一点？

我正在使用 Svelte 开发一个小型待办事项应用程序。我从 jsonplaceholder 列出了 10 个待办事项。

我在 App.svelte 中有这个：

<script>
    import { onMount } from "svelte";
    import Header from './Header.svelte';
    import ToDoList from './ToDoList.svelte';
    import Footer from './Footer.svelte';
    const apiURL = "https://jsonplaceholder.typicode.com/todos";
    const limit = 10;
    let todos = [];
    export let unsolvedTodos = [];
    
    onMount(() => {
        getTodos();
    });
    
    const getTodos = () => {
        fetch(`${apiURL}?&_limit=${limit}`)
        .then(res => res.json())
        .then((data) => todos = data)
        .then(getUnsolvedTodos);
    }
    
    const getUnsolvedTodos = () => {
        unsolvedTodos = todos.filter(todo => {
            return …

我正在使用 Laravel 8 和 Bootstrap 5 制作一个博客应用程序。我使用放置在 Bootstrap 模式中的表单来添加帖子。此外，我还在项目中包含了一个 JavaScript 文件。

<script src="{{ asset('js/app.js') }}"></script>

在 中resources/js，我有一个 app.js 和一个 bootstrap.js 文件。在 app.js 中，我需要 bootstrap.js

require('./bootstrap')

我将webpack.mix.js所有这些编译到单个 JavaScript 文件中public\js\app.js：

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .sourceMaps();

我想将 popper.js 添加到项目中，如下所示：

require('./popper');
require('./bootstrap');

但是，为此目的，我需要 popper.jsresources/js以及其他两个文件。所以，我做了npm i @popperjs/core并且npm run dev。但它无法编译，并且我在上述 js 目录中没有得到 popper.js 。那么，我该如何解决这个问题呢？

我正在使用Express、EJS和 MongoDB开发一个博客应用程序（单击链接查看GitHub存储库）。

我正在尝试引入添加帖子图像功能。作为 Express 的新手，我对遇到的问题感到困惑。

添加帖子表单：

<form action="/dashboard/post/add" method="POST" enctype="multipart/form-data" class="mb-0">
  <div class="form-group">
    <input type="text" class="form-control" name="title" value="<%= typeof form!='undefined' ? form.titleholder : '' %>" placeholder="Title" />
  </div>
  <div class="form-group">
    <input type="text" class="form-control" name="excerpt" value="<%= typeof form!='undefined' ? form.excerptholder : '' %>" placeholder="Excerpt" />
  </div>
  <div class="form-group">
    <textarea rows="5" class="form-control" name="body" placeholder="Full text"><%= typeof form!='undefined' ? form.bodyholder : '' %></textarea>
  </div>
  <label for="postimage">Upload an image</label>
  <div class="form-group">
    <input type="file" name="postimage" id="postimage" …

我正在开发一个小型 Svelte 应用程序，用于学习目的（我是 Svelte 新手）。该应用程序使用在视图中显示为 HTML 表格的对象数组：

let countries = [
    { code: "AF", name: "Afghanistan" },
    { code: "AL", name: "Albania" },
    { code: "IL", name: "Israel" }
]; 

<table class="table table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>Code</th>
      <th>Name</th>
      <th class="text-right">Actions</th>
    </tr>
  </thead>
  <tbody>
    {#if countries.length}
     {#each countries as c, index}  
      <tr>
       <td>{index+1}</td>
       <td>{c.code}</td>
       <td>{c.name}</td>
       <td class="text-right">
        <button data-code="{c.code}" on:click="{deleteCountry}" class="btn btn-sm btn-danger">Delete</button>
       </td>
      </tr>
     {/each}
    {:else}
    <tr>
      <td colspan="4">There are no countries</td>
    </tr>
    {/if}
  </tbody>
</table>

我正在这样进行删除操作：

function deleteCountry(){
    let …

我在处理一个应该从另一个对象数组返回一个对象数组的函数时卡住了。如下所示，我只使用一个键并返回一个“简单”数组而不是对象数组：

function pluck(array, key) {
  return array.map(x => x[key]);
}

var myArr = [{
  name: "United Kingdom",
  alpha3: "GBR",
  code: "GB",
  region: "Europe",
  tax: 5,
  status: 1
}, {
  name: "Romania",
  alpha3: "ROM",
  code: "RO",
  region: "Europe",
  tax: 3,
  status: 1
}];

myArr = pluck(myArr, 'name');

console.log(myArr);

如果我使用 2 个（或更多）键，我仍然会得到一个与最后使用的键相对应的“简单”值数组：

function pluck(array, key1, key2) {
  return array.map(x => x[key1, key2]);
}

var myArr = [{
  name: "United Kingdom",
  alpha3: "GBR",
  code: "GB",
  region: "Europe",
  tax: 5, …

我正在开发 Laravel 8 应用程序。我需要用于Route::is多条路线，就像这样

@if(Route::is('user') or Route::is('register') or Route::is('login'))
    Do something
@endif

目标

我想缩短这个语法，所以我尝试将路由作为参数传递给该Route::is()方法：

@if(Route::is('user,register,login'))
    Do something
@endif

问题

上面的方法不行。

是否有另一种可行的方法来传递多个路由作为参数？

我正在 Svelte 方法的帮助下迭代 JSON onMount。我已将数据显示在表格中。

<script>
    import { onMount } from "svelte";

    const apiURL = "https://gist.githubusercontent.com/Goles/3196253/raw/9ca4e7e62ea5ad935bb3580dc0a07d9df033b451/CountryCodes.json";        
    let countries = [];
    
    onMount(async function() {
       const response = await fetch(apiURL);
       countries = await response.json();
    });

</script>

<table class="table table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Code</th>
    </tr>
  </thead>
  <tbody>
    {#if countries}
     {#each countries as country }  
     <tr>
      <td>{index + 1}</td>
      <td>{country.name}</td>
      <td>{country.code}</td>
     </tr>
     {/each}
    {:else}
    <p>There are no countries</p>
    {/if}
  </tbody>
</table>

我无法做的是添加迭代计数列。使用{index + 1}。

我怎样才能得到想要的结果？

在 Svelte 应用程序中，我有一个带有简单验证的表单。

表格

<form id="surveyForm" class="mt-4">
    <div class="form-group">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
    <button class="btn btn-full" on:click={Continue}>Continue</button>
</form>

验证：

import {fly, fade} from 'svelte/transition';
let hasError = false;
let errMessage = "";
let isSuccessVisible = false;

function validateInput() {
    var surveyForm = document.getElementById('surveyForm'),
        inputFields = surveyForm.querySelectorAll('input[type=text]');

    hasError = false;

    inputFields.forEach(function(field) {
        field.classList.remove("is-invalid");
        var inputFieldVal = field.value;
        if (inputFieldVal.length == 0) {
            field.classList.add("is-invalid");
            hasError = true;
        }
    });
    errMessage = "All …

使用Bootstrap 4，如何使固定顶部导航栏在滚动时消失？我已在HTML代码下方附加了默认的Bootstrap 4导航栏。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  <a class="navbar-brand" href="#">Test</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav ml-auto py-md-2">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
  </div>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>