主要内容：
基于第九次作业代码，补充实现登录功能，并进行session进行登录校对：只有输入用户名及密码正确的才能访问诗人信息列表页面，单独访问诗人信息列表页面，显示没有访问权限，同时设置退出功能，一次登录对应一次session校验，一次退出代表一次session校验结束。
准备工作（创建user表，进行登录验证）：
目录结构：
poetcontroller.java
package com.example.sun.controller;
import com.example.sun.pojo.Poet;
import com.example.sun.pojo.Result;
import com.example.sun.pojo.User;
import com.example.sun.service.PoetserviceA;
import com.example.sun.pojo.Poetbean;
import jakarta.servlet.http.HttpServletRequest;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
@RestController
public class poetcontroller {
@Autowired
private PoetserviceA poetserviceA;
@GetMapping("/poet1/{page}/{pageSize}")
/*@GetMapping("/poet")*/
public Result select(@PathVariable Integer page,
@PathVariable Integer pageSize,
String name,String style) {
Poetbean poetbean=poetserviceA.page(page,pageSize,name,style);
return Result.success(poetbean);
}
@GetMapping("/poet/{page}/{pageSize}")
/*@GetMapping("/poet")*/
public Result select( @PathVariable Integer page,
@PathVariable Integer pageSize) {
Poetbean poetbean=poetserviceA.page(page,pageSize);
return Result.success(poetbean);
}
@RequestMapping("/deletePoet")
public int deletePoet(Integer id){
return poetserviceA.delete(id);
}
@RequestMapping("/poetupdate")
public Result updatePoet(@RequestBody Poet poet){
boolean r = poetserviceA.update(poet);
if(r) {
// 成功 code==1
return Result.success();
} else {
// 失败 code==0
return Result.error("更新失败");
}
}
@RequestMapping("/poetfindById/{id}")
public Result poetfindById(@PathVariable("id") Integer id) {
return Result.success(poetserviceA.poetfindById(id));
}
@RequestMapping("/poetinsert")
public Result insert( @RequestBody Poet poet){
boolean result = poetserviceA.insert(poet);
if(result) {
// 成功 code==1
return Result.success();
} else {
// 失败 code==0
return Result.error("添加失败");
}
}
//采用form传参数
@PostMapping("/login_session")
public Result login(HttpServletRequest request, @RequestBody User user) {
User u = poetserviceA.getByNameAndPassword(user);
if (u!= null) {
request.getSession().setAttribute("user", user.getName());
String user1 = (String) request.getSession().getAttribute("user");
System.out.println("查询不为空。"+user1);
return Result.success(u);
}
else{
String user1 = (String) request.getSession().getAttribute("user");
System.out.println("查询为空。"+user1);
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 user1 = (String) request.getSession().getAttribute("user");
if (user1 != null) {
System.out.println(Result.success());
return Result.success();
} else {
return Result.error("无权限");
}
}
}
Poetmapper
package com.example.sun.mapper;
import com.example.sun.pojo.Poet;
import com.example.sun.pojo.User;
import org.apache.ibatis.annotations.*;
import java.util.List;
@Mapper
public interface Poetmapper {
//@Select("select count(*) from information")
public int count();
//@Select("select * from information limit #{start},#{pageSize}")
public List<Poet> select(Integer start, Integer pageSize);
/*@Select("select * from information")
public List<Poet> list();*/
//带条件的查询
//@Select("select * from information where name like concat('%',#{name},'%') ")
public List<Poet> list(String name,String style);
//@Delete("delete from information where id=#{id}")
public int deletePeot(Integer id);
//@Select("select * from information where id=#{id}")
public Poet poetfindById(Integer id);
//@Update("update information set name=#{name},gender=#{gender},dynasty=#{dynasty},title=#{title} ,style=#{style} where id=#{id} ")
public boolean update(Poet poet);
//@Insert("insert into information values (#{name},#{gender},#{dynasty},#{title},#{style})")
public int insert(Poet poet);
@Select("select * from user where name=#{name} and password=#{password}")
public User getByNameAndPassword(User user);
}
User.java
package com.example.sun.pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
String name;
String password;
}
Poetservice.java
package com.example.sun.service;
import com.example.sun.pojo.Poet;
import com.example.sun.mapper.Poetmapper;
import com.example.sun.pojo.Poetbean;
import com.example.sun.pojo.User;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class Poetservice implements PoetserviceA {
@Autowired
private Poetmapper poetmapper;
@Override
public Poetbean page(Integer page, Integer pageSize,String name,String style) {
/*int total=poetmapper.count();
int start=(page-1)*pageSize;
List<Poet> poetList=poetmapper.select(start, pageSize,name,style);
Poetbean poetbean=new Poetbean(total,poetList);
return poetbean;*/
// 设置分页参数
PageHelper.startPage(page, pageSize);
// 执行分页查询
List<Poet> poetList = poetmapper.list(name,style);
//System.out.println(poetList);
// 获取分页结果
//Page<Poet> p = (Page<Poet>) poetList;
PageInfo<Poet> p = new PageInfo<Poet>(poetList);
//封装PageBean
//Poetbean poetbean = new Poetbean(p.getTotal(), p.getResult());
Poetbean poetbean = new Poetbean(p.getTotal(), p.getList());
return poetbean;
}
@Override
public Poetbean page(Integer page, Integer pageSize) {
int total=poetmapper.count();
int start=(page-1)*pageSize;
List<Poet> poetList=poetmapper.select(start, pageSize);
Poetbean poetbean=new Poetbean(total,poetList);
return poetbean;
}
@Override
public int delete(Integer id) {
return poetmapper.deletePeot(id);
}
@Override
public boolean update(Poet poet) {
return poetmapper.update(poet);
}
@Override
public Poet poetfindById(Integer id) {
return poetmapper.poetfindById(id);
}
@Override
public boolean insert(Poet poet) {
int result=poetmapper.insert(poet);
return result==1;
}
@Override
public User getByNameAndPassword(User user) {
return poetmapper.getByNameAndPassword(user);
}
}
PoetserviceA
package com.example.sun.service;
import com.example.sun.pojo.Poet;
import com.example.sun.pojo.Poetbean;
import com.example.sun.pojo.User;
public interface PoetserviceA {
public Poetbean page(Integer page, Integer pageSize,String name,String style);
public Poetbean page(Integer page, Integer pageSize);
public int delete(Integer id);
public boolean update(Poet poet);
public Poet poetfindById(Integer id);
public boolean insert(Poet poet);
public User getByNameAndPassword(User user);
}
login.html
<!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" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
<el-alert
v-if="showError"
title="账号或密码错误"
type="error"
center
show-icon
style="position: absolute; top: 50%; left: 50%; transform: translate(-42%, -400%);">
</el-alert>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="姓名">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input v-model="form.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit" style="font-size: 20px; padding: 10px 20px; width: 200px;">登录</el-button>
</el-form-item>
</el-form>
</div>
<script>
new Vue({
el:"#app",
data:{
showError: false,
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 => {
if(response.data.code==1) {
this.tableData = response.data;
console.log(this.tableData);
location.href = '/show.html'
//注意，一定要退出登录，才能再次输入密码账号验证，否则session依然有效。
}
else if(response.data.code==0){
this.tableData=response.data;
this.showError=true;
setTimeout(() => {
this.showError = false; // 隐藏错误提示
}, 3000);
}
})
.catch(error=>{
console.error(error);
})
}
}
})
</script>
</body>
</html>
show.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>查询出所有并分页控件显示</title>
<link rel="stylesheet" href="js/element.css">
</head>
<body style="align:center">
<div id="app" style="width: 80%;align:center" >
<div v-if="tableData1.code==1">
<h1 align="center">诗人信息</h1>
<p align="center">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="姓名">
<el-input v-model="formInline.name" placeholder="姓名"></el-input>
</el-form-item>
<el-form-item label="风格">
<el-input v-model="formInline.style" placeholder="风格"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="onSubmit" >查询</el-button>
</el-form-item>
<el-form-item>
</el-form-item>
<el-form-item>
</el-form-item>
<el-form-item>
</el-form-item>
<el-form-item>
</el-form-item>
<el-form-item>
</el-form-item>
<el-form-item>
</el-form-item>
<el-form-item>
<el-button type="danger" icon="el-icon-switch-button" @click="logout">退出</el-button>
</el-form-item>
</el-form>
</p>
<p align="right">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item>
<el-button type="primary" icon="el-icon-plus" @click="insert">添加</el-button>
</el-form-item>
</el-form>
</p>
<el-table
:data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
style="width: 100%;align:center;font-size: 20px">
<el-table-column
label="id"
prop="id">
</el-table-column>
<el-table-column
label="姓名"
prop="name">
</el-table-column>
<el-table-column
label="性别"
prop="gender">
</el-table-column>
<el-table-column
label="朝代"
prop="dynasty">
</el-table-column>
<el-table-column
label="头衔"
prop="title">
</el-table-column>
<el-table-column
label="风格"
prop="style">
</el-table-column>
<el-table-column
align="right">
<template slot="header" slot-scope="scope">
<el-input
v-model="search"
size="mini"
placeholder="输入关键字搜索"/>
</template>
<template slot-scope="scope">
<el-button size="mini"
@click="handleEdit(scope.row.id)">编辑</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<p align="center">
<el-pagination
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[3, 5, 10, 20]"
:page-size="pageSize"
:total="total">
</el-pagination>
</p>
</div>
<div v-else-if="tableData1.code==0" >
{{tableData1.code}}无权限访问
</div>
</div>
<!-- 引入组件库 -->
<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>
<script>
new Vue({
el:"#app",
data: {
search: '',
currentPage: 1,
pageSize: 3,
total: null,
tableData: [],
tableData1:[],
tableData2:[],
formInline: {
name: '',
style: ''
}
},
methods: {
logout(){
window.open('http://localhost:8080/logout')
},
insert(){
window.open('http://localhost:8080/poet_insert.html')
},
handleEdit(id) {
window.open('http://localhost:8080/poet_edit.html?id='+id)
console.log(index, row);
},
handleDelete(id) {
var _thisd = this;
if (window.confirm("确定要删除该条数据吗？？？")) {
axios.post('/deletePoet?id=' + id)
.then(function (response) {
alert("删除成功")
_thisd.findAll();
})
.catch(function (error) {
console.log(error);
});
}
console.log(index, row);
},
handleSizeChange(val) {
this.pageSize = val;
this.findAll();
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
this.currentPage = val;
this.findAll();
console.log(`当前页: ${val}`);
},
onSubmit() {
var url = `/poet1/${this.currentPage}/${this.pageSize}?name=${encodeURIComponent(this.formInline.name)}&style=${encodeURIComponent(this.formInline.style)}`
console.log(this.formInline.name);
console.log(this.formInline.style);
axios.get(url)
.then(res =>{
this.tableData = res.data.data.rows;
this.total=res.data.data.total;
console.log(this.tableData);
console.log(this.total);
})
.catch(error=>{
console.error(error);
})
},
/*mounted() {
var url1 = `/index1`
axios.get(url1)
.then(response => {
this.tableData1 = response.data;
console.log(this.tableData1);
})
.catch(error=>{
console.error(error);
})
},*/
findAll() {
var url1 = `/index1`
axios.get(url1)
.then(response => {
this.tableData1 = response.data;
console.log(this.tableData1);
})
.catch(error=>{
console.error(error);
})
var url = `/poet/${this.currentPage}/${this.pageSize}`
axios.get(url)
.then(res => {
this.tableData = res.data.data.rows;
this.total = res.data.data.total;
console.log(this.tableData);
console.log(this.total);
})
.catch(error => {
console.error(error);
})
},
},
created(){
this.findAll();
}
})
</script>
</body>
</html>
效果展示：
100
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
