<template>
  <view class="container">
    <canvas canvas-id="canvas" style="width: 100%; height: 100%"></canvas>
  </view>
</template>
 
<script>
  import * as THREE from 'three';
  import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 
  export default {
    data() {
      return {
        camera: null,
        scene: null,
        renderer: null,
        model: null
      }
    },
    onReady() {
      this.initThree();
      this.addLights();
      this.addCamera();
      this.loadModel();
      this.animate();
    },
    methods: {
      initThree() {
        this.scene = new THREE.Scene();
        this.renderer = new THREE.WebGLRenderer({ antialias: true });
        this.renderer.setSize(uni.upx2px(750), uni.upx2px(750));
        uni.createSelectorQuery()
          .select('#canvas')
          .node()
          .then(res => {
            res.appendChild(this.renderer.domElement);
          });
      },
      addLights() {
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
        this.scene.add(ambientLight);
        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
        directionalLight.position.set(1, 1, 1);
        this.scene.add(directionalLight);
      },
      addCamera() {
        this.camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
        this.camera.position.set(0, 10, 20);
        this.camera.lookAt(0, 0, 0);
      },
      loadModel() {
        const loader = new GLTFLoader();
        loader.load('path/to/your/model.glb', (gltf) => {
          this.model = gltf.scene;
          this.scene.add(this.model);
        }, undefined, (error) => {
          console.error(error);
        });
      },
      animate() {
        requestAnimationFrame(this.animate);
        this.model.rotation.y += 0.01;
        this.renderer.render(this.scene, this.camera);
      }
    }
  }
</script>
 
<style>
  .container {
    width: 750rpx;
    height: 750rpx;
    background-color: #000;
  }
</style>

这段代码展示了如何在UniApp中初始化Three.js，添加灯光、相机和3D模型，并使用GLTFLoader加载一个3D模型。在onReady生命周期钩子中，它设置了Three.js的场景、渲染器，并将渲染器挂载到Canvas上。然后，它添加了环境光和平行光，并设置了相机的位

// 导入uni.request，并在其基础上进行封装
import { request } from '@/utils/request';
 
// 定义API接口
export const api = {
  // 获取用户信息
  getUserInfo: () => request('/user/getUserInfo'),
  // 登录
  login: (data) => request('/user/login', 'POST', data),
  // 获取商品列表
  getGoodsList: (params) => request('/goods/list', 'GET', null, params),
};
 
// 使用封装后的API
// 获取用户信息
api.getUserInfo().then(response => {
  console.log('用户信息:', response.data);
}).catch(error => {
  console.error('获取用户信息失败:', error);
});
 
// 登录操作
api.login({ username: 'user1', password: '123456' }).then(response => {
  console.log('登录成功:', response.data);
}).catch(error => {
  console.error('登录失败:', error);
});
 
// 获取商品列表
api.getGoodsList({ page: 1, pageSize: 10 }).then(response => {
  console.log('商品列表:', response.data);
}).catch(error => {
  console.error('获取商品列表失败:', error);
});

这段代码展示了如何封装和使用网络请求，其中request函数封装了对uni.request的调用，并提供了统一的API接口来发送请求。这样的封装可以简化代码，提高复用性，并且确保整个项目的网络请求行为一致。

由于篇幅限制，我无法提供完整的文章源代码。但我可以提供一个简化的Spring Boot后端服务的代码示例，展示如何创建一个简单的学生创新创业项目管理系统的后端API。

import org.springframework.web.bind.annotation.*;
 
@RestController
@RequestMapping("/api/projects")
public class ProjectController {
 
    // 假设有一个服务层处理业务逻辑
    // @Autowired
    // private ProjectService projectService;
 
    // 创建项目
    @PostMapping
    public String createProject(@RequestBody String projectDetails) {
        // 调用服务层方法处理项目创建逻辑
        // projectService.createProject(projectDetails);
        return "Project created successfully";
    }
 
    // 获取所有项目
    @GetMapping
    public String getAllProjects() {
        // 调用服务层方法获取所有项目
        // List<Project> projects = projectService.getAllProjects();
        return "List of all projects";
    }
 
