vue小项目(一)-登录界面（前后端分离）

一、需要的基础知识

1 创建项目使用vu-cli脚手架（在此不做过多解释），需要提前了解其目录含义
2 该项目前端使用到： vue, vuex, vue-router,axios,session存储，ES6，ES Module等技术
3 该项目后端使用到： node.js, express

二、目录部署

1、public 静态资源目录

index.html 模板文件

2、src 开发目录

​ components 组件（本项目没有涉及）
​ views 页面（Login.vue是登录页面，Home.vue时登录成功后进入的页面）
​ router.js 路由
​ store.js store
​ App.vue 应用程序组件
​ main.js 入口文件

三、项目启动

右击目录login,在终端打开（我使用的是vscode）

该操作执行两次，第一次是启动该项目，边开发边看效果

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

第二次是启动服务器

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

四、实现逻辑

当在地址栏输入http://localhost:8080/显示登录页面，只有当正确的输入用户名和密码的时候才能进入home页面，如果想跳过登录界面直接进入home页面(输入 http://localhost:8080/#/home)不会成功，必须得先登录，这里home页面只是为了测试登录成功
另外为了大家看的更加清晰方便，我所有的页面样式都没有写，只写了必要的代码

扫描二维码关注公众号，回复： 16797744 查看本文章

五、代码实现

（一）前端

首先将脚手架里面的不涉及我目录里面的页面删掉，比如About.vue等，然后进行简单的修改缩进（脚手架里面缩进是2，我们都改成4，这样符合代码规范）

1 入口文件（main.js）

注意：

1. vue-cli中@符号代表src目录的路径，为了更方便的引用里面文件
2. 安装axios是为了在所有页面中都可以使用axios发送请求

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 路由（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

注意：

1. mutations中的changeToken消息来自登录页面（Login.vueÿ