测试博客提交
This commit is contained in:
parent
6204cb23d6
commit
01b895ca15
@ -13,6 +13,15 @@
|
||||
border: 1px solid #ddd;
|
||||
margin-top: 20px;
|
||||
}
|
||||
body {
|
||||
background-color: #1a1a1a; /* 默认深色 */
|
||||
color: #ffffff;
|
||||
transition: all 0.3s ease; /* 平滑切换 */
|
||||
}
|
||||
body.theme-light {
|
||||
background-color: #ffffff; /* 浅色模式 */
|
||||
color: #000000;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -33,6 +42,13 @@
|
||||
<canvas id="pdf-render"></canvas>
|
||||
|
||||
<script>
|
||||
window.addEventListener('message', (event) => {
|
||||
const {theme} = event.data;
|
||||
if (theme) {
|
||||
// 根据主题动态添加或移除 class
|
||||
document.body.classList.toggle('theme-light', theme === 'light');
|
||||
}
|
||||
});
|
||||
async function extractPages() {
|
||||
const fileInput = document.getElementById('pdfFile');
|
||||
const startPage = parseInt(document.getElementById('startPage').value);
|
||||
|
||||
@ -5,7 +5,7 @@ defineProps({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<router-link :to="'/blog/'+Math.floor(Math.random()*1e+5)">
|
||||
<router-link :to="'/blog/'+blog.id">
|
||||
<div class="blog-box">
|
||||
<img :src="blog.image" alt="Blog image" class="blog-image" />
|
||||
<div class="blog-details">
|
||||
|
||||
@ -2,117 +2,18 @@
|
||||
import { ref } from 'vue';
|
||||
import BlogBox from "../components/Blog_box.vue";
|
||||
import {getRandomIMG} from "../utils/randomIMG.js";
|
||||
import PagingController from "../components/PagingController.vue";
|
||||
|
||||
const tags = ref([
|
||||
{ name: '家猪饲养', active: false },
|
||||
{ name: '猪舍管理', active: false },
|
||||
{ name: '猪饲料配方', active: false },
|
||||
{ name: '猪种选择', active: false },
|
||||
{ name: '猪场建设', active: false },
|
||||
{ name: '环境控制', active: false },
|
||||
{ name: '疫病防控', active: false },
|
||||
{ name: '生猪免疫', active: false },
|
||||
{ name: '饲养技术', active: false },
|
||||
{ name: '家猪繁育', active: false },
|
||||
{ name: '猪瘟预防', active: false },
|
||||
{ name: '生猪疫苗', active: false },
|
||||
{ name: '屠宰加工', active: false },
|
||||
{ name: '猪肉品质', active: false },
|
||||
{ name: '养猪设备', active: false },
|
||||
{ name: '自动喂料', active: false },
|
||||
{ name: '猪粪处理', active: false },
|
||||
{ name: '循环利用', active: false },
|
||||
{ name: '生猪运输', active: false },
|
||||
{ name: '养猪政策', active: false },
|
||||
{ name: '生猪市场', active: false },
|
||||
{ name: '风险控制', active: false },
|
||||
{ name: '遗传改良', active: false },
|
||||
{ name: '饲料添加剂', active: false },
|
||||
{ name: '生长调控', active: false },
|
||||
{ name: '消化率提升', active: false },
|
||||
{ name: '高效养猪', active: false },
|
||||
{ name: '猪场消毒', active: false },
|
||||
{ name: '智能养猪', active: false },
|
||||
{ name: '数据养猪', active: false },
|
||||
{ name: '健康管理', active: false },
|
||||
{ name: '繁殖管理', active: false },
|
||||
{ name: '环境优化', active: false },
|
||||
{ name: '供应链管理', active: false },
|
||||
{ name: '抗生素替代', active: false },
|
||||
{ name: '兽医服务', active: false },
|
||||
{ name: '营养管理', active: false },
|
||||
{ name: '通风系统', active: false },
|
||||
{ name: '饲料采购', active: false },
|
||||
{ name: '种植基地', active: false },
|
||||
{ name: '畜牧业创新', active: false },
|
||||
{ name: '经济效益', active: false },
|
||||
{ name: '信息化管理', active: false },
|
||||
{ name: '肉品追溯', active: false },
|
||||
{ name: '生长周期', active: false },
|
||||
{ name: '劳动管理', active: false },
|
||||
{ name: '粪污利用', active: false },
|
||||
{ name: '智慧畜牧', active: false },
|
||||
{ name: '可持续发展', active: false },
|
||||
{ name: '生态养猪', active: false }
|
||||
]);
|
||||
|
||||
|
||||
const searchQuery = ref('');
|
||||
|
||||
const blogs = ref([
|
||||
{ title: '如何提升家猪的生长速度', author: '张强', image: getRandomIMG(Math.random()), creatTime: '2025-02-12 08:30', tags: ['家猪饲养', '生长调控'] },
|
||||
{ title: '猪舍管理的最佳实践', author: '李梅', image: getRandomIMG(Math.random()), creatTime: '2025-02-11 16:45', tags: ['猪舍管理', '环境优化'] },
|
||||
{ title: '选择优质猪种的重要性', author: '王涛', image: getRandomIMG(Math.random()), creatTime: '2025-02-10 10:15', tags: ['猪种选择', '遗传改良'] },
|
||||
{ title: '猪饲料配方调整技巧', author: '刘刚', image: getRandomIMG(Math.random()), creatTime: '2025-02-09 14:00', tags: ['猪饲料配方', '饲料添加剂'] },
|
||||
{ title: '现代猪场建设的关键要素', author: '陈峰', image: getRandomIMG(Math.random()), creatTime: '2025-02-08 09:50', tags: ['猪场建设', '智能养猪'] },
|
||||
{ title: '如何有效控制养猪环境', author: '赵立', image: getRandomIMG(Math.random()), creatTime: '2025-02-07 11:30', tags: ['环境控制', '猪舍管理'] },
|
||||
{ title: '猪免疫接种的最佳时机', author: '孙华', image: getRandomIMG(Math.random()), creatTime: '2025-02-06 13:00', tags: ['生猪免疫', '疫病防控'] },
|
||||
{ title: '如何提高猪肉的品质', author: '周凯', image: getRandomIMG(Math.random()), creatTime: '2025-02-05 15:00', tags: ['猪肉品质', '屠宰加工'] },
|
||||
{ title: '智能化养猪设备的应用', author: '杨峰', image: getRandomIMG(Math.random()), creatTime: '2025-02-04 09:20', tags: ['养猪设备', '自动喂料'] },
|
||||
{ title: '猪粪处理与资源回收的创新', author: '吴敏', image: getRandomIMG(Math.random()), creatTime: '2025-02-03 17:30', tags: ['猪粪处理', '循环利用'] },
|
||||
{ title: '生猪疫苗的选用标准', author: '高雪', image: getRandomIMG(Math.random()), creatTime: '2025-02-02 11:00', tags: ['生猪疫苗', '疫病防控'] },
|
||||
{ title: '如何建立高效的猪场管理体系', author: '张涛', image: getRandomIMG(Math.random()), creatTime: '2025-02-01 13:30', tags: ['饲养技术', '风险控制'] },
|
||||
{ title: '从猪场到市场的供应链管理', author: '李丹', image: getRandomIMG(Math.random()), creatTime: '2025-01-31 16:40', tags: ['供应链管理', '生猪市场'] },
|
||||
{ title: '抗生素替代技术的研究与应用', author: '周鑫', image: getRandomIMG(Math.random()), creatTime: '2025-01-30 10:50', tags: ['抗生素替代', '饲料添加剂'] },
|
||||
{ title: '生态养猪：环境友好与可持续发展', author: '刘婧', image: getRandomIMG(Math.random()), creatTime: '2025-01-29 08:00', tags: ['生态养猪', '可持续发展'] },
|
||||
{ title: '家猪繁殖管理的最佳方法', author: '陈光', image: getRandomIMG(Math.random()), creatTime: '2025-01-28 09:00', tags: ['家猪繁育', '繁殖管理'] },
|
||||
{ title: '猪场智能化的未来趋势', author: '王慧', image: getRandomIMG(Math.random()), creatTime: '2025-01-27 14:10', tags: ['智能养猪', '智慧畜牧'] },
|
||||
{ title: '优化猪肉品质的生产流程', author: '周华', image: getRandomIMG(Math.random()), creatTime: '2025-01-26 16:25', tags: ['猪肉品质', '生长周期'] },
|
||||
{ title: '高效养猪的创新技术', author: '刘磊', image: getRandomIMG(Math.random()), creatTime: '2025-01-25 13:40', tags: ['高效养猪', '饲养技术'] },
|
||||
{ title: '猪场管理的数字化转型', author: '张丽', image: getRandomIMG(Math.random()), creatTime: '2025-01-24 12:10', tags: ['信息化管理', '数据养猪'] },
|
||||
{ title: '猪肉产品追溯系统的建设', author: '李平', image: getRandomIMG(Math.random()), creatTime: '2025-01-23 15:30', tags: ['肉品追溯', '生猪免疫'] },
|
||||
{ title: '如何减少猪场的疫病传播', author: '赵新', image: getRandomIMG(Math.random()), creatTime: '2025-01-22 17:00', tags: ['疫病防控', '猪舍管理'] },
|
||||
{ title: '科学管理猪场劳动成本', author: '王萌', image: getRandomIMG(Math.random()), creatTime: '2025-01-21 11:15', tags: ['劳动管理', '经济效益'] },
|
||||
{ title: '猪种改良与遗传优化的前景', author: '孙凯', image: getRandomIMG(Math.random()), creatTime: '2025-01-20 09:00', tags: ['遗传改良', '猪种选择'] },
|
||||
{ title: '生猪运输过程中风险的防控', author: '杨华', image: getRandomIMG(Math.random()), creatTime: '2025-01-19 12:40', tags: ['生猪运输', '风险控制'] },
|
||||
{ title: '猪场的环保与粪污利用技术', author: '王波', image: getRandomIMG(Math.random()), creatTime: '2025-01-18 14:10', tags: ['粪污利用', '生态养猪'] },
|
||||
{ title: '智能化管理提升养猪效益', author: '赵雪', image: getRandomIMG(Math.random()), creatTime: '2025-01-17 13:30', tags: ['智能养猪', '高效养猪'] },
|
||||
{ title: '家猪养殖中的生长调控策略', author: '陈婷', image: getRandomIMG(Math.random()), creatTime: '2025-01-16 10:30', tags: ['生长调控', '家猪饲养'] },
|
||||
{ title: '如何高效利用猪饲料', author: '李伟', image: getRandomIMG(Math.random()), creatTime: '2025-01-15 09:10', tags: ['猪饲料配方', '饲料添加剂'] },
|
||||
{ title: '猪场废水处理与资源再利用', author: '周丹', image: getRandomIMG(Math.random()), creatTime: '2025-01-14 12:30', tags: ['猪粪处理', '循环利用'] },
|
||||
{ title: '猪场防疫技术与管理措施', author: '王鑫', image: getRandomIMG(Math.random()), creatTime: '2025-01-13 14:50', tags: ['疫病防控', '生猪免疫'] },
|
||||
{ title: '现代养猪业的科技创新', author: '刘辉', image: getRandomIMG(Math.random()), creatTime: '2025-01-12 16:00', tags: ['畜牧业创新', '智能养猪'] },
|
||||
{ title: '新型猪肉加工技术解析', author: '高林', image: getRandomIMG(Math.random()), creatTime: '2025-01-11 11:20', tags: ['屠宰加工', '猪肉品质'] },
|
||||
{ title: '猪场的健康管理体系建设', author: '陈杰', image: getRandomIMG(Math.random()), creatTime: '2025-01-10 08:40', tags: ['健康管理', '饲养技术'] },
|
||||
{ title: '自动化养猪技术的优势分析', author: '李斌', image: getRandomIMG(Math.random()), creatTime: '2025-01-09 13:30', tags: ['养猪设备', '自动喂料'] },
|
||||
{ title: '猪场食品安全与监管体系', author: '张文', image: getRandomIMG(Math.random()), creatTime: '2025-01-08 15:10', tags: ['生猪免疫', '肉品追溯'] },
|
||||
{ title: '精准农业与家猪养殖的结合', author: '李龙', image: getRandomIMG(Math.random()), creatTime: '2025-01-07 09:50', tags: ['精准农业', '智能养猪'] },
|
||||
{ title: '如何提高家猪的繁殖效率', author: '王丽', image: getRandomIMG(Math.random()), creatTime: '2025-01-06 10:20', tags: ['家猪繁育', '繁殖管理'] },
|
||||
{ title: '猪舍设计与环境调控技术', author: '孙瑶', image: getRandomIMG(Math.random()), creatTime: '2025-01-05 11:00', tags: ['猪舍管理', '环境控制'] },
|
||||
{ title: '如何选择最合适的猪种进行养殖', author: '赵林', image: getRandomIMG(Math.random()), creatTime: '2025-01-04 14:00', tags: ['猪种选择', '遗传改良'] },
|
||||
{ title: '猪场环境污染控制与治理技术', author: '周波', image: getRandomIMG(Math.random()), creatTime: '2025-01-03 16:30', tags: ['环境优化', '猪粪处理'] },
|
||||
{ title: '猪肉市场分析与趋势预测', author: '王海', image: getRandomIMG(Math.random()), creatTime: '2025-01-02 10:50', tags: ['生猪市场', '经济效益'] },
|
||||
{ title: '家猪养殖中的健康风险控制', author: '杨东', image: getRandomIMG(Math.random()), creatTime: '2025-01-01 09:30', tags: ['风险控制', '健康管理'] },
|
||||
{ title: '家猪繁育管理的难点与对策', author: '李彬', image: getRandomIMG(Math.random()), creatTime: '2024-12-31 15:40', tags: ['家猪繁育', '繁殖管理'] },
|
||||
{ title: '猪场生产效率的提升路径', author: '陈明', image: getRandomIMG(Math.random()), creatTime: '2024-12-30 13:00', tags: ['高效养猪', '饲养技术'] },
|
||||
{ title: '猪场废物利用与绿色养殖', author: '周宇', image: getRandomIMG(Math.random()), creatTime: '2024-12-29 11:20', tags: ['循环利用', '生态养猪'] },
|
||||
{ title: '生猪运输中的安全问题与防控', author: '王飞', image: getRandomIMG(Math.random()), creatTime: '2024-12-28 14:50', tags: ['生猪运输', '风险控制'] },
|
||||
{ title: '家猪免疫管理的关键措施', author: '刘薇', image: getRandomIMG(Math.random()), creatTime: '2024-12-27 16:30', tags: ['生猪免疫', '疫病防控'] },
|
||||
{ title: '如何使用智能设备提高养猪效率', author: '赵婷', image: getRandomIMG(Math.random()), creatTime: '2024-12-26 10:40', tags: ['智能养猪', '养猪设备'] },
|
||||
{ title: '猪肉品质的影响因素分析', author: '张莉', image: getRandomIMG(Math.random()), creatTime: '2024-12-25 13:30', tags: ['猪肉品质', '生长周期'] },
|
||||
{ title: '猪场管理中数据分析的应用', author: '李帅', image: getRandomIMG(Math.random()), creatTime: '2024-12-24 14:10', tags: ['数据养猪', '信息化管理'] },
|
||||
{ title: '猪种选择对养殖效益的影响', author: '王月', image: getRandomIMG(Math.random()), creatTime: '2024-12-23 16:40', tags: ['猪种选择', '经济效益'] }
|
||||
])
|
||||
{ title: '如何提升家猪的生长速度', author: '张强', image: null, creatTime: '2025-02-12 08:30', tags: ['家猪饲养', '生长调控'], id: 1}])
|
||||
|
||||
|
||||
|
||||
@ -143,6 +44,7 @@ const filterBlogs = () => {
|
||||
<div class="blogs">
|
||||
<BlogBox v-for="blog in filterBlogs()" :key="blog.title" :blog="blog" />
|
||||
</div>
|
||||
<PagingController :current-page="3" :amount="10" :go-page-func="()=>{}"></PagingController>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -156,7 +58,8 @@ const filterBlogs = () => {
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
padding-top: 20px;
|
||||
gap: 20px;
|
||||
//margin-top: 70px;
|
||||
}
|
||||
|
||||
@ -173,7 +76,7 @@ const filterBlogs = () => {
|
||||
flex-wrap: wrap; /* 允许标签换行 */
|
||||
gap: 10px;
|
||||
justify-content: center; /* 使标签居中 */
|
||||
padding: 0 200px;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.tags span {
|
||||
@ -201,8 +104,7 @@ const filterBlogs = () => {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
width: calc(100% - 400px);
|
||||
padding: 0 200px;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.theme-light .tags span.active {
|
||||
|
||||
@ -31,6 +31,7 @@ import {Editor, Toolbar} from '@wangeditor/editor-for-vue';
|
||||
import api from "../utils/axios.js";
|
||||
import swal from "../utils/sweetalert.js";
|
||||
import Swal from "sweetalert2";
|
||||
import axios from "axios";
|
||||
|
||||
|
||||
// 编辑器实例，必须用 shallowRef
|
||||
@ -105,7 +106,7 @@ onBeforeUnmount(() => {
|
||||
editor.destroy();
|
||||
});
|
||||
|
||||
async function showInputPopup() {
|
||||
async function titleInputWindow() {
|
||||
try {
|
||||
while (1) {
|
||||
const result = await Swal.fire({
|
||||
@ -140,18 +141,40 @@ async function showInputPopup() {
|
||||
console.error('输入弹窗出错:', error)
|
||||
}
|
||||
}
|
||||
async function inputDirectSubmitURL() {
|
||||
const result = await Swal.fire({
|
||||
title: '测试: 上传接口',
|
||||
input: 'text',
|
||||
inputLabel: '输入上传博客调用的POST接口url',
|
||||
inputPlaceholder: '如"http://localhost:1234/blogs"',
|
||||
showCancelButton: true,
|
||||
cancelButtonText: '使用cyberURL',
|
||||
confirmButtonText: '确定',
|
||||
inputValidator: (value) => {
|
||||
if (!value) {
|
||||
return '输一下'
|
||||
}
|
||||
}
|
||||
})
|
||||
if (!result.isConfirmed) {
|
||||
return 'https://mva-cyber.club:5001/blogs';
|
||||
}
|
||||
return result.value;
|
||||
}
|
||||
|
||||
// 🚀 提交博客
|
||||
const submitBlog = async () => {
|
||||
if (!editorRef.value) return;
|
||||
|
||||
const title = await showInputPopup();
|
||||
const title = await titleInputWindow();
|
||||
if (title === -1) {
|
||||
return;
|
||||
}
|
||||
const response = await swal.window('info', '允许评论吗?', '其他用户可以在你的博客下留言', '允许', '不允许');
|
||||
let allowComments = response.isConfirmed;
|
||||
|
||||
const submitURL = await inputDirectSubmitURL();
|
||||
|
||||
let content = editorRef.value.getHtml(); // 获取 HTML 内容
|
||||
const images = [...imagesCache.value]; // 复制图片数组
|
||||
|
||||
@ -229,13 +252,12 @@ const submitBlog = async () => {
|
||||
|
||||
console.log(Object.fromEntries(formData.entries()));
|
||||
// 3️⃣ 发送请求
|
||||
api.post('/blogs', formData).then(response => {
|
||||
if (response.status !== 200) {
|
||||
swal.tip('error', `404'}`);
|
||||
return;
|
||||
}
|
||||
|
||||
axios.post(submitURL, formData).then(response => {
|
||||
response = response.data;
|
||||
console.log(response)
|
||||
if (response.code === 0) {
|
||||
swal.window('success', `提交成功, 博客id${response.blogId || '未找到(blogId字段)'}`);
|
||||
swal.window('success', '提交成功',`博客id: ${response.blogId || '未找到blogId字段'}`,'ok','好的');
|
||||
return;
|
||||
}
|
||||
swal.tip('error', '提交失败, code字段不为0')
|
||||
@ -243,6 +265,20 @@ const submitBlog = async () => {
|
||||
swal.tip('error', `错误${e.message}`)
|
||||
});
|
||||
|
||||
// api.post('/blogs', formData).then(response => {
|
||||
// if (response.status !== 200) {
|
||||
// swal.tip('error', `404'}`);
|
||||
// return;
|
||||
// }
|
||||
// if (response.code === 0) {
|
||||
// swal.window('success', `提交成功, 博客id${response.blogId || '未找到blogId字段'}`);
|
||||
// return;
|
||||
// }
|
||||
// swal.tip('error', '提交失败, code字段不为0')
|
||||
// }).catch((e) => {
|
||||
// swal.tip('error', `错误${e.message}`)
|
||||
// });
|
||||
|
||||
};
|
||||
|
||||
// 编辑器回调函数
|
||||
|
||||
@ -367,4 +367,7 @@ onBeforeUnmount(() => {
|
||||
.send-button:disabled {
|
||||
background-color: #9d9d9d;
|
||||
}
|
||||
.theme-light .send-button:disabled {
|
||||
background-color: #9d9d9d;
|
||||
}
|
||||
</style>
|
||||
@ -1,10 +1,44 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import store from "../../../store/index.js";
|
||||
|
||||
// 获取 iframe 的 ref
|
||||
const iframeRef = ref(null);
|
||||
|
||||
// 获取当前主题（假设从 body 的 class 判断）
|
||||
const getCurrentTheme = () => {
|
||||
return document.body.classList.contains('theme-light') ? 'light' : 'dark';
|
||||
};
|
||||
|
||||
// 向 iframe 发送主题信息
|
||||
const sendThemeToIframe = () => {
|
||||
const iframe = iframeRef.value;
|
||||
if (iframe && iframe.contentWindow) {
|
||||
const theme = getCurrentTheme();
|
||||
iframe.contentWindow.postMessage({ theme }, '*'); // '*' 表示目标 origin，此处可根据需要限制
|
||||
}
|
||||
};
|
||||
|
||||
// 当组件挂载时发送初始主题
|
||||
onMounted(() => {
|
||||
const iframe = iframeRef.value;
|
||||
iframe.addEventListener('load', () => {
|
||||
sendThemeToIframe(); // iframe 渲染完成后发送主题
|
||||
});
|
||||
});
|
||||
|
||||
// 监听 body 的主题变化（假设通过某种方式动态切换）
|
||||
watch(
|
||||
() => store.getters.currentTheme,
|
||||
() => {
|
||||
sendThemeToIframe();
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container">
|
||||
<iframe src="/static/isolatedPages/pdfExtractor/index.html" width="100%" height="100%"></iframe>
|
||||
<iframe ref="iframeRef" src="/static/isolatedPages/pdfExtractor/index.html" width="100%" height="100%"></iframe>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user