Vue.js 3.0企业级管理后台开发实战:基于Element Plus

0
(0)

Vue.js 3.0企业级管理后台开发实战:基于Element Plus

作者:杨海民

出版社:电子工业出版社

出版年:2022-10

页数:544

定价:138

ISBN:9787121443299

内容简介
······

《Vue.js 3.0企业级管理后台开发实战:基于Element Plus》系统全面、由浅入深介绍了管理后台开发的各方面知识、经验和技巧,包括企业内部真实的项目开发方式、项目原型、API接口文档、API接口联调、团队协作开发的Git代码管理等,并附有400余个代码清单,这些实例代码与Git分支是一一对应的。除此之外,本书还结合Element Plus介绍了组件化的二次封装、公共方法封装等,可以使项目开发工作高效保质、事半功倍。管理后台是企业应用最多的项目之一,读者在学习本书后可以全面地了解管理后台的整体结构,实现完全自主搭建管理后台。

《Vue.js 3.0企业级管理后台开发实战:基于Element Plus》既适合Web前端开发者学习使用,又适合零编程经验、有兴趣从事Web前端工作,以及想深入了解管理后台内容的读者阅读,同时也可作为高等院校计算机相关专业的师生用书和培训学校的教材。

作者简介
······

杨海民,从事Web前端开发多年,常年研究并使用Vue.js相关技术,负责多个大型项目,包括SAAS项目的整体架框搭建、核心模块设计、业务组件、制定开发规范和标准、性能优化、用户体验开发等,同时负责项目开发进度管控、业务模块分配、团队技术指导等。

多次参与公司项目评审,提出可行性及建议性方案,并多次组织团队分享技术经验,提升业务逻辑思维能力。

目录
······

第1章 项目启动 1

1.1 项目原型 1

1.2 项目UI 2

1.3 项目开发流程 2

本章小结 4

第2章 项目构建 5

2.1 Node.js 5

2.2 开发工具 6

2.3 脚手架安装 6

2.4 项目创建 8

2.4.1 命令构建项目 8

2.4.2 可视化构建项目 9

2.5 项目仓库 11

2.5.1 申请仓库 11

2.5.2 推送项目 12

2.6 项目分支 14

2.6.1 分支命名 14

2.6.2 分支管理 16

2.6.3 分支创建 18

本章小结 18

第3章 初始化项目 19

3.1 启动项目 19

3.2 项目结构 19

3.3 文件结构 22

3.4 项目入口 22

3.5 路由 23

3.5.1 路由模式 23

3.5.2 路由定义 24

3.6 项目初始化配置 26

3.6.1 配置vue.config.js 27

3.6.2 配置Sass文件 27

3.6.3 重置浏览器默认样式 29

3.6.4 Element Plus 组件库 29

3.6.5 依赖包指令的区别 34

3.6.6 分支合并 35

本章小结 36

第4章 Vue.js 3的变化 37

4.1 新特性 37

4.1.1 组合式API 38

4.1.2 teleport组件 39

4.1.3 片段 41

4.1.4 触发组件选项 41

4.1.5 单文件组件组合式API 43

4.1.6 变量驱动CSS 45

4.1.7 样式穿透规则 46

4.1.8 异步组件suspense 47

4.2 生命周期 51

4.2.1 Vue.js 2生命周期 52

4.2.2 Vue.js 3生命周期 53

4.2.3 KeepAlive生命周期 56

4.3 生命周期的执行顺序 56

4.3.1 单个组件 57

4.3.2 父子组件 58

4.3.3 keep-alive组件 59

4.4 新语法 60

4.4.1 ref和reactive 61

4.4.2 toRefs 62

4.4.3 computed 63

4.4.4 watch 65

4.4.5 watchEffect 67

4.4.6 globalProperties 68

4.4.7 getCurrentInstance 69

本章小结 69

第5章 登录及注册业务需求 70

5.1 路由重定向 70

5.2 制作登录页面 71

5.2.1 scoped局部样式 71

5.2.2 el-form 表单组件 72

5.2.3 el-row和el-col组件 74

5.2.4 el-button组件 75

5.3 Vue.js指令与页面交互 77

