路由器vueRouter
程序员文章站
2022-03-24 17:54:01
...
vueRouter
目标
掌握路由器的基础知识
掌握Vuex的的登陆信息保存
掌握后端的数据校验
掌握ElementUI表格、分页组件、模态框的使用
VueRouter路由器
作用:
用来判断 URL 地址,并负责加载对应的组件到页面上
核心标签
:渲染路由器中的组件,类似于一个占位符。
:生成一个可用于访问路由器中超链接。
核心代码
// 创建一个VueRouter对象
const router = new VueRouter({
// 配置路由的映射数组, 这些组件对象会替换掉页面中 <router-view>
// 类似于jQuery的 $('选择器').load(url);
routes :[
{path: '路径', component: 组件对象},
{path: '路径', component: 组件对象},
{path: '路径', component: 组件对象},
{path: '路径', component: 组件对象},
]
});
导航的方式
使用标签:
<!--router-link方式-->
<!--使用JS局部更新页面-->
<router-link to="/index.html">router-link链接方式</router-link><br>
<!--重新加载页面,并使用JS更新局部页面-->
<a href="index.html">直接使用超链接a标签</a>
使用代码通过编程时导航:
// 使用代码的方式跳转地址
this.$router.push('/index.html');
// query中的对象会直接拼接到url地址后面,类似于get请求
this.$router.push({path:'/index.html',query:{id: 12}});
// params中对象不会拼接到url地址后面,类似于post请求的参数
this.$router.push({path:'/index.html',params:{id: 12}});
this.$router.push({name:'test',query:{id: 12}})
this.$router.push({name:'test',params:{id: 12}})
实现过程
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t9sY17BS-1592214173164)(image-20200615150833078.png)]
ElementUI的表格
表格的常用的属性
常规表格的属性
data属性:用来设置表格数据
树形结构的树形
:tree-props属性:用来设置树形结构的子节点数据
row-key属性:指定每一行的主键是那一列
default-expand-all属性: 展开所有节点
示例
页面代码
<!--添加一个表格-->
<el-table :data="resources"
:tree-props="{children:'children'}"
row-key="id"
default-expand-all >
<!--设置列-->
<el-table-column label="名称" prop="raw.name"></el-table-column>
<!--<el-table-column label="编号" prop="id"></el-table-column>-->
<el-table-column label="URL地址" prop="raw.url"></el-table-column>
<el-table-column label="类型" prop="raw.type"></el-table-column>
<el-table-column label="图标">
<template slot-scope="scope">
<i :class="[scope.row.icon]"></i> {{scope.row.icon}}
</template>
</el-table-column>
<el-table-column label="父级编号" prop="raw.parentId"></el-table-column>
<el-table-column label="序号" prop="raw.sort"></el-table-column>
</el-table>
</el-card>
data(){
return {
resources:[]
};
},
methods:{
queryResources(){
// 发送ajax请求
this.axios.get('/api/resources').then(res=>{
// 从axios的结果中取出数据
let result = res.data;
// 设置数据到资源数组中
this.resources = result.data;
})
}
},
mounted(){
this.queryResources();
}
模态框
页面代码
<el-dialog title="编辑资源" :visible.sync="dialogVisible">
<!--添加一个表单-->
<el-form ref="resourceEditForm" :model="resourceEditForm" :rules="resourceEditFormRules">
<el-form-item label="名称" prop="name">
<el-input v-model="resourceEditForm.name"></el-input>
</el-form-item>
<el-form-item label="URL地址" prop="url">
<el-input v-model="resourceEditForm.url"></el-input>
</el-form-item>
<el-form-item label="类型" prop="type">
<el-input v-model="resourceEditForm.type"></el-input>
</el-form-item>
<el-form-item label="图标" prop="icon">
<el-input v-model="resourceEditForm.icon"></el-input>
</el-form-item>
<el-form-item label="父级编号" prop="parentId">
<el-input v-model="resourceEditForm.parentId"></el-input>
</el-form-item>
<el-form-item label="序号" prop="sort">
<el-input v-model="resourceEditForm.sort"></el-input>
</el-form-item>
</el-form>
<!--添加2个按钮-->
<div slot="footer">
<el-button type="primary" @click="submitEditForm">保存</el-button>
<el-button @click="dialogVisible=false">取消</el-button>
</div>
</el-dialog>
// 打开编辑对话框
openEditDialog(row){
// 根据id到后端查询
this.axios.get(`/api/resources/${row.id}`).then(res=>{
this.resourceEditForm = res.data.data;
this.dialogVisible = true;
})
},
// 提交编辑表单的数据
submitEditForm(){
this.$refs.resourceEditForm.validate(valid=>{
// 如果没有通过就结束
if(!valid){
return false;
}
// 需要发送ajax请求修改数据
this.axios.post(`/api/resources/${this.resourceEditForm.id}`, this.qs.stringify(this.resourceEditForm)).then(res=>{
// 得到返回的结果数据
let result = res.data;
if(result.code == 200){
// 成功,关闭模态框
this.dialogVisible = false;
// 修改已近更改的数据
this.queryResources();
// for(let i in this.resources){
// console.log(this.resources[i].id + ' ---- '+ this.resourceEditForm.id)
// if(this.resources[i].id == this.resourceEditForm.id){
// // 把值赋值回去
// this.resources[i] = this.resourceEditForm;
//
// // 通过$set实现响应式修改值
// // 需要修改的对象,需要修改的对象属性,修改后的值
// this.$set(this.resources,i, this.resourceEditForm);
// console.log(this.resources)
// break;
// }
// }
this.$message({
message: '修改成功!',
type: 'success'
});
}
});
});
}
目标
掌握路由器的基础知识
掌握Vuex的的登陆信息保存
掌握后端的数据校验
掌握ElementUI表格、分页组件、模态框的使用
VueRouter路由器
作用:
用来判断 URL 地址,并负责加载对应的组件到页面上
核心标签
:渲染路由器中的组件,类似于一个占位符。
:生成一个可用于访问路由器中超链接。
核心代码
// 创建一个VueRouter对象
const router = new VueRouter({
// 配置路由的映射数组, 这些组件对象会替换掉页面中 <router-view>
// 类似于jQuery的 $('选择器').load(url);
routes :[
{path: '路径', component: 组件对象},
{path: '路径', component: 组件对象},
{path: '路径', component: 组件对象},
{path: '路径', component: 组件对象},
]
});
导航的方式
使用标签:
<!--router-link方式-->
<!--使用JS局部更新页面-->
<router-link to="/index.html">router-link链接方式</router-link><br>
<!--重新加载页面,并使用JS更新局部页面-->
<a href="index.html">直接使用超链接a标签</a>
使用代码通过编程时导航:
// 使用代码的方式跳转地址
this.$router.push('/index.html');
// query中的对象会直接拼接到url地址后面,类似于get请求
this.$router.push({path:'/index.html',query:{id: 12}});
// params中对象不会拼接到url地址后面,类似于post请求的参数
this.$router.push({path:'/index.html',params:{id: 12}});
this.$router.push({name:'test',query:{id: 12}})
this.$router.push({name:'test',params:{id: 12}})
实现过程
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W9aKt3Wu-1592214174009)(image-20200615150833078.png)]
ElementUI的表格
表格的常用的属性
常规表格的属性
data属性:用来设置表格数据
树形结构的树形
:tree-props属性:用来设置树形结构的子节点数据
row-key属性:指定每一行的主键是那一列
default-expand-all属性: 展开所有节点
示例
页面代码
<!--添加一个表格-->
<el-table :data="resources"
:tree-props="{children:'children'}"
row-key="id"
default-expand-all >
<!--设置列-->
<el-table-column label="名称" prop="raw.name"></el-table-column>
<!--<el-table-column label="编号" prop="id"></el-table-column>-->
<el-table-column label="URL地址" prop="raw.url"></el-table-column>
<el-table-column label="类型" prop="raw.type"></el-table-column>
<el-table-column label="图标">
<template slot-scope="scope">
<i :class="[scope.row.icon]"></i> {{scope.row.icon}}
</template>
</el-table-column>
<el-table-column label="父级编号" prop="raw.parentId"></el-table-column>
<el-table-column label="序号" prop="raw.sort"></el-table-column>
</el-table>
</el-card>
data(){
return {
resources:[]
};
},
methods:{
queryResources(){
// 发送ajax请求
this.axios.get('/api/resources').then(res=>{
// 从axios的结果中取出数据
let result = res.data;
// 设置数据到资源数组中
this.resources = result.data;
})
}
},
mounted(){
this.queryResources();
}
模态框
页面代码
<el-dialog title="编辑资源" :visible.sync="dialogVisible">
<!--添加一个表单-->
<el-form ref="resourceEditForm" :model="resourceEditForm" :rules="resourceEditFormRules">
<el-form-item label="名称" prop="name">
<el-input v-model="resourceEditForm.name"></el-input>
</el-form-item>
<el-form-item label="URL地址" prop="url">
<el-input v-model="resourceEditForm.url"></el-input>
</el-form-item>
<el-form-item label="类型" prop="type">
<el-input v-model="resourceEditForm.type"></el-input>
</el-form-item>
<el-form-item label="图标" prop="icon">
<el-input v-model="resourceEditForm.icon"></el-input>
</el-form-item>
<el-form-item label="父级编号" prop="parentId">
<el-input v-model="resourceEditForm.parentId"></el-input>
</el-form-item>
<el-form-item label="序号" prop="sort">
<el-input v-model="resourceEditForm.sort"></el-input>
</el-form-item>
</el-form>
<!--添加2个按钮-->
<div slot="footer">
<el-button type="primary" @click="submitEditForm">保存</el-button>
<el-button @click="dialogVisible=false">取消</el-button>
</div>
</el-dialog>
// 打开编辑对话框
openEditDialog(row){
// 根据id到后端查询
this.axios.get(`/api/resources/${row.id}`).then(res=>{
this.resourceEditForm = res.data.data;
this.dialogVisible = true;
})
},
// 提交编辑表单的数据
submitEditForm(){
this.$refs.resourceEditForm.validate(valid=>{
// 如果没有通过就结束
if(!valid){
return false;
}
// 需要发送ajax请求修改数据
this.axios.post(`/api/resources/${this.resourceEditForm.id}`, this.qs.stringify(this.resourceEditForm)).then(res=>{
// 得到返回的结果数据
let result = res.data;
if(result.code == 200){
// 成功,关闭模态框
this.dialogVisible = false;
// 修改已近更改的数据
this.queryResources();
// for(let i in this.resources){
// console.log(this.resources[i].id + ' ---- '+ this.resourceEditForm.id)
// if(this.resources[i].id == this.resourceEditForm.id){
// // 把值赋值回去
// this.resources[i] = this.resourceEditForm;
//
// // 通过$set实现响应式修改值
// // 需要修改的对象,需要修改的对象属性,修改后的值
// this.$set(this.resources,i, this.resourceEditForm);
// console.log(this.resources)
// break;
// }
// }
this.$message({
message: '修改成功!',
type: 'success'
});
}
});
});
}
上一篇: c语言 数组求平均值
下一篇: 机器人“照看”老人居家养老将更智能