react项目开发-权限布局（前三篇续）

最新推荐文章于 2024-05-14 10:32:29 发布
最新推荐文章于 2024-05-14 10:32:29 发布
阅读量545 收藏
点赞数
分类专栏： react 文章标签： react

基于create-react-app官方脚手架搭建dva模式的项目-权限布局的开发，之前的项目骨架已经可以按照你自己的业务和项目逻辑去组装汽车了。

这里依然以上项目骨架为基础，增加权限布局的开发。

权限设计思路：

1 用户一旦登录成功，后台会返回一个token令牌，此令牌的形式有很多种，传统的就是session-cookie机制了，也可以采用比较流行的一种令牌机制JWT（有兴趣的同学可自行学习），个人推荐已此种方式做令牌。

2 前端会把token存在浏览器端，比如sessionStorge存储机制，之后每次请求均会在请求的中带上这个token传给服务端，服务端校验此令牌，若合法则通过，视为正常用户，若不合法则返回无权限。

3 用户点击退出，或者后台返回不合法，前端则请求退出接口，并清空临时数据，返回登录界面。

4 涉及登录安全，在开发环境也增加https访问模式，修改package.json文件中scripts配置项：

[html]  view plain  copy
  1. "start": "cross-env PORT=9999 HTTPS=true node scripts/start.js",  

下面我们在之前基础上进行开发

1 routes目录下新建login目录，里面新建index.js和index.less文件作为登录页面：

（1）不要忘了接入store数据

（2）登录页面，需要表单Form组件支持

（3）用到了样式，本项目用到classnames （可自行学习），安装：cnpm i classnames --save

（4）要用到css-module，这里有个点:直接开启module会导致和antd冲突，故此开启方式，修改webpack.config.dev.js和webpack.config.prod.js，在本文件中复制一份css-loader配置部分，改为开启less的module，这份配置排在前面

代码如下:

[javascript]  view plain  copy
  1. {  
  2.             test: /\.less$/,  
  3.             use: [  
  4.               require.resolve('style-loader'),  
  5.               {  
  6.                 loader: require.resolve('css-loader'),  
  7.                 options: {  
  8.                   importLoaders: 1,  
  9.                   modules: true,  
  10.                   localIdentName:"[name]__[local]___[hash:base64:5]"  
  11.                 },  
  12.               },  
  13.               {  
  14.                 loader: require.resolve('postcss-loader'),  
  15.                 options: {  
  16.                   // Necessary for external CSS imports to work  
  17.                   // https://github.com/facebookincubator/create-react-app/issues/2677  
  18.                   ident: 'postcss',  
  19.                   plugins: () => [  
  20.                     require('postcss-flexbugs-fixes'),  
  21.                     autoprefixer({  
  22.                       browsers: [  
  23.                         '>1%',  
  24.                         'last 4 versions',  
  25.                         'Firefox ESR',  
  26.                         'not ie < 9', // React doesn't support IE8 anyway  
  27.                       ],  
  28.                       flexbox: 'no-2009',  
  29.                     }),  
  30.                   ],  
  31.                 },  
  32.               },  
  33.               {  
  34.                 loader:require.resolve('less-loader'),  
  35.                 options: { javascriptEnabled: true }  
  36.               }  
  37.             ],  
  38.           },  
  39.           {  
  40.             test: /\.(css|less)$/,  
  41.             use: [  
  42.               require.resolve('style-loader'),  
  43.               {  
  44.                 loader: require.resolve('css-loader'),  
  45.                 options: {  
  46.                   importLoaders: 1,  
  47.                 },  
  48.               },  
  49.               {  
  50.                 loader: require.resolve('postcss-loader'),  
  51.                 options: {  
  52.                   // Necessary for external CSS imports to work  
  53.                   // https://github.com/facebookincubator/create-react-app/issues/2677  
  54.                   ident: 'postcss',  
  55.                   plugins: () => [  
  56.                     require('postcss-flexbugs-fixes'),  
  57.                     autoprefixer({  
  58.                       browsers: [  
  59.                         '>1%',  
  60.                         'last 4 versions',  
  61.                         'Firefox ESR',  
  62.                         'not ie < 9', // React doesn't support IE8 anyway  
  63.                       ],  
  64.                       flexbox: 'no-2009',  
  65.                     }),  
  66.                   ],  
  67.                 },  
  68.               },  
  69.               {  
  70.                 loader:require.resolve('less-loader'),  
  71.                 options: { javascriptEnabled: true }  
  72.               }  
  73.             ],  
  74.           },  


