后台管理总结

qq_33446686

于 2022-09-13 16:14:40 发布

阅读量304

点赞数

分类专栏：开发类文章标签： vue.js javascript 前端

原文链接：https://blog.csdn.net/m0_62155698/article/details/124740816?ops_request_misc=&request_id=&biz_id=102&utm_term=$http.get(%27reports/type/1%27)&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-1-124740816.142^v47^body_digest,20

版权

开发类专栏收录该内容

8 篇文章 0 订阅

订阅专栏

提示：以下是本篇文章正文内容，下面案例可供参考

本地接口baseurl根地址http://localhost:8888/api/private/v1/

登录流程：

一…登录总思路 -baseurl/login

1.在登录页面输入用户名和密码

2.调用后台接口进行验证

3.通过验证之后，根据后台的响应状态跳转到项目主页

登录组件布局

通过 Element-UI 组件实现布局

el-form el-form-item el-input el-button

实现登录

通过 axios 调用登录验证接口

登录成功之后保存用户 token 信息

跳转到项目主页

const {data: res } = await this. $h ttp . p os t (^{'} l o g i n^{'}, t hi s . l o g in F or m) i f (res . m e t a . s t a t u s! == 200) re t u r n t hi s .$ message.error(‘登录失败！’)
// 提示登录成功
this. $m ess a g e . s u ccess (^{'} 登录成功！^{'}) // 把登录成功的 t o k e n 保存到 sess i o n St or a g e w in d o w . sess i o n St or a g e . se t I t e m (^{'} t o k e n^{'}, res . d a t a . t o k e n) // 使用编程式导航，跳转到后台主页 t hi s .$ router.push(‘/home’)

3. 路由导航守卫控制访问权限

如果用户没有登录，但是直接通过 URL 访问特定页面，需要重新导航到登录页面

// 为路由对象，添加 beforeEach 导航守卫
router.beforeEach((to, from, next) => {
// 如果用户访问的登录页，直接放行
if (to.path === ‘/login’) return next()
// 从 sessionStorage 中获取到保存的 token 值
const tokenStr = window.sessionStorage.getItem(‘token’)
// 没有token，强制跳转到登录页
if (!tokenStr) return next(‘/login’)
next()
})
4. Vue 直接操作 DOM

通过 ref 标注 DOM 元素

// 在 DOM 元素上通过 ref 属性标注，属性名称自定义

hello

通过 $refs 获取 DOM 元素

// 通过 Vue 实例的 $re f s 获取标记 re f 属性的元素 l e t in f o = t hi s .$ refs.info.innerHTML
console.log(info) // hello
退出功能

基于 token 的方式实现退出比较简单，只需要销毁本地的 token 即可。这样，后续的请求就不会携带 token ，

必须重新登录生成一个新的 token 之后才可以访问页面。

主页布局

左侧菜单布局

通过接口获取菜单数据
通过 axios 请求拦截器添加 token，保证拥有获取数据的权限。
// axios请求拦截
axios.interceptors.request.use(config => {
// 为请求头对象，添加 Token 验证的 Authorization 字段
config.headers.Authorization = window.sessionStorage.getItem(‘token’)
return config
})
动态渲染菜单数据并进行路由控制
通过 v-for 双层循环分别进行一级菜单和二级菜单的渲染
通过路由相关属性启用菜单的路由功能

<el-submenu :index=“item.id + ‘’” v-for=“item in menus" :key=“item.id”>

{{item.authName}}

{{subItem.authName}}

用户管理
1.1 用户管理概述
通过后台管理用户的账号信息，具体包括用户信息的展示、添加、修改、删除、角色分配、账号启用/注销等功能。
用户信息列表展示
添加用户
修改用户
删除用户
启用或禁用用户
用户角色分配
1.2 用户信息列表展示
用户列表布局

面包屑导航 el-breadcrumb
Element-UI 栅格系统基本使用 el-row
表格布局 el-table、el-pagination
1.2 用户信息列表展示

addFormRules: {
username: [{ required: true, message: ‘请输入用户名’, trigger: ‘blur’ }],
password: [{ required: true, message: ‘请输入密码’, trigger: ‘blur’ }],
}

