94.【el-admin 开源项目分析】

1.开源项目链接:

• 源码链接:https://gitee.com/elunez/eladmin

2.Git上分析基本架构

后端分析

前端分析

3.下载前端zip 和 后端 zip (优先Git)

• 下载完毕之后，不要着急运行
  观察
• 1.运用了哪些技术?
• 2.是否拥有数据库?
• 3.你的环境是否匹配?
  
  解压
  

4.跑起来第一步:

• 1.安装数据库,执行sql语句

1.我们发现作者没有创建数据库，数据库的语句需要我们自己去创建。

• 2.前端需要跑起来

# 配置镜像加速
https://www.ydyno.com/archives/1219.html

# 安装依赖
npm install

# 启动服务 localhost:8013
npm run dev

# 构建生产环境
npm run build:prod

CMD进行输入

安装和下载环境

• 3.后端项目导入跑起来
  

• 4.启动后端项目
  

只要发现Swagger,那么跑起来第一步就是进入Swagger-ui页面，因为这里都是接口

进而查看配置文件! 默认端口，有哪些配置，需要改为自己的项目和环境地址!

前端就是⭐安装依赖⭐,启动测试运行,看接口是否正常.

启动运行:

5.前后端分离固定套路

• 1.从前端开始分析，打开控制台，点一个接口，分析一波调用关系
• 2.前后端端口调用不一致 : 后端8000 前端8013 怎么操作的?
• （1）.封装了接口请求 ajax sxious
  
• (2).找到前端的开发配置文件： 前后端分离的项目的重点:找到接口的调用关系
• (3).springBoot提供服务！前端调用接口数据! Vue负责渲染页面!

ENV = 'development'

# 接口地址
VUE_APP_BASE_API  = 'http://localhost:8000'
VUE_APP_WS_API = 'ws://localhost:8000'

# 是否启用 babel-plugin-dynamic-import-node插件
VUE_CLI_BABEL_TRANSPILE_MODULES = true

• 3.前端项目固定套路
  
• 4.通过抓取前端的请求,找到后端对应的接口
  
• shift+shift 全局搜索。 ctrl+f 局部搜索

• Vue标准套路: (三层)
  

<template>
  
</template>

<script>
export default {

}
</script>

<style>

</style>