好客租房移动web项目（3）

1、WebSocket的Demo

1.1、App.js

// node中是通过net核心模块来开发websocket
// 市面上有很多基于net模块开发的第三方模块，开发websocket特别的简单。
const WebSocket = require('ws')

// 创建webSocket服务
const server = new WebSocket.Server({ port: 8080 })

// 启动websocket服务
// 只要浏览器端连接了websocket，connention事件就会触发
server.on('connection', client => {
  console.log('客户端连接上了')
  client.send('欢迎光临')

  // 每当客户端给我们发送消息的时候，message事件就会触发
  client.on('message', data => {
    let msg = ''
    switch (data) {
      case '你好':
        msg = '废话，当然好'
        break
      case '你是男的':
        msg = '不，我是小姐姐'
        break
      case '约吗':
        msg = '丑拒'
        break
      default:
        msg = '你说啥呀'
    }
    client.send(msg)
  })
})

1.2、index.html

  
  
  
  



  
  发送

  

2、好客租房移动web项目

2.1、components

 --- home

（1）chat

--Chat.css

.chat-container {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.chat-title {
  position: absolute;
  top: 0;
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color: #d4e0ee;
  text-align: center;
  font-size: 20px;
  z-index: 2;
}
.chat-list {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  padding-top: 40px;
  overflow-y: scroll;
}
.chat-list ul {
  margin: 0;
  padding: 0;
}
.chat-list li {
  position: relative;
  list-style: none;
  background-color: #f3f3f3;
  padding: 0 15px;
  margin-top: 2px;
  height: 70px;
  line-height: 70px;
  overflow: hidden;
}
.chat-list li img {
  width: 60px;
  height: 60px;
  margin-left: 5px;
  margin-top: 5px;
}
.chat-list li .name {
  position: absolute;
  left: 90px;
  top: -15px;
}
.chat-list li .info {
  position: absolute;
  left: 90px;
  top: 15px;
}
.chat-list li .time {
  position: absolute;
  right: 20px;
  top: -15px;
}
.chat-window {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  z-index: 99999;
}
.chat-list::-webkit-scrollbar {
  width: 3px;
}
.chat-list::-webkit-scrollbar-thumb {
  background-color: #cbdaea;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
  min-height: 2rem;
  background-clip: padding-box;
  border-radius: 5px;
}
.chat-list::-webkit-scrollbar-track {
  background-color: #fff;
}
.chat-list::-webkit-scrollbar-track-piece {
  height: 30px;
}

--Chat.jsx

import React from 'react'
import './Chat.css'
import moment from 'moment'
import ChatWindow from './ChatWindow'
class Chat extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      list: [],
      isShow: false,
      chatInfo: {}
    }
  }

  async componentDidMount() {
    let res = await this.axios.post('chats/list')
    let { meta, data } = res
    if (meta.status === 200) {
      this.setState({
        list: data.list
      })
    }
  }

  toChat = item => {
    // console.log(item)
    this.setState({
      isShow: true,
      chatInfo: {
        from_user: item.from_user,
        to_user: item.to_user,
        avatar: item.avatar,
        username: item.username
      }
    })
  }

  closeWindow = () => {
    this.setState({
      isShow: false
    })
  }

  render() {
    return (
      

        {this.state.isShow && (
          
        )}
        
聊天
        

          

            {this.state.list.map(item => (
              

                

                  
                  {item.username}
                  {item.chat_msg}
                  
                    {moment(item.ctime).format('YYYY-MM-DD HH:mm:ss')}
                  
                
              
            ))}
          
        
      
    )
  }
}
export default Chat

--ChatWindow.css

.chat-window-title {
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  padding-top: 3px;
  background-color: #d4e0ee;
  position: absolute;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}
.chat-window-content {
  position: absolute;
  top: 40px;
  bottom: 126px;
  width: 100%;
  overflow-y: auto;
}
.chat-window-content ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.chat-window-content ul li {
  min-height: 60px;
  clear: both;
}
.chat-window-content ul li img {
  width: 50px;
  height: 50px;
  padding-top: 5px;
  padding-left: 5px;
  vertical-align: top;
  float: left;
}
.chat-window-content ul li span {
  display: inline-block;
  font-size: 20px;
  background-color: #fff;
  padding: 5px 10px;
  margin: 10px 60px 0 10px;
  width: 65%;
  min-height: 50px;
  float: left;
  box-sizing: border-box;
  word-break: break-all;
  word-wrap: break-word;
}
.chat-window-content ul li.chat-info-right img {
  float: right;
  padding-right: 5px;
}
.chat-window-content ul li.chat-info-right span {
  float: right;
  margin: 10px 6px 0 60px;
  background-color: lightgreen;
}
.chat-window-input {
  width: 100%;
  position: absolute;
  bottom: 0;
  background-color: #21b97a;
  min-height: 60px;
  text-align: right;
  padding: 5px;
}
.chat-ret-btn {
  position: absolute;
  left: 0;
  top: 8px;
}
.ui.form textarea {
  margin-bottom: 5px;
}

--ChatWindow.jsx

import React from 'react'
import { Icon, Form, Button, TextArea } from 'semantic-ui-react'
import './ChatWindow.css'
import handle from './wsmain'
class ChatWindow extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      list: [],
      client: '',
      msgContent: '',
      fromAvatar: ''
    }
  }

  getChatList = async () => {
    // 发送ajax请求，获取聊天数据
    let res = await this.axios.post('chats/info', {
      from_user: this.props.chatInfo.from_user,
      to_user: this.props.chatInfo.to_user
    })
    let { meta, data } = res
    if (meta.status === 200) {
      this.setState({
        list: data.list
      })
    }
  }

  // 聊天窗口组件挂载的时候，获取聊天列表信息
  async componentDidMount() {
    // 获取当前用户的头像
    let res = await this.axios.post('my/info', {
      user_id: localStorage.getItem('uid')
    })
    let { meta, data } = res
    if (meta.status === 200) {
      // 通过websocket连接服务器，得到client对象
      let currentUser = localStorage.getItem('uid') - 0
      // 参数1： 连接聊天服务器的id
      // 参数2： 回调函数，服务器每次给发送的消息，都在data中
      // 返回值：client对象
      let client = handle(currentUser, data => {
        // 该回调函数用来处理服务器返回的消息（其实就是对方发送消息）
        // 其实就是接收对方返回的消息
        let newData = JSON.parse(data.content)
        let newList = [...this.state.list, newData]
        this.setState({
          list: newList
        })
      })
      this.setState({
        client: client,
        avatar: data.avatar
      })
    }
    this.getChatList()
  }

  // 给服务器发送数据
  sendMsg = () => {
    // 给服务器发送的数据包含：
    // from_user: 从谁发
    // to_user： 给谁发
    // this.state.msgContent: 发送的内容

    let pdata = {
      id: new Date().getTime(),
      from_user: this.props.chatInfo.from_user,
      to_user: this.props.chatInfo.to_user,
      chat_msg: this.state.msgContent,
      avatar: this.state.avatar
    }
    // 把消息发送出去
    this.state.client.emitEvent('msg_text_send', JSON.stringify(pdata))
    // 重新渲染聊天列表
    let newList = [...this.state.list, pdata]
    this.setState({
      list: newList,
      msgContent: ''
    })
  }

  handleChange = e => {
    this.setState({
      msgContent: e.target.value
    })
  }
  render() {
    let currentUser = localStorage.getItem('uid') - 0
    return (
      

        

          
          {this.props.chatInfo.username}
        
        

          

            {this.state.list.map(item => (
              // 通过currentUser与from_user去比较
              

                {/* 这个头像显示是错误 */}
                
                {item.chat_msg}
              
            ))}
          
        
        

          

                        <Button onClick={this.props.closeWindow}>关闭</Button>
            <Button primary onClick={this.sendMsg}>
              发送
            </Button>
          </Form>
        </div>
      </div>
    )
  }
}

export default ChatWindow
</code></pre> 
  <p>--DataPacket.js</p> 
  <pre class="has"><code>class DataPacket {
    constructor(message) {
        if(typeof(message) === "string"){
            try {
                this._data = JSON.parse(message);
            } catch (error) {
                this._data = undefined;
            }
            
        } else if(typeof(message) === "object"){
            this._data = message;
        }
    }

    get data() {
        return this._data
    }

    get content() {
        return this._data["content"]
    }

    get type() {
        return this._data["type"];
    }
    
    set type(type) {
        this._data["type"] = type;
    }

    get rawMessage() {
        return JSON.stringify(this._data);
    }
}

export default DataPacket</code></pre> 
  <p>--DMClient.js</p> 
  <pre class="has"><code>import DataPacket from './DataPacket.js'
import IMEvent from './IMEvent.js'

/**
 * 通讯客户端
 */
class IMClient {
  constructor(url) {
    this._url = url
    this._autoConnect = true
    this._handlers = {}
    this._DataPacketQueue = []
    this._isOpened = false

    this.addEventListener(IMEvent.CONNECTED, () => {
      this.serverOnConnected()
    })

    // this.addEventListener(IMEvent.CONNECTED, () => {
    //   this.clearMsgQueue();
    // })

    this.addEventListener(IMEvent.DISCONNECTED, () => {
      this.serverOnDisconnected()
    })
  }
  /**
   * 底层通讯函数回调
   */
  // 连接
  connect() {
    if (!this._socket) {
      this._socket = new WebSocket(this._url)

      this._socket.onmessage = evt => {
        this.onMessage(evt.data)
      }
      this._socket.onopen = ws => {
        this.onOpen(ws)
      }
      this._socket.onclose = ws => {
        this.onClose(ws)
      }
      this._socket.onerror = ws => {
        this.onError(ws)
      }
    }
  }

  // 消息接收
  onMessage(message) {
    // console.log(message, 11)
    if (typeof message === 'string') {
      // message就是服务器返回的消息
      this.dispatchMessage(message)
    }
  }

  // 打开回调
  onOpen() {
    this.emitEvent(IMEvent.CONNECTED)
  }

  // 关闭回调
  onClose() {
    this._socket = undefined
    this.emitEvent(IMEvent.DISCONNECTED)
    if (this.autoReconnect) {
      setTimeout(() => {
        this.connect()
      }, 5000)
    }
  }

  // 出现错误回调
  onError() {
    this._socket = undefined
    if (this.autoReconnect) {
      setTimeout(() => {
        this.connect()
      }, 5000)
    }
  }

  // 向服务器发送数据包
  sendDataPacket(dataPacket) {
    if (this._isOpened) {
      this._socket.send(dataPacket.rawMessage)
    } else {
      this._DataPacketQueue.push(dataPacket)
    }
  }

  /**
   * 事件处理
   */
  // 当连接服务器时处理
  serverOnConnected() {
    this._isOpened = true
  }

  // 当断开连接服务器时处理
  serverOnDisconnected() {
    this._isOpened = false
  }

  // 清空消息队列
  clearMsgQueue() {
    if (this._DataPacketQueue.length > 0) {
      this._DataPacketQueue.forEach(dataPacket => {
        this.sendDataPacket(dataPacket)
      })
      this._socketMsgQueue = []
    }
  }

  /**
   * 发射事件
   * @param {string} type 事件类型
   * @param {参数列表} args 传递事件参数
   */
  emitEvent(type, ...args) {
    if (this._handlers[type] && this._handlers[type].length > 0) {
      let handlers = this._handlers[type]
      for (var i = 0; i < handlers.length; i++) {
        handlers[i].call(this, ...args)
      }
    }
  }

  /**
   * 添加事件监听
   *
   * @param {string} type 事件类型
   * @param {Function} callback 事件处理函数
   */
  addEventListener(type, handler) {
    if (!this._handlers[type]) {
      this._handlers[type] = []
    }
    this._handlers[type].push(handler)
  }

  /**
   * 移除事件
   *
   * @param {string} type 事件类型
   * @param {*} callback
   */
  removeEventListener(type, handler) {
    if (this._handlers[type] && this._handlers[type].length > 0) {
      let handlers = this._handlers[type]
      for (var i = handlers.length - 1; i >= 0; i--) {
        if (handler === handlers[i]) {
          handlers.splice(i, 1)
        }
      }
    }
  }

  /**
   * 消息封装成数据包
   */
  dispatchMessage(message) {
    let dataPacket = new DataPacket(message)
    if (dataPacket.data) {
      this.dispatchDataPacket(dataPacket)
    }
  }

  /**
   * 处理数据包
   */
  dispatchDataPacket(dataPacket) {
    this.emitEvent(dataPacket.type, dataPacket)
  }
}

export default IMClient
</code></pre> 
  <p>--IMEvent.js</p> 
  <pre class="has"><code>export default {
  ERROR: "error",
  CONNECTED: "connected",
  DISCONNECTED: "disconnected",
  MSG_DISCONNECTED: "msg_disconnected",
  MSG_TEXT_SEND: "msg_text_send",
  MSG_TEXT_REC: "msg_text_rec",
  USER_REG: "user_reg",
}
</code></pre> 
  <p>--wsmain.js</p> 
  <pre class="has"><code>import IMEvent from './IMEvent.js'
import IMClient from './IMClient.js'
import DataPacket from './DataPacket.js'
// import config from '../../common.js';

const handle = (currentUser, handleMsg) => {
  const client = new IMClient('ws://127.0.0.1:8087');
  // 发送消息
  client.addEventListener(IMEvent.MSG_TEXT_SEND, data => {
    let dataPacket = new DataPacket({
      type: IMEvent.MSG_TEXT_SEND,
      content: data
    })
    client.sendDataPacket(dataPacket)
  })
  // 接收消息
  client.addEventListener(IMEvent.MSG_TEXT_REC, data => {
    handleMsg(data)
  })
  // 注册身份
  client.addEventListener(IMEvent.CONNECTED, () => {
    let dataPacket = new DataPacket({
      type: IMEvent.USER_REG,
      content: currentUser
    })
    client.sendDataPacket(dataPacket)
    console.log('success')
  })
  client.connect();
  return client;
}
export default handle;
</code></pre> 
  <p>（2）demo</p> 
  <p>--Demo.jsx</p> 
  <pre class="has"><code>import React from 'react'
// 1. 导入相关的依赖包, 会自动导入依赖的核心样式
import Tloader from 'react-touch-loader'
import './style.less'
class Demo extends React.Component {
  constructor() {
    super()
    this.state = {
      hasMore: false,
      initializing: 1,
      total: 0 // 总条数
    }
  }

  refresh = (resolve, reject) => {
    setTimeout(() => {
      // 获取第一页的数据
      this.setState({
        total: 10,
        hasMore: true
      })
      resolve()
    }, 1000)
  }

