AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2022-04-29 148
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 这个项目的有几大难点：一、登录注册功能的实现二、视频数据的实时获取以及上滑切换视频三、上传视频以及录制视频

这个项目的有几大难点：


一、登录注册功能的实现

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

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


那么我们一步一步分析


一、登录注册功能的实现

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


网络异常，图片无法展示
| 


var express = require('express')
var multer = require('multer')
var jwt = require('jsonwebtoken');
var mysql = require('mysql');
var bodyParser = require('body-parser')
// 如果使用POST方法，就必须导入bodyParser,body-parser请求体解析模块，是express的中间件用于接受请求体中的数据，并解析为对象，解析之后的对象会将作为body属性添加给rep对象
var fs = require('fs');
var join = require('path').join;
var web = express();
var secretkey = 'secretkey';
var connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '',
    port: '3306',
    database: 'sv'
});
connection.connect();
web.use(express.static('public'))
// 设置服务器静态文件夹,里面的文件都是呈现给人们看的网页
web.use(bodyParser.json());
web.use(bodyParser.urlencoded({
    extended: true
}));
web.all("*", function (req, res, next) {
    res.header('Access-Control-Allow-Origin', req.headers.origin || '*');
    res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization,\'Origin\',Accept,X-Requested-With');
    res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
    res.header('Access-Control-Allow-Credentials', true);
    res.header('X-Powered-By', ' 3.2.1');
    res.header('Content-Type', 'application/json;charset=utf-8');
            if (req.method.toLowerCase() == 'options')
                res.send(200); //让options尝试请求快速结束
            else
                next();
        })
//用户登录
web.post('/user/login', (req, res) => {
    var name = req.body.username;
    var passwd = req.body.password;
    var userStr = `select username,password,token from user where username="${name}" and password="${passwd}"`;
    connection.query(userStr, function (err, result) {
        if (err) {
            throw err;
        } else {
            res.json({
                message: result,
            })
        }
    })
})
//符合
web.post('/user/accord', (req, res) => {
    var token2 = req.body.token1;
    var userStr = `select username,token from user where token="${token2}"`;
    connection.query(userStr, function (err, result) {
        if (err) {
            throw err;
        } else {
            res.json({
                message: result,
            })
        }
    })
})
//用户注册
web.post('/user/register', (req, res) => {
    var name = req.body.username;
    var passwd = req.body.password;
    var token1 = jwt.sign({
        username: name
    }, secretkey, {
        expiresIn: 60 * 8
    });
    var json = {};
    var userStr = `select * from user where username="${name}"`;
    connection.query(userStr, function (err, result) {
        if (err) throw err;
        if (result.length > 0) {
            json.message = '用户已经存在';
            json.resultCode = 1;
        } else {
            json.message = '注册成功';
            json.token = token1;
            json.resultCode = 200;
            var insertStr = `insert into user (username, password,token) values ("${name}", "${passwd}","${token1}")`;
            console.log(insertStr)
            connection.query(insertStr, function (err, res) {
                if (err) throw err;
            })
        }
        res.send(JSON.stringify(json))
    })
})
var fullName = '';
var pa="";
var y1="";
var i=0;
var userq=''
web.post('/username', function (req, res) {
    // res.send('')
    userq = req.body.name;
    console.log(userq)
})
var headerConfig = multer.diskStorage({
    // destination目的地
    destination: 'public/video',
    filename: function (req, file, cb) {
        var fileFormat = (file.originalname).split(".");
        cb(null, userq + '-' + Date.now() + "." + fileFormat[fileFormat.length - 1]);
    }
})
var upload = multer({
    storage: headerConfig
})
 function getJsonFiles(jsonPath) {
     let jsonFiles = [];
     function findJsonFile(path) {
         let files = fs.readdirSync(path);
         files.forEach(function (item, index) {
             let fPath = join(path, item);
             let stat = fs.statSync(fPath);
             if (stat.isDirectory() === true) {
                 findJsonFile(fPath);
             }
             if (stat.isFile() === true) {
                 let fail = fPath.slice(7);
                 jsonFiles.push('https://www.xxx.cn/xxx/' + fail);
             }
         });
     }
     findJsonFile(jsonPath);
    //  console.log(jsonFiles);
     pa = jsonFiles;
 }
