web第十次课后作业

最新推荐文章于 2024-07-04 17:17:59 发布

原创最新推荐文章于 2024-07-04 17:17:59 发布 · 186 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #java #开发语言

编写登陆界面

package controller;

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("无权限");

        }
    }
}

<!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>

<!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>

<!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
public interface Users2Mapper {
    @Select("select  *  from users  where name=#{name} and password =#{password}")
    public Users getBynameAndPassword2(Users users);
 
}