程序员经验分享-hwhale

谷粒学院（六）前端页面搭建说明 | vue-element-admin

2023-05-16

文章目录

    • 一、vue-element-admin
      • 1、简介
      • 2、安装
    • 二、前端页面环境说明
      • 1、前端框架入口
      • 2、前端页面使用框架模板，主要基于两种技术实现出来
      • 3、目录结构介绍
    • 三、项目的创建和基本配置
      • 1、创建项目
      • 2、修改项目信息
      • 3、如果需要修改端口号
      • 4、登录页修改
      • 5、页面零星修改
    • 四、把系统登录功能改造本地（模拟登录）
      • 1、系统登录默认使用这个地址
      • 2、把登录请求地址改造本地
      • 3、进行登录调用两个方法，login登录操作方法，和info登录之后获取用户信息的方法。所以，创建接口两个方法实现登录
      • 4、开发接口
      • 5、修改api文件夹login.js修改本地接口路径
      • 6、最终测试，出现问题
      • 7、跨域解决方式
    • 五、框架使用过程
      • 1、添加路由
      • 2、点击某个路由，显示路由对应页面内容
      • 3、在api文件夹创建js文件，定义接口地址和参数
      • 4、在创建vue页面引入js文件，调用方法实现功能
      • 5、使用element-ui显示数据内容。

一、vue-element-admin

1、简介

而vue-element-admin是基于element-ui 的一套后台管理系统集成方案。

功能：https://panjiachen.github.io/vue-element-admin-site/zh/guide/#功能

GitHub地址：https://github.com/PanJiaChen/vue-element-admin

项目在线预览：https://panjiachen.gitee.io/vue-element-admin

2、安装

1、下载模板框架压缩文件

这里我们使用171KB的 vue-admin-template-master.zip。

在这里插入图片描述
2、将文件解压到工作区里面

3、通过vscode的终端打开解压文件夹，进行依赖安装

# 安装依赖
npm install

注意：使用npm下载时，出现错误 Unexpected end of JSON input while parsing near···
解决方法：先清除缓存，再重新安装

# 清除缓存
npm cache clean --force

在这里插入图片描述

4、启动下载好依赖项目

# 启动。执行后，浏览器自动弹出并访问http://localhost:9527/
npm run dev

在这里插入图片描述

二、前端页面环境说明

1、前端框架入口

在这里插入图片描述

2、前端页面使用框架模板，主要基于两种技术实现出来

vue-admin-template 模板 = vue + element-ui

3、目录结构介绍

  • build目录：放项目构建的脚本文件
  • config目录：全局配置
  • node_modules目录：项目依赖模块
  • src：项目源代码
  • static：静态资源
  • package.jspon：项目信息和依赖配置
config
├── index.js  // 修改useEslint:true，值修改为false
└── dev.env.js // 修改访问后端接口地址

src
├── api // 各种接口，定义调用方法
├── assets // 图片等资源 
├── components // 各种公共组件，非公共组件在各自view下维护 
├── icons // 图标 
├── router // 路由表 
├── store // 存储 
├── styles // 各种样式 
├── utils // 公共工具，非公共工具，在各自view下维护 
├── views // 各种layout，具体页面
├── App.vue //***项目顶层组件*** 
├── main.js //***项目入口文件***
└── permission.js //认证入口

三、项目的创建和基本配置

1、创建项目

将vue-admin-template-master重命名为guli-admin

2、修改项目信息

package.json

{
    "name": "guli-admin",
    ......
    "description": "谷粒学院后台管理系统",
    "author": "Helen <55317332@qq.com>",
    ......
}

3、如果需要修改端口号

config/index.js中修改

port: 9528

4、登录页修改

src/views/login/index.vue（登录组件）
4行

<h3 class="title">谷粒学院后台管理系统</h3>

28行

<el-button :loading="loading" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
    登录
</el-button>

5、页面零星修改

1、标题

index.html（项目的html入口）

<title>谷粒学院后台管理系统</title>

修改后热部署功能，浏览器自动刷新

2、国际化设置

打开 src/main.js（项目的js入口），第7行，修改语言为 zh-CN，使用中文语言环境，例如：日期时间组件

