vue + element-plus 基础学习模板

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <title>Redis 操作平台</title>
  <script src="https://unpkg.com/vue@3"></script>
  <!-- 导入 Element Plus CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
  <!-- 导入 Element Plus JavaScript -->
  <script src="https://unpkg.com/element-plus"></script>
  <!-- 导入 Axios -->
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
  <form>
    
    <div id="app" style="margin: 0 auto; width: 80%;padding-top: 120px; padding-bottom: 100px; ">
      <!-- 页面突出部分 -->
      <div style="padding-top: 80px; padding-bottom: 120px;border-radius: 30px;box-shadow: 0px 0px 100px rgba(0, 0, 0, 0.5) ; background-color: rgb(219, 203, 203);">
        <!-- 左边距200px -->
        <div style="margin: 0 200px;">
          <!-- 标题 -->
          <div style="margin: 0 300px;"><h1>Redis 操作平台</h1></div>
          
      <!-- 自动匹配框 -->
      <el-text class="mx-1" type="primary" style="font-size: 16px;">主机: </el-text>
      <!-- 自动匹配框 state变量、querySearchAsync函数、label标签、handleHostSelect函数-->
      <el-autocomplete
        v-model="state"
        :fetch-suggestions="querySearchAsync"
        placeholder="输入host"
        value-key="label"
        @select="handleHostSelect"   
      >
    </el-autocomplete>
    
     <!-- 端口页面 -->
      <div style="padding-top: 10px; padding-bottom: 10px; ">
        <el-text class="mx-1" type="primary"  style="font-size: 16px;" >端口: </el-text>
        <!-- 端口页面input、port变量 -->
        <el-input v-model="port" style="width: 200px;" placeholder="输入端口"></el-input>
      </div>
 
       <!-- 库名 select选择、selectedDatabase变量 -->
      <div >
        <el-text class="mx-1" type="primary" style="font-size: 16px;">库名: </el-text>
        <el-select
        v-model="selectedDatabase"
    clearable
    placeholder="库"
    style="width: 200px"
  >
  <!-- databaseOptions循环 -->
    <el-option
    v-for="item in databaseOptions"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
      </div>


     <!-- key标签 key变量 -->
      <div style="padding-top: 10px; padding-bottom: 10px;">
        <el-text class="mx-1" type="primary"style="font-size: 16px;" >Key: </el-text>
        <el-input v-model="key" style="width: 200px;" placeholder="输入key"></el-input>
      </div>

     <!-- 选中标签 checked2变量、checkboxChanged函数 -->
      <el-checkbox v-model="checked2" @change="checkboxChanged" style="padding-top: 10px; padding-bottom: 10px;">Md5计算</el-checkbox>

      <!-- 表格 -->
      <div  style="padding-top: 10px; padding-bottom: 10px;">
        <!-- tableData变量、tableRowClassName函数 -->
        <el-table
          :data="tableData"
          style="width: 70%"
          :row-class-name="tableRowClassName"
        >
          <!-- 表格数据对其内容 -->
          <el-table-column prop="name" label="Name" width="180"></el-table-column>
          <el-table-column prop="vaule" label="Vaule" width="260"></el-table-column>
          <el-table-column prop="TTL" label="TTL" width="180"></el-table-column>
        </el-table>
      </div>

      <!-- 查询按钮 chaxun 函数 -->
      <el-button type="primary"  @click="chaxun" round style="margin-right: 150px;">查询</el-button>

 
      
        <!-- 点击确认按钮触发更新表格数据的逻辑 handleConfirm 函数 -->
        <el-popconfirm title="确定删除吗?" @confirm="handleConfirm">
          <template #reference>
            <el-button type="danger" round>删除</el-button>
          </template>
        </el-popconfirm>
      </div>
    </div>
  </div>
  </form>



  <script>
    const App = {
      data() {
        return {
      selectedDatabase: '', // 用户选择的库名
      checked2: false,   // 选中标签
      port: '6379',  // 端口默认值
      key: '', // key 输入框数据
     

          // 自动匹配框
          state: '',  //可以手动写入内容的值
          suggestions: [
            { value: '192.168.14.66', label: 'test' },
            { value: 'tk_test1', label: '测试环境redis' },

          ],
            // 库的循环数据
          databaseOptions:  [
  {
    value: '0',
    label: '0',
  },
  {
    value: '1',
    label: '1',
  },
  {
    value: '2',
    label: '2',
  },
  {
    value: '3',
    label: '3',
  },

],
          // 表格数据
          tableData: [
          {
              date: '2016-05-03',
              name: 'Tom',
              address: 'No. 189, Grove St, Los Angeles',
            },
            {
              date: '2016-05-02',
              name: 'Jerry',
              address: 'No. 212, Elm St, Springfield',
            },
            {
              date: '2016-05-04',
              name: 'John',
              address: 'No. 503, Park Ave, New York',
            },
          ],
        };
      },
      //执行体
      methods: {
       //勾选框
        checkboxChanged(newValue) {
      if (newValue) {
        // 复选框被选中时执行的逻辑
        console.log('Checkbox is checked');
        // 自定义变量
        this.md5_gouxuan = "yes"
      } else {
        // 自定义变量
        console.log('Checkbox is unchecked');
        this.md5_gouxuan = "no"
      }
    },

        // 自动匹配框：异步搜索建议
        querySearchAsync(queryString, cb) {
          cb(this.suggestions.filter(item => item.value.toLowerCase().includes(queryString.toLowerCase())));
        },
    //  自动匹配框,转换值把label转为对应的value值，如把test转为192.168.14.66
    handleHostSelect(item) {
          this.state = item.value;
        },
      //  表单函数执行体
        tableRowClassName({ rowIndex }) {
          if (rowIndex === 1) {
            return 'warning-row';
          } else if (rowIndex === 3) {
            return 'success-row';
          }
          return '';
        },

        // 删除确认函数执行体
        handleConfirm() {
          // 变量自定义this开头
           const host = this.state;
            const kuname = this.selectedDatabase;
            const duankou = this.port;
            const keyzhi = this.key;
            const md5_gouxuan = this.md5_gouxuan;
            //post请求，data参数值
            axios.post('http://192.168.14.253/api/deltle', { 
              host: host,
            key: keyzhi,
           prod: duankou,
           db: kuname,
          authentication: "7a87edec6bfbba42805e3ff53194",
          md5_gouxuan: md5_gouxuan, 
          })
          .then(response => {
            alert('删除成功');
            })
            .catch(error => {
 // 获取响应状态码
 const statusCode = error.response.status;
   console.log(statusCode)
    if (statusCode === 500) {
      alert('删除失败');
    } else if (statusCode === 400) {
      alert('不能使用*');
    } else {
      alert('删除失败');
    }
                
              console.error(error);
            });
        },

        // 确认时的处理
        chaxun() {
            const host = this.state;
            const kuname = this.selectedDatabase;
            const duankou = this.port;
            const keyzhi = this.key;
            const md5_gouxuan = this.md5_gouxuan;
            

          // console.log(host,kuname,duankou,keyzhi,md5_gouxuan)
          axios.post('https://192.168.14.66/api/select', { 
            host: host,
            key: keyzhi,
           prod: duankou,
           db: kuname,
        authentication: "7a87edec6bfb1b805e3ffd553194",
        md5_gouxuan: md5_gouxuan, 
          
          })
            .then(response => {
              console.log(response.data);
              // 增加表格数据
              this.tableData = this.tableData.concat(response.data);
              console.log(this.tableData);
            })
            .catch(error => {
 // 获取响应状态码
 const statusCode = error.response.status;
   console.log(statusCode)
    if (statusCode === 408) {
      alert('没有key');
    } else if (statusCode === 502) {
      alert('不能使用*');
    } else {
      alert('获取失败');
    }
                
              console.error(error);
            });
        },
      },
    };

    const app = Vue.createApp(App);
    app.use(ElementPlus);
    app.mount("#app");


  </script>


  <!-- 表格：颜色等属性 -->
  <style>
    .el-table .warning-row {
      --el-table-tr-bg-color: var(--el-color-warning-light-9);
    }
    .el-table .success-row {
      --el-table-tr-bg-color: var(--el-color-success-light-9);
    }
  </style>

</body>
</html>
vue + element-plus 基础学习模板

发表评论

土味情话

生活小窍门
