网络异常，图片无法展示
|
项目效果
期望在自己创建的vue项目中定义自己的路由，自己的组件，实现前后端分离的小demo。让之前的学习能够更加贴近实战，对vue的前端开发流程有个清晰的了解。
项目准备
创建vue项目
cd到我们的工作路径下，使用vue ui打开vue项目管理器，点击创建，在此创建新项目
网络异常，图片无法展示
|
输入项目名称，点击下一步
网络异常，图片无法展示
|
选择预设环境，建议vue3，点击创建项目
网络异常，图片无法展示
|
然后静静等待项目创建完成（视网络情况，大约3-10分钟）。
网络异常，图片无法展示
|
启动vue项目
点击左侧导航栏的任务，选择serve，点击启动（vue自动编译并启动）。
网络异常，图片无法展示
|
测试项目
打开localhost:8080查看项目首页
网络异常，图片无法展示
|
开发自己的项目
前端
安装vue-router插件
在vue ui的项目主页，点击插件，点击安装vue-router
网络异常，图片无法展示
|
安装完vur-router后，我们项目的App.vue会自动被刷新为Home和About两个router-link。当我们点击Home和About两个链接，vue-router会帮我们将请求分别路由到不同的组件中去。
创建我们自己的router
1、先在首页添加我们自己的router-link
网络异常，图片无法展示
|
2、在views中添加mydemo组件
网络异常，图片无法展示
|
3、在router的index.js中添加路由
网络异常，图片无法展示
|
4、 访问主页，点击mydemo的router-link查看效果
网络异常，图片无法展示
|
定义对后端的请求
1、安装axios
cnpm i axios -S 复制代码
2、配置axios
在main.js中导入axios并修改默认URL。
import { createApp } from 'vue' import App from './App.vue' import router from './router' // 导入axios import axios from 'axios' // 设置默认baseURL axios.defaults.baseURL='http://localhost:2345' // 创建vue3实例 const Vapp = createApp(App); // 启用router插件 Vapp.use(router) // 配置vue启用axios Vapp.config.globalProperties.$axios = axios // 挂载 Vapp.mount('#app') 复制代码
3、在mydemo组件中使用axios
<template> <h1>这里是mydemo</h1> {{ info }} <h1>{{ infos }}</h1> </template> <script> export default { data() { return { infos: [{id:1,name:'phyger'}], info: "hello vue..." } }, mounted() { this.showinfo(); }, methods: { showinfo(){ this.$axios.get('/test/info') .then(response=>{ this.infos=response.data; console.log(response); console.log(this.infos); }) ,err=>{ console.log(err); }; }, }, } </script> <style> </style> 复制代码
4、前端测试
我们尝试访问mydemo
网络异常，图片无法展示
|
不出意外，axios已经对后端发起了访问，但是是失败了，因为我们还没有启动后端服务。
后端
启动后端
网络异常，图片无法展示
|
测试后端
网络异常，图片无法展示
|
联调
我们访问前端的 http://localhost:8080/#/mydemo 地址
网络异常，图片无法展示
|
因为跨域问题导致前端访问后端失败，我们修改下跨域配置。
修改后端跨域配置
修改FastApi项目的main.py
网络异常，图片无法展示
|
联调测试
再次访问前端接口：http://localhost:8080/#/mydemo
网络异常，图片无法展示
|