5.3.1 v-for指令 77

5.3.2 v-bind指令 78

5.3.3 v-on指令 80

5.3.4 v-show和v-if指令 81

5.3.5 v-model指令 84

5.4 开发登录页面业务逻辑 86

5.4.1 测试用例 86

5.4.2 el-form表单校验 87

5.4.3 el-form自定义校验规则 89

5.4.4 工具库的封装 92

5.5 Axios拦截器 94

5.5.1 实例上下文 94

5.5.2 接口文档 97

5.5.3 Axios应用 99

5.5.4 Axios拦截器封装 101

5.5.5 接口联调 104

5.5.6 接口跨域配置 106

5.5.7 环境变量 109

5.6 开发验证码业务逻辑 112

5.6.1 交互体验 114

5.6.2 表单提交按钮文本交互 114

5.6.3 获取验证码提示交互 114

5.6.4 获取验证码接口联调 116

5.6.5 验证码倒计时交互 119

5.7 拦截器业务处理 122

5.7.1 响应拦截 123

5.7.2 Promise对象 127

5.7.3 注册接口联调 129

5.7.4 密码加密 134

5.7.5 登录接口联调 135

本章小结 136

第6章 搭建管理后台 137

6.1 搭建框架 137

6.2 后台首页 139

6.3 局部组件 140

6.4 导航菜单 140

6.4.1 侧栏菜单 141

6.4.2 el-menu菜单组件 141

6.4.3 一级菜单 144

6.4.4 子级菜单 147

6.4.5 视图渲染 152

6.5 图标 153

6.5.1 Icon图标 153

6.5.2 Iconfont平台 155

6.5.3 SvgIcon全局组件 156

6.5.4 组件通信Props 162

6.5.5 计算属性Computed 166

6.5.6 导航菜单的优化 170

本章小结 173

第7章 Vuex状态管理 174

7.1 状态管理 174

7.1.1 Module 175

7.1.2 State 176

7.1.3 Getters 177

7.1.4 Mutations 178

7.1.5 Actions 179

7.2 后台头部静态制作 181

7.2.1 Sass语法 181

7.2.2 菜单按钮 183

7.2.3 账号信息 184

7.3 侧栏菜单的展开/收起 185

7.3.1 菜单交互 186

7.3.2 菜单优化 188

7.4 HTML5本地存储 189

7.4.1 sessionStorage 190

7.4.2 localStorage 191

7.4.3 侧栏菜单的刷新交互 192

本章小结 193

第8章 路由守卫 194

8.1 登录逻辑 194

8.2 Cookie 195

8.3 Actions异步 197

8.3.1 异步登录 198

8.3.2 目录别名 199

8.4 路由守卫 200

8.4.1 to、from、next 参数 201

8.4.2 校验token 202

8.4.3 请求头token 204

8.4.4 数据源 205

8.4.5 退出接口 206

本章小结 211

第9章 信息管理模块 212

9.1 框架微调 212

9.2 列表页布局 213

9.2.1 新增按钮 214

9.2.2 搜索表单 215

9.2.3 制作列表 217

9.2.4 制作分页 218

9.3 分类页面 221

9.3.1 按钮和线 221

9.3.2 树形菜单 222

9.3.3 分类表单 227

9.4 表单页面 228

9.4.1 路由跳转 228

9.4.2 信息管理详情页 229

9.4.3 细节样式 234

9.5 分类接口联调 236

9.5.1 JSON对象 237

9.5.2 交互配置 238

9.5.3 添加父级分类接口联调 247

9.5.4 分类列表接口联调 249

9.5.5 添加子级分类接口联调 250

9.5.6 编辑分类接口联调 256

9.5.7 删除分类接口联调 259

9.6 表单数据 265

9.6.1 级联选择器 265

9.6.2 分类渲染 266

9.6.3 服务器上传文件 270

9.6.4 添加信息接口联调 272

9.7 信息列表页 278

9.7.1 列表接口联调 278

9.7.2 分页数据请求 282

9.7.3 发布状态接口联调 283

9.7.4 删除接口联调 285

9.7.5 封装全局方法 287

