{"id":18877859,"url":"https://github.com/xyjigsaw/fullstackdemo","last_synced_at":"2026-04-29T20:05:49.239Z","repository":{"id":204700516,"uuid":"712470261","full_name":"xyjigsaw/FullStackDemo","owner":"xyjigsaw","description":"Full Stack Demo Tutorial","archived":false,"fork":false,"pushed_at":"2023-11-01T12:55:37.000Z","size":277,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-31T04:40:53.007Z","etag":null,"topics":["fastapi","fullstack","vue"],"latest_commit_sha":null,"homepage":"https://www.omegaxyz.com/2023/11/01/fullstackdemo/","language":"PLpgSQL","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xyjigsaw.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-10-31T14:31:47.000Z","updated_at":"2023-11-03T12:47:15.000Z","dependencies_parsed_at":null,"dependency_job_id":"df487f2e-c627-4c24-9c0c-709b19cec830","html_url":"https://github.com/xyjigsaw/FullStackDemo","commit_stats":null,"previous_names":["xyjigsaw/fullstackdemo"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/xyjigsaw/FullStackDemo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xyjigsaw%2FFullStackDemo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xyjigsaw%2FFullStackDemo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xyjigsaw%2FFullStackDemo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xyjigsaw%2FFullStackDemo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xyjigsaw","download_url":"https://codeload.github.com/xyjigsaw/FullStackDemo/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xyjigsaw%2FFullStackDemo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32441481,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-29T18:12:22.909Z","status":"ssl_error","status_checked_at":"2026-04-29T18:11:33.322Z","response_time":110,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fastapi","fullstack","vue"],"created_at":"2024-11-08T06:22:21.790Z","updated_at":"2026-04-29T20:05:44.230Z","avatar_url":"https://github.com/xyjigsaw.png","language":"PLpgSQL","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FullStackDemo\nFull Stack Demo Tutorial\n\n\n## 前端\n\n1. 下载安装npm（前端必备软件管理工具）\n    \n    `npm`（Node Package Manager）是一个基于Node.js的包管理工具，主要用于JavaScript编程语言的包管理。它是全球最大的软件注册中心，包含了超过800,000个代码包，每星期大约有30亿次的下载量。\n    \n2. 创建一个vue项目\n    \n    ```bash\n    npm install -g vue-cli\n    \n    vue init webpack project_name\n    \n    npm install axios -S\n    npm i element-ui -S\n    ```\n    \n    vue-cli: vue脚手架工具\n    \n    axios: 访问后端api工具\n    \n    element-ui: 后端UI工具\n\n    需要注意的时，在本项目下，由于已经创建好了，可以**直接**键入以下命令，下载所需的包：\n\n    ```bash\n    npm install\n    ```\n    \n3. 在main.js文件中加入\n    \n    ```jsx\n    import \"element-ui/lib/theme-chalk/index.css\";\n    import axios from \"axios\";\n    \n    Vue.use(ElementUI);\n    ```\n    \n4. 在vue文件中写一个接口连到后端\n    \n    这部分主要写到js部分，示例代码：\n    \n    data部分是当前页面所需的所有变量，methods部分是所有函数方法，如果需要在函数中调用data中的变量，需要指定this。\n    \n    ```jsx\n    \u003cscript\u003e\n    import axios from \"axios\";\n    export default {\n      name: 'HelloWorld',\n      data () {\n        return {\n          msg: 'Welcome to Your Vue.js App',\n          tableData: [],\n        }\n      },\n    \n      methods: {\n        fetch_paper() {\n          const limit=8\n          const param = `num=${limit}`;\n          // 在这里调接口\n          axios\n            .get(`http://127.0.0.1:8000/paper?${param}`)\n            .then((res) =\u003e {\n              this.tableData = res.data.data;\n              this.time = res.data.time;\n              console.log(this.tableData, this.time);\n            })\n            .catch(() =\u003e {\n              this.$notify({title: \"Error\", message: \"Please try again!\", type: \"error\",});\n            });\n    \n        },\n      }\n    }\n    \u003c/script\u003e\n    ```\n\n5. 调整前端样式\n    \n    为了快速开发，我们采用[elementUI](https://element.eleme.io/)来美化前端，这部分大家不需要花太多时间精力，可以直接找模板套用即可。\n    \n6. 测试环境中运行\n    \n    ```bash\n    npm run dev\n    ```\n\n    \n\n更多内容参考：[vue-manual-omegaxyz](https://www.omegaxyz.com/2020/11/30/vue-manual/)\n\n## 后端\n\n1. 安装Python包\n    \n    利用fastapi作为快速的后端部署，如果需要连接数据库，则使用pymysql，如果数据库操作比较多，建议使用aiomysql来异步操作数据库。\n    \n    ```bash\n    pip install fastapi\n    pip install uvicorn\n    pip install pymysql\n    ```\n    \n2. 示例代码：\n    \n    ```python\n    import uvicorn\n    from fastapi import FastAPI, Query, Form, APIRouter, File, UploadFile\n    from fastapi.middleware.cors import CORSMiddleware\n    import time\n    \n    app = FastAPI(\n        title=\"demo\",\n        docs_url='/api/v1/docs',\n        redoc_url='/api/v1/redoc',\n        openapi_url='/api/v1/openapi.json'\n    )\n    \n    router = APIRouter()\n    \n    @router.get('/paper')\n    async def fetch_paper(\n        num: int = Query(..., description='returned paper num', example='10')\n    ):\n        start = time.time()\n        print(num)\n        return {'time': time.time() - start, 'data': num}\n    \n    @router.post('/add_paper')\n    async def add_paper(\n            name: str = Form(..., description='paper name', example='Attention is all you need'),\n            info: str = Form(..., description='paper info', example='NIPS 2017')\n    ):\n        start = time.time()\n        print(name, info)\n        return {'time': time.time() - start}\n    \n    @router.put('/update_paper')\n    async def update_paper(\n            p_id: str = Form(..., description='paper id', example='1234'),\n    ):\n        start = time.time()\n        print(p_id)\n        return {'time': time.time() - start}\n    \n    @router.delete('/delete_paper')\n    async def delete_paper(\n            p_id: str = Query(..., description='paper is', example='1234')\n    ):\n        start = time.time()\n        print(p_id)\n        return {'time': time.time() - start}\n    \n    app.include_router(router)\n    \n    app.add_middleware(\n        CORSMiddleware,\n        allow_origins=[\"*\"],\n        allow_credentials=True,\n        allow_methods=[\"*\"],\n        allow_headers=[\"*\"],\n    )\n    \n    if __name__ == '__main__':\n        uvicorn.run(app=app, host=\"127.0.0.1\", port=8000, workers=1)\n    ```\n    \n3. 启动程序\n    \n    ```bash\n    python apiCore.py\n    ```\n    \n    或\n    \n    ```bash\n    uvicorn apiCore:app --reload --port 9918 --host 0.0.0.0\n    ```\n    \n4. 接口调试\n    \n    可以采用fastapi自带的一个前端接口进行调试\n    \n    进入http://127.0.0.1:8000/api/v1/docs 页面调试\n    \n    更多内容参考：[fastapi-omegaxyz](https://www.omegaxyz.com/2020/08/18/restful-fastapi/?highlight=fastapi)\n    \n\n## 数据库\n\n1. 下载并安装MySQL数据库以及数据库管理工具，建议使用navicat\n2. 在MySQL中导入数据\n    \n    这里可以使用示例数据paper_db.sql（包含少量的paper信息），直接用navicat导入这个库即可（需要在你创建的数据库下）\n    \n3. 后端链接数据库并在数据库中操作（这里的示例是从数据库中取数据）\n    \n    ```python\n    import pymysql\n    \n    # 连接配置信息\n    config = {\n        'host': 'localhost',\n        'port': 3306,  # MySQL默认端口\n        'user': 'root',  # mysql默认用户名\n        'password': '12345678',\n        'db': 'paper_db',  # 数据库\n        'charset': 'utf8mb4',\n        'cursorclass': pymysql.cursors.DictCursor,\n    }\n    \n    def db_get_paper(num=10):\n    \t\t# am_paper为paper_db中的一个表\n        try:\n            con = pymysql.connect(**config)\n            sql = \"SELECT * FROM am_paper limit %d\" % num\n            with con.cursor() as cursor:\n                cursor.execute(sql)\n                result = cursor.fetchall()\n                con.close()\n            return result\n        except Exception as e:\n            print(e)\n            return []\n    ```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxyjigsaw%2Ffullstackdemo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxyjigsaw%2Ffullstackdemo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxyjigsaw%2Ffullstackdemo/lists"}