【测试开发】知识点-前端 vue-element-admin 框架,项目组件分析

简介: 【测试开发】知识点-前端 vue-element-admin 框架,项目组件分析

在实战中学习,在学习中成长。


测试平台到现在开发了几个功能了,前后端也陆续写了些代码,觉得应该回顾一下,梳理一些知识点。


比如前端在用的vue-element-admin框架,以及后端持久化层在用的 mybatis 等等,现在可以只懂皮毛,但是不能一直这样。


为了后面更得心应手的使用,接下来准备先整理一下关于这个前端框架的知识点。


一、组件


开始还是要了解一下组件:


  • 组件(Component)是 Vue.js 最强大的功能之一。
  • 组件可以扩展 HTML 元素,封装可重用的代码。
  • 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树。


1268169-20211107203421737-1034389245.png


说个贴合实际点的:就是在页面中看到的内容,都是由组件构成的


1268169-20211107203655424-1961478231.png


就拿登录页来说,本身就是个登录页组件。而其中,还包含了表单组件。在表单组件里又包含了文本框组件。文本框里还包含了图标组件。。。


换句话来说,在vue js 当中,组件就可以理解为页面当中的某一块元素


最上面的组件示意图我加工一下,大概就是这样子:


1268169-20211107204433464-267818651.png


但是组件的细节就不整理了,网上系统的教程多得是,遇到对应的知识点去快速学习使用即可,现在的目的是了解在用的前端项目。


二、vue-element-admin 项目组件


在项目中,有几个重要的部分需要关注:


  • 入口 html 文件:public/index.html
  • 入口 js 脚本:src/main.js
  • 路由:src/router/index.js
  • 顶层组件:src/App.vue


1. public/index.html


目前项目当中虽然已经有了几个页面,但实际上,整个项目只有 1 个 html 文件。通过其他 js 文件的配合,会把具体需要的 vue 文件加载到这个 html中显示。


1268169-20211107210648564-1203843196.png


上图就是在项目中的代码文件了,这时候鼠标右击浏览器的登录页面,点击【查看网页源代码】,可以看到运行后的代码效果。


1268169-20211107211531782-1687171667.png


注意,在这个 html 中,有一个<div id="app">,生成的文件都会自动注入到这里。


1268169-20211107211615530-1386572023.png


在程序运行起来之后,会动态的生成一些脚本,生成后就会注入到这里了,可以看下网页源码里这个位置:


1268169-20211107211902048-1588184095.png


然后上面是登录页的,现在我点击登录进去,查看【项目管理】的网页源代码,依然是这个内容:


1268169-20211107212048344-1181167490.png


这也就是上面说的整个项目只有这 1 个 html 文件入口了,至于其他的页面内容,就是通过脚本动态的渲染出来的。


2. src/main.js


这个就是能渲染丰富页面的 js 脚本了,生成出来就是网页源码里看到的src="/static/js/app.js"。因为目前是本地开发环境,没有去打包,所以都是临时生成的。


如果打包后就可以看到本地项目有了新的目录dist,这里可以找到生成的app.js文件。


1268169-20211107224027278-742850961.png


继续来看maim.js


1268169-20211107224237090-1769650157.png


这里面是没写业务逻辑的,可以看到有很多的 import ,主要引入了一些核心的功能模块。作用就相当于后端代码里,引入相关<dependency>,就可以使用对应的功能。

简单看一下:


import Vue from 'vue'  // 用 vue 肯定要引入
import 'normalize.css/normalize.css' // 一个现代化的东西来替代css重置
import ElementUI from 'element-ui' // 用到 element-ui
import 'element-ui/lib/theme-chalk/index.css'  // element-ui的一些主题样式
import locale from 'element-ui/lib/locale/lang/en' // element-ui 国际化
import '@/styles/index.scss' // 框架本身给自己定义的一些全局样式  
import App from './App'   // 引入根组件
import store from './store'  // 叫状态管理,这里可以简单理解为一个存放前端数据的地方
import router from './router'  // 路由模块
import '@/icons' // 扩展图标模块
import '@/permission' // 框架提供的前端角色权限控制模块


继续往下看,这块是跟前端使用 mock 接口有关的,我实际中没有使用,直接调用后端的真实接口,可以忽略。


/**
 * If you don't want to use mock-server
 * you want to use MockJs for mock api
 * you can execute: mockXHR()
 *
 * Currently MockJs will be used in the production environment,
 * please remove it before going online ! ! !
 */
