目 录CONTENT

文章目录

第一个vue前后端分离demo

phyger
2022-03-26 / 0 评论 / 0 点赞 / 1,327 阅读 / 1,580 字 / 正在检测是否收录...

项目效果

期望在自己创建的vue项目中定义自己的路由,自己的组件,实现前后端分离的小demo。让之前的学习能够更加贴近实战,对vue的前端开发流程有个清晰的了解。

项目准备

创建 vue 项目

cd到我们的工作路径下,使用vue ui打开vue项目管理器,点击创建,在此创建新项目

项目创建

输入项目名称,点击下一步

项目名称

选择预设环境,建议vue3,点击创建项目

预设环境

然后静静等待项目创建完成(视网络情况,大约 3-10 分钟)。

创建成功后默认进入创建的项目

启动 vue 项目

点击左侧导航栏的任务,选择 serve,点击启动(vue 自动编译并启动)。

任务启动(编译-->启动)

测试项目

打开 localhost:8080 查看项目首页

localhost:8080

开发自己的项目

前端

安装 vue-router 插件

vue ui 的项目主页,点击插件,点击安装 vue-router

elementUI和vue-router

安装完 vur-router 后,我们项目的 App.vue 会自动被刷新为 HomeAbout 两个 router-link。当我们点击 HomeAbout 两个链接,vue-router 会帮我们将请求分别路由到不同的组件中去。

创建我们自己的 router

1、先在首页添加我们自己的 router-link

router-link

2、在 views 中添加 mydemo 组件

添加视图

3、在 routerindex.js 中添加路由

添加路由

4、 访问主页,点击 mydemorouter-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请求后端

不出意外,axios 已经对后端发起了访问,但是是失败了,因为我们还没有启动后端服务。

后端

启动后端

启动后端

测试后端

后端接口就绪

联调

我们访问前端的 http://localhost:8080/#/mydemo 地址

跨域失败

因为跨域问题导致前端访问后端失败,我们修改下跨域配置。

修改后端跨域配置

修改 FastApi 项目的 main.py

FastApi的跨域配置

联调测试

再次访问前端接口:http://localhost:8080/#/mydemo

前后端联调成功

0

评论区