  loadMore = (resolve, reject) => {
    setTimeout(() => {
      let newTotal = this.state.total + 10
      this.setState({
        total: newTotal,
        hasMore: newTotal > 0 && newTotal < 50
      })
      resolve()
    }, 1000)
  }

  componentDidMount() {
    // 后台加载数据
    setTimeout(() => {
      this.setState({
        total: 10,
        initializing: 2,
        hasMore: true
      })
    }, 1000)
  }

  render() {
    let { hasMore, initializing, total } = this.state
    let data = []
    for (var i = 0; i < total; i++) {
      data.push(
        <li key={i}>
          <p>{i}</p>
        </li>
      )
    }
    return (
      <div className="view">
        {/* onRefresh: 下拉刷新功能 */}
        <Tloader
          className="main"
          initializing={initializing}
          hasMore={hasMore}
          onRefresh={this.refresh}
          onLoadMore={this.loadMore}
        >
          <ul>{data}</ul>
        </Tloader>
      </div>
    )
  }
}
export default Demo
</code></pre> 
  <p>--Demo-备份.jsx</p> 
  <pre class="has"><code>import React from 'react'
import './style.less'

import Tloader from 'react-touch-loader'

class Demo extends React.Component {
  // 构造函数
  constructor() {
    super()
    this.state = {
      // 能够下拉刷新（能）
      canRefreshResolve: 1,
      // 总的数量
      listLen: 0,
      // 是否有更多的数据
      hasMore: 0,
      // 0: 不显示进度条 1：显示进度条 2.结束进度条
      initializing: 1,
      // 刷新的时间
      refreshedAt: Date.now()
    }
  }

  // 组件刚挂载执行的代码
  componentDidMount() {
    // 发送ajax请求，获取到数据
    setTimeout(() => {
      this.setState({
        // 获取到了9条数据
        listLen: 9,
        // hasMore: true, 有更多，显示加载更多
        hasMore: 1,
        // 结束进度条
        initializing: 2 // initialized
      })
    }, 2000)
  }

  // 下拉刷新的代码
  refresh = (resolve, reject) => {
    setTimeout(() => {
      const { canRefreshResolve } = this.state
      if (!canRefreshResolve) reject()
      else {
        // 重置了状态
        this.setState({
          listLen: 9,
          hasMore: 1,
          refreshedAt: Date.now()
        })

        resolve()
      }
    }, 2000)
  }
  // 加载更多的代码
  loadMore = resolve => {
    setTimeout(() => {
      const { listLen } = this.state
      const l = listLen + 9

      this.setState({
        listLen: l,
        hasMore: l > 0 && l < 50
      })

      resolve()
    }, 2000)
  }

  render() {
    const { listLen, hasMore, initializing, refreshedAt } = this.state
    const list = []

    if (listLen) {
      for (let i = 0; i < listLen; i++) {
        list.push(
          <li key={i}>
            <p>{i}</p>
          </li>
        )
      }
    }
    return (
      <div className="view">
        <Tloader
          className="main"
          onRefresh={this.refresh}
          onLoadMore={this.loadMore}
          hasMore={hasMore}
          initializing={initializing}
        >
          <ul>{list}</ul>
        </Tloader>
      </div>
    )
  }
}

export default Demo
</code></pre> 
  <p>--style.less</p> 
  <pre class="has"><code>html,
body {
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Helvetica Neue', Helvetica, 'STHeitiSC-Light',
    'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
  text-align: center;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
:focus {
  outline: none;
}
:not(input):not(textarea):not([contenteditable]) {
  -webkit-touch-callout: none;
  user-select: none;
}

html {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.view {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  overflow: hidden;
  background-color: #efeff4;
  display: flex;
  flex-direction: column;

  // header, footer
  h1,
  .footer {
    margin: 0;
    background-color: #333;
    color: #eee;
    font-size: 1em;
    line-height: 3;

    a {
      color: inherit;
      margin: 0 1em;
    }
  }

  .main {
    flex: 1;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch; // enhance ios scrolling

    ul {
      list-style: none;
      margin: 0;
      padding: 0;

      li {
        background-color: #fff;
        border-bottom: 1px solid #ccc;

        p {
          margin: 0;
          line-height: 3em;
        }
      }
    }
  }
}
</code></pre> 
  <p>（3）info</p> 
  <p>--Info.css</p> 
  <pre class="has"><code>.find-container {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: lightgreen;
  overflow: hidden;
}
.find-topbar {
  position: absolute;
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color: #b5efff;
  text-align: center;
  font-size: 20px;
  z-index: 999;
}
.find-content {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 40px;
  overflow-y: auto;
}

.ui.bottom.attached.segment.active.tab {
  top: 80px;
  bottom: 0px;
  position: absolute;
  overflow-y: auto;
}

.ui .view {
  background-color: #fff;
}

/* 消息的样式 */
.ui.items > .item > .content > .header.info-title {
  text-align: left;
  height: auto;
  filter: none;
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -ms-filter: blur(0px);
  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');
}

.ui.items > .item .meta {
  text-align: left;
}

/* 问答相关的样式 */
.info-ask-list {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.info-ask-list li {
  position: relative;
  margin: 5px 10px;
  padding: 10px 0;
}

.info-ask-list li .title {
  color: #000;
  font-weight: bold;
  padding: 5px;
  font-size: 16px;
}
.info-ask-list li .title .cate {
  box-sizing: border-box;
  background-color: #c6f3ff;
  margin-right: 5px;
  padding: 0px 3px;
  display: inline-block;
  font-size: 14px;
}
.info-ask-list li .user {
  font-size: 12px;
  color: gray;
  padding-left: 5px;
}
.info-ask-list li .info {
  font-size: 10px;
  color: gray;
  padding-left: 5px;
}
.info-ask-list li .tag {
  padding-left: 5px;
  margin-top: 10px;
  overflow: hidden;
}
.info-ask-list li .tag span {
  font-size: 12px;
  color: #000;
  border: 1px solid gray;
  margin-right: 5px;
  padding: 2px 5px;
}
.info-ask-list li .tag span:last-child {
  float: right;
  border: 0px;
}
.info-ask-btn {
  padding: 10px 15px;
}
</code></pre> 
  <p>--Info.jsx</p> 
  <pre class="has"><code>import React from 'react'
import './Info.css'
import { Tab, Item, Icon } from 'semantic-ui-react'
import Tloader from 'react-touch-loader'
class Info extends React.Component {
  render() {
    const panes = [
      {
        menuItem: '资讯',
        render: () => (
          <Tab.Pane>
            <M1 />
          </Tab.Pane>
        )
      },
      {
        menuItem: '头条',
        render: () => (
          <Tab.Pane>
            <M2 />
          </Tab.Pane>
        )
      },
      {
        menuItem: '问答',
        render: () => (
          <Tab.Pane>
            <M3 />
          </Tab.Pane>
        )
      }
    ]
    return (
      <div className="find-container">
        <div className="find-topbar">资讯</div>
        <div className="find-content">
          <Tab panes={panes} />
        </div>
      </div>
    )
  }
}
export default Info

function M1() {
  return <Loader type="1" />
}
function M2() {
  return <Loader type="2" />
}
function M3() {
  return <Loader type="3" />
}

// 定义Message组件
function Message({ data }) {
  return (
    <Item.Group unstackable>
      {data.map(item => (
        <Item key={item.id}>
          <Item.Image size="small" src="http://47.96.21.88:8086/public/1.png" />
          <Item.Content verticalAlign="middle">
            <Item.Header className="info-title">{item.info_title}</Item.Header>
            <Item.Meta>
              <span className="price">$1200</span>
              <span className="stay">1 Month</span>
            </Item.Meta>
          </Item.Content>
        </Item>
      ))}
    </Item.Group>
  )
}

// 定义问答组件
function AskAnswer({ data }) {
  return (
    <ul className="info-ask-list">
      {data.map(item => (
        <li key={item.id}>
          <div className="title">
            <span className="cate">
              <Icon color="green" name="users" size="small" />
              思维
            </span>
            <span>
              你好你好你好你好你好你好你好你好你好你好你好你好你好你好
            </span>
          </div>
          <div className="user">
            <Icon circular name="users" size="mini" />
            张三的回答
          </div>
          <div className="info">
            你好你好你好你好你好你好你好你好你好你好你好你好你好你好
          </div>
          <div className="tag">
            <span>你好X</span>
            <span>你好X</span>
            <span>你好X</span>
            <span>123个回答</span>
          </div>
        </li>
      ))}
    </ul>
  )
}

// 定义touch-loader组件
class Loader extends React.Component {
  constructor() {
    super()
    this.state = {
      hasMore: false,
      initializing: 1,
      pagenum: 0,
      pagesize: 2,
      list: [],
      total: 0
    }
  }

  // 加载数据
  loadData = () => {
    // 发送ajax请求，动态加载数据
    // console.log(this.props.type)
    return this.axios
      .post('infos/list', {
        type: this.props.type,
        pagenum: this.state.pagenum,
        pagesize: this.state.pagesize
      })
      .then(res => {
        let { meta, data } = res
        if (meta.status === 200) {
          return data.list
        }
      })
  }
  // 需要在组件渲染的时候，动态的加载数据
  async componentDidMount() {
    let data = await this.loadData()
    let newNum = this.state.pagenum + this.state.pagesize
    this.setState({
      list: data.data,
      initializing: 2,
      toal: data.total,
      pagenum: newNum,
      hasMore: newNum < data.total
    })
  }

  refresh = async (resolve, reject) => {
    // 重置初始的条数
    // react的setState是异步的，通过setState修改react内部的数据，不是立即更新的
    // 如果就想获取立即更新的数据
    this.setState({
      pagenum: 0
    })
    setTimeout(async () => {
      let data = await this.loadData()
      let newNum = this.state.pagenum + this.state.pagesize
      this.setState({
        list: data.data,
        pagenum: newNum,
        hasMore: newNum < data.total
      })
      resolve()
    }, 0)
  }

  loadMore = async (resolve, reject) => {
    let data = await this.loadData()
    let newNum = this.state.pagenum + this.state.pagesize
    let newList = [...this.state.list, ...data.data]
    this.setState({
      list: newList,
      initializing: 2,
      toal: data.total,
      pagenum: newNum,
      hasMore: newNum < data.total
    })
    resolve()
  }

  render() {
    let { hasMore, initializing, list } = this.state
    let { type } = this.props
    return (
      <div className="view">
        <Tloader
          className="main"
          onRefresh={this.refresh}
          onLoadMore={this.loadMore}
          hasMore={hasMore}
          initializing={initializing}
        >
          {type === '3' ? <AskAnswer data={list} /> : <Message data={list} />}
        </Tloader>
      </div>
    )
  }
}
</code></pre> 
  <p>（4）main</p> 
  <p>--Main.css</p> 
  <pre class="has"><code>.main {
  width: 100%;
  height: 100%;
  position: relative;
}
.search {
  height: 40px;
  line-height: 40px;
  position: absolute;
  width: 100%;
  top: 0;
  z-index: 999;
}

.content {
  width: 100%;
  height: 100%;
  padding-top: 40px;
  /* 给content添加了垂直的滚动条 */
  overflow-y: auto;
}

/* 滚动条样式 */
.content::-webkit-scrollbar {
  width: 3px;
}
.content::-webkit-scrollbar-thumb {
  background-color: #cbdaea;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
  min-height: 2rem;
  background-clip: padding-box;
  border-radius: 5px;
}
.content::-webkit-scrollbar-track {
  background-color: #fff;
}

/* 菜单的样式 */
.home-menu-item {
  border-radius: 31px;
  height: 62px;
  line-height: 62px;
  color: #fff;
}

.ui.grid > .row > .column:nth-child(1) .home-menu-item {
  background-color: #0ac250;
}
.ui.grid > .row > .column:nth-child(2) .home-menu-item {
  background-color: #ff611a;
}
.ui.grid > .row > .column:nth-child(3) .home-menu-item {
  background-color: #f6b906;
}
.ui.grid > .row > .column:nth-child(4) .home-menu-item {
  background-color: #4f99e4;
}
.ui.grid > .row > .column:nth-child(5) .home-menu-item {
  background-color: #fd8701;
}
.ui.grid > .row > .column:nth-child(6) .home-menu-item {
  background-color: #23acf2;
}
.ui.grid > .row > .column:nth-child(7) .home-menu-item {
  background-color: #eb1e03;
}
.ui.grid > .row > .column:nth-child(8) .home-menu-item {
  background-color: #7ccc39;
}

.ui.menu > .row > .column {
  text-align: center;
  margin-top: 10px;
}

/* 好客咨询样式 */
.home-msg {
  margin: 25px 0 15px 0;
  position: relative;
}
.home-msg .ui.unstackable.items > .item.home-msg-img > .image,
.home-msg .ui.unstackable.items > .item.home-msg-img > .image > img {
  width: 50px !important;
  height: 50px !important;
  margin-left: 7px;
  margin-top: 2px;
}
.ui.items > .item > .content > .header {
  display: block;
  height: 25px;
  margin-top: 5px;
  font-weight: 600;
}
.ui.items > .item > .content > .header span:first-child {
  color: orange;
  margin-right: 10px;
  overflow: hidden;
  display: inline-block;
}
.ui.items > .item > .content > .header span:last-child {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: baseline;
  width: 65%;
}
.home-msg .home-msg-more {
  position: absolute;
  right: 5px;
  top: 12px;
}

/* 好客问答样式 */
.home-ask-title {
  height: 40px;
  font-weight: 600;
  font-size: 18px;
  line-height: 40px;
  padding-left: 10px;
  border-bottom: 1px solid #cecece;
}

.home-ask ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.home-ask ul li {
  height: 70px;
  line-height: 70px;
}

.home-ask ul li div {
  height: 35px;
  line-height: 35px;
}

.home-ask ul li div:first-child {
  margin-left: 10px;
  font-size: 18px;
}
.home-ask ul li div:last-child {
  margin-left: 30px;
  position: relative;
}

.home-ask ul li div:last-child div {
  position: absolute;
  font-size: 14px;
  right: 15px;
  top: 0;
}

/* 房屋样式 */
.home-hire-title {
  height: 40px;
  font-weight: 600;
  font-size: 18px;
  line-height: 40px;
  padding-left: 10px;
  border-bottom: 1px solid #cecece;
}

.ui.items > .item > .image {
  margin-left: 10px;
  margin-top: 6px;
}

.ui.items > .item > .content > .description:last-child {
  color: orange;
}
</code></pre> 
  <p>--Main.jsx</p> 
  <pre class="has"><code>import React from 'react'
import 'react-image-gallery/styles/css/image-gallery.css'
import './Main.css'
import {
  Input,
  Grid,
  Icon,
  Item,
  Button,
  Dimmer,
  Loader
} from 'semantic-ui-react'
// 导入轮播图组件
import ImageGallery from 'react-image-gallery'
class Main extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      imgList: [],
      menuList: [],
      infoList: [],
      faqList: [],
      houseList: [],
      loading: true
    }
  }

  /* // 获取轮播图数据
  getImgList = async () => {
    let res = await this.axios.post('homes/swipe')
    let { meta, data } = res
    if (meta.status === 200) {
      this.setState({
        imgList: data.list
      })
    }
  }
  // 获取菜单数据
  getMenuList = async () => {
    let res = await this.axios.post('homes/menu')
    let { meta, data } = res
    if (meta.status === 200) {
      this.setState({
        menuList: data.list
      })
    }
  }
  // 获取咨询数据
  getInfoList = async () => {
    let res = await this.axios.post('homes/info')
    let { meta, data } = res
    if (meta.status === 200) {
      this.setState({
        infoList: data.list
      })
    }
  }
  // 获取咨询数据
  getFaqList = async () => {
    let res = await this.axios.post('homes/faq')
    let { meta, data } = res
    if (meta.status === 200) {
      this.setState({
        faqList: data.list
      })
    }
  }
  // 获取房屋数据
  getHouseList = async () => {
    let res = await this.axios.post('homes/house')
    let { meta, data } = res
    if (meta.status === 200) {
      this.setState({
        houseList: data.list
      })
    }
  } */
  doRequest = (url, dataName) => {
    return this.axios.post(url).then(res => {
      let { meta, data } = res
      if (meta.status === 200) {
        this.setState({
          [dataName]: data.list
        })
      }
    })
  }
  // 页面加载完成，需要发送ajax请求，获取轮播图数据
  async componentDidMount() {
    // Promise.all()
    await Promise.all([
      this.doRequest('homes/swipe', 'imgList'),
      this.doRequest('homes/menu', 'menuList'),
      this.doRequest('homes/info', 'infoList'),
      this.doRequest('homes/faq', 'faqList'),
      this.doRequest('homes/house', 'houseList')
    ])
    this.setState({
      loading: false
    })
  }
  render() {
    return (
      <div className="main">
        <div className="search">
          <Input
            fluid
            icon={{ name: 'search', circular: true, link: true }}
            placeholder="搜房源..."
          />
        </div>
        <div className="content">
          <Dimmer inverted active={this.state.loading} page>
            <Loader>Loading</Loader>
          </Dimmer>
          {/* 轮播图 */}
          <ImageGallery
            items={this.state.imgList}
            showThumbnails={false}
            showFullscreenButton={false}
            showPlayButton={false}
            showBullets={true}
          />
          {/* 菜单部分 */}
          <MenuList data={this.state.menuList} />
          {/* 好客咨询部分 */}
          <InfoList data={this.state.infoList} />
          {/* 好客问答部分 */}
          <FaqList data={this.state.faqList} />
          {/* 房屋信息部分 */}
          <HouseList data={this.state.houseList} />
          {/* <div style={{ height: 1000 }} /> */}
        </div>
      </div>
    )
  }
}

