Introduccion
Después de un período de aprendizaje de React, el desarrollo de React y Vue es realmente muy diferente, pero ambos son marcos MVVM, por lo que no es muy difícil comenzar, esta vez usando React + Redux para desarrollar un pequeño proyecto de pronóstico del tiempo. Dirección de origen: github.com/Beichenlove ...
"Soy un viejo programador que se ha dedicado al desarrollo front-end web durante 6 años (mi WeChat: web-xxq). A principios de este año, pasé un mes terminando un conjunto completo de cursos de capacitación front-end web que son más adecuados para el autoaprendizaje en 2019 ( Video + código fuente + notas + combate de proyecto), desde el HTML más básico + CSS + JS hasta HTML5 móvil y se organizan varios marcos y nuevas tecnologías, empaquetadas para cada socio front-end, aquí está el lugar de reunión de los estudiantes front-end , Bienvenido a principiantes y amigos avanzados (todos los tutoriales front-end siguen mi número público de WeChat: círculo de aprendizaje front-end web y siguen la respuesta "2020" para recibir).
Pila de tecnología
Frente
- Reaccionar: marco MVVM para construir interfaces
- Redux: gestión de estado centralizada de React, comunicación conveniente y rápida entre componentes
- Redux-thunk: middleware de acción asincrónica redux comúnmente utilizado para manejar operaciones asincrónicas como solicitudes de interfaz
- componentes con estilo: escriba estilos CSS con ideas con componentes
- React-Redux : el componente lee datos de Redux y distribuye acciones a la tienda para actualizar los datos
- antd : biblioteca de interfaz de usuario basada en React
- inmutable : una estructura de datos persistente que evita que los objetos de estado se asignen incorrectamente
Adquisición de datos
- axios : implementar solicitud de interfaz de datos (simular datos con archivo json local)
Vista previa del proyecto
Inicialización de página
Elige una ciudad popular
Busca otras ciudades
Implementar la función
Obtener estado local en tiempo real
Al abrir la página por primera vez, de acuerdo con la visualización del clima de la ciudad, necesitamos obtener un estado en tiempo real, aquí uso la API JS de Gaode Map Web. Primero, introducimos los scripts de índice en la carpeta pública para agregar etiquetas de script de entrada JS API en la página;
// key值需在官网上申请
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=申请的key值">
</script> 复制代码Utilizamos la interfaz oficial para lograr el posicionamiento en tiempo real, ya que la información meteorológica debe mostrarse para el primer renderizado, así que use la función de ciclo de vida componenDidMount para realizar la solicitud:
componentDidMount()
{ // 防止作用域被修改
let _self = this;
if(_self.props.init){
//eslint-disable-next-line
AMap.plugin('AMap.CitySearch', function () {
//eslint-disable-next-line
var citySearch = new AMap.CitySearch()
citySearch.getLocalCity(function (status, result) {
if (status === 'complete' && result.info === 'OK') {
// 查询成功，result即为当前所在城市信息
_self.props.getCity(result.city)
_self.initWeather(_self.props.city)
_self.props.getInit()
}
})
})
}
else{
_self.initWeather(_self.props.city)
}
}复制代码
Aquí tenemos que hacer un juicio: si la selección de ciudad se cambia desde otra página, volver a esta página volverá a cargar y modificar la ciudad cambiada, por lo que usamos un identificador para juzgar si es la primera vez que se carga.
Además, observamos que hay un pozo, Reaccionar se le pedirá que encontrar AMapejemplos de este problema. Usa los comentarios aquí
// eslint-disable-next-line
Escriba en la primera línea de cada clase AMap, y su eslint ignora esta línea de código y no informa un error
Obtener información del clima de la ciudad
Al igual que para obtener la información de ubicación, sigo utilizando la API proporcionada por el mapa de Gaode. Aquí adjunto el sitio web oficial, lbs.amap.com/api/javascr ...
echarts visualización de datos
Para mostrar la tendencia de cambio de temperatura, utilicé un gráfico de líneas echarts para visualizar datos
Código de implementación
initEchart(array)
{
let domChart = this.dom;
//eslint-disable-next-line
var myChart = echarts.init(domChart);
let option = null;
option = {
xAxis: {
show: false,
type: "category",
axisLine: {
lineStyle: {
color: "#fff"
}
},
grid:{bottom: "20"}
},
yAxis: {
show: false
},
series: [
{
data: array,
type: "line"
}
]
}
myChart.setOption(option, true);
}
复制代码
Use react-redux para operar Redux
React utiliza oficialmente react-redux para vincular a Redux, colocando al proveedor en la capa superior, de modo que la tienda pueda ser recibida por los siguientes componentes
<Provider store={store}>
<Router>
<div>
<Route exact path='/' component={MainPage}></Route>
<Route exact path='/search' component={SearchCity}></Route>
</div>
</Router>
</Provider>复制代码En el componente, usamos connect () para obtener el estado o la acción de despacho en la tienda. Usando sus características, podemos cambiar fácil y convenientemente la ciudad, la búsqueda histórica y determinar y cambiar el identificador y otros datos.
Uso de middleware thunk
La configuración predeterminada de redux es que el despacho solo puede aceptar un parámetro de objeto y no se permiten funciones ni promesas. El middleware Thunk puede resolver este problema. El nivel de acción se resuelve y el componente no tiene ningún efecto. Aquí coopero con react-redux para implementar una operación de actualización de datos redux.
Segunda página de búsqueda de ciudades
Implementé una función para buscar en la ciudad y consultar el clima en la página secundaria. Aquí uso un archivo json local y uso axios para cumplir con la solicitud
axios.get('/city/citys.json').then((res) =>
{ var tem = []
tem = res.data.citys.filter((item) => item.citysName.includes(value))
if(tem = [])
{
unfound = 'Not Found'
}
callback(tem.slice(0, 10))
loading = false
})复制代码
Utilizo un método de filtro para realizar un filtrado condicional y devolver los datos que contienen el valor de entrada. Si está vacío, se devuelve un mensaje. Uso el componente oficial de antd para el cuadro de búsqueda, que se ha encapsulado para nosotros.
<Select
showSearch
value={this.state.value}
placeholder='请输入城市名，快速查询天气信息'
defaultActiveFirstOption='flase'
showArrow='true'
filterOption={false}
onSearch={this.handleSearch}
onChange={this.handleChange}
onBlur={this.handleBlur}
notFoundContent={null}
style={{ width: '75%' }}
bordered='false'
loading={loading}
notFoundContent={unfound} >
{this.state.data.map(d =>
<Option key={d.id}>{d.citysName}</Option>);}
</Select>复制代码
Uso el método handleSearch de la función de devolución de llamada cuando el valor del cuadro de texto del componente cambia para implementar la solicitud de interfaz y filtrar el contenido que cumple con los criterios de búsqueda para su visualización. Y use la función de devolución de llamada handleChange de las opciones seleccionadas (barra de visualización) para hacer un cambio en la ciudad del estado en redux, y al mismo tiempo saltar a la página de inicio, codifique:
handleSearch = value => {
if (value) {
loading = true
fetch(value, data => this.setState({ data }));
}
else {
this.setState({ data: [] });
}
};
handleBlur = () => unfound = null;
handleChange = value => {
this.state.data.map((item) => {
if (item.id == value) {
let city = item.citysName.split(',')[0]
this.props.changeCity(city)
this.props.history.push('/')
this.setState({ data: [] });
}
})
};复制代码Conclusión
Aunque este proyecto es solo un pequeño proyecto simple, todavía tiene algo de ayuda para sus consejos de habilidad. En el proceso de desarrollo, también encontré algunos problemas. Como dice el refrán, el proceso de resolver problemas es el proceso de mejorar mi propia habilidad. Después de todo, el camino hacia el aprendizaje es largo y el camino es largo.
Para obtener más detalles del proyecto, puede visitar mi Github , y puede dejar un mensaje e intercambiar
