This is the second day of my participation in the August More text Challenge. For details, see: August More Text Challenge

preface

Using ElementUI already has a period of time, in the side to fit the development background management system’s colleague, also recorded some notes, has not time to sum up, the odd note into a more detail tutorial system, can be left to look at, just saw on the nuggets about August more challenge activity, After reading it, I was moved and decided to spend some time and energy to participate in this more meaningful activity.

In the development process, it is true that a large part of the documents are used. It is said that front-end development cannot be separated from documents. The important words say three times, must read more documents.

Manage back-end solutions

Vue-element-admin is a back-end front-end solution based on vUE and Element-UI implementations.

Vue+ElementUI build background management system (actual combat series two) – login function

The development environment has been set up in the last article. Today, I will start to do a simple function, and modify the login function on the original basis.

In the project, when only the user name and password are needed, I have deleted all the previous verification code modules.

About the configuration of the broker

Open the vue.config.js file to configure

proxy: {
      '/api': {
        target: process.env.VUE_APP_BASE_API,
        changeOrigin: true,
        pathRewrite: {
          '^/api': 'api'
        }
      },
      '/check': {
        target: process.env.VUE_APP_BASE_API,
        changeOrigin: true,
        pathRewrite: {
          '^/check': 'check'
        }
      }
    }
Copy the code

Take another look at the.env.development and.env.production files and configure them.

Here is a word, about several environment Baidu explains as follows:

Development environment: the development environment is the program ape specially used for the development of the server, the configuration can be more optional, in order to develop debugging convenience, generally open all error report. Test environment: This is usually a clone of the configuration of the production environment. If a program does not work well in the test environment, it must not be released to the production machine. Production environment: A production environment that formally provides external services. Generally, error reporting is disabled and error logs are enabled.Copy the code

The three environments can also be said to be the three stages of system development: development -> test -> online, where the production environment is usually referred to as the real environment.

In popular terms:

1: Development environment: The project is still in the coding stage. Our code is generally in the development environment rather than in the production environment. The production environment consists of operating system, Web server and language environment. PHP. The database. Stage 3: Production environment: the front-end and background of project data have been passed. After being deployed on Ali Cloud, the website will be officially launched if customers use and visit itCopy the code

The VUE_APP_BASE_API path should be the same as the above proxy path. Do not misspell it.

About the value of vue sessionStorage

Definition and Use

The localStorage and sessionStorage properties allow key/value pairs to be stored in the browser.

SessionStorage is used to temporarily hold data in the same window (or TAB) until the data is deleted after the window or TAB is closed.

Save data syntax:

sessionStorage.setItem("key", "value");
Copy the code

Read data syntax:

var lastname = sessionStorage.getItem("key");
Copy the code
Functional requirements:

1: When the login interface is invoked, the login interface is successfully requested, the system is logged in, and the return value in the Response is stored in the browser

2: When using a component, such as test.vue, you need to get the value stored in the browser and use it.

Step 1: I use the framework of vue-element-admin background management system here. Open the login interface login.vue and check the code of the location called by the login interface.

Sessionstorage.setitem ("userInfo", json.stringify (res.data))Copy the code

At this time, you can open the browser to check whether the data has been saved in the browser. Select Application and click Session Storage. You can see that the return value of login interface has been stored in the browser, and then the value is taken from the browser.

Open the test.vue component and write the code to get the sessionStorage value where the return value is needed

Const userInfo = json.parse (sessionStorage.getitem ("userInfo"))Copy the code

The debugger takes a look, and that’s where it gets the value

Next, you can assign the obtained value to the required parameter ~~

Above is some of the operation of the background management system, if interested, you can do it yourself, some related configuration oh, I always believe, read more excellent source code, to their own improvement will have a lot of space of yo.