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

本文链接：https://blog.csdn.net/howwickhappy/article/details/142253075

系列文章目录

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