Pequeño proyecto de Vue (1): interfaz de inicio de sesión (separación de la parte delantera y trasera)

1. Conocimientos básicos requeridos

1 Para crear un proyecto usando el andamio vu-cli (no se explica demasiado aquí), debe comprender el significado de su directorio de antemano 2
La interfaz de este proyecto utiliza: vue, vuex, vue-router, axios, almacenamiento de sesión , ES6, módulo ES y otras tecnologías
3 El backend de este proyecto utiliza: node.js, express

2. Implementación del directorio

1. directorio público de recursos estáticos

archivo de plantilla index.html

2. directorio de desarrollo src

​ componentes componente (no involucrado en este proyecto)
página de vistas (Login.vue es la página de inicio de sesión, Home.vue es la página ingresada después de iniciar sesión exitosamente)
router.js enrutamiento
store.js store
Componente de aplicación App.vue
archivo de entrada principal .js

3. Inicio del proyecto

Haga clic derecho en el directorio para iniciar sesión y abrirlo en la terminal (estoy usando vscode).

Esta operación se realiza dos veces. La primera vez es para iniciar el proyecto y ver el efecto durante el desarrollo.

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

La segunda vez es para iniciar el servidor.

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

4. Implementar lógica

Al ingresar http://localhost:8080/ en la barra de direcciones, se muestra la página de inicio de sesión. Solo cuando el nombre de usuario y la contraseña se ingresan correctamente se puede ingresar a la página de inicio. Si desea omitir la interfaz de inicio de sesión e ingresar a la página de inicio La página de inicio directamente (ingrese http://localhost: 8080/#/home) no tendrá éxito, primero debe iniciar sesión. La página de inicio aquí es solo para probar el inicio de sesión exitoso. Además, para que todos puedan ver de manera más clara y conveniente
, No he escrito todos los estilos de página, sólo el código necesario.

5. Implementación del código

(1) extremo delantero

Primero, elimine las páginas del andamio que no están involucradas en mi directorio, como About.vue, etc., y luego simplemente modifique la sangría (la sangría en el andamio es 2, todos la cambiamos a 4, para que cumple con las especificaciones del código)

1 archivo de entrada (main.js)

Aviso:

1. El símbolo @ en vue-cli representa la ruta del directorio src, para hacer referencia más conveniente a los archivos que contiene.
2. Axios está instalado para que se pueda utilizar para enviar solicitudes en todas las páginas.

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 Enrutamiento (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 tienda.js

Aviso:

1. El mensaje changeToken en mutaciones proviene de la página de inicio de sesión (Login.vueÿ