Java课程设计个人博客（pokemon）

叭叭叭大王花

已于 2023-01-10 01:17:22 修改

阅读量435

点赞数 2

文章标签：课程设计前端

于 2023-01-10 00:53:18 首次发布

本文链接：https://blog.youkuaiyun.com/m0_71604832/article/details/128615705

版权

本文介绍了实现宝可梦仓库图鉴展示的前端项目，涉及用户登录注册、数据增删改查。技术栈包括HTML、CSS、JavaScript、Vue.js和Axios。项目实现了动态验证码、记住密码功能，并使用ElementUI组件库。还展示了Vue中删除、搜索和表单操作的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

团队博客：

博客链接

负责模块：

本人负责前端项目的实现（即前端页面的设计与美化）（MVC的view）

前端项目简介：

该项目主要实现宝可梦仓库图鉴的展示，包括

用户登录与注册

对宝可梦数据的增删改查

个人学习并采用的技术：

html、css、javascrip、vue、axios

element组件的利用

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等，目前最新版本为HTML5。

CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助高效地开发用户界面。

Axios，是一个基于promise 的网络请求库

功能流程图：

项目层级(个人负责前端页面)：

项目需求分析：

web页面实现的简易操作流程：

制作页面欣赏：

登录页面

注册页面

用户仓库页面

补充介绍：

css的分装

<link href="css/register.css" rel="stylesheet">
    <%
        String path = request.getContextPath();
        String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/css/register.css";
    %>

    <link rel="stylesheet" href="<%=basePath%>" />

利用cookie记住密码的实现

<p>Username:<input id="username" name="username" value="${cookie.username.value}" type="text"></p>
<p>Password:<input id="password" name="password" type="password" value="${cookie.password.value}"></p>

从servlet得到注册页面验证码的实现，防止恶意刷库

利用当前时间的毫秒值实现每次验证码图片的变换

<tr>
                <td>验证码</td>
                <td class="inputs">
                    <input name="checkCode" type="text" id="checkCode">
                    <img id="checkCodeImg" src="/pokemon-game/user/getImage">
                    <a href="#" id="changeImg">看不清？</a>
                </td>
            </tr>

document.getElementById("changeImg").onclick = function (){
        document.getElementById("checkCodeImg").src = "/pokemon-game/user/getImage?"+new Date().getMilliseconds();
    }
    document.getElementById("checkCodeImg").onclick = function (){
        document.getElementById("checkCodeImg").src = "/pokemon-game/user/getImage?"+new Date().getMilliseconds();
    }

具体功能部分代码：

登录页面的body关键代码：

<div id="loginDiv" style="height: 350px">
    <form action="/pokemon-game/user/login" id="form" method="post">
        <h1 id="loginMsg">LOGIN IN</h1>
        <div id="errorMsg">${login_msg} ${register_msg}</div>
        <p>Username:<input id="username" name="username" value="${cookie.username.value}" type="text"></p>

        <p>Password:<input id="password" name="password" type="password" value="${cookie.password.value}"></p>
        <p>Remember:<input id="remember" name="remember" value="1" type="checkbox"></p>
        <div id="subDiv">
            <input type="submit" class="button" value="login up">
            <input type="reset" class="button" value="reset">&nbsp;&nbsp;&nbsp;
            <a href="register.jsp">没有账号？</a>
        </div>
    </form>
</div>

注册页面的body关键代码：

<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号？</span> <a href="login.jsp">登录</a>
    </div>
    <form id="reg-form" action="/pokemon-game/user/register" method="post">
        <table>

            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <input name="username" type="text" id="username">
                    <br>
                    <span id="username_err" class="err_msg">${register_msg}</span>
                </td>

            </tr>

            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>


            <tr>
                <td>验证码</td>
                <td class="inputs">
                    <input name="checkCode" type="text" id="checkCode">
                    <img id="checkCodeImg" src="/pokemon-game/user/getImage">
                    <a href="#" id="changeImg">看不清？</a>
                </td>
            </tr>

        </table>

        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn">
        </div>
        <br class="clear">
    </form>


</div>

Vue对象中的删除method：

