Vue3+.NET6 actual combat flower network e-commerce project

1. The use of axios to read JSON data

1. Installation command: npm install axios --save

2. Create a new http folder in the src directory, and create a new index.ts file

3. Just import the method in http in the component that needs to be used

4. Bind JSON data to the carousel

2. Webapi creation-operation-and directory explanation for back-end development

1. Use vs2022 to create a webapi

2. Select.NET6.0

3. Choose Create with Controller

4. Select OpenApl

5. Create a directory

3. Webapi routing settings, and use swagger to view and debug interfaces

1. Create a new Image controller

2. Modify the default route

3. Add method to get image list

ImageUrl="Add the address of the picture inside", CourseUrl="Add the address of the page jump inside"

4. View and debug with Swagger

Debugging by adding breakpoints

Then run in the foreground

Then this screen appears

Then test step by step

3. Axios read webapi cross-domain problem analysis

1. Phenomenon: You can see that the webapi interface can be directly accessed through swagger or browser and returned, but when using axios, the browser reports an error.

2. Reason: The reason for the above phenomenon is that the browser is for javascript

4. Solving cross-domain problems

1. The backend solves the cross-domain problem (the solution backend sets the interface to allow cross-domain)

Add code in Program.cs (main function)

//Add cross-domain policy

builder.Services.AddCors(options =>

{

options.AddPolicy("CorsPolicy", opt => opt.AllowAnyOrigin().AllowAnyHeader().WithExposedHeaders("X-Pagination"));

});

//Use cross domain policy

app.UseCors("CorsPolicy");

2. Front-end solves cross-domain problems

The front end keeps the port consistent with the back end by setting a proxy

Add the following code under the vue.config.js file

Then restart the front-end project