import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n

3、icon

复制 favicon.ico 到根目录

4、导航栏文字

src/views/layout/components（当前项目的布局组件）
src/views/layout/components/Navbar.vue

13行

<el-dropdown-item>
    首页
</el-dropdown-item>

17行

<span style="display:block;" @click="logout">退出</span>

5、面包屑文字

src/components（可以在很多项目中复用的通用组件）
src/components/Breadcrumb/index.vue
38行

meta: { title: '首页' }

四、把系统登录功能改造本地（模拟登录）

1、系统登录默认使用这个地址

在这里插入图片描述

2、把登录请求地址改造本地

修改配置文件请求地址，在config文件夹里面有dev.env.js

//BASE_API: '"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"',
BASE_API: '"http://localhost:8001"',

3、进行登录调用两个方法，login登录操作方法，和info登录之后获取用户信息的方法。所以，创建接口两个方法实现登录

通过查看/src/store/modules/user.js文件发现：

（1）login 返回token值
（2）info 返回roles、name、avatar头像。

4、开发接口

创建EduLoginController类

@RestController
@RequestMapping("/eduservice/user")
@CrossOrigin  //解决跨域
public class EduLoginController {
    
    //login
    @PostMapping("login")
    public R login() {
        return R.ok().data("token","admin");
    }
    
    //info
    @GetMapping("info")
    public R info() {
        return R.ok().data("roles","[admin]").data("name","admin").data("avatar","https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");
    }
    
}

5、修改api文件夹login.js修改本地接口路径

在这里插入图片描述

6、最终测试，出现问题

在这里插入图片描述
跨域问题：通过一个地址去访问另外一个地址，这个过程中如果有三个地址任何一个不一样

访问协议  http    https
ip地址  	192.18.1.1   172.11.11.11
端口号    9528     8001

7、跨域解决方式

（1）在后端接口controller添加注解（常用）

@CrossOrigin  //解决跨域
public class EduLoginController {

（2）使用网关解决（后面会说）

五、框架使用过程

1、添加路由

在这里插入图片描述

2、点击某个路由，显示路由对应页面内容

在这里插入图片描述
对应页面是

在这里插入图片描述

3、在api文件夹创建js文件，定义接口地址和参数

在这里插入图片描述

4、在创建vue页面引入js文件，调用方法实现功能

引入 import user from '.....'

data:{
},
created(){
},
methods:{
}

5、使用element-ui显示数据内容。

如果有收获！！！ 希望老铁们来个三连，点赞、收藏、转发。
创作不易，别忘点个赞，可以让更多的人看到这篇文章，顺便鼓励我写出更好的博客
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

谷粒学院（六）前端页面搭建说明 | vue-element-admin 的相关文章

  • Git实用命令大全（附思维导图）

    一 平时我们经常用的命令 1 基础命令 span class token comment 初始化 span span class token function git span init span class token comment 将

  • 面向对象（3/3）抽象类，接口、内部类、代码块

    文章目录 1 java lang Object1 61 61 和equals 的使用2 equals 方法的重写3 toString 的使用 2 JUnit单元测试的使用3 包装类面试题 4 static关键字的使用5 设计模式单例设计模式

  • 常用类String、时间日期类

    文章目录 1 String1 xff09 String内存解析2 xff09 String的使用3 xff09 String实例化4 xff09 图解两种创建字符串方式的区别5 xff09 图解字符串的存储6 xff09 图解字符串对象的存

  • 图书馆管理系统【SSM含SQL文件】

    项目源代码 https gitee com StarSea007 mylibrary ssm 编译环境 jdk 1 8mysql 5 0 及以上tomcat 8 框架 Spring 43 SpringMvc 43 Mybatis jar包管

  • Servlet及相关接口 【最全总结】

    1 Servlet 简介 1 xff09 从广义上来讲 xff0c Servlet 规范是 Sun 公司制定的一套技术标准 xff0c 包含与 Web 应用相关的一系列接口 xff0c 是 Web 应用实现方式的宏观解决方案 而具体的 Se

  • springmvc请求参数绑定 | 中文乱码 | 自定义类型转换器

