一切福田，不離方寸，從心而覓，感無不通。

Monthly Archives: December 2021

TypeScript+Vue实例完全教程

功能 轮播 搜索 列表 懒加载 简单动画 loading vue-router.ts vuex.ts vue-class-component使用 vuex-class使用 xxx.d.ts声明文件 基于类的编写方式 mock数据 tsconfig.json webpack配置 vue-typescript-cli 项目地址：https://github.com/SimonZhangITer/vue-typescript-dpapp-demo 完成后的简单例子 基于类的写法加上静态类型检查，简直不能再嗨

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { State } from "vuex-class";
 
@Component
export default class Shops extends Vue {
  @State shops: StoreState.shop[];
  @State searchVal: string;
 
  get shopList(): StoreState.shop[] {
    const shops = this.shops;
    const searchVal = this.searchVal;
    return shops.filter(
      (el: StoreState.shop) => el.shopName.indexOf(searchVal) > -1
    );
  }
}
</script>

  为什么使用TypeScript JavaScript的超集 支持所有原生JavaScript的语法 强类型语言 现在很多主流语言都是强类型的，而这点也一直是JavaScript所被人诟病的地方。使用TypeScript之后，将会在代码调试、重构等步骤节省很多时间。 比如说：函数在返回值的时候可能经过复杂的操作，那我们如果想要知道这个值的结构就需要去仔细阅读这段代码。那如果有了TypeScript之后，直接就可以看到函数的返回值结构，将会非常的方便 强大的IDE支持 现在的主流编辑器如VSCode、WebStorm、Atom、Sublime等都对TypeScript有着非常友好的支持，主要体现在智能提示上，非常的方便 可运行于任何浏览器、计算机、操作系统 强大的编译引擎 迭代更新快 不断更新，提供更加方便友好的Api 微软和Google爸爸 TypeScript是微软开发的语言，而Google的Angular使用的就是TypeScript，所以不用担心会停止维护，至少在近几年内TypeScript都会一门主流开发语言 npm下载量非常高 截止2017.12.17, TypeScript在全球范围内的npm日均下载量在30w左右，这个数字将近是vue下载量的10倍，可见TypeScript还是非常受欢迎的 TypeScript配置 本项目已经配置完毕，这里记录一下当时的踩坑过程 1. Webpack 首先需要安装ts-loader，这是TypeScript为Webpack提供的编译器，类似于babel-loader

1
npm i ts-loader -D

  接着在Webpack的module.rules里面添加对ts的支持(我这里的webpack版本是2.x)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
    test: /\.vue$/,
    loader: 'vue-loader',
    options: vueLoaderConfig
},
{
    test: /\.tsx?$/,
    exclude: /node_modules/,
    use: [
      "babel-loader",
      {
        loader: "ts-loader",
        options: { appendTsxSuffixTo: [/\.vue$/] }
      }
    ]
}

  2. tsconfig.json 创建tsconfig.json文件，放在根目录下，和package.json同级 配置内容主要也看个人需求，具体可以去typescript的官网查看，但是有一点需要注意： 在Vue中，你需要引入 strict: true (或者至少 noImplicitThis: true，这是 strict 模式的一部分) 以利用组件方法中 this 的类型检查，否则它会始终被看作 any 类型。 这里列出我的配置，功能在注释中给出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
{
  "include": [
    "src/*",
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ],
  "compilerOptions": {
    // types option has been previously configured
    "types": [
      // add node as an option
      "node"
    ],
    // typeRoots option has been previously configured
    "typeRoots": [
      // add path to @types
      "node_modules/@types"
    ],
    // 以严格模式解析
    "strict": true,
    // 在.tsx文件里支持JSX
    "jsx": "preserve",
    // 使用的JSX工厂函数
    "jsxFactory": "h",
    // 允许从没有设置默认导出的模块中默认导入
    "allowSyntheticDefaultImports": true,
    // 启用装饰器
    "experimentalDecorators": true,
    "strictFunctionTypes": false,
    // 允许编译javascript文件
    "allowJs": true,
    // 采用的模块系统
    "module": "esnext",
    // 编译输出目标 ES 版本
    "target": "es5",
    // 如何处理模块
    "moduleResolution": "node",
    // 在表达式和声明上有隐含的any类型时报错
    "noImplicitAny": true,
    "lib": [
      "dom",
      "es5",
      "es6",
      "es7",
      "es2015.promise"
    ],
    "sourceMap": true,
    "pretty": true
  }
}

  3. 修改main.js 把项目主文件main.js修改成main.ts，里面的写法基本不变，但是有一点需要注意： 引入Vue文件的时候需要加上.vue后缀,否则编辑器识别不到 把webpack的entry文件也修改成main.ts 4. vue-shims.d.ts TypeScript并不支持Vue文件，所以需要告诉TypeScript*.vue文件交给vue编辑器来处理。解决方案就是在创建一个vue-shims.d.ts文件，建议放在src目录下再创建一个typings文件夹，把这个声明文件放进去，如：src/typings/vue-shims.d.ts，文件内容： *.d.ts类型文件不需要手动引入，TypeScript会自动加载

