前端react的简单使用以及使用nginx部署实现跨域

react

主要是jsx语法实现前端页面的渲染

react环境准备和创建项目

1.先准备好环境 安装node.js教程
node.js下载地址
2.安装vscode直接在电脑管家安装
3.安装脚手架Create React App。
在终端输入npm install -g create-react-app（先进入到放项目代码的目录自定义的）

4. 创建项目
win10要改一下项目目录的权限
如图回车后并且把权限改权限为A(输入A)

在vscode终端输入：
create-react-app 01reactapp(项目名称可以自定义)（创建有点久耐心等候。。。）
启动：npm start

页面动态时间

修改src/index.js如下

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
function Colck(props){
  return (
    <h1 >当前时间是：{props.date.toString()}</h1>
  )
}

function run(){
  ReactDOM.render(<Colck date={new Date()}/>,document.getElementById('root'))
}
setInterval(run,1000)

react事件

import React from 'react';
import ReactDOM from 'react-dom';

class ParentCom extends React.Component{
    constructor(props){
        super(props)
    }
    render(){
        
        return (
            <div >
                <form action="http://www.baidu.com">
                    <div className="child" >
                        <h1>helloworld</h1>
                        <button onClick={this.parentEvent}>提交</button>
                    </div>

                </form>
                
                {/* 使用ES6箭头函数传递多个参数 */}
                <button  onClick={(e)=>{this.parentEvent1('msg:helloworld',e)}}>提交</button>
                {/* //不使用ES6箭头函数传递多个参数的方式 */}
                <button data-name="a"  onClick={function(e){this.parentEvent1('不使用es6,msg:helloworld',e)}.bind(this)}>提交</button>
            
            </div>
        )
    }
    parentEvent=(e)=>{
        console.log(e.preventDefault)
        e.preventDefault()
        //e.preventDefault()
        //return false;
    }
    parentEvent1 = (msg,e)=>{
        console.log(msg)
        console.log(e.target.dataset.name)//a
        
    }
}


ReactDOM.render(
    <ParentCom></ParentCom>,
    document.querySelector("#root")
)

axios发送ajax

axios({
        method:"post",
        url: '/protal/report/show',
        headers: {
            'Content-type': 'application/x-www-form-urlencoded'//表单提交'Content-type': 'application/json'传对象，后台是@ResponseBody
        },
        params: {
          name:e.target.value
        }//params是get----data是post
      }).then(function(data){
           console.log(data.data)
      }.bind(this))

开发时使用http-proxy-middleware代理跨域

1.npm install http-proxy-middleware --save

2.在“src”文件夹下新建“setupProxy.js”文件。

3.在setupProxy.js添加；不要省略pathRewrite:
const {createProxyMiddleware} = require(‘http-proxy-middleware’);
module.exports = function(app) {
app.use(createProxyMiddleware(’/api’,
{
target: ‘http://localhost:8083/’,
changeOrigin: true,
pathRewrite: {
‘^/api’: ‘’
}
}));
};
如图：

react路由

先安装组件
在终端输入：npm install react-router-dom --save
ReactRouter三大组件：
Router：所有路由组件的根组件（底层组件），包裹路由规则的最外层容器。
属性：basename->设置跟此路由根路径，router可以在1个组件中写多个。
Route:路由规则匹配组件，显示当前规则对应的组件
Link:路由跳转的组件
注意：如果要精确匹配，那么可以在route上设置exact属性。

import React from 'react';
import ReactDOM, { render } from 'react-dom';
//hash模式
//import {HashRouter as Router,Link,Route} from 'react-router-dom'

//history模式/BrowserRouter 后端匹配使用
import {BrowserRouter as Router,Link,Route} from 'react-router-dom'

function Home(){
    return (
        <div>
            <h1>admini首页</h1>
        </div>
    )
}

function Me(){
    return (
        <div>
            <h1>admin个人中心</h1>
        </div>
    )
}

function Product(){
    return (
        <div>
            <h1>admin产品页面</h1>
        </div>
    )
}

class App extends React.Component{
    
    render(){
        return (
            <div id="app">
                {/* <div>所有页面普通内容</div> */}
                <Router>
                    <Route path="/" exact component={()=>(<div>首页</div>)}></Route>
                    <Route path="/me" component={()=>(<div>me</div>)}></Route>
                    <Route path="/product" component={()=>(<div>product</div>)}></Route>
                </Router>

                <Router>
                    {/* <div className="nav">
                        <Link to="/">Home</Link>
                        <Link to="/product">Product</Link>
                        <Link to="/me">个人中心</Link>
                    </div> */}
                    <Route path="/admin/" exact component={Home}></Route>
                    <Route path="/admin/product" component={Product}></Route>
                    <Route path="/admin/me" exact component={Me}></Route>
                </Router>
            </div>
        )
    }
}
 ReactDOM.render(<App />,document.getElementById("root"))

react部署nginx

在项目根目录下执行
npm run build（项目根目录下会多出build文件夹）

把根目录下的build上传linux，使用nginx代理

找到nginx的nginx.conf文件（在nginx/conf里）

  location / {
          root /build;#代理的文件夹
        }

nginx代替http-proxy-middleware代理跨域

部署时http-proxy-middleware代理跨域会失效

          location  /api/  {
             proxy_pass http://47.103.218.192:8088/;#跨域的路径
         }

nginx.conf文件