Vue路由配置、网络请求访问框架项目、element组件介绍学习

news2024/9/19 7:39:36

系列文章目录

第一章 基础知识、数据类型学习
第二章 万年历项目
第三章 代码逻辑训练习题
第四章 方法、数组学习
第五章 图书管理系统项目
第六章 面向对象编程：封装、继承、多态学习
第七章 封装继承多态习题
第八章 常用类、包装类、异常处理机制学习
第九章 集合学习
第十章 IO流、多线程学习
第十一章 仓库管理系统项目
第十二章 员工管理系统、多表查询、反射实现DBHelper学习
第十三章 DML、DDL、数据库对象学习
第十四章 网络编程、各种标签、CSS学习
第十五章 ECMAScript、BOM学习
第十六章 DOM、jQuery学习
第十七章 servlet、jsp、Cookie、Ajax学习
第十八章 融资管理系统项目
第十九章 MyBatis框架学习
第二十章 逆向工程、Spring框架IOC、AOP学习
第二十一章 SpringMVC框架学习
第二十二章 SpringBoot框架学习
第二十三章 招聘网站项目
第二十四章 Vue介绍、窗体内操作、窗体间操作学习
第二十五章 Vue路由配置、网络请求访问框架项目、element组件介绍学习

文章目录

  • 系列文章目录
  • 前言
  • 一、路由配置
    • 1. 路由配置介绍
    • 2. 代码实现路由配置
      • 2.1 安装Vue Router
      • 2.2 配置main.js文件
      • 2.3 配置App.vue文件
      • 2.4 实现效果
  • 二、网络请求访问框架项目
    • 1. 网络请求介绍
    • 2. 代码实现网络请求
      • 2.1 安装Axios
      • 2.2 编写UserLogin.vue文件
      • 2.3 编写UserShow.vue文件
      • 2.4 配置main.js文件
      • 2.5 配置vue.config.js文件
      • 2.6 启动框架项目
      • 2.7 实现效果
  • 三、element组件推荐
  • 四、全部代码网盘链接
  • 总结

前言

本文会讲述：
路由配置；
网络请求访问框架项目；
element组件介绍。
全部代码连接会放在文档尾！
吾乃星球之霸主，宇宙之帝王！！！

一、路由配置

1. 路由配置介绍

Vue路由配置是使用Vue Router插件来定义和管理前端路由的过程。它允许你在单页应用中实现不同视图和组件之间的导航。
路由配置其实是一个引出网络请求部分的垫脚石，实现了页面间跳转的功能。

有人可能问：在上文第二十四章 Vue介绍、窗体内操作、窗体间操作学习中不是实现了跳转吗？我们可以在App页面中看到我们在HelloWorld文件中写的代码，这不就已经实现跳转了吗？
其实两者是不同的，之前我们需要在App页面调用HelloWorld文件，两者之间是父子关系；但今天路由配置能实现同级之间的跳转。

2. 代码实现路由配置