this.$refs.addFormRef.validate(async valid => {
if (!valid) return
})
1.5 修改用户
修改用户 -1. 弹出修改对话框 , 获取当前行信息 2. 提前存储当前行用户信息。为什么要存储每行信息？
因为点击确定操作时，当前行用户信息不知道。 3. 因为有多列都涉及到点击操作 , 所以要用作用域插槽
scope 有属性 $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots} = await this.$ http.get(‘users/’ + id)
if (res.meta.status !== 200) {
return this. $KaTeX parse error: Expected 'EOF', got '}' at position 28: \dotsr('查询用户信息失败！') }̲ // 把获取到的用户信息对象\dots$ refs.editFormRef.validate(async valid => {
if (!valid) return
// 发起修改的请求
const { data: res } = await this. $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots { return this.$ message.error(‘编辑用户信息失败！’)
}
this. $KaTeX parse error: Expected 'EOF', got '}' at position 80: \dotsisible = false }̲) 1.6 删除用户 <el-\dots$ confirm(‘此操作将永久删除该用户, 是否继续?’, ‘提示’, {
confirmButtonText: ‘确定’,
cancelButtonText: ‘取消’,
type: ‘warning’
}).catch(err => err)
const { data: res } = await this. $h ttp . d e l e t e (^{'} u sers /^{'} + i d) i f (res . m e t a . s t a t u s! == 200) re t u r n t hi s .$ message.error(‘删除用户失败！’)
this. $KaTeX parse error: Expected 'EOF', got '}' at position 47: \dots.getUserList() }̲, 角色列表展示 async\dots$ http.get(‘roles’)
if (res.meta.status !== 200) {
return this.$message.error(‘获取角色列表失败！’)
}
this.rolesList = res.data
},
用户角色分配

. 调用角色对话框，存储角色信息，点击更新时用到 2. 获取所有角色接口，存储数据，更
新时用到 3. 下拉列表选择时 -v-model 绑定数据 id ，属性 :value=“item.id” 配合获取下拉选择项 4. 点击确
定时，提交用户 id, 角色 id 更新数据
async showSetRoleDialog(userInfo) {
this.userInfo = userInfo
// 发起请求，获取所有角色的列表
const { data: res } = await this. $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots{ return this.$ message.error(‘获取角色列表失败！’)
}
this.rolesList = res.data
this.setRoleDialogVidible = true
}
完成角色分配功能
. 获取角色信息，下拉选择时的角色 id( 注意是绑定的角色 id 数据 selectedRoleId) 2. 调用接
口更新
async saveNewRole() {
if (this.selectedRoleId === ‘’) {
return this. $KaTeX parse error: Expected 'EOF', got '}' at position 31: \dots请选择新角色后再保存！') }̲ const { data:\dots$ http.put(users/${this.userInfo.id}/role, {
rid: this.selectedRoleId
})
if (res.meta.status !== 200) {
return this. $KaTeX parse error: Expected 'EOF', got '}' at position 27: \dotsor('分配角色失败！') }̲ this.$ message.success(‘分配角色成功！’)
this.getUserList()
this.setRoleDialogVidible = false
}
2.1 权限管理业务分析
通过权限管理模块控制不同的用户可以进行哪些操作，具体可以通过角色的方式进行控制，即每个用户分配
一个特定的角色，角色包括不同的功能权限。
渲染权限列表思路 - 使用三重嵌套 for 循环生成权限下拉列表

调用 el-table 里的展开列数据格式

布局要合理 - 因为页面要的格式是 3 层 , 数据格式也是 3 层 , 如何取出每 1 层下对应的数据？ table 嵌套外

层 1 行 2 列，第 2 列里又嵌套 1 行 2 列。这样总共就有了 3 列。每列渲染对应的数据
权限列表展示
权限列表展示

一级
二级
三级

// 获取权限列表数据
async getRightsList() {
const { data: res } = await this. $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots{ return this.$ message.error(‘获取权限列表失败！’)
}
this.rightsList = res.data
}
角色列表展示
// 获取所有角色列表
async getRolesList() {
const { data: res } = await this. $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots{ return this.$ message.error(‘获取角色列表失败！’)
}
this.rolesList = res.data
},

