SPA项目开发之登录注册

name: ‘HelloWorld’,

component: HelloWorld

},

]

})

页面效果如下：

登录注册界面

创建views目录来放登录注册界面

Login.vue登录界面

用户登录

<el-button style=“width:100%;” type=“primary” @click=“submitForm(‘ruleForm’)”>提交

<el-link type=“success” @click=“toReg”>用户注册

忘记密码

Reg.vue注册界面

用户注册

<el-button style=“width:100%;” type=“primary” @click=“submitForm(‘ruleForm’)”>提交

<el-link type=“success” @click=“toLogin”>用户登录

忘记密码

.配置路径 index.js

import Vue from ‘vue’

import Router from ‘vue-router’

import HelloWorld from ‘@/components/HelloWorld’

import Login from ‘@/views/Login’

import Reg from ‘@/views/Reg’

Vue.use(Router)

export default new Router({

routes: [{

path: ‘/’,

name: ‘Login’,

component: Login

},

{

path: ‘/Reg’,

name: ‘Reg’,

component: Reg

},

{

path: ‘/Login’,

name: ‘Login’,

component: Login

},

]

})

界面如下，点击登录会跳转到登录界面

二、实现登录功能

========

左键File，点击import，选择箭头所示Existing Maven Projects,点击Next

Browse选择要导入的项目

导入成功后，修改mysql的版本号

在db.properties中修改为自己的mysql用户名和密码，以及放置表的数据库名

运行项目如下

将api文件导入spa项目的src中

action.js

/**

• 对后台请求的地址的封装，URL格式如下：

• 模块名_实体名_操作

*/

export default {

‘SERVER’: ‘http://localhost:8080/T216_SSH’, //服务器

‘SYSTEM_USER_DOLOGIN’: ‘/vue/userAction_login.action’, //用户登陆

‘SYSTEM_USER_DOREG’: ‘/vue/userAction_reg.action’, //用户注册

‘SYSTEM_MENU_TREE’: ‘/vue/treeNodeAction.action’, //左侧树形菜单加载

‘SYSTEM_ARTICLE_LIST’: ‘/vue/articleAction_list.action’, //文章列表

‘SYSTEM_ARTICLE_ADD’: ‘/vue/articleAction_add.action’, //文章新增

‘SYSTEM_ARTICLE_EDIT’: ‘/vue/articleAction_edit.action’, //文章修改

‘SYSTEM_ARTICLE_DEL’: ‘/vue/articleAction_del.action’, //文章删除

‘SYSTEM_USER_GETASYNCDATA’: ‘/vue/userAction_getAsyncData.action’, //vuex中的异步加载数据

‘getFullPath’: k => { //获得请求的完整地址，用于mockjs测试时使用

return this.SERVER + this[k];

}

}

http.js

/**

• vue项目对axios的全局配置

*/

import axios from ‘axios’

import qs from ‘qs’

//引入action模块，并添加至axios的类属性urls上

import action from ‘@/api/action’

axios.urls = action

// axios默认配置

axios.defaults.timeout = 10000; // 超时时间

// axios.defaults.baseURL = ‘http://localhost:8080/j2ee15’; // 默认地址

axios.defaults.baseURL = action.SERVER;

//整理数据

// 只适用于 POST,PUT,PATCH，transformRequest` 允许在向服务器发送前，修改请求数据

axios.defaults.transformRequest = function(data) {

data = qs.stringify(data);

return data;

};

// 请求拦截器

axios.interceptors.request.use(function(config) {

// var jwt = window.vm.$store.getters.getJwt;

// config.headers[‘jwt’] = jwt;

return config;

}, function(error) {

return Promise.reject(error);

});

// 响应拦截器

axios.interceptors.response.use(function(response) {

// debugger;

// var jwt = response.headers[‘jwt’];

// if(jwt){

// window.vm.$store.commit(‘setJwt’,{jwt:jwt});

// }

return response;

}, function(error) {

return Promise.reject(error);

});

// // 路由请求拦截

// // http request 拦截器

// axios.interceptors.request.use(

// config => {

// //config.data = JSON.stringify(config.data);

// //config.headers[‘Content-Type’] = ‘application/json;charset=UTF-8’;

// //config.headers[‘Token’] = ‘abcxyz’;

// //判断是否存在ticket，如果存在的话，则每个http header都加上ticket

// // if (cookie.get(“token”)) {

// // //用户每次操作，都将cookie设置成2小时

// // cookie.set(“token”, cookie.get(“token”), 1 / 12)

// // cookie.set(“name”, cookie.get(“name”), 1 / 12)

// // config.headers.token = cookie.get(“token”);

// // config.headers.name = cookie.get(“name”);

// // }

// return config;

// },

// error => {

// return Promise.reject(error.response);

// });

// // 路由响应拦截

// // http response 拦截器

// axios.interceptors.response.use(

// response => {

// if (response.data.resultCode == “404”) {

// console.log(“response.data.resultCode是404”)

// // 返回 错误代码-1 清除ticket信息并跳转到登录页面

// // cookie.del(“ticket”)

// // window.location.href=‘http://login.com’

// return

// } else {

// return response;

// }

// },

// error => {

// return Promise.reject(error.response) // 返回接口返回的错误信息

// });

export default axios;

引入main.js配置

import axios from ‘@/api/http’  #vue项目对axios的全局配置

import VueAxios from ‘vue-axios’

Vue.use(VueAxios,axios)

前后端数据交互开始

src/views/Login.vue

用户登录

<el-button style=“width:100%;” type=“primary” @click=“submitForm”>提交

<el-link type=“success” @click=“toReg”>用户注册

忘记密码

submitForm() {

let url = this.axios.urls.SYSTEM_USER_DOLOGIN;

this.axios.post(url, this.ruleForm).then((resp) => {

console.log(resp);

if (resp.data.code == 1) {

this.$message({

message: resp.data.msg,

type: ‘success’

});

} else {

this.$message({

message: resp.data.msg,

type: ‘warning’

});

}

}).catch(function(error) {

console.log(error);

});

}

登录失败

登录成功

三、This 指针带来的变量污染

=====================

登录方法中用到箭头函数，由于this.message和this.axios中的this不是同一个，this的指向是由所在函数的调用方式决定的，message存在于全局中，所以引用箭头函数

最后

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

《前端开发四大模块核心知识笔记》

最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。