Java的新项目学成在线笔记-day17（四）

 

1.3 用户登录前端 
1.3.1 需求分析 
点击用户登录固定跳转到用户中心前端的登录页面，如下：
 
输入账号和密码，登录成功，跳转到首页。
用户中心前端（xc-ui-pc-learning工程）提供登录页面，所有子系统连接到此页面。
说明：
页面有“登录|注册”链接的前端系统有：门户系统、搜索系统、用户中心。
本小节修改门户系统的页头，其它三处可参考门户修改。
  1.3.2 Api方法 
进入xc-ui-pc-learning工程定义api方法，在base模块下定义login.js。

 

[AppleScript] 纯文本查看 复制代码

?

1 2 3 4 5

/*登陆*/ export const login = params => {   //let loginRequest = querystring.stringify(params)   let loginRequest = qs.stringify(params);     return http.requestPostForm('/openapi/auth/userlogin',loginRequest); }

1.3.3 页面 
1、登录页面 进入用户中心前端，找到登录页面loginpage.vue：

 
2、路由配置 在home模块配置路由：
 

[AppleScript] 纯文本查看 复制代码

?

01 02 03 04 05 06 07 08 09 10 11

import Home from '@/module/home/page/home.vue'; import Login from '@/module/home/page/loginpage.vue'; import Denied from '@/module/home/page/denied.vue'; import Logout from '@/module/home/page/logout.vue'; import order_pay from '@/module/order/page/order_pay.vue'; export default [{     path: '/',     component: Home,     name: '个人中心',     hidden: true   },   {     path: '/login',     component: Login,     name: 'Login',     hidden: true   },   .....

3、登录后跳转
请求登录页面需携带returnUrl参数，要求此参数使用Base64编码。 登录成功后将跳转到returnUrl，loginForm.vue组件的登录方法如下：
 

[AppleScript] 纯文本查看 复制代码

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

login: function () {        this.$refs.loginForm.validate((valid) => {       if (valid) {             this.editLoading = true;             let para = Object.assign({}, this.loginForm);             loginApi.login(para).then((res) => {             this.editLoading = false;             if(res.success){               this.$message('登陆成功');               //刷新 当前页面              // alert(this.returnUrl)               console.log(this.returnUrl)               if(this.returnUrl!='undefined' && this.returnUrl!=''                                                && !this.returnUrl.includes("/userlogout")                                                && !this.returnUrl.includes("/userlogin")){                   window.location.href = this.returnUrl;               }else{                 //跳转到首页                window.location.href = 'http://www.xuecheng.com/'               }               }else{                 if(res.message){                   this.$message.error(res.message);                 }else{                   this.$message.error('登陆失败');                 }             }           },             (res) => {               this.editLoading = false;             });           }     });   },