export default Main

// 定义菜单组件，渲染菜单数据
// 参数的解构
function MenuList({ data }) {
  return (
    <Grid className="menu" divided padded>
      <Grid.Row columns={4}>
        {data.map(item => (
          <Grid.Column key={item.id}>
            <div className="home-menu-item">
              <Icon name="home" size="big" />
            </div>
            <div>{item.menu_name}</div>
          </Grid.Column>
        ))}
      </Grid.Row>
    </Grid>
  )
}

// 好客资讯组件
function InfoList({ data }) {
  return (
    <div className="home-msg">
      <Item.Group unstackable>
        <Item className="home-msg-img">
          <Item.Image
            size="tiny"
            src={'http://47.96.21.88:8086/public/zixun.png'}
          />
          <Item.Content verticalAlign="top">
            {data.map(item => (
              <Item.Header key={item.id}>
                <span>限购 ●</span>
                <span>{item.info_title}</span>
              </Item.Header>
            ))}
            <div className="home-msg-more">
              <Icon name="angle right" size="big" />
            </div>
          </Item.Content>
        </Item>
      </Item.Group>
    </div>
  )
}

// 好客问答组件
function FaqList({ data }) {
  return (
    <div className="home-ask">
      <div className="home-ask-title">好客问答</div>
      <ul>
        {data.map(item => (
          <li key={item.question_id}>
            <div>
              <Icon color="green" name="question circle outline" />
              <span>{item.question_name}</span>
            </div>
            <div>
              {item.question_tag.split(',').map(tag => (
                <Button key={tag} basic color="green" size="mini">
                  {tag}
                </Button>
              ))}
              <div>
                {item.atime} ● <Icon name="comment alternate outline" />{' '}
                {item.qnum}
              </div>
            </div>
          </li>
        ))}
      </ul>
    </div>
  )
}

// 房屋组件
function HouseList({ data }) {
  let newHouse = []
  let oldHouse = []
  let hireHouse = []
  data.forEach(item => {
    let temp = (
      <Item key={item.id}>
        <Item.Image src="http://47.96.21.88:8086/public/home.png" />
        <Item.Content>
          <Item.Header>{item.home_name}</Item.Header>
          <Item.Meta>
            <span className="cinema">{item.home_desc}</span>
          </Item.Meta>
          <Item.Description>
            {item.home_tags.split(',').map(tag => (
              <Button key={tag} basic color="green" size="mini">
                {tag}
              </Button>
            ))}
          </Item.Description>
          <Item.Description>{item.home_price}</Item.Description>
        </Item.Content>
      </Item>
    )
    if (item.home_type === 1) {
      newHouse.push(temp)
    } else if (item.home_type === 2) {
      oldHouse.push(temp)
    } else {
      hireHouse.push(temp)
    }
  })
  // console.log(data)
  return (
    <div>
      <div>
        <div className="home-hire-title">最新开盘</div>
        <Item.Group divided unstackable>
          {newHouse}
        </Item.Group>
      </div>
      <div>
        <div className="home-hire-title">二手精选</div>
        <Item.Group divided unstackable>
          {oldHouse}
        </Item.Group>
      </div>
      <div>
        <div className="home-hire-title">组一个家</div>
        <Item.Group divided unstackable>
          {hireHouse}
        </Item.Group>
      </div>
    </div>
  )
}
</code></pre> 
  <p>（5）my</p> 
  <p>--My.css</p> 
  <pre class="has"><code>.my-container {
  overflow-y: auto;
  height: 100%;
}
.my-title {
  min-height: 300px;
  position: relative;
}
.my-title img {
  width: 100%;
}
.my-title .info {
  position: absolute;
  background: #fff;
  width: 60%;
  height: 65%;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 2px 2px 3px #787d82;
  margin: 50px auto 0;
  padding: 0 20px;
  padding-top: 0;
  text-align: center;
}
.my-title .myicon {
  position: relative;
  transform: translateY(-50%);
  border-radius: 50%;
  max-width: 90px;
  max-height: 90px;
  border: solid 5px #f5f5f5;
  display: inline-block;
  box-shadow: 0px 2px 2px #bdbdbd;
}
.my-title .myicon img {
  border-radius: 50%;
}
.my-title .name {
  margin-top: -30px;
  margin-bottom: 10px;
}
.my-title .edit {
  color: #787d82;
  margin-top: 20px;
}
.my-menu.ui.grid > .row > .column {
  margin-top: 20px;
  margin-bottom: 10px;
  color: #808589;
}
.my-menu.ui.grid > .row > .column div {
  margin-top: 5px;
}
.my-ad {
  text-align: center;
  margin-top: 10px;
}
.my-ad img {
  width: 85%;
}
.my-container::-webkit-scrollbar {
  width: 3px;
}
.my-container::-webkit-scrollbar-thumb {
  background-color: #cbdaea;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
  min-height: 2rem;
  background-clip: padding-box;
  border-radius: 5px;
}
.my-container::-webkit-scrollbar-track {
  background-color: #fff;
}
.my-container::-webkit-scrollbar-track-piece {
  height: 30px;
}
.ui.modal > .actions {
  text-align: center;
}
.ui.modal > .content {
  text-align: center;
}
.ui.modal > .content .avatar-zoom {
  color: #000;
  margin-right: 10px;
  display: inline-block;
  vertical-align: text-bottom;
  padding-bottom: 2px;
  font-size: 18px;
}
</code></pre> 
  <p>--My.jsx</p> 
  <pre class="has"><code>import React from 'react'
import './My.css'
import { Button, Grid, Icon, Modal } from 'semantic-ui-react'
import AvatarEditor from 'react-avatar-editor'
class My extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      avatar: '',
      username: '',
      isShowSelect: false, // 是否显示选择图片的模态框
      isShowCrop: false, // 是否显示裁切图片的模态框
      avatarFile: ''
    }
  }
  // 显示选择图片的弹窗
  showSelect = () => {
    this.setState({
      isShowSelect: true
    })
  }

  // 显示裁切图片的弹窗
  showCrop = file => {
    // 1. 隐藏选择图片的弹窗
    // 2. 把上传到的图片保存起来
    //3. 显示裁切图片的弹窗
    this.setState({
      isShowSelect: false,
      avatarFile: file,
      isShowCrop: true
    })
  }

  // 关闭裁切模态框
  closeCrop = avatar => {
    this.setState({
      isShowCrop: false,
      avatar: avatar
    })
  }

  // 当组件挂载好了，发送ajax请求，获取到个人信息
  // 接口需要参数： user_id
  async componentDidMount() {
    let res = await this.axios.post('my/info', {
      user_id: localStorage.getItem('uid')
    })
    let { meta, data } = res
    if (meta.status === 200) {
      this.setState({
        avatar: data.avatar,
        username: data.username
      })
    }
  }

  render() {
    return (
      <div className="my-container">
        <SelectAvatar open={this.state.isShowSelect} showCrop={this.showCrop} />
        <CropAvatar
          open={this.state.isShowCrop}
          avatarFile={this.state.avatarFile}
          closeCrop={this.closeCrop}
        />
        <div className="my-title">
          <img src={'http://127.0.0.1:9999/public/my-bg.png'} alt="me" />
          <div className="info">
            <div className="myicon">
              {/* 给头像注册点击事件，显示选择头像的弹窗 */}
              <img
                src={this.state.avatar}
                alt="icon"
                onClick={this.showSelect}
              />
            </div>
            <div className="name">{this.state.username}</div>
            <Button color="green" size="mini">
              已认证
            </Button>
            <div className="edit">编辑个人资料</div>
          </div>
        </div>
        <Grid padded className="my-menu">
          <Grid.Row columns={3}>
            <Grid.Column>
              <Icon name="clock outline" size="big" />
              <div>看房记录</div>
            </Grid.Column>
            <Grid.Column>
              <Icon name="yen sign" size="big" />
              <div>我的订单</div>
            </Grid.Column>
            <Grid.Column>
              <Icon name="bookmark outline" size="big" />
              <div>我的收藏</div>
            </Grid.Column>
            <Grid.Column>
              <Icon name="user outline" size="big" />
              <div>个人资料</div>
            </Grid.Column>
            <Grid.Column>
              <Icon name="home" size="big" />
              <div>身份认证</div>
            </Grid.Column>
            <Grid.Column>
              <Icon name="microphone" size="big" />
              <div>联系我们</div>
            </Grid.Column>
          </Grid.Row>
        </Grid>
        <div className="my-ad">
          <img src={'http://127.0.0.1:9999/public/ad.png'} alt="" />
        </div>
      </div>
    )
  }
}
export default My

// 选择头像的弹窗组件
class SelectAvatar extends React.Component {
  constructor(props) {
    super(props)
    this.fileRef = React.createRef()
  }

  submitFile = () => {
    // 获取到上传的文件, 传递给父组件
    let file = this.fileRef.current.files[0]
    this.props.showCrop(file)
  }

  render() {
    let { open } = this.props
    return (
      <div>
        {/* 弹窗组件 */}
        <Modal size="small" open={open}>
          <Modal.Header>选择图片</Modal.Header>
          <Modal.Content>
            <input type="file" ref={this.fileRef} />
          </Modal.Content>
          <Modal.Actions>
            <Button
              positive
              icon="checkmark"
              labelPosition="right"
              content="确定"
              onClick={this.submitFile}
            />
          </Modal.Actions>
        </Modal>
      </div>
    )
  }
}

// 裁切头像的弹窗组件
class CropAvatar extends React.Component {
  constructor() {
    super()
    this.state = {
      scale: 1
    }
  }

  handleScale = e => {
    this.setState({
      scale: e.target.value - 0
    })
  }

  // 设置编辑的ref
  setEditorRef = editor => (this.editor = editor)

  submitAvatar = async () => {
    // 发送ajax请求，上传裁切的图片
    //1. 如果获取到裁切后的图片
    let avatar = this.editor.getImageScaledToCanvas().toDataURL()
    // 2.发送ajax请求，修改图片了
    let res = await this.axios.post('my/avatar', {
      avatar: avatar
    })
    let { meta } = res
    if (meta.status === 200) {
      // 修改关闭模态框, 把裁切后的图片传给父组件，让父组件把图片修改
      this.props.closeCrop(avatar)
    }
  }
  render() {
    let { open, avatarFile } = this.props
    return (
      <div>
        <Modal size="small" open={open}>
          <Modal.Header>上传头像</Modal.Header>
          <Modal.Content>
            <AvatarEditor
              ref={this.setEditorRef}
              borderRadius={100}
              image={avatarFile}
              width={200}
              height={200}
              border={50}
              color={[255, 255, 255, 0.6]} // RGBA
              scale={this.state.scale}
              rotate={0}
            />
            <div>
              <span className="avatar-zoom">缩放:</span>
              <input
                value={this.state.scale}
                onChange={this.handleScale}
                name="scale"
                type="range"
                min="1"
                max="2"
                step="0.01"
              />
            </div>
          </Modal.Content>
          <Modal.Actions>
            <Button
              positive
              icon="checkmark"
              labelPosition="right"
              content="确定"
              onClick={this.submitAvatar}
            />
          </Modal.Actions>
        </Modal>
      </div>
    )
  }
}
</code></pre> 
  <p>2.2、Chat.jsx</p> 
  <pre class="has"><code>import React from 'react'
class Chat extends React.Component {
  render() {
    return <div>这是Chat组件</div>
  }
}
export default Chat
</code></pre> 
  <p>2.3、Info.jsx</p> 
  <pre class="has"><code>import React from 'react'
