乐趣区

关于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

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

更多文章