Vue small project (1)-Login interface (separation of front and back ends)

1. Required basic knowledge

1 To create a project using vu-cli scaffolding (not explained too much here), you need to understand the meaning of its directory in advance
2 The front end of this project uses: vue, vuex, vue-router, axios, session storage, ES6, ES Module and other technologies
3 The backend of this project uses: node.js, express

2. Directory deployment

1. public static resource directory

index.html template file

2. src development directory

​ components component (not involved in this project)
views page (Login.vue is the login page, Home.vue is the page entered after successful login)
router.js routing
store.js store
App.vue application component
main .js entry file

3. Project start

Right-click the directory to log in and open it in the terminal (I am using vscode).

This operation is performed twice. The first time is to start the project and see the effect while developing.

vue练习\登录\login>npm run serve

The second time is to start the server

vue练习\登录\login>nodemon app.js

4. Implement logic

When entering http://localhost:8080/ in the address bar, the login page is displayed. Only when the user name and password are entered correctly can the home page be entered. If you want to skip the login interface and enter the home page directly (enter http://localhost: 8080/#/home) will not succeed, you must log in first. The home page here is just to test the successful login.
In addition, for everyone to see more clearly and conveniently, I have not written all page styles, only the necessary code.

5. Code implementation

(1) Front end

First, delete the pages in the scaffolding that are not involved in my directory, such as About.vue, etc., and then simply modify the indentation (the indentation in the scaffolding is 2, we all changed it to 4, so that it complies with the code specifications)

1 Entry file (main.js)

Notice:

1. The @ symbol in vue-cli represents the path of the src directory, in order to more conveniently reference the files inside.
2. Axios is installed so that axios can be used to send requests in all pages

import Vue from 'vue'
import App from '@/App.vue'
import router from '@/router'
import store from '@/store'
import axios from 'axios'
// 安装axios
Vue.prototype.$http = axios
new Vue({
   
    
    
    router,
    store,
    render: h => h(App)
}).$mount('#app')

2 Routing (router.js)

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login'
// import Home from '@/views/Home'
Vue.use(Router)
export default new Router({
   
    
    
    routes: [
    // 进入登录页面
        {
   
    
    
            path: '/',
            component: Login
        },
        // 进入home页面
        {
   
    
    
            path: '/home',
            // component: Home
            // 使用异步引入
            component: () => import('@/views/Home')
        }
    ]
})

3 store.js

Notice:

1. The changeToken message in mutations comes from the login page (Login.vueÿ