<el-tag closable @close=“removeRightById(scope.row,item1.id)”>{{item1.authName}}

<el-tag type=“success” closable @close=“removeRightById(scope.row,item2.id)”>{{item2.authName}}

<el-tag type=“warning” v-for=“item3 in item2.children” :key=“item3.id” closable @close=“removeRightById(scope.row,item3.id)”>{{item3.authName}}

						</el-col>
					</el-row>
				</template>
			</el-table-column>

————————————————
版权声明：本文为CSDN博主「cc–crush」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_52690585/article/details/121179469

表格行展开效果
渲染一级权限菜单

. 默认选中实现？通过递归的形式，获取当前角色下所有三级权限的 id ，并保存到默认 defKeys 选
中数组中。递归会不断的遍历当前角色下 childen 推入默认选中数组
#4. 提交选中更新权限 - 点击为角色分配权限 - 注意这里调用 element 两个方法来记录你选中了那些： 1
个是全选中方法 getCheckedKeys() ， 1 个是半选中方法 getHalfCheckedKeys, 在把它们合并成数组
[105,116,117,150,101,104] 。注意接口提交的时候要的是字符串

{{item1.authName}} 3. 渲染二、三级权限菜单 {{item2.authName}} {{item3.authName}} 4. 删除角色下的权限点击权限菜单的删除按钮后，调用后台接口删除对应权限和其下的子权限。

参数管理概述
概述：商品参数用于显示商品固定的特征信息，可以通过电商平台商品详情页面直观的看到
布局 - 通过 el-tab 进行切换，通过 v-model 绑定激活项
1 逻辑实现 - 注意这里只允许为第三级分类添加相关参数！

用户选中前两级怎么办？设置动态参数数据，静态属性数据为空，这样就不会渲染数据

如果选中是第三级？ - 根据所选分类的 cateId( 分类 id 是根据你所选的第几个大类 , 动态获取的 ) ，和当前

所处的面板，获取对应的参数
const { data: res } = await this. $h ttp . g e t (c a t e g or i es /$ {this.cateId}/attributes , {params: {
sel: this.activeName } } )

三级分类 id 如何获取？ - 级联菜单绑定数组 selectedCateKeys, 级联选择改变时，数组里会有 3 个值，获

取下
<el-cascader expand-trigger=“hover” :options=“catelist” :props=“cateProps” v
model=“selectedCateKeys” @change=“handleChange”>
// 可放在计算属性里 , 因为 cateId 是动态获取的 computed: {
// 当前选中的三级分类的 Id
cateId() {
if (this.selectedCateKeys.length === 3) {
return this.selectedCateKeys[2]
}
return null
}
}

封装一个获取参数列表数据 getParamsData() , 方便级联选中变化时调用 ,tab 切换时也会调用
每行里 tag 标签 - 通过组件实现 ——tag 删除回车输入内容时触发编辑提交参数接口 put 提交
. 下拉选择时，获取参数列表数据，对数据里的 “attr_vals”: “a b c” 给的是字符串进行转换成数组操
作
给每行的 tag 组件外面加
入作用域插槽，渲染时只渲染当前行数据 (scope.row.attr_vals), 输入内容时只操作当前行数据绑定 v
model 时，也只绑定当前行

<el-tag
closable
v-for=“(item, index) in scope.row.attr_vals”
:key=“index”
@close=“removeTag(index, scope.row)”
>{{ item }}
<el-input
class=“input-new-tag”
v-if=“scope.row.newTagVisible”
v-model=“scope.row.newTagValue”
ref=“saveTagInput”
size=“small”
@keyup.enter.native=“handleInputConfirm(scope.row)”
@blur=“handleInputConfirm(scope.row)”
>

<el-button
v-else
class=“button-new-tag”
size=“small”
@click=“showInput(scope.row)”
>+ New Tag

