当前位置： 首页 > news >正文

vue-waterfall2 实现瀑布流，及总结的问题

news 2026/2/18 8:56:17

注意：引入需要在主界面引入，直接在组件中引用会有问题

1.安装 npm install vue-waterfall2@1.8.20 --save    （提示：一定要安装1.8.20，最新版会有一部分问题）

2.打开main.js文件

import waterfall from 'vue-waterfall2'

Vue.use(waterfall)

3.components新建 load.vue  （复制粘贴）

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

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

<style scoped>

.loader-layer {

  position: fixed;

  left: 0;

  top: 0;

  right: 0;

  bottom: 0;

  background: white;

  transition: all 0.6s;

  opacity: 0;

  -webkit-opacity: 0;

  -o-opacity: 0;

  -ms-opacity: 0;

  -moz-opacity: 0;

  visibility: hidden;

  filter: alpha(opacity=0);

}

.loader-layer.active {

  visibility: visible;

  opacity: 1;

  -webkit-opacity: 1;

  -o-opacity: 1;

  -ms-opacity: 1;

  -moz-opacity: 1;

  filter: alpha(opacity=100);

}

.spinner {

  width: 120px;

  height: 120px;

  text-align: center;

  line-height: 120px;

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  -webkit-transform: translate(-50%, -50%);

  -o-transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  -moz-transform: translate(-50%, -50%);

  white-space: nowrap;

  overflow: hidden;

}

.double-bounce1,

.double-bounce2 {

  width: 100%;

  height: 100%;

  border-radius: 50%;

  background-color: #1abc9c;

  opacity: 0.6;

  position: absolute;

  top: 0;

  left: 0;

  -webkit-animation: bounce 2s infinite ease-in-out;

  animation: bounce 2s infinite ease-in-out;

}

.double-bounce2 {

  -webkit-animation-delay: -1s;

  animation-delay: -1s;

}

@-webkit-keyframes bounce {

  0%,

  100% {

    -webkit-transform: scale(0);

  }

  50% {

    -webkit-transform: scale(1);

  }

}

@keyframes bounce {

  0%,

  100% {

    transform: scale(0);

    -webkit-transform: scale(0);

  }

  50% {

    transform: scale(1);

    -webkit-transform: scale(1);

  }

}

@keyframes loading {

  from {

    opacity: 0;

  }

  to {

    opacity: 1;

  }

}

</style>

<template>

  <div class="loader-layer"

       :class="show?'active':''">

    <div class="spinner">

      <div class="double-bounce1"></div>

      <div class="double-bounce2"></div>loading...

    </div>

  </div>

</template>

<script>

export default {

  props: ["show"]

};

</script>

　　

3.新建一个.vue的文件（复制粘贴）

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

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

446

447

448

449

450

451

452

453

454

455

456

457

458

459

460

461

462

463

464

465

466

467

468

469

470

471

<style  lang="scss" scoped>