9.7.6 筛选条件搜索 293

9.8 信息编辑 297

9.8.1 路由传参 297

9.8.2 获取详情接口联调 301

9.8.3 编辑信息接口联调 303

本章小结 305

第10章 组件化 306

10.1 封装列表组件 306

10.1.1 组件基础 306

10.1.2 渲染表头 308

10.1.3 配置元素 309

10.1.4 请求列表数据 313

10.1.5 回调子组件 318

10.1.6 el-pagination组件 321

10.1.7 el-switch组件 325

10.1.8 文本格式化 331

10.1.9 el-table组件属性 332

10.2 插槽 334

10.2.1 默认插槽 334

10.2.2 具名插槽 335

10.2.3 作用域插槽 336

10.2.4 操作按钮插槽 337

10.2.5 集成删除按钮 338

10.3 封装表单组件 343

10.3.1 类别组件 346

10.3.2 上传组件 351

10.3.3 富文本组件 353

10.3.4 日期时间组件 356

10.3.5 常规组件 360

10.3.6 表单按钮 365

10.3.7 绑定字段 368

10.3.8 校验规则 371

10.3.9 数据初始化 377

10.3.10 提交表单 381

10.3.11 联动交互 383

10.3.12 等分布局 389

10.3.13 动态组件 390

10.4 封装搜索组件 396

10.4.1 集成列表 396

10.4.2 Provide/Inject通信 397

10.4.3 配置元素 398

10.4.4 配置参数 400

10.4.5 关键字组件 401

10.4.6 数据集合 405

10.4.7 配置搜索按钮 406

10.4.8 搜索联调 407

10.4.9 重置联调 411

10.4.10 分页Bug 413

10.4.11 配置按钮 417

10.4.12 等分布局 418

本章小结 420

第11章 系统配置 421

11.1 菜单管理 422

11.1.1 配置菜单列表 423

11.1.2 配置菜单搜索项 424

11.1.3 配置菜单列表接口 425

11.1.4 配置菜单表单 426

11.1.5 添加菜单 431

11.1.6 添加菜单页面功能 437

11.1.7 编辑菜单 440

11.1.8 添加子级菜单 448

11.1.9 菜单列表 449

11.2 角色管理 456

11.2.1 配置角色列表 456

11.2.2 配置角色搜索项 457

11.2.3 配置角色列表接口 458

11.2.4 Dialog对话框组件抽离 459

11.2.5 配置角色表单 462

11.2.6 添加角色 467

11.2.7 编辑角色 470

11.2.8 角色列表 476

11.3 用户管理 477

11.3.1 配置用户列表 477

11.3.2 配置用户搜索项 478

11.3.3 配置用户列表接口 479

11.3.4 配置用户表单 480

11.3.5 添加用户 490

11.3.6 编辑用户 491

11.3.7 用户列表 496

本章小结 500

第12章 权限管理 501

12.1 动态路由 501

12.1.1 添加菜单 501

12.1.2 添加角色用户 502

12.1.3 路由拦截next参数 504

12.1.4 路由权限接口 506

12.1.5 生成路由组件 507

12.1.6 addRoute动态添加路由 511

12.1.7 动态路由的跳转 514

12.2 元素级权限 516

12.2.1 注册自定义指令 517

12.2.2 应用自定义指令 519

12.2.3 元素级权限逻辑 519

12.2.4 权限编码整合 522

本章小结 523

第13章 项目部署 524

13.1 项目打包 524

13.1.1 项目环境 524

13.1.2 白屏现象 526

13.1.3 项目体积分析 526

13.1.4 CDN加速外部资源 527

13.1.5 过滤图标转换 528

13.1.6 图片压缩 529

13.2 Nginx配置 530

13.2.1 文件部署 530

13.2.2 域名指向 531

本章小结 532

评论 ······

作为一个有不到三年开发经验彩笔,觉得很受用!

作为一个有不到三年开发经验彩笔,觉得很受用!

点击星号评分!

平均分 0 / 5. 投票数: 0

还没有投票!请为他投一票。

推荐阅读

评论 抢沙发

评论前必须登录!

 

登录

找回密码

注册