.tag 输入内容时 , 第 1 次输入不上，会合并行的问题 ? 在遍历 attr_vals 数据转换成数组时，就给每个对象
当前行绑定属性
if (this.cateSelected.length !== 3) {
this.cateSelected = [];
this.manyParamsList = [];
this.onlyParamsList = [];
return null;
}
const res = await attributeslist({
id: this.cateID,
rel: this.activeName,
});

  if (res.meta.status !== 200) return;

  res.data.forEach((item) => {
    item.attr_vals = item.attr_vals ? item.attr_vals.split(" ") : [];
    item.newTagVisible = false;
    item.newTagValue = "";
  });
  this.activeName === "many"
    ? (this.manyParamsList = res.data)
    : (this.onlyParamsList = res.data);

5.1 商品管理概述
商品管理模块用于维护电商平台的商品信息，包括商品的类型、参数、图片、详情等信息。通过商品管理模块可以
实现商品的添加、修改、展示和删除等功能
基本布局与分布条效果
布局 - 用到步骤条 el-step 组件 , 每个 tab 组件里套着表单组件。步骤条与 tab 如何联动？，可给 tab 声
明 1 个激活索引 v-model=“activeIndex” 同时每个 tab 子项给到 name=“ 索引 ” ，步骤条调用该索引

tab 切换验证：切换下一个 , 得验证上一个是否选择？可用离开之前属性 -:before-leave 调用方法，
判断用户是否选择了下拉的 3 级列表

点击商品属性或商品参数面板，要根据上次选择的 3 级分类 id 请求对应数据。你怎么知道它点击的是商
品属性，还是商品参数？点击时 @tab-click=“tabClicked” 通过判断当前激活索引是多少，做相应的接口请求
添加商品
4. 商品分类信息
<el-cascader expand-trigger=“hover” :options=“cateList” :props=“cascaderConfig”
v-model=“addForm.goods_cat” @change=“handleCascaderChange”>
const { data: res } = await this. $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots{ return this.$ message.error(‘初始化商品分类失败！’)
}
this.cateList = res.data
5. 商品动态参数
const { data: res } = await this. $h ttp . g e t (‘ c a t e g or i es /$ {this.cateId}/attributes, { params: { sel: 'many' } }) if (res.meta.status !== 200) return this.$message.error('获取动态参数列表失败！') // 把动态参数中的每一项数据中的 attr_vals，都从字符串分割为数组 res.data.forEach(item => { item.attr_vals = item.attr_vals.length === 0 ? [] : item.attr_vals.split(' ') }) this.manyData = res.data 6. 商品静态属性 const { data: res } = await this.$http.get(categories/ $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots{ return this.$ message.error(‘获取动态参数列表失败！’)
}
this.onlyData = res.data
7. 商品图片上传
： 1. 通过存在内存中的文件流，获取后台会返回 1 个正式路径地址，你把此路径写入到图片中
即可
移除某个图片 : 0. 在移除的时候删除的是临时路径 1. 如何获取将要删除的图片的临时路径 ? 通过存在内
存中的文件流，从提交表单图片 pics 数组中，找到这个图片对应的索引值。从该数组中 splice 切除掉
图片上传成功： 0. 点击上传成功后 , 后台会返回临时路径和正式地址 1. 拼接得到一个图片信息对象 const
picInfo = { pic: response.data.tmp_path } ！！注意，因为后端接口需要传 pic 字段，所以拼接下 2. 将
图片信息对象 picInfo ， push 到表单图片 pics 数组中。

点击上传

// 预览图片时候，触发的方法
handlePreview(result) {
this.previewImgSrc = result.response.data.url
this.previewVisible = true
}
// 当移除图片，会触发这个方法
handleRemove(result) {
// 根据 result.response.data.temp_path 从 addForm.pics 数组中，找到要删除那个对象的索引值
const index = this.addForm.pics.findIndex(item => item.pic ===
result.response.data.tmp_path)
// 根据索引删除对应的图片信息对象
this.addForm.pics.splice(index, 1)
}
// 图片上传成功
handleSuccess(result) {
if (result.meta.status === 200) {
// 把上传成功后，图片的临时路径，保存到 addForm.pics 数组中，作为对象来保存
this.addForm.pics.push({
pic: result.data.tmp_path
})
}
}
8. 商品详情
// 安装vue-quill-editor
npm install vue-quill-editor -S
import VueQuillEditor from ‘vue-quill-editor‘
Vue.use(VueQuillEditor)

