Full Stack Demo Tutorial
-
下载安装npm(前端必备软件管理工具)
npm
(Node Package Manager)是一个基于Node.js的包管理工具,主要用于JavaScript编程语言的包管理。它是全球最大的软件注册中心,包含了超过800,000个代码包,每星期大约有30亿次的下载量。 -
创建一个vue项目
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工具
需要注意的时,在本项目下,由于已经创建好了,可以直接键入以下命令,下载所需的包:
npm install
-
在main.js文件中加入
import "element-ui/lib/theme-chalk/index.css"; import axios from "axios"; Vue.use(ElementUI);
-
在vue文件中写一个接口连到后端
这部分主要写到js部分,示例代码:
data部分是当前页面所需的所有变量,methods部分是所有函数方法,如果需要在函数中调用data中的变量,需要指定this。
<script> 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>
-
调整前端样式
为了快速开发,我们采用elementUI来美化前端,这部分大家不需要花太多时间精力,可以直接找模板套用即可。
-
测试环境中运行
npm run dev
更多内容参考:vue-manual-omegaxyz
-
安装Python包
利用fastapi作为快速的后端部署,如果需要连接数据库,则使用pymysql,如果数据库操作比较多,建议使用aiomysql来异步操作数据库。
pip install fastapi pip install uvicorn pip install pymysql
-
示例代码:
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)
-
启动程序
python apiCore.py
或
uvicorn apiCore:app --reload --port 9918 --host 0.0.0.0
-
接口调试
可以采用fastapi自带的一个前端接口进行调试
进入http://127.0.0.1:8000/api/v1/docs 页面调试
更多内容参考:fastapi-omegaxyz
-
下载并安装MySQL数据库以及数据库管理工具,建议使用navicat
-
在MySQL中导入数据
这里可以使用示例数据paper_db.sql(包含少量的paper信息),直接用navicat导入这个库即可(需要在你创建的数据库下)
-
后端链接数据库并在数据库中操作(这里的示例是从数据库中取数据)
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 []