1
2
3
4
declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

  到这里TypeScript在Vue中配置就完成了，可以愉快的撸代码了~ 第三方插件库 现在Vue官方已经明确提出支持TypeScript，并考虑出一个对应的vue-cli，在这之前，Vue开发团队已经开发出了一些插件库来支持TypeScript，这里简单和大家介绍一下。 Vue-Class-Component vue-class-component是官方维护的TypeScript装饰器，写法比较扁平化。Vue对其做到完美兼容，如果你在声明组件时更喜欢基于类的 API，这个库一定不要错过 ps：用了这个装饰器之后写方法不需要额外加逗号，贼嗨~~~

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import Vue from "vue";
import Component from "vue-class-component";
 
@Component
export default class App extends Vue {
  name:string = 'Simon Zhang'
 
  // computed
  get MyName():string {
    return `My name is ${this.name}`
  }
 
  // methods
  sayHello():void {
    alert(`Hello ${this.name}`)
  }
 
  mounted() {
    this.sayHello();
  }
}

[…]

龙生   03 Dec 2021
View Details

part-time job

upwork stackoverflow

龙生   03 Dec 2021
View Details

Linux目录创建、删除软链接

创建软链接

1
ln -s /www/jthycore/Upload /www/jthycore/wwwroot/

  删除软链接

1
rm -rf /www/jthycore/wwwroot/Upload

 

龙生   02 Dec 2021
View Details

.NET Core log4net 使用

log4net .NET Core 版使用，log4net 2.0.7版发布也有一段时间了，从2.0.6 版开始就已经支持.NET Core。 之前有介绍NLog .NET Core版的使用，ASP.NET Core 开发-Logging 使用NLog 写日志文件。 ASP.NET Core已经内置了日志支持,可以轻松输出到控制台。使用log4net 将日志写入到文件及输出控制台。   .NET Core项目使用 新建一个 .NET Core 项目，选择控制台应用程序。 添加引用： Install-Package log4net   使用简单配置，将日志输出至控制台，跟之前.NET 版本略微有些区别，需要指定Repository 。

1
2
3
4
5
6
7
8
9
10
11
12
13
        public static void Main(string[] args)
        {
            ILoggerRepository repository = LogManager.CreateRepository("NETCoreRepository");
            // 默认简单配置，输出至控制台
            BasicConfigurator.Configure(repository);
            ILog log = LogManager.GetLogger(repository.Name,"NETCorelog4net");
 
            log.Info("NETCorelog4net log");
            log.Info("test log");
            log.Error("error");
            log.Info("linezero");
            Console.ReadKey();
        }

运行程序显示如下：   下面增加配置，让其输出至文件。 在项目中添加一个配置文件，这里添加一个log4net.config ,内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<?xml version="1.0" encoding="utf-8" ?>
<configuration>
  <!-- This section contains the log4net configuration settings -->
  <log4net>
    <appender name="ConsoleAppender" type="log4net.Appender.ConsoleAppender">
      <layout type="log4net.Layout.PatternLayout" value="%date [%thread] %-5level %logger - %message%newline" />
    </appender>
    
    <appender name="FileAppender" type="log4net.Appender.FileAppender">
      <file value="log-file.log" />
      <appendToFile value="true" />
      <layout type="log4net.Layout.PatternLayout">
        <conversionPattern value="%date [%thread] %-5level %logger [%property{NDC}] - %message%newline" />
      </layout>
    </appender>
 
    <appender name="RollingLogFileAppender" type="log4net.Appender.RollingFileAppender">
      <file value="logfile/" />
      <appendToFile value="true" />
      <rollingStyle value="Composite" />
      <staticLogFileName value="false" />
      <datePattern value="yyyyMMdd'.log'" />
      <maxSizeRollBackups value="10" />
      <maximumFileSize value="1MB" />
      <layout type="log4net.Layout.PatternLayout">
        <conversionPattern value="%date [%thread] %-5level %logger [%property{NDC}] - %message%newline" />
      </layout>
    </appender>
 
    <!-- Setup the root category, add the appenders and set the default level -->
    <root>
      <level value="ALL" />
      <appender-ref ref="ConsoleAppender" />
      <appender-ref ref="FileAppender" />
      <appender-ref ref="RollingLogFileAppender" />
    </root>
 
  </log4net>
</configuration>