if (process.env.NODE_ENV === 'production') {
  const { mockXHR } = require('../mock')
  mockXHR()
}


再往下到了 element-UI相关的,虽然最上面引入了 vue 和 ElementUI,但是为了方便的将 2 者融合使用,这里把ElementUI挂载到了Vue中。


// set ElementUI lang to EN
Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui,按如下方式声明
// Vue.use(ElementUI)


在最后,创建了一个 vue 对象:


new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})


之前在单学习 vue 的时候,写demo的时候都需要在 html 里 new 一个 vue 对象。


但是在使用框架的过程中,在各种页面vue组件里并没有再去创建,比如看接口定义的页面:


1268169-20211107230740145-695676401.png


并没有去 new vue,但是并不是不需要了,只是这个事情在main.js里做了。


在创建的过程中,指定了渲染的对象是el: '#app',# 是代表 id,id=app的元素,其实就是public/index.html中的<div id="app"></div>


1268169-20211107231045205-217521720.png


接着就会给这个 vue 对象挂载路由router,也就是上面导入进来的模块,也就是之前做开发的时候需要改造的一个地方。


1268169-20211107231516675-833521718.png


可以继续滑到router/index.js最底部:


1268169-20211107231559098-896502008.png


看到最终创建了router并且导出。


回到main.js,看最后的render: h => h(App)。这里的render是渲染引擎。


作用是渲染页面当中要展示的内容,也就是要展示组件。展示哪个组件?就是App,也就是上面导入来的根组件。


最终所有的组件都会显示到index.html中的<div id="app"></div>下。


3. src/router/index.js


路由就是上面提到的地方,在实际开发过程中,这里也是需要我们针对自己的项目进行改造的地方。


1268169-20211108122114847-1148917042.png


4. src/App.vue


顶层组件,也就是上面提到的根组件。


1268169-20211108122649677-2044633944.png


这里有个<router-view />,实际上就是路由出口,用来显示模板内容,这些模板就是src/views下的文件来定义的。


1268169-20211108123208287-115943099.png


比如上图中所示的我们开发中自己定义的组件内容,都会在路由出口这里展示。

那么一个path如何能展示对应的模板,肯定得有映射关系,就是定义在路由模块里的内容。


1268169-20211108123511909-285022617.png


以这个登录为例,当输入的路由等于/login,就会去找/views/login/index模板,最后 /views/login/index.vue就会显示在路由出口。


如果 chrome装了vue.js devtools插件,在登录页面按F12 可以看到组件嵌套详细:


1268169-20211108124043679-512457787.png


三、Layout 组件


除了上述几部分内容,还有一个与页面息息相关,就是 Layout 组件。在路由js文件里就已经出现过了。


1268169-20211108221533996-248898805.png


在路由里也是导入进来使用的,实际位置就是src/layout/index.vue


/* Layout */
import Layout from '@/layout'


1268169-20211108221838613-1202288927.png


1. 布局组件里的内容


打开src/layout/index.vue,看看里面都有什么。


1268169-20211108222216496-882251716.png


首先标记出来的有 3 个内容:


  • sidebar:侧边栏
  • navbar:导航栏
  • app-main:主内容区


对应到页面其实就是这样的:


1268169-20211108222359320-1342789247.png


继续往下看。


1268169-20211108222555057-1981075329.png


./components中导入了3个子组件,然后注册子组件。


1268169-20211108222723010-954010789.png


子组件注册好之后就可以在页面中调用了,也就是在上面刚介绍过的地方。


1268169-20211108223015145-159792861.png


这里框架里是可以不区分大小写的,AppMain小写不加驼峰就写成了app-main


所以现在来看到话,App.vue下面嵌套着LayoutLayout下面又嵌套着上面这3样。


1268169-20211108223400701-334935054.png


移动鼠标在不同组件上可以看到页面对应部分会高亮。


1268169-20211108223640989-275710793.gif


从外,我们的其他path也都有这个 layout,当我们的页面内容想能够展示在这个布局里,就使用这个Layout组件就好。


1268169-20211108223920151-1145626270.png


2. 嵌套到Appmain主区域里显示


path下的子节点的组件会嵌到 Layout 下的 Appmain组件里展示。


1268169-20211108224408988-1586818000.png


继续打开 Appmain 探索一番。


1268169-20211108224604330-838758542.png


看到里面嵌套了一个router-view路由出口,而在顶层的App.vue里也是有一个的。


1268169-20211108224853745-1252425761.png


