Vue路由配置、网络请求访问框架项目、element组件介绍学习
系列文章目录
第一章 基础知识、数据类型学习
第二章 万年历项目
第三章 代码逻辑训练习题
第四章 方法、数组学习
第五章 图书管理系统项目
第六章 面向对象编程：封装、继承、多态学习
第七章 封装继承多态习题
第八章 常用类、包装类、异常处理机制学习
第九章 集合学习
第十章 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组件介绍：介绍美观的前端组件
我睡觉的时候世界真实时间会静止，所以你们都看不到我睡觉，哼！