这里定义了三个 Appender，都会起作用，然后日志级别ALL 所有的日志都会记录。 更改Program.cs 代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
        public static void Main(string[] args)
        {
            ILoggerRepository repository = LogManager.CreateRepository("NETCoreRepository");
            <strong>XmlConfigurator.Configure(repository, new FileInfo("log4net.config"</strong><strong>));</strong>
            ILog log = LogManager.GetLogger(repository.Name,"NETCorelog4net");
 
            log.Info("NETCorelog4net log");
            log.Info("test log");
            log.Error("error");
            log.Info("linezero");
            Console.ReadKey();
        }

加了指定配置文件。运行程序会生成一个文件夹和一个文件，因为重新定义了ConsoleAppender，控制台输出也有所不同。   ASP.NET Core项目使用 在ASP.NET Core 使用也是一样，可以在Program.cs或Startup.cs 中指定Repository，然后控制器或中间件中获取对象使用。 以下代码是在Startup 构造函数中初始化log4net

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    public class Startup
    {
        public static ILoggerRepository repository { get; set; }
        public Startup(IHostingEnvironment env)
        {
            var builder = new ConfigurationBuilder()
                .SetBasePath(env.ContentRootPath)
                .AddJsonFile("appsettings.json", optional: true, reloadOnChange: true)
                .AddJsonFile($"appsettings.{env.EnvironmentName}.json", optional: true)
                .AddEnvironmentVariables();
            Configuration = builder.Build();
            repository = LogManager.CreateRepository("NETCoreRepository");
            XmlConfigurator.Configure(repository, new FileInfo("log4net.config"));
        }

然后在Configure 中加了一个记录日志

1
2
3
4
        public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
        {
            var log = LogManager.GetLogger(repository.Name,typeof(Startup));
            log.Info("test");

  在HomeController 也增加了：

1
2
3
4
5
6
7
        private ILog log = LogManager.GetLogger(Startup.repository.Name, typeof(HomeController));
        public IActionResult Index()
        {
            log.Info("index view");
            log.Error("Controller Error");
            return View();
        }

运行应用结果如下，然后对应的文件会有日志记录。   对于输出中文乱码，需要增加编码引用，以及代码。NLog 那篇文章有介绍。写到日志文件是没有问题的。   参考文档： http://logging.apache.org/log4net/release/manual/configuration.html http://logging.apache.org/log4net/release/config-examples.html   如果你觉得本文对你有帮助，请点击“推荐”，谢谢。 ASP.NET Core 3.1 新书发布 《ASP.NET Core项目开发实战入门》 京东当当淘宝 GitHub：https://github.com/linezero 博客示例代码GitHub：https://github.com/linezero/Blog from:https://www.cnblogs.com/linezero/p/log4net.html

龙生   02 Dec 2021
View Details

.netCore 反射 ：Could not load file or assembly 系统找不到指定文件

“System.IO.FileNotFoundException:“Could not load file or assembly 'ClassLibrary2, Culture=neutral, PublicKeyToken=null'. 系统找不到指定的文件。”” 在 .net 程序开发中我们会经常用到反射，最近在开始慢慢接触 .netCore。Core 反射的语法也是一样的，所以写下来也没有什么问题，但是一运行，就弹出了开头的 异常。 项目结构如下 ClassLibrary3 是一个接口

1
2
3
4
5
6
7
namespace ClassLibrary3
{
    public interface IClass1
    {
        void Print();
    }
}

  ClassLibrary2 是 ClassLibrary3 的实现

1
2
3
4
5
6
7
8
9
10
namespace ClassLibrary2
{
    public class Class1:IClass1
    {
        public void Print()
        {
            Console.WriteLine("Print.....");
        }
    }
}

  主程序通过反射获取到到类型并创建对象

1
2
3
4
5
6
7
8
9
10
11
12
13
class Program
    {
        static void Main(string[] args)
        {
            Console.WriteLine("Hello World!");
 
            Assembly assembly = Assembly.Load(new AssemblyName("ClassLibrary2"));
            Type type = assembly.GetType("ClassLibrary2.Class1");
            var instance = (IClass1)Activator.CreateInstance(type);
            instance.Print();
            Console.ReadLine();
        }
    }

  这代码都这里没有问题，但是执行的时候却抛出了 开篇的异常。仔细检查了下，ClassLibrary2 生成的 dll 确认已经是复制到了主程序目录下。 刚开始接触Core  也没有系统去熟悉，最后经过多方努力后，发现在主程序项目下有个 deps.json 的文件 文件内容是这样的（里面没有 ClassLibrary2 因为我们没有在项目中引用 ClassLibrary2） 然后想着 那异常提示找不到路径，那我们在这里配置下不久可以了？ 然后改成如下：   这时候我们运行程序： 完美！ from:https://www.cnblogs.com/mengtree/p/7139108.html

龙生   02 Dec 2021
View Details
1 2 3

Copyright © 2024 Longsheng All rights reserved.