React创建webpack工程，使用axios访问json数据，利用ANT Design Table完成数据展示
一 构造json数据，并利用json-server工具开启本地json数据格式的服务
- 安装json-server工具
npm install json-server -g2. 准备json数据mock.json
{
"users": [
{
"key": 1,
"name": "张三",
"age": 25,
"addres": "武汉市",
"loves": "唱歌",
"phone":"1542145124"
},
{
"key": 1,
"name": "李四",
"age": 25,
"addres": "武汉市",
"loves": "唱歌",
"phone":"1542145124"
}
]
}
3. 开启服务(注意在json文件所在目录下启动)
json-server --watch mock.json --port 3301运行成功，将出现下图所示：
4 .打开浏览器，输入地址localhost:8080/users，即可看到json数据（users为json文件定义的数据名称）
二 axios数据访问，通过ANT Design Table完成数据展示
1 安装ant，axios
npm install ant --save
npm isntall axios --save2 创建基本react项目，可参照官网 https://reactjs.org/tutorial/tutorial.html
3 在src文件夹下创建mine.js,完成代码编写
//引入工具包
import { Table } from 'antd';
import React,{Component} from 'react';
import Axios from 'axios';
class Mine extends Component {
constructor(props){
super(props);
this.state = {
//图表数据存储在data中
data: [],
//图表属性值
columns :[
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
},
{
title: '住址',
dataIndex: 'addres',
key: 'addres',
},
{
title: '兴趣爱好',
dataIndex: 'loves',
key: 'loves',
},
{
title: '联系方式',
dataIndex: 'phone',
key: 'phone',
},
]
}
}
//当组件输出到 DOM 后会执行 componentDidMount()
componentDidMount(){
const _this=this; //先存一下this，以防使用箭头函数this会指向我们不希望它所指向的对象。
Axios.get('http://localhost:3301/users')
.then(function (response) {
_this.setState({
data:response.data,
isLoaded:true
});
})
.catch(function (error) {
console.log(error);
_this.setState({
isLoaded:false,
error:error
})
})
}
render(){
return (
//将数据输出到Table表格中
)}
}
//将该页面内容输出
export default Mine;4 在src下新建App.js,采用ANT layout布局完成Table表格展示
import React,{Component} from 'react';
//引入Mine
import Mine from './mine';
//采用react router完成路由跳转
import {HashRouter,Switch,Route,Link} from 'react-router-dom';
import { Layout, Menu, Icon } from 'antd';
const { Header, Content, Footer, Sider } = Layout;
class App extends Component{
render(){
return
//设定跳转页面，在component进行Mine页面展示
}
}
export default App;5 编写index.html页面
//设定id属性，展示页面
6 编写启动文件main.js
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import App from './app';
import { LocaleProvider } from 'antd';
import zhCN from 'antd/es/locale-provider/zh_CN';
import 'antd/dist/antd.css';
ReactDOM.render(
//添加app内容，在id为‘app’的模块完成展示
7 配置config文件，添加webpack打包，添加webpack开发服务，创建webpack.dev.js(创建webpack工程见见文件附加内容)
const path = require('path');
const htmlPlugin = require('html-webpack-plugin');
const extractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
mode: 'development',
// 入口文件配置
entry: {
main: './src/main.js'
},
// 出口文件配置项
output: {
path: path.resolve(__dirname, '../dist'),
// 打包文件名称
filename: 'bundle.js'
},
// 模块，例如如何解析css，图片转换，压缩
module: {
rules: [
{
test:/\.(jsx|js)$/,
use:{
loader:'babel-loader'
},
exclude:/node_modules/
},
{
test: /\.css$/,
use: extractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
// css分离后这里需要重新配置，下面就注释了
// use:[
// {
// loader: 'style-loader'
// }, {
// loader: 'css-loader'
// }
// ]
},
{
test: /\.less$/,
use: extractTextPlugin.extract({
fallback: "style-loader",
use: [
{
loader: 'css-loader'
},
{
loader: 'less-loader'
}
]
})
},
{
test:/\.(png|jpg|gif|jpeg)/, //是匹配图片文件后缀名称
use:[{
loader:'url-loader', //是指定使用的loader和loader的配置参数
options:{
limit:500, //是把小于500B的文件打成Base64的格式，写入JS
outputpath: 'images/'
}
}]
}
]
},
// 插件，用于生产模板和各项功能
plugins:[
new htmlPlugin({
minify:{ //是对html文件进行压缩
removeAttributeQuotes:true //removeAttrubuteQuotes是却掉属性的双引号。
},
hash:true, //为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS。
template:'./src/index.html' //是要打包的html模版路径和文件名称。
}),
new extractTextPlugin('css/index.css')
],
// 配置webpack开发服务功能
devServer: {
//设置基本目录结构,用于找到程序打包地址
contentBase:path.resolve(__dirname,'../dist'),
//服务器的IP地址，可以使用IP也可以使用localhost
host:'localhost',
//服务端压缩是否开启
compress:true,
//配置服务端口号
port:8089
}
}8 修改package.json,对serve服务启动命令进行设定
{
"name": "02.webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
//设定服务启动命令
"start": "npm run dev",
"dev": "webpack-dev-server --inline --hot --config config/webpack.dev.js",
"pro": "webpack --inline --hot --config config/webpack.pro.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^3.1.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"html-webpack-plugin": "^4.0.0-beta.8",
"less": "^3.9.0",
"less-loader": "^5.0.0",
"style-loader": "^0.23.1",
"webpack": "^4.38.0",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2"
},
"dependencies": {
"antd": "^3.20.7",
"axios": "^0.19.0",
"react": "^16.8.6",
"react-dev": "0.0.1",
"react-devtools": "^3.6.3",
"react-dom": "^16.8.6",
"react-redux": "^7.1.0",
"react-router": "^5.0.1",
"react-router-dom": "^5.0.1",
"react-router-redux": "^4.0.8",
"redux": "^4.0.4",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0"
}
}
9 启动服务
npm run dev启动成功，将会出现如图所示：
注：如果不成功，可能是你没下载所需要的依赖包，请下载后重试
10 打开浏览器，输入：localhost:8089
三 附加内容：创建webpack工程
（首先安装node.js与npm）
1 全局安装webpack资源包
npm install –g webpack webpack-cli webpack-dev-server2 输入命令，创建文件夹
md config, src3 添加webpack.dev.js到config
4 添加index.html,main.js到src
5 初始化npm包工程
npm init -y6 执行打包命令，完成打包
webpack –config config/webpack.dev.js7 配置css解析器
npm install style-loader css-loader –D8 css中的图片处理
npm install --save-dev file-loader url-loader9 less文件的打包与分离
npm install --save-dev less
npm install --save-dev less-loader