【SQshop 搭建的第四天】 node + react Ant Design的後臺管理頁面的應用 & java 服務器接收 json數據字符串

-----7/17

          這幾天一直在設計後臺管理頁面,心真的是醉醉了。

          之前班主任給我們介紹了react,講了一些基本的知識。感覺用來做後臺管理頁面真的挺不錯的,高端奢華還方便。比之前用h5+css3+jQuery+ajax寫後臺真的差別太多了。不多說,來個對比圖。沒有比對,就沒有傷害。

 

好了。 這react真的不太好講。。    怪不得網上搜索有關eract的問題都很少。。

那就簡單說下好了。

 

java服務器:(接收 json數據字符串)

 

其實服務器接收的數據有倆種類型:

第一種就是常見的key-value的方式,但是這樣傳輸比較長的數據會比較慢

第二種就是下面說的以json數據的方式傳輸,效率高,還安全。(以流的方式讀取request中的json數據)

 

   由於要將json字符串轉化爲json對象,需要使用到JSONObject這個類。需要導入以下包:

  1. commons-logging-1.0.4.jar  
  2. commons-lang-2.3.jar  
  3. commons-collections-3.2.jar  
  4. commons-beanutils-1.7.0.jar  
  5. json-lib-2.2.1-jdk15.jar  
  6. ezmorph-1.0.4.jar  

 

接着我們就開始寫後臺了service的代碼就不寫了 

ProductController.java

@RequestMapping("/product/addProduct")
@ResponseBody
public UserResult addProduct(HttpServletRequest request){
   BufferedReader reader = null;
   Product product = new Product();
   try {
      reader = request.getReader();
      String input =reader.readLine();


      JSONObject jsonObject = JSONObject.fromObject(input);
      System.out.println(jsonObject);
      String productId = jsonObject.getString("productId");
      String productName = jsonObject.getString("productName");
      String productPrice = jsonObject.getString("productPrice");
      String productNumber = jsonObject.getString("productNumber");
      String productAddress = jsonObject.getString("productAddress");

      System.out.println(productName);

      product.setProductid(Integer.valueOf(productId));
      product.setName(productName);
      product.setPrice(Float.valueOf(productPrice));
      product.setNumber(Integer.valueOf(productNumber));
      product.setPlace(productAddress);

   } catch (IOException e) {
      UserResult.error();
      e.printStackTrace();
   }

   productService.addProduct(product);
   return UserResult.success();
}

 

 

前端Ant-Design部分:

 

一.mock代理入坑

    之前,與服務器的交互都是與本地.roadhogrc.mock.js的模擬數據進行交互。

    如果,寫其他服務器的地址會不讓訪問。那麼,就需要對.roadhogrc.mock.js進行修改

 

// 是否禁用代理
// const noProxy = process.env.NO_PROXY === 'ture';
const noProxy = true

const apiurl="http://localhost:8080";

.

.

.

.

.

export default (noProxy ? {
  'GET /api/(.*)' :apiurl,
  'POST /api/(.*)' :apiurl,
} : delay(proxy, 1000));

這樣設置後就可以發送請求嘍。至於上線發佈之後會遇到的問題,就以後再說把。(需要Nginx反向代理)

至於的怎麼請求就不多說了。畢竟,現在主要學的是服務器。關於nodejs + react ,先把這個項目實現了,接着寫博客把。

dispath的方式請求

ListUser.js

  // <!--首次加載獲取-->
  componentDidMount() {
        this.props.dispatch({
            type: 'users/listUser'
        })

        this.setState({
          users: this.props.users
        })
    }

uers.js (models目錄下)

import {fetchListUserApi} from '../services/userApi'
import {message} from 'antd'
import { routerRedux } from 'dva/router'

export default {
    namespace: 'users',
    state: {
        users:[]
    },
    effects: {

        *listUser(_, {call, put}) {
            const resp = yield call(fetchListUserApi)
            console.log(resp);
            yield put({
                type: 'setUsers',
                payload: resp
            })
        }
    },
    reducers: {
        setUsers(state, action) {
            return {
                ...state,
                users: action.payload
            }
        }

    }
}
 

userApi.js(services目錄下)

import request from '../utils/request'

export async function fetchListUserApi(){
  return request('/api/user/listUser',{
    method:'POST'
  })
}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章