Vue电商项目实战
文章平均质量分 63
C.&H.
这个作者很懒,什么都没留下…
展开
-
二十二、解决vue级联选择器 数据显示不全,溢出浏览器的问题
在全局css样式表中配置/*解决级联选择器数据显示不全,溢出浏览器的问题*/.el-cascader-panel { height: 300px;}原创 2021-03-27 14:16:22 · 600 阅读 · 0 评论 -
二十一、上线
(1)通过node创建web服务器1. 首先创建文件夹,然后用VS code打开2. 初始化包管理配置文件:npm init -y3. 安装第三方的包express:npm i express -S4. 安装成功后,将vue_shopcc项目中的dist文件夹赋值到vue_shop_server5. 创建app.js6. 为了测试服务器能否正常运行,执行命令:node .\app.js7. 运行成功(http://127.0.0.1)(2)..原创 2021-03-27 14:02:22 · 95 阅读 · 0 评论 -
二十、项目优化
(1)项目优化策略(2)打开某个页面时,显示进度条。通过nprogress添加进度条效果1. 安装插件nprogress2. 在main.js文件中使用。2.1 发送请求时,显示进度条 :NProgress.start()2.2 发送完请求即响应时,隐藏进度条:NProgress.done()(3)在执行build命令期间移除所有的console1. 运行build命令会生成dist目录,该目录可用于生产环境的发布发现有12个警告,点击输出查看(用于生产环原创 2021-03-27 12:43:16 · 546 阅读 · 0 评论 -
十九、数据统计
(1)通过路由加载数据列表(2)安装echarts,并渲染Demo图表点击“查看详情”,快速入门1. 导入echarts2.为 ECharts 准备一个具备高宽的 DOM 容器。3. 基于准备好的dom,初始化echarts实例4.指定图表的配置项和数据5.使用刚指定的配置项和数据显示图表6. 报错:导入echarts时用:import echarts from 'echarts'出现 “Cannot read property ‘in...原创 2021-03-26 22:08:21 · 225 阅读 · 0 评论 -
十八、订单列表
(1)通过路由渲染订单列表页面1. 创建order/Order.vue2. 添加路由(2)根据分页获取订单数据列表打印的res.data(请求的订单列表相关数据)(3)渲染订单table表(4)实现分页功能(5)显示修改地址对话框,实现省市区县数据联动效果1. 首先创建修改地址对话框。1.1 在对话框中的内容部分添加表单1.2 在表单中添加级联选择器(实现对省市区县的选择) 通过导入cityda...原创 2021-03-26 14:45:15 · 3329 阅读 · 0 评论 -
十七、商品添加
(1)通过编程式导航跳转到商品添加页面1. 在List.vue页面。点击添加商品,实现页面跳转2. 创建商品添加组件Add.vue3. 为Add组件添加路由 (2) 渲染添加页面的基本UI结构使用到Alter警告和Steps 步骤条组件1. 引入组件2. add组件的基本UI结构(3)美化步骤条组件1. 增加进度,并修改文字2. css样式(4)渲染tab栏区域(5)实...原创 2021-03-26 09:12:09 · 2399 阅读 · 0 评论 -
十六、商品列表
(1)通过路由加载商品列表组件1. 创建组件goods/List.vue,并添加面包屑导航栏和搜索框、按钮2. 添加路由(2)获取商品列表数据注意:get请求时,需要加params属性值1. 当创建页面时,调用获取商品列表的方法2. 通过get请求获取商品列表数据3. 如果获取成功,将获取的商品类别数据 以及 数据总条数 保存到相应的变量中(3)渲染商品表格数据由于商品名称内容较多,将该列宽度自适应,给定其他列固定宽度..原创 2021-03-25 14:32:44 · 2418 阅读 · 0 评论 -
十五、分类参数
动态参数供用户选择、静态参数供用户参考(1)通过路由加载分类参数组件页面创建文件goods/Params.vue,并添加路由(2)渲染分类参数界面的基本UI结构使用到了组件Alert显示警告信息(不要忘记引入组件Alert)(3)调用API获取商品分类列表数据打印的catelist中的数据(4)渲染商品分类的级联选择框添加级联选择框,并修改定义相关的参数 (5)控制...原创 2021-03-25 12:50:04 · 619 阅读 · 0 评论 -
十四、商品分类
(1)通过路由加载商品分类组件1. 新建文件goods/Cate.vue2. 添加路由3. 效果图(2)绘制商品分类组件的基本布局(3)调用API获取商品分类列表数据1. 定义相关的数据2. 在页面创建时,调用获取商品分类数据的方法打印res.data(4)初步使用第三方插件vue-table-with-tree-grid(实现树形表格)1. 安装2. 点击查看详情,查看使用文档3. 将该插...原创 2021-03-24 18:49:33 · 806 阅读 · 0 评论 -
十三、分配角色(在用户列表中)
目录(1)渲染分配角色对话框,并请求角色列表数据(2)渲染角色列表的select下拉菜单(3)完成分配角色的功能(4)源码(1)渲染分配角色对话框,并请求角色列表数据1. 为分配角色按钮添加点击事件。点击时,显示分配角色对话款,并获取当前用户的信息列表2. 添加分配角色对话框。3. 点击分配角色按钮,触发的方法(获取角色信息)4. 效果图:(2)渲染角色列表的select下拉菜单1. 引入组件2. 使用下拉列表3原创 2021-03-24 10:16:45 · 2067 阅读 · 0 评论 -
十二、分配权限
(1)弹出分配权限对话框,并请求权限数据1. 为分配权限图标添加点击事件。2. 当点击时,首先获取权限数据,然后保存获取的权限数据,并显示分配权限对话框3. 添加分配权限对话框 (2)初步配置并使用el-tree控件1. 根据el-tree控件,将获取的权限数据以树的形式显示在分配角色对话框(3)优化树形控件的展示效果1. 加上属性show-checkbox,实现在树形控件的...原创 2021-03-24 08:30:38 · 564 阅读 · 0 评论 -
十一、角色列表
(1)通过路由展示角色列表组件1. 在power文件夹下创建组件Roles.vue2. 添加路由(2)绘制基本布局结构,并获取列表数据1. 绘制基本布局2. 获取所有角色列表数据(3)渲染角色列表数据(4)角色下权限渲染的实现思路通过作用域插槽获取展开角色的相关数据我们可以通过三层for循环实现(5)通过第一层for渲染一级权限(6)美化一级权限的UI结构1. 添加边框线2....原创 2021-03-23 18:50:52 · 407 阅读 · 0 评论 -
十、权限列表
目录(1)通过路由展示权限列表组件(2)绘制面包屑导航和卡片视图(3)调用API获取权限列表的数据(type=list)(4)渲染权限列表UI结构(5)用户、角色、权限三者之间的关系(1)通过路由展示权限列表组件1. 首先创建权限列表所对应的组件Rights.vue 2. 添加路由(2)绘制面包屑导航和卡片视图(3)调用API获取权限列表的数据(type=list)1. 首先定义数组rightsList用来存放权限列表...原创 2021-03-23 14:41:13 · 201 阅读 · 0 评论 -
九、删除用户 并提交代码到git仓库
(1)弹框询问用户是否删除数据1. 引入MessageBox组件,并全局挂载(element.js)(2)原创 2021-03-23 13:26:25 · 153 阅读 · 0 评论 -
八、修改用户
(1)展示修改用户的对话框1. 首先为修改按钮添加点击事件。点击按钮时,控制 修改对话框显示的变量 设置为true2. 建立修改用户对话框(2)根据id查询对应用户的信息,以便在修改用户对话框显示1. 点击编辑图标时,将用户的id传到点击触发的方法中2. 在该方法中调用API接口,获取指定id的用户信息。将获取的用户信息放到用户数组中(3)渲染修改用户的表单1. 首先在修改对话框中渲染表单2. 然后为邮箱和手机号定义规则...原创 2021-03-22 08:20:14 · 1032 阅读 · 0 评论 -
七、添加用户
(1)渲染添加用户的对话框先引入Dialog组件1. 添加对话框,并设置控制对话框是否显示的变量addDialogVisible2. 为“添加用户”按钮添加点击事件3. 点击添加用户,显示:(2)渲染添加用户的表单1. 在内容区域添加表单2. 创建添加的用户列表3. 创建规则4. 效果图(3)自定义邮箱和手机号的校验规则1. 先定义一个箭头函数作为校验规则2. 在具体规则中,通过validator来使用我们定原创 2021-03-21 22:26:06 · 726 阅读 · 0 评论 -
六、用户列表
(1)通过路由的形式展示用户列表组件1. 创建Users组件2. 并添加/users路由,将其作为home的子路由3. 效果图(2)在Session Storage 中保存左侧菜单的激活状态实现点击菜单按钮时,使该菜单文字高亮显示。对当前页面刷新后,也是高亮显示1. 通过在el-menu标签中添加属性default-active,并为其赋值需要高亮显示的路径例如:default-active="/users",则为用户列表添加高亮显示..原创 2021-03-21 20:05:46 · 5419 阅读 · 0 评论 -
五、主页Home
一、实现基本的主页布局构建下面的主页面(1)根据elementUI的container布局容器进行布局Home.vueelement.js 引入相关的组件(2)美化页面的header区域使用flex实现左右布局(3)左侧导航菜单的基本布局参考elementUI中的NavMenu导航菜单,选中自定义颜色的菜单1. 导入element组件2. 在home.vue构建菜单的基本布局(4)通过axios拦截器原创 2021-03-21 12:41:16 · 680 阅读 · 0 评论 -
重启项目操作
1. 打开vue可视化界面cd F:\H5DaiMa\VS Code\Day4 ShiZhan\vue_shopccvue ui2. 开启MySQL,运行接口cd F:\H5DaiMa\VS Code\Day4 ShiZhan\Data\vue_api_servernode .\app.js3. 自动修复错误npm run lint原创 2021-03-21 08:25:52 · 311 阅读 · 0 评论 -
四、登录退出
前端和后台不存在跨域的问题时,使用cookie和session;存在跨域问题时,使用token一、token原理分析二、登陆页面布局(1)创建login子分支 1)在VS code 打开项目vue_shopcc,并执行git status,查看当前工作区是否干净2)创建login分支:git checkout -b login3)查看所有分支:git branch(2)梳理项目结构main.js是整个项目的入口文件1)打开vue 可视化面板。点击...原创 2021-03-20 18:16:28 · 2006 阅读 · 1 评论 -
三、项目初始化之后端项目初始化
1原创 2021-03-19 20:53:49 · 395 阅读 · 0 评论 -
二、项目初始化之前端项目初始化
(1)通过vue脚手架创建项目1. 进入到项目的根目录,执行“vue ui”打开可视化的项目创建页面2. 在可视化界面进行项目创建3. 项目创建成功(2)配置Element UI 组件库1. 点击 插件-》添加插件按钮,进入到界面。 搜索vue-cli-plugin-element,并安装2. 对安装的element UI 插件进行配置(3)配置axios库1. 点击 依赖-》 安装依赖-》 搜索 ...原创 2021-03-19 10:46:10 · 633 阅读 · 3 评论 -
一、项目实战概述
前端根据后端的API接口进行设计原创 2021-03-19 08:13:27 · 420 阅读 · 0 评论