蜗牛蜗牛大哥-CSDN博客

原创关于mockjs库的使用

现在大多数项目都是前后端分离，在后端人员的接口还没写通的时候可以mock数据来看看我们写的页面是否有样式问题或者逻辑bug。首先放上mock的官方文档地址mockjs官网链接（1）安装这里使用node方式进行安装，npm install mockjs(2)引入到项目中：const Mock = require('mockjs');import {Random} from "mockjs";(3)mockjs语法：mockjs语法规范包括两个部分：①数据模板定义规范②数据占位符定义规范

2021-04-13 11:21:53 250

原创如何在mac上开启iOS模拟器进行调试代码

做h5项目的时候在本地浏览器正常，安卓正常，但是iOS不正常，发现是兼容性的问题，但是奈何没有苹果手机，就搞了好久，现在来搞搞如何在Mac里开启iOS模拟器进行调试代码。1. 下载安装xcode安装的注意事项是下载的版本需要与Mac系统兼容。2. 打开xcode新建一个文件，选择iOS的单页面即可。然后点击左上角的Xcode下的Open Developer Tool下的Simulator，就会出来一个iOS手机模拟器，然后在模拟器的safari浏览器里打开要调试的页面。3. 在Mac电脑上打开

2020-11-20 18:05:21 3053

原创 vue实现电商后台管理系统---（5）权限管理

权限管理下分为两个组件------角色列表和权限列表。一、权限列表：（1）权限列表的页面展示如下：主要实现的功能是向后台端口获取权限列表然后展示到页面中。（2）实现操作：在components文件夹下创建一个power文件夹，里面创建一个Righrs.vue的文件。具体的程序代码结构如下：<template> <div>  <el-breadcrumb separator-class="el-ic

2020-09-12 16:00:44 636

原创 vue实现电商后台管理系统---（4）用户管理

（1）用户管理下的用户列表界面如下所示：在最上面是一个面包屑的导航区域，主要用到的是element-ui里的<el-breadcrumb>、<el-breadcrumb-item>。接着用户列表的详细信息用到Card卡片来包裹一个包含搜索框和添加用户按钮的行以及一个表格。下面的是分页区域，使用Pagination分页。点击添加用户会弹出添加用户的对话框，点击操作中的每个也会弹出相应的对话框，而点击删除是会弹出是否确认删除的警告。（2）然后来看一下用户管理下的用户列表功

2020-09-06 19:14:44 1249

原创 vue实现电商后台管理系统---（3）主页实现

首先展示一下主页的界面效果：实现步骤与思路：一、主页面：（1）在Home.vue中设计主页面，分为头部、内容区，内容区里包含侧边栏以及主体内容区三大部分。内容区主要是使用侧边栏增加路由来实现。头部里包含一个logo，一个名称以及一个退出按钮。侧边栏：使用element-ui中的Menu来进行构建，有二级菜单。主体内容区：使用路由来获取相对应的内容并且进行展示。代码：<template> <el-container class="home-container"&

2020-09-04 18:57:23 1441

原创卸载windows10强推的新版edge浏览器

虽然这个新版的浏览器使用起来像极了谷歌浏览器，但是一向使用edge浏览器来查看PDF电子书的我来说，没有了目录查看真的超级不方便，所以就查找了一下教程去进行如何恢复以前的版本。网上很多都是说找到“应用和功能”中的新版edge浏览器进行卸载就可以进行卸载，无奈的是卸载的按钮处在被禁用的状态。所以最终的解决方案如下：找到“资源管理器”，找到edge浏览器的安装目录C:\Program Files (x86)\Microsoft\Edge\Application,然后通过查看自己edge浏览器的版本号来找到

2020-08-18 17:59:49 916 2

原创 vue实现电商后台管理系统---（2）登录退出功能

最终的界面结果截图：实现步骤与思路：一、登录功能：（1）在components文件夹下创建一个Login.vue的组件，在路由文件（index.js）中导入登录页组件：import Home from '../components/Home.vue'，并且给根组件（App.vue）添加一个路由占位符<router-view></router-view>，在路由文件中添加路由规则{ path: '/login', component: Login }。（2）编写结构和样式以及

2020-07-27 22:31:28 1228

原创 vue实现电商后台管理系统---（1）项目初始化