web.post('/upload',upload.single('video'), function (req, res) {
    // res.send('')
    console.log('上传成功')
})
web.get('/video', function (req, res) {
    getJsonFiles("./public/video");
    res.send(pa);
})
web.listen('7500', function () {
    console.log('服务器开启')
})


前台使用的是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模块


var fullName = '';
var pa="";
var y1="";
var i=0;
var userq=''
web.post('/username', function (req, res) {
    // res.send('')
    userq = req.body.name;
    console.log(userq)
})
// 思路
// 上传内容并储存——1.设置存储的地方——2.设置存储时的名字{1.获取原来名字的后缀，2.再重新命名}
var headerConfig = multer.diskStorage({
    // destination目的地
    destination: 'public/video',
    // fliename 文件名 后面跟函数,函数有三个参数
    // file为当前上传的文件
    filename: function (req, file, cb) {
        var fileFormat = (file.originalname).split(".");
        cb(null, userq + '-' + Date.now() + "." + fileFormat[fileFormat.length - 1]);
    }
})
// 设置使用当前的配置信息
// 上传完照片后要使用的配置信息
var upload = multer({
    storage: headerConfig
})
 function getJsonFiles(jsonPath) {
     let jsonFiles = [];
     function findJsonFile(path) {
         let files = fs.readdirSync(path);
         files.forEach(function (item, index) {
             let fPath = join(path, item);
             let stat = fs.statSync(fPath);
             if (stat.isDirectory() === true) {
                 findJsonFile(fPath);
             }
             if (stat.isFile() === true) {
                 let fail = fPath.slice(7);
                 jsonFiles.push('https://xxx/xxx/' + fail);
             }
         });
     }
     findJsonFile(jsonPath);
    //  console.log(jsonFiles);
     pa = jsonFiles;
 }
// single 上传单个文件; photo 为前端上传文件的input标签的name值
// upload.single('video')每次上传单个文件的配置信息
web.post('/upload',upload.single('video'), function (req, res) {
    // res.send('')
    console.log('上传成功')
})
web.get('/video', function (req, res) {
    getJsonFiles("./public/video");
    res.send(pa);
})


这里前台直接使用的是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>



文章标签：
JavaScript
数据库
游客ksbqbsfjgo6v6
目录
相关文章
前端迷
|
设计模式 前端开发 JavaScript
前端周刊-2018年9月第三期
前端周刊-2018年9月第三期
前端迷
83 0
阿润菜菜
|
人工智能 程序员 Linux
【猿如意】CSDN推出的程序猿开发百宝箱
【猿如意】CSDN推出的程序猿开发百宝箱
阿润菜菜
233 0
jessie筱姜
直击 KubeCon| KubeCon 第三日亮点全解读（含 PPT下载）
jessie筱姜
2103 0
大数据肌肉猿
|
人工智能 大数据 Java
大数据肌肉猿公众号年终总结(文末福利)
大数据肌肉猿公众号年终总结(文末福利)
大数据肌肉猿
647 0
大数据肌肉猿公众号年终总结(文末福利)
游客27r7zphg3jgwe
|
移动开发 Rust 前端开发
前端周刊第二期
前端周刊第二期
游客27r7zphg3jgwe
144 0
游客27r7zphg3jgwe
|
前端开发 JavaScript Shell
前端周刊第三期
前端周刊第三期
游客27r7zphg3jgwe
145 0
开发者小助理
|
城市大脑 大数据 Java
云栖大会精华回顾，历届亮点大放送
一年一度的云栖大会又开始了，阿里云开发者社区和大家一样，期待着这场超级科技盛会。一转眼，云栖大会已经步入了第13年，那些精彩瞬间，我们一起回顾
开发者小助理
989 0
云栖大会精华回顾，历届亮点大放送
嗯不告诉你
|
运维 Kubernetes 监控
怀里橘猫柴犬，掌上代码江湖——对话阿里云 MVP郭旭东
云栖号资讯：【点击查看更多行业资讯】在这里您可以找到不同行业的第一手的上云资讯，还在等什么，快来！ 简介： 跟郭旭东聊过之后，我对程序员的敬佩又多一分。这个92年的开发者，难能可贵地兼备朝气蓬勃的技术能量与长远深刻的行业洞见。
嗯不告诉你
1055 0
怀里橘猫柴犬，掌上代码江湖——对话阿里云 MVP郭旭东
开发者社区
|
程序员 开发者
大咖集结 | 开发者进阶直通车
在这里，约专家，解疑难，看阿里p8、p9专家是如何处理技术问题的。
开发者社区
1064 0
jessie筱姜
直击 KubeCon| KubeCon 第二日亮点全解读（含 PPT下载）
jessie筱姜
4024 0

