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

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

news 2026/5/8 7:03:28

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

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

别再只用`uvicorn main:app`了！这5个实战配置技巧让你的FastAPI服务性能翻倍

别再只用uvicorn main:app了&#xff01;这5个实战配置技巧让你的FastAPI服务性能翻倍 当你的FastAPI应用从开发环境走向生产环境时&#xff0c;简单的uvicorn main:app命令已经无法满足性能和安全需求。本文将深入探讨5个关键配置技巧&#xff0c;帮助你在真实流量场景下实现服…...

编程新知 2026/5/8 5:26:03

可视化编程入门：5个步骤让你用MIT App Inventor零代码开发移动应用

可视化编程入门&#xff1a;5个步骤让你用MIT App Inventor零代码开发移动应用 【免费下载链接】appinventor-sources MIT App Inventor Public Open Source 项目地址: https://gitcode.com/gh_mirrors/ap/appinventor-sources 你是否曾想过开发自己的手机应用&#xff…...

编程新知 2026/5/8 5:09:39

如何使用Newton创建交互式仿真？用户输入与实时控制完整指南

如何使用Newton创建交互式仿真&#xff1f;用户输入与实时控制完整指南 【免费下载链接】newton An open-source, GPU-accelerated physics simulation engine built upon NVIDIA Warp, specifically targeting roboticists and simulation researchers. 项目地址: https://g…...

编程新知 2026/5/8 5:01:25

开源免费的WPS AI 软件 察元AI文档助手：链路 041：mergeTaskOrchestrationData 写入任务元数据

链路 041&#xff1a;mergeTaskOrchestrationData 写入任务元数据 总体链路图 下图在全系列各篇保持一致&#xff0c;仅通过高亮样式标示本篇所覆盖的环节&#xff1b;箭头表示主成功路径&#xff0c;点线为异常或可选路径。阅读任意一篇时都应能回到本图定位&#xff0c;避免…...

编程新知 2026/5/8 3:49:42

Davinci Resolve/达芬奇 21安装教程及下载

软件介绍&#xff1a; DaVinci Resolve Studio 是一款世界上第一个结合了专业离线和在线编辑&#xff0c;色彩校正&#xff0c;音频后期制作和Fusion视觉特效于一体的软件工具的解决方案!你可以获得无限的创作灵活性&#xff0c;因为 DaVinci Resolve 让个体艺术家更容易探索不…...

编程新知 2026/5/8 2:33:37

从Cursor实战工作坊看AI编程协作：思维转变与高效工作流

1. 项目概述&#xff1a;当AI代码助手遇上实战工作坊 如果你是一名开发者&#xff0c;最近肯定没少听人提起Cursor。这个集成了强大AI模型的代码编辑器&#xff0c;正在以一种前所未有的方式改变着我们的编程习惯。但说实话&#xff0c;大多数人的使用还停留在“智能补全”和“…...

编程新知 2026/5/8 2:24:35

跨部门协作：如何让“水火不容“的开发与运维团队“并肩作战“？

作者身份&#xff1a;10年运维总监&#xff0c;亲历DevOps转型全链路前言做了十年运维&#xff0c;我见过太多团队在"开发与运维"的边界问题上反复拉扯——开发说运维不懂业务需求&#xff0c;运维说开发不考虑生产环境稳定性&#xff1b;开发嫌运维响应慢&#xff0…...

编程新知 2026/5/8 2:15:28

NanoPi R6C评测：RK3588S迷你主机的性能与散热优化

1. NanoPi R6C硬件解析&#xff1a;一款重新定义紧凑型ARM主机的设计革新初次拿到NanoPi R6C时&#xff0c;其全金属外壳带来的质感远超我的预期。这款由FriendlyElec推出的迷你主机&#xff0c;搭载了Rockchip RK3588S SoC&#xff0c;尺寸仅比普通路由器稍大&#xff0c;却完…...

编程新知 2026/5/8 0:11:19

Cursor破解工具终极指南：3步轻松解除AI编程限制

Cursor破解工具终极指南&#xff1a;3步轻松解除AI编程限制 【免费下载链接】cursor-free-vip [Support 0.45]&#xff08;Multi Language 多语言&#xff09;自动注册 Cursor Ai &#xff0c;自动重置机器ID &#xff0c; 免费升级使用Pro 功能: Youve reached your trial req…...

编程新知 2026/5/8 0:01:01

初创团队如何利用Taotoken实现多模型API的成本可控与灵活选型

初创团队如何利用Taotoken实现多模型API的成本可控与灵活选型 1. 多模型统一接入的技术挑战 初创技术团队在开发过程中常面临模型选型难题。不同项目对语言模型的需求各异&#xff0c;有的需要长文本理解能力&#xff0c;有的侧重代码生成精度&#xff0c;还有的追求响应速度…...

编程新知 2026/5/7 23:45:50