后台功能实现的总结

秦悸

已于 2022-11-15 09:50:36 修改

阅读量861

点赞数

分类专栏： vue 文章标签： 1024程序员节

于 2022-10-24 15:57:27 首次发布

本文链接：https://blog.csdn.net/GikQxx21_wen/article/details/127494098

版权

vue 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

项目实现的功能

此项目主要运用了 html css JavaScript、jquery前端技术

采用vue-router、axios 、sec-ui 框架

利用Swagger ui 作为前后端接口联调

封装axios

import axios from 'axios'

const api = axios.create({
    // baseURL: 'http://39.105.151.241:8081',
    timeout: 5000,
})

api.interceptors.request.use(config => {
    config.headers.Authorization = window.sessionStorage.getItem('tokense')
    return config
}, err => {
    Promise.reject(err)
})

api.interceptors.response.use(res => {

    return Promise.resolve(res.data.data)
}, err => {

    Promise.reject(err)
})

export default api

在src同级创建一个request文件夹然后对api进行二次封装 封装接口
import api from '../index'

// 站点对象的数据
export function getState(data) {
  return api({
    url: `/V1.0/ctcontrol/O09/portal/Site`, // 请求地址
    method: 'post', // 请求方式
    data //(一般get请求，我们习惯使用params属性来传参）
  })
}

// 租户的接口
export function getTenant(data) {
  return api({
    url: `/V1.0/ctcontrol/O16/portal/Tenant`, // 请求地址
    method: 'post', // 请求方式
    data //(一般get请求，我们习惯使用params属性来传参）
  })
}
········(剩余接口省略)

解决跨域的问题

在vue.config.js文件配置proxyT

proxy: {
      "/V1.0": {
        target: 'http://39.105.151.241:8081',
        // target:'',
        changeOrigin: true,
        pathRewrite: {
          "^/V1.0": "/V1.0",
        }
      },
 }

分页事件的实现

主要有利用到 element框架里面的分页组件

// demo
<!-- 分页 -->
    <div class="block">
      <sec-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="pagesize"
        layout="total, prev, pager, next, sizes, jumper"
        :total="total"
        style="margin-top: 20px; float: right"
      >
      </sec-pagination>
    </div>
