1.基础登录功能
1.新建用户数据表
2.编写后端程序
LoginMapper.java:
package com.liuxiaocan.finalwork.Mapper;
import com.liuxiaocan.finalwork.Pojo.Login;
import org.apache.ibatis.annotations.Mapper;
@Mapper
public interface LoginMapper {
public Login login(Login login);
}
LoginMapper.xml:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.liuxiaocan.finalwork.Mapper.LoginMapper">
<select id="login" resultType="com.liuxiaocan.finalwork.Pojo.Login">
select * from login where account=#{account} and password=#{password}
</select>
</mapper>
LoginService.java:
package com.liuxiaocan.finalwork.Service;
import com.liuxiaocan.finalwork.Pojo.Login;
public interface LoginService {
public Login LoginService(Login login);
}
LoginServiceA.java
package com.liuxiaocan.finalwork.Service.Real;
import com.liuxiaocan.finalwork.Mapper.LoginMapper;
import com.liuxiaocan.finalwork.Pojo.Login;
import com.liuxiaocan.finalwork.Service.LoginService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
@Service
public class LoginServiceA implements LoginService {
@Autowired
LoginMapper loginMapper;
@Override
public Login LoginService(Login login) {
return loginMapper.login(login);
}
}
LoginController.java
package com.liuxiaocan.finalwork.Controller;
import com.liuxiaocan.finalwork.Pojo.Login;
import com.liuxiaocan.finalwork.Pojo.Result;
import com.liuxiaocan.finalwork.Service.LoginService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class LoginController {
@Autowired
LoginService loginService;
@PostMapping("/login")
public Result Login(@RequestBody Login login){
Login l=loginService.LoginService(login);
if(l!=null){
return Result.success();
}
else {
return Result.error();
}
}
}
login.java:
package com.liuxiaocan.finalwork.Pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Login {
private String account;
private String password;
}
利用postman测试接口是否正确,当输入正确账号密码时,可以传递成功信息,输入错误账号密码时,则传递失败信息。
1、编写登录页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录后信息放在session中</title>
<!-- 引入组件库 -->
<script src="js/jquery.min.js"></script>
<script src="js/vue.js"></script>
<script src="js/element.js"></script>
<script src="js/axios-0.18.0.js"></script>
<link rel="stylesheet" href="js/element.css">
</head>
<body>
<div id="app">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="姓名">
<el-input v-model="form.name">tom</el-input>
</el-form-item>
<el-form-item label="密码">
<el-input v-model="form.password">123</el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">提交</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
<script>
new Vue({
el:"#app",
data:{
form: {
name: '',
password: ''
},
tableData: []
},
methods:{
onSubmit() {
var url = `/login_session`
console.log(this.form.name);
console.log(this.form.password);
axios.post(url, {
name: this.form.name,
password: this.form.password
})
.then(response => {
this.tableData = response.data;
console.log(this.tableData);
location.href = '/index1.html'
//注意,一定要退出登录,才能再次输入密码账号验证,否则session依然有效。
})
.catch(error=>{
console.error(error);
})
}
}
})
</script>
</body>
</html>
controller
package com.example.controller;
import com.example.pojo.Result;
import com.example.pojo.Users;
import com.example.service.Users2Service;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
import javax.servlet.http.HttpServletRequest;
@RestController
public class LoginsessionController {
@Autowired
private Users2Service users2Service;
//采用form传参数
@PostMapping("/login_session")
public Result login(HttpServletRequest request, @RequestBody Users users) {
Users e = users2Service.login(users);
if (e != null) {
request.getSession().setAttribute("user", users.getName());
String user = (String) request.getSession().getAttribute("user");
System.out.println("查询不为空。"+user);
return Result.success();
}
else{
String user = (String) request.getSession().getAttribute("user");
System.out.println("查询为空。"+user);
return Result.error("用户名或密码错误");
}
}
@GetMapping("/logout")
public Result logout(HttpServletRequest request) {
//清理Session中保存的当前登录员工的id
request.getSession().removeAttribute("user");
return Result.success("退出成功");
}
@GetMapping("/index1")
public Result index1(HttpServletRequest request) {
String user = (String) request.getSession().getAttribute("user");
if (user != null) {
return Result.success();
} else {
return Result.error("无权限");
}
}
@GetMapping("/index2")
public Result index2(HttpServletRequest request) {
String user = (String) request.getSession().getAttribute("user");
if (user != null) {
return Result.success();
} else {
return Result.error("无权限");
}
}
}
index1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>必须成功登录才能访问</title>
<script src="./js/vue.js"></script>
<script src="./js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app">
<div v-if="tableData.code==1">
<h1 align="center">页面1--成功</h1>
<h2>
</h2>
<a href="index2.html">页面2</a>
<a href="logout">退出登录</a>
<table border="1">
<tr>
<th>id</th>
<th>author</th>
<th>gender</th>
<th>dynasty</th>
<th>title</th>
<th>style</th>
<th>操作</th>
</tr>
<!-- v-for="peot in tableData"-->
<tr>
<td>{{tableData.code}}</td>
<td>{{tableData.msg}}</td>
<td>{{tableData.data}}</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div v-else-if="tableData.code==0">
{{tableData.code}}没有权限访问!
</div>
</div>
<script>
new Vue({
el:"#app",
data:{
tableData: {
code:"" ,
msg:"" ,
data:""
}
},
mounted() {
var url = `/index1`
axios.get(url)
.then(response => {
this.tableData = response.data;
console.log(this.tableData);
})
.catch(error=>{
console.error(error);
})
}
})
</script>
</body>
</html>
index2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>必须成功登录以后才能访问</title>
<script src="./js/vue.js"></script>
<script src="./js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app">
<div v-if="tableData.code==1">
<h1 align="center">页面2--成功</h1>
<h2>
</h2>
<a href="index1.html">页面1</a>
<a href="logout">退出登录</a>
<table border="1">
<tr>
<th>id</th>
<th>author</th>
<th>gender</th>
<th>dynasty</th>
<th>title</th>
<th>style</th>
<th>操作</th>
</tr>
<!-- v-for="peot in tableData"-->
<tr>
<td>{{tableData.code}}</td>
<td>{{tableData.msg}}</td>
<td>{{tableData.data}}</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div v-else-if="tableData.code==0">
{{tableData.code}}没有权限访问!
</div>
</div>
<script>
new Vue({
el:"#app",
data:{
tableData: {
code:"" ,
msg:"" ,
data:""
}
},
mounted() {
var url = `/index2`
axios.get(url)
.then(response => {
//this.tableData = response.data;
this.tableData = response.data;
console.log(this.tableData);
})
.catch(error=>{
console.error(error);
})
}
})
</script>
</body>
</html>
mapper
@Mapper
public interface Users2Mapper {
@Select("select * from users where name=#{name} and password =#{password}")
public Users getBynameAndPassword2(Users users);
}
2.登录校验功能
1.简单cookie技术
通过响应头来设置cookie的值,请求头来携带cookie的值。
package com.liuxiaocan.finalwork.Controller;
import com.liuxiaocan.finalwork.Pojo.Result;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@RestController
public class SessionController {
@RequestMapping("/c1")
public Result setc(HttpServletResponse response){
response.addCookie(new Cookie("c1","first"));
return Result.success();
}
@RequestMapping("/c2")
public Result getc(HttpServletRequest request){
Cookie []cookies=request.getCookies();//得到所有的cookie
for(Cookie cookie:cookies){
if(cookie.getName().equals("c1")){
System.out.println(cookie.getValue());
}
}
return Result.success();
}
}
2.session技术
在服务器端创建session,将session的id值响应给浏览器端。
@GetMapping("/s1")
public Result sets(HttpSession session){
log.info("HttpSession-s1:{}",session.hashCode());
session.setAttribute("s1","second");//在session中存储值
return Result.success();
}
@GetMapping("/s2")
public Result gets(HttpServletRequest request){
HttpSession session=request.getSession();
log.info("HttpSession-s2:{}",session.hashCode());
Object s=session.getAttribute("s1");//取出session的值
log.info("s1:{}",s);
return Result.success();
}
3.令牌技术
配置jwt依赖:
<dependency>
<groupId>io.jsonwebtoken</groupId>
<artifactId>jjwt</artifactId>
<version>0.9.1</version>
</dependency>
自定义生成jwt令牌代码如下:
@SpringBootTest
class DemoApplicationTests {
@Test
public void Testjwt(){
Map<String,Object> map=new HashMap();//创造一个键值对集合map
map.put("name","feng");
map.put("age",20);
String s= Jwts.builder().signWith(SignatureAlgorithm.HS256,"helloweb").setClaims(map).setExpiration(new Date(System.currentTimeMillis()+3600*1000)).compact();
System.out.println(s);
}
}
解码后的json数据:
解析jwt令牌的代码如下:
@Test
public void parse(){
Claims claims= Jwts.parser()
.setSigningKey("helloweb")
.parseClaimsJws("eyJhbGciOiJIUzI1NiJ9.eyJuYW1lIjoibGl1IiwiZXhwIjoxNzE3Njg4NjQ0LCJhZ2UiOjE4fQ.1L35SnXco5iZlmt7cZE8ecGUpJ60DvqhciVnqhDbsR4")
.getBody();
System.out.println(claims);