Question

我正在建立一个网站，我需要按类型过滤产品，我有一个包含id，名称，价格和类型的mongodb集合，其想法是显示所有产品，并且当用户单击rigth菜单时显示指定的类型在同一页面中，更改内容

这是用于显示所有产品

<% for(var i =0; i < listaProducto.length; i++) { %>
    <div class="col-sm-12 col-md-6 col-lg-4 p-b-50">
        <!-- Block2 -->
        <div class="block2">
            <div class="block2-img wrap-pic-w of-hidden pos-relative block2-labelnew">
                <img src= " <%= listaProducto[i].ruta %> ">

                <div class="block2-overlay trans-0-4">
                    <a href="#" class="block2-btn-addwishlist hov-pointer trans-0-4">
                        <i class="icon-wishlist icon_heart_alt" aria-hidden="true"></i>
                        <i class="icon-wishlist icon_heart dis-none" aria-hidden="true"></i>
                    </a>

                    <div class="block2-btn-addcart w-size1 trans-0-4">
                        <!-- Button -->
                        <button class="flex-c-m size1 bg4 bo-rad-23 hov1 s-text1 trans-0-4">
                            Add to Cart
                        </button>
                    </div>
                </div>
            </div>

            <div class="block2-txt p-t-20">
                <a href="product-detail.html" class="block2-name dis-block s-text3 p-b-5" id="nombreProducto">
                    <%= listaProducto[i].nombre %>
                </a>

                <span class="block2-price m-text6 p-r-5">
                        <%= listaProducto[i].precio %>
                </span>
            </div>
        </div>
    </div>

<% } %>

右键菜单

<ul class="p-b-54">
    <li class="p-t-4">
        <a href="product" class="s-text13 active1">
            Ver Todo
        </a>
    </li>

    <li class="p-t-4">
        <a href="product?<tipo=impresora>" class="s-text13 active1">
            Impresoras
        </a>
    </li>

    <li class="p-t-4">
        <a href="producto-etiquetadoras.html" class="s-text13 active1">
            Etiquetadoras
        </a>
    </li>

    <li class="p-t-4">
        <a href="producto-etiquetas-autoadhesivas.html" class="s-text13 active1">
            Etiquetas Autoadhesivas
        </a>
    </li>

    <li class="p-t-4">
        <a href="producto-marquillas.html" class="s-text13 active1">
            Marquillas
        </a>
    </li>
</ul>

这是获取页面

router.get('/product', async (req, res, next) => {
  const listaProducto = await prodcutos.find();
  res.render('product',{
    listaProducto
  });
});

和架构

const mongoose = require('mongoose');
const bcrypt = require('bcrypt-nodejs');

const { Schema } = mongoose;

const productSchema = new Schema({
  id: String,
  nombre: String,
  tipo: String,
  precio: String,
  ruta: String
});
var producto = module.exports = mongoose.model('products', productSchema);

我想当用户单击rigth菜单中的列表项时，在同一页面上显示该类型的产品以更改内容（可能与for一起使用）

Answer 1

我解决了它，只是让另一个人进入了路线并像这样更改了href（我也添加了分页及其使用：page的理由）

router.get('/product/type/:tipo/:page', async (req, res, next) => {
  const tipo = req.params.tipo;
  let perPage = 6;
  let page = req.params.page || 1;
  productos.find({ "tipo": tipo })
  .skip((perPage*page)-perPage)
  .limit(perPage)
  .exec((err, listaProducto) =>{
    productos.find({ "tipo": tipo }).count((err, count) =>{
      if(err) return next(err);
      res.render('product',{
       listaProducto,
       current : page,
       pages : Math.ceil(count / perPage),
       total: count,
       typeIn: tipo
      });
    })
  })
});

和右键菜单

<ul class="p-b-54">
                        <li class="p-t-4">
                            <a href="/product/1" class="s-text13 active1"> 
                                Ver Todo
                            </a>
                        </li>

                        <li class="p-t-4">
                            <a href="/product/type/impresora/1" class="s-text13 active1">  
                                Impresoras
                            </a>
                        </li>

                        <li class="p-t-4">
                            <a href="/product/type/etiquetadora/1" class="s-text13 active1">
                                Etiquetadoras
                            </a>
                        </li> 

                        <li class="p-t-4">
                            <a href="/product/type/etiqueta/1" class="s-text13 active1">
                                Etiquetas Autoadhesivas
                            </a>
                        </li>

                        <li class="p-t-4">
                            <a href="/product/type/marquilla/1" class="s-text13 active1">
                                Marquillas
                            </a>
                        </li>
                    </ul>

如何在mogodb中过滤模式并重定向数据过滤的同一页面

1 个答案: