JAVA-VUE

搭建项目

1.创建项目

安装三个包
npm install vue-router

  npm install axios

npm install element-plus --save

2.vue项目中src文件夹下的文件夹用途介绍

后端主要掌握views与router的配置

异步请求的应用场景

• 从服务器获取数据: 例如，向服务器发起请求获取用户信息、文章内容等。
• 加载外部资源: 例如，动态加载图像、视频或其他资源。
• 处理用户输入: 例如，用户输入表单数据时，异步验证数据有效性。

我的个人小总结：仅供参考

首先封装一个用于发起HTTP请求的API的js文件

import http from '../util/http.js';

const API={

    get:(url)=>{return http({url:url,method:'get'})}

};

export default API;

API是我们自已定义的对象，它包含了一个get方法，用于发起get请求

调用 http 函数，接收一个url参数，将请求的 url 和方法 GET 作为参数传递。http 函数应该返回一个 Promise 对象，表示请求的结果

然后导出，使得其他模块可以导入并使用该对象。

然后在views下创建页面视图文件vue

views文件夹下存储的vue组件都是web端上的一个界面

vue文件通常包含三个部分

<script></script>    <template></template>    <style></style>

<script></script> ：定义组件的逻辑部分，包括数据、方法、生命周期钩子等。<script setup>使用 Composition API 提供的语法糖，使得编写逻辑代码更简洁。

 <template></template> ：定义组件的视图结构，通过 Vue 的模板语法和指令来展示数据和处理事件。

<style></style>：定义组件的样式，支持局部样式（使用 scoped）和全局样式

在router下定义一个路由实例，在访问path时会加载视图vue

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

const router=createRouter(

    {

    history:createWebHashHistory(),

    routes:[

        {path:'/easy',

        component:()=>import("../views/easy.vue"),

        children:[{path:'/stafflist',component:()=>import("../views/stafflist.vue")}]

        }

    ]

    }

);

export default router;

//定义了一个路由实例router  它使得在访问/easy时会加载easy.vue视图，而在访问/easy/stafflist时会动态加载stafflist.vue视图

//导出该路由实例router  ，导出的实例可在入口文件main.js中调用

//import router from './router'  

//createApp(App).use(ElementPlus).use(router).mount('#app')

//在main.vue中使用 <router-view></router-view>加载导出的路由实例视图

{/* <script setup>

</script>

<template>

  <router-view></router-view>

</template>

<style scoped>

</style> */}

添加到根组件与入口文件

将路由视图 <router-view></router-view>添加到根组件App.vue中，使得可以访问地址加载视图

在入口文件main.js中导入路由实例

main.js:

import { createApp } from 'vue'

import App from './App.vue'

import router from './router'

import ElementPlus from 'element-plus'

import 'element-plus/dist/index.css'

createApp(App).use(ElementPlus).use(router).mount('#app')

App.vue：

<script setup>

</script>

<template>

  <router-view></router-view>

</template>

<style scoped>

</style>

其他：

util下的js文件不需要我们会配置，作用是封装一个通用的 HTTP 请求函数，简化发送网络请求的过程，并自动处理一些常见的配置和错误处理。

关于视图中组件的样式可以参考Table 表格 | Element Plus (element-plus.org)

vue文件可有子视图（vue），在图视图中某个组件上添加const即可加载子视图

vite.config.js文件：

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/

export default defineConfig({

  plugins: [vue()],

  server:{

    // 配置vite冷启动项目自动使用浏览器访问首页

    open:true,

    proxy: {  

      '/api': {

        target: 'http://localhost:8080',

        changeOrigin: true,

        rewrite: (path) => path.replace(/^\/api/, ''),

      },

    }

  }

})

这段代码是一个 Vite 配置文件，它用于配置 Vite 构建工具，以支持 Vue.js 项目的开发和构建。Vite 是一个现代的前端构建工具，提供了快速的构建和热重载功能

• open: true:

  • 作用: 启动开发服务器时，自动在浏览器中打开应用程序。这样可以节省手动打开浏览器和访问应用的步骤。

• proxy:

  • 作用: 配置代理，以便在开发模式下将 /api 前缀的请求转发到目标服务器（例如，后端 API 服务器）。这对于解决跨域请求问题非常有用。

  • target: 'http://localhost:8080':

    • 作用: 将以 /api 开头的请求代理到 http://localhost:8080。这个目标地址通常是后端服务器的地址。

  • changeOrigin: true:

    • 作用: 修改请求头中的 Origin 字段，使其匹配目标服务器的地址。这有助于避免跨域问题。

  • rewrite: (path) => path.replace(/^\/api/, ''):

    • 作用: 修改请求路径，将 /api 前缀从路径中去除。这样，当请求被转发到目标服务器时，实际的请求路径将不包含 /api 前缀。例如，请求 /api/users 会被重写为 /users 并发送到 http://localhost:8080。