Strona główna Odkrywaj Pomoc
Zaloguj się
lovecoding
/
J250913
10
0
Forkuj 0
Pliki Problemy 0 Oczekujące zmiany 0 Wiki
Przeglądaj źródła

sdf

fanjialong 3 tygodni temu
rodzic
4d8cea603e
commit
c8ed17fac2
9 zmienionych plików z 1036 dodań i 0 usunięć
Widok podzielony Pokaż statystyki zmian
  1. 55 0
      js-demo-day02/_10_jquery_ajax.html
  2. 58 0
      js-demo-day02/_11_axios_ajax.html
  3. 155 0
      js-demo-day02/demo/add.html
  4. 120 0
      js-demo-day02/demo/calc.html
  5. 190 0
      js-demo-day02/demo/edit.html
  6. 136 0
      js-demo-day02/demo/login.html
  7. 210 0
      js-demo-day02/demo/product.html
  8. 112 0
      js-demo-day02/demo/register.html
  9. 0 0
      js-demo-day02/js/axios.min.js

+ 55 - 0
js-demo-day02/_10_jquery_ajax.html
Wyświetl plik 

@@ -12,8 +12,63 @@
 
     <input type="button" value="登录" onclick="get()">
 
 </form>
 
 <button onclick="get()">get</button>
 
+<button onclick="post()">post</button>
 
+<button onclick="ajax()">ajax</button>
 
 </body>
 
 <script>
 
+
 
+    function ajax(){
 
+        /**
 
+         * 在jquery 用的更多是另外ajax 方法
 
+         * $.ajax({
 
+         *     url: 请求路径,
 
+         *     data: 请求参数
 
+         *     type: 请求方式
 
+         *     contentType: 请求数据格式,
 
+         *     dataType: 响应数据格式
 
+         *     success: 成功回调函数
 
+         *     error: 失败的回调函数
 
+         * })
 
+         */
 
+        var username = document.getElementById("username").value
 
+        var password = document.getElementById("password").value
 
+        var obj = {"username":username,"password":password}
 
+
 
+        $.ajax({
 
+            url: "http://c46a5489.natappfree.cc/login1",
 
+            data: JSON.stringify(obj),   // 把传递js 对象参数转成json 字符串
 
+            type: "post",
 
+            dataType: "json",            // 期望后端返回数据格式为json
 
+            contentType:"application/json;charset=utf-8", // 前端给后端发送数据格式为json
 
+            success: function (result) {
 
+                if(result.success){
 
+                    alert("登录成功")
 
+                }else{
 
+                    alert("登录失败")
 
+                }
 
+            }
 
+        })
 
+    }
 
+
 
+
 
+    function post(){
 
+        /**
 
+         * 使用jquery 框架发送
 
+         * $.post(url,请求参数,回调函数)
 
+         */
 
+        var username = document.getElementById("username").value
 
+        var password = document.getElementById("password").value
 
+        $.post("http://c46a5489.natappfree.cc/login",{username:username,password:password},function (result){
 
+            console.log(result);
 
+            if(result.success){
 
+                alert("登录成功")
 
+            }else{
 
+                alert("登录失败")
 
+            }
 
+        })
 
+    }
 
+
 
+
 
   function get(){
 
     // 使用jquery 发送异步请求
 
     /**

+ 58 - 0
js-demo-day02/_11_axios_ajax.html
Wyświetl plik 

@@ -0,0 +1,58 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>Title</title>
 
+    <script src="js/axios.min.js"></script>
 
+</head>
 
+<body>
 
+
 
+<form action="#" >
 
+    账号: <input type="text" name="username" id="username"><br>
 
+    密码: <input type="password" name="password" id="password"><br>
 
+    <input type="button" value="登录" onclick="get()">
 
+</form>
 
+<button onclick="get()">get</button>
 
+<button onclick="post()">post</button>
 
+
 
+
 
+</body>
 
+<script>
 
+    /**
 
+     * http://c46a5489.natappfree.cc/login
 
+     * 需求: 使用get 请求调用/login 接口
 
+     *      使用post 调用/login1 接口
 
+     */
 
+    function get(){
 
+        var username = document.getElementById("username").value
 
+        var password = document.getElementById("password").value
 
+        axios({
 
+            method: "get",
 
+            url: "http://c46a5489.natappfree.cc/login",
 
+            params: {"username":username,"password":password}
 
+        }).then(function (result) {
 
+            if(result.data.success){
 
+                alert("登录成功")
 
+            }else{
 
+                alert("登录失败")
 
+            }
 
+        })
 
+    }
 
+
 
+    function post(){
 
+        var username = document.getElementById("username").value
 
+        var password = document.getElementById("password").value
 
+        axios({
 
+            method: "post",
 
+            url: "http://c46a5489.natappfree.cc/login1",
 
+            data: {"username":username,"password":password}
 
+        }).then(function (result) {
 
+            if(result.data.success){
 
+                alert("登录成功")
 
+            }else{
 
+                alert("登录失败")
 
+            }
 
+        })
 
+    }
 
+</script>
 
+</html>

+ 155 - 0
js-demo-day02/demo/add.html
Wyświetl plik 

@@ -0,0 +1,155 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>新增商品</title>
 
+    <script src="../js/jquery-2.1.4.js"></script>
 
+    <style>
 
+        /* 全局样式重置 - 统一跨浏览器样式，消除默认边距 */
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+            box-sizing: border-box;
 
+            font-family: "Microsoft Yahei", sans-serif;
 
+        }
 
