![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
笔记
文章平均质量分 51
V5521
这个作者很懒,什么都没留下…
展开
-
微信小程序的基本使用
小程序默认创建模板中(没有使用云开发的模板)pages里边存放当前小程序所有的页面每一个页面需要单独创建一个文件夹每一个文件夹中默认包含四个文件js对应当前页面的逻辑代码json对应的是当前页面的配置文件可以配置当前页面顶部导航的文本内容 导航栏颜色 当前页面上拉下拉配置甚至 当前页面引入组件等等基本配置项wxss对应的是当前页面样式文件 相当于html当中的css文件wxml当前页面的页面结构文件 相当于html文件utils 该文件夹可以用来存放当前小程序中封原创 2021-09-16 21:24:44 · 317 阅读 · 2 评论 -
验证鉴权mm
import Vue from 'vue'import VueRouter from 'vue-router'import Login from '@/views/Login'import Layout from '@/Layout'import { AUTH } from '../service/users'import store from '../store'// 解决多次跳转已激活链接报错 这是因为vue-router的bug导致的/* Avoided redundant n原创 2021-09-11 18:34:59 · 111 阅读 · 0 评论 -
登录 拦截器
import axios from 'axios'import router from '../router'const instance = axios.create({ // 生产环境地址和开发环境地址不一样 baseURL: process.env.VUE_APP_BASEURL // baseURL: "http://localhost:3000" /* npm run server baseURL: "http://localhost:3000"原创 2021-09-11 18:32:16 · 153 阅读 · 0 评论 -
React Hook
hooks在React16.8才出现的,为了解决函数式组件的一些问题比如没有状态useState当我们调用useState时,可以在函数中添加一个参数,作为对应stata的默认值import { useState } from 'react'const 组件 = () => { const [msg, setMsg] = useState('默认值') const [num, setNum] = useState(0) /* this.state = {原创 2021-08-31 22:25:50 · 72 阅读 · 0 评论 -
封装input组件 使用 v-model
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<原创 2021-08-07 17:07:22 · 514 阅读 · 0 评论 -
日期格式化
// 时间格式化成秒 分钟 小时 前 const formatDate = (value) => { const time = Date.now() - new Date(value) /* 1秒 1000 1分钟 1000 * 60 60000 1小时 1000 * 60 * 60 3600000 1天 1000 * 60 * 60 * 24 86400000 1个月 1000 * 60 * 60 * 24 * 30 2592000000原创 2021-08-07 14:46:50 · 51 阅读 · 0 评论 -
ajax请求
get function sendMsg(){ // 1.创建一个XMLhttprequest对象。 let xhr = new XMLHttpRequest(); // 2.调用对象的open方法:请求发送的地址和方式。 xhr.open("get","http://localhost:3000/book/select?id="+bookId.value); //3.发送请求 xhr.send(); //4.监听状原创 2021-08-07 14:46:58 · 67 阅读 · 0 评论 -
Vue-Router 路由拦截
路由拦截 router/index.js在管理系统项目中,页面一定是除登录页外其他页面都不能直接访问,都需要登录后才能方式router.beforeEach((to, from, next) => { if (to.path !== '/login') { // 对token进行验证 (验证token的接口) 验证token().then(() => { next() }) // .catch不需要再写了,因为在axios的响应拦截器原创 2021-08-07 14:47:09 · 1186 阅读 · 0 评论 -
mysql 基本操作 笔记
MySQLmysql数据库比如说:用户信息,订单信息,交易流水,收货地址,商品信息这些都是数据。之前都是存Excel中。后端程序想要操作Excel中的数据是非常困难的,而且Excel中的数据特别多的时候,打开会特别慢。一些常见的数据库oracle 大型的数据库,安全,存储效率高。 收费。MySQL 开源,免费。 支持多种开发语言 php,Python javaSQL server下载1.官网下载https://www.mysql.com/downloads/2.集成环境php原创 2021-08-07 14:47:15 · 56 阅读 · 0 评论 -
Git 使用操作 笔记
git1.什么是git?git是一个免费的,开源的版本控制软件。2.什么是版本控制?版本控制:一种记录一个或者若干文件状态,内容变化,以便将来查询特定版本修订情况的系统。具体功能:记录文件的所有历史变化。随时可恢复到任何一个历史状态多人开发3.版本控制的软件SVN 集中式 集中式是版本库在中央服务器上,工作时,用的都是自己的电脑,将代码提交到中央服务器,从中央服务器获取新的别人提交的代码。集中式必须联网才能工作,服务器如果挂掉,整个版本控制软件都不可用。Git 分布式原创 2021-08-06 11:34:41 · 97 阅读 · 0 评论 -
07_webpack 打包体积分析
webpack打包分析安装 webpack-bundle-analyzeryarn add webpack-bundle-analyzer -Dwebpack配置const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPluginmodule.exports = { plugins: [ new BundleAnalyzerPlugin() ]}Vue中如何使用需要在vu原创 2021-08-06 11:18:44 · 270 阅读 · 0 评论 -
06_weboack 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-08-06 11:18:27 · 94 阅读 · 0 评论 -
05_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-08-06 11:17:41 · 74 阅读 · 0 评论 -
04_webpack插件的用法
webpack plugin (插件)插件给webpack提供了很多方便的功能,在进行打包时,利用插件可以解决我们的很多问题插件就是普通的nodejs模块,所以使用插件时需要下载,并且在 webpack.config.js 中引入如何使用插件// 具体如何引入需要看对应插件的文档const 插件 = require("插件模块")module.exports = { entry: "", output: { filename: "", path }, plug原创 2021-08-06 11:16:41 · 84 阅读 · 0 评论 -
03_webpack loader的作用
loader默认webpack只支持js模块,但是webpack打造的概念是“一切皆模块”,想要实现这个概念,就需要使用loader,如果我们引入了weback不支持的模块,则会在打包时报错。因此,我们需要安装相关的loader来解决这些问题module.exports = { ..., module: { rules: [ { test: /\.后缀$/, use: "xxx-loader", // 如果loader需要原创 2021-08-06 11:15:57 · 83 阅读 · 0 评论 -
02_webpack命令
webpack命令wabpack基本概念想要有webpack命令,那么我们需要全局安装,但是!!!!如果全局安装无法适应所有的项目,那么我们就可以只在项目中安装,利用package.json中scripts调用对应命令因此,我们要在对应的项目中进行安装npm i webpack --save-dev# 或者yarn add webpack -D同时需要安装 webpack-cli 如果没有安装则自动提示,建议在安装webpack时,同时安装webpack-cli,使用下面命令即可npm i原创 2021-08-06 11:15:01 · 82 阅读 · 0 评论 -
01 webpack基本概念
webpackWebpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。Webpack改变的是前端的开发模式,使前端可以进行模块化开发,基于ESModule。现在主流的框架开发都基于webpack。entry入口文件设置,只有和入口文件产生模块关联,最终才能被webpack打包module.exports = { // 单入口写法 entry: "./src/main.js", // 多入口数组写法 entr原创 2021-08-06 11:12:04 · 125 阅读 · 0 评论 -
ElementUI表单验证
ElementUI表单验证ElementUI的表单验证借助了async-validator,该模块内置了很多原生类型的验证,如: string, number等相关类型给el-form绑定model属性<template> <el-form :model="formData"></el-form></template><script> export default { data () { return {原创 2021-08-06 11:07:37 · 130 阅读 · 0 评论 -
VUE 中的render 渲染
render在我们的组件中,可以使用render来代替template常规组件<template> <div></div></template>render组件export default { render (createElement) { return createElement('div', { }, "") }}createElement在render函数中有一个函数参数,这原创 2021-08-06 10:33:57 · 767 阅读 · 0 评论 -
RBAC
RBAC基于角色的权限控制:用户->角色->权限权限有两种,一种是路由菜单权限(用户无法访问对应的路由),另外一种是按钮权限菜单权限基于路由拦截的权限控制菜单不会隐藏,点击则跳转到403一般用户登录后,后台返回该用户可以使用的路由表。这个路由表返回后,可以进行对应的路由拦截,如果要跳转的路由不在对应的路由表中,则跳转到403无法隐藏对应的不可用菜单 会导致用户不知道自己有哪些权限利用路由拦截 + 菜单路由过滤的操作所有路由都生效,菜单隐藏,手动输入url访问没有权限的原创 2021-08-04 18:27:19 · 77 阅读 · 0 评论 -
Vue 使用echarts 渲染图表
vue中使用echarts如果在vue里使用echarts可以使用vue-echarts,又因为echarts需要echarts模块,所以我们需要安装这两个模块yarn add echarts vue-echarts在vue2中使用该模块时,需要安装@vue/composition-apiyarn add @vue/composition-api如何使用1 创建对应的组件在components中创建一个文件Chart.vue2 生成基本的模板结构,引入v-chart组件<temp原创 2021-08-04 18:26:52 · 1033 阅读 · 0 评论 -
Vue ref 与#nextTick的使用
nextTick在我们Vue中,如果我们需要在DOM渲染完成后执行一些代码,一般就是获取DOM的操作。我们可以使用nextTick{ created () { this.$nextTick(() => { // 可以使用回调函数的写法 // 这个函数中DOM必定渲染完成 }) this.$nextTick().then(() => { // 也支持promise // 这个函数中DOM必定渲染完成 })原创 2021-08-04 18:24:38 · 164 阅读 · 0 评论 -
Vue 中 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.原创 2021-08-04 18:22:43 · 104 阅读 · 0 评论 -
Element-Ui表单验证
ElementUI表单验证ElementUI的表单验证借助了async-validator,该模块内置了很多原生类型的验证,如: string, number等相关类型给el-form绑定model属性<template> <el-form :model="formData"></el-form></template><script> export default { data () { return {原创 2021-08-04 18:21:49 · 126 阅读 · 0 评论 -
token
const jwt = require(‘jsonwebtoken’)// console.log(jwt)const secret = ‘fdsaghjidsajglidsjhviyhsfciogjrelkyjnhrknkl’// const token = jwt.sign({username: ‘张三’, email: ‘111@qq.com’, nickname: ‘xxx’}, secret, { expiresIn: ‘1h’ })// console.log(token)// eyJ原创 2021-07-19 20:11:01 · 47 阅读 · 0 评论 -
后台建议登录验证
…jsconst jsonServer = require(‘json-server’);const jwt = require(‘jsonwebtoken’);const server = jsonServer.create();const router = jsonServer.router(‘db.json’);const middlewares = jsonServer.defaults();//生成一个密钥const sec = “xxxxx”;// Set default mid原创 2021-07-19 20:01:26 · 79 阅读 · 0 评论 -
VUEX
1. VuexVuex 可以帮助我们管理共享状态,并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex。一个简单的 store 模式 (opens new window)就足够您所需了。但是,如果您需要构建一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是:Fl...原创 2021-07-15 23:02:12 · 539 阅读 · 0 评论 -
Axios请求方式
axiosaxios是一个封装好的独立的ajax请求库, 基于Promise。支持在浏览器和Node中使用使用我们可以在我们的页面中引入axios.js,然后使用axios相关功能<script src="axios.js路径"></script>请求方法GET、DELETEaxios.请求方法(get, delete)("接口文档的接口地址", { params: { 接口文档中的参数: "要携带的值" }}).then(res => {原创 2021-07-15 22:54:06 · 349 阅读 · 0 评论 -
在VUE中 如何在DOM 渲染完成后 在执行一些DOM 操作
nextTick在我们Vue中,如果我们需要在DOM渲染完成后执行一些代码,一般就是获取DOM的操作。我们可以使用nextTick{ created () { this.$nextTick(() => { // 可以使用回调函数的写法 // 这个函数中DOM必定渲染完成 }) this.$nextTick().then(() => { // 也支持promise // 这个函数中DOM必定渲染完成 })原创 2021-07-15 22:52:27 · 10518 阅读 · 0 评论 -
JSON-SERVER
JSON-SERVERjson-server中文的博客安装npm i -g json-server创建项目创建一个文件夹在文件夹中新建db.json运行项目在对应文件中打开命令行输入命令json-server --watch db.json项目既可运行成功获取到的接口获取到的接口和db.json中的内容有关,db.json中应该是个对象,包裹很多的数组{ "资源名": [ { "key": "value" } ]}GET /原创 2021-07-14 23:31:38 · 140 阅读 · 0 评论 -
Vue 组件通信
组件通信组件关系在Vue中组件关系比较单纯,只有两种关系父子关系非父子关系只要不是父子关系,就是非父子关系组件通信组件通信有三种情况父子通信 父组件中的数组传递到子组件中(常用)子父通信 子组件中相关操作修改父组件中的数据(常用)非父子通信 非父子组件关系中组件A要把数据传递到组件B中自定义事件自定义事件是子父通信和非父子通信的基石。我们必须了解自定义事件才能完成子父和非父子通信$emit触发自定义事件this.$emit('自定义事件名', '要传递的数据')$o原创 2021-07-14 23:33:48 · 94 阅读 · 0 评论 -
VUE自动引入 路由 跟模块
自动引入module跟router…jsconst modules = {}const files = require.context(’./modules’, true, /.js$/)files.keys().forEach(path => {const module = files(path).default || {}modules[path.slice(2, -3)] = {namespaced: true,…module}})……jsconst _routes =原创 2021-08-07 14:47:03 · 127 阅读 · 0 评论 -
路由组件
VueRouter的基本概念文档如果我们想要使用路由,则需要引入vue-router.jsvue-router地址路由组件路由组件在创建时,和普通组件一样,只是在使用时不同,路由组件需要被放在路由配置中(routes)路由配置我们如果想要让我们的网页在访问不同地址显示不同的内容,则需要使用路由配置去配置对应的路由路由对象我们通过new VueRouter可以创建出来一个router对象,我们称其为路由对象,路由对象中可以实现相关的路由跳转视图router-view 是一个组件的名字,未原创 2021-07-14 23:35:14 · 1726 阅读 · 0 评论 -
计算属性compute
计算属性我们有时候会在模板中绑定表达式来做简单的数据处理,但是如果表达式太长,就会变得臃肿难以维护。比如以下代码<div> {{text.split(',').reverse().join(',')}}</div>表达式里面包含了3个操作,并不是很清晰,有时候可能会更加复杂,所以在遇到复杂的逻辑时,我们应该使用计算属性。上例可以用计算属性进行改写:<div id="app"> {{reverseText}}</div><原创 2021-07-14 23:32:56 · 509 阅读 · 0 评论 -
Vue slot插槽的基本使用
Slot插槽插槽,可以实现在组件标签中写内容,然后渲染到组件中。默认情况下是不支持这种操作的,使用slot可以实现默认slotChild.vue<template> <div> <slot>默认值 如果标签中没写内容,这显示默认内容</slot> </div></template><script> export default { }</script>Parent.原创 2021-07-14 23:34:30 · 100 阅读 · 0 评论 -
路由参数
路由参数获取意义在哪?获取到url中的参数然后利用参数发起ajax请求,然后获取我们想要的数据什么时候需要使用?如文章详情,商品详情,使用相同的组件,渲染不同的数据,我们就可以通过传递不同的路由参数,获取不同的数据,渲染相同的组件$route当我们使用路由时,vue-router会给我们所有的组件里都添加一个 data 叫 $route ,这个 $route 代表的是我们的路由信息path 路径fullPath 携带参数的完整路径query ?后的查询参数params 动态路由参数原创 2021-07-14 23:36:07 · 90 阅读 · 0 评论 -
VueCLI 基本操作
VueCLIVueCli文档安装@vue/clinpm i -g @vue/cli# 如果装不上 cnpm i -g @vue/cli当我们安装了这个模块后,我们的命令行工具里就会有命令vue如果npm太慢,则直接修改npm的相关源npm config set registry https://registry.npm.taobao.orgyarn config set registry https://registry.npm.taobao.org创建项目想要创建项目需要使原创 2021-07-14 23:32:20 · 125 阅读 · 0 评论 -
postman
postmanPostmanpostman用来测试我们的接口,在工作中,后台会给我们提供接口文档,我们要使用对应的接口文档进行接口的测试,而一个好的接口测试工具,会让我们在工作中事半功倍。安装安装只需要双击打开安装工具即可,等待几分钟后,桌面会出现postman的快捷方式,点击快捷方式,进入下面的页面可以选择登录 创建免费账户,也可以快速跳过,无登录进入应用测试接口GET请求请求方式选择GET,分别将请求地址、请求参数填入对应的位置,点击send发送既可查看请求结果POST请求请求方原创 2021-07-14 23:30:54 · 53 阅读 · 0 评论