前端基础场第不知道第几天｜ 青训营笔记

胡桃叫我渣公子
120 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的第五天。

今天继续搞仿掘金的网页，这两天被别的事情绊住了，所以基本上是左右开弓，搞搞那边再搞一下这边，不过我还是没有放弃的。

承接上回，上一篇我们做了一个详情页，很丑，没错，不好看，所以这次我们就不自己为难自己了。所谓前人栽树后人乘凉，我们这次引入一个组件来完成MarkDown的文本样式。

引入

这段是官网上爬下来的

安装支持 vue3 的版本

# 使用 npm
npm i @kangc/v-md-editor@next -S
​
# 使用 yarn
yarn add @kangc/v-md-editor@next

在 vue3 中注册

import { createApp } from 'vue';
import VueMarkdownEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';
​
import Prism from 'prismjs';
​
VueMarkdownEditor.use(vuepressTheme, {
  Prism,
});
​
const app = createApp(/*...*/);
​
app.use(VueMarkdownEditor);

#使用

<template>
  <v-md-editor v-model="text" height="400px"></v-md-editor>
</template>
​
<script>
export default {
  data() {
    return {
      text: '',
    };
  },
};
</script>

完全按照官网的步骤来一遍就好了，还是很简单的，结果如下：

image.png

铛铛，非常简单的就实现了一种非常好看的样式，当然我们现在还不能万事大吉，还要做一些微小的改动。

文章发布

首先是需要创建一个发布文章的页面，然后在这个页面实现数据的双向绑定，并将最后的数据存入到数据库中，然后在我们的首页页面显示出来，并且用相应的MarkDown插件解析出从后端传回来的数据，并不是很复杂的过程，也是数据库的增删改查。最麻烦的样式以及文字的高亮等部分已经有前辈帮我们解决了。具体代码如下：

前端代码：

<template>
  <div class="mark_title_box">
    <input class="mark_input" placeholder="输入文章标题..." v-model="title" />
    <button class="mark_button" @click="run">提交</button>
  </div>

  <div class="mark_box">
    <v-md-editor v-model="article.text" height="700px"></v-md-editor>
  </div>
</template>
<style>
/*       mode="preview"
 */
.mark_button {
  z-index: 10;
  float: right;
  border: 0;
  width: 100px;
  height: 40px;
  background-color: rgb(37, 131, 194);
  text-align: center;
  top: 50%;
  right: 0;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.mark_input {
  float: left;
  border: 0;
  width: 80%;
  height: 68px;
  line-height: 68px;
  font-size: 30px;
  color: rgb(87, 88, 89);
  outline: none; /*去除输入框输入时的边框  */
  /*  */
}

.mark_title_box {
  position: fixed;
  top: 0;
  left: 50%;
  width: 1420px;
  height: 68px;
  transform: translate(-50%, 0);
  background-color: rgb(251, 251, 251);
}
.mark_box {
  margin-top: 70px;
  position: fixed;
  width: 1420px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
<script lang="ts">
import { reactive, ref } from "vue";

export default {
  setup() {
    const title = ref("sss");
    const article = reactive({
      text: "",
    });
    function run() {
      const url = "api/user/infois";
      fetch(url, {
        method: "POST",
        mode: "cors",
        cache: "no-cache",
        credentials: "same-origin",
        headers: new Headers({
          "Content-Type": "application/json",
        }),
        body: JSON.stringify({
          title: title.value,
          content: article.text,
        }),
      });
    }
    return {
      article,
      title,
      run,
    };
  },
};
</script>

后端代码：

func InfoIS(w http.ResponseWriter, r *http.Request) {
   buf, err := ioutil.ReadAll(r.Body) //读取Body文件的内容
   if err != nil {
      fmt.Println("body错误")
      return
   }
   if buf == nil {
      fmt.Println("body下面错误")
      return
   }
   jsonMap := make(map[string]interface{}) //设置map，分配内存
   err = json.Unmarshal(buf, &jsonMap)     //解析buf中的数据，并将结果写入jsonMap中
   if err != nil {
      fmt.Println("解析错误")
      return
   }
   title := jsonMap["title"]
   content := jsonMap["content"]
   Content := content.(string)
   s := fmt.Sprintf(`insert into content(cid,title,about,content) values('%d','%s','%s','%s') `, 32, title, "asdasd", Content)
   rc := conn.QueryRow(context.Background(), s)
   err = rc.Scan()
   if err != nil {
      fmt.Println(err)
   }
}

上面的代码只展示了对应的发布页面以及后端对应的方法，但是我前面讲过，我们后端需要有一个分发的函数，这个比较简单我就没有写了。写完发布的页面就应该到展示的页面了，我比较偷懒，将编辑器设置为只读便结束了。各位可以自己对着文档摸索一下相应的使用方法。 那么今天就先到这吧。

avatar
文章
阅读
粉丝