Java学习Day20 - 技术栈

Vue学习

nodejs的安装与环境配置

1.直接去官网下载合适版本的nodejs( https://nodejs.org/zh-cn/download/prebuilt-installer)

2.解压下载的安装包，将文件路径配置到系统变量的path中，然后确认后退出。可以使用终端来查看安装的nodejs版本。使用win+R快捷键进入cmd终端，输入npm -v查看

3.使用npm config set registry https://mirrors.huaweicloud.com/repository/npm/ 选择华为的镜像源。配置完可以使用npm config get registry命令查看选择的镜像源。

vue项目的创建与配置

1.创建一个vite项目，先准备好一个文件夹用来存放你的Vue项目，在这个文件夹处点击导航栏输入cmd，使用npm create vite@latest命令创建项目。先在project name后写上项目的名称，回车后用上下键选中Vue，最后选择项目编写语言，回车项目就创建好了。

2.打开vscode,选择打开文件夹，将刚才创建的项目文件选中，打开后就有了基本的Vue结构。

3.为了正常使用Vue开发前端页面，需要运行下列三个安装命令，

npm install element-plus --save

npm install vue-router

npm install axios

4.在项目中进行简单的的配置，新建一些文件夹和一些js文件，具体配置如下：

（1）viteconfig.js这个 Vite 配置文件为 Vue.js 项目设置了基本的开发环境和代理功能。它确保开发过程中可以自动打开浏览器并处理跨域问题

javascript 复制代码

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/, ''),
      },
    }
  }
})

(2)api/index 封装了一个简单的 HTTP GET 请求接口。

javascript 复制代码

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

const API={
    get:(url)=>{return http({url:url,method:'get'})}
};
export default API;

（3）util/http.js定义了一个封装了 axios 请求的函数，通常用于处理 HTTP 请求和响应。它主要负责在每次请求时添加 Authorization 头部，并处理请求的成功和失败情况。

javascript 复制代码

import axios from 'axios';

export default function (options) {
    //配置每次发送请求都从sessionStorage中获取名字叫token的数据,
    //添加到请求头部的Authorization属性中

    //Object.assign用于合并对象的数据
    options.headers = Object.assign(
        { Authorization: sessionStorage.getItem('token') },
        options.headers || {}
    );
    //axios()   返回一个promise对象，用于异步请求
    //options是一个对象，其中包含了许多用于配置请求的参数，
    //例如请求的url、请求方法（GET、POST等）、请求头等
    return axios(options)
        .then(({ status, data, statusText }) => {
            //该函数在请求成功并返回数据时被调用
            //status：HTTP状态码，例如200表示请求成功。
            //data：服务器返回的数据。
            // statusText：HTTP状态文本，例如"OK"表示请求成功。
            console.log(data);
            if (status == 200) {
                return data;
            } else {
                throw new Error(statusText);
            }
        })
       .catch(e=>{
            return Promise.reject(e);
            //return Promise.reject(e.message);
        });
}

（4）main.jsVue 3 项目的启动文件，完成了以下几个步骤：创建 Vue 应用实例。配置路由插件和 UI 组件库。将 Vue 应用挂载到 DOM 上。

javascript 复制代码

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(router).use(ElementPlus).mount('#app')

（5）router/index.js设置了一个 Vue Router 实例，用于定义应用的路由配置。它使用 hash 模式来处理路由，并定义了一个路由规则，将 /user 路径映射到 ../views/user.vue 组件。

javascript 复制代码

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

const router=createRouter(
    {
    history:createWebHashHistory(),
    routes:[
        {path:'/user',component:()=>import("../views/user.vue")}
    ]
    }
);

export default router;

(6)使用Element组件（https://element-plus.org/zh-CN/component/overview.html）来开发Vue项目的页面组件。

在vite.config.js 中添加（在4（1）中代码已添加）下两行代码。

import ElementPlus from 'element-plus'

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