- 博客(73)
- 收藏
- 关注
RSS订阅原创 什么是vuex？如何使用vuex？
1. Vuex1.1. Vuex的核心思想1.1.1. 流程1.2. 基本模板1.3. state1.3.1. 如何设置state1.3.2. 如何在组件中使用state1.3.2.1. 直接使用1.3.2.2. 利用computed优化1.3.2.3. 辅助函数1.4. mutation1.4.1. 如何创建mutation1.4.2. 如何使用mutation1.5. action1.5.1. 如何创建action1.5.2. 如何使用acti.
2022-01-25 10:16:49
385
原创 环境变量配置
环境变量配置.env.env[.mode].env.local.env[.mode].local为了有local，如果某个地址需要你去请求，那么我们可以配置local在项目开发中，至少存在开发环境和生产环境。在不同环境中，前端所请求的接口大概率是不同的，如果不同，则需要在不同的环境中，使用不同的值npm run server 所使用的是 developmentnpm run build 所使用的是 production我们需要让代码在不同的操作中，使用不同的变量。！！！！！！！！！！
2022-01-25 10:15:32
553
原创 事件、操作元素的属性、操作元素的类名
文章目录一、事件1.1 什么是事件？1.2 事件的三要素1.3 事件类型的分类1.4 书写一个事件的步骤1.5 鼠标事件的类型二、操作元素的属性2.1 操作元素的原生属性2.2 操作元素的自定义属性2.3 H5新增自定义属性三、操作元素的类名3.1 className3.2 classList一、事件1.1 什么是事件？定义：用户和文档或浏览器窗口发生的交互行为。例如：点击按钮、鼠标移动，按下键盘上的某个键、关闭窗口等。1.2 事件的三要素事件源。在谁身上绑定，谁就是事件源。事件类型。点
2021-07-29 18:51:07
658
原创 webpack打包分析
webpack打包分析安装 webpack-bundle-analyzeryarn add webpack-bundle-analyzer -Dwebpack配置const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPluginmodule.exports = { plugins: [ new BundleAnalyzerPlugin() ]}Vue中如何使用需要在vu
2021-07-27 17:05:49
98
原创 webpack vue开发环境配置
webpack配置基础vue开发环境在vuecli中，可以去定义webpack的配置，在 vue.config.js 中配置chainWebpack 文档如何自己配置一个vue开发环境识别vue文件需要安装以下模块yarn add vue-loader vue-template-compiler -Dwebpack.config.jsmodule.exports = { entry: "./src/main.js", output: { filename: "app.[hash
2021-07-27 17:05:04
149
原创 webpack devserver模式
webpack devserver在进行开发的过程中，我们需要让代码修改后自动更新页面，因此需要设置对应的devServer安装webpack-dev-serveryarn add webpack-dev-server -D配置module.exports = { ..., devServer: { contentBase: path.join(__dirname, 'dist'), compress: true, port: 9000 }}配置启动脚本
2021-07-26 18:43:11
100
原创 webpack插件的用法
webpack plugin (插件)插件给webpack提供了很多方便的功能，在进行打包时，利用插件可以解决我们的很多问题插件就是普通的nodejs模块，所以使用插件时需要下载，并且在 webpack.config.js 中引入如何使用插件// 具体如何引入需要看对应插件的文档const 插件 = require("插件模块")module.exports = { entry: "", output: { filename: "", path }, plug
2021-07-26 18:41:48
71
原创 webpack插件的用法
webpack plugin (插件)插件给webpack提供了很多方便的功能，在进行打包时，利用插件可以解决我们的很多问题插件就是普通的nodejs模块，所以使用插件时需要下载，并且在 webpack.config.js 中引入如何使用插件// 具体如何引入需要看对应插件的文档const 插件 = require("插件模块")module.exports = { entry: "", output: { filename: "", path }, plug
2021-07-26 11:48:30
72
原创 webpack loader的作用
loader默认webpack只支持js模块，但是webpack打造的概念是“一切皆模块”，想要实现这个概念，就需要使用loader，如果我们引入了weback不支持的模块，则会在打包时报错。因此，我们需要安装相关的loader来解决这些问题module.exports = { ..., module: { rules: [ { test: /\.后缀$/, use: "xxx-loader", // 如果loader需要
2021-07-26 11:47:31
425
原创 webpack命令的使用
webpack命令想要有webpack命令，那么我们需要全局安装，但是！！！！如果全局安装无法适应所有的项目，那么我们就可以只在项目中安装，利用package.json中scripts调用对应命令因此，我们要在对应的项目中进行安装npm i webpack --save同时需要安装 webpack-cli 如果没有安装则自动提示，建议在安装webpack时，同时安装webpack-cli，使用下面命令即可npm i webpack webpack-cli --save安装到本地后，去pack
2021-07-26 09:59:57
192
原创 webpack的基本概念以及相关配置
webpackWebpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。Webpack改变的是前端的开发模式，使前端可以进行模块化开发，基于ESModule。现在主流的框架开发都基于webpack。entry入口文件设置，只有和入口文件产生模块关联，最终才能被webpack打包module.exports = { // 单入口写法 entry: "./src/main.js", // 多入口数组写法 entr
2021-07-26 09:58:37
113
原创 RBAC权限控制
RBAC基于角色的权限控制：用户->角色->权限权限有两种，一种是路由菜单权限（用户无法访问对应的路由），另外一种是按钮权限菜单权限基于路由拦截的权限控制菜单不会隐藏，点击则跳转到403一般用户登录后，后台返回该用户可以使用的路由表。这个路由表返回后，可以进行对应的路由拦截，如果要跳转的路由不在对应的路由表中，则跳转到403无法隐藏对应的不可用菜单 会导致用户不知道自己有哪些权限利用路由拦截 + 菜单路由过滤的操作所有路由都生效，菜单隐藏，手动输入url访问没有权限的
2021-07-24 11:56:51
160
原创 可复用组件封装的意义是什么？
可复用组件本质上来讲，封装可复用组件，为了减少代码重复编写。属性 props事件监听 @自定义事件插槽 slot属性我们可以通过给子组件标签上添加属性，子组件中通过props接收这些属性，并且根据这些属性将组件设置成不同的养殖自定义事件组件内容的属性变化，我们要通过自定义事件通知父组件，父组件通过@自定义事件名去监听到对应的内容的改变插槽如果我们想要让用户在子组件标签中添加的内容出现在我们的组件里。可以使用slot，如果有多个位置需要添加，则使用具名slot，如果我们想要给用户留下数
2021-07-20 16:31:58
601
原创 render函数的使用
render在我们的组件中，可以使用render来代替template常规组件<template> <div></div></template>render组件export default { render (createElement) { return createElement('div', { }, "") }}createElement在render函数中有一个函数参数，这
2021-07-20 16:29:32
1506
原创 什么是render函数？什么时候会用到render函数？
为什么要用render函数？什么时候会用到render函数总结如下：render方法：实质就是生成template模板的；通过调用一个方法来生成，而这个方法是通过render方法的参数传递给它的；这个方法有三个参数，分别是标签名，标签的相关属性，标签内部的html内容；通过这三个参数，可以生成一个完整的模板。备注：只有在我们要实现对应的自己封装可复用的组件时，需要通过js配置传递过去渲染结构，才会用到render。...
2021-07-20 16:11:32
2060
原创 Vuex-getters、modules
1、vuex中的state越来越多，会导致store越来越臃肿，我们可以利用modules给我们对应的数据资源划分模块。2、module有自己独立的state、mutations、actions、getters、modules3、 模块中的state如何获取:this.$store.state.模块名.state中的数据名4、 getters如何获取this.$store.getters.模块名.getters中的名字5、模块一定要加namespaced: true 这个配置!!!，
2021-07-13 20:13:57
483
原创 ElementUI表单验证的步骤
一、ElementUI表单验证ElementUI的表单验证借助了async-validator，该模块内置了很多原生类型的验证，如： string, number等相关类型1、给el-form绑定model属性<template> <el-form :model="formData"></el-form></template><script> export default { data () { return
2021-07-08 12:28:05
588
原创 nextTick、$ref的用法
1、nextTick在我们Vue中，如果我们需要在DOM渲染完成后执行一些代码，一般就是获取DOM的操作。我们可以使用nextTick{ created () { this.$nextTick(() => { // 可以使用回调函数的写法 // 这个函数中DOM必定渲染完成 }) this.$nextTick().then(() => { // 也支持promise // 这个函数中DOM必定渲染完成 })
2021-07-07 14:21:14
298
原创 项目中如何使用Element-UI？
一、ElementUI安装ElementUInpm i --save element-ui# 或者yarn add element-ui1.1 在项目中引入找到main.js，引入模块和样式import Vue from 'vue'import App from './App.vue'// 引入elementuiimport ElementUI from 'element-ui'// CSS可以直接通过import在组件中引入import 'element-ui/lib/theme
2021-07-07 14:18:12
404
原创 什么是导航守卫？如何使用？
导航守卫所谓导航守卫，就是在路由跳转时对路由进行拦截，然后改变跳转方向的相关方法路由信息对象组件中获取路由信息对象使用 this.$route ，在导航守卫中有 to , from，这两个分别代表要跳转的路由信息对象，和跳转前的路由信息对象全局前置守卫// router就是new VueRouter()router.beforeEach((to, from, next) => { next() // 如果不写next()则所有都无法正常跳转})next()next是进行路由导
2021-07-06 12:18:02
290
原创 利用Postman工具测试接口
Postmanpostman用来测试我们的接口，在工作中，后台会给我们提供接口文档，我们要使用对应的接口文档进行接口的测试，而一个好的接口测试工具，会让我们在工作中事半功倍。安装安装只需要双击打开安装工具即可，等待几分钟后，桌面会出现postman的快捷方式，点击快捷方式，进入下面的页面可以选择登录 创建免费账户，也可以快速跳过，无登录进入应用测试接口GET请求请求方式选择GET，分别将请求地址、请求参数填入对应的位置，点击send发送既可查看请求结果POST请求请求方式选择POST，
2021-07-06 12:16:55
549
原创 利用json-server来mock数据
JSON-SERVERjson-server中文的博客安装npm i -g json-server创建项目创建一个文件夹在文件夹中新建db.json运行项目在对应文件中打开命令行输入命令json-server --watch db.json项目既可运行成功获取到的接口获取到的接口和db.json中的内容有关，db.json中应该是个对象，包裹很多的数组{ "资源名": [ { "key": "value" } ]}GET /
2021-07-06 12:15:52
175
原创 嵌套路由的写法
嵌套路由嵌套路由又叫子路由，实现相关路由组件在某个路由组件的 router-view 中渲染，而不是在 app 的 router-view 中渲染children嵌套路由的配置使用 children 属性children中的定义方式，和routes一致{ path: "", component: Component, children: [ { path, component } ]}！！！！！！注意！！！！！！子路由的 component 会被
2021-07-05 13:22:27
557
原创 路由参数的获取
路由参数获取意义在哪？获取到url中的参数然后利用参数发起ajax请求，然后获取我们想要的数据什么时候需要使用？如文章详情，商品详情，使用相同的组件，渲染不同的数据，我们就可以通过传递不同的路由参数，获取不同的数据，渲染相同的组件$route当我们使用路由时，vue-router会给我们所有的组件里都添加一个 data 叫 $route ，这个 $route 代表的是我们的路由信息path 路径fullPath 携带参数的完整路径query ?后的查询参数params 动态路由参数
2021-07-05 13:21:16
4741
原创 VueRouter的使用
文章目录一、VueRouter的基本概念1.2 路由组件1.3 路由配置1.4 路由对象1.5 视图二、VueRouter的基本配置三、VueCli使用VueRouter3.1 自己配置（建议直接安装【见第四章】）步骤1、在src中创建router、views文件夹步骤2、 在router文件夹中创建index.js步骤3、 在main.js中引入router对象步骤4、 到App.vue添加router-view组件3.2 直接安装步骤1 在命令行创建项目步骤2 选择最后一个步骤3 选择Router，取
2021-07-02 13:30:48
846
原创 vue组件的使用
文章目录一、组件的初步认识1.1 使用组件的原因？1.2 组件本质是什么？1.3 全局组件1.3.1 全局组件的写法：1.4 局部组件的写法二、组件中的data为何是个函数？2.2 为何是个函数的解释三、动态组件3.1 动态组件写法一3.1 动态组件写法二四、生命周期4.1 什么是生命周期？4.2 vue的生命周期可以分为三大阶段：五、组件通信一、组件的初步认识1.1 使用组件的原因？为了提高代码的复用性。1.2 组件本质是什么？可复用的vue实例。 组件需要注册后才可以使用。分为全局组
2021-06-28 19:08:54
397
3
转载 vue的计算属性、watch监听、过滤器
计算属性我们有时候会在模板中绑定表达式来做简单的数据处理，但是如果表达式太长，就会变得臃肿难以维护。比如以下代码<div> {{text.split(',').reverse().join(',')}}</div>表达式里面包含了3个操作，并不是很清晰，有时候可能会更加复杂，所以在遇到复杂的逻辑时，我们应该使用计算属性。上例可以用计算属性进行改写：<div id="app"> {{reverseText}}</div><
2021-06-24 11:57:40
163
转载 vue基础知识二
vue学习第二天经过前一天的知识点学习，那么今天我们主要以案例练习为主，多敲代码，提高代码量才是学习编程的王道。1、key的作用假设现在有一个需求，在页面循环data中的数组。很简单，有手就行，分分钟写出来。 <div id="app"> <ul> <li v-for="(item, i) in list"> <input type="checkbox"> {{item.name}} </li>
2021-06-24 10:45:31
80
转载 vue基础知识一
VUE基础1、vue是什么？目前前端有三个非常流行的框架，非别是angularjs,reactjs,vuejs。而这三个当中，vuejs的受欢迎度目前是最高的，而开发vuejs的就是一个中国人尤雨溪。其它框架的关联借鉴angular的模板和数据绑定技术借鉴react的组件化和虚拟DOM技术基本概念vue.js的官方文档中说vue是渐进式JavaScript框架。我们来一个一个解释其中的概念。渐进式vue全家桶其实是包含很多vue的扩展插件的，比如以下。vue-cli: vue脚手架vu
2021-06-24 10:28:41
390
原创 弹性盒模型
弹性盒模型2009年，W3C提出了一个新的盒模型，弹性盒模型（flex），用于解决网页布局中的一些问题。flex的优势flex布局的子元素不会脱标。属性非常丰富，可以灵活使用，更加便捷的为页面布局。IE低版本不支持，IE10-11支持度不高。标准浏览器完全支持。移动端支持性也比较高。弹性盒子声明定义使用display:flex或者inline-flex声明一个元素为弹性盒子。此时，该元素中的子元素就会遵循弹性布局。【注意】弹性盒子中的子级块级元素会并排显示。flex与inline
2021-06-11 13:23:31
68
原创 BFC规范
BFC每一个块级元素应该都是一个独立的盒子，不应该对其他的块级元素或者父盒子造成影响。但是实际情况并非如此，可能会出现以下几种情况：外边距塌陷外边距重合高度塌陷。BFCblock formatting context 块级 格式化 上下文官文解释：它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。BFC提供了一个环境，HTML元素在这个环境中按照一定的规则进行布局。通俗来讲：BFC的目的就是形成一个完全独立的空间，让在这个空间中的子元素不会在布局上影响
2021-06-11 13:23:15
84
原创 什么是数据库连接池？
数据库连接池1、什么是数据库连接池数据库连接池是程序在启动时创建足够多的数据库连接，将这些连接放入一个池子里。由程序动态地进行申请，使用和关闭。2、连接池的作用频繁的创建和关闭连接是非常消耗资源的。作用：负责分配，管理和释放数据库连接。允许程序重复使用现有的同一个数据库连接，而不是重现创建一个，避免了资源的消耗。3、node中使用数据库连接池3.1 安装引入mysql模块cnpm i mysql -S //下载安装并且在node js文件中引入mysql模块。const my
2021-06-11 13:22:14
93
原创 DOM元素操作
01 什么是DOM？1、 DOM：document object model 文档对象模型。DOM是由节点组成的。2、节点的类型：元素节点：HTML标签文本节点：标签中的文字（包含空格和换行。）属性节点：标签的属性3、DOM可以做什么？（1）可以操作HTML元素（增删改查）增：添加，在一个DOM节点下添加一个子节点，相当于动态新增了一个HTML标签。删：删除。将一个节点从HTML中删除，相当于删除了该节点的所有内容以及它包含的子节点。改：改变。改变DOM节点中的内容，包含HTML
2021-06-10 10:37:48
1159
原创 什么是面向对象和继承？
11、面向对象面向对象是一种思维。 1、 面向过程：一步一步按照步骤解决问题。 解决简单问题的时候非常方便。 2、 面向对象的特点： 封装 继承 多态 封装：将一类事物的创建定义为一个构造函数的过程，就叫做封装。 这一类事物共有的特征才可以被定义为属性，共有的行为才可以被定义为方法。 继承：继承父类的属性和方法。 function 动物（）{ jiao(){ } } var stu = new 动
2021-06-10 10:37:09
186
原创 连接数据库的步骤
01、连接数据库的步骤：1.对项目初始化。npm init -y;2.npm安装MySQL的驱动 cnpm i mysql --save;3.引入mysql模块。4.连接配置。调用createConnection方法，这个方法需要一个对象，对象的属性为连接数据库的配置信息。5.建立连接。6.创建sql语句（查询select：会将查询的记录封装成一个对象）添加，插入inset、修改updata、删除delete：成功后返回7.执行sql语句结束连接。不能一直开启
2021-06-10 10:36:08
20162
1
原创 日期格式化的方法
日期格式化：1.下载第三方模块 moment2.引入模块 const moment = require(“moment”);3.使用 moment(日期对象).format(日期格式) 常见的日期格式：YYYY/MM/DD hh:mm:ss YYYY/MM/DD YYYY-MM-DD
2021-06-10 10:35:29
427
1
原创 什么是路由？如何使用？
01、什么是路由？路由：web服务器端会根据用户的请求地址不同，请求方式不同，做出不同的处理，响应不同的结果。路由：请求路径+请求方式。 (可以多次请求)02、实现路由const express = require("express");let app = express();app.get("/",(req,res)=>{ res.send("<h1 style='color:brown'>使用express搭建服务器成功！</h1>");})ap
2021-06-10 10:34:51
176
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人