test/vue-movie
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

TODO: 图片排版

Browse Source
This commit is contained in:
eson 2021-03-11 18:53:20 +08:00
parent 6cdf10a090
commit df661cb3c5
13 changed files with 281 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -21,3 +21,5 @@ pnpm-debug.log*
*.njsproj
*.sln
*.sw?
movie
*.mp4

1
package.json
View File

@ -8,6 +8,7 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.21.1",
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-dplayer": "^0.0.10",

1
server/.gitignore vendored Normal file
View File

@ -0,0 +1 @@
server

5
server/go.mod Normal file
View File

@ -0,0 +1,5 @@
module server
go 1.16
require github.com/gin-gonic/gin v1.6.3 // indirect

42
server/go.sum Normal file
View File

@ -0,0 +1,42 @@
github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
github.com/gin-contrib/sse v0.1.0 h1:Y/yl/+YNO8GZSjAhjMsSuLt29uWRFHdHYUb5lYOV9qE=
github.com/gin-contrib/sse v0.1.0/go.mod h1:RHrZQHXnP2xjPF+u1gW/2HnVO7nvIa9PG3Gm+fLHvGI=
github.com/gin-gonic/gin v1.6.3 h1:ahKqKTFpO5KTPHxWZjEdPScmYaGtLo8Y4DMHoEsnp14=
github.com/gin-gonic/gin v1.6.3/go.mod h1:75u5sXoLsGZoRN5Sgbi1eraJ4GU3++wFwWzhwvtwp4M=
github.com/go-playground/assert/v2 v2.0.1/go.mod h1:VDjEfimB/XKnb+ZQfWdccd7VUvScMdVu0Titje2rxJ4=
github.com/go-playground/locales v0.13.0 h1:HyWk6mgj5qFqCT5fjGBuRArbVDfE4hi8+e8ceBS/t7Q=
github.com/go-playground/locales v0.13.0/go.mod h1:taPMhCMXrRLJO55olJkUXHZBHCxTMfnGwq/HNwmWNS8=
github.com/go-playground/universal-translator v0.17.0 h1:icxd5fm+REJzpZx7ZfpaD876Lmtgy7VtROAbHHXk8no=
github.com/go-playground/universal-translator v0.17.0/go.mod h1:UkSxE5sNxxRwHyU+Scu5vgOQjsIJAF8j9muTVoKLVtA=
github.com/go-playground/validator/v10 v10.2.0 h1:KgJ0snyC2R9VXYN2rneOtQcw5aHQB1Vv0sFl1UcHBOY=
github.com/go-playground/validator/v10 v10.2.0/go.mod h1:uOYAAleCW8F/7oMFd6aG0GOhaH6EGOAJShg8Id5JGkI=
github.com/golang/protobuf v1.3.3 h1:gyjaxf+svBWX08ZjK86iN9geUJF0H6gp2IRKX6Nf6/I=
github.com/golang/protobuf v1.3.3/go.mod h1:vzj43D7+SQXF/4pzW/hwtAqwc6iTitCiVSaWz5lYuqw=
github.com/google/gofuzz v1.0.0/go.mod h1:dBl0BpW6vV/+mYPU4Po3pmUjxk6FQPldtuIdl/M65Eg=
github.com/json-iterator/go v1.1.9 h1:9yzud/Ht36ygwatGx56VwCZtlI/2AD15T1X2sjSuGns=
github.com/json-iterator/go v1.1.9/go.mod h1:KdQUCv79m/52Kvf8AW2vK1V8akMuk1QjK/uOdHXbAo4=
github.com/leodido/go-urn v1.2.0 h1:hpXL4XnriNwQ/ABnpepYM/1vCLWNDfUNts8dX3xTG6Y=
github.com/leodido/go-urn v1.2.0/go.mod h1:+8+nEpDfqqsY+g338gtMEUOtuK+4dEMhiQEgxpxOKII=
github.com/mattn/go-isatty v0.0.12 h1:wuysRhFDzyxgEmMf5xjvJ2M9dZoWAXNNr5LSBS7uHXY=
github.com/mattn/go-isatty v0.0.12/go.mod h1:cbi8OIDigv2wuxKPP5vlRcQ1OAZbq2CE4Kysco4FUpU=
github.com/modern-go/concurrent v0.0.0-20180228061459-e0a39a4cb421 h1:ZqeYNhU3OHLH3mGKHDcjJRFFRrJa6eAM5H+CtDdOsPc=
github.com/modern-go/concurrent v0.0.0-20180228061459-e0a39a4cb421/go.mod h1:6dJC0mAP4ikYIbvyc7fijjWJddQyLn8Ig3JB5CqoB9Q=
github.com/modern-go/reflect2 v0.0.0-20180701023420-4b7aa43c6742 h1:Esafd1046DLDQ0W1YjYsBW+p8U2u7vzgW2SQVmlNazg=
github.com/modern-go/reflect2 v0.0.0-20180701023420-4b7aa43c6742/go.mod h1:bx2lNnkwVCuqBIxFjflWJWanXIb3RllmbCylyMrvgv0=
github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
github.com/stretchr/testify v1.3.0/go.mod h1:M5WIy9Dh21IEIfnGCwXGc5bZfKNJtfHm1UVUgZn+9EI=
github.com/stretchr/testify v1.4.0/go.mod h1:j7eGeouHqKxXV5pUuKE4zz7dFj8WfuZ+81PSLYec5m4=
github.com/ugorji/go v1.1.7 h1:/68gy2h+1mWMrwZFeD1kQialdSzAb432dtpeJ42ovdo=
github.com/ugorji/go v1.1.7/go.mod h1:kZn38zHttfInRq0xu/PH0az30d+z6vm202qpg1oXVMw=
github.com/ugorji/go/codec v1.1.7 h1:2SvQaVZ1ouYrrKKwoSk2pzd4A9evlKJb9oTL+OaLUSs=
github.com/ugorji/go/codec v1.1.7/go.mod h1:Ax+UKWsSmolVDwsd+7N3ZtXu+yMGCf907BLYF3GoBXY=
golang.org/x/sys v0.0.0-20200116001909-b77594299b42 h1:vEOn+mP2zCOVzKckCZy6YsCtDblrpj/w7B9nxGNELpg=
golang.org/x/sys v0.0.0-20200116001909-b77594299b42/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
golang.org/x/text v0.3.2/go.mod h1:bEr9sfX3Q8Zfm5fL9x+3itogRgK3+ptLWKqgva+5dAk=
golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
gopkg.in/yaml.v2 v2.2.2/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
gopkg.in/yaml.v2 v2.2.8 h1:obN1ZagJSUGI0Ek/LBmuj4SNLPfIny3KsKFopxRdj10=
gopkg.in/yaml.v2 v2.2.8/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=

