2. 技术
    3. node购物车接口

    node购物车接口

    技术2022-07-11  77

    index.html 主页面

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" /> <body> <a href="./new1.html" class="btn btn-primary">新增</a> <form action=""> <table class="table table-striped table-bordered"> <thead> <th>序号</th> <th>商品</th> <th>单价</th> <th>简介</th> <th>主图</th> <th>库存</th> <th>操作</th> </thead> <tbody id="list"> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td> <input type="button" value="删除" /> <input type="button" value="修改" /> </td> </tr> </tbody> </table> </form> </body> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.1/jquery.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script> <script> $.ajax({ type: "get", url: "/abc", success: function (response) { var strHtml = ""; var num = 0; response.forEach( (item) => ( num++, (strHtml += `<tr id=${item.id}> <td>${num}</td> <td>${item.name}</td> <td>${item.price}</td> <td>${item.con}</td> <td><img src="${item.img}" alt="" width="50px";height="50px"></td> <td>${item.store}</td> <td> <input type="button" class="del" value="删除"> <input type="button" class="change" value="修改"> </td> </tr> `) ) ); $("#list").html(strHtml); //删除 $(".del").click(function () { var id = $(this).parent().parent().attr("id"); console.log(id); $.ajax({ type: "delete", url: `/abc/${id}`, success: function (response) { alert("删除成功"); window.location.href = "./index.html"; }, }); }); //修改 $(".change").click(function () { var id = $(this).parent().parent().attr("id"); console.log(id); window.location.href = "./change.html?id=" + id; }); }, }); </script> </html>

    index.js 接口JS

    const express = require("express"); const app = express(); const fs = require("fs"); app.use(express.urlencoded()); app.use("/", express.static("./public")); const axios = require('axios'); // app.get("/", (req, res) => { // res.send("abc"); // }); app.get("/abc", (req, res) => { const pro = JSON.parse(fs.readFileSync("./db/pro.json").toString()); res.json(pro); }); app.post("/abc", (req, res) => { const pro = JSON.parse(fs.readFileSync("./db/pro.json").toString()); pro.push({ id: Date.now(), ...req.body }); fs.writeFileSync("./db/pro.json", JSON.stringify(pro)); res.json({ code: 1, msg: "保存数据成功", }); }); app.delete("/abc/:id", (req, res) => { const { id } = req.params; const pro = JSON.parse(fs.readFileSync("./db/pro.json").toString()); const index = pro.findIndex((item) => item.id == id); pro.splice(index, 1); fs.writeFileSync("./db/pro.json", JSON.stringify(pro)); res.json({ code: 1, msg: "删除成功", }); }); app.put("/abc/:id", (req, res) => { const { id } = req.params; const pro = JSON.parse(fs.readFileSync("./db/pro.json").toString()); const index = pro.findIndex((item) => item.id == id); pro[index] = { ...{ id }, ...req.body }; fs.writeFileSync("./db/pro.json", JSON.stringify(pro)); res.json({ code: 1, msg: "修改成功", }); }); app.listen(2222, () => { console.log("服务器运行在2222端口") });

    app.js 监听端口

    // console.log("1111"); const http = require("http"); const fs = require("fs"); // 创建一个web服务器，监听3333端口 // req request 请求,客户端向服务器发起 // res response 相应,服务器返回客户端 http .createServer((req, res) => { console.log(req.method); console.log(req.url); console.log(req.headers); // if (req.url == "/index.html") { // res.setHeader("Content-Type", "text/html;charset=utf-8"); // 设置请求头 // // res.end("你请求的是index.html"); // const strHtml = fs.readFileSync("./public/index.html").toString(); // res.end(strHtml); // } else { // res.end("hello world"); // 输出内容 // } res.setHeader("Content-Type", "text/html;charset=utf-8"); // 创建了一个静态服务器,可以用来解析html等静态文件 if (req.url == "/" || req.url == "/favicon.ico") { res.end("hello world"); } else { try { const strHtml = fs.readFileSync("./public" + req.url).toString(); res.end(strHtml); } catch (err) { res.statusCode = 404; // 设置404状态码 res.end("404"); } } }) .listen(2222);

    new1.html 新增页面

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <ul class="table"> <li><input type="text" id="name" placeholder="请输入商品名称" /></li> <li><input type="text" id="price" placeholder="请输入商品单价" /></li> <li><input type="text" id="con" placeholder="请输入商品简介" /></li> <li><input type="text" id="img" placeholder="请输入商品主图" /></li> <li><input type="text" id="store" placeholder="请输入商品库存" /></li> <li><button id="btnSave">保存</button></li> </ul> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.1/jquery.js"></script> <script> $(function () { $("#btnSave").click(function () { if ( $("#name").val() && $("#price").val() && $("#con").val() && $("#img").val() && $("#store").val() ) { $.post( "/abc", { name: $("#name").val(), price: $("#price").val(), con: $("#con").val(), img: $("#img").val(), store: $("#store").val(), }, function (data, textStatus, jqXHR) { window.location.href = "./index.html"; } ); } else { alert("请输入内容"); } }); }); </script> </body> </html>

    change.html 修改页面

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <ul class="aaa"> <li><input type="text" id="name" placeholder="请输入商品名称" /></li> <li><input type="text" id="price" placeholder="请输入商品单价" /></li> <li><input type="text" id="con" placeholder="请输入商品简介" /></li> <li><input type="text" id="img" placeholder="请输入商品主图" /></li> <li><input type="text" id="store" placeholder="请输入商品库存" /></li> <li><button id="btnSave">保存</button></li> </ul> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.1/jquery.js"></script> <script> $(function () { var a = location.search; var a = a.slice(4); $.ajax({ type: "get", url: `/abc/`, success: function (res) { res.forEach((item) => { if (item.id == a) { var str = ` <li>商品名：<input type="text" id="name" placeholder="${item.name}" /></li> <li>单价：<input type="text" id="price" placeholder="${item.price}" /></li> <li>简介<input type="text" id="con" placeholder="${item.con}" /></li> <li>主图<input type="text" id="img" placeholder="${item.img}" /></li> <li>库存<input type="text" id="store" placeholder="${item.store}" /></li> <li><button id="btnSave">保存</button></li> ` $(".aaa").html(str); $("#btnSave").click(function () { var a = location.search; var a = a.slice(4); //判断是否更改，保已更改内容和未更改内容 item.name = ($("#name").val()) ? ($("#name") .val()) : (item.name); item.price = ($("#price").val()) ? ($("#price") .val()) : (item.price); item.con = ($("#con").val()) ? ($("#con").val()) : ( item.con); item.img = ($("#img").val()) ? ($("#img").val()) : ( item.img); item.store = ($("#store").val()) ? ($("#store") .val()) : (item.store); console.log($("#name").val()); $.ajax({ type: "put", url: `/abc/${a}`, data: item, success: function (res) { window.location.href = "./index.html"; } }) }); }; }); } }); }); </script> </body> </html>

    package.json

    { "name": "2020-06-30", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "node app", "dev": "nodemon index" }, "keywords": [], "author": "Arivin <btc022003@gmail.com>", "license": "ISC", "dependencies": { "axios": "^0.19.2", "express": "^4.17.1", "fs": "0.0.1-security" } }

    效果图

    可实现增删改

    Processed: 0.014, SQL: 9