热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

4.前端基于react,后端基于.netcore2.0的开发之路(4)前端打包,编译,路由,模型,服务

1.简要的介绍学习react,首先学习的就是javascript,然后ES6,接着是jsx,通常来说如果有javascript的基础,上手非常快,但是真正要搭建一个前端工程化项目,还是有很多坑的搞定上面的东西,那么去了解一下VirtualDOM,可以让你更快的了解react状态管理和路由都是基于dva(dva基于react-router,redux),所以就按照dva的

1.简要的介绍

学习react,首先学习的就是Javascript,然后ES6,接着是jsx,通常来说如果有Javascript的基础,上手非常快,但是真正要搭建一个前端工程化项目,还是有很多坑的

搞定上面的东西,那么去了解一下Virtual DOM,可以让你更快的了解react

状态管理和路由都是基于dva(dva基于react-router,redux),所以就按照dva的命名和规则来玩。建议一边实践一边学习。因为dva对新手非常的友好,建议使用它来入门。

2.心路历程(坑路历程)

第一个坑,基本来说很简单,就是安装node,然后通过npm初始化项目,然后通过dva-cli创建你的第一个项目,对我就是用dva-cli初始化项目后开始搭建的。

第二个坑,我需要放弃dva自带的roadhog插件,使用webpack,这个时候配置webpack就是一个深坑了

第三个坑,这个坑是webpack带来的,简单来说就是各种loader,你会发现,当你填完前面一个坑后,接着会再出现一个坑让你填,对,就是babel!css-loader,less-loader这里就不说了,相对简单。

我们重点说说babel,babel分presets和plugins,如果是react,你需要babel编译es2015,react,然后通常还需要几个plugins包,比如'...'这个语法,就需要特殊的包来编译他。简单来说,你使用webpack命令打包程序时,问题会一个一个浮现出来,然后你需要通过查询官方文档,来一个一个解决他。

第四个坑,服务端渲染的坑,当你需要做这个的时候,你会发现,你能查到的文章,并不能给你解决实际问题(文章太老旧),你需要Github去找别人的解决方案,你需要去官方文档里翻可能存在在角落的官方实例(也可能没有),当你解决这个问题的时候,你会发现,自己用的react-router版本不是最新的,然后你还会发现,最新版本直接重写了!不向下兼容。

然后这个坑会让你去学习如何搭建Node,如何使用node的服务端框架如express,然后node怎么记录session等等问题。

第五个坑,如何在node层拦截请求,并进行处理。

好了心路历程走完,我们可以把所有的知识点串联起来了

dva-cli->dva->react->webpack->babel->node->express

3.来个Todo实战一下,了解下路由,模型,服务

通过dva-cli先建一个项目

4.前端基于react,后端基于.net core2.0的开发之路(4) 前端打包,编译,路由,模型,服务

 

 

 然后

cd learnreact
npm run start

4.前端基于react,后端基于.net core2.0的开发之路(4) 前端打包,编译,路由,模型,服务

 

 启动成功!

我们来看看项目构成

4.前端基于react,后端基于.net core2.0的开发之路(4) 前端打包,编译,路由,模型,服务

入口文件index.js

路由入口router.js

路由文件夹routes

模型文件夹models

服务文件夹services

简单写一下查询数据,就OK了,我们开始

如果你不需要做服务端渲染,那么,webpack,mock之类的就不要自己加了,直接用roadhog,创建的时候都给你配置好了,拿来即用。

 

第一步,创建服务,并引用到模型里

路径:services/home.js

import request from '../utils/request';

export function GetHomeInfo() {
  return request('/api/getHomeInfo');
}

然后把request.js修改下

路径:utils/request

export default function request(url, options) {
  return fetch(url, options)
    .then(checkStatus)
    .then(parseJSON)
    .then((data) => {
      return { data };
    })
    .catch(err => ({ err }));
}

 

第二步,建立模型(store),并注入进去

路径:models/home.js

import { GetHomeInfo } from '../services/home';
export default {

  namespace: 'home',

  state: {
    homeInfo: []
  },

  subscriptions: {
    setup({ dispatch, history }) {  // eslint-disable-line

    },
  },

  effects: {
    *getHomeInfo({ payload }, { call, put }) {  // eslint-disable-line
      const result = yield call(GetHomeInfo, payload);
      const { data } = result;
      yield put({ type: 'setHomeInfo', payload: data.data });
    },
  },

  reducers: {
    setHomeInfo(state, { payload }) {
      return { ...state, homeInfo: payload };
    },
  },

};
然后把模型引用进去:
 

路径:src/index.js

import dva from 'dva';
import './index.css';
import home from '../src/models/home';
// 1. Initialize
const app = dva();

// 2. Plugins
// app.use({});

// 3. Model
// app.model(require('./models/example'));
app.model(home);

// 4. Router
app.router(require('./router'));

// 5. Start
app.start('#root');

 

第三步,创建路由

路径:routes/Home.js

import React, { Component } from 'react';
import { connect } from 'dva';

class Home extends Component {
    componentDidMount() {
        const { dispatch } = this.props;
        dispatch({ type: 'home/getHomeInfo' });
    }
    render() {
        const { homeInfo } = this.props.home;

        return 
{homeInfo.map((item, index) => { return
{item.name}
})}
} } export default connect(({ home }) => ({ home }))(Home);

 