关与开启module和antd冲突解决方法网上找了下，大家可参考：

https://segmentfault.com/a/1190000011225917

https://segmentfault.com/q/1010000011965218

https://www.jianshu.com/p/51ff1c8be301

https://blog.csdn.net/nongweiyilady/article/details/79939761

登录页面代码如下：

login/index.js

[javascript]  view plain  copy
  1. import React, {Component} from 'react';  
  2. import {connect} from 'dva'  
  3. import {injectIntl} from 'react-intl'  
  4. import {Row, Col, Form, Icon, Input, Button} from 'antd'  
  5. import classnames from 'classnames';  
  6. import styles from './index.less';  
  7.   
  8. const FormItem = Form.Item  
  9.   
  10. class Login extends Component{  
  11.   
  12.     loginSubmit=(e)=>{  
  13.         e.preventDefault();  
  14.         const {form} = this.props;  
  15.         form.validateFields((err, values) => {  
  16.             if (!err) {  
  17.               console.log(values);  
  18.             }  
  19.         });  
  20.     }  
  21.   
  22.     render(){  
  23.         const {form} = this.props;  
  24.         const {getFieldDecorator} = form;  
  25.         return(  
  26.             <Row>  
  27.                 <Col className={classnames(styles.loginFormCol)}>  
  28.                     <Form onSubmit={this.loginSubmit} className={classnames(styles.loginForm)}>  
  29.                         <h3>登录</h3>  
  30.                         <FormItem>  
  31.                         {getFieldDecorator('username', {  
  32.                             rules: [{   
  33.                                 required: true,   
  34.                                 message: '请输入用户名'   
  35.                             }],  
  36.                         })(  
  37.                             <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="用户名" />  
  38.                         )}  
  39.                         </FormItem>  
  40.                         <FormItem>  
  41.                         {getFieldDecorator('password', {  
  42.                             rules: [{   
  43.                                 required: true,   
  44.                                 message: '请输入密码'   
  45.                             }],  
  46.                         })(  
  47.                             <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="密码" />  
  48.                         )}  
  49.                         </FormItem>  
  50.                         <FormItem>  
  51.                             <Button type="primary" htmlType="submit" className={classnames(styles.loginBtn)}>  
  52.                                 登录  
  53.                             </Button>  
  54.                         </FormItem>  
  55.                     </Form>  
  56.                 </Col>  
  57.             </Row>  
  58.         )  
  59.     }  
  60. }  
  61.   
  62. export default connect(({  
  63.   
  64. })=>({  
  65.   
  66. }))(injectIntl(Form.create()(Login)))  

login/index.less

[javascript]  view plain  copy
  1. .loginFormCol{  
  2.     height:100vh;  
  3.     display:flex;  
  4.     justify-content:center;  
  5.     flex-direction:column;  
  6.     .loginForm{  
  7.         width:300px;  
  8.         height:190px;  
  9.         margin:0 auto;  
  10.         .loginBtn{  
  11.             width:100%  
  12.         }  
  13.     }  
  14. }  

最终效果：


2 修改models/app.js文件,增加login.js的model

(1)增加token存储字段，用于将来存储令牌的字段，值取自sessionStorage.getItem('token')，对应增加对其的实时更新effects和reducers：updateToken和updateStore

(2)增加locationPathname字段，用于存储当前url的pathname，对应增加对其的实时更新effects和reducers：updateLocation

代码如下：

[javascript]  view plain  copy
  1.   
