浏览代码

vue项目

e 5 月之前
父节点
当前提交
69c2cdb67e

+ 0 - 37
1.js

@@ -1,37 +0,0 @@
-function retryGet(url, retries, interval) {
-  return new Promise(function (resolve, reject) {
-    let attempt = 0;
-    const makeRequest = () => {
-      get(url)
-        .then((response) => {
-          resolve(response);
-        })
-        .catch((err) => {
-          attempt++;
-          if (attempt < retries) {
-            setTimeout(makeRequest, interval);
-          } else {
-            reject(new Error("达到最大重试次数"));
-          }
-        });
-    };
-    makeRequest();
-  });
-}
-
-function get(url) {
-    return new Promise((resolve, reject) => {
-        const success = Math.random() >= 0.5;
-        if(success) {
-            resolve( "Success" );
-        } else {
-            reject(new Error("Fail"))
-        }
-    });
-}
-
-retryGet("https://example.com/api/data",3,2000).then((response) => {
-    console.log(response,'成功');
-}).catch((error) =>{
-    console.err(error.message)
-})

+ 0 - 11
test11.9/1.html

@@ -1,11 +0,0 @@
-<!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>
-    <h1>你好,我有一个帽衫</h1>
-</body>
-</html>

+ 0 - 1
test11.9/1.txt

@@ -1 +0,0 @@
-111

+ 0 - 0
test11.9/2.txt


+ 0 - 0
test11.9/3.txt


+ 0 - 0
test11.9/4.txt


+ 0 - 1
test11.9/news.txt

@@ -1 +0,0 @@
-我是一个新文件

+ 2 - 2
vue/vue初阶/16.数据监听.html

@@ -55,14 +55,14 @@
             changeDate() {
                 console.log("触发")
                 // this.arr[1].sex = '女'
-                this.arr[1] = { name:'林黛玉',age:6,sex:'女'}
+                // this.arr[1] = { name:'林黛玉',age:6,sex:'女'}
                 // 数据更新
                 // 视图不变
                 // Vue2.0 => 响应式框架 
                 // MVVM => Object.defineProperty getter和setter 
                 console.log(this.arr,'arr')
                 // Vue.set(target,index/name,newValue)
-                // Vue.set(this.arr,1,{ name:'林黛玉',age:6,sex:'女'})
+                Vue.set(this.arr,1,{ name:'林黛玉',age:6,sex:'女'})
                 // this.$set(this.arr,1,{ name:'林黛玉',age:6,sex:'女'})
             }
          }

+ 348 - 0
vue/vue项目/jr原项目接口说明.md

