🎨开始重构

pastecode-system/src/main/java/com/mewhz/paste/controller/CodeController.java

@@ -37,4 +37,9 @@ public Map<String, Object> save(@RequestBody Code code){
         result.put("codeId", code.getCodeId());
         return result;
     }
+
+    @GetMapping("/{id}")
+    public Code findById(@PathVariable("id") Integer id){
+        return codeService.getById(id);
+    }
 }

pastecode-ui/babel.config.js

@@ -1,5 +1,13 @@
 module.exports = {
   presets: [
     '@vue/cli-plugin-babel/preset'
-  ]
+  ],
+    plugins: [
+        ['prismjs', {
+          'languages': ['java', 'c', 'cpp', 'python'],
+          'plugins': ['line-numbers', 'match-braces', 'show-language'],
+          'theme': 'coy',
+          'css': true
+        }]
+    ]
 }

pastecode-ui/package.json

@@ -10,6 +10,7 @@
     "axios": "^0.27.2",
     "core-js": "^3.6.5",
     "element-ui": "^2.15.8",
+    "prismjs": "^1.28.0",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0"
   },

pastecode-ui/src/App.vue

@@ -14,3 +14,7 @@
 /*}*/
 
 </style>
+<script lang="js">
+
+</script>
+

pastecode-ui/src/main.js

@@ -6,6 +6,7 @@ import 'element-ui/lib/theme-chalk/index.css'
 import axios from 'axios'
 
 
+
 Vue.prototype.$axios = axios
 Vue.config.productionTip = false
 

pastecode-ui/src/router/index.js

@@ -17,7 +17,7 @@ const routes = [
     component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
   },
   {
-    path: '/code',
+    path: '/code/:id',
     name: 'Code',
     component: Code
   }

pastecode-ui/src/views/Code.vue

@@ -1,19 +1,49 @@
 <template>
-<div>
-  <h1>Code</h1>
-  <pre>
-            <code id="code" class="code">
-              print("Hello World!")
-            </code>
-  </pre>
-</div>
+  <div>
+    <h1>Code</h1>
+    <div class="line-numbers rainbow-braces match-braces no-brace-hover no-brace-select">
+      <pre><code :class=codeClass v-text="codeText"/></pre>
+    </div>
+  </div>
 </template>
 
 <script>
-import prism from '../../static/js/prism.js';
 
+import Prism from 'prismjs';
+import 'prismjs/components/prism-java.js';
+import 'prismjs/components/prism-c.min.js';
+import 'prismjs/components/prism-cpp.min.js';
+import 'prismjs/plugins/match-braces/prism-match-braces.js';
+import 'prismjs/plugins/show-language/prism-show-language.js';
 export default {
-  name: "Code"
+  name: "Code",
+  data() {
+    return {
+      id: "",
+      codeText: '',
+      codeClass: '',
+    }
+  },
+  methods: {
+    load() {
+      this.$axios.get('http://127.0.0.1:9090/code/' + this.id).then((res) => {
+        this.codeText = res.data.codeText;
+        this.codeClass = `language-${res.data.codeType} show-language`;
+        console.log(this.codeText);
+        this.$nextTick(() => {
+          // 将回调函数放到下一个节点执行
+          Prism.highlightAll();
+          // this.$forceUpdate();
+        });
+      }).catch((err) => {
+        console.log(err);
+      });
+    }
+  },
+  created() {
+    this.id = this.$route.params.id;
+    this.load();
+  }
 }
 </script>
 

pastecode-ui/src/views/Home.vue

@@ -36,18 +36,18 @@ export default {
   name: 'Home',
   data() {
     return {
-      textarea: "",
+      textarea: 'print("Hello World!")',
       types: [{
-        value: 'Java',
+        value: 'java',
         label: 'Java'
       },{
-        value: 'Python',
+        value: 'python',
         label: 'Python'
       },{
-        value: 'C/C++',
+        value: 'cpp',
         label: 'C/C++'
       }],
-      value: '',
+      value: 'python',
     }
   },
   methods: {
@@ -69,11 +69,9 @@ export default {
     },
     // 提交代码
     jump(id) {
-      this.$axios.get("http://127.0.0.1:8080/code/" + id).then((res) => {
-
-      });
+      this.$router.push('/code/' + id);
     }
-  }
+  },
 }
 </script>