第四部,添加mock拦截请求

路径:.roadhogrc.mock.js

export default {
    'GET /api/getHomeInfo': (req, res) => {
        res.json({
            success: true,
            data: [
                { key: 1, name: 'nick', age: 19 },
                { key: 2, name: 'tony', age: 20 },
                { key: 3, name: 'lili', age: 21 },
                { key: 4, name: 'lilei', age: 22 },
            ],
        });
    },

};

最后跑起来看看:

4.前端基于react,后端基于.net core2.0的开发之路(4) 前端打包,编译,路由,模型,服务

OK,成功啦,这就是一个简单的查询,查询走通了,其他操作就是堆积木了。

数据的走向都清楚了

router->model(effects)->service->api->result->model(reducers)->router.

再说一下里面出现的一些关键字:

class, extends ,export,import ,componentDidMount,render

前4个是ES6的语法,class类,extends基础,export导出和import导入都是模块化的东西,componentDidMount是react的生命周期,render就是渲染了,所有state的变化都会触发render,不管你是this.setState(),还是dispatch修改了模型的里的state.

 

最后,打包

npm run build

dist文件夹里就是打包文件,可以直接部署在iis上面

这篇文章就写这么多吧~.

 


推荐阅读
  • 本文探讨了2019年前端技术的发展趋势,包括工具化、配置化和泛前端化等方面,并提供了详细的学习路线和职业规划建议。 ... [详细]
  • 基于Node.js、Express、MongoDB和Socket.io的实时聊天应用开发
    本文详细介绍了使用Node.js、Express、MongoDB和Socket.io构建的实时聊天应用程序。涵盖项目结构、技术栈选择及关键依赖项的配置。 ... [详细]
  • 本文详细记录了在银河麒麟操作系统和龙芯架构上使用 Qt 5.15.2 进行项目打包时遇到的问题及解决方案,特别关注于 linuxdeployqt 工具的应用。 ... [详细]
  • 深入理解Vue.js:从入门到精通
    本文详细介绍了Vue.js的基础知识、安装方法、核心概念及实战案例,帮助开发者全面掌握这一流行的前端框架。 ... [详细]
  • Webpack中实现环境与代码的有效分离
    本文探讨了如何在Webpack中有效地区分开发与生产环境,并实现代码的合理分离,以提高项目的可维护性和加载性能。 ... [详细]
  • 本文详细介绍了在企业级项目中如何优化 Webpack 配置,特别是在 React 移动端项目中的最佳实践。涵盖资源压缩、代码分割、构建范围缩小、缓存机制以及性能优化等多个方面。 ... [详细]
  • Redux入门指南
    本文介绍Redux的基本概念和工作原理,帮助初学者理解如何使用Redux管理应用程序的状态。Redux是一个用于JavaScript应用的状态管理库,特别适用于React项目。 ... [详细]
  • 本文深入探讨了JavaScript中实现继承的四种常见方法,包括原型链继承、构造函数继承、组合继承和寄生组合继承。对于正在学习或从事Web前端开发的技术人员来说,理解这些继承模式对于提高代码质量和维护性至关重要。 ... [详细]
  • 本文通过探讨React中Context的使用,解决了在多层级组件间传递状态的难题。我们将详细介绍Context的工作原理,并通过实际案例演示其在项目中的具体应用。 ... [详细]
  • 深入理解Tornado模板系统
    本文详细介绍了Tornado框架中模板系统的使用方法。Tornado自带的轻量级、高效且灵活的模板语言位于tornado.template模块,支持嵌入Python代码片段,帮助开发者快速构建动态网页。 ... [详细]
  • 解决PHP与MySQL连接时出现500错误的方法
    本文详细探讨了当使用PHP连接MySQL数据库时遇到500内部服务器错误的多种解决方案,提供了详尽的操作步骤和专业建议。无论是初学者还是有经验的开发者,都能从中受益。 ... [详细]
  • 本文详细介绍了Java编程语言中的核心概念和常见面试问题,包括集合类、数据结构、线程处理、Java虚拟机(JVM)、HTTP协议以及Git操作等方面的内容。通过深入分析每个主题,帮助读者更好地理解Java的关键特性和最佳实践。 ... [详细]
  • 作为一名新手,您可能会在初次尝试使用Eclipse进行Struts开发时遇到一些挑战。本文将为您提供详细的指导和解决方案,帮助您克服常见的配置和操作难题。 ... [详细]
  • PHP 5.5.0rc1 发布:深入解析 Zend OPcache
    2013年5月9日,PHP官方发布了PHP 5.5.0rc1和PHP 5.4.15正式版,这两个版本均支持64位环境。本文将详细介绍Zend OPcache的功能及其在Windows环境下的配置与测试。 ... [详细]
  • 前端开发中的代码注释实践与规范
    本文探讨了前端开发过程中代码注释的重要性,不仅有助于个人清晰地回顾自己的编程思路,还能促进团队成员之间的有效沟通。文章将详细介绍HTML、CSS及JavaScript中的注释使用方法,并提出一套实用的注释规范。 ... [详细]
author-avatar
荧光绿的包包
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有