2021-2-13 小项目一:homeInfo

最新推荐文章于 2024-10-04 12:19:51 发布

大大陈·

最新推荐文章于 2024-10-04 12:19:51 发布

阅读量162

点赞数

分类专栏： java项目文章标签： java spring

本文链接：https://blog.csdn.net/m0_46258409/article/details/113799228

版权

java项目专栏收录该内容

2 篇文章 0 订阅

订阅专栏

小项目一:homeInfo

技术总纲
项目流程

技术总纲

mybatis-plus 3.4.1
springboot 3.7
maven 3.5.4
shiro
druid
kaptcha
axios

项目流程

1. 登录操作
2. 注册
3. 查看信息
4. 分页

一.登录操作代码

 @GetMapping("/login")
    public String login(){
        return "login";
    }
/**
     * 登录操作
     * @param
     * @return
     */
    @ResponseBody
    @GetMapping("/dologin")
    public Result doLogin(String cardid,String password,String kaptch){
        //查询是否有此用户
       if(StrUtil.hasBlank(cardid,password)){
          return Result.fail("身份证号或密码错误");
       }

       String captcha=(String) request.getSession().getAttribute(KAPTCHA_SESSION_KEY);
       //判斷 驗證碼 是否正確
        System.out.println("captcha = " + captcha);
        if (kaptch == null || !kaptch.equalsIgnoreCase(captcha)) {
            return Result.fail("验证码输入错误");
        }
       //加密
        UsernamePasswordToken token
                = new UsernamePasswordToken(cardid,SecureUtil.md5(password));

        try {
            SecurityUtils.getSubject().login(token);
            //失败之后返回结果
        } catch (AuthenticationException e) {
            if (e instanceof UnknownAccountException) {
                return Result.fail("用户不存在");
            } else if (e instanceof LockedAccountException) {
                return Result.fail(e.getMessage());
            } else if (e instanceof IncorrectCredentialsException) {
                return Result.fail("密码错误");
            } else {
                return Result.fail("用户认证失败");
            }
        }


        return Result.success();
    }

1.1登录页面

<div id="homeMain" align="center">
    <form  id="login" method="get" onsubmit="return false" action="##">
        <h1>房产信息查询系统</h1>
        <table>
            <tr>
                <td>请输入身份证号:</td>
                <td><input type="text" name="cardid" value="101205196505283022"> </td>
            </tr>
            <tr>
                <td>请输入密码:</td>
                <td><input type="password" name="password" value="111111"></td>
            </tr>

        </table>
        <div id="btn">
         <button type="button" onclick="login()">登录</button>
            <a href="javascript:;" onclick="goRes()">注册</a>
            <input type="text" name="kaptch">
            <img src="/capthca.jpg" id="capthca">
        </div>
    </form>
</div>

1.2 登录代码解读：

<form  id="login" method="get" onsubmit="return false" action="##">

οnsubmit=“return false” 表单不执行提交操作
action="##" 表单不执行跳转
method=“get” 提交方式为get

<div id="btn">
         <button type="button" onclick="login()">登录</button>
            <a href="javascript:;" onclick="goRes()">注册</a>
            <input type="text" name="kaptch">
            <img src="/capthca.jpg" id="capthca">
        </div>

javascript:; 表示不执行超链接跳转操作

 //登录 返回后台传出结果
function login(){
    var form =$("#login").serialize();
    form = decodeURIComponent(form,true);
    axios.get('/dologin?'+form)
        .then(function (res){
            console.log(res.data);
            if(res.data.status==200){
                window.location.href="/main"
            }
            alert(res.data.msg)
        }).catch(error=>{
        console.log(error)
    })
}

$("#login").serialize(); 表示将form表单name属性的值序列化

例如：var form =$("#login").serialize();
			form = name=李四&age=13
			
localhost:8080/list?name=李四&age=13

解决表单内容序列化乱码问题：

form = decodeURIComponent(form,true);

email=admin%颠三倒四11.com会出现乱码

form = decodeURIComponent(form,true);

email=admin@11.com

响应处理

axios.get('/dologin?'+form)
        .then(function (res){
            console.log(res.data);
            if(res.data.status==200){
                window.location.href="/main"
            }
            alert(res.data.msg)
        }).catch(error=>{
        console.log(error)
    })

res -> response
res.data ->表示后台传入的对象

二：注册页面操作代码

@ResponseBody
    @PostMapping("/register")
    public Result register(Users users,String repass){
        System.out.println("进入注册============》"+users);

        ValidationUtil.ValidResult validResult = ValidationUtil.validateBean(users);
        if(validResult.hasErrors()) {
            return Result.fail(validResult.getErrors());
        }

        if(!users.getPassword().equals(repass)){
            return Result.fail("两次密码不一致，请重新输入");
        }
        if(users.getCardid().trim().length()!=18){
            return Result.fail("身份证号必须为18位");
        }
        int cardId = usersService.count(new QueryWrapper<Users>()
                .eq("cardId", users.getCardid()));
        if(cardId==1){
            return Result.fail("该身份证号已有账户，请重新输入");
        }
        users.setPassword(SecureUtil.md5(users.getPassword()));
        users.setGender(0);
        users.setCreatetime(new Date());
        users.setStatus(1);
        usersService.save(users);
        return Result.success();
    }

