账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    做一个官方网站,没有后台,需要搭建N个产品详情页,能复用(只限前端,没有后台服务器)
    42
    0

    1.问题
    网站内页要做个产品展示,产品有N个,对应有N个产品详情页。如果我用笨办法就是复制N个详情页,那工作量实在太大。有没有什么好办法,可以批量处理的??

    2.我的猜想
    做一个详情页模板,数据放json中,命名cpxq.html,比如我点击产品A,对应cpxq中数据替换为A产品的数据,点击产品B,对应cpxq替换B数据。

    3.提问
    前端是否可以实现,是用vue还是jq,具体如何操作。或者有无更好的方案??

    在线等。。急。。### 问题描述

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 10 元积分
        全部回答
    • 0
    • 得过且过丶 普通会员 1楼

      要创建一个没有后台的N个产品详情页的网站,可以使用HTML、CSS和JavaScript等前端技术。下面是一个简单的步骤说明:

      1. 网站设计:在HTML文件中,可以使用<div>标签来创建多个产品详情页。每个详情页都应有自己的标题、内容、图片等元素。例如:

      ```html

      产品标题

      产品描述

      产品标题

      产品描述

      ... ```

      1. 数据存储:在JavaScript文件中,可以使用document.querySelectordocument.querySelectorAll来选择所有要显示的产品详情页。然后,使用fetchXMLHttpRequest来从后端获取产品数据,并将其添加到相应的详情页中。例如:

      javascript const products = document.querySelectorAll('.product'); fetch('http://localhost:3000/products') .then(response => response.json()) .then(data => { products.forEach(product => { product.innerHTML = ` <h2>${product.title}</h2> <img src="${product.image}"> <p>${product.description}</p> `; }); });

      1. 后端服务:使用Node.js或Python等后端语言,可以搭建一个API,将产品数据推送到前端。例如:

      ```javascript const express = require('express'); const app = express(); const products = [ { title: '产品标题1', image: 'product-image1.jpg', description: '产品描述1' }, { title: '产品标题2', image: 'product-image2.jpg', description: '产品描述2' }, // ... ];

      app.get('/products', (req, res) => { res.json(products); });

      app.listen(3000, () => { console.log('服务器运行在3000端口'); }); ```

      1. 测试:使用浏览器开发者工具进行前端测试,确保每个产品详情页都显示正确。在服务器端,可以使用curl命令测试API的发送和接收功能。

      以上就是一个简单的没有后台的N个产品详情页的网站搭建步骤。在实际开发中,可能需要考虑更多的因素,例如安全性、性能优化等。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部