@@ -0,0 +1,348 @@
+##### 一、addrerss表的CRUD说明:
+
+```
+新增和更新
+localhost:8080/addressController/saveOrUpdateAddress
+注意说明:addressid不传参或者为null时会走新增接口,否则走更新接口
+		新增主键不用传参数,默认主键自增。
+```
+
+```
+传参格式~
+更新:
+{
+  "addressid":1,
+  "addressname": "haerb",
+  "longitude":12.1,
+  "latitude":12.3
+}
+
+新增:
+{
+  "addressname": "haerb",
+  "longitude":12.1,
+  "latitude":12.3
+}
+
+响应格式~
+{
+    "code": 200,
+    "message": "成功",
+    "data": null,
+    "ok": true
+}
+```
+
+查询列表:
+
+localhost:8080/addressController/getAddress/1/1
+
+注意:同时也支持模糊查询
+
+响应格式:
+
+```
+{
+    "code": 200,
+    "message": "成功",
+    "data": {
+        "records": [
+            {
+                "addressid": 3,
+                "addressname": "haerb",
+                "longitude": 12.1,
+                "latitude": 12.3
+            }
+        ],
+        "total": 3,
+        "size": 1,
+        "current": 1,
+        "orders": [],
+        "optimizeCountSql": true,
+        "searchCount": true,
+        "countId": null,
+        "maxLimit": null,
+        "pages": 3
+    },
+    "ok": true
+}
+```
+
+![image-20241108125451092](C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20241108125451092.png)
+
+带模糊查查询
+
+![image-20241108125716614](C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20241108125716614.png)
+
+删除接口
+
+localhost:8080/addressController/deleteAddress
+
+入参样式数组(同时支持批量删除):
+
+```
+[3,4,5,6]
+```
+
+响应格式:
+
+```
+{
+    "code": 200,
+    "message": "成功",
+    "data": null,
+    "ok": true
+}
+```
+
+![image-20241108132355895](C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20241108132355895.png)
+
+
+
+=================================================================================
+
+
+
+##### 二、level表的CRUD:
+
+```
+新增和更新
+localhost:8080/levelController/saveOrUpdateLevel
+注意说明:addressid不传参或者为null时会走新增接口,否则走更新接口
+		新增主键不用传参数,默认主键自增。
+```
+
+```
+传参格式~
+更新:
+{
+    "jrid":1,
+    "levelname":"levelnam1111e"
+}
+
+新增:
+{
+ "levelname":"levelname"
+}
+
+响应格式~
+{
+    "code": 200,
+    "message": "成功",
+    "data": null,
+    "ok": true
+}
+```
+
+查询列表:
+
+localhost:8080/levelController/getLevel/1/2
+
+注意:同时也支持模糊查询
+
+响应格式:
+
+```
+{
+    "code": 200,
+    "message": "成功",
+    "data": {
+        "records": [
+            {
+                "jrid": 2,
+                "levelname": "levelname"
+            },
+            {
+                "jrid": 1,
+                "levelname": "levelnam1111e"
+            }
+        ],
+        "total": 2,
+        "size": 2,
+        "current": 1,
+        "orders": [],
+        "optimizeCountSql": true,
+        "searchCount": true,
+        "countId": null,
+        "maxLimit": null,
+        "pages": 1
+    },
+    "ok": true
+}
+```
+
+![image-20241108134223996](C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20241108134223996.png)
+
+模糊查询:
+
+![image-20241108134313836](C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20241108134313836.png)
+
+
+
+删除接口
+
+localhost:8080/addressController/deleteLevel
+
+入参样式数组(同时支持批量删除):
+
+```
+[3,4,5,6]
+```
+
+响应格式:
+
+```
+{
+    "code": 200,
+    "message": "成功",
+    "data": null,
+    "ok": true
+}
+```
+
+![image-20241108134532049](C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20241108134532049.png)
+
+
+
+===================================================================================
+
+
+
+##### 三、message表的CRUD:
+
+##### 
+
+```
+新增和更新
+localhost:8080/messageController/saveOrUpdateMessage
+注意说明:addressid不传参或者为null时会走新增接口,否则走更新接口
+		新增主键不用传参数,默认主键自增。
+```
+
+```
+传参格式~
+更新:
+{
+    "jrid":1,
+    "jraddressesid": 1,
+    "tcoin":"jhkka",
+    "jrname":"jchs",
+    "jrlevel":1,
+    "hitnumber": 12344,
+    "jrtel":"dfkljh",
+    "weixin":"fldjdjhjdfdjahl"
+}
+
+新增:
+{
+    "jraddressesid": 1,
+    "tcoin":"jhkka",
+    "jrname":"jchs",
+    "jrlevel":1,
+    "hitnumber": 12344,
+    "jrtel":"dfkljh",
+    "weixin":"fljahl"
+}
+
+响应格式~
+{
+    "code": 200,
+    "message": "成功",
+    "data": null,
+    "ok": true
+}
+```
+
+查询列表:
+
+localhost:8080/messageController/getMessage/1/1
+
+注意:同时也支持模糊查询
+
+响应格式:
+
+```
+{
+    "code": 200,
+    "message": "成功",
+    "data": {
+        "records": [
+            {
+                "jrid": 1,
+                "jraddressesid": 1,
+                "tcoin": "jhkka",
+                "jrname": "jchs",
+                "jrlevel": 1,
+                "hitnumber": 12344,
+                "jrtel": "dfkljh",
+                "weixin": "fldjdjhjdfdjahl"
+            }
+        ],
+        "total": 1,
+        "size": 1,
+        "current": 1,
+        "orders": [],
+        "optimizeCountSql": true,
+        "searchCount": true,
+        "countId": null,
+        "maxLimit": null,
+        "pages": 1
+    },
+    "ok": true
+}{
+    "code": 200,
+    "message": "成功",
+    "data": {
+        "records": [
+            {
+                "addressid": 3,
+                "addressname": "haerb",
+                "longitude": 12.1,
+                "latitude": 12.3
+            }
+        ],
+        "total": 3,
+        "size": 1,
+        "current": 1,
+        "orders": [],
+        "optimizeCountSql": true,
+        "searchCount": true,
+        "countId": null,
+        "maxLimit": null,
+        "pages": 3
+    },
+    "ok": true
+}
+```
+
+![image-20241108140326832](C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20241108140326832.png)
+
+带模糊查查询
+
+![image-20241108125716614](C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20241108125716614.png)
+
+删除接口
+
+localhost:8080/messageController/deleteMessage
+
+入参样式数组(同时支持批量删除):
+
+```
+[3,4,5,6]
+```
+
+响应格式:
+
+```
+{
+    "code": 200,
+    "message": "成功",
+    "data": null,
+    "ok": true
+}
+```
+
+![image-20241108140621318](C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20241108140621318.png)
+
+
+

