从0开始边做边学，用vue和python做一个博客，非规范化项目，怎么简单怎么弄，跑的起来有啥毛病解决啥毛病（二）

开始设计主页

大概得功能页也就这样了，先不考虑UI的美化了，之后找个专业UI再重新设计。
在这里插入图片描述
这个是首页的样子，接下来就涉及到点击文章需要跳转到详情页了，这时候就涉及到vue-router了

vue-router安装配置

一、安装vue-router

npm install vue-router@4

在这里插入图片描述

二、创建路由实例

在src中新建一个文件夹router，然后再创建一个index.js，里面先复制官方的路由实例代码
在这里插入图片描述

import { createMemoryHistory, createRouter } from 'vue-router'

import HomeView from './HomeView.vue'
import AboutView from './AboutView.vue'

const routes = [
  { path: '/', component: HomeView },
  { path: '/about', component: AboutView },
]

const router = createRouter({
  history: createMemoryHistory(),
  routes,
})

因为我的这个现在只有一个home.vue文件做主页，所以引入组件那些就需要改成我的，改完之后这样
在这里插入图片描述

三、注册路由插件

在这里插入图片描述找到项目的main.js
现在是这样

改完这样：

四、修改一下

这个时候按照官方做的话，会缺点东西，首先是router/index.js中需要在最后放一行

export default router

然后再main.js中

import router from './router'

五、把路由配置用出来

在app.vue中放入这个路由的标签
在这里插入图片描述
接下来我们测试下不同路径的路由切换

发现不论输入那个地址都会只显示home的主页组件，问题就在router/index.js中的这个

把createMemoryHistory改成createWebHistory就ok了，具体原因也不看了，反正是好用就行。
到此路由的配置就结束了。

使用vue-router页面跳转

在home页面实现点击文章然后跳转到文章详情页
首先导入router实例

import { useRouter, useRoute } from 'vue-router'

然后实例化

const router = useRouter()

然后通过router.push进行路由跳转

function clickarticle(id) {
  console.log(`点击文章：${id}`)
  router.push('/article')
}

然后绑定click点击事件
在这里插入图片描述
就可以实现点击文章卡片跳转到文章详情页了，但是在主页跳转到文章详情的话需要携带文章id才可以，就涉及到传值跳转了。

传值跳转
在这里插入图片描述
在路由路径后面拼接上id，在router/index.js中增加文章详情带id的路径

然后新建一个article.vue用来做文章详情页

这样，在首页点击的时候，详情页的控制台就可以打印出来文章详情传过来的id了，就可以用这个id去请求后端接口获取文章内容了。
所以下一步就是需要从后端进行接口请求数据了。

axios安装配置使用

在这里插入图片描述
安装axios之后，在文章详情页中开始实例使用一下

import axios from 'axios'  //导入axios
// 为给定 ID 的 文章详情 创建请求
axios.get('http://127.0.0.1:8000/article/'+id)
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

然后在首页点击到详情页的时候会自动向http://127.0.0.1:8000这个地址发送这个get请求，但是现在就会发现请求可以正常发送但是还会报错
在这里插入图片描述

Axios请求报错：

Access to XMLHttpRequest at ‘http://127.0.0.1:8000/article/1’ from origin ‘http://localhost:5173’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
在这里插入图片描述
这就涉及到一个配置项了，叫跨域，因为请求的地址端口和vue项目的地址不同，所以就会有这个。
前端和后端进行配置都能实现，因为现在没设计后端内容，所以就在前端操作，首先进到vite.config.js

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:8000',
        changeOrigin: true,
      },
    },
  },
   plugins: [vue()]

加上这一段代码之后，意思就是所有/api前缀的请求都会转发到http://127.0.0.1:8000这个地址，但是在前端页面中显示还是请求本地vue项目端口的地址。
就像在网页中F12控制台中显示的在这里插入图片描述
但是实际的请求是http://127.0.0.1:8000，通过这个代理操作，前端网页就认为都是同一个域服务器了，就没有跨域问题了，数据就可以正常请求了。