第二阶段冲刺2

测试引入富文本编辑器写的发布文章的功能

 

 

<template>
    <el-container class="publish-container">
      <el-header class="header">
        <el-row class="header-content">
          <el-col :span="18">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item>首页</el-breadcrumb-item>
              <el-breadcrumb-item>文章管理</el-breadcrumb-item>
              <el-breadcrumb-item>发表文章</el-breadcrumb-item>
            </el-breadcrumb>
          </el-col>
          <el-col :span="6" class="text-right">
            <el-avatar icon="el-icon-user-solid" />
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <el-form :model="form" class="publish-form">
          <el-row class="form-row">
            <el-col :span="12">
              <el-form-item label="标题" class="form-item">
                <el-input v-model="form.title" placeholder="请输入标题" class="input"></el-input>
              </el-form-item>
            </el-col>
        </el-row>

        <el-row justify="space-between"  style="margin-bottom: 10px;">
        <el-col :span="12" style="display: flex; align-items: center;">
            <el-form-item label="发布时间" class="form-item" style="margin-bottom: 0;">
            <el-date-picker v-model="form.publishTime" type="date" placeholder="选择日期" class="input" style="width: 85%"></el-date-picker>
            </el-form-item>
        <el-button type="primary" @click="form.dialogVisible = true" class="publish-btn">发表文章</el-button>
        </el-col>
        </el-row>
          <el-row class="form-row">
            <el-col :span="12">
              <el-form-item label="内容" class="form-item">
                <div class="editor-container">
                  <div ref="editor" class="editor"></div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12"> 
              <el-form-item label="预览" class="form-item">
                    <div class="editor-container">
                    <div  class="preview" v-html="form.content"></div>
                    </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-main>

    
        <el-dialog v-model="form.dialogVisible" title="发布文章" width="500px">
        <el-form :model="form">
          <el-form-item label="文章类型">
            <el-select v-model="form.articleType" placeholder="请选择文章类型">
              <el-option label="安全常识" value="安全常识"></el-option>
              <el-option label="急救事项" value="急救事项"></el-option>
              <el-option label="社区公告" value="社区公告"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="缩略图" >
            <el-upload
              class="upload-demo"
              drag
              :on-success="handleSuccess"
              list-type="picture"
              >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="form.dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveBlog">发布文章</el-button>
        </div>
      </el-dialog>
    
    </el-container>
  </template>
  
  <script>
  import { ref, onMounted } from 'vue';
  import Quill from 'quill';
  import 'quill/dist/quill.snow.css';
  
  export default {
    setup() {
      const form = ref({
        articleType: '',
        dialogVisible: false,
        title: '',
        publishTime: '',
        content: '',
        imageData: '',
        fileList: []
      });

      const editor = ref(null);
  
      const handleSuccess = (response, file, fileList) => {
        getBase64(file.raw, (base64Image) => {
          form.value.imageData = base64Image;
        });
      }

      const getBase64 = (file, callback) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function () {
          const base64Image = reader.result;
          callback(base64Image);
        };
      }
      onMounted(() => {
        const quill = new Quill(editor.value, {
          theme: 'snow',
          modules: {
            toolbar: [
              [{ 'header': '1'}, {'header': '2'}, { 'font': [] }],
              ['bold', 'italic', 'underline', 'blockquote','strike', 'code-block'],
              [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}],
              ['direction', 'align', 'color', 'background'],
              ['link', 'image'],
            ],
          },
          placeholder: '请输入新闻内容...'
        });

        quill.on('text-change', () => {
          form.value.content = quill.root.innerHTML;
        });
      });

   const saveBlog = () => {
    const postData = {
        title: form.value.title,
        content: form.value.content,
        publishTime: form.value.publishTime,
        articleType: form.value.articleType,
        base64Image: form.value.imageData // 图片的base64编码
    };

    fetch('http://localhost:9090/news/savenews', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ param: postData }), // 将数据对象转换为JSON字符串，并放入一个参数中
    })
    .then(response => response.text())
    .then(data => { 
        console.log(data); // 成功上传时打印消息
    })
    .catch(error => {
        console.error('Error:', error); // 处理错误
    });
    form.value.dialogVisible = false; // 关闭弹窗
    form.value.articleType = '';
    form.value.title = '';
    form.value.publishTime = '';
    form.value.content = '';
    form.value.imageData = '';
    form.value.fileList = [];
};


      return {
        form,
        editor,
        handleSuccess,
        saveBlog,
      };
    }
  };
</script>
  
  <style>
  .publish-container {
    max-width: 100%;
    margin: 20px auto;
  }
  
  .header {
    background-color: #333;
    color: #fff;
    padding: 10px;
  }
  
  .header-content {
    margin: 0 auto;
  }
  
  .publish-form {
    margin-top: 20px;
  }
  
  .form-row {
    display: flex;
  }
  
  .form-row .el-form-item {
    width: 100%;
  }
  
  .form-item {
    margin-bottom: 20px;
  }
  
  .input {
    width: 100%;
  }
  
  .editor-container {
    width: 100%;
    height: 600px; /* 增大输入框高度 */
    border: 1px solid #ccc;
    margin-bottom: 20px;
    overflow-y: auto;  /* 添加滚动条 */
  }
  
  .editor {
    height: 100%;
    min-height: 300px; /* 设置最小高度 */
    max-height: 100%; /* 设置最大高度 */
  }
  
  .preview {
    height: 600px; /* 增大预览框高度 */
    border: 1px solid #ccc;
    padding: 10px;
    overflow-y: auto;
    background-color: #f5f5f5;
    margin-bottom: 20px;
  }
  
  .publish-btn {
    margin-left: 50%;
    transform: translateX(-50%);
  }
  </style>
  

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<%request.setCharacterEncoding("utf-8");%>
<!DOCTYPE html>
<html>
<head>
    <title>删除结果</title>
    <link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<%
    int id = Integer.parseInt(request.getParameter("id"));

    Connection conn = null;
    PreparedStatement pstmt = null;
    try {
        Class.forName("com.mysql.cj.jdbc.Driver");
        conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/students?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC", "web", "123456");
        String sql = "DELETE FROM students WHERE id=?";
        pstmt = conn.prepareStatement(sql);
        pstmt.setInt(1, id);
        int result = pstmt.executeUpdate();
        if (result > 0) {
            out.println("删除成功！");
        } else {
            out.println("删除失败！");
        }
    } catch (Exception e) {
        response.sendRedirect("error.jsp?msg=" + e.getMessage());
    } finally {
        try {
            if (pstmt != null) pstmt.close();
            if (conn != null) conn.close();
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
%>
<a href="index.jsp">返回首页</a>
</body>
</html>