+ 3 - 1
vue/vue项目/vue-admin-template-master/.env.development

@@ -2,4 +2,6 @@
 ENV = 'development'
 
 # base api
-VUE_APP_BASE_API = 'http://120.46.137.43:9999'
+VUE_APP_BASE_API = 'http://39.105.160.25:10800'
+# VUE_APP_BASE_API = 'http://101.43.34.204:18000'
+

+ 47 - 0
vue/vue项目/vue-admin-template-master/src/api/message.js

@@ -0,0 +1,47 @@
+import request from '@/utils/request'
+
+// 获取信息列表接口
+export function getMessage() {
+  return request({
+    url: '/messageController/getMessage',
+    method: 'get'
+  })
+}
+
+// 新增/修改信息
+export function saveOrUpdateMessage(data) {
+  return request({
+    url: '/messageController/saveOrUpdateMessage',
+    method: 'post',
+    data
+  })
+}
+
+// 删除信息
+export function deleteMessage(data) {
+  return request({
+    url: '/messageController/deleteMessage',
+    method: 'delete',
+    data
+  })
+}
+
+
+// 通过jrid获取信息
+export function getMessageById(params) {
+    return request({
+      url: '/messageController/getMessageById',
+      method: 'get',
+      params
+    })
+  }
+  
+// 通过addressId获取地址名称
+export function getMessageByAddrId(params) {
+    return request({
+      url: '/messageController/getMessageByAddrId',
+      method: 'get',
+      params
+    })
+  }
+  

+ 21 - 0
vue/vue项目/vue-admin-template-master/src/router/index.js

