【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'
  })
}