热门文章

最新文章

  • 1
    多中心容灾实践：如何实现真正的异地多活？
  • 2
    持续定义SaaS模式云数据仓库+数据银行
  • 3
    charles抓包显示乱码解决方法
  • 4
    千亿美元规模，云计算的下半场将走向何方？
  • 5
    DSP_代码笔记（基于TMS320X281x）
  • 6
    TypeScript 泛型
  • 7
    又爱又恨的BOOTSTRAP
  • 8
    AngularJS中使用service，并同步数据
  • 9
    平板电脑进化论：从玩具到工具
  • 10
    屌丝程序员在夏始春末拍的罗曼史之夏婚系列---结婚了
  • 1
    【C语言程序设计——循环程序设计】求解最大公约数（头歌实践教学平台习题）【合集】
    37
  • 2
    【C++数据结构——栈与队列】顺序栈的基本运算（头歌实践教学平台习题）【合集】
    111
  • 3
    【C语言程序设计——循环程序设计】统计海军鸣放礼炮声数量（头歌实践教学平台习题）【合集】
    31
  • 4
    【C语言程序设计——循环程序设计】利用循环求数值 x 的平方根（头歌实践教学平台习题）【合集】
    31
  • 5
    【C++面向对象——类与对象】Computer类（头歌实践教学平台习题）【合集】
    32
  • 6
    【C++面向对象——类与对象】Computer类（头歌实践教学平台习题）【合集】
    29
  • 7
    【C++数据结构——图】最短路径（头歌教学实验平台习题） 【合集】
    32
  • 8
    【C++数据结构——树】二叉树的性质（头歌实践教学平台习题）【合集】
    26
  • 9
    【C++数据结构——树】哈夫曼树（头歌实践教学平台习题） 【合集】
    31
  • 10
    【C++面向对象——类与对象】CPU类（头歌实践教学平台习题）【合集】
    29

    • 相关课程

    更多
  • 【科技少年】“天池杯”AI领航计划·高级挑战教程（赛题及baseline解读）
  • 智能创作赛（复赛）：相册应用中的视频故事生成算法介绍
  • 智能创作赛（初赛）：相册应用中的故事生成算法介绍
  • 场景实践 -新手玩转云计算制作一个浪漫的表白网页
  • 阿里极客的AI最新玩法解读
  • 深入浅出白话Serverless-1024程序员节创造营公益课

    • 相关电子书

    更多
  • 创心第十四届前端技术论坛
  • 2021 KubeMeet 开发者沙龙线下演讲实录合辑
  • Re：移动开发的未来—来自一个微信移动开发者的自白

    • 相关实验场景

    更多
  • 【涂鸦即艺术】基于云应用开发平台CAP部署AI实时生图绘板
  • 奥运时刻！零代码生成奥运风格AI写真。
  • 【AI破次元壁合照】少年白马醉春风，函数计算一键部署AI绘画平台
  • 在PAI ArtLab一键实现欧洲杯粉丝专属贴纸制作
  • 基于阿里云DeepGPU实例，用AI画唯美国风少女
  • 专属钉底座交付培训课程
    • 下一篇
    DataWorks智能交互式数据开发与分析之旅