0
点赞
收藏
分享

微信扫一扫

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


文章目录

  • ​​一、vue-element-admin​​
  • ​​1、简介​​
  • ​​2、安装​​
  • ​​二、前端页面环境说明​​
  • ​​1、前端框架入口​​
  • ​​2、前端页面框架模板技术介绍​​
  • ​​3、目录结构介绍​​
  • ​​三、项目的创建和基本配置​​
  • ​​1、创建项目​​
  • ​​2、修改项目信息​​
  • ​​3、修改端口号​​
  • ​​4、登录页修改​​
  • ​​5、页面零星修改​​
  • ​​四、把系统登录功能改造本地(模拟登录)​​
  • ​​1、修改系统登录默认地址​​
  • ​​2、分析登录调用的两个方法​​
  • ​​3、开发后端登录接口​​
  • ​​4、修改/src/api/login.js中本地接口路径​​
  • ​​5、进行测试​​
  • ​​五、框架使用过程​​
  • ​​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

谷粒学院(六)前端页面搭建说明 | vue-element-admin_前端页面

2、将文件解压到工作区里面

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

# 安装依赖
npm install

谷粒学院(六)前端页面搭建说明 | vue-element-admin_前端_02

4、启动下载好依赖项目

谷粒学院(六)前端页面搭建说明 | vue-element-admin_前端_03

二、前端页面环境说明

1、前端框架入口

谷粒学院(六)前端页面搭建说明 | vue-element-admin_前端页面_04

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,具体的页面,均以.vue结尾
├── App.vue //***项目顶层组件***
├── main.js //***项目入口文件***
└── permission.js //认证入口

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

1、创建项目

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

2、修改项目信息

package.json

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

3、修改端口号

config/index.js中修改

port: 9528

4、登录页修改

src/views/login/index.vue(登录组件)

<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

meta: { title: '首页' } //38行

四、把系统登录功能改造本地(模拟登录)

1、修改系统登录默认地址

修改config/dev.env.js文件:

谷粒学院(六)前端页面搭建说明 | vue-element-admin_前端页面_05

2、分析登录调用的两个方法

通过查看​​/src/store/modules/user.js​​​ 和 ​​/src/api/login.js​​文件发现:

  • login() 返回token. GET方式
  • info() 返回roles、name、avatar头像。 POST方式

3、开发后端登录接口

@Api(description = "管理员登录")
@RestController
@RequestMapping("/eduservice/user")
@CrossOrigin //解决跨域问题
public class EduLoginController {
//login功能
@ApiOperation("登录获取token")
@PostMapping("login")
public R login(){
return R.ok().data("token", "admin");
}

//info
@ApiOperation("获取管理员信息")
@GetMapping("info")
public R info(){
return R.ok().data("roles", "[admin]").data("name", "zhangsan").data("avatar", "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");
}
}

4、修改/src/api/login.js中本地接口路径

谷粒学院(六)前端页面搭建说明 | vue-element-admin_vue.js_06

5、进行测试

谷粒学院(六)前端页面搭建说明 | vue-element-admin_前端_07

跨域问题:通过一个地址去访问另外一个地址,这个过程中如果有三个地址任何一个不一样

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

解决方式:

  • 在后端接口controller添加注解​​@CrossOrigin​
  • 使用SpringCloud GatWay解决(后面讲解)

五、框架使用过程

1、添加路由

谷粒学院(六)前端页面搭建说明 | vue-element-admin_javascript_08

谷粒学院(六)前端页面搭建说明 | vue-element-admin_ico_09

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

谷粒学院(六)前端页面搭建说明 | vue-element-admin_前端页面_10

谷粒学院(六)前端页面搭建说明 | vue-element-admin_ico_11

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

谷粒学院(六)前端页面搭建说明 | vue-element-admin_前端页面_12

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

谷粒学院(六)前端页面搭建说明 | vue-element-admin_vue.js_13

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

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

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

谷粒学院(六)前端页面搭建说明 | vue-element-admin_vue.js_14


举报

相关推荐

0 条评论