- 博客(23)
- 收藏
- 关注
RSS订阅原创 react学习笔记----受控组件
1.最简单的受控组件（输入框的值改变，导致onChange事件发生，导致state里面的str被重新赋值，输入框的值受state控制，所以是受控组件）import React, { Component } from 'react'export default class Control extends Component { constructor(props){ super(props); this.state ={ str:''
2021-01-21 14:43:55
97
原创 react学习比笔记1---兄弟组件传值
#兄弟组件传值，由one传给two需要安装PubSub首先定义一个组件Oneimport React, { Component } from 'react'import PubSub from 'pubsub-js'export default class One extends Component { componentDidMount(){ PubSub.subscribe("msg",(evt,data)=>{ //监听接收数据 cons
2021-01-21 14:19:39
89
原创 面试笔记2
1。数据类型2。localstoryStorage与sessionStorage与cookie区别1.sessionStorage不是一种持久化的本地存储。仅仅是会话级别的存储2.localstoryStorage 用于持久化本地存储，除非主动删除数据，否则数据是永远不会过期的。3.cookie 和 localstoryStorage 比较相似，但是，cookie的容量有限。4.cookie 需要指定作用域，不可以跨域调用3。React是在哪个生命周期发请求–componentDidMou
2020-07-20 22:49:50
339
原创 git 相关
主分支提交代码第一次提交时1， git add . 2，git commit -m "123" 3，git push -u origin master分支提交代码第二次提交时1， git add . 2，git commit -m "123" 3，git push -u origin 分支名称
2020-07-09 10:33:51
66
原创 VUE项目随笔---如何为list列表动态的添加多种样式
代码<template><div> <div> <van-nav-bar title="xxx" left-text="" right-text="新增" left-arrow @click-left="onClickLeft" @click-right="onClickRight" /> </div>
2020-07-08 18:49:42
1191
原创 面试笔记1
1. 深拷贝浅拷贝浅拷贝：1.浅拷贝只拷贝了父对象的基本类型的拷贝2.如果父对象的属性是个对象或者数组3.那么子对象获取的只是一个内存地址，而不是真正的拷贝。**（存在父对象被篡改的可能）**//=======深拷贝1.能够实现真正意义上的数组和对象的拷贝。2.只要递归调用浅拷贝 <script> // 深拷贝拷贝多层, 每一级别的数据都会拷贝. var obj = { id: 1, name:
2020-06-27 00:36:48
236
原创 react项目笔记14-----登陆与退出功能（主要是设置代理）
首先create-react-app中查找目录如下首先引入依赖，并在src下穿件setupProxy.js文件引入依赖代码npm install http-proxy-middleware --savesetupProxy.js文件代码const { createProxyMiddleware } = require('http-proxy-middleware');module.exports = function(app) { app.use('/api', createProxyMi
2020-06-12 20:41:24
686
原创 react项目笔记13-----前端登录访问后台验证
前端访问后台需要先添加axiosnpm i axiso -S将封装好的请求数据的代码request.js 复制到utils下，request.js代码如下：// 封装axiosimport axios from 'axios'// process属于node的自带模块，env也是，NODE_ENV是自定义的const isDev = process.env.NODE_ENV === 'development'console.log(isDev)const request = axios.
2020-06-12 18:48:58
436
原创 react项目笔记12-----后端接口（2）使用express创建后端项目
首先安装express全局框架npm install -g express最好使用这样的下载npm install -g express-generator使用express创建后端项目express 项目名 --view=ejs例如:创建一个名字叫adminApp的项目express adminApp --view=ejs进入项目adminApp下载moggosenpm -i mongoose -S然后在adminApp项目中创建文件夹sql文件的目录结构如下图，总共包含5个文
2020-06-12 11:45:06
269
原创 react项目笔记11-----后端接口（1）需要先安装mogodb数据库
安装mondb软件。软件模式如图所示：安装方法傻瓜式安装即可比如我这里安装到D：盘Mongo里面然后需要配置环境变量在path中添加代码即可配置方式如图所示然后任意盘下面创建data文件夹，我这里是在D盘，用来存储数据文件，之后输入如下命令启动服务就可以了。mongod --dbpath d:/data启动完之后这个窗口不要关闭，再打开一个命令行窗口就可以操作数据库了。在打开的命令窗口里面输入mongo 3) show dbs 查看有几个数据库 4） use 数据库的名字 7)
2020-06-12 11:21:53
142
原创 react项目笔记10-----登录页面的实现
首先到antd复制表单并对其进行修改添加import React from 'react'修改函数名为Login修改导出为export default Login然后添加样式即可穿件login.css并且在login.jsx中导入import './login.css'样式如下.loginbox { width: 300px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50
2020-06-11 18:08:28
876
原创 react项目笔记9-----数据展示主要是table的使用2
抽离头部代码，并实现点击跳转到登录页首先创建头部组件TopHeader.jsx 复制default.jsx中核心代码到TopHeader.jsx头部组件的主要代码，其中有些东西是用不到的<Header className="site-layout-background" style={{ padding: 0 }}> {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOut
2020-06-11 15:29:48
179
原创 react项目笔记8-----数据展示主要是table的使用
首先是在antd找个table,比如我这里找的是远程加载数据，将代码复制并在pro文件夹下创建ProData文件将代码复制进去，并添加import React from 'react'修改导出文件为export default App;在user文件夹下的index引入文件import ProData from './../pro/ProData'由于加载远程数据需要reqwest,需要下载，下载命令为：npm i reqwest -S...
2020-06-11 11:11:03
324
原创 react项目笔记7---面包屑2与menu配合使用。
只需要修改default页面导入文件import { Link } from 'react-router-dom'import menus from './../utils/menu'删除import BreadcrumbNameMap from './../utils/BreadcrumbNameMap'添加itemRender函数itemRender(route, params, routes, paths) { const last = routes.indexOf(route)
2020-06-11 10:39:36
866
原创 react项目笔记6---面包屑导航
首先在utils下面创建BreadcrumbNameMap.js 文件内容如下：export default { '/home': '首页', '/users': '用户管理', '/users/list': '用户列表', '/users/permission': '管理员列表', '/pro': '产品管理', '/pro/list': '产品列表', '/cart': '购物车管理', '/cart/list': '购物车列表', '/order': '订单管理'
2020-06-11 10:15:52
1010
原创 react项目笔记5---点开某个菜单项后刷新还是原来的菜单，点开一个菜单后其他的菜单不可以点开
点击某个菜单后刷新页面还是现实那个菜单只需要在Menu中修改两个属性即可defaultOpenKeys={openKeys} defaultSelectedKeys={selectKey}render (){ let pathname = this.props.location.pathname // /user/list let openKeys= ['/' + pathname.split('/')[1]] // /user let selectKey = [pathnam
2020-06-09 19:13:23
700
原创 react项目笔记4----点击右边菜单栏显示右边的内容
在view下创建目录结构 1. 创建home ---index.jsx 主页 2. 创建user---index.jsx 用户列表 Permission.jsx 管理员列表 3. 创建pro---index.jsx 产品列表 4. 创建cart---index.jsx 购物车列表 5. 创建order---index.jsx 订单列表 {/* 在default 文件中添加路由组件 */}import { Switch, Route, Redirect } from 'react
2020-06-09 18:10:19
1411
原创 react项目笔记3----设计左侧菜单
在utils文件夹下创建menu.jsimport { HomeOutlined} from '@ant-design/icons';const menus = [ { path: '/home', title: '首页', breadcrumbName: 'home', icon: HomeOutlined, role: 1 // 所有人都可见 }, { path: '/pro', title: '产品管理', bre
2020-06-09 16:48:54
454
原创 react项目笔记2----项目的基本配置antd控件的基本使用
添加ui布局主要是antd###使用antd需要导入 1. 安装依赖 npm i antd -S 2.引入样式import 'antd/dist/antd.css';###导入css或者less样式的原发import './login.less'###导入组件需要from 后面是组件的路径使用antd空件后一般默认不撑满全屏一般给index.js 写一个配置文件index.css并且在index.js中导入import './index.css'html,body,#root,
2020-06-09 15:09:28
237
原创 react项目笔记1----项目的基本配置简单实现路由的切换
全局安装react脚手架npm install -g create-react-app创建react项目create-react-app 项目名启动项目##进入项目npm run start整理项目的目录在src下添加几个文件夹apilayoutstoreutilsviews安装路由npm i react-router-dom -S一般是在app.js中使用路由import {HashRouter as Router,Switch,Route} from 're
2020-06-09 14:43:17
201
原创 vue.js 学习笔记2--事件绑定的使用v-on
标题` Document <!-- <button v-on:click="increment">+</button> 和下面的效果是一样的,因为不传参数默认包含一个参数对象 <button v-on:click="increment($event)">+</button> --> <div v-on:click="increm
2020-06-09 11:42:45
115
原创 vue.js 学习笔记1--给对象的属性绑定值（包含图片的路径绑定与拼接）
给标签的属性绑定值：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="js/vue.js">
2020-06-09 11:26:32
330
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人