VUE学习-day20

news2024/12/23 23:21:12

VUE学习-day20

1. 下载与安装

1.1 安装Node.js

Node.js是一个免费、开源、跨平台的 JavaScript 运行时环境,它让开发人员能够创建服务器、Web 应用、命令行工具和脚本。

我们可以通过node.js来下载vue的组件和创建vue项目

下载安装教程:https://blog.csdn.net/2301_78542842/article/details/138344124

1.2 安装Vue

Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,可以高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。

下载安装教程:https://blog.csdn.net/2401_84254474/article/details/137691175

2. 创建vue项目

使用vite直接创建 vite是下一代前端开发与构建工具。

确保你安装了最新版本的 Node.js,并且你的当前工作目录正是打算创建项目的目录。在命令行中运行以下命令

npm create vite@latest

填写项目名,选择项目模板为vue,选择语言结构为JavaScript后就完成了vue项目的创建。

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

根据提示我们再输入以下命令,来安装所需要的依赖

npm install

最后我们输入以下命令来启动vue项目

npm run dev

访问给出的本地地址就完成了vue项目的创建

在这里插入图片描述

在这里插入图片描述

3. 下载所需的包

使用Vscode打开创建的vue项目的文件夹

打开Vscode的命令行,下载所需要用到的包,分别为Vue router,Axios和Element UI

npm install vue-router
npm install axios
npm install element-plus --save

Vue Router 是 Vue 官方的客户端路由解决方案。

客户端路由的作用是在单页应用 (SPA) 中将浏览器的 URL 和用户看到的内容绑定起来。当用户在应用中浏览不同页面时,URL 会随之更新,但页面不需要从服务器重新加载。

Vue Router 基于 Vue 的组件系统构建,你可以通过配置路由来告诉 Vue Router 为每个 URL 路径显示哪些组件。

Axios是一个基于Promise的JavaScript HTTP客户端,用于浏览器和Node.js环境。它可以发送HTTP请求并支持诸如请求和响应拦截、转换数据、取消请求以及自动转换JSON数据等功能。

Axios提供了一个简单而直观的API,使得在前端应用程序中进行HTTP通信变得更加容易。它可以与现代前端框架(如React、Vue.js和Angular)以及后端服务器(如Node.js)配合使用。

使用Axios可以发送各种类型的HTTP请求,如GET、POST、PUT、DELETE等。可以设置请求头、请求参数、超时时间,并且还可以通过拦截器在请求发送之前或响应返回之后对请求和响应进行处理。

一句话概括:Axios是一个基于Promise的JavaScript HTTP客户端,用于浏览器和Node.js环境,简化了前端应用程序中与服务器进行HTTP通信的过程。

Element UI是一个基于Vue.js的开源UI组件库,专为开发者提供了一套优雅而灵活的UI组件。它包含了各种常用的Web组件,如按钮、表单、导航等,以及高级组件,如日期选择器、对话框等。Element UI的设计风格简洁美观,易于定制,使其成为许多Vue.js项目的首选UI框架。

4. 项目搭建

在项目的src文件夹中创建router文件夹,再在router文件夹中创建index.js文件,在其中配置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;

path表示用户要访问的路径,component中的是文件路径,代表访问path路径时应该返回哪个vue文件

在项目的src文件夹中创建util文件夹,再在util文件夹中创建http.js文件,在其中配置如何获取后端传来的数据

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);
        });
}

在项目的src文件夹中创建api文件夹,再在api文件夹中创建index.js文件,在其中设置访问的方法和访问类型

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

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

export default API;

打开项目目录下的vite.config.js,配置后端访问路径为/api

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
//vite配置说明文档
export default defineConfig({
  plugins: [vue()],
  server:{
    // 配置vite冷启动项目自动使用浏览器访问首页
    open:true,
    proxy: {  
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    }
  }
})

在项目目录下的main.js中导入router和ElementPlus,并使用

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')

在项目目录下的App.vue的template标签中添加router-view标签,实现页面的动态切换

<script setup>
</script>

<template>
  <router-view></router-view>
</template>

<style scoped>
</style>

由此完成项目的搭建

5. 测试

在src目录下创建views文件夹,用来存放页面

在views文件夹中创建一个主页面easy.vue