class Info extends React.Component {
  render() {
    return <div>这是Info组件</div>
  }
}
export default Info
</code></pre> 
  <p>2.4、Main.css</p> 
  <pre class="has"><code>.main {
  width: 100%;
  height: 100%;
  position: relative;
}
.search {
  height: 40px;
  line-height: 40px;
  position: absolute;
  width: 100%;
  top: 0;
}

.content {
  width: 100%;
  height: 100%;
  padding-top: 40px;
  /* 给content添加了垂直的滚动条 */
  overflow-y: auto;
}

/* 滚动条样式 */
.content::-webkit-scrollbar {
  width: 3px;
}
.content::-webkit-scrollbar-thumb {
  background-color: #cbdaea;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
  min-height: 2rem;
  background-clip: padding-box;
  border-radius: 5px;
}
.content::-webkit-scrollbar-track {
  background-color: #fff;
}

/* 菜单的样式 */
.home-menu-item {
  border-radius: 31px;
  height: 62px;
  line-height: 62px;
  color: #fff;
}

.ui.grid > .row > .column:nth-child(1) .home-menu-item {
  background-color: #0ac250;
}
.ui.grid > .row > .column:nth-child(2) .home-menu-item {
  background-color: #ff611a;
}
.ui.grid > .row > .column:nth-child(3) .home-menu-item {
  background-color: #f6b906;
}
.ui.grid > .row > .column:nth-child(4) .home-menu-item {
  background-color: #4f99e4;
}
.ui.grid > .row > .column:nth-child(5) .home-menu-item {
  background-color: #fd8701;
}
.ui.grid > .row > .column:nth-child(6) .home-menu-item {
  background-color: #23acf2;
}
.ui.grid > .row > .column:nth-child(7) .home-menu-item {
  background-color: #eb1e03;
}
.ui.grid > .row > .column:nth-child(8) .home-menu-item {
  background-color: #7ccc39;
}

.ui.menu > .row > .column {
  text-align: center;
  margin-top: 10px;
}

/* 好客咨询样式 */
.home-msg {
  margin: 25px 0 15px 0;
  position: relative;
}
.home-msg .ui.unstackable.items > .item.home-msg-img > .image,
.home-msg .ui.unstackable.items > .item.home-msg-img > .image > img {
  width: 50px !important;
  height: 50px !important;
  margin-left: 7px;
  margin-top: 2px;
}
.ui.items > .item > .content > .header {
  display: block;
  height: 25px;
  margin-top: 5px;
  font-weight: 600;
}
.ui.items > .item > .content > .header span:first-child {
  color: orange;
  margin-right: 10px;
  overflow: hidden;
  display: inline-block;
}
.ui.items > .item > .content > .header span:last-child {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: baseline;
  width: 65%;
}
.home-msg .home-msg-more {
  position: absolute;
  right: 5px;
  top: 12px;
}

/* 好客问答样式 */
.home-ask-title {
  height: 40px;
  font-weight: 600;
  font-size: 18px;
  line-height: 40px;
  padding-left: 10px;
  border-bottom: 1px solid #cecece;
}

.home-ask ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.home-ask ul li {
  height: 70px;
  line-height: 70px;
}

.home-ask ul li div {
  height: 35px;
  line-height: 35px;
}

.home-ask ul li div:first-child {
  margin-left: 10px;
  font-size: 18px;
}
.home-ask ul li div:last-child {
  margin-left: 30px;
  position: relative;
}

.home-ask ul li div:last-child div {
  position: absolute;
  font-size: 14px;
  right: 15px;
  top: 0;
}

/* 房屋样式 */
.home-hire-title {
  height: 40px;
  font-weight: 600;
  font-size: 18px;
  line-height: 40px;
  padding-left: 10px;
  border-bottom: 1px solid #cecece;
}

.ui.items > .item > .image {
  margin-left: 10px;
  margin-top: 6px;
}

.ui.items > .item > .content > .description:last-child {
  color: orange;
}
</code></pre> 
  <p>2.5、Main.jsx</p> 
  <pre class="has"><code>import React from 'react'
import 'react-image-gallery/styles/css/image-gallery.css'
import './Main.css'
import {
  Input,
  Grid,
  Icon,
  Item,
  Button,
  Dimmer,
  Loader
} from 'semantic-ui-react'
// 导入轮播图组件
import ImageGallery from 'react-image-gallery'
class Main extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      imgList: [],
      menuList: [],
      infoList: [],
      faqList: [],
      houseList: [],
      loading: true
    }
  }

  /* // 获取轮播图数据
  getImgList = async () => {
    let res = await this.axios.post('homes/swipe')
    let { meta, data } = res
    if (meta.status === 200) {
      this.setState({
        imgList: data.list
      })
    }
  }
  // 获取菜单数据
  getMenuList = async () => {
    let res = await this.axios.post('homes/menu')
    let { meta, data } = res
    if (meta.status === 200) {
      this.setState({
        menuList: data.list
      })
    }
  }
  // 获取咨询数据
  getInfoList = async () => {
    let res = await this.axios.post('homes/info')
    let { meta, data } = res
    if (meta.status === 200) {
      this.setState({
        infoList: data.list
      })
    }
  }
  // 获取咨询数据
  getFaqList = async () => {
    let res = await this.axios.post('homes/faq')
    let { meta, data } = res
    if (meta.status === 200) {
      this.setState({
        faqList: data.list
      })
    }
  }
  // 获取房屋数据
  getHouseList = async () => {
    let res = await this.axios.post('homes/house')
    let { meta, data } = res
    if (meta.status === 200) {
      this.setState({
        houseList: data.list
      })
    }
  } */
  doRequest = (url, dataName) => {
    return this.axios.post(url).then(res => {
      let { meta, data } = res
      if (meta.status === 200) {
        this.setState({
          [dataName]: data.list
        })
      }
    })
  }
  // 页面加载完成，需要发送ajax请求，获取轮播图数据
  async componentDidMount() {
    // Promise.all()
    await Promise.all([
      this.doRequest('homes/swipe', 'imgList'),
      this.doRequest('homes/menu', 'menuList'),
      this.doRequest('homes/info', 'infoList'),
      this.doRequest('homes/faq', 'faqList'),
      this.doRequest('homes/house', 'houseList')
    ])
    this.setState({
      loading: false
    })
  }
  render() {
    return (
      <div className="main">
        <div className="search">
          <Input
            fluid
            icon={{ name: 'search', circular: true, link: true }}
            placeholder="搜房源..."
          />
        </div>
        <div className="content">
          <Dimmer inverted active={this.state.loading} page>
            <Loader>Loading</Loader>
          </Dimmer>
          {/* 轮播图 */}
          <ImageGallery
            items={this.state.imgList}
            showThumbnails={false}
            showFullscreenButton={false}
            showPlayButton={false}
            showBullets={true}
          />
          {/* 菜单部分 */}
          <MenuList data={this.state.menuList} />
          {/* 好客咨询部分 */}
          <InfoList data={this.state.infoList} />
          {/* 好客问答部分 */}
          <FaqList data={this.state.faqList} />
          {/* 房屋信息部分 */}
          <HouseList data={this.state.houseList} />
          {/* <div style={{ height: 1000 }} /> */}
        </div>
      </div>
    )
  }
}

export default Main

// 定义菜单组件，渲染菜单数据
// 参数的解构
function MenuList({ data }) {
  return (
    <Grid className="menu" divided padded>
      <Grid.Row columns={4}>
        {data.map(item => (
          <Grid.Column key={item.id}>
            <div className="home-menu-item">
              <Icon name="home" size="big" />
            </div>
            <div>{item.menu_name}</div>
          </Grid.Column>
        ))}
      </Grid.Row>
    </Grid>
  )
}

// 好客资讯组件
function InfoList({ data }) {
  return (
    <div className="home-msg">
      <Item.Group unstackable>
        <Item className="home-msg-img">
          <Item.Image
            size="tiny"
            src={'http://47.96.21.88:8086/public/zixun.png'}
          />
          <Item.Content verticalAlign="top">
            {data.map(item => (
              <Item.Header key={item.id}>
                <span>限购 ●</span>
                <span>{item.info_title}</span>
              </Item.Header>
            ))}
            <div className="home-msg-more">
              <Icon name="angle right" size="big" />
            </div>
          </Item.Content>
        </Item>
      </Item.Group>
    </div>
  )
}

// 好客问答组件
function FaqList({ data }) {
  return (
    <div className="home-ask">
      <div className="home-ask-title">好客问答</div>
      <ul>
        {data.map(item => (
          <li key={item.question_id}>
            <div>
              <Icon color="green" name="question circle outline" />
              <span>{item.question_name}</span>
            </div>
            <div>
              {item.question_tag.split(',').map(tag => (
                <Button key={tag} basic color="green" size="mini">
                  {tag}
                </Button>
              ))}
              <div>
                {item.atime} ● <Icon name="comment alternate outline" />{' '}
                {item.qnum}
              </div>
            </div>
          </li>
        ))}
      </ul>
    </div>
  )
}

// 房屋组件
function HouseList({ data }) {
  let newHouse = []
  let oldHouse = []
  let hireHouse = []
  data.forEach(item => {
    let temp = (
      <Item key={item.id}>
        <Item.Image src="http://47.96.21.88:8086/public/home.png" />
        <Item.Content>
          <Item.Header>{item.home_name}</Item.Header>
          <Item.Meta>
            <span className="cinema">{item.home_desc}</span>
          </Item.Meta>
          <Item.Description>
            {item.home_tags.split(',').map(tag => (
              <Button key={tag} basic color="green" size="mini">
                {tag}
              </Button>
            ))}
          </Item.Description>
          <Item.Description>{item.home_price}</Item.Description>
        </Item.Content>
      </Item>
    )
    if (item.home_type === 1) {
      newHouse.push(temp)
    } else if (item.home_type === 2) {
      oldHouse.push(temp)
    } else {
      hireHouse.push(temp)
    }
  })
  // console.log(data)
  return (
    <div>
      <div>
        <div className="home-hire-title">最新开盘</div>
        <Item.Group divided unstackable>
          {newHouse}
        </Item.Group>
      </div>
      <div>
        <div className="home-hire-title">二手精选</div>
        <Item.Group divided unstackable>
          {oldHouse}
        </Item.Group>
      </div>
      <div>
        <div className="home-hire-title">组一个家</div>
        <Item.Group divided unstackable>
          {hireHouse}
        </Item.Group>
      </div>
    </div>
  )
}
</code></pre> 
  <p>2.6、My.jsx</p> 
  <pre class="has"><code>import React from 'react'
class My extends React.Component {
  render() {
    return <div>这是My组件</div>
  }
}
export default My
</code></pre> 
  <p>2.7、Chat.jsx</p> 
  <pre class="has"><code>import React from 'react'
class Chat extends React.Component {
  render() {
    return <div>这是Chat组件</div>
  }
}
export default Chat
</code></pre> 
  <p>2.8、Info.jsx</p> 
  <pre class="has"><code>import React from 'react'
class Info extends React.Component {
  render() {
    return <div>这是Info组件</div>
  }
}
export default Info
</code></pre> 
  <p>2.9、Main.css</p> 
  <pre class="has"><code>.main {
  width: 100%;
  height: 100%;
  position: relative;
}
.search {
  height: 40px;
  line-height: 40px;
  position: absolute;
  width: 100%;
  top: 0;
}

.content {
  width: 100%;
  height: 100%;
  padding-top: 40px;
  /* 给content添加了垂直的滚动条 */
  overflow-y: auto;
}

/* 滚动条样式 */
.content::-webkit-scrollbar {
  width: 3px;
}
.content::-webkit-scrollbar-thumb {
  background-color: #cbdaea;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
  min-height: 2rem;
  background-clip: padding-box;
  border-radius: 5px;
}
.content::-webkit-scrollbar-track {
  background-color: #fff;
}

/* 菜单的样式 */
.home-menu-item {
  border-radius: 31px;
  height: 62px;
  line-height: 62px;
  color: #fff;
}

.ui.grid > .row > .column:nth-child(1) .home-menu-item {
  background-color: #0ac250;
}
.ui.grid > .row > .column:nth-child(2) .home-menu-item {
  background-color: #ff611a;
}
.ui.grid > .row > .column:nth-child(3) .home-menu-item {
  background-color: #f6b906;
}
.ui.grid > .row > .column:nth-child(4) .home-menu-item {
  background-color: #4f99e4;
}
.ui.grid > .row > .column:nth-child(5) .home-menu-item {
  background-color: #fd8701;
}
.ui.grid > .row > .column:nth-child(6) .home-menu-item {
  background-color: #23acf2;
}
.ui.grid > .row > .column:nth-child(7) .home-menu-item {
  background-color: #eb1e03;
}
.ui.grid > .row > .column:nth-child(8) .home-menu-item {
  background-color: #7ccc39;
}

.ui.menu > .row > .column {
  text-align: center;
  margin-top: 10px;
}

/* 好客咨询样式 */
.home-msg {
  margin: 25px 0 15px 0;
  position: relative;
}
.home-msg .ui.unstackable.items > .item.home-msg-img > .image,
.home-msg .ui.unstackable.items > .item.home-msg-img > .image > img {
  width: 50px !important;
  height: 50px !important;
  margin-left: 7px;
  margin-top: 2px;
}
.ui.items > .item > .content > .header {
  display: block;
  height: 25px;
  margin-top: 5px;
  font-weight: 600;
}
.ui.items > .item > .content > .header span:first-child {
  color: orange;
  margin-right: 10px;
  overflow: hidden;
  display: inline-block;
}
.ui.items > .item > .content > .header span:last-child {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: baseline;
  width: 65%;
}
.home-msg .home-msg-more {
  position: absolute;
  right: 5px;
  top: 12px;
}

/* 好客问答样式 */
.home-ask-title {
  height: 40px;
  font-weight: 600;
  font-size: 18px;
  line-height: 40px;
  padding-left: 10px;
  border-bottom: 1px solid #cecece;
}

.home-ask ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.home-ask ul li {
  height: 70px;
  line-height: 70px;
}

.home-ask ul li div {
  height: 35px;
  line-height: 35px;
}

.home-ask ul li div:first-child {
  margin-left: 10px;
  font-size: 18px;
}
.home-ask ul li div:last-child {
  margin-left: 30px;
  position: relative;
}

.home-ask ul li div:last-child div {
  position: absolute;
  font-size: 14px;
  right: 15px;
  top: 0;
}

/* 房屋样式 */
.home-hire-title {
  height: 40px;
  font-weight: 600;
  font-size: 18px;
  line-height: 40px;
  padding-left: 10px;
  border-bottom: 1px solid #cecece;
}

