Shulou(Shulou.com)06/02 Report--

Editor to share with you how to achieve FastApi+Vue+LayUI front-end separation, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!

Preface

In the previous Api development, we can already implement it very well using FastApi. However, in practice, we usually recommend the separation of front and rear projects. Today we will use FastApi+Vue+LayUI to do a front-and back-end separate Demo.

Project design

Back end

At the back end, we use FastApi to define a route in the new test view, register it in app, and define an interface in the test view to simulate reading data from the database for front-end call rendering.

Code

Test.py

From fastapi import FastAPI,Depends,Header,HTTPException,APIRouterfrom fastapi.param_functions import Bodyfrom starlette.requests import Requestfrom starlette.templating import Jinja2Templatesfrom starlette import statusimport uvicornfrom deta import Detafrom fastapi.responses import StreamingResponsefrom fastapi.responses import JSONResponse# instantiation router router = APIRouter () templates = Jinja2Templates ('templates') # Note The view here uses router to declare the request method & URI@router.get ('/ info') def user_list (): # vue response data items = [{'id':'1','name':'phyger'}, {' id':'2','name':'fly'}, {'id':'3','name':'enheng'} ] return JSONResponse (content=items) @ router.get ('/') def welcome (): return "this is a test route" actually The home.html here also needs the front-end service to render to the user, but in order to facilitate the demonstration, we did not start the front-end server and directly wrote the front-end code in the home.html. In fact, when the user requests / check, the front-end code will request the / info interface to obtain data, so as to realize the data rendering of the front-end page. @ router.get ('/ check') def home (request:Request): return templates.TemplateResponse (name='home.html',context= {'request':request,}) front end

At the front end, we directly import the JS of Vue, LayUI, Axios and the CDN resources of CSS. In the mount phase of the Vue instance, we use axios to call the backend API to get the data, and use the LayUI style to beautify the table elements.

Code

Home [[p.id]] [[p.name]] const Vapp = Vue.createApp ({data () {return {infos: [{id:1,name:'phyger'}]) Info: "hello vue..."}}, mounted () {this.showinfo () }, methods: {showinfo () {axios.get ('/ test/info') .then (response= > {this.infos=response.data; console.log (response); console.log (this.infos)) }), err= > {console.log (err);};},}) Vapp.config.compilerOptions.delimiters = ['[[',']]'] Vapp.mount ('# app') run the project

Start the FastApi back-end server and access the / test/check interface.

Quan A

Q: why is there always a Temporary Redirect redirection on the request / info interface?

A: the reason is that when we define the FastApi interface, the format of uri is not standard, and the end of uri does not need /. If you add /, and we use the browser to access uri, the browser will ignore the ending /, and FastApi will check and redirect the request without / to the view function with / defined by us.

The above is all the content of the article "how to separate the front and back end of FastApi+Vue+LayUI". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.