自行建造网站,高质量视频素材网站,简述建设网站的步骤6,网页设计效果图及代码前后端分离项目的基础#xff1a;
前后端跨域访问
vite.config.js中加入 // 1.为什么要跨域
//因为浏览器的同源策略,不同站点之间访问需要跨域
//实现跨域的方式#xff1a;server: {proxy: {// 假设要跨域访问的后端 API 地址以 /api 开头/api: { //表示拦截以/api开头的… 前后端分离项目的基础
前后端跨域访问
vite.config.js中加入 // 1.为什么要跨域
//因为浏览器的同源策略,不同站点之间访问需要跨域
//实现跨域的方式server: {proxy: {// 假设要跨域访问的后端 API 地址以 /api 开头/api: { //表示拦截以/api开头的请求路径target: http://localhost:8089/, // 后端服务的实际地址changeOrigin: true, //是否开启跨域rewrite: (path) path.replace(/^\/api/, ),//把/api变成空字符串},},}, 完整vite.config.js文件
import { fileURLToPath, URL } from node:urlimport { defineConfig } from vite
import vue from vitejs/plugin-vue// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),],resolve: {alias: {: fileURLToPath(new URL(./src, import.meta.url))}},// 1.为什么要跨域
//因为浏览器的同源策略,不同站点之间访问需要跨域
//实现跨域的方式server: {proxy: {// 假设要跨域访问的后端 API 地址以 /api 开头/api: { //表示拦截以/api开头的请求路径target: http://localhost:8089/, // 后端服务的实际地址changeOrigin: true, //是否开启跨域rewrite: (path) path.replace(/^\/api/, ),//把/api变成空字符串},},},
})App.vue文件
templatebutton clickhandleClick跨域请求/button
/templatescript setup
import axios from axios; // 正确从 axios 包导入 axios //将axios请求写在方法里面,通过点击事件调用方法向后端拿数据function handleClick(){axios.get(api/Axios).then(Response{console.log(Response.data);}).catch(error{console.log(Error fetching data:,error);},)}
/scriptstyle scoped/styleJava中的servlet 服务
需要在maven的pom.xml中导入fastjson dependencygroupIdcom.alibaba/groupIdartifactIdfastjson/artifactIdversion1.2.76/version/dependency
package Study.day08;import com.alibaba.fastjson.JSON;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;WebServlet(/Axios)
public class Axios extends HttpServlet{Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {Student studentnew Student(张三,男,23);req.setCharacterEncoding(utf-8);resp.setContentType(text/json; charsetutf-8);resp.getWriter().println(JSON.toJSON(student));}
}后端服务访问页面 前端成功拿到后端数据