deleteById(index, row) {
                this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //点击确认
                    console.log(123);
                    axios({
                        method: "post",
                        url: "http://localhost:8080/pokemon-game/pokemon/deleteById",
                        data: row.pokemonId
                    }).then(resp => {
                        //console.log(index, row);
                        if (resp.data == "success") {
                            this.selectAll();
                            this.$message({
                                message: '恭喜你，删除成功',
                                type: 'success'
                            });

                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

搜索表单（element-ui）

<!--搜索表单-->
    <el-form :inline="true" :model="pokemon" class="demo-form-inline">

        <el-form-item label="属性">
            <el-select v-model="pokemon.type" placeholder="属性">
                <el-option label="无" value=""></el-option>
                <el-option label="火" value="火"></el-option>
                <el-option label="水" value="水"></el-option>
                <el-option label="草" value="草"></el-option>
                <el-option label="电" value="电"></el-option>
                <el-option label="龙" value="龙"></el-option>
                <el-option label="毒" value="毒"></el-option>
                <el-option label="妖" value="妖"></el-option>
                <el-option label="一般" value="一般"></el-option>
                <el-option label="格斗" value="格斗"></el-option>
                <el-option label="飞行" value="飞行"></el-option>
                <el-option label="超能力" value="超能力"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="id">
            <el-input v-model="pokemon.pokemonId" placeholder="宠物id"></el-input>
        </el-form-item>

        <el-form-item label="名称">
            <el-input v-model="pokemon.pokemonName" placeholder="宠物名称"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>

增添表单（element-ui）

<!--添加数据对话框表单-->
    <el-dialog
            title="添加Pokemon"
            :visible.sync="dialogVisible"
            width="30%"
    >

        <el-form ref="form" :model="pokemon" label-width="80px">
            <el-form-item label="宠物id">
                <el-input v-model="pokemon.pokemonId"></el-input>
            </el-form-item>

            <el-form-item label="宠物名称">
                <el-input v-model="pokemon.pokemonName"></el-input>
            </el-form-item>

            <el-form-item label="能力">
                <el-input v-model="pokemon.ability"></el-input>
            </el-form-item>

            <el-form-item label="属性" v-model="pokemon.type">
                <el-select v-model="pokemon.type" placeholder="属性">
                    <el-option label="无" value=""></el-option>
                    <el-option label="火" value="火"></el-option>
                    <el-option label="水" value="水"></el-option>
                    <el-option label="草" value="草"></el-option>
                    <el-option label="电" value="电"></el-option>
                    <el-option label="龙" value="龙"></el-option>
                    <el-option label="毒" value="毒"></el-option>
                    <el-option label="妖" value="妖"></el-option>
                    <el-option label="一般" value="一般"></el-option>
                    <el-option label="格斗" value="格斗"></el-option>
                    <el-option label="飞行" value="飞行"></el-option>
                    <el-option label="超能力" value="超能力"></el-option>
                </el-select>
            </el-form-item>


            <el-form-item label="HP">
                <el-slider
                        v-model="pokemon.hp"
                        max="200"
                        show-input>
                </el-slider>
            </el-form-item>

            <el-form-item label="ATK">
                <el-slider
                        v-model="pokemon.atk"
                        max="200"
                        show-input>
                </el-slider>
            </el-form-item>

            <el-form-item label="DEF">
                <el-slider
                        v-model="pokemon.def"
                        max="200"
                        show-input>
                </el-slider>
            </el-form-item>

            <el-form-item label="SPA">
                <el-slider
                        v-model="pokemon.spa"
                        max="200"
                        show-input>
                </el-slider>
            </el-form-item>

            <el-form-item label="SPD">
                <el-slider
                        v-model="pokemon.spd"
                        max="200"
                        show-input>
                </el-slider>
            </el-form-item>

            <el-form-item label="SPE">
                <el-slider
                        v-model="pokemon.spe"
                        max="200"
                        show-input>
                </el-slider>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="addPokemon">提交</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>

修改表单（element-ui）

<!--修改表单-->
    <el-dialog
            title="更改信息"
            :visible.sync="updateVisible"
            width="30%"
    >

        <el-form ref="form" :model="pokemon" label-width="80px">
            <el-form-item label="宠物名称">
                <el-input v-model="pokemon.pokemonName"></el-input>
            </el-form-item>

            <el-form-item label="能力">
                <el-input v-model="pokemon.ability"></el-input>
            </el-form-item>


            <el-form-item label="属性" v-model="pokemon.type">
                <el-select v-model="pokemon.type" placeholder="属性">
                    <el-option label="无" value=""></el-option>
                    <el-option label="火" value="火"></el-option>
                    <el-option label="水" value="水"></el-option>
                    <el-option label="草" value="草"></el-option>
                    <el-option label="电" value="电"></el-option>
                    <el-option label="龙" value="龙"></el-option>
                    <el-option label="毒" value="毒"></el-option>
                    <el-option label="妖" value="妖"></el-option>
                    <el-option label="一般" value="一般"></el-option>
                    <el-option label="格斗" value="格斗"></el-option>
                    <el-option label="飞行" value="飞行"></el-option>
                    <el-option label="超能力" value="超能力"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="HP">
                <el-slider
                        v-model="pokemon.hp"
                        max="200"
                        show-input>
                </el-slider>
            </el-form-item>

            <el-form-item label="ATK">
                <el-slider
                        v-model="pokemon.atk"
                        max="200"
                        show-input>
                </el-slider>
            </el-form-item>

            <el-form-item label="DEF">
                <el-slider
                        v-model="pokemon.def"
                        max="200"
                        show-input>
                </el-slider>
            </el-form-item>

            <el-form-item label="SPA">
                <el-slider
                        v-model="pokemon.spa"
                        max="200"
                        show-input>
                </el-slider>
            </el-form-item>

            <el-form-item label="SPD">
                <el-slider
                        v-model="pokemon.spd"
                        max="200"
                        show-input>
                </el-slider>
            </el-form-item>

            <el-form-item label="SPE">
                <el-slider
                        v-model="pokemon.spe"
                        max="200"
                        show-input>
                </el-slider>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="update()">提交</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>