本项目基于[第二十四章 Vue介绍、窗体内操作、窗体间操作学习](https://blog.csdn.net/howwickhappy/article/details/142197245)的项目进行开发

2.1 安装Vue Router

首先我们要在项目中安装Vue Router
在项目目录中打开cmd，执行：npm install --save vue-router@3，用于在项目中安装Vue Router版本为3。
在项目中打开cmd，可以使用在项目文件夹地址栏清空输入cmd来便捷打开
在这里插入图片描述
出现add 1 package in **s即为成功！

2.2 配置main.js文件

import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
// 1、引入VueRouter和相关组件
import VueRouter from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
import Demo from './components/Demo.vue'
import Nav from './components/Nav.vue'
import AxiosGet from './components/AxiosGet.vue'
import UserLogin from './components/UserLogin.vue'
import UserShow from './components/UserShow.vue'
Vue.config.productionTip = false
// 2、使用VueRouter插件
Vue.use(VueRouter)
// 3、创建VueRouter实例并配置路由规则
const router = new VueRouter({
  mode:"history",
  routes:[{
    path:"/hello",
    component: HelloWorld
  },{
    path:"/demo",
    component: Demo
  },{
    path:"/ag",
    component: AxiosGet
  },{
    path:"/ul",
    component: UserLogin
  },{
    path:"/us",
    component: UserShow
  },{
    path:"/",
    component: Nav
  }]
})
new Vue({
  // 4、将VueRouter实例注入到Vue实例中
  router,
  render: h => h(App),
}).$mount('#app')

在main.js中需要进行四个操作：
1、import VueRouter组件
2、使用VueRouter插件
3、创建VueRouter实例router并配置路由规则为history
4、将router注入到Vue实例中

2.3 配置App.vue文件

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

我们需要加入router-view子标签，它会根据当前页面的路由路径，自动匹配对应的路由规则，并渲染匹配到的组件。这样可以根据不同的路由路径展示不同的页面内容。

2.4 实现效果

在这里插入图片描述
我们可以通过我们配置的别名访问组件

二、网络请求访问框架项目

1. 网络请求介绍

Vue本身并没有提供网络请求功能，但是可以使用第三方库或内置的方法来进行网络请求，本文中使用Axios库来实现。
Axios是一个基于Promise的HTTP客户端库，用于浏览器和Node.js环境中发送HTTP请求。它提供了简洁的API，使得发送请求、处理响应和进行错误处理变得非常容易。

2. 代码实现网络请求

2.1 安装Axios

首先我们要在项目中安装Axios
在项目目录中打开cmd，执行：npm install axios --save。

我们可以使用get和post两种请求方式，使用post方法可以防止乱码，所以本文中使用post请求方法

2.2 编写UserLogin.vue文件

<template>
    <div>
        <form><!--后面是正确输入-->
            用户名iwen@qq.com：<input type="text" v-model="uname" /><br />
            密码iwen123：<input type="text" v-model="upwd" /><br />
            验证码crfvw：<input type="text" v-model="yzm" /><br />
            <input type="button" value="登录" @click="ckLogin" />
        </form>
    </div>
</template>
<script>
import axios from 'axios'; // 网络请求资源对象
import qs from "qs"; // 处理参数的类型转换和中文乱码
export default {
    name: "UserLogin",
    data() {
        return {
            uname: "",
            upwd: "",
            yzm: ""
        }
    },
    methods: {
        ckLogin() {
            // 发送post请求
            axios.post("http://iwenwiki.com/api/blueberrypai/login.php", qs.stringify({
                user_id: this.uname,
                password: this.upwd,
                verification_code: this.yzm
            }))
                .then(mess => {
                    if (mess.data.success) {
                        console.log("登录成功");
                        console.log(mess);
                        this.$router.push({ path: "/us" });
                    } else {
                        console.log("登录失败");
                        console.log(mess);
                    }
                })
                .catch(err => {
                    console.log(err);
                })
        }
    }
}
</script>
<style></style>

2.3 编写UserShow.vue文件

<template>
    <div>
        <h1>我是UserShow组件</h1>
        <table>
            <tr>
                <td>编号</td>
                <td>名称</td>
                <td>创建时间</td>
                <td>等级</td>
                <td>创建者</td>
                <td>工单内容</td>
            </tr>
            <tr v-for="(e, i) in objs" :key="i">
                <td>{{ e.id }}</td>
                <td>{{ e.pname }}</td>
                <td>{{ e.createdate }}</td>
                <td>{{ e.orderlevel }}</td>
                <td>{{ e.excutor }}</td>
                <td>{{ e.description }}</td>
            </tr>
        </table>
    </div>
</template>
<script>
import axios from 'axios';
export default {
    name: "UserShow",
    data() {
        return {
            objs: Array
        }
    },
    mounted() {
        // 组件数据渲染后，发送post请求，获得显示数据
        // axios.post("http://iwenwiki.com/api/blueberrypai/getIndexInteresting.php")
        axios.post("/api/workorder/findAll")
            .then(mess => {
                console.log(mess);
                this.objs = mess.data.result;
            })
            .catch(err => {
                console.log("发送过程中出现了异常" + err);
            })
    }
}
</script>
<style></style>

2.4 配置main.js文件

直接沿用上一个main.js文件即可

2.5 配置vue.config.js文件

将文件中内容清空，换成如下内容

module.exports = { 
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8888', // 实际的服务器位置
        ws: true, // workorder/findAll
        pathRewrite: { // 代指SpringBoot项目的根目录
          '^/api': ''
        },
        changeOrigin: true   //允许跨域
      }
    }
  }
}

2.6 启动框架项目

启动任意已有框架项目即可，
需要返回的数据是如下JSON格式
代码中需要在UserShow.vue文件中更改显示的列名
在这里插入图片描述

2.7 实现效果

全部代码见篇尾vue-240914
在这里插入图片描述
在这里插入图片描述

三、element组件推荐

网站快速成型工具element
网址：https://element.eleme.cn/#/zh-CN/
里面有很多成型的好看的前端页面设计
请看使用element实现的页面：
全部代码请见篇尾vue-240915
在这里插入图片描述
在这里插入图片描述

四、全部代码网盘链接

通过网盘分享的文件：vue-240914
链接: https://pan.baidu.com/s/1gymbzlV9AK-XK9VAL0fnfQ?pwd=quim 提取码: quim
通过网盘分享的文件：vue-240915
链接: https://pan.baidu.com/s/13yM1hH_i4PgC9-C_xksJcQ?pwd=aydt 提取码: aydt

