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

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先建一个项目

然后

cd learnreact
npm run start

启动成功!

我们来看看项目构成

入口文件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 <div>
            {homeInfo.map((item, index) => {
                return <div key={item.key}>
                    {item.name}
                </div>
            })}
        </div>
    }
}

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 },
            ],
        });
    },

};

最后跑起来看看:

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上面

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

原文地址:https://www.cnblogs.com/Ambre/p/7991484.html

时间: 2024-10-11 01:54:21

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

前端基于react,后端基于.net core2.0的开发之路(1) 介绍

文章提纲目录 1.前端基于react,后端基于.net core2.0的开发之路(1) 介绍 2.前端基于react,后端基于.net core2.0的开发之路(2) 开发环境的配置,注意事项,后端数据初始化 3.前端基于react,后端基于.net core2.0的开发之路(3) 各个技术栈配置和说明 4.前端基于react,后端基于.net core2.0的开发之路(4) 前端路由,模型,服务的说明 5.前端基于react,后端基于.net core2.0的开发之路(5) 配置node层,s

前端基于react,后端基于.net core2.0的开发之路(2) 开发环境的配置,注意事项,后端数据初始化

前端环境配置 项目介绍文章:前端基于react,后端基于.net core2.0的开发之路(1) 介绍 1.VSCode安装 下载地址:https://code.visualstudio.com/Download 2.node下载 下载地址:https://nodejs.org/en/ V8.9.1版本下载 3.cnpm安装 在安装完node后,npm默认就安装了,因为某种原因,npm下载组件包的速度太慢了,所以需要安装cnpm 安装命令 npm install -g cnpm --regist

基于React服务器端渲染的博客系统

系统目录及源码由此进入 目录 1. 开发前准备 1.1 技术选型1.2 整体设计1.3 构建开发 2. 技术点 2.1 react2.2 redux, react-router2.3 server-render 3. 总结 正文 1. 开发前准备 1. 1 技术选型 对于个人的博客系统而言,服务器计算能力往往不是需要考虑,而其中的 I/O 操作是比较复杂的,同理对前端的交互要求也是较高的,所以这次主要还是围绕 Node系 ,React系 框架进行开发.对于 2016 年后的互联网产品, Reac

基于react的nextjs服务端渲染框架学习使用

开发文档 https://nextjs.frontendx.cn/ 源码 该博客的示例代码我已经上传到github,欢迎star或者fork react-next-hello Next介绍 Next.js是一个基于React的一个服务端渲染简约框架.它使用React语法,可以很好的实现代码的模块化,有利于代码的开发和维护. Next.js带来了很多好的特性: 默认服务端渲染模式,以文件系统为基础的客户端路由 代码自动分隔使页面加载更快 (以页面为基础的)简洁的客户端路由 以webpack的热替换

React-Native(三):React Native是基于React设计的

React Native是基于React js设计的. 参考:<React 入门实例教程> React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了. 由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单.所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具. 这个项目

基于React Native的Material Design风格的组件库 MRN

基于React Native的Material Design风格的组件库.(为了平台统一体验,目前只打算支持安卓) 官方网站 http://mrn.js.org/ Github https://github.com/binggg/mrn 示例应用在线演示 https://appetize.io/app/j48zj9r83cetpd1mhg4g8buc4w 示例应用下载 https://github.com/binggg/MaterialReactNative/blob/master/androi

Centos7.2下Nginx配置SSL支持https访问(站点是基于.Net Core2.0开发的WebApi)

准备工作 1.基于nginx部署好的站点(本文站点是基于.Net Core2.0开发的WebApi,有兴趣的同学可以跳http://www.cnblogs.com/GreedyL/p/7422796.html) 2.证书颁发机构(CA)颁发的有效证书,其中我们需要两个文件,一个是 .key文件(私钥),另一个是 .crt或.pem文件(公钥) 核心功能 ? 通过指定由受信任的证书颁发机构(CA)颁发的有效证书,将服务器配置为侦听端口上的HTTPS流量. ? 通过配置nginx.conf文件来加强

基于React的Tab组件

基于React的Tab组件 Tabs renderHeader = () => { return React.Children.map( this.props.children , (element,index) => { const activeStyle = element.key === this.state.activeKey ? "activeTitle" : null; return ( <span onClick={() => { this.set

放弃antd table,基于React手写一个虚拟滚动的表格

缘起 标题有点夸张,并不是完全放弃antd-table,毕竟在react的生态圈里,对国人来说,比较好用的PC端组件库,也就antd了.即便经历了2018年圣诞彩蛋事件,antd的使用者也不仅不减,反而有所上升. 客观地说,antd是开源的,UI设计得比较美观(甩出其他组件库一条街),而且是蚂蚁金服的体验技术部(一堆p7,p8,p9,基本都是大牛级的)在持续地开发维护,质量可以信任. 不过,antd虽好,但一些组件在某一些场景下,是很不适用的.例如,以表格形式无限滚动地展示大量数据(1w+)时,