9. 完成商品添加
// 先处理好商品相关的数据格式，然后再提交
const newForm = _.cloneDeep(this.addForm)
newForm.goods_cat = newForm.goods_cat.join(’,‘)
// 到此位置，商品相关数据已经准备好，可以提交了
const { data: res } = await this. $h ttp . p os t (^{'} g oo d s^{'}, n e wF or m) i f (res . m e t a . s t a t u s! == 201) re t u r n t hi s .$ message.error(res.meta.msg)
this. $m ess a g e . s u ccess (^{'} 添加商品成功！^{'}) // 跳转到商品列表页 t hi s .$ router.push(’/goods/list’)
6.1 订单管理概述
订单管理模块用于维护商品的订单信息，可以查看订单的商品信息、物流信息，并且可以根据实际的运营情况对订
单做适当的调整
const { data: res } = await this. $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots{ return this.$ message.error(‘获取订单列表失败！’)
}
this.orderList = res.data.goods
this.total = res.data.total
2. 查看订单地址信息
<el-cascader
:options=“cityOptions”
v-model=“selectedArea”
@change=“changeProvince”
change-on-select
style=“width: 100%;”>

7.1 数据统计概述
数据统计模块主要用于统计电商平台运营过程的中的各种统计数据，并通过直观的可视化方式展示出来，方便相关
运营和管理人员查看。

Echarts 第三方可视化库的基本使用
// 安装echarts库
npm install echarts -S
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(this. $refs.main) const { data: res } = await this.$ http.get(‘reports/type/1’)
if (res.meta.status !== 200) return this.$message.error(‘初始化折线图失败！’)
const data = _.merge(res.data, this.options)
// 绘制图表
myChart.setOption(data)
项目优化
打包时，为了直观地发现项目中存在的问题，可以在打包时生成报告。生成报告的方式有两种：
① 通过命令行参数的形式生成报告
// 通过 vue-cli 的命令选项可以生成打包报告
// --report 选项可以生成 report.html 以帮助分析包内容
vue-cli-service build --report
② 通过可视化的UI面板直接查看报告（推荐）
在可视化的UI面板中，通过控制台和分析面板，可以方便地看到项目中所存在的问题
开发环境 : npm run dev/serve 在本地运行的，对包的体积基本没要求，就是本地玩的
生产环境 :npm run build 生成 1 个 dist 文件夹，需要对这个文件进行体积的优化，然后上传到线上运行
的
我怎么知道你是在开发或者生产运行的？ process.env.NODE_ENV === ‘production’ 生产环境
开发与上线都会运行 index.html 文件 , 这个文件越小 , 首页加载越快 , 公司越省钱 ( 大公司 )
一 . 打包介绍：
npm run build 生成打包 dist 文件。 dist 文件就是要上线的项目
app.js 一般是打包的 main.js 里的引入
chunk-vendors 一般是打包的第三方插件 , 框架
Order_Report 一般是路由按需加载的名字
.map 文件是 .js 文件的映射镜像
通过 vue.config.js 修改 webpack 的默认配置
通过 vue-cli 3.0 工具生成的项目，默认隐藏了所有 webpack 的配置项，目的是为了屏蔽项目的配置过程，让程
序员把工作的重心，放到具体功能和业务逻辑的实现上。
如果程序员有修改 webpack 默认配置的需求，可以在项目根目录中，按需创建 vue.config.js 这个配置文件，从
而对项目的打包发布过程做自定义的配置（具体配置参考 https://cli.vuejs.org/zh/config/#vue-config-js ）。

. 在 public 文件里找到 index.html 进行 cdn 引入

. 优化其它项
0. 去除 sourcemap 镜像文件 ,map 文件比较占体积

打包输出目录，要变成 ./ ，否则加载 index.html 文件时，找不到其它 js,css 文件
开发环境配置 , 一般可配置跨域

相关面试题
项目概述：本项目，是一个商品后台管理系统。采用前后端分离开发，主要用于给内部运营人员管理商
品用的。主要有登录模块 ( 登录注册忘记密码等页面 ), 用户管理模块 ( 管理内部登录用户的 ), 权限管理 ( 包含
角色列表 , 权限列表 [ 不同人有不同权限 ]), 商品管理 ( 管理商品的增删改查 ) ，数据统计 ( 领导看商品销售数
据，主要用到 echarts) 等模块
一 . 登录模块 :

