数据分页在项目中的使用频率是非常高的,但是对于新手来说是一个难点和痛点,这里我记录一次数据分页从环境搭建到最后页面的渲染的过程,对于新手可以用来参考,大佬勿喷高抬贵手.

最终效果：

![在这里插入图片描述](https://suiyan.cc/assets/images/2023/0423-01.png)

## 环境搭建
![在这里插入图片描述](https://suiyan.cc/assets/images/2023/0423-02.png)


`fastapi-backend` 后端目录
`vue-frontend` 前端目录
这里我只贴一些关键的代码了,文末有代码仓库可以查看完整的代码.

### 后端
后端采用了`fastapi`框架,首先安装相关依赖`fastapi faker uvicorn`等,具体依赖可以参考文件头部的引用.后端的搭建首先是创建`fastapi`的实例,和解决跨域的问题,这些很简单,官方就有现成的代码,复制过来修改,然后就是在`models.py`中定义数据的模型,本项目中只有一个表和简单的字段:


    from database import Base
    from sqlalchemy import String,Column,Integer
    class Item(Base):
        __tablename__ = 'item'
        id = Column(Integer,primary_key=True,autoincrement=True)
        addr = Column(String(256), nullable=False,index=True)

然后在main.py的入口处创建数据库,并添加一些假数据.


	Base.metadata.create_all(engine) # create all tables
	# 创建测试数据
	item_count = 999
	fk = Faker(locale="zh-CN")
	db = get_db()
	k = get_item_count(db)
	if (get_item_count(db)==0):
		for i in range(item_count):
			addr = fk.address()
			item = Item(addr=addr)
			create_item(db,item)


第一行是创建数据库,后边判断表中是否有数据,没有的话创建999条虚拟数据.

`crud.py`中定义了添加和查询的方法.


	from sqlalchemy.orm import Session
	from models import Item
	def create_item(db: Session, item: Item):
		db_item = Item(addr=item.addr)
		db.add(db_item)
		db.commit()
		db.refresh(db_item)
	def get_item_count(db: Session):
		return db.query(Item).count()
	# offset: 表示要跳过多少条数据,limit: 表示取几条数据,
	def get_items(db: Session,skip: int = 0, limit: int = 10):
		return db.query(Item).offset(skip).limit(limit).all()

分页数据后端的重点就在查询语句那里:**offset: 表示要跳过多少条数据,limit: 表示取几条数据,**根据前端返回的参数就可以查到需要的数据了.

然后就是创建`fastapi`的接口函数,`main.py`:


	@app.get("/getitems")
	def get_item_list(skip: int = 0, limit: int = 10,db:Session = Depends(get_db)):
		# print(skip,limit)
		data = dict()
		data["items"] = get_items(db=db,skip=skip,limit=limit)
		data["item_count"] = get_item_count(db)
		return data

至此,后端的搭建基本完成,运行`main.py`后,打开`http://127.0.0.1:8000/docs`,就可以调试接口获取数据了:
![在这里插入图片描述](https://suiyan.cc/assets/images/2023/0423-03.png)


如果能正常的获取数据,后端的搭建至此就结束了.

## 前端搭建
在项目的根目录终端下:

	npm init vue@latest  # 然后一路回车即可

起好前端项目的名字:`vue-frontend`,当然别的也可以.

安装 ant design for vue3

	npm i --save ant-design-vue

安装后 配置前端下边的`main.js`引入ui框架.

	import { createApp } from 'vue'
	import Antd from 'ant-design-vue';
	import App from './App.vue'
	import 'ant-design-vue/dist/antd.css';

	const app = createApp(App);
	app.use(Antd);
	app.mount('#app');

再安装`axios`  `npm install axios`

然后在前端目录的终端下:`npm run dev` 
即可看到项目正常启动了.

## 前端数据的渲染
首先搭建前端的界面,这里用到了`ant`的`list`和`pagination`,在 `home.vue`:


	<template lang="">
		<a-list bordered :data-source="items">
		<template #renderItem="{ item }">
			<a-list-item>{{ item.id }}.{{ item.addr }}</a-list-item>
		</template>
		<template #header>
			<div>列表展示</div>
		</template>
		<template #footer>
			<div><a-pagination @change="showSizeChange" v-model:current="current" :total="count" /></div>
		</template>
		</a-list>
	</template>

接下来就是定义`ref`和`ajax`的方法了:


	<script setup>
	import {ref} from 'vue'
	import axios from 'axios'

	const baseURL = 'http://localhost:8000'

	const items = ref([])
	const count = ref(0)
	const current = ref(1)

	axios.get(baseURL+'/getitems').then(function(response) {
		console.log(response.data)
		items.value = response.data.items
		count.value = response.data.item_count
	})

	const showSizeChange = (current,size) =>{
		console.log(current,size)
		let skip=size*(current-1)
		let limit=size
		axios.get(baseURL+'/getitems',
		{
			params:{
				skip: skip,
				limit: limit
			},
		},
		).then(function(response) {
		console.log(response.data)
		items.value = response.data.items
		count.value = response.data.item_count
	})
	}
	</script>

前端的代码很简答的,vue3极大的简化了代码,还有就是翻页的pagination封装了大量分页的逻辑控制,我们只要通过两个数据就可以控制这个前端的翻页组件,`let skip=size*(current-1)`,这个是比较关键的代码,控制着数据返回的起始点.如果没有什么问题项目已经可以正常翻页了.

本文代码仓库:
[https://github.com/bosichong/vue3-fastapi-pagination.git](https://github.com/bosichong/vue3-fastapi-pagination.git)

数据分页在项目中的使用频率是非常高的,但是对于新手来说是一个难点和痛点,这里我记录一次数据分页从环境搭建到最后页面的渲染的过程,对于新手可以用来参考。

vue3前端打包集成到后端fastAPI的uvicorn服务器



JianCe是一个简简单单的学习结果检测的小工具，通过设置一组在线试题（题型包括：单选、多选、判断、简答）来检验学习结果。


### 功能

- [x] 答题开始组件
- [x] 答题结束组件
- [x] 加载题库是先把题库随机打乱
- [x] 添加答题进度
- [x] 答题首页显示题目数量
- [x] 得分页面显示错题的时候问题和答案同时显示。
- [x] 添加ctrl+enter 进行下一道题
- [x] 把答题页面继续组件化
- [x] 答题的时间控制，倒计时展示
- [x] 显示每一道题的类型
- [ ] 加载失败或题库不存在的时候进行提示。
- [ ] 在答题页面时，如果要返回首页，应该提示是否要放弃答题而返回首页？
- [ ] 控制问题标题的文字大小

演示页面：https://suiyan.cc/demo/jiance/

界面预览：


![](https://suiyan.cc/assets/images/2023/jiance/01.png)


准备答题


![](https://suiyan.cc/assets/images/2023/jiance/02.png)
![](https://suiyan.cc/assets/images/2023/jiance/03.png)

亮色主题随心切换，答题结果、评分，错题展示。


![](https://suiyan.cc/assets/images/2023/jiance/04.png)
![](https://suiyan.cc/assets/images/2023/jiance/05.png)


### 安装依赖

项目依赖很简单：

    "dependencies": {
    "axios": "^1.3.4",
    "pinia": "^2.0.33",
    "vue": "^3.2.47",
    "vue-router": "^4.1.6"
    },

终端进入项目的根目录，先安装项目的依赖：

```sh
npm install
```

### 启动

```sh
npm run dev
```

### 编译打包

```sh
npm run build
```

### 添加和编辑题库

题库的编写使用json文件。

`public/data`  为题库及目录文件存放目录

`public/data/navigation.json` 题库目录，这里索引了所有的测试题连接

`public/data/test.json`  是一组测试题

目录json编辑很简答了，看下json的结构就可以了解了。

测试题目前有四种，下边是一组测试题的案例：

    {
    "title": "题库的标题",
    "description": "题库的描述题库的描述题库的描述",
    "questions": [
            {
            "type": "单选题",
            "question": "如何开始学习JavaScript？",
            "options": ["死记硬背","疯狂刷题","勇于实践","埋头苦干"],
            "answer": "勇于实践"
            },
            {
            "type": "多选题",
            "question": "如何开始学习Python？",
            "options": ["死记硬背","疯狂刷题","勇于实践","埋头苦干"],
            "answer": ["疯狂刷题","勇于实践"]
            },
            {
            "type": "判断题",
            "question": "JavaScript是世界上最好的编程语言？",
            "answer": "错误"
            },
            {
            "type": "简答题",
            "question": "为什么叫JavaScript？",
            "answer": "JavaScript 在刚诞生的时候，它的名字叫 “LiveScript”。但是因为当时 Java 很流行，所以决定将一种新语言定位为 Java 的“弟弟”会有助于它的流行"
            }
        ]
    }


### 写在最后

JianCe检测 是我为了测试孩子学习情况所编写的小玩意，当然也可以用来检测其他任何类型知识的学习结果的。希望大家喜欢，欢迎提交代码。

JianCe是一个简简单单的学习结果检测的小工具，通过设置一组在线试题（题型包括：单选、多选、判断、简答）来检验学习结果。

JianCe 简测 简单的在线答题应用


这是一款适合程序员的简约blog。
本项目为[碎言静态博客](https://github.com/bosichong/suiyan.git)主题。

[碎言静态博客Gitee](https://gitee.com/J_Sky/suiyan)
[碎言静态博客GitHub](https://github.com/bosichong/suiyan.git)

### 效果展示

![](https://suiyan.cc/assets/images/2023/coding-blog.png)


### 技术框架

主题模板采用了jinja2的模板引擎，使用了Bootstrap 5.3 等框架，模板设计移动优先。


### 安装教程

1. 首先克隆下载本主题到碎言静态博客程序`theme`目录下。
2. 修改配置文件 `config.json`中的"theme": "coding_blog",即可启用。


### 运行预览

本地主题开发编写，推荐使用`Live Server`这个vscode得插件，非常方便。
在配置文件里修改：
"dev": 1,  # 调试模式，如果改为1，则使用"blog_test_url"来添加静态资源地址前缀，方便本地调试。

### 修改主题样式

主题采用jinja2模板引擎，在主题或是模板目录修改样式，一键生成页面，直接同步页面。
在jinja2 模板中使用`{{ 属性名称 }}`来调用。

### github pages

如何部署GitHub pages 搭建自己的博客，这里就不在详细介绍了，请参考下文。

[GitHub Pages 快速入门](https://docs.github.com/zh/pages/quickstart)

除了部署GitHub，也可以将静态文件部署到虚拟主机云服务器上，复制静态文件目录下的所有文件到你的站点目录下即可。

本主题下载地址：

[https://github.com/bosichong/coding_blog](https://github.com/bosichong/coding_blog)

coding_blog一款适合程序员的简约博客主题。主题模板采用了jinja2的模板引擎，使用了Bootstrap 5.3 等框架，模板设计移动优先。

JianCe 简测简单的在线答题应用

功能

安装依赖

启动

编译打包

添加和编辑题库

写在最后

相关文章