import { Map, fromJS} from 'immutable';
import { routerRedux} from 'dva/router';
const initState = Map({
i18n: 'zh_CN',
token: null,
locationPathname: null,
})
export default {
namespace: 'app',
state:initState,
subscriptions: {
setup({ dispatch, history }) {
},
setupHistory ({ dispatch, history }) {
history. listen(( location) => {
dispatch({
type: 'updateLocation',
payload: {
locationPathname: location. pathname
},
});
dispatch({
type: 'updateToken',
payload: {
token: window. sessionStorage. getItem( 'token')
},
})
})
},
},
effects: {
* changeLang ({
payload: { value},
}, { put }) {
yield put({ type: 'updateLang', payload: { value}});
},
* updateLocation ({
payload
}, { put, select}) {
yield put({ type: 'updateStore', payload});
},
* updateToken ({
payload
}, { put, select}) {
yield put({ type: 'updateStore', payload});
},
* logout ({
payload
}, { put, select}) {
window. sessionStorage. removeItem( 'token');
window. location. href= '/login';
},
},
reducers: {
updateLang ( state,{ payload:{ value}}) {
return state. set( 'i18n', value);
},
updateStore ( state, { payload }) {
return payload? state. mergeDeep( fromJS( payload)): initState
},
},
};

（3）models/login.js代码：

[html]  view plain  copy
  1. export default {  
  2.   
  3.     namespace: 'login',  
  4.     
  5.     state: {  
  6.       name:'这是login的model'  
  7.     },  
  8.     
  9.     subscriptions: {  
  10.         
  11.     },  
  12.     
  13.     effects: {  
  14.         
  15.     },  
  16.     
  17.     reducers: {  
  18.         
  19.     },  
  20.     
  21.   };  
  22.     

3 src目录下增加目录layout，用于存放布局组件

（1）layout下创建auth.js，权限组件，用户包裹全局组件：

[javascript]  view plain  copy
  1. import {connect} from 'dva';  
  2. import React from 'react';  
  3.   
  4. const Auth=({ children,dispatch,token,locationPathname })=>{  
  5.   
  6.   if(!token&&locationPathname!='/login'){  
  7.     dispatch({  
  8.       type:'app/logout'  
  9.     })  
  10.   }  
  11.   
  12.   return (  
  13.     <React.Fragment>  
  14.       {children}  
  15.     </React.Fragment>  
  16.   );  
  17. }  
  18.   
  19. export default connect(({  
  20.   app  
  21. })=>({  
  22.   token:app.get('token'),  
  23.   locationPathname:app.get('locationPathname'),  
  24. }))(Auth)  

（2）把locale.js国际化组件，移到layout目录下，目录调整如下：


4 src/route.js修改，包裹auth组件：

[html]  view plain  copy
  1. import React from 'react';  
  2. import { Router, Route, Switch } from 'dva/router';  
  3. import dynamic from 'dva/dynamic'  
  4. import Locale from './layout/locale'  
  5. import Auth from './layout/auth'  
  6. import {config} from './utils'  
  7. const { menuGlobal } = config  
  8.   
  9. function RouterConfig({ history, app }) {  
  10.   
  11.   return (  
  12.     <Auth>  
  13.       <Locale>  
  14.         <Router history={history}>  
  15.           <Switch>  
  16.             {  
  17.               menuGlobal.map(({path,...dynamics},index)=>(  
  18.                 <Route  
  19.                   key={index}   
  20.                   path={path}   
  21.                   exact   
  22.                   component={dynamic({  
  23.                     app,  
  24.                     ...dynamics  
  25.                   })}   
  26.                 />  
  27.               ))  
  28.             }  
  29.           </Switch>  
  30.         </Router>  
  31.       </Locale>  
  32.     </Auth>  
  33.   );  
  34. }  
  35.   
  36. export default RouterConfig;  

下面验证一下效果：

直接访问：https://localhost:9999/aaa , 你会发现已经跳转到了https://localhost:9999/login页面，当我们再sessionStorage中模拟一个token=123456，再次访问/aaa即可进入，当清除掉token则退出到/login，效果如下：


5 routes目录下，新建home，作为登录后的首页，目录如下：


index.js

[html]  view plain  copy
  1. import React, {Component} from 'react';  
  2. import {connect} from 'dva'  
  3. import {Link} from 'dva/router'  
  4. import {injectIntl} from 'react-intl'  
  5. import {Row, Col, Form, Button} from 'antd'  
  6. import classnames from 'classnames';  
  7. import styles from './index.less';  
  8.   
  9. class Home extends Component{  
  10.   
  11.     render(){  
  12.         return(  
  13.             <Row>  
  14.                 <Col className={classnames(styles.home)}>  
  15.                     欢迎您，来到首页  
  16.                 </Col>  
  17.                 <Col>  
  18.                     <Link to={'/aaa'}><Button>去AAA页面</Button></Link>  
  19.                 </Col>  
  20.             </Row>  
  21.         )  
  22.     }  
  23. }  
  24.   
  25. export default connect(({  
  26.   
  27. })=>({  
  28.   
  29. }))(injectIntl(Form.create()(Home)))  

