How to build a backend management system with React Family Bucket
This time I will show you how to build a backend management system for React Family Bucket. What are the precautions for building a backend management system for React Family Bucket? Here are practical cases, let’s take a look.
Introduction
When I was a student, I would constantly do exercises and make summaries in order to master a certain knowledge point. Isn't it the same after entering the workplace? Doing business is like doing exercises. If you sum up appropriately after class, you will definitely improve your level faster. Since the company uses the react node technology stack, it completed a small reactSPA project. It is planned to abstract the business encountered in daily work and interesting things encountered in study into a demo to display in the future. At present, the project is just a prototype, and the results are as follows. Based on this article, I wrote a new article using React Family Bucket to build a backend management system. Welcome to watch. (Note: Because the project is updated from time to time, the article may not be updated immediately, so the actual project shall prevail)
In fact, this interface style can not only be used as a backend management system interface, but can also be modified into a beautiful blog that can display projects. The project address is here (local running is better). If you have good opinions, please submit an issue or PR.
The initial structure and structural reasons of the project have been listed above. Since ts will be introduced over time, the project structure will inevitably change, but it will definitely be expanded based on this basic prototype.
The directory structure is explained below
The project was initially initialized with create-react-app, which is the react scaffolding officially provided by Facebook and one of the best React application development tools in the industry;
- The middleware directory can then introduce log middleware, etc.;
- containers and components store both react components. The difference is: as long as the components related to the homepage style are placed In the container, modules related to functions (such as the table components I implemented for packaging, pop-up input box groups, etc.) should be placed in components;
- Some common configurations on the front end are best stored in the global (browser), so that they don’t need to be referenced when called, which is convenient;
- The reason why the ajax module needs to be implemented by yourself is that if I need to have requirements such as cross-domain cors, and I need to customize multiple Ajax requests (if fetch is used, fetch will become more and more powerful in the future)
Technology stack related
Although there are many technology stacks used, I am not proficient in using them. Most of them are used while checking APIs, so I only list some points that I solved using relevant technology stacks;
webpack(2.6)
① Load on demand:
babel-plugin-import is a babel plug-in (principle) for loading component code and styles on demand. Make the following modifications in the config/webpack.config.dev.js file:
{ test: /\.(js|jsx)$/, include: paths.appSrc, loader: 'babel', query: { plugins: [ ['import', [{ libraryName: "antd", style: 'css' }]], ], cacheDirectory: true } },
②Less attractive:
First introduce less-loader to load the less style, and modify config/webpack.config.dev.js
file
loaders: [ { exclude: [ /\.html$/, /\.(js|jsx)$/, + /\.less$/, /\.css$/, /\.json$/, /\.svg$/ ], loader: 'url', }, ... // Process JS with Babel. { test: /\.(js|jsx)$/, include: paths.appSrc, loader: 'babel', query: { plugins: [ - ['import', [{ libraryName: "antd", style: 'css' }]], + ['import', [{ libraryName: "antd", style: true }]], // 加载 less 文件 ], }, ... + // 解析 less 文件,并加入变量覆盖配置 + { + test: /\.less$/, + loader: 'style!css!postcss!less?{modifyVars:{"@primary-color":"#1DA57A"}}' + }, ]
Less-loader's modifyVars is used here for theme configuration. For variables and other configuration methods, please refer to the Configuring Theme document.
③Publish to gh-pages with one click:
Using gh-pages, use npm run deploy to publish to your own gh-pages with one click. Let’s treat gh-pages as a production environment, so modify the config/webpack.config.dev.js
file At the same time, you must also make the same modifications to config/webpack.config.prod.js.
ps: Although I published it to gh-pages in this way, the gh-pages display address of the project is here. The image displayed on gh-pages is obviously a few pixels larger than the local one. If anyone knows why, please feel free to enlighten me.
④Abbreviation of reference path:
resolve: { fallback: paths.nodePaths, alias: { 'react-native': 'react-native-web', components: path.resolve(dirname, '..') + '/src/common/components', container: path.resolve(dirname, '..') + '/src/common/container', images: path.resolve(dirname, '..') + '/src/common/images', pages: path.resolve(dirname, '..') + '/src/common/pages', utils: path.resolve(dirname, '..') + '/src/common/utils', data: path.resolve(dirname, '..') + '/src/server/data', } },
After configuring the abbreviation of the reference path, you can quote it like this anywhere, such as
antd(2.10)
antd是(蚂蚁金服体验技术部)经过大量的项目实践和总结,沉淀出的一个中台设计语言 Ant Design,使用者包括蚂蚁金服、阿里巴巴、口碑、美团、滴滴等一系列知名公司,而且我从他们的设计理念也学到了很多关于UI、UX的知识。
该项目采用的是antd最新的版本2.10.0,由于2.x的版本和1.x的版本还是相差蛮大的,之前参考的项目(基于1.x)改起来太费劲,所以在组件那块就干脆自己重新封装了一遍。这部分知识点我建议还是看文档,文档解决不了扒扒源码。
react-router(4.x)
react-router 4.x和2.x的差异又是特别的大,召唤文档,网上基本上都还是2.x的教程,看过文档之后,反正简而言之其就是要让使用者更容易上手。印象最深的是以前嵌套路由写法在4.x中写到同层了。如下示例他们的效果是相同的。
2.x:
<route> <route></route> <route></route> </route>
4.x:
<route></route> <route></route> <route></route>
还有更多的特性和API的出现,期待有更好的分析文章的出现,有机会我也会来总结下react-router(4.x)和(2.x)的差异。
fetch
先推荐这篇文章《传统Ajax已死,Fetch永生》,再推荐API;
fetch是个好东西,好在简单,除了promise最基本的用法,还能这样写
fetch(url).then(response => response.json()) .then(data => console.log(data)) .catch(e => console.log("Oops, error", e))
try { let response = await fetch(url); let data = await response.json(); console.log(data); } catch(e) { console.log("Oops, error", e); }
但是其简洁的特点是为了让我们可以自定义其扩展,还是其本身就还不完善呢?我在调用JSONP的请求时,发现用fetch掉不同,后来在文档上才发现其不支持JSONP的调用,所幸社区还是很给力的找到了fetch-jsonp这个模块,实现了对百度音乐接口的JSONP调用。fetch-jsonp使用也和fetch类似,代码如下
fetchJsonp(url,{method: 'GET'}) .then((res) =>res.json()) .then((data) => {})
redux
使用了redux也已经有段时日了,我对redux的定义就是更好的管理组件的状态,没有redux的时候就像现在这个应用一样,逻辑少状态变化也还不太复杂,但是一旦逻辑复杂起来,各种组件状态、界面耦合起来,就容易出岔子,那redux就是为了解决这个而生的,让我们可以更多地关注UI层,而降低对状态的关注。之前也写了些redux的文章,纸上得来终觉浅,绝知此事要躬行。
--------------------------更新---------------------------
已经在项目中加入了redux技术栈。
项目的一些待扩展计划
封装组件
不管组件封装得好不好,个人感觉其是提高水平很高效的方法,多练,继续封装出各式各样的功能组件。
typescript
公司大概会在6月份开始,新的项目就要采用ts开发了,所以我也到时会在该项目中引人ts的语法,我现在的感觉是使用ts后,前后端对接会更加轻松,不会有一些类型不匹配的低级错误,而且antd貌似和ts也能兼容得蛮好。
测试框架
这部分其实我还是没什么经验的,先写上吧,有机会会拿这个项目开刀,并写心得。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
The above is the detailed content of How to build a backend management system with React Family Bucket. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics



The solution to the Discuz background login problem is revealed. Specific code examples are needed. With the rapid development of the Internet, website construction has become more and more common, and Discuz, as a commonly used forum website building system, has been favored by many webmasters. However, precisely because of its powerful functions, sometimes we encounter some problems when using Discuz, such as background login problems. Today, we will reveal the solution to the Discuz background login problem and provide specific code examples. We hope to help those in need.

React front-end and back-end separation guide: How to achieve front-end and back-end decoupling and independent deployment, specific code examples are required In today's web development environment, front-end and back-end separation has become a trend. By separating front-end and back-end code, development work can be made more flexible, efficient, and facilitate team collaboration. This article will introduce how to use React to achieve front-end and back-end separation, thereby achieving the goals of decoupling and independent deployment. First, we need to understand what front-end and back-end separation is. In the traditional web development model, the front-end and back-end are coupled

How to build a reliable messaging application with React and RabbitMQ Introduction: Modern applications need to support reliable messaging to achieve features such as real-time updates and data synchronization. React is a popular JavaScript library for building user interfaces, while RabbitMQ is a reliable messaging middleware. This article will introduce how to combine React and RabbitMQ to build a reliable messaging application, and provide specific code examples. RabbitMQ overview:

ReactRouter User Guide: How to Implement Front-End Routing Control With the popularity of single-page applications, front-end routing has become an important part that cannot be ignored. As the most popular routing library in the React ecosystem, ReactRouter provides rich functions and easy-to-use APIs, making the implementation of front-end routing very simple and flexible. This article will introduce how to use ReactRouter and provide some specific code examples. To install ReactRouter first, we need

Are you worried about WordPress backend garbled code? Try these solutions, specific code examples are required. With the widespread application of WordPress in website construction, many users may encounter the problem of garbled code in the WordPress backend. This kind of problem will cause the background management interface to display garbled characters, causing great trouble to users. This article will introduce some common solutions to help users solve the trouble of garbled characters in the WordPress backend. Modify the wp-config.php file and open wp-config.

How to use React and Apache Kafka to build real-time data processing applications Introduction: With the rise of big data and real-time data processing, building real-time data processing applications has become the pursuit of many developers. The combination of React, a popular front-end framework, and Apache Kafka, a high-performance distributed messaging system, can help us build real-time data processing applications. This article will introduce how to use React and Apache Kafka to build real-time data processing applications, and

PHP, Vue and React: How to choose the most suitable front-end framework? With the continuous development of Internet technology, front-end frameworks play a vital role in Web development. PHP, Vue and React are three representative front-end frameworks, each with its own unique characteristics and advantages. When choosing which front-end framework to use, developers need to make an informed decision based on project needs, team skills, and personal preferences. This article will compare the characteristics and uses of the three front-end frameworks PHP, Vue and React.

Integration of Java framework and React framework: Steps: Set up the back-end Java framework. Create project structure. Configure build tools. Create React applications. Write REST API endpoints. Configure the communication mechanism. Practical case (SpringBoot+React): Java code: Define RESTfulAPI controller. React code: Get and display the data returned by the API.