    1 绑定的机制 表单中请求参数都是基于 key 61 value 的 SpringMVC 绑定请求参数的过程是通过把表单提交请求参数 xff0c 作为控制器中方法参数进行绑的 例如 xff1a span class token operat

  • 转发与重定向【面试题】

    请求转发与重定向 请求转发和重定向是 web 应用页面跳转的主要手段 xff0c 应用十分广泛 xff0c 所以我们一定要搞清楚他们的区别 1 请求转发 1 xff09 第一个 Servlet 接收到了浏览器端的请求 xff0c 进行了一定

  • 路径问题：相对路径与绝对路径

    1 提出问题 创建 Web 应用 Path xff0c 目录结构如图所示 在 a html 中有超链接 lt a href 61 34 b html 34 gt To b html lt a gt 如果先直接访问 a html xff0c

  • PyTorch：torch.Tensor.repeat()、expand()

    目录 1 torch Tensor repeat 2 torch Tensor expand 1 torch Tensor repeat 函数定义 xff1a repeat sizes Tensor 作用 xff1a 在指定的维度上重复这个

  • Cookie学习笔记

    1 cookie 简介 1 1 什么是 cookie cookie xff0c 有时我们也用其复数形式 cookies xff0c 是服务端保存在浏览器端的数据片段 以 key value 的形式进行保存 每次请求的时候 xff0c 请求头

  • mybatis中关于example类详解

    一 什么是example类 mybatis generator会为每个字段产生如上的Criterion xff0c 如果表的字段比较多 产生的Example类会十分庞大 理论上通过example类可以构造你想到的任何筛选条件 在mybati

  • springmvc实现文件上传与下载【单张及多张图片】

    一 springmvc实现文件上传的步骤 1 实现上传单张图片 1 导入pom 坐标 span class token comment lt 文件上传 gt span span class token tag span class toke

  • SpringBoot 搭建的个人博客

    介绍 blog是基于SpringBoot 搭建的个人博客 xff0c 响应式 前端技术 xff1a html css js jq bootstrap 后台技术 xff1a springboot thymeleaf mybatis mysql

  • SpringCloud（一）微服务概述

    文章目录 微服务概述什么是微服务微服务与微服务架构微服务的优缺点优点缺点 微服务的技术栈为什么选SpringCloud作为微服务架构选型依据当前各大IT公司的微服务架构各微服务的框架对比 SpringCloud入门概述SpringCloud

  • SpringCloud（二）入门案例之支付模块与订单模块的调用

    SpringCloud xff08 一 xff09 微服务概述 xff1a https blog csdn net weixin 45606067 article details 108481733 构建SpringCloud工程 概述 x

  • SpringCloud（三）Eureka服务注册中心

    文章目录 1 Eureka基础知识什么是服务治理什么是服务注册Eureka两大组件 2 Eureka介绍及原理理解介绍原理 3 单机版Eureka 构建步骤4 集群版Eureka 构建步骤Eureka集群原理说明EurekaServer集群

  • SpringCloud（四）zookeeper介绍及原理

    SpringCloud xff08 四 xff09 zookeeper介绍及原理 xff1a https blog csdn net weixin 45606067 article details 108499344 Zookeeper服务

  • docker 的安装 - 常用命令 - 应用部署

    文章目录 1 Docker简介什么是虚拟化什么是Docker容器与虚拟化比较Docker 组件1 Docker服务器与客户端2 Docker镜像与容器3 Register xff08 注册中心 xff09 2 Docker安装与启动安装Do

  • SpringCloud（六）Ribbon负载均衡服务调用

    Ribbon负载均衡 概述 是什么 Spring Cloud Ribbon是基于Netflix Ribbon实现的一套客户端 负载均衡工具 简单的说 xff0c Ribbon是Netflix发布的开源项目 xff0c 主要功能是提供客户端的

  • Python：map()函数使用详解

    1 函数定义 xff1a map function iterable 2 作用 xff1a 该函数通过接收一个函数function作为处理函数 xff0c 然后接收一个参数序列iterable xff0c 并使用处理函数对序列中的每个元素逐

随机推荐

热门标签