大佬论坛：dalao.net

Ch~at~G~P~T：帮我写一个带后台的域名售卖网页 [复制链接]

帖子链接已复制到剪贴板
帮主 (UID: 107) 2023-11-7
收藏
帖子已经有人评论啦，不支持删除！
1667 0

以下是一个简单的带后台的域名售卖网页的示例代码：

前端代码（HTML、CSS和JavaScript）：

<!DOCTYPE html>
<html>
<head>
  <title>域名售卖网页</title>
  <style>
    /* CSS样式 */
    /* ... */
  </style>
</head>
<body>
  <h1>域名售卖网页</h1>
  
  <form id="domainForm">
    <label for="domainName">域名：</label>
    <input type="text" id="domainName" name="domainName" required>
    <br>
    <label for="price">价格：</label>
    <input type="number" id="price" name="price" required>
    <br>
    <button type="submit">提交</button>
  </form>
  
  <div id="domainList">
    <!-- 域名列表将通过JavaScript动态生成 -->
  </div>
  
  <script>
    // JavaScript代码
    const domainForm = document.getElementById('domainForm');
    const domainList = document.getElementById('domainList');
    
    domainForm.addEventListener('submit', function(event) {
      event.preventDefault();
      
      const domainName = document.getElementById('domainName').value;
      const price = document.getElementById('price').value;
      
      // 发送POST请求将域名和价格保存到后台数据库
      fetch('/api/domains', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ domainName, price })
      })
      .then(response => response.json())
      .then(data => {
        // 将新域名添加到域名列表
        const domainItem = document.createElement('div');
        domainItem.textContent = `${data.domainName} - ￥${data.price}`;
        domainList.appendChild(domainItem);
        
        // 清空表单
        domainForm.reset();
      })
      .catch(error => {
        console.error('Error:', error);
      });
    });
    
    // 页面加载时从后台获取已有域名列表
    fetch('/api/domains')
      .then(response => response.json())
      .then(data => {
        data.forEach(domain => {
          const domainItem = document.createElement('div');
          domainItem.textContent = `${domain.domainName} - ￥${domain.price}`;
          domainList.appendChild(domainItem);
        });
      })
      .catch(error => {
        console.error('Error:', error);
      });
  </script>
</body>
</html>
html

后端代码（使用Node.js和Express框架）：

const express = require('express');
const app = express();
const bodyParser = require('body-parser');

// 使用JSON解析请求体
app.use(bodyParser.json());

// 模拟一个域名数据库
let domains = [];

// 获取所有域名
app.get('/api/domains', (req, res) => {
  res.json(domains);
});

// 添加新域名
app.post('/api/domains', (req, res) => {
  const domain = req.body;
  domains.push(domain);
  res.json(domain);
});

// 启动服务器
app.listen(3000, () => {
  console.log('Server started on port 3000');
});
javascript

请注意，这只是一个简单的示例，可能需要根据实际需求进行修改和完善。另外，还需要安装Node.js和Express框架来运行后端代码。

Name.Men 名门米表 ⛔
已有评论 (0)
提示：您必须 登录 才能查看此内容。
创建新帖
广告推广 （点击空位自助购买）