项目实现的功能
此项目主要运用了 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: "已取消添加",
});
});
}
},