react和ant design搭建后台管理系统

前言
React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源。出身名门的React也不负众望,成功成为当前最火热的三大前端框架之一。相比于Angular,React更加轻量。而相对于另一个轻量级前端框架Vue来说,React虽然学习和使用起来难度稍微大一些,但是React的社区相对来说人气更旺,而且在移动端的开发上面,大名鼎鼎的React Native更是尽显优势,在代码性能上要好过Vue框架。今天我们就来对React进行一个入门的学习。
这里还要用到的是一个UI设计语言,Ant Design。Ant Design同样出身名门,是阿里巴巴旗下蚂蚁金融服务集团(旗下拥有支付宝、余额宝等产品)所设计的一个前端UI组件库。目前支持了React, 并且有一个对Vue支持的测试版本。
配置
sublime Text编辑器(其他)
node(npm)或者yarn命令
搭建项目
1、我们需要在想要安装的位置打开cmd程序执行命令,安装 create-react-app 脚手架工具:

cnpm install -g create-react-app yarn

react和ant design搭建后台管理系统_第1张图片
2、对create-react-app这个脚手架进行全局安装:

create-react-app antd-demo && cd antd-demo

react和ant design搭建后台管理系统_第2张图片
3、运行程序是否安装成功

cd antd-demo(enter)回车
cnpm start

此时浏览器会访问 http://localhost:3000/ ,看到 Welcome to React 的界面就算成功了。
react和ant design搭建后台管理系统_第3张图片
4、实现管理系统需要react-router-doml路由依赖包

cnpm i react-router-dom -D

安装好组件后看一下package.json配置文件都有哪些,看看有没有遗漏,你所安装的都在这里面
react和ant design搭建后台管理系统_第4张图片

如果项目中我们需要css编译看起来更加得简洁有技术含量,可以使用creact-react-app自带得scss插件,我们只需要

cnpm i sass-noder node-sass -S

在该引入得页面新建style.scss,然后就可以根据scss特性来进行编译

接下来我们还要做几件事就是引入ant design框架
执行命令:

yarn add antd

react和ant design搭建后台管理系统_第5张图片
react和ant design搭建后台管理系统_第6张图片
这样就算是将ant design框架引进来了,现在就可以使用里面的组件进行开发了
修改antd主题颜色官方有一个demo,可以下载下来执行“cnpm i”应该就可以运行了

https://ant.design/docs/react/customize-theme

实现后台管理系统过程
index.js页面

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, BrowserRouter, Route, Switch } from 'react-router-dom'
/* 组件 */
import SiderDemo from './App';
import HomePage from './assembly/home';
import nemberPage from './assembly/memberPage';
import CallThePolice from './assembly/CallThePolice';
import AddTo from './assembly/AddTo';
import AddSchool from './assembly/AddSchool';

const Web = () => {
  	return(
	  
	    
} />
) } ReactDOM.render(, document.getElementById('root'))

App.js页面实现过程,这里是内容

import React from 'react';
import ReactDOM from 'react-dom';
import { Layout, Menu, Breadcrumb, Icon } from 'antd';
import { NavLink, hashHistory } from 'react-router-dom';
import 'antd/dist/antd.css';
import './App.css';
const { Header, Content, Footer, Sider } = Layout;
class SiderDemo extends React.Component {
    state = {
        collapsed: false,
        mode: 'inline',
    };
    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
        this.state.collapsed?document.querySelector(".ant-layout.ant-layout-has-sider > .ant-layout, .ant-layout.ant-layout-has-sider > .ant-layout-content").style.left="200px":document.querySelector(".ant-layout.ant-layout-has-sider > .ant-layout, .ant-layout.ant-layout-has-sider > .ant-layout-content").style.left="80px";
    };

    handleClick = (item,key,selectedKeys) => {
      this.setState({
          current: item.key
      });
    }

    render() {
      console.log(this.state.current)
        return (
            
                
                
幼儿园监控系统
幼儿园监控 成员管理 设备报警 设备添加 添加幼儿园
{this.state.collapsed ? : }
欢迎登陆监控管理系统! 退出登录
{this.props.content}
); } } export default SiderDemo;

其他几个子页面实现过程我是直接将ant design框架的组件直接复制进去用的,我就不一一贴出来了,实现过程很简单。

给你们来一张项目结构图,一目了然。
react和ant design搭建后台管理系统_第7张图片

进过多次的调试,现在我们打开运行已经实现该功能
react和ant design搭建后台管理系统_第8张图片一个简单的后台管理系统就完成了,有什么问题可下方留言。

你可能感兴趣的:(react)