    // 获取单个项目
    @GetMapping("/{id}")
    public String getProjectById(@PathVariable("id") String id) {
        // 调用服务层方法根据ID获取项目
        // Project project = projectService.getProjectById(id);
        return "Project with id: " + id;
    }
 
    // 更新项目
    @PutMapping("/{id}")
    public String updateProject(@PathVariable("id") String id, @RequestBody String projectDetails) {
        // 调用服务层方法处理项目更新逻辑
        // projectService.updateProject(id, projectDetails);
        return "Project with id: " + id + " updated successfully";
    }
 
    // 删除项目
    @DeleteMapping("/{id}")
    public String deleteProject(@PathVariable("id") String id) {
        // 调用服务层方法处理项目删除逻辑
        // projectService.deleteProject(id);
        return "Project with id: " + id + " deleted successfully";
    }
}

这个简单的后端API提供了创建、读取、更新和删除(CRUD)操作的基础，展示了如何使用Spring Boot和RestController来创建RESTful API。在实际应用中，你需要根据具体的业务需求和数据模型来扩展这些方法，并且需要实现对应的服务层逻辑。

由于提问中包含了大量的技术栈信息，并且请求的是文章源码和视频讲解，这里我将提供一个精简的解答，并指向相关的代码仓库和部署视频。

1. 项目源码：

   由于源码可能涉及版权问题，我无法直接提供。但是，你可以访问下面的代码仓库，通常开发者会上传部分核心代码或示例。

2. 项目部署视频：

   视频教程通常由项目的开发者或者有经验的开发者录制，因此，你可以在网上搜索或联系项目的开发者获取。

请注意，由于涉及到版权和隐私问题，我不能提供源码的直接下载链接或视频的分享链接。如果你有具体的技术问题，欢迎随时向我提问。

要使用Java Spring Boot和uniapp开发一个打卡小程序，你需要分别完成后端API和前端界面的开发。

后端（Spring Boot）:

1. 创建Spring Boot项目，并添加必要的依赖，如Spring Data JPA, MySQL等。
2. 设计打卡数据模型，比如用户表、打卡任务表和打卡记录表。
3. 创建对应的Repository接口。
4. 创建Service层，包含打卡逻辑，比如创建任务、打卡、统计打卡次数等。
5. 创建RestController，暴露API接口供uniapp调用。

前端（uniapp）:

1. 使用uniapp框架创建项目。
2. 设计界面，包括打卡任务的创建、打卡界面、统计界面等。
3. 使用uniapp的网络请求功能（uni.request）调用后端API。

以下是Spring Boot后端的一个简单示例：

// User.java (用户实体)
@Entity
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String username;
    // 其他字段和方法
}
 
// Task.java (打卡任务实体)
@Entity
public class Task {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String name;
    private User user;
    // 其他字段和方法
}
 
// Attendance.java (打卡记录实体)
@Entity
public class Attendance {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private LocalDateTime signTime;
    private Task task;
    private User user;
    // 其他字段和方法
}
 
// AttendanceService.java (打卡服务)
@Service
public class AttendanceService {
    @Transactional
    public Attendance signIn(User user, Task task) {
        // 创建打卡记录
        Attendance attendance = new Attendance();
        attendance.setSignTime(LocalDateTime.now());
        attendance.setUser(user);
        attendance.setTask(task);
        // 保存到数据库
        return attendanceRepository.save(attendance);
    }
 
    // 其他方法...
}
 
// AttendanceController.java (RestController)
@RestController
@RequestMapping("/attendance")
public class AttendanceController {
    @Autowired
    private AttendanceService attendanceService;
 
    @PostMapping("/sign-in")
    public ResponseEntity<?> signIn(@RequestBody SignInRequest request) {
        User user = userRepository.findByUsername(request.getUsername());
        Task task = taskRepository.findById(request.getTaskId());
        Attendance attendance = attendanceService.signIn(user, task);
        return ResponseEntity.ok(attendance);
    }
 
    // 其他API方法...
}

前端uniapp部分，你需要使用uniapp的API进行网络请求，并根据后端提供的API文档设计界面。

注意：以上代码仅为示例，实际开发中需要完善业务逻辑、异常处理、安全性校验等。同时，前后端需要分别进行测试保证通信顺畅。

