day59(使用Element U,使用axios ,Vue CLI的嵌套路由,小结)

day59(使用Element U,使用axios ,Vue CLI的嵌套路由,小结)

1.使用Element U

1. 关于Element UI

  • Element UI是一套采用 Vue 2.0 作为基础框架实现的组件库,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助网站快速成型。

  • Element UI的官方网址是:https://element.eleme.cn/

  • 由于Element UI定义了大量的组件,每个组件都有许多属性,所以,学习Element UI时需要记忆大量的组件特征,这将是一个非常漫长的过程,通常不建议刻意的死记硬背,应该重点关注Element UI可以做到什么,例如有哪些样式,各组件的核心属性等用法,然后结合官方文档(https://element.eleme.cn/#/zh-CN/component/)进行开发。

2.安装Element UI

  • 首先进入工程文件夹(如果使用IntelliJ IDEA打开了此工程,直接点击IntelliJ IDEA下面的Terminal即可):

  • 然后使用npm命令安装Element UI,以下2条命令是等效的(注意:以下命令区分大小写,例如最后的-S的字母是大写的): npm i element-ui -S 或者 npm install --save element-ui

  • 安装完成后,在工程的main.js中导入并使用Element UI:

    // main.js
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    Vue.use(ElementUI);
    <el-row type="flex" justify="center">
    <el-col :span="12">
    <!-- 页面元素 -->
    </el-col>
    </el-row>

     

2.使用axios

1.关于axios

  • axios是一个易用、简洁且高效的http库,主要用于发起HTTP请求,并获取响应的结果。

  • axios的官方网址是:http://www.axios-js.com/

  • axios的主要特点有:

    • 从浏览器中创建 XMLHttpRequests

    • 从 node.js 创建 http 请求 – 支持 Promise API

    • 拦截请求和响应

    • 转换请求数据和响应数据

    • 取消请求

    • 自动转换 JSON 数据

    • 客户端支持防御 XSR

2.axios基本使用

  • 发起GET请求示例:

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
  • 发起GET请求示例:

    axios.get('/user', { params: { ID: 12345 } }).then(function (response) { console.log(response); }).catch(function (error) { console.log(error); });
  • 发起POST请求示例:

    axios.post('/user'
    , {
    firstName: 'Fred'
    ,
    lastName: 'Flintstone'
    })
    .then(function (response) {
    console.log(response);
    })
    .catch(function (error) {
    console.log(error);
    });
  • 更多示例请参考axios官方文档:http://www.axios-js.com/zh-cn/docs/

3.安装axios

npm i axios -S 或者 npm install --save axios

安装完成后,也需要在main.js中添加配置,配置代码为:

import axios from 'axios'
Vue.prototype.axios = axios

4.使用工程jar包文件命令启动此服务

java -jar vue-project-server-0.0.1.jar

 

3.Vue CLI的嵌套路由

1.关于嵌套路由

    • 由于Vue CLI工程是单页面的,为了保证能显示各式各样的页面,则需要将页面的整个区域都设计为<router-view/>,然后根据URL不同,加载不同的视图组件(.vue文件)。 但是,即使将整个页面的显示区域作为一个<router-view/>,多个页面仍可能存在共用的部分

    • 如果要设计为以上风格,则页面中的右侧最大的区域也必须是一个<router-view/>,就会形成最外部(页面所有部分)是<router-view/>的同时,内部还有一个<router-view/>(右侧的大区域),在配置路由时,就需要使用到嵌套路由的做法了。

    • 当然,如果以上设计风格中右侧区域中仍有各页面均显示的部分,还可以继续在其内部进行嵌套,通常,并不建议嵌套太多层次。

2.嵌套路由的使用

  • 嵌套路由则需要在原路由的某对象中添加children属性,此属性仍是一个数组,其内部的配置方式与routes常量是相同的,例如:

    const routes = [
    {
    path: '/admin',
    component: () => import('../views/AdminView.vue'),
    children: [
    {
    path: 'user/list'
    component: () => import('../views/admin/UserListView.vue')
    },
    {
    path: 'user/add-new'
    component: () => import('../views/admin/UserAddNewView.vue')
    }
    ]
    }
    ];
  • 提示:以上children下的配置中,各path没有使用/作为第1个字符,则表示在父级路径的基础上增加,例如配置为user/list,由于父级配置了/admin,则完整路径为/admin/user/list

  • 另外,如果希望访问子级嵌套的视图(例如以上/admin对应的视图)时就打开某个其子级视图(例如以上/admin/user/list对应的视图),在配置存在子级的视图(例如以上/admin对应的视图)时,还可以添加redirect属性,使其直接重定向到子级视图,例如:

    const routes = [
    // 省略前序代码
    {
    path: '/admin',
    redirect: '/admim/user/list',
    component: () => import('../views/AdminView.vue'),
    children: [
    // 省略子级代码
    ]
    }
    ];

     

4.小结

  • 通过以上内容的学习,你应该能够:

    • 理解Vue CLI的单页面设计思想

    • 掌握安装Node.js、配置npm源、安装Vue CLI、创建Vue CLI工程、在VueCLI工程中安装常用框架

      • 你应该自已做一些笔记,把相关的命令及注意事项记下来,而不是死记硬背

    • 认识Vue CLI的工程的目录结构

    • 掌握.vue视图组件的基本开发

      • 认识此类文件的结构及特点

    • 掌握Vue CLI中路由的配置

      • 包括一般路由和嵌套路由

    • 能从Element UI官网或相关网站找到你所需的(或相似的)页面设计,并处理成你需要的样子

      • 永远不要死记硬背标签、属性等,而是应该尽可能多的使用各种标签,了解它们的特点,并结合官方文档去使用,从而积累经验 –

    • 掌握使用ax ios发送请求,并处理响应的结果

  • 至此,你已经完成了Vue CLI的入门学习,你应该在此基础之上,尝试设计更多不同的页面,并逐步细化,以发现更多的不足并解决它们,从而提升前端工程的开发能力。

posted @ 2022-05-23 20:52  约拿小叶  阅读(102)  评论(0)    收藏  举报