源码：github:
https://github.com/xiaofengz/react-blog
现在开始在项目加入express~在本地搭个服务器，并为自己写接口。
一.进入项目根目录
首先你需要安装 Node.js 环境 这里不再做介绍,
1.安装Express
npm install express -g
npm install express-generator -g
2.初始化项目
express server(项目名称)
3.执行如下命令：
1.cd server//进入项目根目录
2.npm install //安装依赖
此时整个项目目录结构为
前端启动命令为npm run dev
后端启动命令为 npm start
搭建完项目架构。现在演示一个最简单的接口。
获取用户信息
1.点击页面 个人主页 发送请求
2.通过接口 去本地node服务器请求数据，返回数据。
效果如下：
image
首先，前端部分：
1.Header组件 绑定onClick事件
import UserService from 'SERVICES/userService';
jumpToPersonalPage () {
UserService.fetchUserInfo({
id:"1"
})
}
<li onClick={this.jumpToPersonalPage.bind(this)}>
<a>
<i className="iconfont icon-user" ></i>个人主页
</a>
</li>
2. userServise.js
import xhr from "UTILS/xhr";
import urls from "CONSTS/urls";
class UserService {
constructor() {
this.url = urls["url"];
}
// 请求用户信息demo
fetchUserInfo(data) {
method: "get",
url: "http://127.0.0.1:9001/users/getUserInfo",
params: {
...data
}
});
}
}
export default new UserService();
3. xhr.js (axios请求统一处理)
// 请求集中处理
import axios from "axios";
import {notification} from 'antd';
let axiosInstance = axios.create();
axiosInstance.interceptors.request.use(config => {
// config.headers['Content-Type'] = 'application/json;charset=utf-8';
// config.headers['x-app-code'] = 'LM-ALG'; //这里可能需要
config.withCredentials = true;
return config
}, error => {
return Promise.reject(error)
});
/**
* Requests a URL, returning a promise.
*
* @param {object} [options] The options we want to pass to "axios"
* @return {object} An object containing either "data" or "err"
*/
const xhr = ({method='get', headers, ...options}) => {
//前提是header不存在
if(!headers){
if(method==='get'){
headers={'Content-Type':'application/x-www-form-urlencoded;charset=utf-8'}
}else if(method === 'post'||method==='put'){
headers={'Content-Type':'application/json;charset=utf-8'}
}
}
return axiosInstance({method, headers, ...options})
.then((response) => {
if (response.status >= 200 && response.status < 300) {
return response;
} else {
handleError(response)
}
})
.then((response) => {
const {data} = response;
if (data.errcode === 0) {
return data;
} else {
handleError(response);
}
})
.catch((error) => {
if (error.code) {
notification.error({
message: error.name,
description: error.message,
});
}
if ('stack' in error && 'message' in error) {
notification.error({
message: `请求错误: ${url}`,
description: error.message,
});
}
return error;
});
};
function handleError({data = {}, status}) {
const {errcode} = data;
if (errcode === 3) {
//无权限处理
console.log(new Error('没有权限'))
//...
} else {
const error = new Error(data.errmsg || status + '错误');
error.response = response;
throw error;
}
}
export default xhr;
后端部分：
1.routes>user.js (定义user模型)
function User(){
this.name;
this.city;
this.age;
}
module.exports = User;
2.routes>users.js
var express = require('express');
var router = express.Router();
var URL = require('url'); //请求url模块
var User = require('./user'); //引入user.js
/* GET users listing. */
router.get('/', function(req, res, next) {
res.send('respond with a resource');
});
router.get('/getUserInfo',function(req,res,next){
var user = new User();
var params = URL.parse(req.url,true).query; // 解析参数
if(params.id == '1'){
user.name = "Evan";
user.age = "23";
user.city = "杭州";
}else{
user.name = "SPTING";
user.age = "1";
user.city = "杭州市";
}
var response = {status:1,data:user};
res.send(JSON.stringify(response));
})
module.exports = router;