这个电商管理系统采用了前后端分离的开发模式，前端是基于Vue技术栈的SPA项目。（1）这个电商后台管理系统的功能结构图如下：（2）所用到的技术：1).前端项目的技术：VueVue-routerElement-UIAxiosEcharts2).后端项目的技术：Node.jsExpressJwtMysqlSequelize（3）前端项目初始化使用vue脚手架利用图形化界面的方式进行创建一个项目（shop_management_system）：首先确保已经安装好了脚手架

2020-07-24 22:16:22 1214 1

原创 Webpack配置vue组件的加载器（vue-loader）报错解决

首先介绍一下如何使用webpack来配置vue组件。第一步：在终端运行npm i vue-loader vue-template-compiler -D，安装处理vue组件的加载器，其中vue-template-compiler -D是vue-loader的内置依赖项。第二步：在项目的webpack.config.js文件中添加vue-loader的配置：①首先需要导入vue组件插件：const VueLoaderPlugin = require('vue-loader/lib/plugin.j

2020-07-22 09:46:26 2379

原创 node.js通过babel体验ES6模块化

步骤如下：第一步：npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node第二步：npm install --save @babel/polyfill第三步：在项目根目录创建一个文件babel.config.js，里面代码内容为：const presets = [ ["@babel/env", { targets: { edge: "17",

2020-07-17 12:10:26 159

原创用vue路由实现简单的编程式导航

这个案例主要是用来复习vue-router的知识点，涉及到了路由的基本使用方法、路由重定向、动态路由分配及传递参数、路由编程式导航等知识点。实现的思路：首先定义一个App的根组件，然后将模板渲染到这个组件中，新建一个路由实例对象router，创建路由规则将这个模板渲染出来。然后定义5个组件：用户管理组件（Users）、权限管理组件（Rights）、商品管理组件（Goods）、订单管理组件（Orders）、系统设置组件（Settings），并在根组件中添加这5个组件的路由链接和路由占位符，在路由实例对象

2020-07-15 17:16:24 494

原创 vue组件化实现购物车案例

这个案例主要是对组件化知识的应用，如何注册组件、父子组件间相互传递数据等有了一个实践。案例一共分为三个组件，分别为标题组件、列表组件、结算组件。首先是写一个静态页面，然后根据静态页面来进行组件化划分。如下图所示：标题组件：通过父组件向子组件传递数据的方式，在父组件定义数据，然后将用户的动态名传递给子组件，在子组件中通过props属性来接收数据。列表组件：实现的功能主要有三个：①渲染价格功能：也是通过父组件向子组件传递数据，将父组件中的list数据中的price渲染到列表中；②删除商品

2020-07-11 12:59:32 3917 1

原创手动安装vue测试工具vue.js devtools

首先在vue官方文档中点击导航栏“生态系统”中的工具的“Devtools”，然后跳转到https://github.com/vuejs/vue-devtools，根据步骤来进行安装插件。遇到的问题1：yarn没有安装，解决方法在上一篇博客已经提到。遇到的问题2：在第三步安装时，一直处于waiting状态（截图忘记截啦），尝试通过yarn config set registry 'https://registry.npm.taobao.org更换淘宝源还是无果，最终使用cnpm install安装所需要

2020-07-07 00:13:06 176

原创解决安装yarn遇到网络连接问题

今天在安装vue调试工具时，发现自己没有安装yarn，然后就遇到了网络连接的问题。node和npm版本如下：问题显示：解决方法：将代理置为null：npm config set proxy null

2020-07-03 17:18:19 3780 2

原创使用vue实现简单的图书管理

这个小案例巩固了vue的基础知识，主要涉及了各种指令的操作，自定义指令、生命周期、侦听器、过滤器、计算属性等的实践。完成的功能有对图书的增删改和统计图书的总量。功能介绍：添加图书：输入编号和名称点击提交按钮即可添加图书，这里在名称表单中有一个监听器（name），如果名称相同提交按钮就失效，主要是使用数组的push()方法；修改图书：点击修改按钮将图书的信息填充到表单中，但是编号不能修改，使用disabled=‘true’来使其失效，然后修改名称之后再点击提交进行修改。将数据填充到表单使用数组的fil

2020-07-02 17:55:32 2862

weixin_43485190的博客