+
 
+        /* 页面背景 - 浅灰背景提升层次感，flex让表单垂直+水平居中 */
 
+        body {
 
+            background-color: #f5f5f5;
 
+            min-height: 100vh;
 
+            display: flex;
 
+            justify-content: center;
 
+            align-items: center;
 
+            padding: 20px;
 
+        }
 
+
 
+        /* 表单容器 - 白色卡片、圆角、阴影，和之前页面风格统一 */
 
+        form {
 
+            background-color: #ffffff;
 
+            padding: 40px 35px;
 
+            border-radius: 8px;
 
+            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
 
+            width: 100%;
 
+            max-width: 450px;
 
+        }
 
+
 
+        /* 表单标题 - 居中显示，和容器匹配，增加底部间距 */
 
+        form h2 {
 
+            text-align: center;
 
+            color: #333333;
 
+            font-size: 24px;
 
+            font-weight: 600;
 
+            margin-bottom: 30px;
 
+        }
 
+
 
+        /* 标签样式 - 固定宽度，右对齐，统一文字颜色和大小 */
 
+        form label {
 
+            display: inline-block;
 
+            width: 90px;
 
+            text-align: right;
 
+            color: #666666;
 
+            font-size: 16px;
 
+            margin-right: 15px;
 
+        }
 
+
 
+        /* 输入框统一样式 - 文本框/数字框共用，美化边框和内边距 */
 
+        input[type="text"],
 
+        input[type="number"] {
 
+            width: calc(100% - 110px);
 
+            padding: 12px 15px;
 
+            margin: 8px 0 18px 0;
 
+            border: 1px solid #e5e6eb;
 
+            border-radius: 4px;
 
+            font-size: 16px;
 
+            color: #333;
 
+            transition: all 0.3s ease;
 
+            outline: none;
 
+        }
 
+
 
+        /* 输入框聚焦效果 - 蓝色边框+轻阴影，提升交互反馈 */
 
+        input[type="text"]:focus,
 
+        input[type="number"]:focus {
 
+            border-color: #409eff;
 
+            box-shadow: 0 0 6px rgba(64, 158, 255, 0.2);
 
+        }
 
+
 
+        /* 数字框去除默认上下箭头 - 美化外观，不影响功能 */
 
+        input[type="number"]::-webkit-inner-spin-button,
 
+        input[type="number"]::-webkit-outer-spin-button {
 
+            -webkit-appearance: none;
 
+            margin: 0;
 
+        }
 
+
 
+        /* 保存按钮样式 - 通栏显示，美化配色和交互 */
 
+        input[type="button"] {
 
+            width: 100%;
 
+            padding: 12px 0;
 
+            border: none;
 
+            border-radius: 4px;
 
+            background-color: #409eff;
 
+            color: #ffffff;
 
+            font-size: 16px;
 
+            font-weight: 500;
 
+            cursor: pointer;
 
+            transition: background-color 0.3s ease;
 
+            margin-top: 10px;
 
+        }
 
+
 
+        /* 按钮hover/点击效果 - 加深颜色，提升交互体验 */
 
+        input[type="button"]:hover {
 
+            background-color: #337ecc;
 
+        }
 
