一、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显示数据内容。
如果有收获!!! 希望老铁们来个三连,点赞、收藏、转发。
创作不易,别忘点个赞,可以让更多的人看到这篇文章,顺便鼓励我写出更好的博客