React创建webpack工程，使用axios访问json数据，利用ANT Design Table完成数据展示

最新推荐文章于 2022-11-25 14:22:10 发布

zhangtxxf

最新推荐文章于 2022-11-25 14:22:10 发布

阅读量849

点赞数

分类专栏： React 文章标签： React

本文链接：https://blog.csdn.net/zhangtxxf/article/details/98320517

版权

React 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一构造json数据，并利用json-server工具开启本地json数据格式的服务

安装json-server工具

npm install json-server -g

2. 准备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 --save

2 创建基本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表格中
         <Table dataSource={this.state.data} columns={this.state.columns} showHeader= 
           {true} pagination={false} size="middle" />)}
}

//将该页面内容输出
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 <HashRouter>
            <Layout style={{ height: '100%' }}>
                 <Header className="header">
                    <div className="logo" style={{ width: '100px' }}/></Header>
                <Layout>
                    <Sider style="height:100%">
                        <Menu theme="dark">
                             //设定Link标签，完成菜单项路由跳转
                            <Menu.Item> <Link to="/Mine">我的</Link></Menu.Item>
                        </Menu>
                    </Sider>
                    <Content>
                        <Switch>
                            //设定跳转页面，在component进行Mine页面展示
                            <Route path="/Mine"  component={Mine}></Route>
                        </Switch>
                    </Content>
                </Layout>
            </Layout>
            </HashRouter>
    }
}
export default App;

5 编写index.html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="wap-font-scale" content="no">
</head>
    //设定id属性，展示页面
    <body id='app'>
</body>
</html>

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’的模块完成展示
    <App />,
    document.getElementById('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-server

2 输入命令，创建文件夹

md config, src

3 添加webpack.dev.js到config

4 添加index.html,main.js到src

5 初始化npm包工程

npm init -y

6 执行打包命令，完成打包

webpack –config config/webpack.dev.js

7 配置css解析器

npm install style-loader css-loader –D

8 css中的图片处理

npm install --save-dev file-loader url-loader

9 less文件的打包与分离

npm install --save-dev less
npm install --save-dev less-loader

zhangtxxf

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
React创建webpack工程，使用axios访问json数据，利用ANT Design Table完成数据展示

一构造json数据，并利用json-server工具开启本地json数据格式的服务安装json-server工具npm install json-server -g 2. 准备json数据mock.json{ "users": [ { "key": 1, "name": "张三", "age": 25, "...
复制链接

扫一扫