欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

路由器vueRouter

程序员文章站 2022-03-24 17:54:01
...

目标

掌握路由器的基础知识

掌握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'
              });
            }
          });

        });
      }
相关标签: vue.js