那么现在就是:


  • App.vue 里有个路由出口
  • APP.vue 嵌套了 layout,layout里面又有这个 AppMain
  • AppMain 里也有一个 路由出口


而且AppMain所在的位置,就是页面的主内容区域。所以,AppMain 里的路由出口就是子路由出口了。而子路由出口就对应的子路由。


所以在路由模块里,children下面的就是子路由了。


1268169-20211108225501770-1316228455.png


那么现在/interfaceTest/apiManagement,这个路由对应的组件就是@/views/apiManagement/moduleTreeTable,会显示到主内容区域。


所以,当我们点击不同的子路由的时候,在主内容区域就可以看到不同的页面组件了。


1268169-20211108225934713-249359515.gif


到这里就是对于 vue-element-admin 前端框架的简单分析,帮助理解我们写的前端代码到底是怎么运作最终呈现出来。

相关文章
|
3天前
|
设计模式 前端开发 JavaScript
自动化测试框架设计原则与最佳实践####
本文深入探讨了构建高效、可维护的自动化测试框架的核心原则与策略,旨在为软件测试工程师提供一套系统性的方法指南。通过分析常见误区,结合行业案例,阐述了如何根据项目特性定制自动化策略,优化测试流程,提升测试覆盖率与执行效率。 ####
18 6
|
3天前
|
人工智能 前端开发 测试技术
探索软件测试中的自动化框架选择与优化策略####
本文深入剖析了当前主流的自动化测试框架,通过对比分析各自的优势、局限性及适用场景,为读者提供了一套系统性的选择与优化指南。文章首先概述了自动化测试的重要性及其在软件开发生命周期中的位置,接着逐一探讨了Selenium、Appium、Cypress等热门框架的特点,并通过实际案例展示了如何根据项目需求灵活选用与配置框架,以提升测试效率和质量。最后,文章还分享了若干最佳实践和未来趋势预测,旨在帮助测试工程师更好地应对复杂多变的测试环境。 ####
14 4
|
8天前
|
机器学习/深度学习 前端开发 测试技术
探索软件测试中的自动化测试框架选择与优化策略####
本文深入探讨了在当前软件开发生命周期中,自动化测试框架的选择对于提升测试效率、保障产品质量的重要性。通过分析市场上主流的自动化测试工具,如Selenium、Appium、Jest等,结合具体项目需求,提出了一套系统化的选型与优化策略。文章首先概述了自动化测试的基本原理及其在现代软件开发中的角色变迁,随后详细对比了各主流框架的功能特点、适用场景及优缺点,最后基于实际案例,阐述了如何根据项目特性量身定制自动化测试解决方案,并给出了持续集成/持续部署(CI/CD)环境下的最佳实践建议。 --- ####
|
9天前
|
Java 测试技术 持续交付
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
本文重点讲解如何搭建App自动化测试框架的思路,而非完整源码。主要内容包括实现目的、框架设计、环境依赖和框架的主要组成部分。适用于初学者,旨在帮助其快速掌握App自动化测试的基本技能。文中详细介绍了从需求分析到技术栈选择,再到具体模块的封装与实现,包括登录、截图、日志、测试报告和邮件服务等。同时提供了运行效果的展示,便于理解和实践。
42 4
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
|
6天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法,包括 props、事件、Vuex 状态管理等,帮助开发者选择最适合项目需求的通信方式,提高开发效率和代码可维护性。
|
6天前
|
存储 JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中,不同组件之间传递数据和事件的方法。常用的方式有:props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
|
8天前
|
测试技术 API Android开发
探索软件测试中的自动化框架选择与实践####
本文深入探讨了软件测试领域内,面对众多自动化测试框架时,如何依据项目特性和团队需求做出明智选择,并分享了实践中的有效策略与技巧。不同于传统摘要的概述方式,本文将直接以一段实践指南的形式,简述在选择自动化测试框架时应考虑的核心要素及推荐路径,旨在为读者提供即时可用的参考。 ####
|
10天前
|
机器学习/深度学习 自然语言处理 物联网
探索自动化测试框架的演变与未来趋势
随着软件开发行业的蓬勃发展,软件测试作为保障软件质量的重要环节,其方法和工具也在不断进化。本文将深入探讨自动化测试框架从诞生至今的发展历程,分析当前主流框架的特点和应用场景,并预测未来的发展趋势,为软件开发团队选择合适的自动化测试解决方案提供参考。
|
30天前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
127 2
|
30天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
37 0