Download the template

Vue-admin-template 4.0 download address

Follow the steps to download the dependencies

# clone the project
git clone https://github.com/PanJiaChen/vue-admin-template.git

# enter the project directory
cd vue-admin-template

# install dependency
npm install

# develop
npm run dev
Copy the code

Second, writing background

table

-- auto-generated definition
create table user
(
    id       int auto_increment comment 'User code'
        primary key,
    username varchar(50) not nullComment 'username ', passwordvarchar(25) not nullComment 'username');
Copy the code

The background uses SpringBoot+Mybatis Plus, etc

Background code download

Third, modify the front-end code

1. Add a proxy

Add the following code:

proxy: { [process.env.VUE_APP_BASE_API]: {target:'http://localhost:8081/', // the third party interface you requested is changeOrigin:true, // a virtual server is created locally and sends the requested data and receives the requested data, PathRewrite :{// pathRewrite, / API /customer/list ['^' + process.env.vue_app_base_api]: "' / / replace the target address of the request, that is to say when you request http://localhost:8081/api/customer/list this address directly after written/API can}}}, / / before: require('./mock/mock-server.js')Copy the code

2. Modify the user.js file of modules in the store package

Since the background returns a Map and is not wrapped in data, you need this file or you won’t get the value

3. Modify the code to get user information

After the successful login, users need to obtain user information, such as profile picture and name

Similarly, this returns a Map

Four, need to pay attention to the place

1. The token name in the request header must correspond to the name in the background; otherwise, the token cannot be obtained during information retrieval

2. The front end judges that the code returned should be 20000 before the return is successful

Five, the effect of