.ui.items > .item > .image {
  margin-left: 10px;
  margin-top: 6px;
}

.ui.items > .item > .content > .description:last-child {
  color: orange;
}
</code></pre> 
  <p>2.10、Main.jsx</p> 
  <pre class="has"><code>import React from 'react'
import 'react-image-gallery/styles/css/image-gallery.css'
import './Main.css'
import {
  Input,
  Grid,
  Icon,
  Item,
  Button,
  Dimmer,
  Loader
} from 'semantic-ui-react'
// 导入轮播图组件
import ImageGallery from 'react-image-gallery'
class Main extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      imgList: [],
      menuList: [],
      infoList: [],
      faqList: [],
      houseList: [],
      loading: true
    }
  }

  /* // 获取轮播图数据
  getImgList = async () => {
    let res = await this.axios.post('homes/swipe')
    let { meta, data } = res
    if (meta.status === 200) {
      this.setState({
        imgList: data.list
      })
    }
  }
  // 获取菜单数据
  getMenuList = async () => {
    let res = await this.axios.post('homes/menu')
    let { meta, data } = res
    if (meta.status === 200) {
      this.setState({
        menuList: data.list
      })
    }
  }
  // 获取咨询数据
  getInfoList = async () => {
    let res = await this.axios.post('homes/info')
    let { meta, data } = res
    if (meta.status === 200) {
      this.setState({
        infoList: data.list
      })
    }
  }
  // 获取咨询数据
  getFaqList = async () => {
    let res = await this.axios.post('homes/faq')
    let { meta, data } = res
    if (meta.status === 200) {
      this.setState({
        faqList: data.list
      })
    }
  }
  // 获取房屋数据
  getHouseList = async () => {
    let res = await this.axios.post('homes/house')
    let { meta, data } = res
    if (meta.status === 200) {
      this.setState({
        houseList: data.list
      })
    }
  } */
  doRequest = (url, dataName) => {
    return this.axios.post(url).then(res => {
      let { meta, data } = res
      if (meta.status === 200) {
        this.setState({
          [dataName]: data.list
        })
      }
    })
  }
  // 页面加载完成，需要发送ajax请求，获取轮播图数据
  async componentDidMount() {
    // Promise.all()
    await Promise.all([
      this.doRequest('homes/swipe', 'imgList'),
      this.doRequest('homes/menu', 'menuList'),
      this.doRequest('homes/info', 'infoList'),
      this.doRequest('homes/faq', 'faqList'),
      this.doRequest('homes/house', 'houseList')
    ])
    this.setState({
      loading: false
    })
  }
  render() {
    return (
      <div className="main">
        <div className="search">
          <Input
            fluid
            icon={{ name: 'search', circular: true, link: true }}
            placeholder="搜房源..."
          />
        </div>
        <div className="content">
          <Dimmer inverted active={this.state.loading} page>
            <Loader>Loading</Loader>
          </Dimmer>
          {/* 轮播图 */}
          <ImageGallery
            items={this.state.imgList}
            showThumbnails={false}
            showFullscreenButton={false}
            showPlayButton={false}
            showBullets={true}
          />
          {/* 菜单部分 */}
          <MenuList data={this.state.menuList} />
          {/* 好客咨询部分 */}
          <InfoList data={this.state.infoList} />
          {/* 好客问答部分 */}
          <FaqList data={this.state.faqList} />
          {/* 房屋信息部分 */}
          <HouseList data={this.state.houseList} />
          {/* <div style={{ height: 1000 }} /> */}
        </div>
      </div>
    )
  }
}

export default Main

// 定义菜单组件，渲染菜单数据
// 参数的解构
function MenuList({ data }) {
  return (
    <Grid className="menu" divided padded>
      <Grid.Row columns={4}>
        {data.map(item => (
          <Grid.Column key={item.id}>
            <div className="home-menu-item">
              <Icon name="home" size="big" />
            </div>
            <div>{item.menu_name}</div>
          </Grid.Column>
        ))}
      </Grid.Row>
    </Grid>
  )
}

// 好客资讯组件
function InfoList({ data }) {
  return (
    <div className="home-msg">
      <Item.Group unstackable>
        <Item className="home-msg-img">
          <Item.Image
            size="tiny"
            src={'http://47.96.21.88:8086/public/zixun.png'}
          />
          <Item.Content verticalAlign="top">
            {data.map(item => (
              <Item.Header key={item.id}>
                <span>限购 ●</span>
                <span>{item.info_title}</span>
              </Item.Header>
            ))}
            <div className="home-msg-more">
              <Icon name="angle right" size="big" />
            </div>
          </Item.Content>
        </Item>
      </Item.Group>
    </div>
  )
}

// 好客问答组件
function FaqList({ data }) {
  return (
    <div className="home-ask">
      <div className="home-ask-title">好客问答</div>
      <ul>
        {data.map(item => (
          <li key={item.question_id}>
            <div>
              <Icon color="green" name="question circle outline" />
              <span>{item.question_name}</span>
            </div>
            <div>
              {item.question_tag.split(',').map(tag => (
                <Button key={tag} basic color="green" size="mini">
                  {tag}
                </Button>
              ))}
              <div>
                {item.atime} ● <Icon name="comment alternate outline" />{' '}
                {item.qnum}
              </div>
            </div>
          </li>
        ))}
      </ul>
    </div>
  )
}

// 房屋组件
function HouseList({ data }) {
  let newHouse = []
  let oldHouse = []
  let hireHouse = []
  data.forEach(item => {
    let temp = (
      <Item key={item.id}>
        <Item.Image src="http://47.96.21.88:8086/public/home.png" />
        <Item.Content>
          <Item.Header>{item.home_name}</Item.Header>
          <Item.Meta>
            <span className="cinema">{item.home_desc}</span>
          </Item.Meta>
          <Item.Description>
            {item.home_tags.split(',').map(tag => (
              <Button key={tag} basic color="green" size="mini">
                {tag}
              </Button>
            ))}
          </Item.Description>
          <Item.Description>{item.home_price}</Item.Description>
        </Item.Content>
      </Item>
    )
    if (item.home_type === 1) {
      newHouse.push(temp)
    } else if (item.home_type === 2) {
      oldHouse.push(temp)
    } else {
      hireHouse.push(temp)
    }
  })
  // console.log(data)
  return (
    <div>
      <div>
        <div className="home-hire-title">最新开盘</div>
        <Item.Group divided unstackable>
          {newHouse}
        </Item.Group>
      </div>
      <div>
        <div className="home-hire-title">二手精选</div>
        <Item.Group divided unstackable>
          {oldHouse}
        </Item.Group>
      </div>
      <div>
        <div className="home-hire-title">组一个家</div>
        <Item.Group divided unstackable>
          {hireHouse}
        </Item.Group>
      </div>
    </div>
  )
}
</code></pre> 
  <p>2.11、My.jsx</p> 
  <pre class="has"><code>import React from 'react'
class My extends React.Component {
  render() {
    return <div>这是My组件</div>
  }
}
export default My
</code></pre> 
  <p>3、Home.css</p> 
  <pre class="has"><code>.home {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.home_content {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 60px;
  /* background-color: lightgreen; */
}

.home_menu {
  position: absolute;
  width: 100%;
  height: 60px;
  bottom: 0;
  /* background-color: lightblue; */
}

.home_menu .ui.grid {
  margin: 0;
}

.home_menu .ui.grid > .row {
  padding: 0;
}

.home_menu .column {
  height: 60px;
  border-right: 1px solid #ccc;
  background-color: #eee;
  box-sizing: border-box;
}

.home_menu .column a {
  color: #666;
  width: 100%;
  height: 100%;
  display: block;
  text-align: center;
}

.home_menu .column a.active {
  color: darkorange;
}

.home_menu .column i {
  font-size: 24px;
  height: 40px;
  line-height: 40px;
}

.home_menu .column p {
  height: 20px;
  line-height: 20px;
}
</code></pre> 
  <p>4、Home.jsx</p> 
  <pre class="has"><code>import React from 'react'
import './Home.css'
import { Grid, Icon } from 'semantic-ui-react'
import { NavLink, Switch, Route } from 'react-router-dom'
import Main from './home/main/Main'
import Info from './home/info/Info'
import Chat from './home/chat/Chat'
import My from './home/my/My'
// import Demo from './home/demo/Demo.jsx'
class Home extends React.Component {
  // 点标记语法
  render() {
    return (
      <div className="home">
        <div className="home_content">
          <Switch>
            <Route exact path="/home" component={Main} />
            <Route path="/home/info" component={Info} />
            <Route path="/home/my" component={My} />
            <Route path="/home/chat" component={Chat} />
          </Switch>
        </div>
        <div className="home_menu">
          {/* 网格布局 */}
          <Grid>
            <Grid.Row columns={4}>
              <Grid.Column>
                <NavLink exact to="/home">
                  <Icon name="hospital" />
                  <p>主页</p>
                </NavLink>
              </Grid.Column>
              <Grid.Column>
                <NavLink to="/home/info">
                  <Icon name="paste" />
                  <p>资讯</p>
                </NavLink>
              </Grid.Column>
              <Grid.Column>
                <NavLink to="/home/chat">
                  <Icon name="envelope" />
                  <p>微聊</p>
                </NavLink>
              </Grid.Column>
              <Grid.Column>
                <NavLink to="/home/my">
                  <Icon name="user" />
                  <p>我的</p>
                </NavLink>
              </Grid.Column>
            </Grid.Row>
          </Grid>
        </div>
      </div>
    )
  }
}

export default Home
</code></pre> 
  <p>5、Login.css</p> 
  <pre class="has"><code>.login_container {
  height: 100%;
  background-color: #90ee90;
}

.login_title {
  height: 50px;
  line-height: 50px;
  background-color: #21b97a;
  text-align: center;
  color: #fff;
  font-size: 24px;
}

.login_form {
  margin: 20px 10px;
}
</code></pre> 
  <p>6、Login.jsx</p> 
  <pre class="has"><code>import React from 'react'
// 引入semanticui的组件
import { Form } from 'semantic-ui-react'
// 引入Login.css样式
import './Login.css'

// 引入withRouter实现编程式导航
import { withRouter } from 'react-router-dom'

class Login extends React.Component {
  // 构造函数
  constructor(props) {
    super(props)
    this.state = {
      uname: '',
      pwd: ''
    }
  }

  // 用于处理受控组件
  handleChange = e => {
    let { name, value } = e.target
    this.setState({
      [name]: value
    })
  }

  // 登录功能
  login = async e => {
    e.preventDefault()
    let { history } = this.props
    // 发送请求
    let { uname, pwd } = this.state
    // await必须在async函数中使用，await可以在promise对象前面使用
    // await会暂停aysnc函数的执行，等待promise的结果，才会继续async函数的执行
    let res = await this.axios.post('users/login', {
      uname,
      pwd
    })
    let { meta, data } = res
    if (meta.status === 200) {
      //1. 把token给保存到浏览器本地
      localStorage.setItem('myToken', data.token)
      //2. 把userid存储起来
      localStorage.setItem('uid', data.uid)
      //3. 跳转到home组件
      history.push('/home')
    } else {
      console.log(meta.msg)
    }
  }

  // 组件的渲染方法
  render() {
    return (
      <div className="login_container">
        <div className="login_title">登录</div>
        <div className="login_form">
          {/* Form:表示整个表单组件 */}
          {/* Form.Field：表示表单的一个字段 */}
          <Form action="" onSubmit={this.login}>
            <Form.Field>
              <Form.Input
                size="big"
                icon="user"
                iconPosition="left"
                placeholder="请输入用户名..."
                name="uname"
                autoComplete="off"
                value={this.state.uname}
                onChange={this.handleChange}
                required
              />
            </Form.Field>
            <Form.Field>
              <Form.Input
                size="big"
                icon="lock"
                iconPosition="left"
                placeholder="请输入密码..."
                name="pwd"
                autoComplete="off"
                value={this.state.pwd}
                onChange={this.handleChange}
                required
              />
            </Form.Field>
            <Form.Field>
              <Form.Button fluid positive size="big">
                登录
              </Form.Button>
            </Form.Field>
          </Form>
        </div>
      </div>
    )
  }
}

export default withRouter(Login)
</code></pre> 
  <p>7、App.jsx</p> 
  <pre class="has"><code>import React from 'react'
// 导入路由
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Redirect
} from 'react-router-dom'
// 导入组件
import Home from './components/Home'
import Login from './components/Login'

class App extends React.Component {
  render() {
    return (
      <Router>
        <Switch>
          <Redirect exact path="/" to="/login" />
          <Route path="/login" component={Login} />
          <Route path="/home" component={Home} />
        </Switch>
      </Router>
    )
  }
}
export default App
</code></pre> 
  <p>8、index.css</p> 
  <pre class="has"><code>body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

#root {
  height: 100%;
  width: 100%;
}
</code></pre> 
  <p>9、index.js</p> 
  <pre class="has"><code>import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import 'semantic-ui-css/semantic.min.css'
import App from './App'

// 导入axios对象
import axios from 'axios'
// 把axios对象绑定到了React组件的原型上，将来所有的react组件都能访问到axios对象
React.Component.prototype.axios = axios

// 给axios对象配置默认全局路径
axios.defaults.baseURL = 'http://localhost:9999/'
// axios.defaults.baseURL = 'http://47.96.21.88:8086/'

// 给axios配置一个响应拦截器 直接把data中的数据返回
axios.interceptors.response.use(
  function(response) {
    // 拦截到axios所有的请求，直接返回了响应结果中的data数据
    return response.data
  },
  function(error) {
    return error
  }
)

// 配置请求拦截器，每次请求，除了login，都可以添加token值
axios.interceptors.request.use(
  function(config) {
    if (!window.location.href.endsWith('/login')) {
      config.headers.Authorization = localStorage.getItem('myToken')
    }
    return config
  },
  function(error) {
    return Promise.reject(error)
  }
)