2.1 注册代码解读

ValidationUtil.ValidResult validResult = ValidationUtil.validateBean(users);

需要引入
1 .ValidationUtil.java 工具类网上找这个
2. maven引入↓

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-validation</artifactId>
</dependency>

目的：进行实体类校验

2.2 注册页面

 <form  id="formRegister" method="post" onsubmit="return false" action="##">
        <h1>账号注册</h1>
        <table>
            <tr>
                <td>身份证号:</td>
                <td><input type="text" name="cardid"> </td>
            </tr>
            <tr>
                <td>用户名:</td>
                <td><input type="text" name="name"></td>
            </tr>
            <tr>
                <td>密码:</td>
                <td><input type="password" name="password"></td>
            </tr>
            <tr>
                <td>确认密码:</td>
                <td><input type="password" name="repass"></td>
            </tr>
        </table>
        <div style="margin-top: 10px">
            <button type="button" onclick="javascript:register();">注册</button>
            <button onclick="javascript:formRegister.reset();return false">重置</button>
        </div>

    </form>

可以用 id值获得此元素

 <button onclick="javascript:formRegister.reset();return false">重置</button>

注册操作同上 登录操作 ajax完成

三：信息展示 main.html

 <form action="" id="myform">
                <h3>房产信息查询</h3>
                <p>查询类型：
                    <select name="type" id="type">

                        <option value="name">用户名</option>
                        <option value="cardId">身份证</option>
                    </select>

                    <input type="text" name="value" id="value">
                    <input type="button" value="查找" th:onclick="query()">
                </p>
                <table border="1">
                        <thread>
                            <tr>
                                <th>序号</th>
                                <th>项目名称</th>
                                <th>产权人</th>
                                <th>身份证号</th>
                                <th>房屋类型</th>
                                <th>使用面积</th>
                                <th>建造时间</th>
                            </tr>
                        </thread>
                    </tbody>
                        <tbody id="table">
                        	<!-- ${application.page.records} 存储到servletContext会话
                        		相当于application作用于 全局-->
                                <tr th:each="item,index:${application.page.records}">
                                    <td th:text="${item.id}"></td>
                                    <td th:text="${item.projectname}"></td>
                                    <td th:text="${item.userName}"></td>
                                    <td th:text="${item.cardid}"></td>
                                    <td th:text="${item.housetype}"></td>
                                    <td th:text="${item.area}"></td>
                                    <td th:text="${item.buildtime}"></td>
                                </tr>
                        </tbody>
                </table>
                <div id="pageList">
                    <a href="javascript:;" th:onclick="query(1)" >首页 | </a>
                    <a href="javascript:;" th:onclick="|query(${application.page.current -1})|"><<上一页 | </a>
                    <a href="javascript:;" th:onclick="|query(${application.page.current +1})|">下一页>> |</a>
                    <a href="javascript:;" th:onclick="|query(${application.page.pages})|">尾页</a>
                    <span id="page">第[[${application.page.current}]]页/共[[${application.page.pages}]]页(共[[${application.page.total}]])条</span>
                </div>
            </form>

javascript

此操作相当于将页面所有查询条件放入执行查询
使用${list} 获取数据为es6新语法 可在`` 中 使用外部定义变量

 function query(pn){

        if(pn == "undifined"){
            pn=1;
        }
        console.log(pn+"pn");

        var type = document.getElementById("type").value;
        var value=document.getElementById("value").value;
        console.log(type+'type'+value+'value');

//执行查询操作
        axios.get('selectIndexInfo', {
            params: {
                "type":type,
                "value":value,
                "pn":pn
            }
        })
            .then(function (res) {
                let list =res.data.data;  //获得ipage
                console.log("list"+list.current)
                // 上一页
                var pre =list.current<=1?list.current:list.current-1;
                //下一页
                var next =list.current>=list.pages?list.current:list.current+1;

                let item =res.data.data.records;  //获得集合
                let temp='';
                for (let i = 0; i < item.length; i++) {
                   temp+=`<tr>
                                    <td>${item[i].id}</td>
                                    <td>${item[i].projectname}</td>
                                    <td>${item[i].userName}</td>
                                    <td>${item[i].cardid}</td>
                                    <td>${item[i].housetype}</td>
                                    <td>${item[i].area}</td>
                                    <td>${item[i].buildtime}</td>
                                </tr>`
                }
                let page=`<a href="javascript:;" οnclick="query(1)" >首页 | </a>
                    <a href="javascript:;" οnclick="query(${pre})"><<上一页 | </a>
                    <a href="javascript:;" οnclick="query(${next})">下一页>> |</a>
                    <a href="javascript:;" οnclick="query(${list.pages})">尾页</a>
                    <span id="page">第${list.current}页/共${list.pages}页(共${list.total})条</span>

                `
                // 填充
                var pageList =document.getElementById("pageList");
                var table =document.getElementById("table");
                pageList.innerHTML=page;
                table.innerHTML=temp;


            })
            .catch(function (error) {
                console.log(error);
            });
    }