随笔分类 - vue
摘要：Vuex 概述 Vuex 的基本使用 Vuex 的核心概念 基于 Vuex 的案例 1. Vuex 概述 ① 组件之间共享数据的方式 父向子传值： v-bind 属性绑定 子向父传值： v-on 事件绑定 兄弟组件之间共享数据： EventBus $on 接收数据的那个组件 $emit 发送数据的那
阅读全文
摘要：1. 项目优化 项目优化策略： 使用进度条nprogress 生成打包报告 第三方库启用 CDN Element-UI 组件按需加载 路由懒加载 首页内容定制 ① 使用进度条nprogress 在页面加载过程中会在顶部有一个进度条去提示用户，需要使用第三方包nprogress： 什么时候使用进度条呢
阅读全文
摘要：电商后台管理系统的功能——数据统计模块 1. 数据统计概述 数据统计模块主要用于统计电商平台运营过程的中的各种统计数据，并通过直观的可视化方式展示出来，方便相关运营和管理人员查看。 2. 用户来源数据统计报表 在component目录下新建report目录，再建Report.vue组件 ① Echa
阅读全文
摘要：电商后台管理系统的功能——订单管理模块 1. 订单管理概述 订单管理模块用于维护商品的订单信息， 可以查看订单的商品信息、物流信息，并且可以根据实际的运营情况对订单做适当的调整。 2. 订单列表 在components文件夹下创建一个order文件夹，然后再创建一个Order.vue组件 ① 订单列
阅读全文
摘要：电商后台管理系统的功能——商品管理模块 商品管理概述 商品管理模块用于维护电商平台的商品信息，包括商品的类型、参数、图片、详情等信息。 通过商品管理模块可以实现商品的添加、修改、展示和删除等功能。 1. 商品列表 在goods文件夹下创建List.vue组件 1.1 商品列表功能 实现商品列表布局效
阅读全文
摘要：电商后台管理系统的功能——权限管理模块 1. 权限管理业务分析 通过权限管理模块控制不同的用户可以进行哪些操作，具体可以通过角色的方式进行控制，即每个用户分配一个特定的角色，角色包括不同的功能权限。 2. 权限列表展示 <template slot-scope="scope"> <el-tag si
阅读全文
摘要：电商后台管理系统的功能——用户管理模块 1. 用户管理概述 通过后台管理用户的账号信息，具体包括用户信息的展示、添加、修改、删除、角色分配、账号启用/注销等功能。 用户信息列表展示 添加用户 修改用户 删除用户 启用或禁用用户 用户角色分配 2. 用户管理-列表展示 ① 用户列表布局 面包屑导航 e
阅读全文
摘要：电商后台管理系统的功能——页面的整体布局 1. 整体布局 整体布局：先上下划分，再左右划分。 需要使用到ElementUI中提供的Container组件 <el-container> <!-- 头部区域 --> <el-header></el-header> <el-container> <!--
阅读全文
摘要：电商后台管理系统的功能——登录/退出功能 1. 登录业务流程 ① 在登录页面输入用户名和密码 ② 调用后台接口进行验证 ③ 通过验证之后，根据后台的响应状态跳转到项目主页 2. 登录业务的相关技术点 http 是无状态的 通过 cookie 在客户端记录状态 通过 session 在服务器端记录状态
阅读全文
摘要：1. 项目概述： 根据不同的应用场景，电商系统一般都提供了 PC 端、移动 APP、移动 Web、微信小程序等多种终端访问方式。 2. 电商后台管理系统的功能 电商后台管理系统用于管理用户账号、商品分类、商品信息、订单、数据统计等业务功能。 3. 电商后台管理系统的开发模式（前后端分离） 电商后台管
阅读全文
摘要：模块化相关规范 webpack Vue 单文件组件 Vue 脚手架 Element-UI 的基本使用 1. 模块化相关规范 ① 模块化概述 传统开发模式的主要问题： 命名冲突 文件依赖 通过模块化解决上述问题： 模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的
阅读全文
摘要：路由的基本概念与原理 vue-router的基本使用 vue-router嵌套路由 vue-router动态路由匹配 vue-router命名路由 vue-router编程式导航 基于vue-router的案例 1. 路由的基本概念与原理 路由是一个比较广义和抽象的概念，路由的本质就是对应关系。 在
阅读全文
摘要：实现功能： 当点击左侧不同的菜单，右侧会切换显示不同的内容 点击详情链接，会从列表页跳转到详情页，把用户所对应的id通过路由的形式传递过去 用到的路由技术要点： 路由的基础用法 嵌套路由 路由重定向 路由传参 编程式导航 主要实现步骤：根据项目的整体布局划分好组件结构，通过路由导航控制组件的显示。
阅读全文
摘要：图书相关的操作基于后台接口数据进行操作： 需要调用接口的功能点： 功能 请求方式 请求路由 ① 图书列表数据加载 GET http://localhost:3000/books ② 添加图书 POST http://localhost:3000/books ③ 验证图书名称是否存在 GET http
阅读全文
摘要：前后端交互模式 promise用法 接口调用-fetch用法 接口调用-axios用法 接口调用-async/await用法 基于接口的案例 1. 前后端交互模式 ① 接口调用方式 原生Ajax 基于jQuery的Ajax fetch axios jQuery中的Ajax侧重点是DOM操作，而vue
阅读全文
摘要：组件化开发思想 组件注册 Vue调试工具用法 组件间数据交互 组件插槽 基于组件的案例 1. 组件化开发思想 标准：这些组件要想组合到一块，肯定要有统一的标准 分治：将不同的功能封装到不同的组件中，这样的话每个组件都可以进行独立的生产 重用：如果一个项目中某些组件已经不能使用了，这时只需要换一个组件
阅读全文
摘要：静态页面的样式如下： 静态页面模板： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0
阅读全文
摘要：实现功能如下： 1. 图书列表 ① 实现静态列表效果 ② 基于数据实现模板效果 ③ 处理每行的操作按钮 2. 添加图书 ① 实现表单的静态效果 ② 添加图书表单域数据绑定 ③ 添加按钮事件绑定 ④ 实现添加业务逻辑 3. 修改图书 ① 修改信息填充到表单 ② 修改后重新提交表单 ③ 重用添加和修改的
阅读全文
摘要：<script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 过滤器案例：格式化日期 */ // Vue.filter('format', function(value, arg
阅读全文
摘要：需求：输入框中输入姓名， 失去焦点时验证是否存在，如果已经存在，提示从新输入，如果不存在，提示可以使用。 实现功能如下： ① 通过v-model实现数据绑定 ② 需要提供提示信息 ③ 需要侦听器监听输入信息的变化 侦听器的用法：实际上是侦听指定数据的变化，当数据发生变化的时候，触发侦听器所绑定的函数
阅读全文
浙公网安备 33010602011771号