前端框架开发过程介绍 | 学习笔记

简介: 快速学习 前端框架开发过程介绍

开发者学堂课程【微服务+全栈在线教育实战项目演练(SpringCloud Alibaba+SpringBoot)前端框架开发过程介绍】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/667/detail/11334


前端框架开发过程介绍


框架使用过程

1、框架使用过程:

首先了解一下学习的方式。二次开发是在原有功能基础上进行添加的过程。所以同理,现在是在框架模板基础之上往里面加功能。

在框架模板基础上加功能的最简单的一种做法是先学会模仿再独立开发,先学习别人怎么做再独立开发。

例如,要添加讲师管理模块就可以运用这种方法,首先先看里面的功能,因为它在里面自带了功能。

首先看过程,第一部分,一会要添加讲师管理模块。按这个过程中,下图左面这一部分表面上看叫做菜单。

但在 vue 这部分菜单叫做路由。例如一会要做讲师管理,在里面也要加一个路由也就叫讲师管理,做的讲师管理里面有讲师列表、最佳讲师,这是做的第一步操作。

模板的入口有两个地方其中一个是 main.js。在 main.js 中找到 import router from’,/router’,router 最终会加载,所以 router 里面是写路由的。找到 router 的位置,在 src 下面一处叫 router,router 里面有一个文件叫 index.js。所以添加路由就是在 router 的 index.js 中把路由加上,这就是要找的位置。再看一下其中代码,这里的代码不需更改什么。

它的路由其实是在下列代码里面

