热门标签 | 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上面

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

 


推荐阅读
  • 基于Node.js、Express、MongoDB和Socket.io的实时聊天应用开发
    本文详细介绍了使用Node.js、Express、MongoDB和Socket.io构建的实时聊天应用程序。涵盖项目结构、技术栈选择及关键依赖项的配置。 ... [详细]
  • 本文探讨了2019年前端技术的发展趋势,包括工具化、配置化和泛前端化等方面,并提供了详细的学习路线和职业规划建议。 ... [详细]
  • 本文介绍如何使用阿里云的fastjson库解析包含时间戳、IP地址和参数等信息的JSON格式文本,并进行数据处理和保存。 ... [详细]
  • 本文介绍了多个关于JavaScript的书籍资源、实用工具和编程实例,涵盖从入门到进阶的各个阶段,帮助读者全面提升JavaScript编程能力。 ... [详细]
  • 深入理解Vue.js:从入门到精通
    本文详细介绍了Vue.js的基础知识、安装方法、核心概念及实战案例,帮助开发者全面掌握这一流行的前端框架。 ... [详细]
  • 深入解析ES6至ES8的新特性与应用
    本文详细介绍了自2015年发布的ECMAScript 6.0(简称ES6)以来,JavaScript语言的多项重要更新,旨在帮助开发者更好地理解和利用这些新特性进行复杂应用的开发。 ... [详细]
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • 本文介绍了如何使用JQuery实现省市二级联动和表单验证。首先,通过change事件监听用户选择的省份,并动态加载对应的城市列表。其次,详细讲解了使用Validation插件进行表单验证的方法,包括内置规则、自定义规则及实时验证功能。 ... [详细]
  • 本文探讨了领域驱动设计(DDD)的核心概念、应用场景及其实现方式,详细介绍了其在企业级软件开发中的优势和挑战。通过对比事务脚本与领域模型,展示了DDD如何提升系统的可维护性和扩展性。 ... [详细]
  • 优化局域网SSH连接延迟问题的解决方案
    本文介绍了解决局域网内SSH连接到服务器时出现长时间等待问题的方法。通过调整配置和优化网络设置,可以显著缩短SSH连接的时间。 ... [详细]
  • 本文详细介绍了网络存储技术的基本概念、分类及应用场景。通过分析直连式存储(DAS)、网络附加存储(NAS)和存储区域网络(SAN)的特点,帮助读者理解不同存储方式的优势与局限性。 ... [详细]
  • 当 WebLogic 连接的数据源数据库密码发生更改时,需要在域目录的 config 文件夹下的 jdbc 配置文件中更新相应的密码。本文将详细介绍如何安全地修改和验证这些配置文件中的加密密码。 ... [详细]
  • Symfony是一个功能强大的PHP框架,以其依赖注入(DI)特性著称。许多流行的PHP框架如Drupal和Laravel的核心组件都基于Symfony构建。本文将详细介绍Symfony的安装方法及其基本使用。 ... [详细]
  • ssm框架整合及工程分层1.先创建一个新的project1.1配置pom.xml ... [详细]
  • 本文将详细介绍通过CAS(Central Authentication Service)实现单点登录的原理和步骤。CAS由耶鲁大学开发,旨在为多应用系统提供统一的身份认证服务。文中不仅涵盖了CAS的基本架构,还提供了具体的配置实例,帮助读者更好地理解和应用这一技术。 ... [详细]
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社区 版权所有