被楓吹过的晨-CSDN博客

原创处理 token 失效

当 token 失效后，重定向到登录页面为了能够在非组件环境下拿到路由信息，进行路由跳转等操作，需要使用路由中提供的 Router 组件，并自定义 history 对象// utils/history.jsimport { createBrowserHistory } from 'history'const customHistory = createBrowserHistory()export { customHistory }// App.jsimport { Route

2022-05-05 20:07:17 897

原创 CSS Modules

CSS Modules：CSS模块，对CSS进行模块化处理目的：解决在 React 开发时，组件之间类名重复导致的样式冲突问题使用后：会自动生成类名类名格式：[filename]_[classname]__[hash]filename：文件名 classname：CSS文件中的类名 hash：随机生成的hash值使用：创建样式文件以 .module.scss 结尾样式文件以 CSS 方式写，类名推荐使用驼峰命名法导入样式文件 import style from './in

2022-05-04 19:44:13 616

原创 React 路由

安装：yarn add react-router-dom@5.3.0导入核心组件： import { BrowserRouter as Router, Route, Link } from 'react-router-dom'const App = () => { return ( <Router> {/* 使用 Router 组件包裹整个应用 */} <div className="App"> <ul>

2022-05-03 22:00:40 366

原创 Redux 中间件

默认情况下，Redux 只能处理同步数据流。实际开发中，状态的更新、获取，通常是使用异步操作，可以通过 Redux中间件来实现作用：处理具有副作用（side effect）的功能优点：可以串联、组合，在一个项目中使用多个中间件执行时机：在 dispatching action 和 reducer 之间没有中间件：dispatch(action) ==> reducer使用中间件：dispatch(action) ==> 执行中间件代码 ==> reducer原理：封

2022-05-02 20:31:23 576

原创 Redux

Redux 是 React 中最常用的状态管理工具（状态容器）好处：集中式存储和管理应用的状态处理组件通讯问题时，无视组件之间的层级关系简化大型复杂应用中组件之间的通讯问题数据流清晰，易于定位bug核心概念：action（动作）：描述要做的事情 reducer（函数）：更新状态 store（仓库）：整合 action 和 reduceraction只描述要做的事情是一个JS对象，必须带有 type 属性，用于区分动作的类型根据功能不同，可以携带额外的数据，配.

2022-04-29 20:52:55 430

原创 React 生命周期

React 类组件的生命周期，就是组件从创建到消耗的过程只有类组件才有生命周期，分为挂载阶段、更新阶段、卸载阶段挂载阶段钩子函数constructor 创建组件时，最先执行作用：初始化 state ，创建 Ref ，使用 bind 解决 this 指向render 每次组件渲染都会触发作用：渲染UI （不能调用 setState()）componentDidMount 组件挂载后（完成DOM渲染）作用：发送网络请求，DOM操作import { Compone

2022-04-27 21:57:17 343 1

原创 React 组件通讯

组件通讯通过 props 传递数据和接收数据使用组件的时候通过属性绑定数据，在组件内通过 props 获取函数组件使用// 使用组件(父)<Children name="andy"/>// 定义组件(子)function Children(props) { return <div>接收到数据: {props.name}</div>}类组件使用// 使用组件(父)<Children name="tony"/>//

2022-04-26 22:20:05 135

原创 React 组件

组件: 将页面按照界面功能进行拆分，每一块界面都拥有自己的独立逻辑，这样可以提高项目代码的可维护性React 可以创建函数组件(rafce 快速生成结构) 和类组件(rcc快速生成结构)函数组件使用 JS 函数 (普通,箭头) 创建的组件定义组件函数名称首字母必须大写, React 根据此来区分组件和HTML元素函数必须有返回值, 表示该组件的UI结构, 如果不渲染可返回null使用组件import ReactDom from 'react-dom';// 普通函数

2022-04-25 20:25:35 192

原创 React基础

React 是一个用于构建用户界面的 JavaScript 库，是 Facebook 开源的可以理解它只负责 MVC 中的视图层渲染，不直接提供数据模型和控制器功能react-router 实现路由，redux 实现状态管理，可以使用它们来构建一个完整应用特点:声明式组件化跨平台编写React 脚手架方式一全局安装 npm i create-react-app -g创建项目 create-react-app 项目名称启动项目 npm run start方式二

2022-04-23 21:47:01 1551

原创小程序支付

支付uni.requestPayment 是一个统一各平台的客户端支付API，不管是在某家小程序还是在App中，客户端均使用本API调用支付。本API运行在各端时，会自动转换为各端的原生支付调用API。uni.requestPayment( object ) 参数说明provider 必填，为 String，服务提供商，通过 uni.getProvider 获取orderInfo 必填，为 String 或 Object，订单数据timeStamp 微信小程序必填，为 String

2022-04-22 22:08:41 2321

原创小程序分包

分包指的是把一个完整的小程序项目，按照需求划分为不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载好处可以优化小程序首次启动的下载时间在多团队共同开发时可以更好的解耦协作分包后项目构成小程序项目由 1 个主包和多个分包组成主包: 一般只包含项目的启动页面或 TabBar 页面、以及所有分包都需要用到的一些公共资源分包: 包含和当前分包有关的页面和私有资源分包加载规则小程序启动时，默认会下载主包并启动主包内页面当用户进入分包内某个页面时，客户端会把

2022-04-21 21:50:36 556

原创小程序学习

微信小程序父子通信方法一// 子组件中定义 propertiesproperties:{ // 属性名:类型 age: Number} {{ 属性名 }} {{ age }}<子组件属性名="{{ 变量 }}"></子组件><子组件 age="{{ 18 }}"></子组件>方法二通过 selectCompon

2022-04-19 21:12:59 302

原创微信小程序 -- 生命周期

小程序的生命周期分文应用生命周期和页面生命周期应用生命周期指小程序启动、运行、销毁的过程app.js 是小程序执行的入口文件，在 app.js 中必须调用 App() 函数，且只能调用一次App() 函数是用来注册并执行小程序的，App(Object) 函数接收一个 Object 参数，可以通过这个Object 参数，指定小程序的应用生命周期函数App({ /** * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次） */ onLaunch:

2022-04-18 20:47:59 514

原创小程序学习

网络请求小程序中网络数据请求有两个限制:只能请求 HTTPS 类型的接口必须将接口的域名添加到信任列表中小程序发起网络请求使用 wx.request 方法wx.request({ url:"地址", method:"方式", data:{}, headers:{}, success:res=>{}, fail:err=>{}, complete:()=>{}})实现数据的双向绑定<input value="username"

2022-04-17 21:57:57 290

原创微信小程序

小程序一种不需要下载、安装即可使用的应用，它实现了应用触手可及的梦想，用户扫一扫或者搜一下就能打开应用，也实现了用完即走的理念，用户不用安装太多应用，应用随处可用，但又无须安装卸载特点：体积小、方便获取和传播理念：用完即走小程序与普通网页开发的区别运行环境: 网页运行在浏览器环境中, 小程序运行在微信环境中提供的API: 由于运行环境的不同，所以小程序中无法调用 DOM 和 BOM 的 API，但在小程序中可以调用微信环境提供的各种组件、API，例如：微信支付、微信扫码等...

2022-04-16 22:13:15 531

原创语言包实现

语言包思路分别配置中文语言包和英文语言包// lib/zh.js 文件中module.exports = { hello:'你好'}// lib/en.js 文件中module.exports = { hello:'Hello'}配置语言包const zh = require('./lib/zh')const en = require('./lib/en')const obj = { // 表示当前使用的语言包 locale:'zh',

2022-04-07 19:52:17 695

原创路由权限访问

静态路由：本地配置固定的，所有人都可以访问的动态路由：每个人拥有的都不一样，根据他的权限来决定思路一:登录之后，后端根据该用户的角色查询该用户的权限信息，这些权限信息包含的标识是和本地完整的动态路由的 name 是有匹配关系的我们登录之后拿到权限标识和本地的动态路由进行匹配筛选出属于当前用户的动态路由，然后通过router.addRoutes 方法，直接添加到路由实例中去思路二:登录之后，后端根据该用户的角色查询该用户的权限信息，而这些权限信息就是该用户的动态路由我们只需

2022-04-06 21:37:53 478

原创 Vue 权限管理

实现后台权限的管理, 主要需要三个部分：用户、角色、权限（菜单、按钮）用户：每个用户都会拥有一个私人的账号，这些账号需要关联对应的角色角色：可以对应很多的用户，也可以包含很多权限，它是连接用户与权限的桥梁权限：权限菜单决定了角色能够访问到哪些页面，权限按钮决定了角色能够操作哪些功能...

2022-04-04 18:59:06 537

原创 Vue 小结

RestFul 接口规范基于 REST 构建的 API 就是 Restful 风格用户功能的地址为 /admin/user读取用户列表请求: GET 地址: /admin/user读取单个用户请求: GET 地址: /admin/user:id新增单个用户请求: POST 地址: /admin/user// data为提交的数据(user,pwd)修改单个用户请求: PUT 地址: /admin/user/:id// data为提交的数据(提交完...

2022-04-03 21:39:57 802

原创 Vue 小结

表单验证三要素el-form 需要有model属性；要有rule属性用于校验规则； ref属性 el-form-item 需要有prop属性 el-input 需要有v-model绑定拷贝加工处理数据在表单中, 直接处理级联选择器中的数据, 如果发送请求时,遇到服务器崩溃, 会导致级联选择器出现问题// 错误写法this.formData.departName = this.formData.departName[this.formData.departName.length -.

2022-04-01 21:00:15 258

原创 Vue 小结

利用格式化属性处理数据枚举数据如果一个变量只有几种可能的值，则可以定义为枚举类型设置员工性别时可以使用枚举数据// info.jsexport default { gender:[ { id: 1, value: '男' }, { id: 2, value: '女' } ]}处理import EmployeeEnum from '@/api/constant/info'

2022-03-31 20:57:00 238

原创 Vue 小结

实现编辑部门功能点击编辑部门时, 通过 $emit 调用父组件的编辑方法, 父组件弹出弹层并赋值当前编辑节点封装获取部门信息的方法, 因为是编辑选中的部门, 所以需要传入这个部门的 id 来获取详情, 再将请求回来的数据回显给表单给弹层组件添加 ref 属性, 触发编辑方法时,通过 this.$refs 获取这个弹层再传入 id 直接调用获取部门详情的方法为了让代码简介, 编辑部门和新增部门使用了同一个组件,可以通过有无 id 来判断是新增还是编辑computed: { showT

2022-03-29 22:07:14 270

原创 Vue 小结

实现删除部门功能要完成组织架构中的删除部门功能, 先封装一个删除方法, 因为删除的是指定项, 可以通过传入id的方式来确认要删除的数据, 用模版的方式将获取到的 id 拼接到路径上export function delDepartments(id) { return request({ url: `/company/department/${id}`, method: 'delete' })}然后监听下拉菜单的点击事件<el-dropdown @comma

2022-03-28 20:04:41 758

原创 Vue 小结 --- 树形结构

组织架构----树形结构布局一个企业的组织架构是这个企业的灵魂, 组织架构常采用树形金字塔式结构来构建采用element中的 tree组件可以实现树形结构,用清晰的层级结构展示信息<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree><script> export default { data() { ret...

2022-03-26 20:15:10 5253

原创 Vue 总结

获取用户资料封装一个用户资料的方法需要 headersheaders 中的 Authorization 相当于我们开门(调用接口)时的钥匙(token)，我们在打开任何带安全权限的门的时候都需要钥匙(token),为了避免每次调用接口的时候都携带 token ,可以在 axios拦截器中统一注入 tokenservice.interceptors.request.use(config => { // 在这个位置需要统一的去注入token if (store.getters.tok

2022-03-25 19:52:55 851

原创 Vue 总结

按键修饰符<input @keyup.enter.native="submit">跨域在前后端分离项目中, 前端项目和后端接口并不在一个域名下, 当前端项目访问后端接口的时候就会产生跨域, 这是处于开发环境的跨域, 项目部署上线时的跨域是生产环境的解决开发环境的跨域问题开发环境的跨域，也就是在vue-cli 脚手架环境下开发启动服务时，.

2022-03-24 19:24:37 3767

原创搭建 Vue 项目

搭建一个 vue 项目需要环境和工具, 要做好环境准备和资源前置nodejs 是当下前端工程化开发必不可少的环境, 使用 npm功能来管理依赖包$ node -v 查看node版本$ npm -v 查看npm版本git版本控制工具是目前最为流行的分布式版本管理工具，代码的提交、检出、日志，都需要通过git完成$ git --version 查看git安装版本为了方便开发，提高开发效率，可以拉取 vue-element-admin 的基础模版拉取基础项目模版$ g...

2022-03-22 19:51:19 241

原创 Async 和 Await

ajax 的回调模式$.ajax({ url, data, success:function(result){ $.ajax({ data:result, success: function(result1){ $.ajax({ url, data: result1 }) } }) }})这种多层回调函数的相互嵌套，就形成了回调地狱Promise 是一个构

2022-03-21 20:33:24 527

原创 Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式采用集中式管理组件依赖的共享数据,解决不同组件数据共享问题初始化:安装(vue2项目中): yarn add vuex@3.6.2// main.js中import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ 配置项 })// 在根实例配置 store 选项指向 store 实例对象new Vu

2022-03-19 19:49:32 490

原创 Vue移动端

编辑用户资料功能展示用户信息查看接口文档找数据接口, 封装请求方法, 发送请求获取数据, 进行模版绑定修改昵称准备一个弹出层, 定义一个变量为 false , 控制弹出层的隐藏, 点击对应按钮时,将变量设置为true 来显示弹出层, 绘制弹出层组件, 给取消按钮绑定一个事件使用 $emit 传给父组件,在父组件中导入并注册, 监听关闭事件。父组件使用 v-model 将昵称传给子组件用于显示，子组件发送请求，更新昵称后，将更新后的值再传给父组件修改性别原理与修改昵称大致相同，子组件使

2022-03-18 20:35:59 341

原创 Vue 移动端

文章评论功能展示文章评论列表单独封装一个文章评论列表组件, 再封装获取文章评论的请求方法, 获取到数据后再遍历渲染出来<van-cell v-for="(item,index) in list" :key="index" :title="item.content"></van-cell>因为默认情况下只有滚动到了评论列表区域才会触发 onLoad 事件，发送请求获取数据，所以我们需要再 created 里面主动触发一次，保证一开始就触发为了方便复用, 将文章的评

2022-03-17 21:12:00 151

原创 Vue移动端

关注用户功能先封装请求函方法, 然后给关注按钮注册点击事件在事件函数中判断用户是否登录, 如未登录, 则 return 出来, 并提示用户登录判断用户是否已关注, 已登录则调用取消登录的方法(传入id), 未登录调用添加关注方法(传入id), 然后将试图进行更新,给值取反, 因为子组件不能直接修改, 使用 $emit 将值传给父组件为了防止用户频繁点击和用户的交互反馈, 设置一个变量来控制是否处于加载中(默认为false), 在触发点击事件时, 将变量设置为true, 开启按钮的 loadi

2022-03-15 20:27:02 379

原创 Vue 移动端

历史记录功能添加历史记录在触发搜索的时候, 将输入框的内容存储到历史记录中, 历史记录中不能有重复内容, 通过 indexof 来判断, 如果返回的结果不为 -1 , 则说明历史记录中有重复内容, 用 splice 配合获取到的 index 来删除重复项, 用 unshift 在最前面添加；如果结果为 -1 , 说明历史记录中没有重复的, 直接添加展示历史记录父组件将或许到的历史记录数据传递给子组件, 子组件通过 v-for 循环渲染出来删除历史记录给历史记录中的每一项注册点击事件

2022-03-14 21:06:38 986

原创 Vue移动端

文章搜索功能头部搜索框使用vant 中的搜索框组件<form action="/"> <van-search v-model="value" show-action placeholder="请输入搜索关键词" @search="onSearch" @cancel="onCancel" /></form><!-- 在 van-search 外层增加 form 标签，且 action 不为空，即可在 iOS 输入法中显示搜索按钮 --&gt

2022-03-12 20:57:10 2212

原创 Vue 移动端总结

展示频道分类的弹出层, 使用 Popup弹出层组件<van-popup v-model="isShow" position="bottom" :style="{ height: '100%' }" closeable close-icon-position="top-left" ></van-popup>频道编辑页面使用单元格 <van-cell></van-cell&g

2022-03-11 19:52:51 783

原创 Vue 移动端总结

Tab栏使用 Vant 中的 <van-tab></van-tab> 标签来实现 Tab 栏的效果<van-tabs v-model="active">  <van-tab title="标签 1">内容 1</van-tab> <van-tab title="标签 2">内容 2</van-tab><

2022-03-10 20:51:11 536

原创 vue 移动端

表单验证可以给标签添加 :rules="验证规则对象" , 在 data 中定义这个规则data(){ return { formRules:{ mobile:[ {required:true,message:'手机号不能为空'}, // required 表示是否必须 / message 为提示信息 {pattern: /^1[3|5|7|8]\d{9}$/,message: '手机号格式错误'} // pattern 为验证规则 ] } }

2022-03-08 21:14:55 780

原创移动端 REM 适配

在使用 vant 完成移动端项目时, 如果需要使用 rem 单位实现适配 ( Vant 中的样式默认使用 px 单位), 推荐使用lib-flexible (设置 rem 基准值)和postcss-pxtorem (将单位转化为 rem )一、使用 lib-flexible动态设置 REM 基准值（html 标签的字体大小）安装: yarn add amfe-flexible导入: 在 main.js 文件中执行模块 import 'amfe-flexible'二、使用...

2022-03-07 21:29:29 840

原创 Vuex

Vuex : 状态管理器官网文档 https://v3.vuex.vuejs.org/zh/作用 : 在vue项目中管理数据 ( 集中管理数据 ) , 方便数据的通讯原因 : 组件通讯复杂, 方便进行组件通讯优点 : 数据的更新是响应式的使用 :安装 yarn add vuex@3.6.2 创建配置store ( 在store/index.js中 ) import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const s.

2022-03-05 20:14:47 326

原创 Vue路由

路由 : 路径和组件的映射关系优点：整体不刷新页面，用户体验更好数据传递容易, 开发效率高缺点：开发成本高(需要学习专门知识) 首次加载会比较慢一点。不利于seo分类:页面组件 - 页面展示 / 配合路由用复用组件 - 展示数据 / 用于复用使用:vue-router@3.5.1 安装版本 ( 最新版本报错 ) import VueRouter from 'vue-router' 导入 Vue.use(VueRouter) 使用路由插件 const ...

2022-03-03 21:31:50 250

空空如也

空空如也