index.less

[html]  view plain  copy
  1. .home{  
  2.     padding:20px;  
  3. }  

6 models目录下新建home.js

[html]  view plain  copy
  1. export default {  
  2.   
  3.     namespace: 'home',  
  4.     
  5.     state: {  
  6.       name:'这是home的model'  
  7.     },  
  8.     
  9.     subscriptions: {  
  10.         
  11.     },  
  12.     
  13.     effects: {  
  14.         
  15.     },  
  16.     
  17.     reducers: {  
  18.         
  19.     },  
  20.     
  21.   };  
  22.     

7 修改utils/config.js 代码：

[html]  view plain  copy
  1. const menuGlobal=[  
  2.     {  
  3.         id:'login',  
  4.         pid:'0',  
  5.         name:'登录',  
  6.         icon:'user',  
  7.         path: '/login',  
  8.         models: () => [import('../models/login')], //models可多个  
  9.         component: () => import('../routes/login'),  
  10.     },   
  11.     {  
  12.         id:'home',  
  13.         pid:'0',  
  14.         name:'首页',  
  15.         icon:'user',  
  16.         path: '/',  
  17.         models: () => [import('../models/home')], //models可多个  
  18.         component: () => import('../routes/home'),  
  19.     },   
  20.     {  
  21.         id:'aaa',  
  22.         pid:'0',  
  23.         name:'aaa页',  
  24.         icon:'user',  
  25.         path: '/aaa',  
  26.         models: () => [import('../models/aaa')], //models可多个  
  27.         component: () => import('../routes/AAA'),  
  28.     },   
  29.     {  
  30.         id:'bbb',  
  31.         pid:'0',  
  32.         name:'bbb页',  
  33.         icon:'user',  
  34.         path: '/aaa/bbb',  
  35.         models: () => [import('../models/bbb')], //models可多个  
  36.         component: () => import('../routes/BBB'),  
  37.     },   
  38.     {  
  39.         id:'ccc',  
  40.         pid:'0',  
  41.         name:'ccc页',  
  42.         icon:'user',  
  43.         path: '/ccc',  
  44.         models: () => [import('../models/ccc')], //models可多个  
  45.         component: () => import('../routes/CCC'),  
  46.     },   
  47.   ];  
  48.     
  49. export default {  
  50.     menuGlobal  
  51. }  

8 我们暂时约定账号为admin，密码为123456

(1) 修改/routes/login/index.js

[html]  view plain  copy
  1. import React, {Component} from 'react';  
  2. import {connect} from 'dva'  
  3. import {injectIntl} from 'react-intl'  
  4. import {Row, Col, Form, Icon, Input, Button} from 'antd'  
  5. import classnames from 'classnames';  
  6. import styles from './index.less';  
  7.   
  8. const FormItem = Form.Item  
  9.   
  10. class Login extends Component{  
  11.   
  12.     loginSubmit=(e)=>{  
  13.         e.preventDefault();  
  14.         const {form,dispatch} = this.props;  
  15.         form.validateFields((err, values) => {  
  16.             if (!err) {  
  17.               dispatch({  
  18.                   type:'login/login',  
  19.                   payload:{  
  20.                       values  
  21.                   }  
  22.               })  
  23.             }  
  24.         });  
  25.     }  
  26.   
  27.     render(){  
  28.         const {form} = this.props;  
  29.         const {getFieldDecorator} = form;  
  30.         return(  
  31.             <Row>  
  32.                 <Col className={classnames(styles.loginFormCol)}>  
  33.                     <Form onSubmit={this.loginSubmit} className={classnames(styles.loginForm)}>  
  34.                         <h3>登录</h3>  
  35.                         <FormItem>  
  36.                         {getFieldDecorator('username', {  
  37.                             rules: [{   
  38.                                 required: true,   
  39.                                 message: '请输入用户名'   
  40.                             }],  
  41.                         })(  
  42.                             <Input autoComplete={'off'} prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="用户名" />  
  43.                         )}  
  44.                         </FormItem>  
  45.                         <FormItem>  
  46.                         {getFieldDecorator('password', {  
  47.                             rules: [{   
  48.                                 required: true,   
  49.                                 message: '请输入密码'   
  50.                             }],  
  51.                         })(  
  52.                             <Input autoComplete={'off'} prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="密码" />  
  53.                         )}  
  54.                         </FormItem>  
  55.                         <FormItem>  
  56.                             <Button type="primary" htmlType="submit" className={classnames(styles.loginBtn)}>  
  57.                                 登录  
  58.                             </Button>  
  59.                         </FormItem>  
  60.                     </Form>  
  61.                 </Col>  
  62.             </Row>  
  63.         )  
  64.     }  
  65. }  
  66.   
  67. export default connect(({  
  68.   
  69. })=>({  
  70.   
  71. }))(injectIntl(Form.create()(Login)))  

