blog 构思 和布局构思

package-lock.json

@@ -908,6 +908,11 @@
       "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.0.7.tgz",
       "integrity": "sha1-ih8HiW2CsQkmvTdEokIACfiJdKg="
     },
+    "md-editor-v3": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/md-editor-v3/-/md-editor-v3-1.11.6.tgz",
+      "integrity": "sha512-+XviAuW092YR2DqY7M141J9QCvmaxi/UyowD9zWo2x1Wfzn85QCYp5fjvPRhutodU7/E+LIAnYiqWznEHCynSw=="
+    },
     "memoize-one": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",

package.json

@@ -19,6 +19,7 @@
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "lodash-unified": "^1.0.2",
+    "md-editor-v3": "^1.11.6",
     "moment": "^2.29.1",
     "pinia": "^2.0.13",
     "qs": "^6.10.3",

src/api/blog.ts

@@ -0,0 +1,14 @@
+import request from '../utils/request'
+import Qs from 'qs'
+const get_blogs = (params: Object) => {
+  return request({
+    url: '/blog',
+    method: 'get',
+    params: params,
+    paramsSerializer: (params) => {
+      return Qs.stringify(params, { arrayFormat: 'repeat' })
+    },
+  })
+}
+
+export { get_blogs }

src/components/layout/Layout.vue

@@ -5,7 +5,9 @@
         <SideBar></SideBar>
       </el-aside>
       <el-container>
-        <el-header>
+        <el-header
+          style="border-bottom-style:solid; border-bottom-width: 0.5px; border-bottom-color:rgba(151, 151, 151, 0.3);"
+        >
           <NavBar></NavBar>
         </el-header>
         <el-main>
@@ -13,8 +15,8 @@
         </el-main>
         <el-footer>
           <span>
-            小管设计
+            小管设计8
-            <br />一个执着于小提琴学习的垃圾程序员
+            <br />一个执着于小提琴学习的垃圾程序员1
           </span>
         </el-footer>
       </el-container>
@@ -28,14 +30,16 @@ import NavBar from "../layout/NavBar.vue";
 import SideBar from "../layout/SideBar.vue";
 </script>
 
-<style>
+<style scoped>
 /* .el-header,
 .el-footer {
-  background-color: #b8d1b3;
+
   color: rgb(51, 51, 51);
   text-align: center;
   line-height: 60px;
-}
+} */
+/* 
+
 
 .el-aside {
   background-color: #e9eef3;

src/components/layout/MainApp.vue

@@ -1,6 +1,5 @@
 <template>
-  <section class="section-main"
+  <section class="section-main" style="height:100%;">
-           style="height:100%;">
     <router-view style="height:100%;" />
   </section>
 </template>

src/components/layout/SideBar.vue

@@ -32,7 +32,7 @@ closeStyle {
 .side-main {
   width: 200px;
 }
-.el-menu-item {
+/* .el-menu-item {
   background-color: #01dfd7;
-}
+} */
 </style>

src/utils/request.ts

@@ -2,8 +2,8 @@ import axios from 'axios'
 
 const service = axios.create(
   {
-    // baseURL: 'http://localhost:8081',
+    baseURL: 'http://localhost:8081',
-    baseURL: 'http://49.233.4.79:8081',
+    // baseURL: 'http://49.233.4.79:8081',
     timeout: 5000
   }
 )

src/view/blog/index.vue

@@ -1,12 +1,52 @@
 <template>
-  <div class="dashboard">我会把 简书 博客园 github中的blog搬回来</div>
+  <div class="blog_list" v-for="item in data_list">
+    <span style="cursor: pointer;" @click="openBlog">{{ item.blog_title }}</span>
+    <span style="font-size: 12px;">{{ item.blog_prex }}</span>
+  </div>
+  <!-- <md-editor v-model="text" previewOnly /> -->
 </template>
 
 <script setup lang="ts">
+import MdEditor from 'md-editor-v3';
+import 'md-editor-v3/lib/style.css';
+import { reactive, ref } from 'vue';
+import { get_blogs } from '../../api/blog'
+
+type Blog = {
+  blog_id: number,
+  blog_type_id: number,
+  blog_type_name: string,
+  blog_title: string,
+  blog_prex: string
+}
+
+const data_list = reactive<Blog[]>([])
+
+const query = () => {
+  get_blogs(1).then(response => {
+    response.data.forEach((item: Blog) => {
+      data_list.push(item)
+    });
+  })
+}
+query()
+
+let text = ref<string>('')
+text.value = "开始吧肿瘤"
+
+
+const openBlog = () => {
+  window.open("11111")
+}
+
 </script>
 
 <style>
-.dashboard {
+.blog_list {
-  background-color: beige;
+  display: flex;
+  flex-direction: column;
+  border-bottom: 1px solid rgba(151, 151, 151, 0.3);
+  padding-top: 10px;
+  padding-bottom: 10px;
 }
 </style>

src/view/bookmark/index.vue

@@ -251,8 +251,4 @@ const copyNumber = (record: Bookmark) => {
 .create_dialog {
   margin: 10px;
 }
-.bookmark {
-  border-top: 1px solid rgba(151, 151, 151, 0.3);
-  padding-top: 20px;
-}
 </style>

src/view/cloud/index.vue

@@ -6,7 +6,4 @@
 </script>
 
 <style>
-.dashboard {
-  background-color: beige;
-}
 </style>