前端ios app如何内react react前端启动

文章目录

• react
• react环境准备和创建项目
• 页面动态时间
• react事件
• axios发送ajax

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

• react路由
• react部署nginx

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

react

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

react环境准备和创建项目

1.先准备好环境 安装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文件