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

一、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显示数据内容。

---

如果有收获！！！ 希望老铁们来个三连，点赞、收藏、转发。 创作不易，别忘点个赞，可以让更多的人看到这篇文章，顺便鼓励我写出更好的博客