分页基本做出来了

slTrust · Feb 18, 2021 · fe066dc · fe066dc
1 parent 42f0f1c
commit fe066dc
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -22,7 +22,6 @@
     "next": "10.0.6",
     "next-iron-session": "^4.1.7",
     "pg": "^8.2.1",
-    "query-string": "^6.13.1",
     "md5": "^2.2.1",
     "react": "17.0.1",
     "react-dom": "17.0.1",

diff --git a/pages/posts/index.tsx b/pages/posts/index.tsx
@@ -2,15 +2,19 @@ import {GetServerSideProps, NextPage} from 'next';
 import {getDatabaseConnection} from 'lib/getDatabaseConnection';
 import {Post} from 'src/entity/Post';
 import Link from 'next/link';
+import qs from 'querystring';
 
 type Props = {
-    posts: Post[]
+    posts: Post[];
+    count: number;
+    perPage: number;
+    page: number;
 }
 const PostsIndex: NextPage<Props> = (props) => {
     const {posts} = props;
     return (
         <div>
-            <h1>文章列表</h1>
+            <h1>文章列表({props.count}) 每页{props.perPage}</h1>
             {posts.map(post =>
                 <div key={post.id}>
                     <Link href={`/posts/${post.id}`}>
@@ -20,19 +24,33 @@ const PostsIndex: NextPage<Props> = (props) => {
                     </Link>
                 </div>
             )}
+            <footer>
+                共 {props.count} 篇文章，当前是第 {props.page} 页
+                <Link href={`?page=${props.page - 1}`}><a>上一页</a></Link>
+                |
+                <Link href={`?page=${props.page + 1}`}><a>下一页</a></Link>
+            </footer>
         </div>
     );
 };
 export default PostsIndex;
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
+    const index = context.req.url.indexOf('?');
+    const search = context.req.url.substr(index + 1);
+    const query = qs.parse(search);
+    const page = parseInt(query.page?.toString()) || 1;
     const connection = await getDatabaseConnection();// 第一次链接能不能用 get
-    const posts = await connection.manager.find(Post);
+    const perPage = 3; // 每页只有3个
+    const [posts, count] = await connection.manager.findAndCount(Post,
+        {skip: (page - 1) * perPage, take: perPage});
     const ua = context.req.headers['user-agent'];
     return {
         props: {
             browser: ua,
-            posts: JSON.parse(JSON.stringify(posts))
+            posts: JSON.parse(JSON.stringify(posts)),
+            count: count,
+            perPage, page
         }
     };
 };
diff --git a/pages/sign_in.tsx b/pages/sign_in.tsx
@@ -1,9 +1,9 @@
 import {GetServerSideProps, GetServerSidePropsContext, NextPage} from 'next';
-import axios, {AxiosResponse} from 'axios';
+import axios from 'axios';
 import {withSession} from '../lib/withSession';
 import {User} from '../src/entity/User';
 import {useForm} from '../hooks/useForm';
-import qs from 'query-string';
+import qs from 'querystring';
 
 const SignIn: NextPage<{ user: User }> = (props) => {
     const {form} = useForm({
@@ -17,7 +17,8 @@ const SignIn: NextPage<{ user: User }> = (props) => {
             request: formData => axios.post(`/api/v1/sessions`, formData),
             success: () => {
                 window.alert('登录成功');
-                const query = qs.parse(window.location.search);
+                const query = qs.parse(window.location.search.substr(1));
+                console.log(query);
                 window.location.href = query.returnTo.toString();
 
             }