115
server/main.go Normal file
View File

@ -0,0 +1,115 @@
package main
import (
"bytes"
"fmt"
"io/fs"
"log"
"net/http"
"os/exec"
"path/filepath"
"strconv"
"strings"
"github.com/gin-gonic/gin"
)
// Movie 电影结构
type Movie struct {
Name string `json:"filename"`
Image string `json:"image"`
}
var movies []Movie
func initMovie() {
var movieDict map[string]string = make(map[string]string)
matches, err := filepath.Glob("movie/*")
if err != nil {
log.Println(err)
}
for _, filename := range matches {
base := filepath.Base(filename)
ext := filepath.Ext(base)
base = base[:strings.IndexByte(base, '.')]
if _, ok := movieDict[base]; ok {
delete(movieDict, base)
} else {
movieDict[base] = filename
}
log.Println(base, ext)
}
for key, filename := range movieDict {
width := 160
height := 120
log.Println(filename)
cmd := exec.Command("ffmpeg", "-i", filename, "-vframes", "1", "-s", fmt.Sprintf("%dx%d", width, height), "movie/"+key+".webp")
var buffer bytes.Buffer
cmd.Stdout = &buffer
if cmd.Run() != nil {
panic("could not generate frame")
}
}
filepath.Walk("./movie", func(path string, info fs.FileInfo, err error) error {
if !info.IsDir() && filepath.Ext(info.Name()) != "webp" {
base := info.Name()
log.Println(path, info.Name())
movies = append(movies, Movie{
Name: info.Name(),
Image: base[:strings.IndexByte(base, '.')] + ".webp",
})
}
return nil
})
log.Printf("%##v", movies)
}
func main() {
initMovie()
eg := gin.Default()
eg.Use(Cors())
eg.Static("/res", "movie/")
movie := eg.Group("movie")
movie.GET("/", func(c *gin.Context) {
var page int = 0
spage := c.Query("page")
if spage != "" {
p, err := strconv.Atoi(spage)
if err != nil {
log.Println(err)
}
page = p - 1
}
var limit int = 10
slimit := c.Query("limit")
if slimit != "" {
l, err := strconv.Atoi(slimit)
if err != nil {
log.Println(err)
}
limit = l
}
start := page * limit
log.Println(limit)
c.JSON(0, gin.H{
"code": http.StatusOK,
"message": "",
"data": movies[start : start+limit],
})
})
eg.Run(":4444")
}

45
server/middleware.go Normal file
View File