在uniapp中实现视频分享预览的功能，可以使用小程序的media-player组件。以下是一个简单的例子：

<template>
  <view>
    <video
      src="https://example.com/path/to/your/video.mp4"
      controls
      poster="https://example.com/path/to/your/poster.jpg"
    ></video>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      // 视频数据可以从后端获取，这里只是示例
      videos: [
        {
          src: 'https://example.com/path/to/your/video.mp4',
          poster: 'https://example.com/path/to/your/poster.jpg'
        }
      ]
    }
  }
}
</script>
 
<style>
/* 样式按需添加 */
</style>

在这个例子中，我们使用了HTML5的<video>标签来实现视频预览的功能。通过设置controls属性，用户可以看到播放、暂停和调整音量等基本的播放控件。poster属性用于设置视频加载时显示的海报图片。

请确保视频的URL是可访问的，并且已经正确设置了跨域访问（如果需要）。

如果你想要更加丰富的播放器功能，可以使用第三方播放器库，比如v-player，或者使用小程序提供的media-player组件。使用media-player组件时，你需要遵循小程序的规范，并确保你的uniapp项目是以小程序平台为目标编译的。

由于提供的信息较为复杂且涉及的内容较多，我无法在一篇文章中详细解释如何部署这样一套系统。不过，我可以提供一个简化版的部署流程概览，并指出关键步骤。

1. 环境准备：

   • 确保服务器上安装了Java环境，并配置了Maven或Gradle。
   • 安装并配置MySQL数据库。
   • 安装Node.js，用于构建Vue.js项目。
   • 安装HBuilderX，用于开发和构建uni-app项目。

2. 后端部署：

   • 导入Spring Boot项目到IDE（如IntelliJ IDEA或Eclipse）。
   • 修改application.properties或application.yml文件中的数据库连接信息。
   • 打包项目（使用Maven或Gradle命令，如mvn package）。
   • 运行打包后的jar文件（如java -jar target/system-0.0.1-SNAPSHOT.jar）。

3. 前端部署（Vue.js）：

   • 在Vue.js项目目录中运行npm install安装依赖。
   • 运行npm run build来构建生产版本的前端应用。
   • 将构建好的静态文件部署到服务器的静态资源目录下（如Nginx的/usr/share/nginx/html）。

4. 小程序端部署（uni-app）：

   • 在HBuilderX中打开uni-app项目。
   • 修改manifest.json中的服务器域名为实际部署的后端地址。
   • 点击发行，选择小程序，并在HBuilderX中打包发布。
   • 将生成的小程序代码上传到微信公众平台，并按照微信小程序的要求进行审核和发布。

注意：以上步骤为简化版，实际部署时可能需要根据项目具体配置调整。安全性和性能优化也是重要考虑因素，如配置HTTPS、使用Nginx作为反向代理、设置防火墙规则等。

由于问题描述不具体，我将提供一个基于Spring Boot后端框架搭建的简单示例，以及一个uniapp小程序中的请求示例。

后端（Spring Boot）:

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
 
@RestController
public class HelloController {
 
    @GetMapping("/hello")
    public String hello() {
        return "Hello, Spring Boot!";
    }
}

这个Spring Boot控制器提供了一个简单的GET接口，返回一个文本问候。

uniapp小程序:

首先，在pages/index/index.vue中，你可能有如下代码结构：

<template>
  <view>
    <text>{{ message }}</text>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  onLoad() {
    this.getData();
  },
  methods: {
    getData() {
      uni.request({
        url: 'http://localhost:8080/hello', // 替换为你的后端服务地址
        method: 'GET',
        success: (res) => {
          this.message = res.data;
        }
      });
    }
  }
}
</script>

在这个uniapp小程序页面中，当页面加载时，onLoad生命周期钩子会被调用，然后getData方法会发起一个HTTP GET请求到你的Spring Boot后端服务。成功获取响应后，将响应数据存储到message变量中，并在页面上显示。

请注意，你需要将url中的地址替换为你的实际后端服务地址。

以上代码提供了一个基本的示例，展示了如何从uniapp小程序中发起HTTP请求并处理响应。在实际应用中，你可能需要处理更复杂的逻辑，例如错误处理、参数传递、状态管理等。