// js
data() {
    return {
      total: 0, // total为0 总条数据 获取接口里面的total
      pagenum: 1,
      pagesize: 5,
    };
   // 分页的事件
    handleSizeChange(val) {
      //   console.log(val);
      this.pagesize = val;  
      this.getBlackList(); //重新刷新数据
    },
    handleCurrentChange(val) {
      //   console.log(val);
      this.pagenum = val;
      this.getBlackList();  //重新刷新数据
    },

搜索功能的实现

将输入框的内容赋值给后端的相对应的名字传参获取相对应的数据然后展示在页面上

重置就将输入框内容为空然后重新调用数据

    // 搜索
    submitForm() {
      getStatus({
        protectionType: this.filterForm.type,
        protectionName: this.filterForm.statusname,
        createBy: this.filterForm.byname,
        pageNum: this.pagenum,
        pageSize: this.pagesize,
        arrayId: "",
      }).then((res) => {
        console.log(res);
        this.tableData = res.result.records;
        let _this = this;
        res.result.records.forEach((item) => {
          item.createTime = _this.$moment(item.createTime).format("YYYY-MM-DD HH:mm:ss");
        });
      });
    },
    // 重置
    resetForm() {
      (this.filterForm = {
        type: "",
        byname: "",
        statusname: "",
      }),
        this.getStatusList();
    },
    //分页事件
     handleSizeChange(val) {
      this.pagesize = val;
      this.getStatusList(); //获取表格的全部列表数据
      this.submitForm(); //获取搜索的时的全部数据
    },
    handleCurrentChange(val) {
      this.pagenum = val;
      this.getStatusList();//获取表格的全部列表数据
      this.submitForm();//获取搜索的时的全部数据
    },

查看功能的展示

利用template标签 slot-scope="scope"属性 来获取当前行的数据 点击将出现弹出框

展示需要的信息（弹出框中利用了 sec ui框架中的描述列表的框架来展示的信息）

防护模板

防护模板的页面有搜索 查看功能 与防护规则的实现方法一样

注意：防护模板中模板详情里面还有一层查看规则详情
利用到vue-router 当跳转时携带对应的id名 跳转防护列表页面

//DEMO部分
 <div class="cont">
       <span class="left">{{ modelList.crawlerId }}</span>
       <span class="desc" @click="toModelChildren(modelList.crawlerId)">
            查看规则详情
       </span>
  </div>
//js部分
 // 跳转modelchildren页面
    toModelChildren(val) {
      console.log(val);
      this.$router.push({
        path: "/index2/modelchildren",
        query: { val },
      });
    },

黑白名单管理

黑白名单页面有新增编辑删除搜索的功能

增加功能实现

封装黑白名单的新增接口点击添加弹出输入框将输入框的内容添加在页面中内容必须是一个数组类型的然后传进去进行成功失败的实现

// 新增
    add() {
      this.title = "添加";
      this.dialogFormVisible = true;
      // let obj = this.form.content;
      this.form = {
        siteObjectId: "",
        type: "",
        category: "",
        contents: [],
        content: "",
      };
    },
//弹出框 输入内容完毕之后 点击确定执行的功能
        let cententValue = this.form.content.split(","); 
        //contents数组以','隔开成为一条一条的数据
        let obj = {
          siteObjectId: this.form.siteObjectId,
          type: this.form.type,
          category: this.form.category,
          contents: [...cententValue],
        };
        getAddBlack(obj).then((res) => {
          console.log(res);

          this.dialogFormVisible = false;  //成功之后关闭弹出框
          this.form = {                //表单为空
            siteObjectId: "",
            type: "",
            category: "",
            contents: [],
            content: "",
          }; 
          this.getBlackList();  //渲染页面的数据 将添加的内容展示在页面上
        });

编辑功能的实现

点击编辑获取数据回填然后调用接口

// 编辑
    edit(val) {
      console.log(val);
      this.title = "编辑";
      this.dialogFormVisible = true;
      this.form = {
        siteObjectId: val.site_object_id,
        category: val.category,
        type: val.type,
        content: val.content,
        blackWhiteId: val.black_white_id,
      };
    },
//弹出框 输入内容完毕之后 点击确定执行的功能
        editBlack(this.form).then((res) => {
          console.log(res);
          this.dialogFormVisible = false;
          this.getBlackList();
        });

删除的功能实现

调用删除的接口实现 id删除

 // 删除
    del(val) {
      console.log(val);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delBlack(val.black_white_id).then((res) => {
            console.log(res);
            this.getBlackList();
          });
        })
        .catch(() => {
          return 
        });
    },

只添加一次的功能

// demo
 <!-- 按钮 -->
    <div class="btn">
      <sec-button type="primary" plain @click="add" :disabled="disabled">新增</sec-button>
    </div>
// js
data() {
    return {
      dialogVisible: false,  //是否显示弹出框
      disabled: false,  //  按钮是否禁用    };
  },
//  点击
    add() {
      if (!this.tableData) {
        this.dialogVisible = true;
        this.form = {
          eth1: "",
          eth2: "",
          eth0: "",
          gatewayIp: "",
          wafMac: "",
        };
      } else {
        this.disabled = true;
        this.$message("引流环境已经配置，无需重新添加 ");
      }
    },
    // 新增
    submit() {
      if (
        this.form.eth1 == "" ||
        this.form.eth2 == "" ||
        this.form.eth0 == "" ||
        this.form.gatewayIp == "" ||
        this.form.wafMac == ""
      ) {
        this.$message("输入框不能为空，请输入内容");
        return;
      } else {
        this.$confirm("请确保信息无误，配置成功后将无法修改, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            getAddEnviro(this.form).then((res) => {
              console.log(res);
              this.dialogVisible = false;
              this.form = {
                eth1: "",
                eth2: "",
                eth0: "",
                gatewayIp: "",
                wafMac: "",
              };
              this.getList();
            });
            this.$message({
              type: "success",
              message: "添加成功!",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消添加",
            });
          });
      }
    },