(2) 修改models/login.js

[html]  view plain  copy
  1. import {message} from 'antd';  
  2.   
  3. export default {  
  4.   
  5.     namespace: 'login',  
  6.     
  7.     state: {  
  8.       name:'这是login的model'  
  9.     },  
  10.     
  11.     subscriptions: {  
  12.         
  13.     },  
  14.     
  15.     effects: {  
  16.       * login ({  
  17.           payload  
  18.       }, {put, select}) {  
  19.           if(payload.values.username=='admin'&&payload.values.password=='123456'){  
  20.             //登录成功  
  21.             yield put({  
  22.               type:'app/loginOk',  
  23.               payload:{  
  24.                 token:'123abc'  
  25.               }  
  26.             });  
  27.           }else{  
  28.             message.warning('用户名或密码不正确')  
  29.           }  
  30.       },  
  31.   
  32.     },  
  33.     
  34.     reducers: {  
  35.         
  36.     },  
  37.     
  38.   };  
  39.     

(3) 修改models/app.js

[html]  view plain  copy
  1. import {Map, fromJS} from 'immutable';  
  2. import {routerRedux} from 'dva/router';  
  3.   
  4. const initState = Map({  
  5.     i18n: 'zh_CN',  
  6.     token:null,  
  7.     locationPathname:null,  
  8. })  
  9.   
  10. export default {  
  11.   
  12.     namespace: 'app',  
  13.     
  14.     state:initState,  
  15.     
  16.     subscriptions: {  
  17.         setup({ dispatch, history }) {  
  18.           
  19.         },  
  20.         setupHistory ({ dispatch, history }) {  
  21.             history.listen((location) => {  
  22.                 dispatch({  
  23.                     type: 'updateLocation',  
  24.                     payload: {  
  25.                       locationPathname: location.pathname  
  26.                     },  
  27.                 });  
  28.                 dispatch({  
  29.                     type: 'updateToken',  
  30.                     payload: {  
  31.                       token: window.sessionStorage.getItem('token')  
  32.                     },  
  33.                 })  
  34.             })  
  35.         },  
  36.     },  
  37.     
  38.     effects: {  
  39.   
  40.         * changeLang ({  
  41.             payload: {value},  
  42.         }, { put }) {  
  43.             yield put({ type: 'updateLang', payload: {value}});  
  44.         },  
  45.   
  46.         * updateLocation ({  
  47.             payload  
  48.         }, {put, select}) {  
  49.             yield put({type: 'updateStore', payload});  
  50.         },  
  51.   
  52.         * updateToken ({  
  53.             payload  
  54.         }, {put, select}) {  
  55.             yield put({type: 'updateStore', payload});  
  56.         },  
  57.   
  58.         * loginOk ({  
  59.             payload  
  60.         }, {put, select}) {  
  61.             window.sessionStorage.setItem('token',payload.token);  
  62.             yield put(routerRedux.push({  
  63.                 pathname: '/'  
  64.             }));  
  65.         },  
  66.   
  67.         * logout ({  
  68.             payload  
  69.         }, {put, select}) {  
  70.             window.sessionStorage.removeItem('token');  
  71.             window.location.href='/login';  
  72.         },  
  73.           
  74.     },  
  75.     
  76.     reducers: {  
  77.         updateLang (state,{payload:{value}}) {  
  78.             return state.set('i18n',value);  
  79.         },  
  80.         updateStore (state, { payload }) {  
  81.             return payload?state.mergeDeep(fromJS(payload)):initState  
  82.         },  
  83.           
  84.     },  
  85.     
  86.   };  
  87.     