@ -0,0 +1,45 @@
package main
import (
"net/http"
"github.com/gin-gonic/gin"
)
// Cors 跨域中间间
func Cors() gin.HandlerFunc {
return func(c *gin.Context) {
method := c.Request.Method //请求方法
origin := c.Request.Header.Get("Origin") //请求头部
// var headerKeys []string // 声明请求头keys
// for k := range c.Request.Header {
// headerKeys = append(headerKeys, k)
// }
// headerStr := strings.Join(headerKeys, ", ")
// if headerStr != "" {
// headerStr = fmt.Sprintf("access-control-allow-origin, access-control-allow-headers, %s", headerStr)
// } else {
// headerStr = "access-control-allow-origin, access-control-allow-headers"
// }
if origin != "" {
c.Writer.Header().Set("Access-Control-Allow-Origin", "*")
c.Header("Access-Control-Allow-Origin", "*") // 这是允许访问所有域
c.Header("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE,UPDATE") //服务器支持的所有跨域请求的方法,为了避免浏览次请求的多次'预检'请求
// header的类型
c.Header("Access-Control-Allow-Headers", "Authorization, Content-Length, X-CSRF-Token, Token,session,X_Requested_With,Accept, Origin, Host, Connection, Accept-Encoding, Accept-Language,DNT, X-CustomHeader, Keep-Alive, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type, Pragma")
// 允许跨域设置 可以返回其他子段
c.Header("Access-Control-Expose-Headers", "Content-Length, Access-Control-Allow-Origin, Access-Control-Allow-Headers,Cache-Control,Content-Language,Content-Type,Expires,Last-Modified,Pragma,FooBar") // 跨域关键设置 让浏览器可以解析
c.Header("Access-Control-Max-Age", "172800") // 缓存请求信息 单位为秒
c.Header("Access-Control-Allow-Credentials", "true") // 跨域请求是否需要带cookie信息 默认设置为true
c.Set("content-type", "application/json") // 设置返回格式是json
}
//放行所有OPTIONS方法
if method == "OPTIONS" {
c.JSON(http.StatusOK, "Options Request!")
}
// 处理请求
c.Next() // 处理请求
}
}

4
src/App.vue
View File

@ -56,5 +56,9 @@ export default {
data: () => ({
//
}),
mounted: () => ({
})
};
</script>

12
src/Config.vue Normal file
View File

@ -0,0 +1,12 @@
<script>
var Host = "http://localhost:4444"
export default ({
Host: Host
})
</script>

63
src/components/Main.vue
View File

@ -1,44 +1,55 @@
<template>
<v-container>
<div class="d-flex align-end flex-column" width="100" height="100">
<v-card >
<video controls preload poster :src="src"></video>
<v-card-text> 123 </v-card-text>
<div>
<v-row >
<v-col v-for="item in list" :key="item.filename">
<v-card
class="d-flex align-start flex-column ma-2"
width="160"
height="200"
link
:href='Host+"/res/"+item.filename'
>
<v-img height="120" :src='Host+"/res/" + item.image' :ref='Host+"/res/"+item.filename'></v-img>
<v-card-text>{{ item.filename }}</v-card-text>
</v-card>
</v-col>
</v-row>
</div>
<v-divider></v-divider>
<div class="text-center d-flex align-bottom flex-column">
<v-pagination
v-model="page"
:length="100"
circle
></v-pagination>
<div class="text-center d-flex align-bottom flex-column">
<v-pagination v-model="page" :length="100" circle></v-pagination>
</div>
</v-container>
</template>
<script>
import axios from "axios";
import config from "../Config";
var info = [];
axios.get(config.Host + "/movie/?page=1&limit=10").then((response) => {
if (response.status === 200) {
for (var o of response.data["data"]) {
info.push(o);
console.log(o);
}
// console.log(response.data["data"])
}
});
export default {
name: "Main",
export default {
name: 'Main',
data: () => ({
src: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4",
page: 1,
})
}
list: info,
Host: config.Host,
}),
};
</script>

13
src/main.js
View File

@ -2,22 +2,9 @@ import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
Vue.config.productionTip = false
new Vue({
vuetify,
render: h => h(App)
}).$mount('#app')
import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VideoPlayer)

11
src/plugins/video.js
View File

@ -1,11 +0,0 @@
import Vue from 'vue'
import VueVideoPlayer from 'vue-video-player'
// require videojs style
import 'video.js/dist/video-js.css'
// import 'vue-video-player/src/custom-theme.css'
Vue.use(VueVideoPlayer, /* {
options: global default options,
events: global videojs events
} */)

9
yarn.lock
View File

@ -1861,6 +1861,13 @@ axios@0.19.2:
dependencies:
follow-redirects "1.5.10"
axios@^0.21.1:
version "0.21.1"
resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.1.tgz#22563481962f4d6bde9a76d516ef0e5d3c09b2b8"
integrity sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==
dependencies:
follow-redirects "^1.10.0"
babel-eslint@^10.1.0:
version "10.1.0"
resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.1.0.tgz#6968e568a910b78fb3779cdd8b6ac2f479943232"
@ -3989,7 +3996,7 @@ follow-redirects@1.5.10:
dependencies:
debug "=3.1.0"
follow-redirects@^1.0.0:
follow-redirects@^1.0.0, follow-redirects@^1.10.0:
version "1.13.3"
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.3.tgz#e5598ad50174c1bc4e872301e82ac2cd97f90267"
integrity sha512-DUgl6+HDzB0iEptNQEXLx/KhTmDb8tZUHSeLqpnjpknR70H0nC2t9N73BK6fN4hOvJ84pKlIQVQ4k5FFlBedKA==