+        input[type="button"]:active {
 
+            background-color: #266fc8;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+<form action="#">
 
+    <!-- 新增表单标题，和整体风格匹配 -->
 
+    <h2>新增商品</h2>
 
+    <label for="id">商品ID：</label>
 
+    <input type="text" name="id" id="id"><br>
 
+
 
+    <label for="productName">商品名称：</label>
 
+    <input type="text" name="productName" id="productName"><br>
 
+
 
+    <label for="stocket">商品库存：</label>
 
+    <input type="number" name="stocket" id="stocket"><br>
 
+
 
+    <label for="title">商品标题：</label>
 
+    <input type="text" name="title" id="title"><br>
 
+
 
+    <input type="button" value="保存" onclick="add()">
 
+</form>
 
+
 
+<script>
 
+    function add(){
 
+        var id = document.getElementById("id").value
 
+        var productName = document.getElementById("productName").value
 
+        var stocket = document.getElementById("stocket").value
 
+        var title = document.getElementById("title").value
 
+        // 简单非空校验 - 新增优化，避免空参数提交
 
+        if(!id || !productName || !stocket || !title){
 
+            alert("请填写完整的商品信息！");
 
+            return;
 
+        }
 
+        $.post("http://c46a5489.natappfree.cc/product/add",{
 
+            id:id,
 
+            productName:productName,
 
+            title:title,
 
+            stocket:stocket
 
+        },function(result){
 
+            if(result.success){
 
+                location.href = "/js-demo-day02/js-demo-day02/demo/product.html"
 
+            }else{
 
+                alert("添加失败：" + (result.msg || "未知错误"));
 
+            }
 
+        },"json") // 新增指定返回格式为json，避免解析错误
 
+            .fail(function(){ // 新增请求失败回调，提示网络错误
 
+                alert("网络错误，添加请求发送失败！");
 
+            });
 
+    }
 
+</script>
 
+</body>
 
+</html>

+ 120 - 0
js-demo-day02/demo/calc.html
Wyświetl plik 

@@ -0,0 +1,120 @@
 
+<!DOCTYPE html>
 
+<html lang="zh-CN">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <title>简易计算器</title>
 
+  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
 
+  <style>
 
+    * {
 
+      margin: 0;
 
+      padding: 0;
 
+      box-sizing: border-box;
 
+      font-family: "Microsoft Yahei", sans-serif;
 
+    }
 
+    body {
 
+      background-color: #f5f5f5;
 
+      padding: 50px;
 
+      display: flex;
 
+      flex-direction: column;
 
+      align-items: center;
 
+    }
 
+    .calc-container {
 
+      background: #fff;
 
+      padding: 30px;
 
+      border-radius: 8px;
 
+      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
 
+      display: flex;
 
+      align-items: center;
 
+      gap: 15px;
 
+    }
 
+    input[type="number"], select, button {
 
+      padding: 12px 15px;
 
+      border: 1px solid #e5e6eb;
 
+      border-radius: 4px;
 
+      font-size: 16px;
 
+      outline: none;
 
+      transition: border-color 0.3s;
 
+    }
 
+    input[type="number"]:focus, select:focus {
 
+      border-color: #409eff;
 
+      box-shadow: 0 0 5px rgba(64,158,255,0.2);
 
+    }
 
+    select {
 
+      width: 80px;
 
+    }
 
+    button {
 
+      background-color: #409eff;
 
+      color: #fff;
 
+      border: none;
 
+      cursor: pointer;
 
+      padding: 12px 20px;
 
+    }
 
+    button:hover {
 
+      background-color: #337ecc;
 
+    }
 
+    .result-box {
 
+      margin-top: 20px;
 
+      font-size: 18px;
 
+      color: #333;
 
+      padding: 12px 20px;
 
+      background: #fff;
 
+      border-radius: 4px;
 
+      box-shadow: 0 1px 5px rgba(0,0,0,0.1);
 
+      min-width: 450px;
 
+      text-align: center;
 
+    }
 
+  </style>
 
+  <script src="../js/jquery-2.1.4.js"></script>
 
+</head>
 
+<body>
 
+<div class="calc-container">
 
+  <input type="number" id="num1" placeholder="请输入数字1">
 
+  <select id="operator">
 
+    <option value="0">+</option>
 
+    <option value="1">-</option>
 
+    <option value="2">*</option>
 
+    <option value="3">/</option>
 
+  </select>
 
+  <input type="number" id="num2" placeholder="请输入数字2">
 
+  <button onclick="calculate()">=</button>
 
+</div>
 
+<div class="result-box" id="result">请点击=计算结果</div>
 
+
 
+<script>
 
+  function calculate() {
 
+    // 获取输入值
 
+    const num1 = $('#num1').val();
 
+    const num2 = $('#num2').val();
 
+    const operator = $('#operator').val();
 
+
 
+    // 非空校验
 
+    if (!num1 || !num2) {
 
+      $('#result').text('请输入完整的数字！');
 
+      return;
 
+    }
 
+
 
+    // 发送异步请求
 
+    $.ajax({
 
+      url: 'http://c46a5489.natappfree.cc/calc',
 
+      type: 'get',
 
+      data: {
 
+        num1: num1,
 
+        num2: num2,
 
+        operator: operator
 
+      },
 
+      dataType: 'json',
 
+      success: function(res) {
 
+        if (res.success) {
 
+          $('#result').text(`计算结果：${res.data}`);
 
+        } else {
 
+          $('#result').text('计算失败：' + res.msg);
 
+        }
 
+      },
 
+      error: function() {
 
+        $('#result').text('网络错误，请求失败！');
 
+      }
 
+    });
 
+  }
 
+</script>
 
+</body>
 
+</html>

+ 190 - 0
js-demo-day02/demo/edit.html
Wyświetl plik 

@@ -0,0 +1,190 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <title>编辑商品</title>
 
+  <script src="../js/jquery-2.1.4.js"></script>
 
+  <style>
 
+    /* 全局样式重置 - 统一跨浏览器样式，消除默认边距，和其他页面保持一致 */
 
+    * {
 
+      margin: 0;
 
+      padding: 0;
 
+      box-sizing: border-box;
 
+      font-family: "Microsoft Yahei", sans-serif;
 
+    }
 
+
 
+    /* 页面背景 - 浅灰背景，flex实现表单垂直+水平居中，适配所有屏幕 */
 
+    body {
 
+      background-color: #f5f5f5;
 
+      min-height: 100vh;
 
+      display: flex;
 
+      justify-content: center;
 
+      align-items: center;
 
+      padding: 20px;
 
+    }
 
+
 
+    /* 表单容器 - 白色卡片、圆角、轻阴影，和新增/登录页样式统一，提升层次感 */
 
+    form {
 
+      background-color: #ffffff;
 
+      padding: 40px 35px;
 
+      border-radius: 8px;
 
+      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
 
+      width: 100%;
 
+      max-width: 450px;
 
+    }
 
+
 
+    /* 表单标题 - 居中显示，配色和字体统一，底部加间距，明确页面用途 */
 
+    form h2 {
 
+      text-align: center;
 
+      color: #333333;
 
+      font-size: 24px;
 
+      font-weight: 600;
 
+      margin-bottom: 30px;
 
+    }
 
+
 
+    /* 标签样式 - 固定宽度+右对齐，排版整齐，和新增商品页布局一致 */
 
+    form label {
 
+      display: inline-block;
 
+      width: 90px;
 
+      text-align: right;
 
+      color: #666666;
 
+      font-size: 16px;
 
+      margin-right: 15px;
 
+    }
 
+
 
+    /* 输入框统一样式 - 文本框/数字框共用，美化边框、内边距，聚焦有高亮 */
 
+    input[type="text"],
 
+    input[type="number"] {
 
+      width: calc(100% - 110px);
 
+      padding: 12px 15px;
 
+      margin: 8px 0 18px 0;
 
+      border: 1px solid #e5e6eb;
 
+      border-radius: 4px;
 
+      font-size: 16px;
 
+      color: #333;
 
+      transition: all 0.3s ease;
 
+      outline: none;
 
+    }
 
+
 
+    /* 输入框聚焦效果 - 蓝色主色调高亮，和其他页面交互效果统一，提升体验 */
 
+    input[type="text"]:focus,
 
+    input[type="number"]:focus {
 
+      border-color: #409eff;
 
+      box-shadow: 0 0 6px rgba(64, 158, 255, 0.2);
 
+    }
 
+
 
+    /* 数字框去除默认上下箭头 - 美化外观，不影响库存数字输入功能 */
 
+    input[type="number"]::-webkit-inner-spin-button,
 
+    input[type="number"]::-webkit-outer-spin-button {
 
+      -webkit-appearance: none;
 
+      margin: 0;
 
+    }
 
+
 
+    /* 保存按钮样式 - 通栏显示，蓝色主色调，和新增页按钮样式完全一致 */
 
+    input[type="button"] {
 
+      width: 100%;
 
+      padding: 12px 0;
 
+      border: none;
 
+      border-radius: 4px;
 
+      background-color: #409eff;
 
+      color: #ffffff;
 
+      font-size: 16px;
 
+      font-weight: 500;
 
+      cursor: pointer;
 
+      transition: background-color 0.3s ease;
 
+      margin-top: 10px;
 
+    }
 
+
 
+    /* 按钮hover/active效果 - 加深颜色，有点击反馈，提升交互体验 */
 
+    input[type="button"]:hover {
 
+      background-color: #337ecc;
 
+    }
 
+    input[type="button"]:active {
 
+      background-color: #266fc8;
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+<form action="#">
 
+  <!-- 表单标题改为【编辑商品】，明确页面功能 -->
 
+  <h2>编辑商品</h2>
 
+  <!-- 隐藏域保留，无需样式，不影响布局 -->
 
+  <input type="hidden" name="id" id="id">
 
+
 
+  <label for="productName">商品名称：</label>
 
+  <input type="text" name="productName" id="productName"><br>
 
+
 
+  <label for="stocket">商品库存：</label>
 
+  <input type="number" name="stocket" id="stocket"><br>
 
+
 
+  <label for="title">商品标题：</label>
 
+  <input type="text" name="title" id="title"><br>
 
+
 
+  <input type="button" value="保存" onclick="edit()">
 
+</form>
 
+
 
+<script>
 
+  function edit(){
 
+    var id = document.getElementById("id").value
 
+    var productName = document.getElementById("productName").value
 
+    var title = document.getElementById("title").value
 
+    var stocket = document.getElementById("stocket").value
 
+    // 新增简单非空校验，避免空数据提交
 
+    if(!productName || !stocket || !title){
 
+      alert("商品名称、库存、标题不能为空！");
 
+      return;
 
+    }
 
+    var obj = {id:id,productName:productName,title:title,stocket:stocket}
 
+    $.post("http://c46a5489.natappfree.cc/product/update",obj,function (result){
 
+      if(result.success){
 
+        // 重新跳转回product.html界面中
 
+        location.href = "/js-demo-day02/js-demo-day02/demo/product.html"
 
+      }else{
 
+        alert(result.msg || "编辑失败，请重试");
 
+      }
 
+    },"json") // 指定返回格式为JSON，避免解析异常
 
+            .fail(function(){
 
+              alert("网络错误，编辑请求发送失败！");
 
+            });
 
+  }
 
+
 
+  // 封装获取地址栏参数的通用函数（放在调用前，避免函数未定义报错）
 
+  function getUrlParam(name) {
 
+    const search = window.location.search.substring(1);
 
+    const params = search.split('&');
 
+    for (let i = 0; i < params.length; i++) {
 
+      const pair = params[i].split('=');
 
+      if (pair[0] === name) {
 
+        return decodeURIComponent(pair[1] || '');
 
+      }
 
+    }
 
+    return '';
 
+  }
 
+
 
+  // 获取地址栏ID并请求商品详情回显
 
+  var id = getUrlParam("id")
 
+  // 新增ID非空校验，避免无ID时发送无效请求
 
+  if(!id){
 
+    alert("未获取到商品ID，无法编辑！");
 
+  }else{
 
+    console.log("当前编辑商品ID：", id);
 
+    $.get("http://c46a5489.natappfree.cc/product/get?id="+id,function(result){
 
+      if(result.success){
 
+        // 返回result {success: true,msg: 操作成功,data: Product}
 
+        var product = result.data
 
+        // 把返回数据设置到输入框中
 
+        document.getElementById("id").value = product.id
 
+        document.getElementById("productName").value = product.productName
 
+        document.getElementById("title").value = product.title
 
+        document.getElementById("stocket").value = product.stocket
 
+      }else{
 
+        alert(result.msg || "获取商品详情失败");
 
+      }
 
+    },"json")
 
+            .fail(function(){
 
+              alert("网络错误，获取商品详情失败！");
 
+            });
 
+  }
 
+</script>
 
+</body>
 
+</html>

+ 136 - 0
js-demo-day02/demo/login.html
Wyświetl plik 

@@ -0,0 +1,136 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <title>登录界面</title>
 
+  <script src="../js/jquery-2.1.4.js"></script>
 
+  <style>
 
+    /* 全局样式重置 */
 
+    * {
 
+      margin: 0;
 
+      padding: 0;
 
+      box-sizing: border-box;
 
+      font-family: "Microsoft Yahei", sans-serif;
 
+    }
 
+
 
+    /* 页面背景 */
 
+    body {
 
+      background-color: #f5f5f5;
 
+      display: flex;
 
+      flex-direction: column;
 
+      align-items: center;
 
+      padding-top: 100px;
 
+    }
 
+
 
+    /* 标题样式 */
 
+    h1 {
 
+      color: #333;
 
+      margin-bottom: 30px;
 
+      font-size: 28px;
 
+      font-weight: 600;
 
+    }
 
+
 
+    /* 表单容器 */
 
+    form {
 
+      background-color: #fff;
 
+      padding: 40px 30px;
 
+      border-radius: 8px;
 
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 
+      width: 400px;
 
+    }
 
+
 
+    /* 输入框样式 */
 
+    input[type="text"],
 
+    input[type="password"] {
 
+      width: 100%;
 
+      padding: 12px 15px;
 
+      margin: 10px 0 20px 0;
 
+      border: 1px solid #ddd;
 
+      border-radius: 4px;
 
+      font-size: 16px;
 
+      transition: border-color 0.3s;
 
+    }
 
+
 
+    /* 输入框聚焦样式 */
 
+    input[type="text"]:focus,
 
+    input[type="password"]:focus {
 
+      outline: none;
 
+      border-color: #409eff;
 
+      box-shadow: 0 0 5px rgba(64, 158, 255, 0.2);
 
+    }
 
+
 
+    /* 按钮样式 */
 
+    input[type="button"] {
 
+      width: 48%;
 
+      padding: 12px;
 
+      border: none;
 
+      border-radius: 4px;
 
+      font-size: 16px;
 
+      cursor: pointer;
 
+      transition: background-color 0.3s;
 
+      margin-right: 4%;
 
+    }
 
+
 
+    /* 登录按钮 */
 
+    input[type="button"][value="登录"] {
 
+      background-color: #409eff;
 
+      color: #fff;
 
+    }
 
+
 
+    input[type="button"][value="登录"]:hover {
 
+      background-color: #337ecc;
 
+    }
 
+
 
+    /* 注册按钮 */
 
+    input[type="button"][value="注册"] {
 
+      background-color: #67c23a;
 
+      color: #fff;
 
+      margin-right: 0;
 
+    }
 
+
 
+    input[type="button"][value="注册"]:hover {
 
+      background-color: #529b2e;
 
+    }
 
+
 
+    /* 标签样式 */
 
+    form label {
 
+      color: #666;
 
+      font-size: 16px;
 
+      display: inline-block;
 
+      width: 60px;
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+<h1>登录界面</h1>
 
+<form action="">
 
+  账号: <input type="text" name="username" id="username"> <br>
 
+  密码: <input type="password" name="password" id="password"> <br>
 
+  <input type="button" value="登录" onclick="login()">
 
+  <input type="button" value="注册" onclick="register()">
 
+</form>
 
+
 
+<script>
 
+  function login() {
 
+    var username = document.getElementById("username").value
 
+    var password = document.getElementById("password").value
 
+    $.ajax({
 
+      url: "http://c46a5489.natappfree.cc/login",
 
+      data: {username: username, password: password},
 
+      type: "post",
 
+      success: function (result) {
 
+        if (result.success) {
 
+          location.href = "/js-demo-day02/js-demo-day02/demo/product.html"
 
+        } else {
 
+          alert(result.msg)
 
+        }
 
+      }
 
+    })
 
+  }
 
+
 
+  function register() {
 
+    location.href = "/js-demo-day02/js-demo-day02/demo/register.html"
 
+  }
 
+</script>
 
+</body>
 
+</html>

+ 210 - 0
js-demo-day02/demo/product.html
Wyświetl plik 

@@ -0,0 +1,210 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>商品列表</title>
 
+    <script src="../js/jquery-2.1.4.js"></script>
 
+    <style>
 
+        /* 全局样式重置 */
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+            box-sizing: border-box;
 
+            font-family: "Microsoft Yahei", sans-serif;
 
+        }
 
+
 
+        /* 页面背景与布局 */
 
+        body {
 
+            background-color: #f5f5f5;
 
+            padding: 50px;
 
+        }
 
+
 
+        /* 标题样式 */
 
+        h1 {
 
+            color: #333;
 
+            margin-bottom: 30px;
 
+            font-size: 26px;
 
+            font-weight: 600;
 
+        }
 
+
 
+        /* 表格容器 */
 
+        .table-container {
 
+            background-color: #fff;
 
+            border-radius: 8px;
 
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 
+            overflow: hidden;
 
+        }
 
+
 
+        /* 表格样式 */
 
+        table {
 
+            width: 100%;
 
+            border-collapse: collapse;
 
+        }
 
+
 
+        th, td {
 
+            padding: 14px 20px;
 
+            text-align: left;
 
+            border-bottom: 1px solid #eee;
 
+        }
 
+
 
+        th {
 
+            background-color: #f8f9fa;
 
+            color: #333;
 
+            font-size: 16px;
 
+            font-weight: 600;
 
+        }
 
+
 
+        td {
 
+            color: #666;
 
+            font-size: 15px;
 
+        }
 
+
 
+        /* 按钮样式 */
 
+        .btn {
 
+            padding: 6px 12px;
 
+            border: none;
 
+            border-radius: 4px;
 
+            cursor: pointer;
 
+            font-size: 14px;
 
+            transition: background-color 0.3s;
 
+            margin-right: 8px;
 
+        }
 
+
 
+        .edit-btn {
 
+            background-color: #409eff;
 
+            color: #fff;
 
+        }
 
+
 
+        .edit-btn:hover {
 
+            background-color: #337ecc;
 
+        }
 
+
 
+        .delete-btn {
 
+            background-color: #f56c6c;
 
+            color: #fff;
 
+        }
 
+
 
+        .delete-btn:hover {
 
+            background-color: #e45656;
 
+        }
 
+
 
+        /* 无数据提示 */
 
+        .no-data {
 
+            padding: 50px;
 
+            text-align: center;
 
+            color: #999;
 
+            font-size: 16px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+<h1>商品列表</h1>
 
+<button onclick="add()">新增</button>
 
+<div class="table-container">
 
+    <table id="productTable">
 
+        <thead>
 
+        <tr>
 
+            <th>ID</th>
 
+            <th>商品名称</th>
 
+            <th>库存数量</th>
 
+            <th>商品标题</th>
 
+            <th>操作</th>
 
+        </tr>
 
+        </thead>
 
+        <tbody>
 
+        <!-- 数据将通过JS动态填充 -->
 
+        <tr class="no-data">
 
+            <td colspan="5">加载中...</td>
 
+        </tr>
 
+        </tbody>
 
+    </table>
 
+</div>
 
+
 
+<script>
 
+    function add(){
 
+        location.href = "/js-demo-day02/js-demo-day02/demo/add.html"
 
+    }
 
+
 
+    // 编辑按钮点击事件
 
+
 
+
 
+    // 删除按钮点击事件（含异步请求）
 
+    function handleDelete(productId) {
 
+        var flag = confirm("确定要删除吗");
 
+        if(flag){
 
+            $.get("http://c46a5489.natappfree.cc/product/delete?id="+productId,function (result){
 
+                if(result.success){
 
+                    location.reload()
 
+                }else{
 
+                    alert("删除失败")
 
+                }
 
+            })
 
+        }
 
+
 
+
 
+        // 弹出确认框，确认后执行删除逻辑
 
+        // if (confirm(`确定要删除商品ID：${productId}吗？`)) {
 
+        //     // 使用jQuery发送删除异步请求
 
+        //     $.ajax({
 
+        //         url: `http://c46a5489.natappfree.cc/product/delete?id=${productId}`,
 
+        //         type: "get", // 若后端要求POST，可改为post并调整参数传递方式
 
+        //         dataType: "json",
 
+        //         success: function(result) {
 
+        //             // 判断后端返回的success状态
 
+        //             if (result.success) {
 
+        //                 alert(result.msg || "删除成功");
 
+        //                 // 刷新当前页面，重新加载商品列表
 
+        //                 location.reload();
 
+        //             } else {
 
+        //                 alert(result.msg || "删除失败，请重试");
 
+        //             }
 
+        //         },
 
+        //         error: function() {
 
+        //             alert("网络异常，删除请求失败，请检查网络或重试");
 
+        //         }
 
+        //     });
 
+        // }
 
+    }
 
+    function handleEdit(id){
 
+        location.href = "/js-demo-day02/js-demo-day02/demo/edit.html?id="+id
 
+    }
 
+
 
+    // 页面加载完成后请求数据
 
+    $(function() {
 
+        // 调用后端接口获取商品数据
 
+        $.ajax({
 
+            url: "http://c46a5489.natappfree.cc/product/list",
 
+            type: "get",
 
+            dataType: "json",
 
+            success: function(result) {
 
+                if (result.success && result.data.length > 0) {
 
+                    // 清空加载提示
 
+                    $("#productTable tbody").empty();
 
+                    // 遍历data数组，填充表格
 
+                    $.each(result.data, function(index, product) {
 
+                        const tr = `<tr>
 
+                                <td>${product.id}</td>
 
+                                <td>${product.productName}</td>
 
+                                <td>${product.stocket}</td>
 
+                                <td>${product.title}</td>
 
+                                <td>
 
+                                    <button class="btn edit-btn" onclick="handleEdit(${product.id})">编辑</button>
 
+                                    <button class="btn delete-btn" onclick="handleDelete(${product.id})">删除</button>
 
+                                </td>
 
+                            </tr>`;
 
+                        $("#productTable tbody").append(tr);
 
+                    });
 
+                } else {
 
+                    // 无数据提示
 
+                    $("#productTable tbody").html('<tr class="no-data"><td colspan="5">暂无商品数据</td></tr>');
 
+                }
 
+            },
 
+            error: function() {
 
+                // 请求失败提示
 
+                $("#productTable tbody").html('<tr class="no-data"><td colspan="5">数据加载失败，请刷新重试</td></tr>');
 
+            }
 
+        });
 
+    });
 
+</script>
 
+</body>
 
+</html>

+ 112 - 0
js-demo-day02/demo/register.html
Wyświetl plik 

@@ -0,0 +1,112 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>注册界面</title>
 
+    <script src="../js/jquery-2.1.4.js"></script>
 
+    <style>
 
+        /* 全局样式重置 */
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+            box-sizing: border-box;
 
+            font-family: "Microsoft Yahei", sans-serif;
 
+        }
 
+
 
+        /* 页面背景 */
 
+        body {
 
+            background-color: #f5f5f5;
 
+            display: flex;
 
+            flex-direction: column;
 
+            align-items: center;
 
+            padding-top: 100px;
 
+        }
 
+
 
+        /* 标题样式 */
 
+        h1 {
 
+            color: #333;
 
+            margin-bottom: 30px;
 
+            font-size: 28px;
 
+            font-weight: 600;
 
+        }
 
+
 
+        /* 表单容器 */
 
+        form {
 
+            background-color: #fff;
 
+            padding: 40px 30px;
 
+            border-radius: 8px;
 
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 
+            width: 400px;
 
+        }
 
+
 
+        /* 输入框样式 */
 
+        input[type="text"],
 
+        input[type="password"] {
 
+            width: 100%;
 
+            padding: 12px 15px;
 
+            margin: 10px 0 20px 0;
 
+            border: 1px solid #ddd;
 
+            border-radius: 4px;
 
+            font-size: 16px;
 
+            transition: border-color 0.3s;
 
+        }
 
+
 
+        /* 输入框聚焦样式 */
 
+        input[type="text"]:focus,
 
+        input[type="password"]:focus {
 
+            outline: none;
 
+            border-color: #409eff;
 
+            box-shadow: 0 0 5px rgba(64, 158, 255, 0.2);
 
+        }
 
+
 
+        /* 保存按钮样式 */
 
+        input[type="button"] {
 
+            width: 100%;
 
+            padding: 12px;
 
+            border: none;
 
+            border-radius: 4px;
 
+            font-size: 16px;
 
+            cursor: pointer;
 
+            transition: background-color 0.3s;
 
+            background-color: #409eff;
 
+            color: #fff;
 
+        }
 
+
 
+        input[type="button"]:hover {
 
+            background-color: #337ecc;
 
+        }
 
+
 
+        /* 标签样式 */
 
+        form label {
 
+            color: #666;
 
+            font-size: 16px;
 
+            display: inline-block;
 
+            width: 60px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+<h1>注册界面</h1>
 
+<form action="">
 
+    账号: <input type="text" name="username" id="username"> <br>
 
+    密码: <input type="password" name="password" id="password"> <br>
 
+    <input type="button" value="保存" onclick="register()">
 
+</form>
 
+
 
+<script>
 
+    function register() {
 
+        console.log("123")
 
+        var username = document.getElementById("username").value
 
+        var password = document.getElementById("password").value
 
+        $.post("http://c46a5489.natappfree.cc/register",
 
+            {username: username, password: password}, function (result) {
 
+                if (result.success) {
 
+                    location.href = "/js-demo-day02/js-demo-day02/demo/login.html"
 
+                } else {
 
+                    alert(result.msg)
 
+                }
 
+            })
 
+    }
 
+</script>
 
+</body>
 
+</html>

Plik diff jest za duży
+ 0 - 0
js-demo-day02/js/axios.min.js


Niektóre pliki nie zostały wyświetlone z powodu dużej ilości zmienionych plików