javaweb第十次作业

花荣04

于 2024-06-23 16:49:29 发布

阅读量215

点赞数 2

文章标签： spring boot mybatis 开发语言

本文链接：https://blog.csdn.net/2301_79689379/article/details/139902421

版权

利用会话进行登陆操作

制作管理人员表

实体

package com.itheima.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Manage {
    private Integer id;
    private String name;
    private String gender;
    private String password;
}

LoginController

package com.itheima.controller;

import com.itheima.pojo.Manage;
import com.itheima.pojo.Result;
import com.itheima.service.ManageService;
import lombok.extern.slf4j.Slf4j;
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;

@Slf4j
@RestController
public class LoginController {
    @Autowired
    private ManageService manageService;

    //采用form传参数
    @PostMapping("/login_session")
    public Result login(HttpServletRequest request, @RequestBody Manage manage) {
        Manage e = manageService.login(manage);
        if (e != null) {
            request.getSession().setAttribute("name", manage.getName());
            String name = (String) request.getSession().getAttribute("name");
            System.out.println("查询不为空。"+name);
            return Result.success();
        }
        else{
            String name = (String) request.getSession().getAttribute("name");
            System.out.println("查询为空。"+name);
            return Result.error("用户名或密码错误");
        }

    }

    @GetMapping("/logout")
    public Result logout(HttpServletRequest request) {
        //清理Session中保存的当前登录员工的id
        request.getSession().removeAttribute("name");
        return Result.success("退出成功");
    }

    @GetMapping("/index1")
    public Result first(HttpServletRequest request) {
        String name = (String) request.getSession().getAttribute("name");
        if (name != null) {
            return Result.success();
        }
        else {
            return Result.error("无权限");

        }
    }

    @GetMapping("/petAdoption")
    public Result index2(HttpServletRequest request) {
        String name = (String) request.getSession().getAttribute("name");
        if (name != null) {
            return Result.success();
        } else {
            return Result.error("无权限");

        }
    }



}

ManageMapper

package com.itheima.mapper;

import com.itheima.pojo.Manage;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

@Mapper
public interface ManageMapper {

        @Select("select * from manage where name=#{name} and password=#{password}")
        Manage getByUsernameAndPassword(Manage manage);

    }

ManageService

package com.itheima.service;

import com.itheima.pojo.Manage;

public interface ManageService {
    /*
    员工登录操作
     */
    Manage login (Manage manage);
}

ManageServiceImpl

package com.itheima.service.impl;

import com.itheima.mapper.ManageMapper;
import com.itheima.pojo.Manage;
import com.itheima.service.ManageService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class ManageServiceImpl implements ManageService {
    @Autowired
    private ManageMapper manageMapper;

    @Override
    public Manage login(Manage manage) {

        return manageMapper.getByUsernameAndPassword(manage) ;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login</title>

</head>
<link rel="stylesheet" href="element-ui/index.css">
<script src="./js/vue.js"></script>
<script src="./element-ui/index.js"></script>
<script src="./js/axios-0.18.0.js"></script>
<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>

index1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login</title>

</head>
<link rel="stylesheet" href="element-ui/index.css">
<script src="./js/vue.js"></script>
<script src="./element-ui/index.js"></script>
<script src="./js/axios-0.18.0.js"></script>
<body>
<div id="app">



    <div v-if="tableData.code==1">
        <h1 align="center">页面1--成功</h1>
        <a href="petAdoption.html">页面2</a>
        <a href="logout">退出登录</a>


    </div>

    <div v-else-if="tableData.code==0">
        {{tableData.code}}没有权限访问！
        <a href="login.html">去登录</a>
    </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>

petAdoption.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>pet</title>
</head>
<link rel="stylesheet" href="element-ui/index.css">
<script src="./js/vue.js"></script>
<script src="./element-ui/index.js"></script>
<script src="./js/axios-0.18.0.js"></script>
<body>
<div id="app"  v-if=" code ==1">
    <a href="index1.html">页面1</a>
    <a href="logout">退出登录</a>
    <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.kind" placeholder="种类"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-input v-model="formInline.gender" placeholder="雄：1，雌：2"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
    </p>
<el-table
        :data="tableData.filter(data => !search || data.kind.toLowerCase().includes(search.toLowerCase()))"
        style="width: 100%">
    <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="age">
    </el-table-column>
    <el-table-column
            label="种类"
            prop="kind">
    </el-table-column>
    <el-table-column
            label="图片"
            prop="picture">
        <template slot-scope="scope">
            <img :src="scope.row.picture" width="100px" height="70px">
        </template>

    </el-table-column>
    <el-table-column
            label="性格"
            prop="characteristics">
    </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.$index, scope.row)">编辑</el-button>
            <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</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=" code ==0">
   没有权限访问！
    <a href="login.html">去登录</a>
</div>

<script>
    new Vue({
        el:"#app",
        data: {
            search: '',
            currentPage: 1,
            pageSize: 10,
            total: null,
            code:null,
            tableData: [],
            formInline:{
                kind:'',
                gender:''
            }
        },


        methods: {
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                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 = `/petAdoption/${this.currentPage}/${this.pageSize}?kind=${encodeURIComponent(this.formInline.kind)}&gender=${encodeURIComponent(this.formInline.gender)}`

                console.log(this.formInline.kind);
                console.log(this.formInline.gender);


                axios.get(url)
                    .then(res =>{
                        this.tableData = res.data.data.rows;
                        this.total=res.data.data.total;
                        this.code=res.data.code;
                        console.log(this.tableData);
                        console.log(this.total);
                        console.log(this.code);
                    })
                    .catch(error=>{
                        console.error(error);
                    })

            },
            findAll() {

                var url = `/petAdoption/${this.currentPage}/${this.pageSize}`

                axios.get(url)
                    .then(res =>{
                        this.tableData = res.data.data.rows;
                        this.total=res.data.data.total;
                        this.code=res.data.code;
                        console.log(this.tableData);
                        console.log(this.total);
                        console.log(this.code);
                    })
                    .catch(error=>{
                        console.error(error);
                    })

            }

        },
        created(){
            this.findAll();
        }

    })


</script>

</body>
</html>

运行结果