(4) 修改layout/auth.js

[html]  view plain  copy
  1. import {connect} from 'dva';  
  2. import React from 'react';  
  3.   
  4. const Auth=({ children,dispatch,token,locationPathname })=>{  
  5.   
  6.   if(!token&&locationPathname!='/login'){  
  7.     dispatch({  
  8.       type:'app/logout'  
  9.     })  
  10.   }else if(token&&locationPathname=='/login'){  
  11.     dispatch({  
  12.       type:'app/loginOk',  
  13.       payload:{  
  14.         token:token  
  15.       }  
  16.     })  
  17.   }  
  18.   
  19.   return (  
  20.     <React.Fragment>  
  21.       {children}  
  22.     </React.Fragment>  
  23.   );  
  24. }  
  25.   
  26. export default connect(({  
  27.   app  
  28. })=>({  
  29.   token:app.get('token'),  
  30.   locationPathname:app.get('locationPathname'),  
  31. }))(Auth)  


至此，我们看下效果：



junyunKang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react界面Login和Home页面的路由关系
dzl199212的博客
06-05 5382
刚开始学react，承接上一篇博客 ---地址：点击打开链接，这次主要是如何编写react单页面是加载Login和Home页面。1，我们在components下建造Login.jsimport React, { Component } from 'react'; import { browserHistory } from 'react-router' class Login extends ...
受控组件和非受控组件
qq_42505615的博客
11-02 157
~ 在 HTML 中，表单元素（如<input>、<textarea>和<select>）通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用setState()来更新。 我们可以把两者结合起来，使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 R...
react-grid-layout React响应式布局插件的用法
Xpy 的博客
05-14 517
【代码】react-grid-layout React响应式布局插件的用法。
基于create-react-app官方脚手架搭建dva模式的项目（三）
小记心得
06-08 4446
基于create-react-app官方脚手架搭建dva模式的项目（三）
React的菜鸟之路(三)：搭建后台系统
fanlc8888的博客
12-24 229
此篇基于React 16.12.0 版（2019-12-19），大部分是一些配置以及插件的使用及配置，不足之处，请多多指教。 目录 初始化项目 暴露配置文件(此操作不可逆) 使用scss 使用Ant Design组件库 使用阿里矢量图标库 使用react-router-dom路由 封装axios和管理api 安装lodash 安装Redux、React-redux、redux-...
react-native-webview.zip
08-06
React Native WebView是一个流行的开源库，它允许React Native应用嵌入网页内容。这个库使得开发者能够利用Web技术（HTML、CSS和JavaScript）与React Native原生功能的结合，为移动应用提供丰富的交互体验。在...
前端项目-react-router-bootstrap.zip
09-03
在前端开发领域，React Router 和 Bootstrap 是两个非常重要的库。`react-router-bootstrap.zip` 提供了一个集成这两个库的前端项目示例，旨在帮助开发者更好地理解和使用它们。React Router 是React.js应用中的路由...
react-native-video.zip
08-19
4. **样式和布局**：由于React Native Video是基于React组件，所以你可以使用CSS-like样式来控制视频的大小和位置，也可以与其他组件进行组合，实现灵活的布局设计。 5. **自定义播放器控件**：如果需要更个性化的...
React-native-app:大学移动应用项目
04-06
在这个项目中，开发者使用了React Native来实现跨平台的开发，使得应用程序能够在Android Studio的虚拟设备上运行。 JavaScript作为主要编程语言，是React Native的基础。JavaScript是一种广泛使用的脚本语言，尤其...
Android-使用ReactNative开发的一个笔记App
08-13
在本项目中，我们探索的是如何使用React Native技术在Android平台上构建一个笔记应用程序。React Native是由Facebook开发的开源框架，它允许开发者使用JavaScript编写原生移动应用，同时享受到跨平台开发的优势。...
React-Router如何进行页面权限管理的方法
08-28
本篇文章主要介绍了React-Router如何进行页面权限管理的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react Ant组件库的高阶组件Form
qq_26705343的博客
09-16 479
Form 组件 class Login extends Component { ... } const WrapperForm = Form.create ( )( Login ) 利用Form.create （）包装Form组件成一个新组件 新组件会像form组件传递一个属性 form属性对象 Form的create 是个函数 执行这个函数 这个函数的返回值也是一个函数 执行并传入Login 组件参数 export default WrapperForm const form =
React在ES6中的用法
热门推荐
思诚^_^
04-22 2万+
写在前面 不管是多么不乐意待见这个不速之客，但ES6已经一点点渗透进了我的生活里，就连我最爱的React到React Native，默认都把ES6做为首选标准。这是FaceBook有计划、有声势地要把ES6推起来，请问还有谁有狗胆站住来堵着路不走。所以我毅然捧着阮一峰老师的《ES6标准入门》在一旁看了起来……那好，今天就谈谈如何把React用ES6愉快地跑起来。 入门级Demos先来几个简单的d
React项目实战之租房app项目（一）项目搭建&底部导航栏
小陈工的博客
10-20 2295
项目简介：此次开发的项目是移动Web端的项目，核心业务是实现在线租房，功能类似链家，贝壳等APP主要模块：在线找房（地图、条件搜索）、用户登录、房源发布等效果展示：核心技术栈：1、React核心库：react、react-dom、react-router-dom2、脚手架：create-react-app3、数据请求：axios4、UI组件库：antd-mobile5、其他组件库：react-virtualized、formik+yup、react-spring等。
antd权限管理_react实现菜单权限控制的方法
weixin_39626613的博客
12-19 1034
通常公司的后台管理系统都需要权限控制，即不同的角色用户看到不同的菜单，如下图：下面，通过react实现这样的后台管理系统(脚手架)，功能简介：1.顶部的菜单项根据用户的角色动态生成。2.侧边测菜单项根据已选的顶部菜单动态生成。直接上代码：路由配置：export default ()顶部菜单项单独成了一个组件：// 动态数据import React, { Component } from 'reac...
登录（二）账号和密码——token值：保存-window.localStorage.setItem(‘token‘, token)&查看-sessionStorage.getItem(‘token‘）
weixin_44867717的博客
05-26 2825
基本功能——账号和密码 & 登录成功后——保存token值-window.localStorage.setItem(‘token’, body.token) & 查看token值-sessionStorage.getItem(‘mytoken’） 添加状态：username（账号） 和 password（密码） 使用受控组件方式获取表单元素值(value+onChange) 给 form 表单添加 onSubmit。 创建方法 handleSubmit，实现表单提交。 在方法中，通过
React入门（十三）之权限
qq_38256266的博客
09-19 3857
权限1、理解权限2、后台管理系统里的权限3、React项目实现功能级权限3.1、实现思路（react）3.2、实现步骤4、Vue项目实现功能级权限4.1、实现思路（vue） 1、理解权限 最近在用react做一个后台管理系统的项目，后台管理系统那肯定少不了权限。相信权限这个词大家都清楚，就是不同用户所拥有的功能和级别不同。 比如说： 在一个图书管理系统里，你只是普通用户，那么你可能拥有查看和搜索图书的权限； 如果你是一般的管理员，那么可能拥有上架图书，修改图书的权限； 如果你是老板，那么你可能拥有任命管
ant-design-pro-master 学习笔记之菜单配置
徐行之的博客
01-04 1680
项目框架： React Redux-soga UmiJs DvaJs AntDesign 前端UI库 环境搭建： NodeJs VSCode 代码编辑器 项目运行 从github下载ant-design-pro-master 项目，导入到vscode，打开终端，在项目根目录下执行npm install 安装依赖 执行npm run start 启动项目 菜单配置 在src/pa...
javaweb网上蛋糕商城--前台开发实验思路
最新发布
06-14
- 使用前端框架提供的组件库，比如React、Vue或Angular，提高开发效率并保证代码复用。 5. **用户认证与权限管理**: - 使用session或JWT进行用户身份验证，确保用户只能访问自己的数据。 - 设计用户权限系统，如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值