学了一招

男人能够穷，但绝对不能怂，拼我想要的，争我没有的，虽然我一无全部，但这只是如今！

React （css图片路径问题）

问题：

react  前端要一张图片，使用的是  css   background 显示这样图片 

解决办法 ：  在css文件 导入图片  使用  url（${ imgname }）  解析图片

问题：（在style-components  封装样式组件标签中  若是要传入一张图片  封装组件设置背景图片）

    <RecommendWrap>
                {
                    this.props.RecommendList.map((Item,index)=>{
                        return(
                                <a><RecommendItem key={Item.get('id')} imgUrl={Item.get('imgUrl')}/></a>
                            )
                    })
                }
            </RecommendWrap>

index.js

style.js

跨域请求

fetch

1 getFetchNews = ()=>{
2         var myFetchOption = {
3             method:'GET'
4         };
5         fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=getnews&type=" + this.props.type + "&count=" + this.props.count, myFetchOption)
6         .then(response=>response.json())
7         .then(json=>this.setState({news:json}))
8 
9     }

axios

 1   axios({
 2                url:options.url,
 3                method:'get',
 4                baseURL:baseApi,
 5                timeout:5000,
 6                params:(options.data && options.data.params) || ''
 7            }).then((response)=>{
 8 
 9                if(options.data && options.data.isShowLoading !== false){
10                            loading = document.getElementById('ajaxLoading');
11                            loading.style.display='none';
12                     }
13 
14                 const result = response.data;
15                if (response.status == '200' && (result.data.code == 0 || result.success)) {
16                    resolve(result);
17                } else {
18                    reject(response.messsage);
19                }
20 
21            })

 

jsonp

 1 export default class Axios{
 2       static jsonp(options) {
 3         return new Promise((resolve, reject) => {
 4             JsonP(options.url, {
 5                 param: 'callback'
 6             }, function (err, response) {
 7                 if (response) {
 8                     resolve(response.txt());
 9                 } else {
10                     reject(err);
11                 }
12             })
13         })
14     }

 

 1     // 菜单渲染   实际是一个返回组件的函数
 2     renderMenu=(data)=>{
 3         return data.map((item)=>{
 4             if(item.children){
 5                 return (
 6                     <SubMenu title={
 7                             <span>
 8                                 <Icon type="mail" />
 9                                  <span>{item.title}</span>
10                             </span>
11                         }>
12                         { this.renderMenu(item.children) }
13                         </SubMenu>
14                 )
15             }
16             return <Menu.Item key={item.key}>{item.title}</Menu.Item>
17         })
18     }

 1 //定义一个行内样式 放在一个变量里面 
 2  const formItemLayout = {
 3     //label  占几列
 4                 labelCol:{
 5                     span:5
 6                 },
 7     //wrapper行占几列
 8                 wrapperCol:{
 9                     span:19
10                 }
11             }
12 
13 使用：<FormItem label="姓名:" {...formItemLayout}>    

 React Antd表单数据收集

 1 class AddUse extends React.Component{
 2         render(){
 3             const formItemLayout = {
 4                 labelCol:{
 5                     span:5
 6                 },
 7                 wrapperCol:{
 8                     span:19
 9                 }
10             }
11             const { getFieldDecorator }  =this.props.form;
12             return (
13                 <Form layout="horizontal">
14                     <FormItem label="姓名:" {...formItemLayout}>
15                         {
16                             getFieldDecorator('usename',{
17                                 initialValue:''
18                             })(
19                                 <Input style={{ width: 160 }} value="员工姓名"/>
20                             )
21                         }
22                     </FormItem>
23                   <FormItem label="年龄:" {...formItemLayout}>
24                      {
25                          getFieldDecorator('useage',{
26                              initialValue:''
27                          })(
28                              <Input style={{ width: 50 }} value="员工年龄"/>
29                          )
30                      }
31                  </FormItem>
32                  <FormItem label="籍贯:" {...formItemLayout}>
33                     {
34                         getFieldDecorator('usejiguan',{
35                             initialValue:''
36                         })(
37                             <Input style={{ width: 130 }} value="员工籍贯"/>
38                         )
39                     }
40                 </FormItem>
41                 </Form>
42             );
43         }
44     }
45     AddUse = Form.create({})(AddUse);

返回表单

1 //调用表单并收集数据      ref的封装方法
2  <AddUse wrappedComponentRef={(formData)=>{
3            this.cityForm = formData
4   }}/>

表单数据  疯长的方法 more    

1.新增数据   例：注册  新增一个数据    onSubmit

2.查询数据  例：过滤数据  经过提交上去的parmas    （默认显示的数据，经过输入params 拿着这个params 再次请求api 获取新的符合 params的数据）  filterSubmit

3.modal  数据表单 获取数据值    详情请看上面的React Antd 表单数据收集

 

根据数据库数字   作一个数字字典

  getState = (state)=>{
      return{
        '1':'咸鱼一条',
        '2':'风华正茂',
        '3':'北大才子一条',
        '4':'百度Seo职员'
      }[state]
    }



<FormItem label="状态:" {...formItemLayout}>
    {
          type == 'detail' ? this.getState(useInfo.state) :
          getFieldDecorator('state',{
          initialValue:useInfo.state
         })(
         <Select style={{ width: 160 }}>
     　　　　 <Option value={1}>入职一个月</Option>
             <Option value={2}>入职3个月</Option>
             <Option value={3}>入职半年</Option>
             <Option value={4}>正式员工</Option>
         </Select>
         )
      }
 </FormItem>

 Wordpass    我的博客系统 

　　安装 基础版本 + theme  主题便可搭建 一个酷酷的我的博客    那么本身的博客   

　　数据库问题    配置  本身域名的 数据库 名称    用户名 密码   +   数据库host 连接地址