乐趣区

关于typescript:记录最近遇到的问题

jiezi

问题一，呈现以下报错

依照常理来说个别呈现 no provide for NgForm报错都是因为没有引入 ReactiveFormsModule，然而通过查看也曾经引入了相应的模块。
上面是呈现报错的代码，去除后没有问题。

 <form thyForm [formGroup]="loginForm" (ngSubmit)="login()" class="mt-3">
              <thy-form-group thyLabelText="Username">
                <input thyInput name="username" [formControlName]="key.username" placeholder="username">
              </thy-form-group>
              <thy-form-group thyLabelText="Password" thyTipsMode="label">
                <input  thyInput type="password" name="password" [formControlName]="key.password"
                       placeholder="password">
              </thy-form-group>
              <ng-template [ngIf]="errorInfo">
                <hr>
                <small class="text-danger">{{errorInfo}}</small>
              </ng-template>
              <thy-form-group-footer>
                <button class="mr-2" [thyButton]="'primary'" [thyLoading]="saving" thyLoadingText="Login">
                  Sign in
                </button>
                <a>Forgot password?</a>
              </thy-form-group-footer>
            </form>

在引入 [formGroup]="loginForm" 之前即只是原型的时候并没有产生报错，为了确认是否是引入 formGroup 时配置上呈现问题，只保留 fourgroup 局部代码，将之前原型局部去除后在此尝试发现没有问题，即改为如下代码：

<form  [formGroup]="loginForm" (ngSubmit)="login()" class="mt-3">
     <input thyInput name="username" [formControlName]="key.username" placeholder="username">
     <input  thyInput type="password" name="password" [formControlName]="key.password"
      placeholder="password">
     <ng-template [ngIf]="errorInfo">
         <hr>
     <small class="text-danger">{{errorInfo}}</small>
     </ng-template>
     <button class="mr-2" [thyButton]="'primary'" [thyLoading]="saving" thyLoadingText="Login" >
                  Sign in
     </button>
     <a>Forgot password?</a>
</form>

进一步进行测试后可得出结论 thyForm 不能与 formGroup 同时应用，即它们之间存在抵触，再次查看 thyForm 官网文档可发现 thyForm 是通过 ngModel 进行绑定的
官网文档示例：

<form thyForm name="demoForm" #demoForm="thyForm">
  <thy-form-group thyLabelText="Username" thyLabelRequired thyTips="This is tips for username">
    <input thyInput name="username" [(ngModel)]="model.name" required placeholder="Please type username" />
  </thy-form-group>
  <thy-form-group thyLabelText="Password" thyLabelRequired thyTips="This is tips for password" thyTipsMode="label">
    <input thyInput type="password" name="password" [(ngModel)]="model.password" required placeholder="Please type password" />
  </thy-form-group>
  <thy-form-group-footer>
    <button [thyButton]="'primary'" [thyLoading]="saving" thyLoadingText="Login" (thyFormSubmit)="login()">
      Login
    </button>
    <button [thyButton]="'link-secondary'" (click)="cancel()">Cancel</button>
  </thy-form-group-footer>
</form>

所以在引入新的写法时首先要做的就是测试和以往惯例写法间是否存在抵触

springbootSecurity

Spring Security 是 spring 自带的一个平安治理框架，次要有两个指标——认证和受权。
所需依赖:

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-security</artifactId>
        </dependency>

此时当咱们启动后盾时在运行记录里便可失去登陆默认明码(默认用户名为:user)：

对于这些咱们也能够在 application.properties 进行自行设定：

spring.security.user.name= liming
spring.security.user.password= liming

此时咱们有两种形式进行登陆，一是间接在 8080 端口进行登陆，二是在前台调用 user/login 办法，并在后盾与其对接。
如果要数据库形式校验用户名明码，能够通过自定义 UserDetailsService：
其中 UserDetailsService 是 springBoot 官网给出的接口

public interface UserDetailsService {UserDetails loadUserByUsername(String username) throws UsernameNotFoundException;
}

并且在本人的 service 中实现即可

  @Override
  public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {System.out.println("loadUserByUsername");
    User user = this.userRepository.findByUsername(username)
            .orElseThrow(() -> new EntityNotFoundException("用户实体不存在"));
    // 设置用户角色
    List<SimpleGrantedAuthority> authorities = new ArrayList<>();

    return new org.springframework.security.core.userdetails.User(username, "", authorities);
  }

其中的 authorities 便是官网给出的便于设定用户权限的参数。
比方咱们能够像上面这样设置其权限（设置其权限为 test）：

  @Override
  public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {System.out.println("loadUserByUsername");
    User user = this.userRepository.findByUsername(username)
            .orElseThrow(() -> new EntityNotFoundException("用户实体不存在"));
    // 设置用户角色
    List<SimpleGrantedAuthority> authorities = new ArrayList<>();
    SimpleGrantedAuthority simpleGrantedAuthority = new SimpleGrantedAuthority("test");
    authorities.add(simpleGrantedAuthority);

    return new org.springframework.security.core.userdetails.User(username, "", authorities);
  }

