diff --git a/.gitignore b/.gitignore
index dd3e0da..4fec697 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,5 +21,4 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
-movie
 *.mp4
diff --git a/server/.gitignore b/server/.gitignore
index 254defd..fda7097 100644
--- a/server/.gitignore
+++ b/server/.gitignore
@@ -1 +1,2 @@
 server
+movie
diff --git a/server/go.mod b/server/go.mod
index 008d8af..43f0147 100644
--- a/server/go.mod
+++ b/server/go.mod
@@ -2,4 +2,4 @@ module server
 
 go 1.16
 
-require github.com/gin-gonic/gin v1.6.3 // indirect
+require github.com/gin-gonic/gin v1.6.3
diff --git a/server/go.sum b/server/go.sum
index b0eea91..fd20c56 100644
--- a/server/go.sum
+++ b/server/go.sum
@@ -1,9 +1,11 @@
 github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
 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 h1:MsBgLAaY856+nPRTKrp3/OZK38U/wa0CcBYNjji3q3A=
 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=
@@ -24,9 +26,11 @@ github.com/modern-go/concurrent v0.0.0-20180228061459-e0a39a4cb421 h1:ZqeYNhU3OH
 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 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
 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 h1:2E4SXV/wtOkTonXsotYi4li6zVWxYlZuYNCXe9XRJyk=
 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=
@@ -36,6 +40,7 @@ golang.org/x/sys v0.0.0-20200116001909-b77594299b42 h1:vEOn+mP2zCOVzKckCZy6YsCtD
 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 h1:yhCVgyC4o1eVCa2tZl7eS0r+SDo693bJlVdllGtEeKM=
 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=
diff --git a/server/handler.go b/server/handler.go
new file mode 100644
index 0000000..5dd9985
--- /dev/null
+++ b/server/handler.go
@@ -0,0 +1,52 @@
+package main
+
+import (
+	"log"
+	"net/http"
+	"strconv"
+
+	"github.com/gin-gonic/gin"
+)
+
+// MovieList 电影列表
+func MovieList(c *gin.Context) {
+
+	data := gin.H{}
+	response := gin.H{
+		"code":    http.StatusInternalServerError,
+		"message": "",
+		"data":    data,
+	}
+	defer c.JSON(0, response)
+
+	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
+	var end int = start + limit
+	if end > len(movies) {
+		end = len(movies)
+	}
+
+	response["code"] = http.StatusOK
+
+	data["items"] = movies[start:end]
+	data["total"] = len(movies)
+}
diff --git a/server/main.go b/server/main.go
index 99145d8..9a984b5 100644
--- a/server/main.go
+++ b/server/main.go
@@ -5,10 +5,8 @@ import (
 	"fmt"
 	"io/fs"
 	"log"
-	"net/http"
 	"os/exec"
 	"path/filepath"
-	"strconv"
 	"strings"
 
 	"github.com/gin-gonic/gin"
@@ -58,7 +56,7 @@ func initMovie() {
 	}
 
 	filepath.Walk("./movie", func(path string, info fs.FileInfo, err error) error {
-		if !info.IsDir() && filepath.Ext(info.Name()) != "webp" {
+		if !info.IsDir() && filepath.Ext(info.Name()) != ".webp" {
 			base := info.Name()
 			log.Println(path, info.Name())
 			movies = append(movies, Movie{
@@ -81,35 +79,7 @@ func main() {
 	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],
-		})
-	})
+	movie.GET("/", MovieList)
 
 	eg.Run(":4444")
 }
diff --git a/src/Config.vue b/src/Config.vue
index 75edc8c..275d4ad 100644
--- a/src/Config.vue
+++ b/src/Config.vue
@@ -5,8 +5,9 @@
 <script>
  
 var Host = "http://localhost:4444"
+ 
 
 export default ({
-    Host: Host
+    Host: Host,
 })
 </script>
diff --git a/src/components/Main.vue b/src/components/Main.vue
index 75e6fd4..69caf17 100644
--- a/src/components/Main.vue
+++ b/src/components/Main.vue
@@ -1,16 +1,17 @@
 <template>
   <v-container>
     <div>
-      <v-row >
-        <v-col v-for="item in list" :key="item.filename">
-          <v-card
-            class="d-flex align-start flex-column ma-2"
+      <v-row     >
+        <v-col cols="3" class="pa-2 justify-space-between" v-for="item in pagination.movies" :key="item.filename">
+          <v-card 
+           
+            class="d-flex  flex-column"
             width="160"
             height="200"
             link
-            :href='Host+"/res/"+item.filename'
+            :href="Host+'/res/'+item.filename"
           >
-            <v-img  height="120" :src='Host+"/res/" + item.image' :ref='Host+"/res/"+item.filename'></v-img>
+            <v-img height="120" :src="Host+'/res/'+item.image"></v-img>
             <v-card-text>{{ item.filename }}</v-card-text>
           </v-card>
         </v-col>
@@ -20,36 +21,55 @@
     <v-divider></v-divider>
 
     <div class="text-center d-flex align-bottom flex-column">
-      <v-pagination v-model="page" :length="100" circle></v-pagination>
+      <v-pagination
+        v-model="pagination.page"
+        :length="pagination.length"
+        :total-visible="8"
+        @input="nextpage"
+        circle
+      ></v-pagination>
     </div>
   </v-container>
 </template>
 
 <script>
-
 import axios from "axios";
 import config from "../Config";
 
-var info = [];
+var pagination = {
+  movies: [],
+  page: 1,
+  total: 1,
+  length: 1,
+};
 
-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"])
-  }
-});
+var limit = 8;
+
+var nextpage = (page) => {
+  axios
+    .get(config.Host + "/movie/?page=" + page + "&limit=" + limit)
+    .then((response) => {
+ 
+      if (response.status === 200) {
+        var data = response.data.data;
+        pagination.movies = data.items;
+        pagination.page = page;
+        pagination.total = data.total;
+        pagination.length = Math.ceil(data.total / limit) 
+      }
+    });
+};
+
+nextpage(pagination.page);
 
 export default {
-  name: "Main",
 
+  name: "Main",
   data: () => ({
     src: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4",
-    page: 1,
-    list: info,
+    pagination: pagination,
     Host: config.Host,
+    nextpage: nextpage,
   }),
 };
 </script>
diff --git a/src/main.js b/src/main.js
index 910b648..cb5b0d6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,7 +2,8 @@ import Vue from 'vue'
 import App from './App.vue'
 import vuetify from './plugins/vuetify';
 
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
+Vue.config.devtools = true;
   
 new Vue({
   vuetify,