(12/05/21) vue-element-admi介绍 & 后台系统基础环境搭建

1. vue-element-admin 介绍

  • vue-element-admin 是一个后台前端解决方案,它基于 Vue.jsElement-UI 实现,它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助你快速搭建企业级中后台产品原型,内部集成了PC项目中很多的业务场景和功能, 尤其在当下SPA的趋势下,我们可以从中获得很多成熟的解决方案。
    官网地址
    线上demo地址

2. vue-admin-template 介绍

  • vue-admin-template (在线运行效果) ------(官方文档)
  • vue-admin-template是在vue-element-admin的基础上做了大量的删减,只保留了后台管理系统最关键的框架部分,非常适合我们在此基础上做二次开发
  • 市面上使用vue技术栈开发的PC后台管理项目很大一部分都是基于vue-admin-template 进行的二次开发,我们的人资项目也基于它来实现

3. 下载运行vue-admin-template (官方文档)

$ git clone https://gitee.com/panjiachen/vue-admin-template.git # 从码云拉取代码 
$ cd vue-admin-template #切换到具体目录下
$ npm install  #安装所有依赖
$ npm run dev  #启动开发调试模式  查看package.json文件的scripts可知晓启动命令	

4. 认识vue-admin-template 目录结构

├── build                      # 构建相关
├── mock                       # 项目mock 模拟数据,在接口服务器没有就绪时,临时充当接口
├── public                     # 静态资源
│   ├── favicon.ico            # favicon图标
│   └── index.html             # html模板
├── src                        # 源代码
│   ├── api                    # 所有请求
│   ├── assets                 # 主题 字体等静态资源  不会参与打包  直接直出
│   ├── components             # 全局公用组件 和业务不相关  上传组件
│   ├── icons                  # 项目所有 svg icons
│   ├── layout                 # 全局 layout 负责搭建项目的整体架子结构 html结构
│   ├── router                 # 路由
│   ├── store                  # 全局 store管理 vuex管理数据的位置 模块化开发 全局getters
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局公用方法 request.js
│   ├── vendor                 # 公用vendor
│   ├── views                  # views 所有页面 路由级别的组件
│   ├── App.vue                # 入口页面 根组件
│   ├── main.js                # 入口文件 加载组件 初始化等
│   └── permission.js          # 权限管理
│   └── settings.js            # 配置文件
├── tests                      # 测试
├── .env.xxx                   # 环境变量配置
├── .eslintignore              # eslint 忽略文件
├── .eslintrc.js               # eslint 配置项
├── .gitignore                 # git 忽略文件
├── .travis.yml                # 自动化CI配置
├── .babel.config.js           # babel-loader 配置
├── jest.config.js             # 测试配置
├── vue.config.js              # vue-cli 配置
├── postcss.config.js          # postcss 配置
└── package.json               # package.json
  • src目录:在做项目时,最关注的就是src目录, 里面是所有的源代码和资源
  • 非src目录:一般都是对项目的环境和工具的配置

5. 认识src目录熟悉项目的运行机制

├── src                        # 源代码
│   ├── api                    # 所有请求
│   ├── assets                 # 主题 字体等静态资源
│   ├── components             # 全局公用组件
│   ├── icons                  # 项目所有 svg icons
│   ├── layout                 # 全局 layout
│   ├── router                 # 路由
│   ├── store                  # 全局 store管理
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局公用方法
│   ├── vendor                 # 公用vendor
│   ├── views                  # views 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
│   └── permission.js          # 权限管理
│   └── settings.js            # 配置文件
5.1 整体运行方式

整体运行方式

6. 重点文件