export const constantRouterMap = [

{ path:’/login’,component:() => import(‘@/views/login/index’),hidden:true },

{ path:’/404’, component:() => import(‘@/views/404’),hidden:true}

{

path:’/’,

component:Layout,

redirect:’/dashbroad’,

name:’Dashboard’

hidden:true

chirdren: [{

path:’dashboard’,

component: () => import(‘@views/dashboard/index’)

}]

这个是个宿主形式,然后会发现里面有许多的括号。每个括号是一个

对象,再看一下具体的。例如在下面这串代码中。

meta:{ title:’Example’, icon:’example’},

这个叫

example,

然后

path:’table’

中叫

table,

meta:{ title:’Tree’,icon:’tree’}

中叫

tree。

有一个 Example,里面有 Table、Tree,所以这个路由是

按照下面代码的结构添加的路由。

{

path: ‘/example’,

component:Layout,

redirect:’/example/table’,

name: ‘Example’,

meta: { tittle: ‘Example’, icon: ‘example’ }

children: [

{

path: ‘table’,

name: ’Table’

component: ( ) =>import(‘@views/table/index’),

meta: { title: ‘Table’, icon: ‘table’ }

},

{

path: ’tree’,

name: ‘Tree’,

component: ( ) => import(‘@/views/tree/index’).

meta: { title: ‘Tree’, icon: ‘tree’ }

下面还有一个是 Nested,里面有 Menu1、menu2,Menu1、menu2加的是以下这个位置。

这就是它添加路由的方式。一会添加路由就可以参考这种方式,比如叫讲师管理,添加讲师、讲师列表。

按照这些就可以添加,按照它就可以加出来,可以将这个代码复制一份改出来即可。

{

path: ‘/example’,

component: Layout,

redirect: ‘/example/table’,

name: ‘Example’,

meta: { title: ‘Example’, icon: ‘example’ }

children: [

{

path:’table’

name:’Table’

componment: ( ) => import(‘@/views/table/index’)

meta: { title: ‘table’, icon:’table’}

},

{

path: ’tree’,

name: ’Tree’,

component: ( ) => import(‘@/views/table/index’),

meta: { title: ‘Tree’, icon:’tree’}

}

路由就可以这样改。例如一会在 example 处改为讲师管理,在 Table

处可以叫添加讲师,Tree 处可以叫讲师列表,将这个改一份即可,

将这个复制一份然后加上这个即可,这就是怎么添加路由,后面都可

以这样更改,这是第一步操作。

路由在 src 的 router 的 index 中里面有许多的示例代码,按照示例

代码更改即可,直接复制进行更改即可,这就是第一步添加路由。加

完以后,以 Tree 为例,看它是如何做到的。

比如现在,将路由点开,点击 Tree,会发现页面中显示 Tree 里面的

内容,点 Table 是 Table 里面的内容,点 Form 是 Form 里面的内

容,接着看这是如何做到的。

这是第二步,当点击某个路由,要显示路由中的内容,这是它的第二

步操作。第二步就是点击路由,显示路由对应页面的内容。

还是来到 index 中,

{

path: ‘/example’,

component: Layout ,

redirect: ‘/example/table’,

name: ‘Example’,

meta: { title: ’Example’, icon:’example’ },

children: [

{

path: ‘table’,

name: ‘Table’,

meta: { title: ‘Table’, icon: ‘table’ }

},

{

path: ‘tree’,

name: ‘Tree’,

component: ( ) => import(‘@/views/tree/index’),

这是一个它的一个默认结构,然后它里面是有一个复杂结构,有对象有速度,然后速度里面有一个 children:【,里面有 Table、Tree,然后刚才做的是当点击 Tree,它会跳到页面。

那么它是如何做的,需要看 component 这一行,在 import 里面引入页面的位置,所以它里面的做法就是这样来做的。

component 这一行的意思是路由对应页面的引入,页面现在的默认就是 views、table、index,然后这里面加了一个@/,@/相当于./,只不过在页面中不认识./,所以现在这就是页面的位置,位置就由这个做到。

接着找一下页面,看地址叫 views,然后就找 views,在 views 里面有一个 tree,tree 里面有一个 index.vue,它的页面就是在以下这个位置。

比如一会要写的路由,写一个讲师管理,里面有添加讲师、讲师列表,

按照这个结构,写页面也按照这个来写,用 import 引入,在 views

里面就可以创建它的页面。建页面叫 teacher,里面写页面,但是它

的页面用的都是 vue 这个页面,这就是第二步操作。

点击路由

显示对应页面,然后在 views 里面创建 vue 页面,这就是第二步。

接着向下看第三步操作,页面中要写具体功能就是实现具体的功能。

功能的实现要先找一下页面,将页面打开,就是 tree 的 index,然

后看怎么做。

首先在页面的下面这部分

<template>

<div class=”app-container”>

<el-input v-model=”filterText” placeholder=”Filter keyword” style=”margin-bottom:30

<el-tree

ref=”tree2”

:data=”data2”

:props=”defaultprops”

:filter-node-method=”filterNode”

class=”filter-tree”

default-expand-all

/>

这部分用的是 iment.ui 部分,接着找一个更详细的部分,看 table 的 index.vue,

如下

import { getList } from ‘@/api/table’

export default {

filters: {

statusFilter(status) {

const statusMap = {

published: ‘success’,

draft: ‘gray’,

deleted: ‘danger’

}

return statusMap[status]

}

},

data( ) {

return {

list: null,

它上的是 element.ui 这部分,向下看 import 这一行,import fron 是引入加的 js 文件,所以在易变中要引入文件。

而在文件中要干什么要先看文件的地址,在 src 的 api 的 table 这个位置,这里面就是定义接口的地址,所以说第三步要先做这个事情。在 api 中,比如一会做讲师,那建一个 table.js,然后里面创建一个接口的定义,比如列表加提交方式,这就是第三步。

第三步就是在 api 文件创建 js 文件,定义接口地址和参数。当然定义完全可以参考以下这个写法。

import request from ‘@/utils/request’

export function getList(params) {

return request({

ur1: ‘/table/list’,

method: ‘get’,

params

})

}

而写法中主要改的就是 ur1至 params 这一行,其他地方是固定的。第一个地方是直接引入一个组件,它们直接分装好的 axios 部分。再看一遍,里面将 axios 做了一个分装,所以在里面要将这个引入进来,引入之后下面定义自己的方法,也就是接口地址、接口提交方式和对应的参数。

接着进入第四步,在创建 vue 页面引入js文件,调用方法实现功能。接着看一个具体的,

<script>

import { getList } from ‘@/api/table’

export default {

filters: {

statusFilter(status) {

const statusMap = {

published: ‘success’,

draft: ‘grey’,

在这里面先引入了这个文件,引入之后按照之前描述的结构 data、created、methods 包括写的方法做调用,这个初始值,所以在页面中就做这个事情,先引入再写这个结构。

引入

import user from’...’

data: {

created( ) {

},

methods: {

}

按这样就可以将数据得到,然后都得到之后,就可以运用之前学到 element.ui,包括在页面中最终就做了显示,这部分用到的就是 element.ui 中的组件做了一个显示。最后使用 element-ui 显示数据内容,主要就是这样。以上就是开发的完整的流程。

2、总结:

首先第一步要做开发,先在里面加一个路由,比如一会做讲师管理,那加一个讲师管理的路由,里边叫添加讲师、讲师列表,这是第一步。然后第二步,当点击某个路由,会显示不同的页面,所以第二步操作就是创建一个页面,页面创建在路由中设置地址,在 biews 中创建页面,页面都是 vue 页面,这是第二步。

然后第三步因为页面中要调用接口,所以在 api 文件中创建一个文件,这个文件专门接口地址的定义,是一个固定的结构。

定义之后,最后一步,在页面中引入这个文件,然后调用方法进行操作就是写的 axios 过程 data、created、methods,用它调用,都调用之后也得到了数据,最后用 element.ui 显示内容。

相关文章
|
5天前
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
29 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
7天前
|
JSON 前端开发 测试技术
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
51 10
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
|
11天前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
141 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
14天前
|
Dart 前端开发 Android开发
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
37 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
16天前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
121 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
24天前
|
Dart 前端开发 容器
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
75 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
26天前
|
缓存 前端开发 IDE
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
27 0
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
27天前
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
116 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
29天前
|
缓存 前端开发 Android开发
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
79 12
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
|
29天前
|
JavaScript 前端开发 jenkins
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
55 10

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 4
    详解智能编码在前端研发的创新应用
  • 5
    巧用通义灵码,提升前端研发效率
  • 6
    智能编码在前端研发的创新应用
  • 7
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 8
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 9
    抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
  • 10
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
  • 1
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    29
  • 2
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    51
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 4
    巧用通义灵码,提升前端研发效率
    93
  • 5
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    141
  • 6
    详解智能编码在前端研发的创新应用
    96
  • 7
    智能编码在前端研发的创新应用
    83
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    37
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    121
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    75