V-charts+Nlog日志+富文本编辑器

一、V-charts前端显示

前端曲线基于v-chart。

在使用 echarts 生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。

二、Nlog日志

1、首先在NuGet包下载

2、配置

在项目根目录下新建一个NLog.config，基本目录结构：targets下面配置日志输出目标及相关参数，rules下面配置目标输出规则。

 

 

<?xml version="1.0" ?>
<nlog>
    <targets>
        <target></target>
        <target></target>
    </targets>
    <rules>
        <logger></logger>
        <logger></logger>
    </rules>
</nlog>

3、现在我们要将日志输出到文本文件，数据库，VS调试窗口，完整配置文件如下：

<?xml version="1.0" ?>

<!--<nlog xmlns="http://www.nlog-project.org/schemas/NLog.xsd"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      autoReload="true"
      internalLogLevel="Trace"
      internalLogFile="D:\work\log.txt">-->

<nlog xmlns="http://www.nlog-project.org/schemas/NLog.xsd"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      autoReload="true">
  
  <targets>
    
    <!-- Log in a separate thread, possibly queueing up to
        5000 messages. When the queue overflows, discard any
        extra messages-->

    <!-- write logs to file -->
    <target name="file" xsi:type="AsyncWrapper" queueLimit="5000" overflowAction="Discard">
      <target xsi:type="File" fileName="${basedir}/logs/${shortdate}.log" layout="${longdate} ${level:uppercase=true} ${event-context:item=Action} ${message} ${event-context:item=Amount} ${stacktrace}" />      
    </target>

    <!-- write log message to database -->
    <target name="db" xsi:type="AsyncWrapper" queueLimit="5000" overflowAction="Discard">
      <target type="Database" dbProvider="mssql" connectionString="Data Source=.\SQLEXPRESS;Initial Catalog=EFinance;Persist Security Info=True;User ID=sa;Password=123456;">

        <commandText>
          INSERT INTO Log(Timestamp,Level,Message,Action,Amount,StackTrace) VALUES(@time_stamp, @level, @message, @action, @amount, @stacktrace);
        </commandText>

        <!-- database connection parameters -->
        <parameter name="@time_stamp" layout="${date}" />
        <parameter name="@level" layout="${level:uppercase=true}" />
        <parameter name="@message" layout="${message}" />
        <parameter name="@action" layout="${event-context:item=Action}" />
        <parameter name="@amount" layout="${event-context:item=Amount}" />
        <parameter name="@stacktrace" layout="${stacktrace}" />
      </target>
    </target>

    <!--write log message to Visual Studio Output-->
    <target name="debugger" xsi:type="Debugger" layout="NLog: ${date:format=HH\:mm\:ss} | ${level:uppercase=true:padding=-5} | ${message}" />
  </targets>

  <rules>
    <!--TRACE,DEBUG,INFO,WARN,ERROR,FATAL-->
    <logger name="*" minlevel="Trace" writeTo="debugger" />
    <!--INFO,WARN,ERROR,FATAL-->
    <logger name="*" minlevel="Info" writeTo="db" />
    <!--DEBUG,INFO,WARN,ERROR,FATAL-->
    <logger name="*" minlevel="Debug" writeTo="file" />    
  </rules>
</nlog>

4、结果我们可以在txt文件中查看nlog记录的日志