总结

本文讲述了：
路由配置：实现页面跳转；
网络请求访问框架项目：实现网络请求；
element组件介绍：介绍美观的前端组件

我睡觉的时候世界真实时间会静止，所以你们都看不到我睡觉，哼！

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

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

相关文章

回归预测|基于开普勒优化相关向量机的数据回归预测Matlab程序KOA-RVM 多特征输入单输出 含基础RVM

回归预测|基于开普勒优化相关向量机的数据回归预测Matlab程序KOA-RVM 多特征输入单输出 含基础RVM

回归预测|基于开普勒优化相关向量机的数据回归预测Matlab程序KOA-RVM 多特征输入单输出 含基础RVM 文章目录 一、基本原理1. **相关向量机&#xff08;RVM&#xff09;**2. **开普勒优化算法&#xff08;KOA&#xff09;**3. **KOA-RVM回归预测模型**总结 二、实验结果三、核心…
阅读更多...
k8s集群备份与迁移

k8s集群备份与迁移

什么是 Velero? Velero 是一个用Go语言开发的开源工具&#xff0c;用于 Kubernetes 集群的备份、恢复、灾难恢复和迁移。 Velero备份工作流程 当用户发起velero backup create时&#xff0c;会执行如下四个动作&#xff1a; velero客户端调用Kubernetes API创建自定义资源并…
阅读更多...
启动windows更新/停止windows更新，在配置更新中关闭自动更新的方法

启动windows更新/停止windows更新，在配置更新中关闭自动更新的方法

在Windows操作系统中&#xff0c;启动或停止Windows更新&#xff0c;以及调整“配置更新”的关闭方法&#xff0c;涉及多种途径&#xff0c;这里将详细阐述几种常用的专业方法。 启动Windows更新 1.通过Windows服务管理器&#xff1a; -打开“运行”对话框&#xff08;…
阅读更多...
15. 三数之和（实际是双指针类型的题目）

15. 三数之和（实际是双指针类型的题目）

15. 三数之和 15. 三数之和 给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 nums[i] nums[j] nums[k] 0 。请你返回所有和为 0 且不重复的三元组。 注意&#xff1a;答案中不可以…
阅读更多...
Uniapp的alertDialog返回值+async/await处理确定/取消问题

Uniapp的alertDialog返回值+async/await处理确定/取消问题

今天在使用uniui的alertDialog时&#xff0c;想添加一个确定/取消的警告框时 发现alertDialog和下面的处理同步进行了&#xff0c;没有等待alaertDialog处理完才进行 查询后发现问题在于 await 关键字虽然被用来等待 alertDialog.value.open() 的完成&#xff0c;但是 alertDi…
阅读更多...
Android中的冷启动，热启动和温启动

Android中的冷启动，热启动和温启动

在App启动方式中分为三种&#xff1a;冷启动&#xff08;cold start&#xff09;、热启动&#xff08;hot start&#xff09;、温启动&#xff08;warm start&#xff09; 冷启动&#xff1a; 系统不存在App进程&#xff08;App首次启动或者App被完全杀死&#xff09;时启动A…
阅读更多...
使用 GaLore 预训练LLaMA-7B

使用 GaLore 预训练LLaMA-7B

项目代码&#xff1a; https://github.com/jiaweizzhao/galorehttps://github.com/jiaweizzhao/galore 参考博客&#xff1a; https://zhuanlan.zhihu.com/p/686686751 创建环境 基础环境配置如下&#xff1a; 操作系统: CentOS 7CPUs: 单个节点具有 1TB 内存的 Intel CP…
阅读更多...
F12抓包11：UI自动化 - Recoder（记录器）

F12抓包11：UI自动化 - Recoder（记录器）

课程大纲 使用场景&#xff08;导入和导出&#xff09;: ① 测试的重复性工作&#xff0c;本浏览器录制并进行replay&#xff1b; ② 导入/导出录制脚本&#xff0c;移植后replay&#xff1b; ③ 导出给开发进行replay复现bug&#xff1b; ④ 进行前端性能分析。 1、录制脚…
阅读更多...
kubernetes 学习 尚硅谷

kubernetes 学习 尚硅谷

出自 https://www.bilibili.com/video/BV13Q4y1C7hS 相关命令 kubeadm init &#xff1a;将当前节点创建为主节点 kubectl get nodes&#xff1a;获取集群所有节点 kubectl apply -f xxx.yaml&#xff1a;根据配置文件&#xff0c;给集群创建资源 kubectl delete -f xx.yaml&…
阅读更多...
【C++】模板进阶：深入解析模板特化

【C++】模板进阶：深入解析模板特化

