全栈开发与快速部署Demo

文章目录

框架

我们采用的是前后端分离的框架FastAPI + Vue。

优点

1.职责分明：前端负责展示和交互，后端负责数据处理和业务逻辑，各自开发独立，不会相互影响。

2.提高开发效率：前后端可以并行开发，大大减少了项目的开发周期。

3.提高可维护性：由于前后端分离，如果需要修改UI或者后端逻辑，只需要修改对应的部分即可，不会影响到整个系统。

4.技术栈灵活：前端和后端可以选择各自适合的技术栈进行开发，满足项目的个性化需求。

5.方便扩展：前后端通过API进行通信，可以方便地进行系统的扩展，比如添加移动端、小程序等。

6.适应微服务架构：在微服务架构中，前后端分离可以更好地对各个服务进行管理和维护。

前端

1. 下载安装npm（前端必备软件管理工具）

npm（Node Package Manager）是一个基于Node.js的包管理工具，主要用于JavaScript编程语言的包管理。它是全球最大的软件注册中心，包含了超过800,000个代码包，每星期大约有30亿次的下载量。

2. 创建一个vue项目

npm install -g vue-cli

vue init webpack projec_name

npm install axios -S

npm i element-ui -S

vue-cli: vue脚手架工具
axios: 访问后端api工具
element-ui: 后端UI工具

需要注意的时，在本项目下，由于已经创建好了，可以直接键入以下命令，下载所需的包：

1	npm install

3. 在main.js文件中加入

import "element-ui/lib/theme-chalk/index.css";

import axios from "axios";

Vue.use(ElementUI);

4. 在vue文件中写一个接口连到后端

这部分主要写到js部分，示例代码：

data部分是当前页面所需的所有变量，methods部分是所有函数方法，如果需要在函数中调用data中的变量，需要指定this。

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",});

});

}

</script>

5. 调整前端样式

为了快速开发，我们采用elementUI来美化前端，这部分大家不需要花太多时间精力，可以直接找模板套用即可。

6. 测试环境中运行

1	npm run dev

更多内容可以参考：

Vue快速开发注记

后端

1. 安装Python包

利用fastapi作为快速的后端部署，如果需要连接数据库，则使用pymysql，如果数据库操作比较多，建议使用aiomysql来异步操作数据库。

pip install fastapi

pip install uvicorn

pip install pymysql

2. 示例代码：

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)

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. 启动程序

1	python apiCore.py

或者

1	uvicorn apiCore:app --reload --port 9918 --host 0.0.0.0

4. 接口调试

可以采用fastapi自带的一个前端接口进行调试

进入http://127.0.0.1:8000/api/v1/docs 页面调试

数据库

1. 下载并安装MySQL数据库以及数据库管理工具，建议使用navicat

2. 在MySQL中导入数据

这里可以使用示例数据paper_db.sql（包含少量的paper信息），直接用navicat导入这个库即可（需要在你创建的数据库下）

3. 后端链接数据库并在数据库中操作（这里的示例是从数据库中取数据）

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 []

上述代码和Demo可以在Github-FullStackDemo中找到

全栈开发与快速部署Demo

文章目录

框架

前端

后端

数据库

大模型AlpacaFarm分析

NLG文本评估任务或许并不需要真值或参考文本

大模型中的RepE表征工程

大模型也是一种优化器（LLM as Optimizer）

全栈开发与快速部署Demo

学术idea自动发现与生成

自回归语言模型（language model）Python实现

粉丝期待的三体电影宇宙（近四十部电影与电视剧集）

基于历史对比学习的时序知识图谱推理

泰拉瑞亚Terriaria快速部署Linux服务器

2 评论

留下评论取消回复

文章目录

框架

前端

后端

数据库

相关文章

2 评论

留下评论取消回复