在uniapp中实现手写板、签名、签字功能，可以使用小程序的canvas组件。以下是一个简单的示例，展示了如何在uniapp中创建一个可以手写的画板，并保存为图片。

1. 在页面的.vue文件中添加canvas组件：

<template>
  <view>
    <canvas canvas-id="signature-pad" style="width: 300px; height: 200px;"></canvas>
    <button @click="saveSignature">保存签名</button>
  </view>
</template>

2. 在<script>中添加相关的方法：

<script>
export default {
  data() {
    return {
      context: null,
      isTouchMove: false,
      lastPoint: {}
    };
  },
  onLoad() {
    const ctx = uni.createCanvasContext('signature-pad', this);
    this.context = ctx;
    this.clearSignature();
  },
  methods: {
    clearSignature() {
      const ctx = this.context;
      ctx.setFillStyle('#fff');
      ctx.fillRect(0, 0, 300, 200);
      ctx.setStrokeStyle('#000');
      ctx.setLineWidth(2);
      ctx.setLineCap('round');
      ctx.setLineJoin('round');
    },
    draw(e) {
      if (e.type === 'touchstart') {
        this.isTouchMove = false;
        this.lastPoint.x = e.touches[0].x;
        this.lastPoint.y = e.touches[0].y;
      } else if (e.type === 'touchmove') {
        this.isTouchMove = true;
        const currentPoint = { x: e.touches[0].x, y: e.touches[0].y };
        this.context.moveTo(this.lastPoint.x, this.lastPoint.y);
        this.context.lineTo(currentPoint.x, currentPoint.y);
        this.context.stroke();
        this.lastPoint = currentPoint;
      } else if (e.type === 'touchend' && !this.isTouchMove) {
        // 触发清除
        this.clearSignature();
      }
    },
    saveSignature() {
      const ctx = this.context;
      uni.canvasToTempFilePath({
        canvasId: 'signature-pad',
        success: (res) => {
          console.log('签名图片保存成功：', res.tempFilePath);
          // 处理保存的图片，例如上传到服务器等
          // uni.uploadFile({
          //   url: 'YOUR_UPLOAD_API',
          //   filePath: res.tempFilePath,
          //   name: 'file',
          //   success: (uploadRes) => {
          //     console.log('上传成功：', uploadRes);
          //   },
          //   fail: (uploadErr) => {
          //     console.log('上传失败：', uploadErr);
          //   }
          // });
        },
        fail: (err) => {
          console.error('签名保存失败：', err);
        }
      }, this);
    }
  }
}
</script>

3. 在<style>中添加样式（可选）：

<style>
button {
  margin-top: 10px;
}
</style>

这段代码实现了一个基本的手写板功能，用户可以在画布上签名，然后点击保存按钮将签名保存为图片。你可以根据自己的需求对代码

在uniapp中获取用户信息，通常是通过调用微信小程序的API来实现的。以下是一个简单的示例代码，展示了如何在uniapp项目中获取用户信息：

export default {
  methods: {
    getUserInfo() {
      // 先判断是否有权限
      uni.getSetting({
        success: (res) => {
          if (res.authSetting['scope.userInfo']) {
            // 已经授权，可以直接调用 getUserInfo 获取头像昵称
            uni.getUserInfo({
              success: (infoRes) => {
                console.log(infoRes.userInfo);
                // 获取成功，可以将用户信息保存起来
              },
              fail: () => {
                console.log('获取用户信息失败');
              }
            });
          } else {
            // 没有授权，需要提示用户进行授权
            console.log('需要授权获取用户信息');
          }
        },
        fail: () => {
          console.log('获取设置失败');
        }
      });
    }
  }
}

在实际使用中，你需要根据自己的业务逻辑调整这段代码，例如，如果你需要处理用户授权变更的情况，你可能需要在uni.getSetting的回调中添加对res.authSetting['scope.userInfo']变化的处理。

请注意，这段代码是针对微信小程序的，如果你是在其他平台如支付宝小程序、百度小程序等，获取用户信息的API和逻辑可能会有所不同，你需要参考对应平台的文档来编写相应的代码。