登录鉴权如何做的 ?
前台传入用户名和密码，后台返回 token 。把 token 存到本地或 vuex 2. 通过 router 的全局守卫
beforeEach 进行鉴权处理 , 判断是否有 token 3. 进入到后台，请求其它数据要带着 token, 在 axios 请求拦
截器 , 可统一设置请求头协议 header 加 token 值
登录后你们的 token 有没有过期时间 ? 过期了怎么处理？
有过期时间，一般是一天 , 后台返回错误码（一般是 4001 ， 5001 ）提示我过期了或者无效 token ，
进行判断提醒用户跳转重新登录
登录验证码怎么实现的 ? 登录密码有没有加密传给后台？
后端提供了一个接口，返回了图片路径，前端渲染就行了
有加密，通过引入 md5 插件加密下传给后台，后台解析下就可以了
二 . 用户模块 - 管理网站不同登录用户的
你们分页，搜索，分配角色是怎么实现的？
分页功能 : 分为前端分页和后端分页，大部分都是让后端进行分页 . 我们分页是后端进行的分页，前端通过 UI 框架提供的分页组件实现 , 需要后台返回总页数 total, 当前第
几页 pagenum
分配角色 : 需要通过作用域插件传过来当前行信息，下拉时获取选择的角色 id 传给后台
三 . 权限管理模块
你们的权限是如何实现的？根据前台登录不同用户，后台返回该用户的权限路径 , 然后前端在路由表
里，把所有的路径都写上。这样其实就是静态路由
你是静态路由，还是动态路由？你有没有听说过动态路由？
所谓动态路由就是通过后台返回的路由路径，动态填加的， router.addRoutes()
分配权限 —
后台返回的是树结构数据 , 结合绑定 tree 组件 , 进行渲染就行了。
打开弹窗时，有默认选中如何实现？给它绑定一个数组，通过递归遍历，拿到该角色下所有权限 id ，
给它推入到该默认选择数组中。
提交更新权限 - 传入角色 id, 和所有选中的权限 id 给后台
四 . 商品管理模块 - 对所有商品进行增删改查操作
图片上传如何实现的？ 1. 通过 upload 组件进行上传，前端给它 url 上传路径和头协议 token 值 2. 上传
成功后，后台返回临时路径 ( 前台有删除操作 , 从 file 文件里删除的临时路径 ) 和正式地址 ( 做预览操作 )
如果用原生实现上传，说下思路？ 1. 通过 input 标签 ,type=file 2. 文件协议是通过 form-data 传输二进制
流 3. 提交接口路径
五 .echarts 图表 - 主要给领导看一些销售数据用的
通过引入 echarts 插件，找到相关图表，复制里面代码 , 修改 options 配置里 data 数据
六 . 首屏加载如何优化？
首先要区分开发环境和生产环境 , 杂区分？创建 2 个文件，里面定义了环境变量。通过
process.env.NODE_ENV === ‘production’ 生产环境， process.env.NODE_ENV === ‘development’
开发环境
把大的第三方插件 -echarts,elmentui 抽离出去。通过 webpack 插件 chainWebpack ，配置链式调用找
到生产环境的 main, 单独配置 externals 抽离。在 index.html 通过 cdn 引入链接
2.SourceMap 镜像文件配置成 false
路由懒加载
把 console.log 移除
文件压缩 ( 后端开户 gzip 压缩 )
总结
提示：这里对文章进行总结：

例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
————————————————
版权声明：本文为CSDN博主「m0_62155698」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_62155698/article/details/124740816

qq_33446686

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
后台管理总结

提示：以下是本篇文章正文内容，下面案例可供参考本地接口baseurl根地址http://localhost:8888/api/private/v1/登录流程：一…登录总思路 -baseurl/login1.在登录页面输入用户名和密码2.调用后台接口进行验证3.通过验证之后，根据后台的响应状态跳转到项目主页通过 Element-UI 组件实现布局通过 axios 调用登录验证接口登录成功之后保存用户 token 信息跳转到项目主页http.post(′login。
复制链接

扫一扫