Nlog配置和富文本编辑器

一. Nlog配置

如果要为项目配置出Nlog我们可以去官方网址教程 »博客/NLog维基 »吉图布 (github.com),跟随着官网的方法配置,

1. 首先我们要在自己的项目中下载Nlog程序包:在API项目下右键引用然后点击管理程序包,搜索Nlog,然后下载

2. 安装完以后,继续配置Nlog目标:在API项目下添加一个NLog.config文件,在文件中复制以下代码

<?xml version="1.0" encoding="utf-8" ?>
<nlog xmlns="http://www.nlog-project.org/schemas/NLog.xsd"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
​
    <targets>
        <target name="logfile" xsi:type="File" fileName="file.txt" />
        <target name="logconsole" xsi:type="Console" />
    </targets>
​
    <rules>
        <logger name="*" minlevel="Info" writeTo="logconsole" />
        <logger name="*" minlevel="Debug" writeTo="logfile" />
    </rules>
</nlog>

这是手动配置Nlog,还有用代码配置的方式,我就不研究了,详情见官网

3. 最后就是编写日志消息,官网里给出了一个使用方式的例子,首先复制以下代码,把Nlog实例化一下

private static readonly NLog.Logger Logger = NLog.LogManager.GetCurrentClassLogger();

然后就可以在方法里使用了

public int ZhuCe(UsersModel m)
        {
            try
            {
                db.UsersModel.Add(m);
                //成功后打印方法+用户名
                Logger.Info("ZhuCe:"+m.UsersName);
                return db.SaveChanges();
            }
            catch (Exception ex)
            {
                //失败后打印错误消息
                Logger.Error(ex.Message);
                throw;
            }
        }

二.富文本编辑器

今天我们介绍的是一款轻量级的富文本编辑器:wangEditor,这里是它的官网:wangEditor - 轻量级 web 富文本编辑器

1. 首先在终端里运行以下代码安装插件

npm i wangeditor --save

2. 然后在复制以下代码相关代码

<template>
    <div>
        <div id="demo1"></div>
        <button type="button" class="btn" @click="getEditorData">获取当前内容</button>
    <h3>内容预览</h3>
    <textarea name="" id="" cols="170" rows="20" readonly v-model="editorData"></textarea>
    </div>
</template>
​
<script>
// 引入 wangEditor
import wangEditor from 'wangeditor'
export default {
data() {
    return {
      editor: null,
      editorData: ''
    }
  },
  mounted() {
    const editor = new wangEditor(`#demo1`)
    // 配置 onchange 回调函数，将数据同步到 vue 中
    editor.config.onchange = (newHtml) => {
       this.editorData = newHtml
    }
    // 创建编辑器
    editor.create()
    this.editor = editor
  },
  methods: {
    getEditorData() {
      // 通过代码获取编辑器内容
      let data = this.editor.txt.html()
      alert(data)
    }
  }
}
</script>