✅查看代码实现前后端分离

mewhz · Dec 31, 2021 · fc78cc2 · fc78cc2
1 parent 8a6d60a
commit fc78cc2
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 162 deletions.
diff --git a/src/main/java/com/mewhz/paste/controller/CodeController.java b/src/main/java/com/mewhz/paste/controller/CodeController.java
@@ -10,6 +10,7 @@
 import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.bind.annotation.ResponseBody;
 import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.servlet.ModelAndView;
 
 import java.util.List;
 
@@ -20,75 +21,13 @@
 public class CodeController {
 
     @RequestMapping("/code")
-    public String code(@RequestParam String id) {
-        String htmlFront = "<!DOCTYPE html>\n" +
-                "<html lang=\"en\">\n" +
-                "<head>\n" +
-                "    <meta charset=\"UTF-8\">\n" +
-                "    <title>";
-        String htmlTitle ="</title>\n" +
-                "    <link href=\"css/prism.css\" rel=\"stylesheet\">\n" +
-                "    <link rel=\"stylesheet\" href=\"css/bootstrap.min.css\"/>\n" +
-                "    <link href=\"https://cdn.bootcdn.net/ajax/libs/toastr.js/latest/css/toastr.min.css\" rel=\"stylesheet\">"+
-                "</head>\n" +
-                "<body>\n" +
-                "    <pre>\n" +
-                "      <code id=\"code\" class=\"language-";
-        String type = null;
-        String text = null;
-        String remark = null;
-        String htmlLast = "      </code>\n" +
-                "    </pre>\n" +
-                "<button id=\"button\" class=\"btn btn-success\" class=\"btn btn-success\" onclick=\"copy()\" data-clipboard-target=\"#code\" data-clipboard-action=\"copy\">一键复制</button>"+
-                "    <script src=\"js/prism.js\"></script>\n"+
-                "<script src=\"js/jquery-3.6.0.min.js\"></script>\n" +
-                "<script src=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/clipboard.min.js\"></script>\n"+
-                        "<script src=\"js/code.js\"></script>\n" +
-                        "<script src=\"https://cdn.bootcdn.net/ajax/libs/toastr.js/latest/js/toastr.min.js\"></script>";
-
-        String htmlEnd = "</body>\n" +
-                "</html>";
-        StringBuilder html = new StringBuilder(htmlFront);
-
-        String cHtml = "<script src=\"js/prism-c.min.js\"></script>\n" +
-                        "<script src=\"js/prism-cpp.min.js\"></script>\n";
-        String javaHtml = "<script src=\"js/prism-java.min.js\"></script>\n";
-        String pythonHtml = "<script src=\"js/prism-python.min.js\"></script>\n";
-
-
-        CodeSQL codesql = new CodeSQL();
-        List<Entity> list = codesql.findCode(id);
-
-        type = (String) list.get(0).get("type");
-        text = (String) list.get(0).get("text");
-        remark = (String) list.get(0).get("remark");
-        if ("".equals(remark)){
-            remark = "贴代码";
-        }
-
-        text = text.replaceAll("<", "&lt;");
-        text = text.replaceAll(">", "&gt;");
-        text = text.replaceAll("\n", "<br>");
-        text = text.replaceAll(" ", "&nbsp;");
-
-        html.append(remark).append(htmlTitle).append(type).append("\">").append(text).append(htmlLast);
-        if ("cpp".equals(type)){
-            html.append(cHtml);
-        }
-        else    if ("java".equals(type)){
-            html.append(javaHtml);
-        }
-        else    if ("python".equals(type)){
-            html.append(pythonHtml);
-        }
-        html.append(htmlEnd);
-
-        return html.toString();
+    public ModelAndView code(@RequestParam String id){
+        ModelAndView mav = new ModelAndView("/code.html?id=" + id);
+        return mav;
     }
 
-
-    @RequestMapping("/codes")
-    public JSONObject codes(@RequestParam String id){
+    @RequestMapping("/selectCode")
+    public JSONObject selectCode(@RequestParam String id){
 
         JSONObject json = JSONUtil.createObj();
         String type = null;
@@ -102,17 +41,10 @@ public JSONObject codes(@RequestParam String id){
         text = (String) list.get(0).get("text");
         remark = (String) list.get(0).get("remark");
 
-//        text = text.replaceAll("<", "&lt;");
-//        text = text.replaceAll(">", "&gt;");
-//        text = text.replaceAll("\n", "<br>");
-//        text = text.replaceAll(" ", "&nbsp;");
-
-
         json.append("text", text);
         json.append("type", type);
         json.append("remark", remark);
 
-
         return json;
     }
 }
diff --git a/src/main/resources/static/code.html b/src/main/resources/static/code.html
@@ -9,25 +9,14 @@
 </head>
 <body>
     <pre>
-      <code class="language-java" id="code">
-        package com.mewhz.paste;
-
-public class Main{
-    public static void main(String[] args) {
-        System.out.println("Hello World");
-    }
-}
+      <code id="code">
       </code>
     </pre>
-<!--    <button id="button" class="btn btn-success" onclick="copy()" data-clipboard-target="#code" data-clipboard-action="copy">一键复制</button>-->
+    <button id="button" class="btn btn-success" onclick="copy()" data-clipboard-target="#code" data-clipboard-action="copy">一键复制</button>
     <script src="js/prism.js"></script>
-<!--    <script src="js/prism-c.min.js"></script>-->
-<!--    <script src="js/prism-cpp.min.js"></script>-->
-<!--<script src="js/jquery-3.6.0.min.js"></script>-->
-<!--    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/clipboard.min.js"></script>-->
-<!--<script src="js/code.js"></script>-->
-<!--<script src="https://cdn.bootcdn.net/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>-->
-    <script src="js/prism-java.min.js"></script>
-<!--    <script src="js/prism-python.min.js"></script>-->
+    <script src="js/jquery-3.6.0.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/clipboard.min.js"></script>
+    <script src="js/code.js"></script>
+    <script src="https://cdn.bootcdn.net/ajax/libs/toastr.js/latest/js/toastr.min.js"></script><script src="js/prism-java.min.js"></script>
 </body>
 </html>
diff --git a/src/main/resources/static/codes.html b/src/main/resources/static/codes.html
diff --git a/src/main/resources/static/head.html b/src/main/resources/static/head.html
diff --git a/src/main/resources/static/js/code.js b/src/main/resources/static/js/code.js
@@ -1,10 +1,3 @@
-// $(document).ready(()=>{
-//     $("#button").click(()=>{
-//         let text = $("#code").text();
-//         navigator.clipboard.writeText(text);
-//         toastr.success("复制成功，快去粘贴吧！");
-//     });
-// });
 function copy(){
     let clipboard = new ClipboardJS('#button');
     clipboard.on('success', function(e) {
@@ -18,3 +11,45 @@ function copy(){
         toastr.error("一键复制失败，请手动复制！")
     });
 }
+
+function getQueryVariable(variable){
+
+    let query = window.location.search.substring(1);
+    let vars = query.split("&");
+    for (let i = 0; i < vars.length; i ++){
+        let pair = vars[i].split("=");
+        if (pair[0] === variable)  return pair[1];
+    }
+    return false;
+}
+
+$(document).ready(()=>{
+    let id = getQueryVariable("id");
+    const codeId = $("#code");
+    const title = $("title");
+    const body = $("body");
+    $.ajax({
+        url: "/selectCode?id=" + id,
+        success: (result)=>{
+            codeId.attr("class","language-" + result.type);
+            codeId.text(result.text);
+            title.text(result.remark);
+            if (result.remark === "")   {
+                title.text("贴代码");
+            }
+            switch (result.type){
+                case "java":
+                    body.append('<script src="js/prism-java.min.js"></script>');
+                    break;
+                case "cpp":
+                    body.append('<script src="js/prism-c.min.js"></script>');
+                    body.append('<script src="js/prism-cpp.min.js"></script>');
+                    break;
+                case "python":
+                    body.append('<script src="js/prism-python.min.js"></script>');
+            }
+            // 对代码重新渲染
+            Prism.highlightAll();
+        }
+    })
+});
diff --git a/src/main/resources/static/js/head.js b/src/main/resources/static/js/head.js