springboot+mybatis-plus+vue+element+vant2实现短视频网站，模拟西瓜视频移动端

**项目介绍**

本项目基于Spring Boot、MyBatis-Plus、Vue.js、Element UI和Vant2.x技术栈，构建了一个短视频网站的移动端版本。该项目模拟了西瓜视频的基本功能，包括用户登录、视频列表展示、视频播放等。

**项目结构**

markdownspring-boot-mybatis-plus-vue-element-vant2├── pom.xml (Maven配置文件)
├── src│ ├── main│ │ ├── java│ │ │ └── com.example│ │ │ └── shortvideo│ │ │ ├── ShortVideoApplication.java│ │ │ ├── entity│ │ │ │ └── Video.java│ │ │ ├── mapper│ │ │ │ └── VideoMapper.java│ │ │ ├── service│ │ │ │ └── VideoService.java│ │ │ └── controller│ │ │ └── VideoController.java│ │ └── resources│ │ ├── application.properties│ │ └── static│ │ └── index.html├── src/main/resources/static/js│ ├── main.js (Vue.js入口文件)
│ ├── components│ │ ├── VideoList.vue│ │ ├── VideoPlayer.vue│ │ └── UserLogin.vue│ └── plugins│ └── vant.js (Vant2.x插件配置)
└── package.json (npm配置文件)

**Spring Boot配置**

在`application.properties`中，配置数据库连接信息和其他必要的参数。

propertiesspring.datasource.url=jdbc:mysql://localhost:3306/shortvideospring.datasource.username=rootspring.datasource.password=123456spring.jpa.hibernate.ddl-auto=updatemybatis-plus.mapper-locations=classpath:mapper/*Mapper.xml

**MyBatis-Plus配置**

在`pom.xml`中，添加MyBatis-Plus依赖。

xml<dependency>
 <groupId>com.baomidou</groupId>
 <artifactId>mybatis-plus-boot-starter</artifactId>
 <version>3.4.1</version>
</dependency>

**Vue.js配置**

在`main.js`中，配置Vue.js入口文件。

javascriptimport Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = falsenew Vue({
 render: h => h(App),
}).$mount('#app')

**Vant2.x配置**

在`plugins/vant.js`中，配置Vant2.x插件。

javascriptimport { Button, Cell } from 'vant'

Vue.use(Button)
Vue.use(Cell)

**组件实现**

### VideoList.vue

vue<template>
 <div>
 <van-list v-model="loading" :finished-text="finishedText" @load="onLoad">
 <van-cell-group>
 <van-cell v-for="(item, index) in list" :key="index" :title="item.title" />
 </van-cell-group>
 </van-list>
 </div>
</template>

<script>
export default {
 data() {
 return {
 loading: false,
 finished: false,
 list: []
 }
 },
 methods: {
 onLoad() {
 // 异步更新列表数据 setTimeout(() => {
 for (let i =0; i < 10; i++) {
 this.list.push({
 title: `视频标题 ${i}`
 })
 }

 // 加载状态结束 this.loading = false;

 // 数据全部加载完成 if (this.list.length >=20) {
 this.finished = true;
 }
 },1000);
 }
 },
 computed: {
 finishedText() {
 return '没有更多了';
 }
 }
}
</script>

### VideoPlayer.vue

vue<template>
 <div>
 <video src=" controls></video>
 </div>
</template>

<script>
export default {
 data() {
 return {}
 },
 methods: {}
}
</script>

### UserLogin.vue

vue<template>
 <div>
 <van-form @submit="onSubmit">
 <van-field v-model="username" name="username" placeholder="请输入用户名" />
 <van-field v-model="password" name="password" type="password" placeholder="请输入密码" />
 <div style="margin:16px;">
 <van-button round block type="info" native-type="submit">登录</van-button>
 </div>
 </van-form>
 </div>
</template>

<script>
export default {
 data() {
 return {
 username: '',
 password: ''
 }
 },
 methods: {
 onSubmit(values) {
 // 提交表单 console.log('提交表单:', values);
 }
 }
}
</script>

**服务端实现**

### VideoService.java

java@Servicepublic class VideoService {

 @Autowired private VideoMapper videoMapper;

 public List

### VideoController.java

java@RestController@RequestMapping("/api/video")
public class VideoController {

 @Autowired private VideoService videoService;

 @GetMapping public List

**总结**

本项目基于Spring Boot、MyBatis-Plus、Vue.js、Element UI和Vant2.x技术栈，构建了一个短视频网站的移动端版本。该项目模拟了西瓜视频的基本功能，包括用户登录、视频列表展示、视频播放等。