-----7/17
這幾天一直在設計後臺管理頁面,心真的是醉醉了。
之前班主任給我們介紹了react,講了一些基本的知識。感覺用來做後臺管理頁面真的挺不錯的,高端奢華還方便。比之前用h5+css3+jQuery+ajax寫後臺真的差別太多了。不多說,來個對比圖。沒有比對,就沒有傷害。
好了。 這react真的不太好講。。 怪不得網上搜索有關eract的問題都很少。。
那就簡單說下好了。
java服務器:(接收 json數據字符串)
其實服務器接收的數據有倆種類型:
第一種就是常見的key-value的方式,但是這樣傳輸比較長的數據會比較慢
第二種就是下面說的以json數據的方式傳輸,效率高,還安全。(以流的方式讀取request中的json數據)
由於要將json字符串轉化爲json對象,需要使用到JSONObject這個類。需要導入以下包:
- commons-logging-1.0.4.jar
- commons-lang-2.3.jar
- commons-collections-3.2.jar
- commons-beanutils-1.7.0.jar
- json-lib-2.2.1-jdk15.jar
- 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 = trueconst 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'
})
}