<script setup></script>

<template>
    <div class="common-layout" style="height: 100%;">
        <el-container>
            <el-header>Header</el-header>
            <el-container>
                <el-aside width="200px"><el-menu active-text-color="#ffd04b" background-color="#545c64"
                        class="el-menu-vertical-demo" default-active="2" text-color="#fff" @open="handleOpen"
                        @close="handleClose" router="true">
                        <el-sub-menu index="1">
                            <template #title>
                                <el-icon>
                                    <location />
                                </el-icon>
                                <span>员工管理</span>
                            </template>
                            <el-menu-item-group title="Group One">
                                <el-menu-item index="1-1" route="stafflist">员工列表</el-menu-item>
                                <el-menu-item index="1-2">item two</el-menu-item>
                            </el-menu-item-group>
                            <el-menu-item-group title="Group Two">
                                <el-menu-item index="1-3">item three</el-menu-item>
                            </el-menu-item-group>
                            <el-sub-menu index="1-4">
                                <template #title>item four</template>
                                <el-menu-item index="1-4-1">item one</el-menu-item>
                            </el-sub-menu>
                        </el-sub-menu>
                        <el-menu-item index="2">
                            <el-icon><icon-menu /></el-icon>
                            <span>Navigator Two</span>
                        </el-menu-item>
                        <el-menu-item index="3" disabled>
                            <el-icon>
                                <document />
                            </el-icon>
                            <span>Navigator Three</span>
                        </el-menu-item>
                        <el-menu-item index="4">
                            <el-icon>
                                <setting />
                            </el-icon>
                            <span>Navigator Four</span>
                        </el-menu-item>
                    </el-menu></el-aside>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<style></style>

访问localhost:5173/#/easy如图所示

在这里插入图片描述

在views文件中创建stafflist.vue文件,用来访问后端数据,将数据加载到表单中

<script setup>
import { ref, onMounted } from 'vue'
import easyapi from '../api'
//定义绑定的数据
const tableData = ref([]);

onMounted(async function () {
    let result = await easyapi.get("api/staff") //http://localhost:8080/staff
    tableData.value = result.data;
})


</script>
<template>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="ID" width="180" />
        <el-table-column prop="code" label="编号" width="180" />
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="salary" label="薪资" />
    </el-table>
</template>
<style>
</style>

完成后,点击主页面中的员工列表,Main中的页面就会切换成stafflist页面,展示员工数据

在这里插入图片描述

6. 其他

setup script 是vue3的一个新的语法糖,用起来特别简单。只需要在script标签中加上setup 关键字。

<script setup>
    export default {
        ...
    }
</script>

setup script 的作用

1.子组件无需手动注册

2.不需要返回方法和属性

3.支持props、context API

ref()

接受一个内部值,返回一个响应式的、可更改的 ref 对象,此对象只有一个指向其内部值的属性 .value

ref 对象是可更改的,也就是说你可以为 .value 赋予新的值。它也是响应式的,即所有对 .value 的操作都将被追踪,并且写操作会触发与之相关的副作用。

onMounted()

onMounted() 注册一个回调函数,在组件挂载完成后执行。

说白了就是用户一开始访问页面时就执行。

v-for

基于原始数据多次渲染元素或模板块。

<!-- 必须指定:key -->
<div v-for="(item,index) in arr" :key="index" class='box'>{{ item }}</div> 

7. 跨域访问

同源:所谓同源,就是指请求的资源url和目前文件来源url的协议、域名和端口都相同。同源即同域,两者意思相同。

举例:网址:http://www.oneRound.com/dir/page.html ,它的协议是http://,域名是www.oneRound.com ,端口是80(http协议在没有指定端口号时,默认端口号是80)。

浏览器的同源策略:js脚本在未经允许的情况下,不能够访问其他域下的内容,以保证用户信息的安全,防止恶意的网站窃取数据。

前后端分离的应用,前端、后端是2个独立的应用,运行在不同端口。在浏览器看来,是不同的域,由于浏览器同源策略的限制,导致不同源之间的通信。前端页面中的ajax请求后端接口,即跨域访问。

7.1 springboot web项目使用Cros解决跨域

前端的url:http://localhost:5173

后端的url:http://localhost:8080

7.1.1 配置全局跨域访问