.container-water-fall {

  // padding: 0 28px;

  box-sizing: border-box;

  &.water-content {

    margin: 0 15px;

  }

  h4 {

    padding-top: 56px;

    padding-bottom: 28px;

    font-family: PingFangSC-Medium;

    font-size: 36px;

    color: #000000;

    letter-spacing: 1px;

    text-align: justify;

  }

  button {

    background-color: #ff0;

    color: #24292e;

    border: 1px solid rgba(27, 31, 35, 0.2);

    border-radius: 0.25em;

    width: 100px;

    line-height: 26px;

    font-size: 13px;

    margin: 4px 0;

    margin-right: 4px;

    cursor: pointer;

    outline: none;

    &.blue-light {

      background: #27fbc2;

    }

  }

  button:hover {

    background-image: linear-gradient(-180deg, #fafbfc, #ccc 90%);

  }

  .cell-item {

    width: 100%;

    background: #ffffff;

    overflow: hidden;

    box-sizing: border-box;

    border-radius: 6px;

    margin-top: 10px;

    img {

      // border-radius: 12px 12px 0 0;

      width: 100%;

      height: auto;

      display: block;

    }

    .item-body {

      // border: 1px solid #F0F0F0;

      padding: 12px;

      .item-desc {

        font-size: 15px;

        color: #333333;

        line-height: 15px;

        font-weight: bold;

      }

      .item-footer {

        margin-top: 22px;

        position: relative;

        display: flex;

        align-items: center;

        .avatar {

          width: 44px;

          height: 44px;

          border-radius: 50%;

          background-repeat: no-repeat;

          background-size: contain;

        }

        .name {

          max-width: 150px;

          margin-left: 10px;

          font-size: 14px;

          color: #999999;

        }

        .like {

          position: absolute;

          right: 0;

          display: flex;

          align-items: center;

          &.active {

            i {

            }

            .like-total {

              color: #ff4479;

            }

          }

          i {

            width: 28px;

            display: block;

          }

          .like-total {

            margin-left: 10px;

            font-size: 12px;

            color: #999999;

          }

        }

      }

    }

  }

}

.githubdata {

  float: right;

  margin-right: 90px;

  img {

    width: 14px;

    // height: 16px;

  }

}

</style>

<template>

  <div class="container-water-fall water-content">

    <waterfall :col="col"

               :data="data"

               @loadmore="loadmore">

      <template>

        <div class="cell-item"

             v-for="(item,index) in data"

             :key="index">

          <img v-if="item.img"

               :src="item.img"

               alt="加载错误">

          <div class="item-body">

            <div class="item-desc">{{item.title}}</div>

            <div class="item-footer">

              <div v-if="item.avatar"

                   class="avatar"

                   :style="{backgroundImage : `url(${item.avatar})` }"></div>

              <div class="name">{{item.user}}</div>

              <div class="like"

                   :class="item.liked?'active':''">

                <i></i>

                <div class="like-total">{{item.like}}</div>

              </div>

            </div>

          </div>

        </div>

      </template>

    </waterfall>

    <loading :show="loading" />

  </div>

</template>

<script>

/*

  注意:

  1.itemWidth需要与gutterWidth一起使用才会生效，否则会进行自适应宽度

  2.使用了waterfall的组件不允许使用scoped,否则样式会有问题

*/

import loading from "@/components/load";

export default {

  props: {

    title: String

  },

  components: {

    loading

  },

  data() {

    return {

      data: [],

      col: 2,

      loading: false,

      gitHubData: {},

      originData: [

        {

          img:

            "https://image.watsons.com.cn//upload/8a316140.png?w=377&h=451&x-oss-process=image/resize,w_1080",

          avatar:

            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",

          title: "最近浴室新宠，日系神仙好物了解一下～",

          user: "www",

          like: "953"

        },

        {

          img:

            "https://image.watsons.com.cn//upload/083767f0.JPG?w=828&h=620&x-oss-process=image/resize,w_1080",

          avatar:

            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",

          title: "150元搞定全套护肤品，这些护肤好物必须交出来！",

          user: "迷人的小妖精迷人的小妖精",

          like: "952"

        },

        {

          img:

            "https://image.watsons.com.cn//upload/02a4f38d.jpg?w=1067&h=1067&x-oss-process=image/resize,w_1080",

          avatar:

            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",

          title: "最近浴室新宠，日系神仙好物了解一下～",

          user: "迷人的小妖精迷人的小妖精",

          like: "953"

        },

        {

          img:

            "https://image.watsons.com.cn//upload/589585c1.jpeg?x-oss-process=image/resize,w_1080",

          avatar:

            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",

          title: "150元搞定全套护肤品，这些护肤好物必须交出来！",

          user: "迷人的小妖精迷人的小妖精",

          like: "953"

        },

        {

          img:

            "https://image.watsons.com.cn//upload/d862d932.jpg?w=1080&h=1440&x-oss-process=image/resize,w_1080",

          avatar:

            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",

          title: "最近浴室新宠，日系神仙好物了解一下～",

          user: "迷人的小妖精迷人的小妖精",

          like: "953"

        },

        {

          img:

            "https://image.watsons.com.cn//upload/eb4fb58f.jpg?w=1080&h=1080&x-oss-process=image/resize,w_1080",

          avatar:

            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",

          title: "150元搞定全套护肤品，这些护肤好物必须交出来！",

          user: "迷人的小妖精迷人的小妖精",

          like: "953"

        },

        {

          img:

            "https://image.watsons.com.cn//upload/71d19462.jpg?x-oss-process=image/resize,w_1080",

          avatar:

            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",

          title:

            "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？",

          user: "迷人的小妖精迷人的小妖精",

          like: "953"

        },

        {

          img:

            "https://image.watsons.com.cn//upload/415f984f.jpeg?w=828&h=1104&x-oss-process=image/resize,w_1080",

          avatar:

            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",

          title: "千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试",

          user: "迷人的小妖精迷人的小妖精",

          like: "953"

        },

        {

          img:

            "https://image.watsons.com.cn//upload/5c3e51e4.jpg?w=720&h=960&x-oss-process=image/resize,w_1080",

          avatar:

            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",

          title: "夏天用这款姨妈巾，让你体验真正的清爽",

          user: "迷人的小妖精迷人的小妖精",

          like: "953"

        },

        {

          img:

            "https://image.watsons.com.cn//upload/92761043.JPG?w=1000&h=999&x-oss-process=image/resize,w_1080",

          avatar:

            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",

          title: "最近浴室新宠，日系神仙好物了解一下～",

          user: "迷人的小妖精迷人的小妖精123",

          like: "953"

        },

        {

          img:

            "https://image.watsons.com.cn//upload/da61c0f5.jpg?w=959&h=958&x-oss-process=image/resize,w_1080",

          avatar:

            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",

          title: "千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试",

          user: "迷人的小妖精迷人的小妖精",

          like: "953"

        },

        {

          img:

            "https://image.watsons.com.cn//upload/fcd68df4.jpg?w=1080&h=1080&x-oss-process=image/resize,w_1080",

          avatar:

            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",

          title: "最近浴室新宠，日系神仙好物了解一下～",

          user: "迷人的小妖精迷人的小妖精",

          like: "953"

        },

        {

          img:

            "https://image.watsons.com.cn//upload/bef41e67.JPG?w=712&h=534&x-oss-process=image/resize,w_1080",

          avatar:

            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",

          title: "夏天用这款姨妈巾，让你体验真正的清爽",

          user: "迷人的小妖精迷人的小妖精",

          like: "953"

        },

        {

          img:

            "https://image.watsons.com.cn//upload/25ab20fe.JPG?w=1000&h=1200&x-oss-process=image/resize,w_1080",

          avatar:

            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",

          title: "150元搞定全套护肤品，这些护肤好物必须交出来！",

          user: "迷人的小妖精迷人的小妖精123",

          like: "953"

        },

        {

          img:

            "https://ci.xiaohongshu.com/eb971d00-05ab-5b2a-ba03-52d8f544c42b?imageView2/2/w/400/q/50/format/jpg",

          avatar:

            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",

          title: "最近浴室新宠，日系神仙好物了解一下～",

          user: "迷人的小妖精迷人的小妖精",

          like: "953"

        },

        {

          img:

            "https://image.watsons.com.cn//upload/4a3c1788.jpg?w=823&h=1000&x-oss-process=image/resize,w_1080",

          avatar:

            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",

          title: "夏天用这款姨妈巾，让你体验真正的清爽",

          user: "迷人的小妖精迷人的小妖精",

          like: "953"

        },

        {

          img:

            "https://image.watsons.com.cn//upload/0a89e6b7.jpg?w=1080&h=1920&x-oss-process=image/resize,w_1080",

          avatar:

            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",

          title: "千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试",

          user: "迷人的小妖精迷人的小妖精",

          like: "953"

        },

        {

          img:

            "https://image.watsons.com.cn//upload/99253111.jpg?w=1080&h=1920&x-oss-process=image/resize,w_1080",

          avatar:

            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",

          title: "150元搞定全套护肤品，这些护肤好物必须交出来！",

          user: "迷人的小妖精迷人的小妖精123",

          like: "953"

        },

        {

          img:

            "https://image.watsons.com.cn//upload/13afe9a7.jpg?x-oss-process=image/resize,w_1080",

          avatar:

            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",

          title:

            "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试",

          user: "迷人的小妖精迷人的小妖精",

          like: "953"

        },

        {

          img:

            "https://image.watsons.com.cn//upload/98c7c4c3.jpg?w=1210&h=1210&x-oss-process=image/resize,w_1080",

          avatar:

            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",

          title: "150元搞定全套护肤品，这些护肤好物必须交出来！",

          user: "迷人的小妖精迷人的小妖精",

          like: "953"

        },

        {

          img:

            "https://image.watsons.com.cn//upload/54c5d7b4.jpg?w=828&h=991&x-oss-process=image/resize,w_1080",

          avatar:

            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",

          title: "150元搞定全套护肤品，这些护肤好物必须交出来！",

          user: "迷人的小妖精迷人的小妖精",

          like: "953"

        },

        {

          img:

            "https://image.watsons.com.cn//upload/71d19462.jpg?x-oss-process=image/resize,w_1080",

          avatar:

            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",

          title: "夏天用这款姨妈巾，让你体验真正的清爽",

          user: "迷人的小妖精迷人的小妖精123",

          like: "953"

        },

        {

          img:

            "https://image.watsons.com.cn//upload/642cb83c.jpeg?w=1080&h=1080&x-oss-process=image/resize,w_1080",

          avatar:

            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",

          title: "150元搞定全套护肤品，这些护肤好物必须交出来！",

          user: "迷人的小妖精迷人的小妖精",

          like: "953"

        },

        {

          img:

            "https://image.watsons.com.cn//upload/31e42833.jpg?w=750&h=750&x-oss-process=image/resize,w_1080",

          avatar:

            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",

          title: "150元搞定全套护肤品，这些护肤好物必须交出来！",

          user: "迷人的小妖精迷人的小妖精",

          like: "953"

        },

        {

          img:

            "https://image.watsons.com.cn//upload/92761043.JPG?w=1000&h=999&x-oss-process=image/resize,w_1080",

          avatar:

            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",

          title: "夏天用这款姨妈巾，让你体验真正的清爽",

          user: "迷人的小妖精迷人的小妖精",

          like: "953"

        },

        {

          img:

            "https://image.watsons.com.cn//upload/60cc9b8e.jpg?w=991&h=744&x-oss-process=image/resize,w_1080",

          avatar:

            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",

          title: "150元搞定全套护肤品，这些护肤好物必须交出来！",

          user: "迷人的小妖精迷人的小妖精123",

          like: "953"

        },

        {

          img:

            "https://image.watsons.com.cn//upload/b709ed72.jpg?w=552&h=414&x-oss-process=image/resize,w_1080",

          avatar:

            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",

          title: "最近浴室新宠，日系神仙好物了解一下～",

          user: "迷人的小妖精迷人的小妖精",

          like: "953"

        },

        {

          img:

            "https://image.watsons.com.cn//upload/137b50b0.jpg?x-oss-process=image/resize,w_1080",

          avatar:

            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",

          title: "夏天用这款姨妈巾，让你体验真正的清爽",

          user: "迷人的小妖精迷人的小妖精",

          like: "952"

        },

        {

          img:

            "https://image.watsons.com.cn//upload/31e42833.jpg?w=750&h=750&x-oss-process=image/resize,w_1080",

          avatar:

            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",

          title: "最近浴室新宠，日系神仙好物了解一下～",

          user: "迷人的小妖精迷人的小妖精",

          like: "953"

        }

      ]

    };

  },

  computed: {

    itemWidth() {

      return 133 * 0.5 * (document.documentElement.clientWidth / 375);

    },

    gutterWidth() {

      return 10 * 0.5 * (document.documentElement.clientWidth / 375);

    }

  },

  methods: {

    toGitHub() {

      window.open(

        "https://github.com/Rise-Devin/vue-waterfall2/blob/master/README.md",

        "_blank"

      );

    },

    reset() {

      this.data = [];

    },

    switchCol(col) {

      this.col = col;

    },

    loadmore() {

      console.log(9999)

      this.loading = true;

      setTimeout(() => {

        this.data = this.data.concat(this.originData, this.originData);

        this.loading = false;

      }, 1000);

    }

  },

  mounted() {

    console.log('cascadeShow')

    this.data = this.originData;

  }

};

</script>

总结问题：

1. 本人下载vue-waterfall2  @1.9.0版本，插件设定了高度，导致插件内容可以滚动，如果在插件上面加入banner或者其他内容，不会随着屏幕的滚动而滚动,

2. body ,head {

　　height: 100%;

}

body，head 高度100%，会导致页面滑动到最后的时候监听不到滚动底部的事件，一定要保证页面css样式不能冲突

相关文章：

vue-waterfall2 实现瀑布流，及总结的问题

注意&#xff1a;引入需要在主界面引入&#xff0c;直接在组件中引用会有问题 1.安装 npm install vue-waterfall21.8.20 --save &#xff08;提示&#xff1a;一定要安装1.8.20&#xff0c;最新版会有一部分问题&#xff09; 2.打开main.js文件 import waterfall from v…...

编程日记 2023/11/22 11:50:01

grafana二次启动失败

背景 安装grafana后启动使用正常&#xff0c;但是关机后再启动显示启动失败&#xff0c;但是看日志又没有报错信息&#xff0c;但是就是启动不了 原因分析 其实是/var/lib/grafana/grafana.db文件损坏了&#xff0c;所以需要把这个文件删掉之后重新启动就正常了&#xff0c;…...

编程日记 2023/11/22 11:47:58

C/C++杂谈-printf的可变参数机制

C/C杂谈-printf的可变参数机制 文章目录 C/C杂谈-printf的可变参数机制printf的使用printf的源码源码剖析 多参数实现机制原理 C11引入了可变参数模板机制&#xff0c;对模板参数进行了高度泛化&#xff0c;但是对于可变参数其实C语言学习中早已遇到过&#xff0c;那就是printf…...

编程日记 2023/11/22 11:46:57

es基本语法 (kibana)

#添加 (不添加id默认会生成id) POST /cj/test {"name":"jack","sex":"1","age":12 } #添加 (id为第5个的) POST /cj/test/5 {"name":"jackson","sex":"1","age":12 } #条…...

编程日记 2023/11/22 11:45:55

Tesco EDI需求分析

Tesco&#xff0c;成立于1919年&#xff0c;是一家全球领先的综合性零售企业&#xff0c;总部位于英国。公司致力于提供高质量、多样化的商品和服务&#xff0c;以满足客户的需求。Tesco的使命是通过创新和卓越的客户服务&#xff0c;为客户创造更美好的生活。多年来&#xff0…...

编程日记 2023/11/22 11:44:54

html常用的标签

基本结构标签 <!DOCTYPE>&#xff1a; 定义 HTML 文档类型。<html>&#xff1a; HTML 文档的根元素。<head>&#xff1a; 文档的头部&#xff0c;包含了元数据和引用的外部资源。<title>&#xff1a; 定义网页标题&#xff0c;显示在浏览器标签上。&l…...

编程日记 2023/11/22 11:41:51

4.14每日一题（二元函数求极值：常规方法、先代后求法）

...

编程日记 2023/11/22 11:39:47

护眼灯什么价位的好？适合学生入手的护眼台灯推荐

据60年前的统计&#xff0c;中国人口的近视率约为10%至20%。 国家卫健委发布的中国首份眼健康白皮书显示&#xff0c;我国小学生近视率为47.2%&#xff0c;初中生近视率为75.8%&#xff0c;大学生近视率超过90%。如今&#xff0c;“低头族”随处可见&#xff0c;近视人群日益增…...

编程日记 2023/11/22 11:38:47

大数据架构

大数据架构 https://huaweicloud.csdn.net/633578fed3efff3090b58398.html https://blog.csdn.net/yuanziok/article/details/117030031 https://blog.csdn.net/qq_46675545/article/details/121985987 https://blog.csdn.net/qq_33367934/article/details/127685417 https://b…...

编程日记 2023/11/22 11:36:45

【Linux】C文件系统详解（四）——磁盘的物理和抽象结构

文章目录 磁盘结构磁盘物理结构磁盘的具体物理结构磁盘结构的逻辑抽象 文件系统BootBlockSuperBlockGroupDescriptorTableinode tableDataBlocksinodeBitmapblockBitmaplinux中的inode 和文件名如何理解文件的增删查改删 补充细节1.如果文件误删了,我们该怎么办?2.inode确定分…...

编程日记 2023/11/22 11:35:43

论文-分布式-拜占庭将军问题

目录 0-前言 1-导引 2-不可能性 3将军(1叛徒)问题不存在解/不能达成共识 少于3m1个将军(有m个叛徒)不存在解/不能达成共识 精确一致性与近似一致性是同等困难的 3-使用口头消息的解 “口头消息”的含义 OM(m)算法的步骤 OM(m)算法的正确性推导 4-使用签名消息情况下…...

编程日记 2023/11/22 11:34:42

万字解析设计模式之 适配器模式

一、 适配器模式 1.1概述 将一个接口转换成客户希望的另一个接口&#xff0c;适配器模式使接口不兼容的那些类可以一起工作。 适配器模式分为类适配器模式和对象适配器模式&#xff0c;前者类之间的耦合度比后者高&#xff0c;且要求程序员了解现有组件库中的相关组件的内部结…...

编程日记 2023/11/22 11:33:40

Linux 安全 - 扩展属性xattr

文章目录 前言一、简介二、扩展属性命名空间2.1 简介2.2 security扩展属性2.3 System扩展属性2.4 Trusted扩展属性2.5 User扩展属性 三、用户空间使用3.1 setfattr/getfattr3.2 setxattr/getxattr/listxattr 参考资料 前言 一、简介 xattr - Extended attributes扩展属性是与…...

编程日记 2023/11/22 11:31:36

spring boot加mybatis puls实现，在新增/修改时，对某些字段进行处理，使用的@TableField（）或者AOP @Before

1.先说场景&#xff0c;在对mysql数据库表数据插入或者更新时都得记录时间和用户id 传统实现有点繁琐&#xff0c;这里还可以封装一下公共方法。 2.解决方法&#xff1a; 2.1&#xff1a;使用aop切面编程&#xff08;记录一下&#xff0c;有时间再攻克&#xff09;。 2.1.1&am…...

编程日记 2023/11/22 11:30:34

我的创作纪念日2048天

机缘 在这特殊的日子里&#xff0c;我要庆祝我的 CSDN 创作纪念日——已经坚持了整整2048天&#xff01; 在这2048天里&#xff0c;我经历了很多成长和收获。作为一名技术写手&#xff0c;我投入了大量的时间和精力来分享我的知识和经验。我曾经写过关于数据库、数据同步、数…...

编程日记 2023/11/22 11:29:33

MatrixOne实战系列回顾 | 导入导出项目场景实践

本次分享主要介绍MatrixOne导入导出以及项目场景实践。将从四个方向为大家演示MatrixOne的功能&#xff0c;分别是数据的导入、导出、对接数据集成工具&#xff0c;以及Java连接实战。 数据导入会使用三种方式将数据导入至 MatrixOne中。分别是insert语句、load data语句还有s…...

编程日记 2023/11/22 11:28:32

Find My音箱|苹果Find My技术与音箱结合，智能防丢，全球定位

音箱市场规模正在不断扩大。随着人们生活品质的提高&#xff0c;对音乐体验的需求也在不断升级。消费者对于蓝牙音箱的需求&#xff0c;已经从单纯的音质扩展到了功能、设计和价格等多个方面。随着移动化、即时化的视听娱乐需求的增长&#xff0c;蓝牙音箱性能、质量、外观设计…...

编程日记 2023/11/22 11:27:31

51单片机应用

目录 ​编辑 1. C51的数据类型 1.1 C51中的基本数据类型 1.2 特殊功能寄存器类型 2. C51的变量 2.1 存储种类 1. C51的数据类型 C51是一种基于8051架构的单片机&#xff0c;它支持以下基本数据类型&#xff1a; 位&#xff08;Bit&#xff09;&#xff1a;可以表…...

编程日记 2023/11/22 11:26:29

系列三、ThreadLocal vs synchronized

一、ThreadLocal vs synchronized 虽然ThreadLocal与synchronized关键字都能用于处理多线程并发访问变量的问题&#xff0c;但是两者处理问题的角度和思路是不一样的。区别如下&#xff1a; 小总结&#xff1a;虽然上一篇中的案例都实现了线程隔离&#xff0c;但是使用ThreadLo…...

编程日记 2023/11/22 11:25:27

封装Redis工具类

基于StringRedisTemplate封装一个缓存工具类&#xff0c;满足下列需求&#xff1a; 方法1&#xff1a;将任意Java对象序列化为json并存储在string类型的key中&#xff0c;并且可以设置TTL过期时间 方法2&#xff1a;将任意Java对象序列化为json并存储在string类型的key中&…...

编程日记 2023/11/22 11:22:23

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

编程新知 2026/2/17 7:29:12

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

编程新知 2026/2/17 11:23:16

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

编程新知 2026/2/17 11:23:14

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

编程新知 2026/2/17 11:23:14

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

编程新知 2026/2/17 13:42:48

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

编程新知 2025/12/3 20:14:32

练习（含atoi的模拟实现,自定义类型等练习）

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

编程新知 2026/1/30 15:16:30

Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

编程新知 2026/1/23 4:56:05

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

编程新知 2025/9/30 16:39:11

Mac软件卸载指南，简单易懂！

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

编程新知 2026/2/16 18:41:07