关于全栈项目【臻美短视频】总结

小灰灰 2021-08-13 17:47 384阅读 0赞

**登录注册页**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70]  
**视频展示页**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70 1]  
**上传拍摄视频页**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70 2]  
以上是臻美短视频的基本页面。

这个项目的有几大难点：

#### 一、登录注册功能的实现 ####

#### 二、视频数据的实时获取以及上滑切换视频 ####

#### 三、上传视频以及录制视频 ####

--------------------

那么我们一步一步分析

## 一、登录注册功能的实现 ##

这里后台使用的是nodejs，调用相应的端口就可以存入数据库。

![在这里插入图片描述][20190830105327481.png]

前台使用的是Vue，UI框架Vant。前台比较简单，这里不多过叙述。

<template>
      <div>
        <div class="logo"><img src="../assets/video.png" alt=""></div>
        <van-cell-group class="int">
          <van-field v-model="username" clearable label="用户名" placeholder="请输入用户名" maxlength="6" clickable />
          <van-field v-model="password" type="password" label="密码" maxlength="6" placeholder="请输入密码" clickable />
        </van-cell-group>
        <div class="foot">
          <van-button type="primary" color="#00CED1" class="login" @click="log" >登录</van-button>
          <p class="reg" @click="reg">注册</p>
        </div>
      </div>
    </template>
    
    <script>import md5 from 'js-md5' const delay = (function () { let timer = 0 return function (callback, ms) { clearTimeout(timer) timer = setTimeout(callback, ms) } })() export default { name: 'login', data () { return { username: '', password: '', sse: '' } }, methods: { reg () { if (this.username.length !== 0 && this.password.length !== 0) { delay(() => { let postData = { username: this.username, password: md5(this.password) } this.$axios.post('https://xxx/xxxx/user/register', postData) .then((response) => { // success console.log(response.data) if (response.data.resultCode === 200) { this.$notify({ message: response.data.message, duration: 1000, background: '#07C160' }) this.username = '' this.password = '' } else if (response.data.resultCode === 1) { this.$notify({ message: response.data.message, duration: 1000, background: '#FFA500' }) } }) .catch((error) => { // error console.log(error) }) }, 500) } else { this.$notify({ message: '注册失败！', duration: 1000, background: '#FF0000' }) } }, log () { delay(() => { let postData = { username: this.username, password: md5(this.password) } this.$axios.post('https://xxx/xxx/user/login', postData) .then((response) => { // success console.log(response.data.message) if (response.data.message.length === 0) { // ('登录失败') this.$notify({ message: '登录失败！', duration: 1000, background: '#FF0000' }) } else { localStorage.setItem('svuser', response.data.message[0].token) localStorage.setItem('svdata', JSON.stringify(response.data.message[0])) this.$router.push({ name: 'index' }) this.$notify({ message: '登录成功！', duration: 1000, background: '#07C160' }) } }) .catch((error) => { // error console.log(error) }) }, 500) } } } </script>

## 二、视频数据的实时获取以及上滑切换视频 ##

视频获取直接调用接口就可以了

<template>
      <div class="index">
        <div class="close" @click="close">
          <div>
            <van-icon name="cross" color="#00CED1"/>
          </div>
        </div>
        <van-swipe style="height: 100vh;" vertical :show-indicators="false" @change="onChange" touchable>
          <van-swipe-item v-for="(item,index) in list" :key="index">
            <div class="main" v-if="playIndex==index">
              <video loop :src="item" preload autoplay="autoplay" controls="controls"></video>
              <div class="foot">
                <p class="name">@ {
       { item | capitalize }}</p>
              </div>
            </div>
          </van-swipe-item>
        </van-swipe>
        <div class="add">
          <div @click="b1()">
            <van-button icon="plus" color="#00CED1" />
          </div>
        </div>
      </div>
    </template>
    
    <script> export default { name: 'index', data () { return { current: 0, list: '', playIndex: 0 } }, methods: { close () { this.$notify({ message: '退出成功！', duration: 1000, background: '#07C160' }) setTimeout(() => { localStorage.clear() window.location.reload() }, 1000) }, onChange (index) { this.current = index this.playIndex = index console.log(index) }, b1 () { const data1 = JSON.parse(localStorage.getItem('svdata')) this.$router.push({ name: 'upload', params: { name: data1.username } }) } }, filters: { capitalize: function (value) { // console.log(value.slice(39)) let a = value.slice(39) return a.split('-')[0] } }, mounted () { // location.reload() // document.querySelector('video').playbackRate = 0.75 const data1 = JSON.parse(localStorage.getItem('svdata')) if (data1.token === localStorage.getItem('svuser')) { // this.name = data1.username this.$axios.get('https://xxx/xxx/video/') .then((response) => { // success console.log(response.data) this.list = response.data }) .catch((error) => { // error console.log(error) }) } } } </script>

## 三、上传视频以及录制视频 ##

这里使用的是node的multer模块

这里前台直接使用的是Vant框架中的文件上传组件，但是你需要注意的是需要将  
`let data = new FormData()`  
`data.append('video', file.file)`  
然后再传到后台去

<template>
        <div class="upload">
          <div class="back" @click="onClickLeft">
            <van-icon name="arrow-left" color="#00CED1" size="26" />
          </div>
          <div class="box">
            <van-uploader :after-read="afterRead" :max-count="1" :max-size="10485760" v-model="fileList" accept="video/*" @oversize='chance()' />
            <p>请上传不大于10M视频</p>
          </div>
        </div>
    </template>
    <script> export default { name: 'upload', data () { return { fileList: [], e: 'video' } }, methods: { chance () { this.$notify({ message: '文件大小过大，请上传小于10M视频', duration: 1000, background: '#FFA500' }) }, onClickLeft () { history.back() }, afterRead (file) { // console.log(file.content)// base64 // function dataURItoBlob (base64Data) { // var byteString // if (base64Data.split(',')[0].indexOf('base64') >= 0) byteString = atob(base64Data.split(',')[1]) // else byteString = unescape(base64Data.split(',')[1]) // var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0] // var ia = new Uint8Array(byteString.length) // for (var i = 0; i < byteString.length; i++) { // ia[i] = byteString.charCodeAt(i) // } // return new Blob([ia], { // type: mimeString // }) // } // console.log(dataURItoBlob(file.content)) let data = new FormData() data.append('video', file.file) // 此时可以自行将文件上传至服务器 this.$axios({ url: 'https://xxx/xxx/upload/', method: 'POST', headers: { 'Content-Type': 'multipart/form-data' }, data: data }).then((response) => { // success }) .catch((error) => { // error console.log(error) }) // console.log(file) this.$notify({ message: '发布成功', duration: 1000, background: '#07C160' }) } }, mounted () { this.$axios({ url: 'https://xxx/xxx/username/', method: 'POST', data: { name: this.$route.params.name } }).then((response) => { // success console.log(response) }) .catch((error) => { // error console.log(error) }) } } </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70]: /images/20210813/a6eb3d4fafc346a28929115348978d4d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70 1]: /images/20210813/4b76f6fb286d46ba82537d37bcbcc320.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70 2]: /images/20210813/11a65e267bc44230a3e6c8567d03d887.png
[20190830105327481.png]: /images/20210813/8dabe9af785f408592e716dc0e73ca68.png