人生苦短 let's go 之简易vlog
golang 后台搭建以及编码
- 用goland 新建项目vlog ，设置path
- 新建src目录并且新建main.go，src同目录下新建video 文件用于存放上传视频
项目结构截图如下：
因为只是简易搭建，并没有封装代码，代码如下
package main
import (
"encoding/json"
"io"
"net/http"
"os"
"path/filepath"
"strings"
)
func sayHello(w http.ResponseWriter, r *http.Request) {
w.Write([]byte("hello"))
}
func uploadVlog(w http.ResponseWriter , r *http.Request) {
r.Body=http.MaxBytesReader(w,r.Body,10*1024*1024)
err :=r.ParseMultipartForm(10*1024*1024)
//限制MP4文件大小为10m
if err!=nil {
http.Error(w,"当前文件太大",http.StatusInternalServerError)
return
}
//获取上传文件
file, header, err := r.FormFile("uploadFile")
ret :=strings.HasSuffix(header.Filename,".mp4");
if ret ==false {
http.Error(w,"当前文件格式不正确",http.StatusInternalServerError)
return
}
dst, err := os.Create("./video/"+header.Filename)
defer dst.Close()
if err!=nil {
http.Error(w,err.Error(),http.StatusInternalServerError)
return
}
defer file.Close()
_, err = io.Copy(dst, file)
if err!=nil {
http.Error(w,err.Error(),http.StatusInternalServerError)
return
}
return
}
func getList(w http.ResponseWriter, r *http.Request) {
matches, _ := filepath.Glob("video/*")
var ret []string
for _,file :=range matches {
ret=append(ret,"http://"+r.Host+"/video/"+filepath.Base(file))
}
bytes, _ := json.Marshal(ret)
w.Header().Set("Access-Control-Allow-Origin", "*")
w.Write(bytes)
return
}
func main() {
/*
编写入门的hello world
*/
http.HandleFunc("/",sayHello)
http.HandleFunc("/api/upload",uploadVlog)
http.HandleFunc("/api/list",getList)
fileServer := http.FileServer(http.Dir("./video"))
//将以video开头的url 路由到 对应的目录下
http.Handle("/video/",http.StripPrefix("/video/",fileServer))
//3,启动服务，监听8080端口
http.ListenAndServe(":8080",nil)
}
前端框架地址：http://m.sui.taobao.org/
具体的代码介绍很简单，按照自己想做的去写就好，下面是本人html代码以及运行效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>我的生活</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
<link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
</head>
<body>
<div class="page-group">
<div class="page page-current">
<div id="play">
</div>
<!-- 你的html代码 -->
<nav class="bar bar-tab">
<a class="tab-item external active" href="#">
<span class="icon icon-home"></span>
<span class="tab-label">文案</span>
</a>
<a class="tab-item external" href="#">
<span class="icon icon-me"></span>
<span class="tab-label">文案</span>
<span class="badge">2</span>
</a>
<a class="tab-item external" href="#">
<span class="icon icon-star"></span>
<span class="tab-label">文案</span>
</a>
<a class="tab-item external" href="#">
<span class="icon icon-cart"></span>
<span class="tab-label">文案</span>
</a>
<a class="tab-item external" href="#">
<span class="icon icon-settings"></span>
<span class="tab-label">文案</span>
</a>
</nav>
</div>
</div>
<script type='text/javascript'>
window.onload=function(){
getList();
}
function getList(){
$.ajax({
async : false, //表示请求是否异步处理
type : "get", //请求类型
url : "http://localhost:8080/api/list",//请求的 URL地址
dataType : "json",//返回的数据类型
success: function (data) {
for(var i=0;i<data.length;i++){
$("#play").append(
` 风格卡片
`+
`data[i]+`"
controls = "true"
preload="auto"
height="200px"
webkit-playsinline="true"
playsinline="true"
x-webkit-airplay="allow"
x5-video-player-type="h5"
x5-video-player-fullscreen="true"
x5-video-orientation="portraint"
style="object-fit:fill">
`
+ `
发表于 2015/01/15
此处是内容...
`
)
}
},
error:function (data) {
alert(data.result);
}
});
}
</script>
<script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
</body>
</html>
运行截图：
