react项目笔记
weixin_38522914
这个作者很懒,什么都没留下…
展开
-
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 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 阅读 · 0 评论