C语法相关知识点可以通过点击以下链接进行学习一起加油&#xff01;命名空间缺省参数与函数重载C相关特性类和对象-上篇类和对象-中篇类和对象-下篇日期类C/C内存管理模板初阶String使用String模拟实现Vector使用及其模拟实现List使用及其模拟实现容器适配器Stack与Queue 本章将…
阅读更多...
判断关系模式的无损连接（表格法）

判断关系模式的无损连接（表格法）

目录 前言 一、什么是无损连接&#xff1f; 二、如何判断无损连接&#xff1f; 1.表格法 2.示例题 D选项构造初始的判断表如下&#xff1a; 总结 前言 在数据库设计中&#xff0c;确保数据的完整性和有效性是至关重要的。在关系数据库中&#xff0c;函数依赖和无损连接是…
阅读更多...
docker|Oracle数据库|docker快速部署Oracle11g和数据库的持久化（可用于生产环境）

docker|Oracle数据库|docker快速部署Oracle11g和数据库的持久化（可用于生产环境）

一、 容器数据持久化的概念 docker做为容器化的领先技术&#xff0c;现在广泛应用于各个平台中&#xff0c;但不知道什么时候有一个说法是docker并不适用容器化数据库&#xff0c;说容器化的数据库性能不稳定&#xff0c;其实&#xff0c;这个说法主要是因为对docker的数据持…
阅读更多...
零基础5分钟上手亚马逊云科技-利用API网关管理API

零基础5分钟上手亚马逊云科技-利用API网关管理API

简介 欢迎来到小李哥全新亚马逊云科技AWS云计算知识学习系列&#xff0c;适用于任何无云计算或者亚马逊云科技技术背景的开发者&#xff0c;通过这篇文章大家零基础5分钟就能完全学会亚马逊云科技一个经典的服务开发架构方案。 我会每天介绍一个基于亚马逊云科技AWS云计算平台…
阅读更多...
C语言 ——— 编写代码，将一个长整数用逗号隔开，每3位一个逗号，并输出打印

C语言 ——— 编写代码，将一个长整数用逗号隔开，每3位一个逗号，并输出打印

目录 题目要求 代码实现 题目要求 对于一个较大的整数 N (1 < N < 2,000,000,000) &#xff0c;将 N 每个 3 位加上一个逗号&#xff0c;并且最后输出打印 举例说明&#xff1a; 输入&#xff1a;1980364535 输出&#xff1a;1,980,364,535 代码实现 代码演示&#…
阅读更多...
详解JUC

详解JUC

Java并发工具包&#xff08;Java Util Concurrent&#xff0c; 简称JUC&#xff09;是Java提供的一组用于简化多线程编程的类和接口&#xff0c;它包含了用于线程同步、并发数据结构、线程池、锁、原子操作以及其他并发实用工具的丰富集合。 1. 线程池 线程池是 Java 并发编程…
阅读更多...
【Go】Go语言中的数组基本语法与应用实战

【Go】Go语言中的数组基本语法与应用实战

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…
阅读更多...
GUI编程13：JDialog弹窗

GUI编程13：JDialog弹窗

视频链接&#xff1a;15、JDialog弹窗_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1DJ411B75F?p15&vd_sourceb5775c3a4ea16a5306db9c7c1c1486b5 package com.yundait.lesson04;import javax.swing.*; import java.awt.*; import java.awt.event.ActionEvent; im…
阅读更多...
为你的 Github 仓库引入自动构建的Github Pages静态页面

为你的 Github 仓库引入自动构建的Github Pages静态页面

1. 设置config文件 在Github仓库根目录下创建_config.yml文件。其中的内容为&#xff1a; plugins:- jekyll-relative-links relative_links:enabled: truecollections: true include:- CONTRIBUTING.md- README.md- LICENSE.md- COPYING.md- CODE_OF_CONDUCT.md- CONTRIBUTI…
阅读更多...
通过解预测和机器学习促进蚁群优化

通过解预测和机器学习促进蚁群优化

文章目录 Abstract1. Introduction2. Background and related work2.1 定向越野问题2.2 ACO优化Abstract ML - ACO 算法的第一阶段，使用一组已知最优解的小定向越野问题实例训练一个 ML 模型。具体来说，使用分类模型根据问题特定的特征和统计度量来判断一条边是否属于最优路…
阅读更多...
SSH工具 MobaXterm的使用与快捷配置

SSH工具 MobaXterm的使用与快捷配置

软件下载/安装与链接服务器/本地虚拟机 文章目录 软件下载/安装与链接服务器/本地虚拟机软件下载软件安装使用软件链接非本地机器并设置用户密码我不想有确定密码的弹窗 其余便捷配置配置右键粘贴SSH链接设置 软件下载 如果你访问不了这个网址&#xff0c;可以评论区找博主或者…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023