【畅购商城】用户登录

1. 用户登录
  1. 构建页面：Login.vue
步骤一：创建Login.vue

步骤二：绘制通用模块

<div>

</div>

</template>

import TopNav from '../components/TopNav'

import HeaderLogo from '../components/HeaderLogo'

import Footer from '../components/Footer'

export default {

head: {

title: '用户登录',

link: [

{rel:'stylesheet',href:'style/login.css'}

script: [

]

components : {

TopNav,

HeaderLogo,

Footer

}

</script>

<style>

</style>

步骤三：绘制登录表单

<div>

<b></b>

</div>

<ul>

<li>

</li>

<li>

</li>

</li>

<li>

<input type="checkbox" class="chb" /> 保存登录信息

</li>

<li>

</li>

</ul>

</form>

<dl>

<dt>使用合作网站登录商城：</dt>

</dl>

</div>

<h3>还不是商城用户</h3>

<p>现在免费注册成为商城用户，便能立刻享受便宜又放心的购物乐趣，心动不如行动，赶紧加入吧!</p>

</div>

</div>

</template>

import TopNav from '../components/TopNav'

import HeaderLogo from '../components/HeaderLogo'

import Footer from '../components/Footer'

export default {

head: {

title: '用户登录',

link: [

{rel:'stylesheet',href:'style/login.css'}

script: [

]

components : {

TopNav,

HeaderLogo,

Footer

}

</script>

<style>

</style>

1. 1. 分析

1. 1. 验证码：接口

http://localhost:10010/web-service/verifycode?username=jack

1. 1. 验证码：生成与显示
步骤一：后端生产验证码，并将用户保存Redis
1. 存放redis中验证码key格式："login" + 用户名

package com.czxy.changgou4.controller;

import org.springframework.data.redis.core.StringRedisTemplate;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.GetMapping;

import org.springframework.web.bind.annotation.RequestMapping;

import javax.annotation.Resource;

import javax.imageio.ImageIO;

import javax.servlet.http.HttpServletResponse;

import java.awt.*;

import java.awt.image.BufferedImage;

import java.io.IOException;

import java.util.Random;

import java.util.concurrent.TimeUnit;

/**

* @author 桐叔

* @email liangtong@itcast.cn

@Controller

@RequestMapping("/verifycode")

public class VerifyCodeController {

@Resource

private StringRedisTemplate stringRedisTemplate;

@GetMapping

public void verifyCode(String username , HttpServletResponse response ) throws IOException {

//字体只显示大写，去掉了1,0,i,o几个容易混淆的字符

String VERIFY_CODES = "23456789ABCDEFGHJKLMNPQRSTUVWXYZ";

int IMG_WIDTH = 72;

int IMG_HEIGTH = 27;

Random random = new Random();

//创建图片

BufferedImage image = new BufferedImage(IMG_WIDTH, IMG_HEIGTH, BufferedImage.TYPE_INT_RGB);

//画板

Graphics g = image.getGraphics();

//填充背景

g.setColor(Color.WHITE);

g.fillRect(1,1,IMG_WIDTH-2,IMG_HEIGTH-2);

g.setFont(new Font("楷体", Font.BOLD,25));

StringBuilder sb = new StringBuilder();

//写字

for(int i = 1 ; i <= 4 ; i ++){

//随机颜色

g.setColor(new Color(random.nextInt(255),random.nextInt(255),random.nextInt(255)));

int len = random.nextInt(VERIFY_CODES.length());

String str = VERIFY_CODES.substring(len,len+1);

sb.append(str);

g.drawString(str, IMG_WIDTH / 6 * i , 22 );

}

//将验证码存放到redis

stringRedisTemplate.opsForValue().set( "login" + username , sb.toString() , 1 , TimeUnit.HOURS);

// 生成随机干扰线

for (int i = 0; i < 30; i++) {

//随机颜色

g.setColor(new Color(random.nextInt(255),random.nextInt(255),random.nextInt(255)));

int x = random.nextInt(IMG_WIDTH - 1);

int y = random.nextInt(IMG_HEIGTH - 1);

int x1 = random.nextInt(12) + 1;

int y1 = random.nextInt(6) + 1;

g.drawLine(x, y, x - x1, y - y1);

}

//响应到浏览器

ImageIO.write(image,"jpeg", response.getOutputStream());

}

步骤二：点击“换一张”显示验证码
1. 默认不显示验证码
2. 点击“换一张”获得验证码

<div>

<b></b>

</div>

<ul>

<li>

</li>

<li>

</li>

</li>

<span style="color: #ff5b5b">{{errorMsg}}</span>

</li>

<li>

<input type="checkbox" class="chb" /> 保存登录信息

</li>

<li>

</li>

</ul>

</form>

<dl>

<dt>使用合作网站登录商城：</dt>

</dl>

</div>

<h3>还不是商城用户</h3>

<p>现在免费注册成为商城用户，便能立刻享受便宜又放心的购物乐趣，心动不如行动，赶紧加入吧!</p>

</div>

</div>

</template>

import TopNav from '../components/TopNav'

import HeaderLogo from '../components/HeaderLogo'

import Footer from '../components/Footer'

export default {

head: {

title: '用户登录',

link: [

{rel:'stylesheet',href:'style/login.css'}

script: [

]

components : {

TopNav,

HeaderLogo,

Footer

data() {

return {

imgSrc:'',

errorMsg: '',

user: {

}

methods: {

changeVerifyCode() {

if( this.user.username ) {

//this.$axios.defaults.baseURL

this.imgSrc = `http://localhost:10010/web-service/verifycode?t=${new Date().getTime()}&username=${this.user.username }`

} else {

this.errorMsg = '用户名不能为空'

}

watch: {

'user' : {

handler(v) {

if(v) {

//如果user数据发生改变，修改提示信息

this.errorMsg = ''

}

deep: true

}

</script>

<style>

</style>

1. 1. 通过用户名查询：接口

POST http://localhost:10010/web-service/user/findByUsername

{

"username":"jack"

}

1. 1. 通过用户名查询：实现
修改UserController，添加 findByUsername函数

/**

* 通过用户名查询

* @param user

* @return 返回用户对象

@PostMapping("/findByUsername")

public User findByUsername(@RequestBody User user){

//查询用户

User findUser = userService.findByUsername( user.getUsername() );

return findUser;

}

1. 1. 认证服务：构建项目（changgou4-service-auth）
步骤一：构建项目

步骤二：创建pom.xml文件

<dependencies>

<dependency>

<groupId>com.czxy.changgou</groupId>

<artifactId>changgou4_common_auth</artifactId>

</dependency>

<dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-web</artifactId>

</dependency>

<dependency>

<groupId>com.alibaba.nacos</groupId>

<artifactId>nacos-client</artifactId>

</dependency>

<dependency>

<groupId>com.alibaba.cloud</groupId>

<artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>

</dependency>

<dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-data-redis</artifactId>

</dependency>

<dependency>

<groupId>redis.clients</groupId>

<artifactId>jedis</artifactId>

</dependency>

<dependency>

<groupId>io.springfox</groupId>

<artifactId>springfox-swagger2</artifactId>

</dependency>

<dependency>

<groupId>io.springfox</groupId>

<artifactId>springfox-swagger-ui</artifactId>

</dependency>

<groupId>org.springframework.cloud</groupId>

<artifactId>spring-cloud-starter-openfeign</artifactId>

</dependency>

</dependencies>

步骤三：创建yml文件

server:

port: 8085

spring:

application:

name: auth-service

cloud:

nacos:

discovery:

server-addr: 127.0.0.1:8848 #nacos服务地址

sc:

jwt:

secret: sc@Login(Auth}*^31)&czxy% # 登录校验的密钥

pubKeyPath: D:/rsa/rsa.pub # 公钥地址

priKeyPath: D:/rsa/rsa.pri # 私钥地址

expire: 360 # 过期时间,单位分钟

步骤四：配置启动类

package com.czxy.changgou4;

import org.springframework.boot.SpringApplication;

import org.springframework.boot.autoconfigure.SpringBootApplication;

import org.springframework.cloud.client.discovery.EnableDiscoveryClient;

import org.springframework.cloud.openfeign.EnableFeignClients;

/**

* @author 桐叔

* @email liangtong@itcast.cn

@SpringBootApplication

@EnableDiscoveryClient

@EnableFeignClients

public class CGAuthServiceApplication {

public static void main(String[] args) {

SpringApplication.run(CGAuthServiceApplication.class, args);

}

步骤五：配置类

1. 1. 认证服务：用户登录后端
步骤一：创建AuthUser 封装对象（与User比较，缺数据库相关注解）

package com.czxy.changgou4.domain;

import lombok.Data;

import java.util.Date;

/**

* @author 桐叔

* @email liangtong@itcast.cn

@Data

public class AuthUser {

private Long id;

private String username;

private String password;

private String face;

private Integer expriece;

private String email;

private String mobile;

private Date createdAt;

private Date updatedAt;

private String code;

private String password_confirm;

}

步骤二：创建UserFeign，完成远程用户查询功能

package com.czxy.changgou4.feign;

import com.czxy.changgou4.domain.AuthUser;

import org.springframework.cloud.openfeign.FeignClient;

import org.springframework.web.bind.annotation.PostMapping;

import org.springframework.web.bind.annotation.RequestBody;

/**

* @author 桐叔

* @email liangtong@itcast.cn

@FeignClient(value = "web-service",path="/user")

public interface UserFeign {

@PostMapping("/findByUsername")

public AuthUser findByUsername(@RequestBody AuthUser user);

}

步骤三：创建AuthService接口，编写登录方法 login()

package com.czxy.changgou4.service;

import com.czxy.changgou4.domain.AuthUser;

/**

* @author 桐叔

* @email liangtong@itcast.cn

public interface AuthService {

/**

* 用户登录

* @param user

* @return

public AuthUser login(AuthUser user ) ;

}

步骤四：创建AuthService实现类，并通过BCrypt校验密码

package com.czxy.changgou4.service.impl;

import com.czxy.changgou4.domain.AuthUser;

import com.czxy.changgou4.feign.UserFeign;

import com.czxy.changgou4.service.AuthService;

import com.czxy.changgou4.utils.BCrypt;

import org.springframework.stereotype.Service;

import javax.annotation.Resource;

/**

* @author 桐叔

* @email liangtong@itcast.cn

@Service

public class AuthServiceImpl implements AuthService {

@Resource

private UserFeign userFeign;

/**

* 用户登录

* @param user

* @return

public AuthUser login(AuthUser user ) {

//远程查询用户

AuthUser findUser = userFeign.findByUsername(user);

if(findUser == null) {

return null;

}

//校验密码是否正确

boolean checkpw = BCrypt.checkpw( user.getPassword(), findUser.getPassword());

if(checkpw){

return findUser;

}

return null;

}

步骤五：创建AuthController，添加login方法
1. redis中登录验证码和用户输入的验证码进行匹配

package com.czxy.changgou4.controller;

/**

* @author 桐叔

* @email liangtong@itcast.cn

import com.czxy.changgou4.domain.AuthUser;

import com.czxy.changgou4.service.AuthService;

import com.czxy.changgou4.vo.BaseResult;

import org.springframework.data.redis.core.StringRedisTemplate;

import org.springframework.web.bind.annotation.PostMapping;

import org.springframework.web.bind.annotation.RequestBody;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RestController;

import javax.annotation.Resource;

/**

* Created by liangtong.

@RestController

@RequestMapping("/auth")

public class AuthController {

@Resource

private AuthService authService;

@Resource

private StringRedisTemplate stringRedisTemplate;

@PostMapping("/login")

public BaseResult login(@RequestBody AuthUser user){

//校验验证码--使用后删除

String redisCode = stringRedisTemplate.opsForValue().get( "login" + user.getUsername() );

stringRedisTemplate.delete( "login" + user.getUsername() );

if(redisCode == null) {

return BaseResult.error("验证码无效");

}

if(! redisCode.equalsIgnoreCase(user.getCode())) {

return BaseResult.error("验证码错误");

}

//登录

AuthUser loginUser = authService.login(user);

if(loginUser != null ) {

return BaseResult.ok("登录成功").append("loginUser",loginUser);

} else {

return BaseResult.error("用户名或密码不匹配");

}

1. 1. 认证服务：用户登录前端
步骤一：修改apiclient.js，添加login函数

//登录

return axios.post('/auth-service/auth/login', user )

}

步骤二：修改Login.vue，给验证码绑定变量

步骤三：修改Login.vue，给提交按钮绑定事件

<li>

</li>

步骤四：编写loginFn完成登录功能
1. 登录成功，跳转到首页
2. 登录失败，给出提示

async loginFn() {

let { data } = await this.$request.login( this.user )

if( data.code == 20000) {

//成功

sessionStorage.setItem('user' , JSON.stringify(data.other.loginUser) )

//跳转到首页

this.$router.push('/')

} else {

this.errorMsg = data.message

}

步骤五：创建首页 ~/pages/index.vue，

<div>

</div>

</template>

import TopNav from '../components/TopNav'

export default {

head: {

title: '首页',

link: [

{rel:'stylesheet',href:'style/index.css'},

{rel:'stylesheet',href:'style/bottomnav.css'}

script: [

{ type: 'text/javascript', src: 'js/header.js' },

{ type: 'text/javascript', src: 'js/index.js' },

]

components : {

TopNav,

}

</script>

<style>

</style>

步骤六：重命名静态页面 ~/static/index.html 为 ~/static/home.html

1. 1. 修改 TopNav.vue 组件

完善导航条，根据vuex中的数据，显示不同内容

步骤一：创建 ~/store/index.js ，并编写vuex内容

export const state = () => ({

user: null

})

//通用设置

export const mutations = {

setData( state , obj) {

state[obj.key] = obj.value

}

步骤二：页面登录成功，将用户信息保存到vuex中

// 将用户信息保存到vuex中

this.$store.commit('setData', {key:'user',value: data.data })

步骤三：修改顶部导航TopNav.vue
1. 从vuex中的数据

</div>

<ul>

<li v-if="user != null">您好，{{user.username}} 欢迎来到畅购！ <a href="" @click.prevent="logout">退出</a></li>

</ul>

</div>

</template>

import {mapState,mapMutations} from 'vuex'

export default {

mounted() {

let userStr = sessionStorage.getItem('user')

if(userStr){

// 将string数据转换object，并填充到vuex中

this.setData({key:'user',value: JSON.parse(userStr)})

}

methods: {

logout() {

sessionStorage.removeItem('user')

sessionStorage.removeItem('token')

//设置vuex中的数据为空

this.setData({key:'user',value: null })

this.$router.push('/login')

...mapMutations(['setData'])

computed: {

...mapState(['user'])

}

</script>

<style>

</style>

1. 1. vuex刷新数据丢失
刷新操作：
1. 点击刷新按钮
2. 点击回退按钮
3. 地址栏直接输入地址
现象：
1. vuex在刷新操作后，数据丢失了
解决方案
1. 方案1：不是公共组件：页面在pages目录下，可以nuxt.js提供 fetch进行操作。
2. 方案2：是公共组件：组件在components目录下，借助第三方进行存储（cookie、localStorage、sessionStorage）
  1. 选择1：sessionStorage存放数据，如果vuex中没有，将sessionStorage同步过去。
  2. 选择2：vuex中actions模块就可以发送ajax，从而同步数据。
具体操作：
1. 如果vuex中没有数据，使用sessionStorage的数据填充vuex。
2. 修改TopNav.vue页面