ReactDOM.render(<App />, document.getElementById('root'))
</code></pre> 
  <p> </p> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC和WAP自适应版-->
                    <div id="SOHUCS" sid="1298463270176366592"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js"></script>
                    <!-- 文章页-底部 动态广告位 -->
                    <div class="youdao-fixed-ad" id="detail_ad_bottom"></div>
                </div>
                <div class="col-md-3">
                    <div class="row" id="ad">
                        <!-- 文章页-右侧1 动态广告位 -->
                        <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_1"> </div>
                        </div>
                        <!-- 文章页-右侧2 动态广告位 -->
                        <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_2"></div>
                        </div>
                        <!-- 文章页-右侧3 动态广告位 -->
                        <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_3"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(好客租房移动web项目（3）)</h4>
        <div id="paradigm-article-related">
            <div class="recommend-post mb30">
                <ul class="widget-links">
                    <li><a href="/article/1835514462770130944.htm"
                           title="斤斤计较的婚姻到底有多难？" target="_blank">斤斤计较的婚姻到底有多难？</a>
                        <span class="text-muted">白心之岂必有为</span>

                        <div>很多人私聊我会问到在哪个人群当中斤斤计较的人最多？我都会回答他，一般婚姻出现问题的斤斤计较的人士会非常多，以我多年经验，在婚姻落的一塌糊涂的人当中，斤斤计较的人数占比在20～30%以上，也就是说10个婚姻出现问题的斤斤计较的人有2-3个有多不减。在婚姻出问题当中，有大量的心理不平衡的、尖酸刻薄的怨妇。在婚姻中仅斤斤计较有两种类型：第一种是物质上的，另一种是精神上的。在物质与精神上抠门已经严重的影响</div>
                    </li>
                    <li><a href="/article/1835514464028422144.htm"
                           title="情绪觉察日记第37天" target="_blank">情绪觉察日记第37天</a>
                        <span class="text-muted">露露_e800</span>

                        <div>今天是家庭关系规划师的第二阶最后一天，慧萍老师帮我做了个案，帮我处理了埋在心底好多年的一份恐惧，并给了我深深的力量！这几天出来学习，爸妈过来婆家帮我带小孩，妈妈出于爱帮我收拾东西，并跟我先生和婆婆产生矛盾，妈妈觉得他们没有照顾好我…。今晚回家见到妈妈，我很欣赏她并赞扬她，妈妈说今晚要跟我睡我说好，当我们俩躺在床上准备睡觉的时候，我握着妈妈的手对她说:妈妈这几天辛苦你了，你看你多利害把我们的家收拾得</div>
                    </li>
                    <li><a href="/article/1835514307744460800.htm"
                           title="QQ群采集助手，精准引流必备神器" target="_blank">QQ群采集助手，精准引流必备神器</a>
                        <span class="text-muted">2401_87347160</span>
