实现登录界面(前后端分离)
一、需要的基础知识
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页面只是为了测试登录成功
另外为了大家看的更加清晰方便,我所有的页面样式都没有写,只写了必要的代码
五、代码实现
(一)前端
首先将脚手架里面的不涉及我目录里面的页面删掉,比如About.vue等,然后进行简单的修改缩进(脚手架里面缩进是2,我们都改成4,这样符合代码规范)
1 入口文件(main.js)
注意:
- vue-cli中@符号代表src目录的路径,为了更方便的引用里面文件
- 安装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
注意:
- mutations中的changeToken消息来自登录页面(Login.vue),每次用户登录成功后都会发送同步消息,用来修改并存储state和session中的token,这里token的作用是为了验证登录的用户是否成功登录,token是由服务器端生成(后面会讲,大家到这里知道它的作用即可)
- Authorization是用来存储session里面的token
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
// 从session中获取token&#x