第十次课后作业

最新推荐文章于 2024-09-13 14:34:15 发布

︎喻喻郑

最新推荐文章于 2024-09-13 14:34:15 发布

阅读量218

点赞数 3

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/2303_77051594/article/details/139901753

版权

一.新建账号表

二、编写登录页面

关键代码：

1.mapper:

@Mapper
public interface LoginMapper {
    @Select("select * from my01.login where users=#{users} and password=#{password}")
    public Login getByusersAndpassword(Login login);

}

2.Service:

@Service
public class LoginServiceA implements LoginService {

    @Autowired
    LoginMapper loginMapper;
    @Override
    public Login LoginService(Login login){
        return loginMapper.getByusersAndpassword(login);
    }
}

3.Controller:

@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("用户名或密码错误!");
        }
    }
}

4.login.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>
  <link rel="stylesheet" href="element-ui/index.css">
  <script src="./element-ui/index.js"></script>
</head>
<body style="background-color: #e2dbdb;margin-top: 0">
<div id="app" style="width: 600px;
    text-align: center;
    margin: auto;
    margin-top: 7%;
    background-color:#e89db1;
    height: 400px;
    border-radius: 5%;
    ">
  <div style="width: 50px;float: left;display: inline-block;margin-top: 40px">
    <img src="surpermarket.png" alt="超市管理" width="285px">
  </div>
  <div style="width: 300px;float: right;display: inline-block;margin-top: 100px;margin-right: 40px">
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="账号" prop="users">
        <el-input v-model="ruleForm.users" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</div>

<script>
  new Vue({
    el:"#app",
    data() {
      const validateUsers = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入账号'));
        }
        if(value.length!=12){
          callback(new Error('账号应该是十二位数！'));
        }
        else {
          callback();
        }
      };
      const validatePassword=(rule,value,callback)=>{
        if(value === ''){
          callback(new Error('请输入密码'));
        }
        if(value.length!=8){
          callback(new Error('密码应该是八位数！'));
        }
        else{
          callback();
        }
      }
      return{
        ruleForm:{
          users:'',
          password:''
        },
        rules:{
          users: [
            {
              validator: validateUsers, trigger: 'blur'
            }
          ],
          password: [{
            validator: validatePassword, trigger: 'blur'
          }]
        }
      }
    },
    methods:{
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            axios.post("/login",this.ruleForm,
                    {headers: {
                        'Content-Type': 'application/json'
                      }}).then(r=>{
              if(r.data.code==1){
                window.location.href='factory01.html'
              }
              else{
                window.alert("账号或者密码错误！！！")
                this.resetForm(formName)
              }
            }).catch(error=>{
              console.error(error);
            })
          } else {
            console.log('提交失败！！！！');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },
    mounted(){

    }
  })
</script>
</body>
</html>

5.成功登录：

三、用Session实现登录校验功能：

功能描述：账号密码正确，登录信息写入session中，则每个页面可以通过读取session信息判断是否为有权限。如果没有写入session，或者session信息被清除了，则通过判断确定没有权限访问。

1.未登录时直接访问factory01.html页面：会出现没有权限访问的提示

代码：

在Controller中增加代码：

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

    }

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

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

        }
 }

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

        }
    }

修改login.html代码：

      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            axios.post("/login_session",this.ruleForm,//将login修改为login_session
                    {headers: {
                        'Content-Type': 'application/json'
                      }}).then(r=>{
              if(r.data.code==1){
                window.location.href='factory01.html'
              }
              else{
                window.alert("账号或者密码错误！！！")
                this.resetForm(formName)
              }
            }).catch(error=>{
              console.error(error);
            })
          } else {
            console.log('提交失败！！！！');
            return false;
          }
        });
      }

在factory01.html中增加

<div v-if="login.code==1">
    ...//登录以后的页面
</div>

<div v-else-if="login.code==0" >
    ！！！您没有权限访问！！！请先<a href="login.html">登录</a>!!!
</div>

2、访问login.html页面输入账号密码，如果不正确，提示错误。如果正确，则自动跳转到factory01.html。

3、通过页面中的退出登录链接，退出登录

4、再访问factory01.html，则提示没有权限访问的提示

四、Cookie会话技术：

︎喻喻郑

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