<a class="tag" taget="_blank" href="/search/%E5%85%B6%E4%BB%96/1.htm">其他</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a>
                        <div>功能概述微信群查找与筛选工具是一款专为微信用户设计的辅助工具，它通过关键词搜索功能，帮助用户快速找到相关的微信群，并提供筛选是否需要验证的群组的功能。主要功能关键词搜索：用户可以输入关键词，工具将自动查找包含该关键词的微信群。筛选功能：工具提供筛选机制，用户可以选择是否只显示需要验证或不需要验证的群组。精准引流：通过上述功能，用户可以更精准地找到目标群组，进行有效的引流操作。3.设备需求该工具可以</div>
                    </li>
                    <li><a href="/article/1835513570171908096.htm"
                           title="底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说" target="_blank">底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说</a>
                        <span class="text-muted">造命者说</span>

                        <div>底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说我叫吴起，生于公元前440年的战国初期，正是群雄并起、天下纷争不断的时候。后人说我是军事家、政治家、改革家，是兵家代表人物。评价我一生历仕鲁、魏、楚三国，通晓兵家、法家、儒家三家思想，在内政军事上都有极高的成就。周安王二十一年（公元前381年），因变法得罪守旧贵族，被人乱箭射死。我出生在卫国一个“家累万金”的富有家庭，从年轻时候起就不甘平凡</div>
                    </li>
                    <li><a href="/article/1835512178023690240.htm"
                           title="谢谢你们，爱你们！" target="_blank">谢谢你们，爱你们！</a>
                        <span class="text-muted">鹿游儿</span>

                        <div>昨天家人去泡温泉，二个孩子也带着去，出发前一晚，匆匆下班，赶回家和孩子一起收拾。饭后，我拿出笔和本子（上次去澳门时做手帐的本子）写下了1\2\3\4\5\6\7\8\9,让后让小壹去思考，带什么出发去旅游呢？她在对应的数字旁边画上了，泳衣、泳圈、肖恩、内衣内裤、tapuy、拖鞋……画完后，就让她自己对着这个本子，将要带的，一一带上，没想到这次带的书还是这本《便便工厂》(晚上姑婆发照片过来，妹妹累得</div>
                    </li>
                    <li><a href="/article/1835511163450912768.htm"
                           title="2021年12月19日，春蕾教育集团团建活动感受——黄晓丹" target="_blank">2021年12月19日，春蕾教育集团团建活动感受——黄晓丹</a>
                        <span class="text-muted">黄错错加油</span>

                        <div>感受:1.从陌生到熟悉的过程。游戏环节让我们在轻松的氛围中得到了锻炼，也增长了不少知识。2.游戏过程中，我们贡献的是个人力量，展现的是团队的力量。它磨合的往往不止是工作的熟悉，更是观念上契合度的贴近。3.这和工作是一样的道理。在各自的岗位上，每个人摆正自己的位置、各司其职充分发挥才能，并团结一致劲往一处使，才能实现最大的成功。新知:1.团队精神需要不断地创新。过去，人们把创新看作是冒风险，现在人们</div>
                    </li>
                    <li><a href="/article/1835509898507546624.htm"
                           title="《策划经理回忆录之二》" target="_blank">《策划经理回忆录之二》</a>
                        <span class="text-muted">路基雅虎</span>

                        <div>话说三年变六年，飘了，飘了……眨眼，2013年5月，老吴回到了他的家乡——油城从新开启他的工作幻想症生涯。很庆幸，这是一家很有追求，同时敢于尝试的，且实力不容低调的新星房企——金源置业(前身泰源置业)更值得庆幸的是第一个盘就是油城十路的标杆之一:金源盛世。2013年5月，到2015年11月，两年的陪伴，迎来了一场大爆发。2000个筹，5万/筹，直接回笼1个亿！！！这……让我开始认真审视这座看似五线</div>
                    </li>
                    <li><a href="/article/1835509897106649088.htm"
                           title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a>
                        <span class="text-muted">igotyback</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div>
                    </li>
                    <li><a href="/article/1835509770287673344.htm"
                           title="swagger访问路径" target="_blank">swagger访问路径</a>
                        <span class="text-muted">igotyback</span>
<a class="tag" taget="_blank" href="/search/swagger/1.htm">swagger</a>
                        <div>Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip</div>
                    </li>
                    <li><a href="/article/1835509138126368768.htm"
                           title="30天风格练习-DAY2" target="_blank">30天风格练习-DAY2</a>
                        <span class="text-muted">黄希夷</span>

                        <div>Day2（重义）在一个周日/一周的最后一天，我来到位于市中心/市区繁华地带的一家购物中心/商场，中心内人很多/熙熙攘攘。我注意到/看见一个独行/孤身一人的年轻女孩/，留着一头引人注目/长过腰际的头发，上身穿一件暗红色/比正红色更深的衣服/穿在身体上的东西。走下扶梯的时候，她摔倒了/跌向地面，在她正要站起来/让身体离开地面的时候，过长/超过一般人长度的头发被支撑身体/躯干的手掌压/按在下面，她赶紧用</div>
                    </li>
                    <li><a href="/article/1835508131032035328.htm"
                           title="ArcGIS栅格计算器常见公式（赋值、0和空值的转换、补充栅格空值）" target="_blank">ArcGIS栅格计算器常见公式（赋值、0和空值的转换、补充栅格空值）</a>
                        <span class="text-muted">研学随笔</span>
<a class="tag" taget="_blank" href="/search/arcgis/1.htm">arcgis</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a>
                        <div>我们在使用ArcGIS时通常经常用到栅格计算器，今天主要给大家介绍我日常中经常用到的几个公式，供大家参考学习。将特定值（-9999）赋值为0，例如-9999.Con("raster"==-9999,0,"raster")2.给空值赋予特定的值（如0）Con(IsNull("raster"),0,"raster")3.将特定的栅格值(如1)赋值为空值，其他保留原值SetNull("raster"==</div>
                    </li>
                    <li><a href="/article/1835508131489214464.htm"
                           title="高级编程--XML+socket练习题" target="_blank">高级编程--XML+socket练习题</a>
                        <span class="text-muted">masa010</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>1.北京华北2114.8万人上海华东2,500万人广州华南1292.68万人成都华西1417万人（1）使用dom4j将信息存入xml中（2）读取信息，并打印控制台（3）添加一个city节点与子节点（4）使用socketTCP协议编写服务端与客户端，客户端输入城市ID，服务器响应相应城市信息（5）使用socketTCP协议编写服务端与客户端，客户端要求用户输入city对象，服务端接收并使用dom4j</div>
                    </li>
                    <li><a href="/article/1835507866878963712.htm"
                           title="开心" target="_blank">开心</a>
                        <span class="text-muted">蒋泳频</span>

                        <div>从无比抗拒来上课到接受，感动，收获～看着波哥成长，晶晶幸福笑容满面。感觉自己做的事情很有意义，很开心！还有3个感召目标就是还有三个有缘人，哈哈。明天感召去明日计划：8：30-11：00小公益11：00-21点上班，感召图片发自App图片发自App图片发自App</div>
                    </li>
                    <li><a href="/article/1835507739820912640.htm"
                           title="2018-07-23-催眠日作业-#不一样的31天#-66小鹿" target="_blank">2018-07-23-催眠日作业-#不一样的31天#-66小鹿</a>
                        <span class="text-muted">小鹿_33</span>

                        <div>预言日：人总是在逃避命运的路上，与之不期而遇。心理学上有个著名的名词，叫做自证预言；经济学上也有一个很著名的定律叫做，墨菲定律；在灵修派上，还有一个很著名的法则，叫做吸引力法则。这3个领域的词，虽然看起来不太一样，但是他们都在告诉人们一个现象：你越担心什么，就越有可能会发生什么。同样的道理，你越想得到什么，就应该要积极地去创造什么。无论是自证预言，墨菲定律还是吸引力法则，对人都有正反2个维度的影响</div>
                    </li>
                    <li><a href="/article/1835507105168191488.htm"
                           title="本周第二次约练" target="_blank">本周第二次约练</a>
                        <span class="text-muted">2cfbdfe28a51</span>

                        <div>中原焦点团队中24初26刘霞2021.12.3约练161次，分享第368天当事人虽然是带着问题来的，但是咨询过程中发现，她是经过自己不断地调整和努力才走到现在的，看到当事人的不容易，找到例外，发现资源，力量感也就随之而来。增强画面感，或者说重温，会给当事人带来更深刻的感受。</div>
                    </li>
                    <li><a href="/article/1835506996258893824.htm"
                           title="回溯 Leetcode 332 重新安排行程" target="_blank">回溯 Leetcode 332 重新安排行程</a>
                        <span class="text-muted">mmaerd</span>
<a class="tag" taget="_blank" href="/search/Leetcode%E5%88%B7%E9%A2%98%E5%AD%A6%E4%B9%A0%E8%AE%B0%E5%BD%95/1.htm">Leetcode刷题学习记录</a><a class="tag" taget="_blank" href="/search/leetcode/1.htm">leetcode</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA%E5%92%8C%E5%8F%91%E5%B1%95/1.htm">职场和发展</a>
                        <div>重新安排行程Leetcode332学习记录自代码随想录给你一份航线列表tickets，其中tickets[i]=[fromi,toi]表示飞机出发和降落的机场地点。请你对该行程进行重新规划排序。所有这些机票都属于一个从JFK（肯尼迪国际机场）出发的先生，所以该行程必须从JFK开始。如果存在多种有效的行程，请你按字典排序返回最小的行程组合。例如，行程[“JFK”,“LGA”]与[“JFK”,“LGB</div>
                    </li>
                    <li><a href="/article/1835506975463534592.htm"
                           title="今日联对0306" target="_blank">今日联对0306</a>
                        <span class="text-muted">诗图佳得</span>

                        <div>自对联：烟销皓月临江浒，水漫金山荡塔裙。一一肖士平2020.3.6.1、试对肖老师联：烟销皓月临江浒，夜笼寒沙梦晚舟。耀哥求正2、试对萧老师联:烟销浩月临江浒，雾散乾坤解汉城。秀霞习作请各位老师校正3、自对联：烟销皓月临江浒，水漫金山荡塔裙。一一肖士平2020.3.6.4、试对肖老师垫场联：烟销皓月临江浒，雾锁寒林缈葉丛。小智求正[抱拳]5、试对肖老师联：烟销皓月临江浒；风卷乱云入峰巅。一一五品6</div>
                    </li>
                    <li><a href="/article/1835506868877881344.htm"
                           title="每日一题——第八十九题" target="_blank">每日一题——第八十九题</a>
                        <span class="text-muted">互联网打工人no1</span>
<a class="tag" taget="_blank" href="/search/C%E8%AF%AD%E8%A8%80%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1%E6%AF%8F%E6%97%A5%E4%B8%80%E7%BB%83/1.htm">C语言程序设计每日一练</a><a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a>
                        <div>题目：在字符串中找到提取数字，并统计一共找到多少整数，a123xxyu23&8889，那么找到的整数为123，23，8889//思想：#include#include#includeintmain(){charstr[]="a123xxyu23&8889";intcount=0;intnum=0;//用于临时存放当前正在构建的整数。boolinNum=false;//用于标记当前是否正在读取一个整</div>
                    </li>
                    <li><a href="/article/1835506616682770432.htm"
                           title="每日一题——第八十四题" target="_blank">每日一题——第八十四题</a>
                        <span class="text-muted">互联网打工人no1</span>
<a class="tag" taget="_blank" href="/search/C%E8%AF%AD%E8%A8%80%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1%E6%AF%8F%E6%97%A5%E4%B8%80%E7%BB%83/1.htm">C语言程序设计每日一练</a><a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a>
                        <div>题目：编写函数1、输入10个职工的姓名和职工号2、按照职工由大到小顺序排列，姓名顺序也随之调整3、要求输入一个职工号，用折半查找法找出该职工的姓名#define_CRT_SECURE_NO_WARNINGS#include#include#defineMAX_EMPLOYEES10typedefstruct{intid;charname[50];}Empolyee;voidinputEmploye</div>
                    </li>
                    <li><a href="/article/1835506466925146112.htm"
                           title="《小满细雨轻湿尘》" target="_blank">《小满细雨轻湿尘》</a>
                        <span class="text-muted">快乐的人ZZM</span>

                        <div>图片发自App《小满细雨轻湿尘》文/快乐的人zzm小满细雨轻湿尘石榴花开落纷纷落红不是无情物坠入泥土育养根2018-5-23</div>
                    </li>
                    <li><a href="/article/1835506237316362240.htm"
                           title="WPF中的ComboBox控件几种数据绑定的方式" target="_blank">WPF中的ComboBox控件几种数据绑定的方式</a>
                        <span class="text-muted">互联网打工人no1</span>
<a class="tag" taget="_blank" href="/search/wpf/1.htm">wpf</a><a class="tag" taget="_blank" href="/search/c%23/1.htm">c#</a>
                        <div>一、用字典给ItemsSource赋值（此绑定用的地方很多，建议熟练掌握）在XMAL中：在CS文件中privatevoidBindData(){DictionarydicItem=newDictionary();dicItem.add(1,"北京");dicItem.add(2,"上海");dicItem.add(3,"广州");cmb_list.ItemsSource=dicItem;cmb_l</div>
                    </li>
                    <li><a href="/article/1835505606245576704.htm"
                           title="Python中os.environ基本介绍及使用方法" target="_blank">Python中os.environ基本介绍及使用方法</a>
                        <span class="text-muted">鹤冲天Pro</span>
<a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>文章目录python中os.environos.environ简介os.environ进行环境变量的增删改查python中os.environ的使用详解1.简介2.key字段详解2.1常见key字段3.os.environ.get()用法4.环境变量的增删改查和判断是否存在4.1新增环境变量4.2更新环境变量4.3获取环境变量4.4删除环境变量4.5判断环境变量是否存在python中os.envi</div>
                    </li>
                    <li><a href="/article/1835504819209596928.htm"
                           title="怎么起诉借钱不还的人？怎样起诉欠款不还的人？" target="_blank">怎么起诉借钱不还的人？怎样起诉欠款不还的人？</a>
                        <span class="text-muted">影子爱学习</span>

                        <div>怎么起诉借钱不还的人？怎样起诉欠款不还的人？如果遇到难以解决的法律问题，我们可以匹配专业律师。例如：婚姻家庭（离婚纠纷）、刑事辩护、合同纠纷、债权债务、房产（继承）纠纷、交通事故、劳动争议、人身损害、公司相关法律事务（法律顾问）等咨询推荐手机/微信:15633770876【全国案件皆可】借钱不还起诉对方需要哪些资料起诉欠钱不还的，一般需要的材料包括以下这些：借据、收据、欠条、付款凭证等证据，以及向</div>
                    </li>
                    <li><a href="/article/1835504817905168384.htm"
                           title="2019-12-22-22:30" target="_blank">2019-12-22-22:30</a>
                        <span class="text-muted">涓涓1016</span>

                        <div>今天是冬至，写下我的日更，是因为这两天的学习真的是能量的满满，让我看到了自己，未来另外一种可能性，也让我看到了这两年这几年的过程中我所接受那些痛苦的来源。一切的根源和痛苦都来自于人生，家庭，而你的原生家庭，你的爸爸和妈妈，是因为你这个灵魂在那一刻选择他们作为你的爸爸和妈妈来的，所以你得接受他，你得接纳他，他就是因为他的存在而给你的学习和成长带来这些痛苦，那其实是你必然要经历的这个过程，当你去接纳的</div>
                    </li>
                    <li><a href="/article/1835504596898902016.htm"
                           title="linux sdl windows.h,Windows下的SDL安装" target="_blank">linux sdl windows.h,Windows下的SDL安装</a>
                        <span class="text-muted">奔跑吧linux内核</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/sdl/1.htm">sdl</a><a class="tag" taget="_blank" href="/search/windows.h/1.htm">windows.h</a>
                        <div>首先你要下载并安装SDL开发包。如果装在C盘下，路径为C:\SDL1.2.5如果在WINDOWS下。你可以按以下步骤：1.打开VC++，点击"Tools",Options2,点击directories选项3.选择"Includefiles"增加一个新的路径。"C:\SDL1.2.5\include"4，现在选择"Libaryfiles“增加"C:\SDL1.2.5\lib"现在你可以开始编写你的第</div>
                    </li>
                    <li><a href="/article/1835504217729626112.htm"
                           title="Python教程：一文了解使用Python处理XPath" target="_blank">Python教程：一文了解使用Python处理XPath</a>
                        <span class="text-muted">旦莫</span>
<a class="tag" taget="_blank" href="/search/Python%E8%BF%9B%E9%98%B6/1.htm">Python进阶</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>目录1.环境准备1.1安装lxml1.2验证安装2.XPath基础2.1什么是XPath？2.2XPath语法2.3示例XML文档3.使用lxml解析XML3.1解析XML文档3.2查看解析结果4.XPath查询4.1基本路径查询4.2使用属性查询4.3查询多个节点5.XPath的高级用法5.1使用逻辑运算符5.2使用函数6.实战案例6.1从网页抓取数据6.1.1安装Requests库6.1.2代</div>
                    </li>
                    <li><a href="/article/1835503932999299072.htm"
                           title="相信相信的力量" target="_blank">相信相信的力量</a>
                        <span class="text-muted">孙丽_cdb3</span>

                        <div>孙丽中级十期坚持分享第345天有一个特别有哲理的故事：有一只老鹰下了蛋，这个蛋，不知怎的就滚到了鸡窝里去了，鸡也下了一窝蛋，然后鸡妈妈把这些蛋全都浮出来了，孵出来之后等小鸡长大一点了，就觉得鹰蛋孵出来的那只小鹰怪模怪样，这些小鸡都嘲笑它，真难看，真笨，丑死了，那只小鹰觉得自己真是谁也不像，真是不好看，后来鸡妈妈也不喜欢他，我怎么生出你这样的孩子来了？真烦人，后来这群小鸡和小鹰一起生活，有一天，老鹰</div>
                    </li>
                    <li><a href="/article/1835503712899002368.htm"
                           title="linux中sdl的使用教程,sdl使用入门" target="_blank">linux中sdl的使用教程,sdl使用入门</a>
                        <span class="text-muted">Melissa Corvinus</span>
<a class="tag" taget="_blank" href="/search/linux%E4%B8%ADsdl%E7%9A%84%E4%BD%BF%E7%94%A8%E6%95%99%E7%A8%8B/1.htm">linux中sdl的使用教程</a>
                        <div>本文通过一个简单示例讲解SDL的基本使用流程。示例中展示一个窗口，窗口里面有个随机颜色快随机移动。当我们鼠标点击关闭按钮时间窗口关闭。基本步骤如下：1.初始化SDL并创建一个窗口。SDL_Init()初始化SDL_CreateWindow()创建窗口2.纹理渲染存储RGB和存储纹理的区别：比如一个从左到右由红色渐变到蓝色的矩形，用存储RGB的话就需要把矩形中每个点的具体颜色值存储下来；而纹理只是一</div>
                    </li>
                    <li><a href="/article/1835502663970680832.htm"
                           title="感赏日志133" target="_blank">感赏日志133</a>
                        <span class="text-muted">马姐读书</span>

                        <div>图片发自App感赏自己今天买个扫地机，以后可以解放出来多看点书，让这个智能小机器人替我工作了。感赏孩子最近进步很大，每天按时上学，认真听课，认真背书，主动认真完成老师布置的作业。感赏自己明白自己容易受到某人的影响，心情不好，每当此刻我就会舒缓，感赏，让自己尽快抽离，想好的一面。感赏儿子今天在我提醒他事情时，告诉我谢谢妈妈对我的提醒我明白了，而不是说我啰嗦，管事情，孩子更懂事了，懂得感恩了。投射父母</div>
                    </li>
                    <li><a href="/article/1835502451877310464.htm"
                           title="基于社交网络算法优化的二维最大熵图像分割" target="_blank">基于社交网络算法优化的二维最大熵图像分割</a>
                        <span class="text-muted">智能算法研学社（Jack旭）</span>
<a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E4%BC%98%E5%8C%96%E7%AE%97%E6%B3%95%E5%BA%94%E7%94%A8/1.htm">智能优化算法应用</a><a class="tag" taget="_blank" href="/search/%E5%9B%BE%E5%83%8F%E5%88%86%E5%89%B2/1.htm">图像分割</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>智能优化算法应用：基于社交网络优化的二维最大熵图像阈值分割-附代码文章目录智能优化算法应用：基于社交网络优化的二维最大熵图像阈值分割-附代码1.前言2.二维最大熵阈值分割原理3.基于社交网络优化的多阈值分割4.算法结果：5.参考文献：6.Matlab代码摘要：本文介绍基于最大熵的图像分割，并且应用社交网络算法进行阈值寻优。1.前言阅读此文章前，请阅读《图像分割：直方图区域划分及信息统计介绍》htt</div>
                    </li>
                                <li><a href="/article/97.htm"
                                       title="TOMCAT在POST方法提交参数丢失问题" target="_blank">TOMCAT在POST方法提交参数丢失问题</a>
                                    <span class="text-muted">357029540</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a>
                                    <div>摘自http://my.oschina.net/luckyi/blog/213209 
昨天在解决一个BUG时发现一个奇怪的问题，一个AJAX提交数据在之前都是木有问题的，突然提交出错影响其他处理流程。 
 
检查时发现页面处理数据较多，起初以为是提交顺序不正确修改后发现不是由此问题引起。于是删除掉一部分数据进行提交，较少数据能够提交成功。 
 
恢复较多数据后跟踪提交FORM DATA ，发现数</div>
                                </li>
                                <li><a href="/article/224.htm"
                                       title="在MyEclipse中增加JSP模板 删除-2008-08-18" target="_blank">在MyEclipse中增加JSP模板 删除-2008-08-18</a>
                                    <span class="text-muted">ljy325</span>
<a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/MyEclipse/1.htm">MyEclipse</a>
                                    <div>在D:\Program Files\MyEclipse 6.0\myeclipse\eclipse\plugins\com.genuitec.eclipse.wizards_6.0.1.zmyeclipse601200710\templates\jsp  目录下找到Jsp.vtl，复制一份，重命名为jsp2.vtl,然后把里面的内容修改为自己想要的格式，保存。 
然后在 D:\Progr</div>
                                </li>
                                <li><a href="/article/351.htm"
                                       title="JavaScript常用验证脚本总结" target="_blank">JavaScript常用验证脚本总结</a>
                                    <span class="text-muted">eksliang</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/javaScript%E8%A1%A8%E5%8D%95%E9%AA%8C%E8%AF%81/1.htm">javaScript表单验证</a>
                                    <div>     转载请出自出处：http://eksliang.iteye.com/blog/2098985   
     下面这些验证脚本，是我在这几年开发中的总结，今天把他放出来，也算是一种分享吧，现在在我的项目中也在用！包括日期验证、比较，非空验证、身份证验证、数值验证、Email验证、电话验证等等...! 
&nb</div>
                                </li>
                                <li><a href="/article/478.htm"
                                       title="微软BI（4）" target="_blank">微软BI（4）</a>
                                    <span class="text-muted">18289753290</span>
<a class="tag" taget="_blank" href="/search/%E5%BE%AE%E8%BD%AFBI+SSIS/1.htm">微软BI SSIS</a>
                                    <div>1） 
Q:查看ssis里面某个控件输出的结果：  
A MessageBox.Show(Dts.Variables["v_lastTimestamp"].Value.ToString()); 
这是我们在包里面定义的变量 
2):在关联目的端表的时候如果是一对多的关系，一定要选择唯一的那个键作为关联字段。 
3) 
Q：ssis里面如果将多个数据源的数据插入目的端一</div>
                                </li>
                                <li><a href="/article/605.htm"
                                       title="定时对大数据量的表进行分表对数据备份" target="_blank">定时对大数据量的表进行分表对数据备份</a>
                                    <span class="text-muted">酷的飞上天空</span>
<a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE%E9%87%8F/1.htm">大数据量</a>
                                    <div>工作中遇到数据库中一个表的数据量比较大，属于日志表。正常情况下是不会有查询操作的，但如果不进行分表数据太多，执行一条简单sql语句要等好几分钟。。 
  
分表工具：linux的shell + mysql自身提供的管理命令 
原理：使用一个和原表数据结构一样的表，替换原表。 
  
linux shell内容如下： 
=======================开始 </div>
                                </li>
                                <li><a href="/article/732.htm"
                                       title="本质的描述与因材施教" target="_blank">本质的描述与因材施教</a>
                                    <span class="text-muted">永夜-极光</span>
<a class="tag" taget="_blank" href="/search/%E6%84%9F%E6%83%B3/1.htm">感想</a><a class="tag" taget="_blank" href="/search/%E9%9A%8F%E7%AC%94/1.htm">随笔</a>
                                    <div>  
       不管碰到什么事,我都下意识的想去探索本质,找寻一个最形象的描述方式。 
       我坚信,世界上对一件事物的描述和解释,肯定有一种最形象,最贴近本质,最容易让人理解 
  
     &</div>
                                </li>
                                <li><a href="/article/859.htm"
                                       title="很迷茫。。。" target="_blank">很迷茫。。。</a>
                                    <span class="text-muted">随便小屋</span>
<a class="tag" taget="_blank" href="/search/%E9%9A%8F%E7%AC%94/1.htm">随笔</a>
                                    <div>小弟我今年研一，也是从事的咱们现在最流行的专业（计算机）。本科三流学校，为了能有个更好的跳板，进入了考研大军，非常有幸能进入研究生的行业（具体学校就不说了，怕把学校的名誉给损了）。 
  
先说一下自身的条件，本科专业软件工程。主要学习就是软件开发，几乎和计算机没有什么区别。因为学校本身三流，也就是让老师带着学生学点东西，然后让学生毕业就行了。对专业性的东西了解的非常浅。就那学的语言来说</div>
                                </li>
                                <li><a href="/article/986.htm"
                                       title="23种设计模式的意图和适用范围" target="_blank">23种设计模式的意图和适用范围</a>
                                    <span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a>
                                    <div>Factory Method  意图 定义一个用于创建对象的接口，让子类决定实例化哪一个类。Factory Method 使一个类的实例化延迟到其子类。  　　适用性 当一个类不知道它所必须创建的对象的类的时候。  　　当一个类希望由它的子类来指定它所创建的对象的时候。  　　当类将创建对象的职责委托给多个帮助子类中的某一个，并且你希望将哪一个帮助子类是代理者这一信息局部化的时候。  
Abstr</div>
                                </li>
                                <li><a href="/article/1113.htm"
                                       title="Java中的synchronized和volatile" target="_blank">Java中的synchronized和volatile</a>
                                    <span class="text-muted">aoyouzi</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/volatile/1.htm">volatile</a><a class="tag" taget="_blank" href="/search/synchronized/1.htm">synchronized</a>
                                    <div>说到Java的线程同步问题肯定要说到两个关键字synchronized和volatile。说到这两个关键字，又要说道JVM的内存模型。JVM里内存分为main memory和working memory。 Main memory是所有线程共享的，working memory则是线程的工作内存，它保存有部分main memory变量的拷贝，对这些变量的更新直接发生在working memo</div>
                                </li>
                                <li><a href="/article/1240.htm"
                                       title="js数组的操作和this关键字" target="_blank">js数组的操作和this关键字</a>
                                    <span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E7%BB%84%E6%93%8D%E4%BD%9C/1.htm">数组操作</a><a class="tag" taget="_blank" href="/search/this%E5%85%B3%E9%94%AE%E5%AD%97/1.htm">this关键字</a>
                                    <div>js数组的操作; 
  
一:数组的创建: 
1、数组的创建

var array = new Array();　//创建一个数组

var array = new Array([size]);　//创建一个数组并指定长度，注意不是上限，是长度

var arrayObj = new Array([element0[, element1[, ...[, elementN]]]</div>
                                </li>
                                <li><a href="/article/1367.htm"
                                       title="别人的阿里面试感悟" target="_blank">别人的阿里面试感悟</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E5%88%86%E4%BA%AB/1.htm">面试分享</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C%E6%84%9F%E6%82%9F/1.htm">工作感悟</a><a class="tag" taget="_blank" href="/search/%E9%98%BF%E9%87%8C%E9%9D%A2%E8%AF%95/1.htm">阿里面试</a>
                                    <div>原文如下：http://greemranqq.iteye.com/blog/2007170 
        一直做企业系统，虽然也自己一直学习技术，但是感觉还是有所欠缺，准备花几个月的时间，把互联网的东西，以及一些基础更加的深入透析，结果这次比较意外，有点突然，下面分享一下感受吧！ 
   &nb</div>
                                </li>
                                <li><a href="/article/1494.htm"
                                       title="淘宝的测试框架Itest" target="_blank">淘宝的测试框架Itest</a>
                                    <span class="text-muted">Bill_chen</span>
<a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a><a class="tag" taget="_blank" href="/search/JUnit/1.htm">JUnit</a>
                                    <div>Itest测试框架是TaoBao测试部门开发的一套单元测试框架，以Junit4为核心， 
集合DbUnit、Unitils等主流测试框架，应该算是比较好用的了。 
近期项目中用了下，有关itest的具体使用如下： 
1.在Maven中引入itest框架： 
<dependency> 
  <groupId>com.taobao.test</groupId&g</div>
                                </li>
                                <li><a href="/article/1621.htm"
                                       title="【Java多线程二】多路条件解决生产者消费者问题" target="_blank">【Java多线程二】多路条件解决生产者消费者问题</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/java%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">java多线程</a>
                                    <div>package com.tom;

import java.util.LinkedList;
import java.util.Queue;
import java.util.concurrent.ThreadLocalRandom;
import java.util.concurrent.locks.Condition;
import java.util.concurrent.loc</div>
                                </li>
                                <li><a href="/article/1748.htm"
                                       title="汉字转拼音pinyin4j" target="_blank">汉字转拼音pinyin4j</a>
                                    <span class="text-muted">白糖_</span>
<a class="tag" taget="_blank" href="/search/pinyin4j/1.htm">pinyin4j</a>
                                    <div> 以前在项目中遇到汉字转拼音的情况，于是在网上找到了pinyin4j这个工具包，非常有用，别的不说了，直接下代码： 
  
  

import java.util.HashSet;
import java.util.Set;

import net.sourceforge.pinyin4j.PinyinHelper;
import net.sourceforge.pinyin</div>
                                </li>
                                <li><a href="/article/1875.htm"
                                       title="org.hibernate.TransactionException: JDBC begin failed解决方案" target="_blank">org.hibernate.TransactionException: JDBC begin failed解决方案</a>
                                    <span class="text-muted">bozch</span>
<a class="tag" taget="_blank" href="/search/ssh/1.htm">ssh</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93%E5%BC%82%E5%B8%B8/1.htm">数据库异常</a><a class="tag" taget="_blank" href="/search/DBCP/1.htm">DBCP</a>
                                    <div>org.hibernate.TransactionException: JDBC begin failed:     at org.hibernate.transaction.JDBCTransaction.begin(JDBCTransaction.java:68)    at org.hibernate.impl.SessionImp</div>
                                </li>
                                <li><a href="/article/2002.htm"
                                       title="java-并查集（Disjoint-set）-将多个集合合并成没有交集的集合" target="_blank">java-并查集（Disjoint-set）-将多个集合合并成没有交集的集合</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>
import java.util.ArrayList;
import java.util.Arrays;
import java.util.HashMap;
import java.util.HashSet;
import java.util.Iterator;
import java.util.List;
import java.util.Map;
import java.ut</div>
                                </li>
                                <li><a href="/article/2129.htm"
                                       title="Java PrintWriter打印乱码" target="_blank">Java PrintWriter打印乱码</a>
                                    <span class="text-muted">chenbowen00</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>一个小程序读写文件，发现PrintWriter输出后文件存在乱码，解决办法主要统一输入输出流编码格式。 
读文件： 
BufferedReader 
从字符输入流中读取文本，缓冲各个字符，从而提供字符、数组和行的高效读取。 
 
可以指定缓冲区的大小，或者可使用默认的大小。大多数情况下，默认值就足够大了。 
 
通常，Reader 所作的每个读取请求都会导致对基础字符或字节流进行相应的读取请求。因</div>
                                </li>
                                <li><a href="/article/2256.htm"
                                       title="[天气与气候]极端气候环境" target="_blank">[天气与气候]极端气候环境</a>
                                    <span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E7%8E%AF%E5%A2%83/1.htm">环境</a>
                                    <div> 
 
      如果空间环境出现异变...外星文明并未出现,而只是用某种气象武器对地球的气候系统进行攻击,并挑唆地球国家间的战争,经过一段时间的准备...最大限度的削弱地球文明的整体力量,然后再进行入侵...... 
 
 
     那么地球上的国家应该做什么样的防备工作呢? 
 
 
 &n</div>
                                </li>
                                <li><a href="/article/2383.htm"
                                       title="oracle order by与union一起使用的用法" target="_blank">oracle order by与union一起使用的用法</a>
                                    <span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/UNION/1.htm">UNION</a><a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/order+by/1.htm">order by</a>
                                    <div>当使用union操作时，排序语句必须放在最后面才正确，如下： 
 
 
只能在union的最后一个子查询中使用order by，而这个order by是针对整个unioning后的结果集的。So： 
如果unoin的几个子查询列名不同，如 
Sql代码  
select supplier_id, supplier_name  
from suppliers  
UNI</div>
                                </li>
                                <li><a href="/article/2510.htm"
                                       title="zeus持久层读写分离单元测试" target="_blank">zeus持久层读写分离单元测试</a>
                                    <span class="text-muted">deng520159</span>
<a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a>
                                    <div>本文是zeus读写分离单元测试,距离分库分表,只有一步了.上代码: 
1.ZeusMasterSlaveTest.java 
package com.dengliang.zeus.webdemo.test;

import java.util.ArrayList;
import java.util.List;

import org.junit.Assert;
import org.j</div>
                                </li>
                                <li><a href="/article/2637.htm"
                                       title="Yii 截取字符串(UTF-8) 使用组件" target="_blank">Yii 截取字符串(UTF-8) 使用组件</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/yii/1.htm">yii</a>
                                    <div>1.将Helper.php放进protected\components文件夹下。 
2.调用方法： 
  Helper::truncate_utf8_string($content,20,false);   //不显示省略号  Helper::truncate_utf8_string($content,20);  //显示省略号  
&n</div>
                                </li>
                                <li><a href="/article/2764.htm"
                                       title="安装memcache及php扩展" target="_blank">安装memcache及php扩展</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a>
                                    <div>安装memcache    tar zxvf memcache-2.2.5.tgz     cd memcache-2.2.5/     /usr/local/php/bin/phpize (?)    ./configure --with-php-confi</div>
                                </li>
                                <li><a href="/article/2891.htm"
                                       title="JsonObject 处理日期" target="_blank">JsonObject 处理日期</a>
                                    <span class="text-muted">feifeilinlin521</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/JsonOjbect/1.htm">JsonOjbect</a><a class="tag" taget="_blank" href="/search/JsonArray/1.htm">JsonArray</a><a class="tag" taget="_blank" href="/search/JSONException/1.htm">JSONException</a>
                                    <div>    写这边文章的初衷就是遇到了json在转换日期格式出现了异常 net.sf.json.JSONException: java.lang.reflect.InvocationTargetException  原因是当你用Map接收数据库返回了java.sql.Date 日期的数据进行json转换出的问题话不多说  直接上代码 
 &n</div>
                                </li>
                                <li><a href="/article/3018.htm"
                                       title="Ehcache（06）——监听器" target="_blank">Ehcache（06）——监听器</a>
                                    <span class="text-muted">234390216</span>
<a class="tag" taget="_blank" href="/search/%E7%9B%91%E5%90%AC%E5%99%A8/1.htm">监听器</a><a class="tag" taget="_blank" href="/search/listener/1.htm">listener</a><a class="tag" taget="_blank" href="/search/ehcache/1.htm">ehcache</a>
                                    <div>监听器 
  
       Ehcache中监听器有两种，监听CacheManager的CacheManagerEventListener和监听Cache的CacheEventListener。在Ehcache中，Listener是通过对应的监听器工厂来生产和发生作用的。下面我们将来介绍一下这两种类型的监听器。 
 </div>
                                </li>
                                <li><a href="/article/3145.htm"
                                       title="activiti 自带设计器中chrome 34版本不能打开bug的解决" target="_blank">activiti 自带设计器中chrome 34版本不能打开bug的解决</a>
                                    <span class="text-muted">jackyrong</span>
<a class="tag" taget="_blank" href="/search/Activiti/1.htm">Activiti</a>
                                    <div>  在acitivti modeler中，如果是chrome 34，则不能打开该设计器，其他浏览器可以， 
经证实为bug，参考 
http://forums.activiti.org/content/activiti-modeler-doesnt-work-chrome-v34 
 
修改为，找到 
oryx.debug.js 
 
在最头部增加 
 

if (!Document.</div>
                                </li>
                                <li><a href="/article/3272.htm"
                                       title="微信收货地址共享接口-终极解决" target="_blank">微信收货地址共享接口-终极解决</a>
                                    <span class="text-muted">laotu5i0</span>
<a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%BC%80%E5%8F%91/1.htm">微信开发</a>
                                    <div>   最近要接入微信的收货地址共享接口，总是不成功，折腾了好几天，实在没办法网上搜到的帖子也是骂声一片。我把我碰到并解决问题的过程分享出来，希望能给微信的接口文档起到一个辅助作用，让后面进来的开发者能快速的接入，而不需要像我们一样苦逼的浪费好几天，甚至一周的青春。各种羞辱、谩骂的话就不说了，本人还算文明。 
   如果你能搜到本贴，说明你已经碰到了各种 ed</div>
                                </li>
                                <li><a href="/article/3399.htm"
                                       title="关于人才" target="_blank">关于人才</a>
                                    <span class="text-muted">netkiller.github.com</span>
<a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E6%8B%9B%E8%81%98/1.htm">招聘</a><a class="tag" taget="_blank" href="/search/netkiller/1.htm">netkiller</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E6%89%8D/1.htm">人才</a>
                                    <div>关于人才 
每个月我都会接到许多猎头的电话，有些猎头比较专业，但绝大多数在我看来与猎头二字还是有很大差距的。 与猎头接触多了，自然也了解了他们的工作，包括操作手法，总体上国内的猎头行业还处在初级阶段。 
总结就是“盲目推荐，以量取胜”。  
目前现状 
许多从事人力资源工作的人，根本不懂得怎么找人才。处在人才找不到企业，企业找不到人才的尴尬处境。 
企业招聘，通常是需要用人的部门提出招聘条件，由人</div>
                                </li>
                                <li><a href="/article/3526.htm"
                                       title="搭建 CentOS 6 服务器 - 目录" target="_blank">搭建 CentOS 6 服务器 - 目录</a>
                                    <span class="text-muted">rensanning</span>
<a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a>
                                    <div>(1) 安装CentOS 
ISO（desktop/minimal）、Cloud（AWS/阿里云）、Virtualization（VMWare、VirtualBox） 
详细内容 
 
 
(2) Linux常用命令 
cd、ls、rm、chmod...... 
详细内容 
 
 
(3) 初始环境设置 
用户管理、网络设置、安全设置...... 
详细内容 
 
 
(4) 常驻服务Daemon</div>
                                </li>
                                <li><a href="/article/3653.htm"
                                       title="【求助】mongoDB无法更新主键" target="_blank">【求助】mongoDB无法更新主键</a>
                                    <span class="text-muted">toknowme</span>
<a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a>
                                    <div>       Query query = new Query();            query.addCriteria(new Criteria("_id").is(o.getId()));                    &n</div>
                                </li>
                                <li><a href="/article/3780.htm"
                                       title="jquery 页面滚动到底部自动加载插件集合" target="_blank">jquery 页面滚动到底部自动加载插件集合</a>
                                    <span class="text-muted">xp9802</span>
<a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a>
                                    <div>很多社交网站都使用无限滚动的翻页技术来提高用户体验，当你页面滑到列表底部时候无需点击就自动加载更多的内容。下面为你推荐 10 个 jQuery 的无限滚动的插件： 
1. jQuery ScrollPagination 
jQuery ScrollPagination plugin 是一个 jQuery 实现的支持无限滚动加载数据的插件。 
2. jQuery Screw 
S</div>
                                </li>
                </ul>
            </div>
        </div>
    </div>

<div>
    <div class="container">
        <div class="indexes">
            <strong>按字母分类：</strong>
            <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a
                href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a
                href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a
                href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a
                href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a
                href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a
                href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a
                href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a
                href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a>
        </div>
    </div>
</div>
<footer id="footer" class="mb30 mt30">
    <div class="container">
        <div class="footBglm">
            <a target="_blank" href="/">首页</a> -
            <a target="_blank" href="/custom/about.htm">关于我们</a> -
            <a target="_blank" href="/search/Java/1.htm">站内搜索</a> -
            <a target="_blank" href="/sitemap.txt">Sitemap</a> -
            <a target="_blank" href="/custom/delete.htm">侵权投诉</a>
        </div>
        <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.
<!--            <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>-->
        </div>
    </div>
</footer>
<!-- 代码高亮 -->
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script>
<link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/>
<script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script>





</body>

</html>