https://github.com/xyjigsaw/fullstackdemo
Full Stack Demo Tutorial
https://github.com/xyjigsaw/fullstackdemo
fastapi fullstack vue
Last synced: about 2 months ago
JSON representation
Full Stack Demo Tutorial
- Host: GitHub
- URL: https://github.com/xyjigsaw/fullstackdemo
- Owner: xyjigsaw
- License: mit
- Created: 2023-10-31T14:31:47.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-11-01T12:55:37.000Z (over 2 years ago)
- Last Synced: 2025-05-31T04:40:53.007Z (about 1 year ago)
- Topics: fastapi, fullstack, vue
- Language: PLpgSQL
- Homepage: https://www.omegaxyz.com/2023/11/01/fullstackdemo/
- Size: 271 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# FullStackDemo
Full Stack Demo Tutorial
## 前端
1. 下载安装npm（前端必备软件管理工具）
`npm`（Node Package Manager）是一个基于Node.js的包管理工具，主要用于JavaScript编程语言的包管理。它是全球最大的软件注册中心，包含了超过800,000个代码包，每星期大约有30亿次的下载量。
2. 创建一个vue项目
```bash
npm install -g vue-cli
vue init webpack project_name
npm install axios -S
npm i element-ui -S
```
vue-cli: vue脚手架工具
axios: 访问后端api工具
element-ui: 后端UI工具
需要注意的时，在本项目下，由于已经创建好了，可以**直接**键入以下命令，下载所需的包：
```bash
npm install
```
3. 在main.js文件中加入
```jsx
import "element-ui/lib/theme-chalk/index.css";
import axios from "axios";
Vue.use(ElementUI);
```
4. 在vue文件中写一个接口连到后端
这部分主要写到js部分，示例代码：
data部分是当前页面所需的所有变量，methods部分是所有函数方法，如果需要在函数中调用data中的变量，需要指定this。
```jsx
import axios from "axios";
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App',
tableData: [],
}
},
methods: {
fetch_paper() {
const limit=8
const param = `num=${limit}`;
// 在这里调接口
axios
.get(`http://127.0.0.1:8000/paper?${param}`)
.then((res) => {
this.tableData = res.data.data;
this.time = res.data.time;
console.log(this.tableData, this.time);
})
.catch(() => {
this.$notify({title: "Error", message: "Please try again!", type: "error",});
});
},
}
}
```
5. 调整前端样式
为了快速开发，我们采用[elementUI](https://element.eleme.io/)来美化前端，这部分大家不需要花太多时间精力，可以直接找模板套用即可。
6. 测试环境中运行
```bash
npm run dev
```
更多内容参考：[vue-manual-omegaxyz](https://www.omegaxyz.com/2020/11/30/vue-manual/)
## 后端
1. 安装Python包
利用fastapi作为快速的后端部署，如果需要连接数据库，则使用pymysql，如果数据库操作比较多，建议使用aiomysql来异步操作数据库。
```bash
pip install fastapi
pip install uvicorn
pip install pymysql
```
2. 示例代码：
```python
import uvicorn
from fastapi import FastAPI, Query, Form, APIRouter, File, UploadFile
from fastapi.middleware.cors import CORSMiddleware
import time
app = FastAPI(
title="demo",
docs_url='/api/v1/docs',
redoc_url='/api/v1/redoc',
openapi_url='/api/v1/openapi.json'
)
router = APIRouter()
@router.get('/paper')
async def fetch_paper(
num: int = Query(..., description='returned paper num', example='10')
):
start = time.time()
print(num)
return {'time': time.time() - start, 'data': num}
@router.post('/add_paper')
async def add_paper(
name: str = Form(..., description='paper name', example='Attention is all you need'),
info: str = Form(..., description='paper info', example='NIPS 2017')
):
start = time.time()
print(name, info)
return {'time': time.time() - start}
@router.put('/update_paper')
async def update_paper(
p_id: str = Form(..., description='paper id', example='1234'),
):
start = time.time()
print(p_id)
return {'time': time.time() - start}
@router.delete('/delete_paper')
async def delete_paper(
p_id: str = Query(..., description='paper is', example='1234')
):
start = time.time()
print(p_id)
return {'time': time.time() - start}
app.include_router(router)
app.add_middleware(
CORSMiddleware,
allow_origins=["*"],
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)
if __name__ == '__main__':
uvicorn.run(app=app, host="127.0.0.1", port=8000, workers=1)
```
3. 启动程序
```bash
python apiCore.py
```
或
```bash
uvicorn apiCore:app --reload --port 9918 --host 0.0.0.0
```
4. 接口调试
可以采用fastapi自带的一个前端接口进行调试
进入http://127.0.0.1:8000/api/v1/docs 页面调试
更多内容参考：[fastapi-omegaxyz](https://www.omegaxyz.com/2020/08/18/restful-fastapi/?highlight=fastapi)
## 数据库
1. 下载并安装MySQL数据库以及数据库管理工具，建议使用navicat
2. 在MySQL中导入数据
这里可以使用示例数据paper_db.sql（包含少量的paper信息），直接用navicat导入这个库即可（需要在你创建的数据库下）
3. 后端链接数据库并在数据库中操作（这里的示例是从数据库中取数据）
```python
import pymysql
# 连接配置信息
config = {
'host': 'localhost',
'port': 3306, # MySQL默认端口
'user': 'root', # mysql默认用户名
'password': '12345678',
'db': 'paper_db', # 数据库
'charset': 'utf8mb4',
'cursorclass': pymysql.cursors.DictCursor,
}
def db_get_paper(num=10):
# am_paper为paper_db中的一个表
try:
con = pymysql.connect(**config)
sql = "SELECT * FROM am_paper limit %d" % num
with con.cursor() as cursor:
cursor.execute(sql)
result = cursor.fetchall()
con.close()
return result
except Exception as e:
print(e)
return []
```