项目笔记9：vue-admin-template框架使用

深碍√TFBOYSˉ_ 2022-11-17 14:49 101阅读 0赞

流程：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NreV9yYWJiaXQ5NA_size_16_color_FFFFFF_t_70][]1、现在rooter下的index.js添加路由，比如页面左侧菜单栏

2、在index.js文件中，添加路由对应的界面，界面在view-tree下创建（index.vue）

路由关联界面代码：

component: () => import('@/views/login/index')

3、在api下创建js，定义接口地址和参数：

import request from '@/utils/request'
    
    export function login(username, password) {
      return request({
        url: '/eduservice/user/login',
        method: 'post',
        data: {
          username,
          password
        }
      })
    }

4、在创建的vue页面中引入js文件，调用方法实现功能，最后使用element-ui显示数据内容

data用于定义变量和初始值，created页面渲染之前执行，一般调用methods定义方法，methods创建具体的方法，调用api中js定义的方法

import { isvalidUsername } from '@/utils/validate'

讲师列表示例:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NreV9yYWJiaXQ5NA_size_16_color_FFFFFF_t_70 1][]

注：

element-ui中

：表示v-bind 单项绑定

@表示v-on 事件绑定

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NreV9yYWJiaXQ5NA_size_16_color_FFFFFF_t_70]: /images/20221022/ee4de5d81940472ca1836f9efc419760.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NreV9yYWJiaXQ5NA_size_16_color_FFFFFF_t_70 1]: /images/20221022/51c7f596d6d443e98a3ba3626c3d97e6.png

发表评论取消回复

表情：

评论列表（有 0 条评论，101人围观）

还没有评论，来说两句吧...

相关阅读

相关 SpringDataJPA框架使用笔记

SpringDataJPA框架使用笔记什么是JPA jpa概念 JPA是Java中用于实现对象关系映射ORM的API标准， JPA提供了一种

布满荆棘的人生/ 2024年03月23日 17:26/ 0 赞/ 42 阅读

相关 spring-cache框架使用笔记

spring-cache框架使用笔记什么是spring-cache框架 spring-cache是spring框架中的一个缓存抽象层，它提供了一

待我称王封你为后i/ 2024年03月23日 17:26/ 0 赞/ 32 阅读

相关项目笔记9：vue-admin-template框架使用

流程： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N

深碍√TFBOYSˉ_/ 2022年11月17日 14:49/ 0 赞/ 102 阅读

相关 [笔记]vue搭建基础项目框架

vue步骤 1. 确保已经安装了vue、npm 2. 在终端执行指令vue ui 3. 在第二步打开的页面点击安装插件 ![在这里插入图片描述][wat

布满荆棘的人生/ 2022年10月31日 00:47/ 0 赞/ 166 阅读

相关 11.9笔记

CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳

谁借莪１个温暖的怀抱￠/ 2022年08月13日 18:32/ 0 赞/ 94 阅读

相关使用Yii框架部署项目

yii框架项目部署，首先搭建好PHP环境，然后下载到官网下载yii framwork：[http://www.yiiframework.com/][http_www.yiifr

左手的ㄟ右手/ 2022年08月08日 15:55/ 0 赞/ 160 阅读

相关 Crackme9-笔记

链接：[https://www.52pojie.cn/thread-615320-1-1.html][https_www.52pojie.cn_thread-615320-1-

深藏阁楼爱情的钟/ 2022年05月27日 09:49/ 0 赞/ 80 阅读

相关渗透笔记(9)

1、在Webshell中，如果上传文件时提示缺少对象。可以尝试写一句话，用菜刀连接之后用菜刀上传文件。 2、使用meterpreter的ha

谁借莪１个温暖的怀抱￠/ 2022年05月18日 03:26/ 0 赞/ 175 阅读

相关 vue项目中使用swiper框架

第一步：安装swiper 在项目目录下打开命令窗口输入命令:npm install swiper 第二步：引入js文件 ![在这里插入图片描述][watermark_

超、凢脫俗/ 2022年02月13日 09:49/ 0 赞/ 226 阅读

相关 vue项目笔记（9）-Git代码管理-创建分支

创建分支的步骤打开码云，创建一个Git分支，在分支上开发首页轮播图，同理，开发一个新的功能便创建一个分支，开发完成后，合并到主分支上即可。具体步骤如下： 1、打开

系统管理员/ 2021年09月16日 02:14/ 0 赞/ 310 阅读