6.1 main.js
  • main.js是整个项目的入口文件(webpack中学习的入口文件
    入口文件
6.2 App.vue
  • App.vue是根组件
    App.vue
6.3 permission.js
  • permission.js 是控制页面登录权限的文件,在main.js中引入了它
    在这里插入图片描述
  • 此处的代码没有经历构建过程会很难理解, 所以先将此处的代码进行注释,等我们构建权限功能时,再从0到1进行构建。请直接注释代码即可
    在这里插入图片描述
6.4 settings.js
  • 对于一些项目信息的配置,里面有三个属性 title(项目名称),fixedHeader(固定头部),sidebarLogo(显示左侧菜单logo)

  • settings.js 中的文件在其他的位置会引用到,我们不用动它

6.5 Vuex
  • 当前的Vuex结构采用了模块形式进行管理共享状态,其架构如下
    vuex

其中app.js模块和settings.js模块,功能已经完备,不需要再进行修改。 user.js模块是我们后期需要重点开发的内容,所以这里我们将user.js里面的内容删除,并且导出一个默认配置

store/modules/user.js

export default  {
  namespaced: true,
  state: {},
  mutations: {},
  actions: {}
}
6.6 scss 和 icons
  • 该项目还使用了scss作为css的扩展语言,在**styles**目录下,我们可以发现scss的相关文件,相关用法 我们会在下一小节进行详细讲解
  • 图标字体使用,icons的结构如下
  • icons

7. 重置代码

  • 这里为了后续更清楚的书写代码,我们将原有代码注释掉,换成如下代码utils/request.js
// 导出一个axios的实例  而且这个实例要有请求拦截器 响应拦截器
import axios from 'axios'
const service = axios.create() // 创建一个axios的实例
// service.interceptors.request.use() // 请求拦截器
// service.interceptors.response.use() // 响应拦截器
export default service // 导出axios实例
  • 移除mock:由于我们本项目有配套的后端接口,所以不需要用到模拟数据,这里将mock部分删除掉。
    (1).main.js中删除(或注释)mock部分的功能
    (2) 删除**src/mock**文件夹

8. 小结

  1. 所有vue项目的关键文件都基本相同,可以理解为都是用vue脚手架工具创建出来的;
  2. vue-admin-template额外做了一些配置,我们可以直接使用;

9. 准备后端服务器

在这里插入图片描述

  1. 安装mongodb
  2. 后端服务-Nodejs
  3. 启动后端服务,文件第一次启动要用 npm run start ( 后续运行npm run serve)
9.1 测试接口服务器
  • 用postman工具,测试接口服务器的功能
  • localhost:3000/api/sys/login
    测试账号:13800000002 密码: 123456
    在这里插入图片描述
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
根据提供的引用内容,可以看出用户发送了一个POST请求到URL为http://localhost:9528/dev-api/vue-admin-template/user/login,并且发送的json数据为{ "username": "admin", "password": "111111" }。返回的数据为{ "code": 20000, "data": { "token": "admin-token" } }。\[1\] 然后用户发送了一个GET请求到URL为http://localhost:9528/dev-api/vue-admin-template/user/info?token=admin-token,并且发送的数据为admin-token。返回的数据为{ "code": 20000, "data": { "roles": \["admin"\], "introduction": "I am a super administrator", "avatar": "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif", "name": "Super Admin" } }。\[2\] 根据提供的代码,可以看出用户在src/api/user.js文件中修改了对应的访问地址,其中login函数发送了一个POST请求到URL为/admin/vod/user/login,getInfo函数发送了一个GET请求到URL为/admin/vod/user/info,logout函数发送了一个POST请求到URL为/admin/vod/user/logout。\[3\] 根据提供的信息,问题中的URL为http://localhost:9527/dev-api/vue-element-admin/user/login,返回了404 (Not Found)错误。根据提供的引用内容,我们无法得知为什么会返回404错误,可能是URL地址不正确或者该接口不存在。建议检查URL地址是否正确,并确保该接口存在。 #### 引用[.reference_title] - *1* *2* *3* [直播课堂系统06-搭建项目前端环境](https://blog.csdn.net/z754916067/article/details/125976873)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值