Vue3与.NET6实战之开发杂记3

使用Swiper实现轮播图

老规矩，先看效果：

关键代码如下：

                  <div style="margin-top: 70px">
                    <swiper :modules="modules">
                      <swiper-slide
                        ><ul>
                          <li>
                            <img
                              src="https://qpic.y.qq.com/music_cover/mgDVmicyKxZ16zUS0YqmTPktr1eoIeiaPbxfWfLiaHcVWTJOfn7S0ND8pzFyHicEC4cd/600?n=1"
                              style="width: 205px"
                            />
                            <p style="width: 224px">【(0.8x降速】当emo慢下来时</p>
                            <a>播放量：1789.7万</a>
                          </li>

                          <li>
                            <img
                              src="https://qpic.y.qq.com/music_cover/3sZgibm04hICGbleGFmh9STkeNmVibbbvOsPicnNTLAWChNzUIxyfFvQA/300?n=1"
                              style="width: 205px"
                            />
                            <p style="width: 224px">难忘经典：回放磁带里的青春岁月</p>
                            <a>播放量：1789.7万</a>
                          </li>

                          <li>
                            <img
                              src="https://qpic.y.qq.com/music_cover/qySHBaLckrOIYib7GXCWmDbG7K4GRBmyC88HLWlrTRMSK6CmFAIm43UZuTj4vBxhP/300?n=1"
                              style="width: 205px"
                            />
                            <p style="width: 224px">音综封神现场：顶级编唱震撼人心</p>
                            <a>播放量：1.2万</a>
                          </li>

                          <li>
                            <img
                              src="https://qpic.y.qq.com/music_cover/jiaJRGwJnWdhpt92PaG8l5bqEwiaL1o3ueVOfLzyOmz7trhIicib9wibEgA/300?n=1"
                              style="width: 205px"
                            />
                            <p style="width: 224px">耳机控收藏，享受另类孤独情绪</p>
                            <a>播放量：30.0万</a>
                          </li>
                          <li>
                            <img
                              src="https://qpic.y.qq.com/music_cover/hlGJXnBgr8xrqs7IPIpEkb090bdZM8hAb955FkgzmGLZdaMv6hLF0w/300?n=1"
                              style="width: 205px"
                            />
                            <p style="width: 224px">续相思·唱段风月往事</p>
                            <a>播放量：31.0万</a>
                          </li>
                        </ul></swiper-slide
                      >
                      <swiper-slide
                        ><ul>
                          <li>
                            <img
                              src="https://qpic.y.qq.com/music_cover/gaSSCRswoq7NlpHA8vK1PuRiaKlew1z7prD5vzyP1Ju3QYeiclfG0P4Q/300?n=1"
                              style="width: 205px"
                            />
                            <p style="width: 224px">那些年一属于周杰伦的R&B时代</p>
                            <a>播放量：1789.7万</a>
                          </li>

                          <li>
                            <img
                              src="https://qpic.y.qq.com/music_cover/ZS2nmh1hWV2OESzO7MBLDzA7xl3Tf4Tz26sXvTRlkFjvRpaETbicHZQ/300?n=1"
                              style="width: 205px"
                            />
                            <p style="width: 224px">明明很想念，却不敢再去打扰你</p>
                            <a>播放量：1789.7万</a>
                          </li>

                          <li>
                            <img
                              src="https://qpic.y.qq.com/music_cover/qySHBaLckrOIYib7GXCWmDbG7K4GRBmyCFoDqHm3R8zjnYLooxtEj63hvgB1vE8TT/300?n=1"
                              style="width: 205px"
                            />
                            <p style="width: 224px">车载DJ热歌：轻松一路Fun肆嗨！</p>
                            <a>播放量：1.2万</a>
                          </li>

                          <li>
                            <img
                              src="https://qpic.y.qq.com/music_cover/p5Qmf0LevmgOiaQdIJJAYy7DHMB7uj0beWibibmmLqEeia18MHVEd0w5zQ/300?n=1"
                              style="width: 205px"
                            />
                            <p style="width: 224px">海外爆火神曲·nternet Hits</p>
                            <a>播放量：30.0万</a>
                          </li>
                          <li>
                            <img
                              src="https://qpic.y.qq.com/music_cover/3sZgibm04hICGbleGFmh9SbW1XTBkGx4g6xz7GeGJYdJujuSjmDGwLQ/300?n=1g"
                              style="width: 210px"
                            />
                            <p style="width: 224px">『8090青春』唤醒记忆的时代乐章</p>
                            <a>播放量：30.0万</a>
                          </li>
                        </ul></swiper-slide
                      >
                    </swiper>
                  </div>

Identity实现基于角色授权

Program.cs中添加配置

            services.AddIdentityCore<User>(options =>
            {
               
            }).AddRoles<Role>();

这里的Role是实现IdentityRole接口的类，只要实现Identity接口即可
Role类

    public class Role : IdentityRole<long>
    {
    }

在Controller中添加注解[Authorize(Roles= "Admin")]，这里Role的内容由自己决定