什么样运用react做一个大约的后台管理种类,ZO

作者: 前端知识  发布:2019-12-19
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
import RouterComponent from "./router/router";

ReactDOM.render(<RouterComponent />, document.getElementById('root'));
registerServiceWorker();

返回目录

之后我们还需要配置我们的index.js页面的代码它是为了更好的配置路由使路由不报错

思考

  • 这章主要写了路由和项目文件的管理。
  • 结合angular的模块化思想,尽量将不同功能的东西分在不同的文件夹中,组成不同的模块。
  • 路由分了跟路由和模块子路由,模块我们使用loadChildren的方式的好处是,不需要引入子模块。以后扩展方便。如果我要以后要扩展blog相关的东西,就只需要在BlogModule中增加相应的组件,然后添加子模块路由即可。如果要扩展和blog模块类似的功能,例如手机端博客,记账webapp等就在跟路由中添加loadChildren。然后像写BlogModule一样写一个子模块就可以了

为了配置我们的二级路由我们还需要一个配置路由的文件夹

安装NG ZORRO

我们界面UI选用NG ZORRO。
可以参考官网,https://ng.ant.design/#/docs/angular/getting-started

cd blog-angular
npm install ng-zorro-antd --save

在根 module 中需要使用 NgZorroAntdModule.forRoot()

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgZorroAntdModule } from 'ng-zorro-antd';

import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgZorroAntdModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

最后我们的这个简单易懂的后台管理系统就完成了

创建路由

配置根路由,我们这里用的loadChildren的方式
在routes文件夹下创建routes.ts文件并写入如下代码

import {LayoutComponent} from "../layout/layout.component"

export const routes = [
  {
    path: '',
    component: LayoutComponent,
    children: [
      { path: '', redirectTo: 'blog', pathMatch: 'full' },
      { path: 'blog', loadChildren: './blog/blog.module#BlogModule'},
    ]
  },
  { path: '**', redirectTo: 'blog' }
];

注入路由,修改routes.module.ts如下:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import {routes} from "./routes"

import {LayoutModule} from "../layout/layout.module"

@NgModule({
  imports: [
    CommonModule,
    LayoutModule,
    RouterModule.forRoot(routes, { useHash: true }), // 这个定义在子模块中,但是是跟路由,我们使用forRoot
  ],
  declarations: []
})
export class RoutesModule { }

在app.module.ts中引入RoutesModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgZorroAntdModule } from 'ng-zorro-antd';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import {RoutesModule} from "./routes/routes.module"


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    RouterModule,
    BrowserModule,
    NgZorroAntdModule.forRoot(),
    RoutesModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

配置子模块路由
在blog.module.ts中修改如下

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NoteListComponent } from './note-list/note-list.component';
import { NoteComponent } from './note/note.component';
import { Routes, RouterModule } from '@angular/router';

// 定义的路由
const routes: Routes = [
  { path: '', redirectTo: 'list' },
  { path: 'list', component: NoteListComponent },
  { path: 'note/:id', component: NoteComponent }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes), // 子模块注入路由要用forChild
  ],
  // 路由中使用了的component要在这里declaration
  declarations: [NoteListComponent, NoteComponent]
})
export class BlogModule { }

路由出口router-outlet
跟路由的出口在app.component.html文件中

<router-outlet></router-outlet>

博客子模块的路由出口在layout.component.html文件中

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

图片 1

效果

源码下载

图片 2在主页引用ant desgin同时配置路由

构建我们的项目文件

根据我自己的需求,现在构建的是一个个人博客系统,很简单,可能就两个页面,一个列表页面,一个详细页面。但是这是我做个人网站的开始,以后还会加上别的其他页面,如个人简历页面,联系页面或者集成别的一些什么。所以,我们至少要按照一个中小型项目来构建目录。
使用如下指令添加4个子模块

ng g module core
ng g module layout
ng g module share
ng g module routes

图片 3

项目目录

通过指令添加布局模块组件

ng g component layout
ng g component layout/header
ng g component layout/footer

通过指令添加博客模块及其组件

ng g module routes/blog
ng g component routes/blog/note-list
ng g component routes/blog/note

图片 4

通过命令很方便的创建模块和组件

import React,{Component} from 'react'
import '../asstes/css/home.css'
import echarts from 'echarts'

class HomeComponent extends Component{
    componentDidMount(){
        var myChart = echarts.init(document.getElementById('main'));
        // app.title = '坐标轴刻度与标签对齐';

        var option = {
            color: ['#3398DB'],
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器,坐标轴触发有效
                    type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'直接访问',
                    type:'bar',
                    barWidth: '60%',
                    data:[10, 52, 200, 334, 390, 330, 220]
                }
            ]
        };
        myChart.setOption(option);
        var myChart = echarts.init(document.getElementById('mains'));
        var option = {
            title : {
                text: '某站点用户访问来源',
                subtext: '纯属虚构',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
            },
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:335, name:'直接访问'},
                        {value:310, name:'邮件营销'},
                        {value:234, name:'联盟广告'},
                        {value:135, name:'视频广告'},
                        {value:1548, name:'搜索引擎'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        myChart.setOption(option);

    }
    render() {
        return (
            <div>
                <div className={'home'}>
                    <div className={'home-left'}>
                        <div className={'h-l-box'}></div>
                        <div className={'h-l-box'}></div>
                        <div className={'h-l-box'}>
                            <div id="main" style={{width:"100%",height:"100%"}}></div>
                        </div>
                    </div>
                    <div className={'home-right'}>
                        <div className={'h-r-box h-r-flex'} style={{width:"100%",height:"20%"}}>
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                        <div className={'h-r-box'} style={{width:"100%",height:"8%"}}></div>
                        <div className={'h-r-box'}></div>
                        <div className={'h-r-box h-r-flex'}>
                            <div style={{margin:"0"}}>
                                <div id="mains" style={{width:"80%",height:"100%",border:"0"}}></div>
                            </div>
                            <div style={{margin:"0 0 0 0.5rem"}}></div>
                        </div>
                    </div>

                </div>
                {/*<div className="home-footer"></div>*/}
            </div>
        );
    }
}

export default HomeComponent

创建项目

使用angular脚手架搭建项目。
如何使用angular脚手架搭建项目参看这篇文章

ng new blog-angular

首先我们要创建一个项目 代码是npx create-react-app之后我们开始写这个项目在写这个项目之前我们因为样式美观度的原因所以使用ant design 安装方法请去ant design官网快速上手当中复制粘贴安装命令之后我们还需要安装echarts,echarts同时也是增加页面美观度的一种操作详情同上 那么安装这些东西以后我们则正式开始做项目我们要做的时候我们先看我们要实现的效果先创建页面

本文由金沙澳门官网发布于前端知识,转载请注明出处:什么样运用react做一个大约的后台管理种类,ZO

关键词: 金沙澳门官网