V5521-优快云博客

原创微信小程序的基本使用

小程序默认创建模板中（没有使用云开发的模板）pages里边存放当前小程序所有的页面每一个页面需要单独创建一个文件夹每一个文件夹中默认包含四个文件js对应当前页面的逻辑代码json对应的是当前页面的配置文件可以配置当前页面顶部导航的文本内容导航栏颜色当前页面上拉下拉配置甚至当前页面引入组件等等基本配置项wxss对应的是当前页面样式文件相当于html当中的css文件wxml当前页面的页面结构文件相当于html文件utils 该文件夹可以用来存放当前小程序中封

2021-09-16 21:24:44 436 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 167

原创登录拦截器

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 215

原创 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 124

原创封装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&lt

2021-08-07 17:07:22 583

原创 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 97

原创 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 1279

原创 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 199

原创 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 114

原创日期格式化

// 时间格式化成秒分钟小时前 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 98

原创 Git 使用操作笔记

git1.什么是git？git是一个免费的，开源的版本控制软件。2.什么是版本控制？版本控制：一种记录一个或者若干文件状态，内容变化，以便将来查询特定版本修订情况的系统。具体功能：记录文件的所有历史变化。随时可恢复到任何一个历史状态多人开发3.版本控制的软件SVN 集中式集中式是版本库在中央服务器上，工作时，用的都是自己的电脑，将代码提交到中央服务器，从中央服务器获取新的别人提交的代码。集中式必须联网才能工作，服务器如果挂掉，整个版本控制软件都不可用。Git 分布式

2021-08-06 11:34:41 157

原创 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 369

原创 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 166

原创 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 154

原创 04_webpack插件的用法

webpack plugin (插件)插件给webpack提供了很多方便的功能，在进行打包时，利用插件可以解决我们的很多问题插件就是普通的nodejs模块，所以使用插件时需要下载，并且在 webpack.config.js 中引入如何使用插件// 具体如何引入需要看对应插件的文档const 插件 = require("插件模块")module.exports = { entry: "", output: { filename: "", path }, plug

2021-08-06 11:16:41 162

原创 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 149

原创 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 152

原创 01 webpack基本概念

webpackWebpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。Webpack改变的是前端的开发模式，使前端可以进行模块化开发，基于ESModule。现在主流的框架开发都基于webpack。entry入口文件设置，只有和入口文件产生模块关联，最终才能被webpack打包module.exports = { // 单入口写法 entry: "./src/main.js", // 多入口数组写法 entr

2021-08-06 11:12:04 199

原创 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 192

原创 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 860

原创 RBAC

RBAC基于角色的权限控制：用户->角色->权限权限有两种，一种是路由菜单权限（用户无法访问对应的路由），另外一种是按钮权限菜单权限基于路由拦截的权限控制菜单不会隐藏，点击则跳转到403一般用户登录后，后台返回该用户可以使用的路由表。这个路由表返回后，可以进行对应的路由拦截，如果要跳转的路由不在对应的路由表中，则跳转到403无法隐藏对应的不可用菜单会导致用户不知道自己有哪些权限利用路由拦截 + 菜单路由过滤的操作所有路由都生效，菜单隐藏，手动输入url访问没有权限的

2021-08-04 18:27:19 124

原创 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 1163

原创 Vue ref 与#nextTick的使用

nextTick在我们Vue中，如果我们需要在DOM渲染完成后执行一些代码，一般就是获取DOM的操作。我们可以使用nextTick{ created () { this.$nextTick(() => { // 可以使用回调函数的写法 // 这个函数中DOM必定渲染完成 }) this.$nextTick().then(() => { // 也支持promise // 这个函数中DOM必定渲染完成 })

2021-08-04 18:24:38 216

原创 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 164

原创 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 190

原创 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 96

原创后台建议登录验证

…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 146

原创 VUEX

1. VuexVuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式 (opens new window)就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是：Fl...

2021-07-15 23:02:12 661

ndch.mdb

空空如也