Introduction to Kubesphere console directory and installation dependencies

Introduction to Kubesphere console directory and installation dependencies

1. ES6 (ECMAScript 6)
   ECMAScript is the grammar specification in JavaScript, ECMAScript is the international standard of JavaScript language, and JavaScript is the implementation of ECMAScript.
2. React
   React is a simple javascript UI library for building efficient and fast user interfaces. It's a lightweight library, so it's popular. It follows component design patterns, declarative programming paradigms, and functional programming concepts to make front-end applications more efficient. It uses virtual DOM to manipulate DOM efficiently. It follows a unidirectional data flow from higher-order components to lower-order components.

Declarative programming paradigm: is a programming paradigm that focuses on what you do , not how to do it . It expresses logic without explicitly defining steps. This means we need to declare the components to be displayed based on logical calculations. It doesn't describe the control flow steps. Examples of declarative programming are HTML, SQL, etc.

Functional Programming: Functional programming is a part of declarative programming. Functions in javascript are first-class citizens, which means that functions are data, and you can save, retrieve and pass them around your application like variables.

3. nodejs
   is a way to develop a web server through the JavaScript language. node.js has features such as non-blocking and event-driven I/O, so that high concurrency can be achieved in applications built with polling and comet become possible
4. npm
   Node Package (package) Manager (manager)
   is a built-in package manager for nodejs. There is no doubt that npm is used to manage packages. (Download package tool)
   Encapsulate the software download information into a package.json file and use the npm command to automatically download and install.

# 一般步骤
git clone xxx
npm install
npm run dev

5. yarn
   Yarn is a new JS package management tool jointly launched by Facebook, Google, Exponent and Tilde. As written in the official document , Yarn appeared to make up for some defects of npm.

npm flaws:

• npm installSometimes it's extremely slow . In particular, it takes half a day to pull down a new project, delete node_modules, and re-install it.
• The same project cannot maintain consistency during installation . Due to the characteristics of the version number in the package.json file, the following three version numbers represent different meanings during installation.
• When installing, the packages are downloaded and installed at the same time, and at some point in the middle, a package throws an error, but npm continues to download and install the package. Because npm logs all its logs to the terminal, the error messages about bad packages get lost in the sea of ​​warnings that npm prints, and you never even notice what actually went wrong .

# 一般步骤
git clone xxx
yarn
yarn start

6. DOM
   HTML DOM defines a standard for accessing and manipulating HTML documents

7. js and jsx
   js is a literal scripting language
   jsx, and JavaScript XML is an XML-like syntax for building tags inside React components.

Difference
1. Browsers can only recognize different JS and CSS, but not SCSS or JSX, so the function of webpack is to convert SCSS to CSS and JSX to JS, and then use it normally in the browser.
2. js is the jsx in react itself (that is, writing HTML directly in the JS file), and now they can write directly because the editor can choose the parsing mode of the language.
3. The jsx file will automatically trigger the editor to parse the current file in jsx mode, so there is no error.

jsx syntax
is a syntax for directly writing XML in js code, and each XML tag will be converted into pure JS code by the JSX conversion tool. Using JSX can make the structure of components and the relationship between components look clearer.

console code structure

Remember a fetch function to send http questions to the backend

source code

after running

rear end:

The post method set in the source code, but the backend shows that options are sent

Check the data shows:

The fetch function sends an http request first to send options for a pre-check request, and then to send a post, so you need to set the cross-domain access setting on the backend

Take the springboot backend as an example to set the reference:

https://blog.csdn.net/weixin_44467567/article/details/102746424

Note: This article refers to many big blogs, but it has not been recorded. If there is any offense or the description is wrong, please let me know, thank you~