在项目路径下创建config文件夹,在config文件夹下创建CrosConfig类实现WebConfigConfigurer

@Configuration
public class CrosConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") //**匹配的是我们所有后台的路径,代表后台共享了什么资源
                .allowedOrigins("http://localhost:5173") //匹配的前台的服务器地址
                .maxAge(300 * 1000)
                .allowedHeaders("*")
                .allowedMethods("*"); //允许的前台的请求方式
 
    }
}
7.1.2 @CrossOrigin注解

@CrossOrigin注解类,整个类的方法可以被跨域访问,@CrossOrigin注解方法,方法可以被跨域访问

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1990879.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

检索增强生成 (RAG)在实践中的挑战

检索增强生成 (RAG) 应用程序已成为大型语言模型 (LLM) 领域的强大工具&#xff0c;但在从原型过渡到生产环境时&#xff0c;经常面临挑战。 RAG 模型在需要深度知识整合和情境理解的应用中尤其有效&#xff0c;例如法律研究、科学文献综述和复杂的客户服务查询。检索和生成过…

mysql 中的共享锁与排他锁

mysql 中的共享锁与排他锁 1、共享锁&#xff08;Shared Lock&#xff09;2、排他锁&#xff08;Exclusive Lock&#xff09; &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 在MySQL的InnoDB存储引擎中&#xff0c;锁是管理并发访问数据的关…

Leetcode—328. 奇偶链表【中等】

2024每日刷题&#xff08;153&#xff09; Leetcode—328. 奇偶链表 实现代码 /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(nullptr) {}* ListNode(int x) : val(x), next(nullptr)…

入门岛3-Git 的使用与项目构建

任务概览 任务1: 破冰活动&#xff1a;自我介绍 任务2: 实践项目&#xff1a;构建个人项目 参考&#xff1a;git流程&#xff1a; csdn1 csdn2 任务1: 破冰活动&#xff1a;自我介绍 1.Git 是一种开源的分布式版本控制系统&#xff0c;广泛应用于软件开发领域&#xff0c;尤…

DPDI Online在线kettle调度工具

1. DPDI简介 DPDI Online 是一款基于Kettle的强大在线任务调度平台&#xff0c;凭借其高效与灵活性&#xff0c;专为调度和监控Kettle客户端生成的ETL任务而设计 2. DPDI使用 2.1 DPDI登录 2.2 DPDI核心功能 2.2.1 工作台 DPDI online首页主要是显示任务监控信息&#xff…

k8s 四种Service类型(ClusterIP、NodePort、LoadBalancer、ExternalName)详解

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《Kubernetes航线图&#xff1a;从船长到K8s掌舵者》 &#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、引言 1、k8s概述 2、Service在Kubernetes中的…

细说盘点10种自动化拣货技术

导语 大家好&#xff0c;我是社长&#xff0c;老K。专注分享智能制造和智能仓储物流等内容。 在现代物流和仓储管理中&#xff0c;拣货技术的选择对于提高效率和降低成本至关重要。 本文将为您介绍10种流行的拣货技术&#xff0c;并分享它们的参数和应用场景&#xff0c;以帮助…

使用本地大模型从论文PDF中提取结构化信息

1 安装ollama 点击前往网站 https://ollama.com/ &#xff0c;下载ollama软件&#xff0c;支持win、Mac、linux 2 下载LLM ollama软件目前支持多种大模型&#xff0c; 如阿里的&#xff08;qwen、qwen2&#xff09;、meta的(llama3、llama3.1)&#xff0c; 读者根据自己电脑…

《加密与解密》读书笔记1

1、常用断点包括INT3断点、硬件断点、内存断点和消息断点。 1.1 INT断点&#xff1a;一个常用的断点&#xff0c;在OD和x64dbg中按F2快捷键来设置/取消断点。当执行一个INT3断点时&#xff0c;该地址处的内容就被调试器使用INT3指令替换掉了&#xff0c;此时OD和x64dbg将INT3隐…

flink1.18 编译遇到的问题

1. flink-runtime-web编译失败 源码编译时一直卡在 [INFO] Running ‘npm ci --cache-max0 --no-save’ in 处理方法&#xff1a; 修改flink-runtime-web/pom.xml文件 将<arguments>ci --cache-max0 --no-save ${npm.proxy}</arguments> 替换为&#xff1a;<a…