@@ -118,6 +118,27 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/message',
+    component: Layout,
+    redirect: '/message/list',
+    name: 'message',
+    meta: { title: 'message', icon: 'level' },
+    children: [
+      {
+        path: 'list',
+        name: 'list',
+        component: () => import('@/views/message/list'),
+        meta: { title: 'list', icon: 'levelList' }
+      },
+      {
+        path: 'addList',
+        name: 'addList',
+        component: () => import('@/views/message/addList'),
+        meta: { title: 'addList', icon: 'addLevel' }
+      }
+    ]
+  },
 
   {
     path: '/form',

+ 171 - 0
vue/vue项目/vue-admin-template-master/src/views/message/addList.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="addList">
+    <el-form
+      style="width: 40%; margin: 150px auto"
+      :model="ruleForm"
+      :rules="rules"
+      ref="ruleForm"
+      label-width="100px"
+      class="demo-ruleForm"
+    >
+      <el-form-item label="用户名称" prop="jrname">
+        <el-input v-model="ruleForm.jrname"></el-input>
+      </el-form-item>
+      <el-form-item label="地址名称" prop="jraddressesid">
+        <el-select
+          v-model="ruleForm.jraddressesid"
+          placeholder="请选择地址名称"
+        >
+          <el-option
+            v-for="(item, index) in addressList"
+            :key="index"
+            :label="item.addressname"
+            :value="item.addressid"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="等级名称" prop="jrlevel">
+        <el-select v-model="ruleForm.jrlevel" placeholder="请选择等级名称">
+          <el-option
+            v-for="(item, index) in levelList"
+            :key="index"
+            :label="item.levelname"
+            :value="item.jrid"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="电话号码" prop="jrtel">
+        <el-input v-model="ruleForm.jrtel"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submitForm('ruleForm')"
+          >提交</el-button
+        >
+        <el-button @click="resetForm('ruleForm')">重置</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+import { getMessageById, saveOrUpdateMessage } from "@/api/message.js";
+import { levelMain } from "@/api/level.js";
+import { getAddress } from "@/api/address.js";
+export default {
+  data() {
+    return {
+      ruleForm: {
+        jrname: "",
+        jraddressesid: "",
+        jrlevel: "",
+        jrtel: "",
+      },
+      levelList: [],
+      addressList: [],
+      rules: {
+        jrname: [
+          { required: true, message: "请输入用户名称", trigger: "blur" },
+        ],
+        jraddressesid: [
+          { required: true, message: "请选择地址名称", trigger: "change" },
+        ],
+        jrlevel: [
+          { required: true, message: "请选择等级名称", trigger: "change" },
+        ],
+        jrtel: [{ required: true, message: "请输入电话号码", trigger: "blur" }],
+      },
+      newId: "",
+    };
+  },
+  created() {
+    if (this.$route.query.ids) {
+      this.newId = this.$route.query.ids;
+      getMessageById({
+        jrid: this.newId,
+      })
+        .then((res) => {
+          if (res.code == 200) {
+            this.ruleForm = res.data;
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    }
+    console.log(this.newId, "修改");
+    this.getLevel();
+    this.getAddress();
+  },
+  methods: {
+    // 获取等级列表
+    getLevel() {
+      levelMain()
+        .then((res) => {
+          if (res.code == 200) {
+            this.levelList = res.data.records;
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+    // 获取地址列表
+    getAddress() {
+      getAddress()
+        .then((res) => {
+          if (res.code == 200) {
+            this.addressList = res.data.records;
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          // alert("submit!");
+          console.log(this.ruleForm);
+          if (this.ruleForm.jrid) {
+            saveOrUpdateMessage(this.ruleForm)
+              .then((res) => {
+                console.log(res, "mmm");
+                if (res.code == 200) {
+                  this.$message({
+                    message: "修改成功",
+                    type: "success",
+                  });
+                  this.$router.push("/message/list");
+                }
+              })
+              .catch((err) => {
+                console.log(err);
+              });
+          } else {
+            saveOrUpdateMessage(this.ruleForm)
+              .then((res) => {
+                console.log(res, "mmm");
+                if (res.code == 200) {
+                  this.$message({
+                    message: "添加成功",
+                    type: "success",
+                  });
+                  this.$router.push("/message/list");
+                }
+              })
+              .catch((err) => {
+                console.log(err);
+              });
+          }
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+  },
+};
+</script>
+<style></style>

+ 222 - 0
vue/vue项目/vue-admin-template-master/src/views/message/list.vue

@@ -0,0 +1,222 @@
+<template>
+  <div class="List">
+    <el-form
+      :model="ruleForm"
+      :rules="rules"
+      ref="ruleForm"
+      class="demo-ruleForm"
+    >
+      <el-form-item prop="addressId">
+        <el-select v-model="ruleForm.addressId" placeholder="请选择地址名称">
+          <el-option
+            v-for="(item, index) in addressData"
+            :key="index"
+            :label="item.addressname"
+            :value="item.addressid"
+            >{{ item.addressname }}</el-option
+          >
+        </el-select>
+        <el-button
+          class="searchBtn"
+          type="primary"
+          @click="submitForm('ruleForm')"
+          >搜索</el-button
+        >
+        <el-button @click="resetForm('ruleForm')">取消</el-button>
+      </el-form-item>
+    </el-form>
+    <div class="main">
+      <el-table :data="tableData" style="width: 70%">
+        <el-table-column type="index" width="50"></el-table-column>
+        <el-table-column prop="jrname" width="200" label="姓名">
+        </el-table-column>
+        <el-table-column prop="jrtel" width="200" label="电话号">
+        </el-table-column>
+        <el-table-column prop="jrid" width="200" label="等级ID">
+        </el-table-column>
+        <el-table-column prop="jridName" width="200" label="等级名称">
+        </el-table-column>
+        <el-table-column prop="jrAddressName" width="200" label="地址名称">
+        </el-table-column>
+
+        <el-table-column fixed="right" width="180" label="操作">
+          <template slot-scope="scope">
+            <el-button size="mini" @click="handleEdit(scope.row)"
+              >编辑</el-button
+            >
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.row)"
+              >删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import { levelMain } from "@/api/level.js";
+import { getAddress } from "@/api/address.js";
+import {
+  getMessage,
+  getMessageByAddrId,
+  deleteMessage,
+} from "@/api/message.js";
+export default {
+  data() {
+    return {
+      ruleForm: {
+        addressId: "",
+      },
+      rules: {
+        addressId: [
+          { required: true, message: "请选择地址名称", trigger: "change" },
+        ],
+      },
+      tableData: [],
+      levelData: [],
+      addressData: [],
+    };
+  },
+  created() {
+    this.getLevel();
+    this.getAddress();
+    this.init();
+  },
+  methods: {
+    // 获取信息列表
+    init() {
+      getMessage()
+        .then((res) => {
+          if (res.code == 200) {
+            this.tableData = res.data.records;
+            this.address();
+          }
+        })
+        .catch((err) => {
+          console.log(err, "err");
+        });
+    },
+    // 获取等级列表
+    getLevel() {
+      levelMain()
+        .then((res) => {
+          if (res.code == 200) {
+            this.levelData = res.data.records;
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+    // 获取地址列表
+    getAddress() {
+      getAddress()
+        .then((res) => {
+          if (res.code == 200) {
+            this.addressData = res.data.records;
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+    // 查找表格数组中每一项的等级id在等级列表中所对应的名称
+    level() {
+      for (var i = 0; i < this.tableData.length; i++) {
+        for (var j = 0; j < this.levelData.length; j++) {
+          if (this.tableData[i].jrlevel == this.levelData[j].jrid) {
+            this.tableData[i].jridName = this.levelData[j].levelname;
+          }
+        }
+      }
+    },
+    address() {
+      for (var x = 0; x < this.tableData.length; x++) {
+        for (var y = 0; y < this.addressData.length; y++) {
+          if (
+            this.tableData[x].jraddressesid == this.addressData[y].addressid
+          ) {
+            this.tableData[x].jrAddressName = this.addressData[y].addressname;
+            this.level();
+          }
+        }
+      }
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          getMessageByAddrId({
+            jraddressesid: this.ruleForm.addressId,
+          })
+            .then((res) => {
+              if (res.code == 200) {
+                this.tableData = res.data;
+                this.address();
+              }
+            })
+            .catch((err) => {
+              console.log(err, "ee");
+            });
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+      this.init();
+    },
+    handleDelete(val) {
+      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          deleteMessage([val.jrid])
+            .then((res) => {
+              console.log(res);
+              if (res.code === 200) {
+                this.$message({
+                  message: res.message,
+                  type: "success",
+                });
+                this.init();
+              }
+            })
+            .catch((err) => {
+              console.log(err);
+            });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+    handleEdit(val) {
+      this.$router.push({
+        path:'/message/addList',
+        query:{
+          ids:val.jrid
+        }
+      })
+    }
+  },
+};
+</script>
+
+<style scoped>
+.List {
+  padding: 120px 0px 0 400px;
+}
+.searchBtn {
+  margin-left: 15px;
+}
+</style>

+ 83 - 0
vue/vue项目/接口文档.md

@@ -0,0 +1,83 @@
+## 等级页面
+1. 获取等级列表信息接口
+路径:/levelController/getLevel
+方法:get
+
+2. 新增等级
+路径:/levelController/saveOrUpdateLevel
+方法:post
+参数:
+{
+    level:"";等级名称
+}
+
+3. 删除等级
+路径:/levelController/deleteLevel
+方法:delete
+id
+参数格式:[1,2,3,4,5]
+## 地址页面
+1. 获取地址列表信息接口
+路径:/addressController/getAddress
+方法:get
+
+2. 新增地址
+路径:/addressController/saveOrUpdateAddress
+方法:post
+参数:
+{
+    addressname:"",地址名称
+    longitude:"",地址经度
+    latitude:"",地址纬度
+}
+3. 删除地址
+路径:/addressController/deleteAddress
+方法:delete
+参数格式:id
+[1,2,3,4,5]
+## 消息页面
+1. 获取信息列表接口
+路径:/messageController/getMessage
+方法:get
+
+2. 新增/修改信息
+路径:/messageController/saveOrUpdateMessage
+方法:post
+新增参数:
+{
+    jrname:"",用户名称
+    jraddressesid:"",地址名称
+    jrlevel:"",等级名称
+    jrtel:"",电话号码
+}
+
+修改参数:
+{
+    jrid:"",
+    jrname:"",用户名称
+    jraddressesid:"",地址名称
+    jrlevel:"",等级名称
+    jrtel:"",电话号码
+}
+
+3. 删除信息
+路径:/messageController/deleteMessage
+方法:delete
+id
+参数格式:[1,2,3,4,5]
+
+4. 通过jrid获取信息
+路径:/messageController/getMessageById
+方法:get
+参数:
+{
+    jrid:""
+}
+
+5. 通过addressId获取地址名称
+路径:/messageController/getMessageByAddrId
+方法:get
+参数:
+{
+    jraddressesid:""
+}

+ 28 - 0
正则/1.认识正则.html

@@ -0,0 +1,28 @@
+<!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>
+    <script>
+        // 定义正则
+        const reg = /星期六/g;
+        // 1.匹配校验文本 test()
+         const t1 = '星期六今天是星期六';
+         console.log(reg.test(t1));
+        // 2. exec() 返回数组格式,查找符合条件的内容
+         console.log(reg.exec(t1));
+        //  const reg1 = /苹果/;
+        //  3.replace(正则,替换内容) 替换 
+        const res = t1.replace(reg,'哈哈')
+         console.log(res);
+        //  4.match() 在字符串中查找符合规则的正则
+        const reg1 = /西游记/g;
+        const str = '四大名著中包含了西游记、红楼梦、西游记';
+        console.log(str.match(reg1));
+
+    </script>
+</body>
+</html>

+ 18 - 0
正则/2.修饰符.html

@@ -0,0 +1,18 @@
+<!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>
+    <script>
+        // g 匹配全局
+        // i 不区分大小写
+        const reg = /an/gi;
+        const str = "an Apple,An orange";  
+        console.log(reg.test(str));
+        console.log(str.match(reg))      
+    </script>
+</body>
+</html>

+ 33 - 0
正则/3.元字符-边界符.html

@@ -0,0 +1,33 @@
+<!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>
+    <script>
+        // 1. \b 单词边界
+        const reg1 = /\ban\b/ig;
+        const str1 = "1an Apple,An2 orange";
+        console.log(str1.match(reg1));
+
+        // 2.^ 匹配字母首行
+        const reg2 = /^an/ig;
+        const str2 = "an1 Apple, An2 orange an";
+        console.log(str2.match(reg2));
+
+        // 3.$ 匹配字母尾行
+        const reg3 = /an$/ig;
+        const str3 = "an1 Apple, An3 orange an";
+        console.log(str3.match(reg3));
+
+        const reg4 = /^a$/ig;
+        // const str4 = "an1 Apple, An3 orange an";
+        console.log(reg4.test('aaa'));
+        console.log(reg4.test('a'));
+        console.log(reg4.test(' '));
+        
+    </script>
+</body>
+</html>

+ 54 - 0
正则/4.元字符-量词.html

@@ -0,0 +1,54 @@
+<!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>
+    <script>
+        // 1.* 0次或者多次
+        // const reg = /a*$/;
+        // console.log(reg.test('a'));
+        // console.log(reg.test('aaaaa'));
+        // console.log(reg.test(''));
+        // console.log(reg.test('ab'));
+
+        // 2.+ 一次或多次
+        // const reg1 = /a+$/;
+        // console.log(reg1.test('a'));
+        // console.log(reg1.test('aaaaa'));
+        // console.log(reg1.test(''));
+        // console.log(reg1.test('ab'));
+
+        // 3.?0次或1次
+        // const reg2 = /a?$/;
+        // console.log(reg2.test('a'));
+        // console.log(reg2.test('aaaaa'));
+        // console.log(reg2.test(''));
+        // console.log(reg2.test('ab'));
+
+        // 4.{n} n次
+        // const reg4 = /a{2}$/;
+        // console.log(reg4.test('a'));
+        // console.log(reg4.test('aaaaa'));
+        // console.log(reg4.test(''));
+        // console.log(reg4.test('ab'));
+
+        // 5.{n,} n次或更多次
+        // const reg5 = /a{2,}$/;
+        // console.log(reg5.test('a'));
+        // console.log(reg5.test('aaaaa'));
+        // console.log(reg5.test(''));
+        // console.log(reg5.test('ab'));
+
+        // 6.{n,m} n次到m次
+        const reg6 = /a{2,5}$/;
+        console.log(reg6.test('a'));
+        console.log(reg6.test('aaaaa'));
+        console.log(reg6.test(''));
+        console.log(reg6.test('ab'));
+
+    </script>
+</body>
+</html>

+ 44 - 0
正则/5.元字符-字符类.html

@@ -0,0 +1,44 @@
+<!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>
+    <script>
+      // 1.[] 匹配任意字符
+      // const reg1 = /[\d]/i;
+      // // const reg1 = /[abc]/i;
+      // console.log(reg1.test("abc"));
+      // console.log(reg1.test("aabbccabccbaa"));
+      // console.log(reg1.test("banana"));
+      // console.log(reg1.test("tomorrow"));
+      // console.log(reg1.test("Apple"));
+      // console.log(reg1.test("banana1"));
+
+      // 2.- 连字符
+      //   const reg2 = /[^a-z]/;
+      //   console.log(reg2.test("apple"));
+      //   console.log(reg2.test("APPLE"));
+      //   console.log(reg2.test("12121"));
+
+      // 3.^ 取反
+        const reg3 = /\S/;
+        console.log(reg3.test("^\v"));
+        console.log(reg3.test("^\n"));
+      //   const text = "Hello\s\s\sWorld\s2021";
+      //   console.log(text);
+      //   console.log(text.replace(/s/g, "&nbsp;"));
+
+      //4. . 匹配除换行外的任意字符
+    //   const reg4 = /./;
+    //   console.log(reg4.test("a"));
+    //   console.log(reg4.test("A"));
+    //   console.log(reg4.test("0"));
+    //   console.log(reg4.test(" "));
+    //   console.log(reg4.test("\t"));
+    //   console.log(reg4.test("\n"));
+    </script>
+  </body>
+</html>

+ 36 - 0
正则/6.分组和分支结构.html

@@ -0,0 +1,36 @@
+<!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>
+    <script>
+        // 分组 ()
+        const  reg = /(ab){2}/;
+        console.log(reg.test("ababababab"));
+        console.log(reg.test("aaaabb"));
+        
+        // 分组捕获
+        // 2024-12-07
+        const reg1 = /^(\d{4})-(\d{2})-(\d{2})/;
+        // console.log(reg1.test("2024-12-07"))
+        // 07/12/2024
+        // $1 $2 $3
+        const str = '2024-12-07';
+        console.log(str.replace(reg1,'$3-$2-$1'))
+        
+        // 分支结构
+        const reg3 = /西游记|红楼梦/;
+        const str1 = '西游记';
+        const str2 = '水浒传';
+        const str3 = '红楼梦';
+        const str4 = '三国演义';
+        console.log(reg3.test(str1))
+        console.log(reg3.test(str2))
+        console.log(reg3.test(str3))
+        console.log(reg3.test(str4))
+    </script>
+</body>
+</html>

+ 32 - 0
正则/7.案例.html

@@ -0,0 +1,32 @@
+<!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>
+    <script>
+        // 1.手机号脱敏 13782748934 => 137****8934
+        const str1 = '13782748934';
+        const reg6 =/^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/
+        const reg1 = /^(1[3-9]{1}\d{1})(\d{4})(\d{4})$/;
+        console.log(str1.replace(reg1,'$1****$3'))
+        // 2.密码匹配 (6-16字母、数字、下划线)
+        const str2 = 'helloworld123_';
+        const reg2 = /^\w{6,16}$/;
+        const reg5 =/^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/;
+        console.log(reg2.test(str2));
+        // 3.匹配16进制颜色(#ff0000  #0f0)
+        const str3 = '#ff00ff';
+        const reg3 = /^#([0-9a-fA-F]{3})|([0-9a-fA-F]{6})$/;
+        console.log(reg3.test(str3));
+        // 4.匹配24小时时间 23:59 18:22 08:35 20:12 
+        const str4 = "24:12";
+        const reg4 = /^(?:[01]\d|2[0-3]):[0-5]\d:[0-5]\d$/
+        // const reg4 = /^[0-1][0-9]|2[0-3]:[0-5][0-9]$/;
+        console.log(reg4.test(str4));
+    
+    </script>
+</body>
+</html>

+ 3 - 0
正则/总结.md

@@ -0,0 +1,3 @@
+## 正则表达式总结
+定义: const 名称 = /表达式/;
+## 插件及网址 1.VScode插件:any-rule 2.https://regexper.com/ 功能:可视化自己的表达式