路由器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'
              });
            }
          });

        });
      }