Delphi5实现鱼C记事本程序(TRichEdit版)

效果图 鱼C记事本程序 程序图标 Delphi5的程序图标需要ICO后缀名的文件&#xff0c;已经上传到CSDN&#xff0c;可以用一下。 有什么快捷生成ICO文件的方法&#xff0c;可以在评论区分享一下噢&#xff0c;谢谢&#xff01;&#xff01; MainMenu菜单组件 TRichEdit 组件 在…

多线程(2)——线程的六种状态

1. 线程的所有状态 进程状态&#xff1a; 就绪&#xff1a;正在 cpu 上执行&#xff0c;或者随时可以去 cpu 上执行 阻塞&#xff1a;暂时不能参与 cpu 执行 Java 的线程&#xff0c;对于状态做了更详细的区分&#xff0c;不仅仅是就绪和阻塞了&#xff0c;六种&#xff1a…

2024懒人精灵七天从入门到精通实战课程(付源码)

写在开始&#xff1a;对于想学习自动化技术的同学&#xff0c;给你们一些建议&#xff1b;如果你已经选择开始&#xff0c;还在坚持&#xff0c;我奉劝你坚持下去&#xff0c;水到渠成&#xff1b;如果你还没开始就选择放弃&#xff0c;我建议你就此放弃&#xff0c;老师也不鼓…

合宙Air780EP_LuatOS_MQTT应用指南

简介 Air780EP 是合宙的低功耗4G模组之一&#xff0c;支持LuatOS的脚本二次开发&#xff0c;即使是不太懂技术的老板&#xff0c;也能轻松使用 Air780EP开发产品。 本文应各位大佬邀请&#xff0c;详细讲解了Air780EP 的MQTT的应用教程&#xff01; MQTT协议具有长连接、低带宽…

开源AI智能名片商城系统:重塑大零售生态的创新实践与深度分析

摘要&#xff1a;在数字经济浪潮的推动下&#xff0c;零售行业正经历着前所未有的变革。传统零售模式面临消费者需求多样化、市场竞争加剧等多重挑战&#xff0c;而开源AI智能名片商城系统的出现&#xff0c;为零售行业的转型升级提供了新的思路和技术支持。本文深入探讨了开源…

C语言----字符串的匹配

字符串的匹配 实例说明&#xff1a; 本实例实现对两个字符串进行匹配操作&#xff0c;即在第一个字符串中查找是否存在第二个字符串。如果字符串完全匹配&#xff0c;则提示匹配的信息&#xff0c;并显示第二个字符串在第一个字符串中的开始位置&#xff0c;否则提示不匹配。 …

STM32 - 笔记

1 STM32的串口通信 【keysking的STM32教程】 第8集 STM32的串口通信_哔哩哔哩_bilibili 波特律动 串口助手

观成科技:海莲花活跃木马KSRAT加密通信分析

概述 自2023年8月至今&#xff0c;海莲花组织多次利用KSRAT远控木马对我国发起攻击。KSRAT通过HTTP协议与C&C服务器进行通信&#xff0c;每个样本都使用了不同的URL。其心跳包采用XOR算法进行加密&#xff0c;而控制指令包和数据回传包则使用了XOR以及“XORAES-128-CBC”组…

【C语言篇】递归详细介绍(基础概念习题及汉诺塔等进阶问题)

文章目录 递归是什么递归的思想递归的限制条件 递归举例求n的阶乘分析和代码实现画图推演 顺序打印一个整数的每一位分析和代码实现画图推演 递归与迭代递归求第n个斐波那契数迭代求第n个斐波那契数 拓展练习青蛙跳台阶问题递归求解迭代求解 汉诺塔问题 递归是什么 递归是学习…

FPGA使用sv生成虚拟单音数据

FPGA使用sv生成虚拟单音数据 之前一直使用matlab生成虚拟的数据&#xff0c;导出到txt或是coe文件中&#xff0c;再导入到fpga中进行仿真测试。 复杂的数据这样操作自然是必要的&#xff0c;但是平日使用正弦数据进行测试的话&#xff0c;这样的操作不免复杂&#xff0c;今日…