而后再在 MvcSecurityConfig 中进行以下配置即可(示意拜访 user 下的 url 须要具备 test 权限）：

  @Override
  protected void configure(HttpSecurity http) throws Exception {
    http
            .authorizeRequests()
            // 凋谢端口
            .antMatchers("/user/**").access("hasRole('test')")
            .anyRequest().authenticated()
            .   .   . 
}

如果咱们给予的权限是 test，把下面配置的权限改为 test1 的话再去拜访 user 下的页面就会像上面这样：

而后因为咱们目前想要实现的是匹配好用户名即可登陆，无需验证明码，所以要通过 BCryptPasswordEncoder 进行自定义明码验证。

public class MyBCryptPasswordEncoder extends BCryptPasswordEncoder {private final Logger logger = LoggerFactory.getLogger(this.getClass());

  @Override
  public boolean matches(CharSequence rawPassword, String encodedPassword) {if (rawPassword == null) {throw new IllegalArgumentException("rawPassword cannot be null");
    }
    logger.info("数据库中存在该角色信息，匹配胜利");
    return true;
  }
}

其中 matches 就是官网进行明码验证的函数，咱们对其重写即可。
而后咱们再对 C 层进行欠缺，让其返回验证得出的 user 即可。

  @GetMapping("/login")
  @JsonView(GetUsersJsonView.class)
  public User login(Principal user) throws JsonProcessingException {return this.userRepository.findByUsername(user.getName())
            .orElseThrow(() ->
                    new EntityNotFoundException("未在数据库中找到用户，这可能是以后用户被删除导致的"));
  }

其次要阐明的就是执行程序的问题，起初看到 C 层函数时就在想，前台不是传给的后盾用户名
和明码吗，为什么后盾能够用 Principal 类型承受并且不会报错。

public interface Principal {boolean equals(Object var1);

  String toString();

  int hashCode();

  String getName();

  default boolean implies(Subject var1) {return var1 == null ? false : var1.getPrincipals().contains(this);
  }
}

可见 Principal 中并没有用户名或时明码这些我的项目，于是又通过打点才发现执行程序是什么，即 controller 中的内容并不是匹配好路由就间接执行。

问题三：装置 markdowm 插件使 angular 反对 markdown 数据的显示
markdown 是一种宽泛使用的数据格式，gitlab、钉钉都适配于 markdown。

第一步：ngx-markdown
npm install ngx-markdown --save

第二步：在 angular.json 中引入对应的 css 文件和 js 文件

    "styles": [
              "src/styles.css",
              "node_modules/prismjs/themes/prism-okaidia.css",
              "node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css",
              "node_modules/prismjs/plugins/line-highlight/prism-line-highlight.css",
              "node_modules/katex/dist/katex.min.css"
            ],
            "scripts": [
              "node_modules/marked/lib/marked.js",
              "node_modules/prismjs/prism.js",
              "node_modules/prismjs/components/prism-csharp.min.js",
              "node_modules/prismjs/components/prism-css.min.js",
              "node_modules/prismjs/plugins/line-numbers/prism-line-numbers.js",
              "node_modules/prismjs/plugins/line-highlight/prism-line-highlight.js",
              "node_modules/prismjs/components/prism-typescript.min.js",
              "node_modules/emoji-toolkit/lib/js/joypixels.min.js",
              "node_modules/katex/dist/katex.min.js"
            ]

并且别离在 app.module 和你所应用的组件的 moudle 如 test.module 中做如下援用:
app.module:

MarkdownModule.forRoot()

test.module:

MarkdownModule.forRoot()

应用办法：
如下应用即可

<markdown>
   .   .   .
</markdown>

成果：（上图不增加 markdown，下图为应用 markdown 解析后的成果）

对于图片的引入：
markdown 也有能够引入到 angular 中的编辑器，即Editor.md，能够实现如下的成果：

官网地址 https://pandao.github.io/edit…

然而依据所查资料，此编辑器须要将其下载到 asset 文件夹进行援用，尽管能够像上面这样通过 npm 进行装置，然而也须要手动将其复制到 assets 文件夹下，这样就导致了 web 文件夹体积由原来的 1.5M 减少到 8M 左右，不合乎所需要求，尽管我也尝试着不必 assets 文件夹间接从 node-modules 中进行援用但始终没能胜利，再加上网上的材料全是要下载到 assets 中再进行应用于是就放弃了这种办法。

npm install editor.md
退出移动版