英雄管理系统

最新推荐文章于 2023-04-06 21:18:56 发布
最新推荐文章于 2023-04-06 21:18:56 发布
阅读量891 收藏 2
点赞数 1
分类专栏： nodejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/smile_team/article/details/107325901
版权
该博客介绍了英雄管理系统的实现，包括HTML页面（add.html, edit.html, index.html, login.html）和JavaScript部分。讨论了数据库连接（如果不存在则创建）、Model的创建用于增删改查，以及接口编写，如英雄列表查询、详情查询、编辑、删除和新增。还提到了接口逻辑思维图以及用户注册和登录功能。" 113671520,10293425,Python实现朴素贝叶斯文本分类,"['Python', '机器学习', '文本处理', '分类算法', '朴素贝叶斯']
摘要由CSDN通过智能技术生成

CSS内容

add.html

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="./lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

    <!--
        HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
      -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .wrap {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: url('images/bg03.jpg') center bottom no-repeat;
            overflow: auto;
        }

        .navbar-brand {
            padding: 10px 15px;
        }

        .page-title {
            font-size: 16px;
            font-weight: bold;
        }

        .file-input {
            outline: none;
            display: inline-block;
            margin-top: 5px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-horizontal {
            margin-top: 10px;
        }

        .logout {
            font-weight: 900;
            font-size: 20px;
            color: #ff0000;
            text-decoration: none;
        }

        .logout:hover {
            text-decoration: none;
            color: yellowgreen;
        }

        .preview {
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
<div class="wrap">
    <nav class="navbar  navbar-inverse navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mymenu">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"><img src="images/logo.png"></a>
            </div>
        </div>
    </nav>

    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading clearfix">
                        <div class="row">
                            <div class="col-md-6 page-title">新增英雄</div>
                            <div class="col-md-6 text-right">当前位置：首页 &gt; 新增英雄</div>
                        </div>
                    </div>
                    <div class="panel-body">
                        <form action="#" method="" class="form-horizontal">
                            <div class="form-group">
                                <label for="heroName" class="col-sm-2 control-label">姓名</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="heroName" name="name" placeholder="请输入姓名" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="skillName" class="col-sm-2 control-label">技能</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="skillName" name="skill" placeholder="请输入技能" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="heroIcon" class="col-sm-2 control-label">头像</label>
                                <div class="col-sm-10">
                                    <input type="file" class="file-input" id="heroIcon" name="icon" />
                                    <img src="" class="preview" alt="" />
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <button type="submit" class="btn btn-success btn-add">
                                        新 增
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

</html>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="./lib/bootstrap/js/jquery-1.12.4.js"></script>
<!--
  Include all compiled plugins (below), or include individual files as needed
-->
<script src="./lib/bootstrap/js/bootstrap.min.js"></script>
<script>
    $(function () {
        $('#heroIcon').on('change', function () {
            var dataFile=URL.createObjectURL(this.files[0]);
            $('.preview').attr('src',dataFile);
            // console.log(dataFile)
        });
        $('.btn-add').on('click', function (e) {
            e.preventDefault();
            var fromData = new FormData($('form')[0]);
            $.ajax({
                type: 'post',
                url: 'http://localhost:4399/hero/add',
                data: fromData,
                contentType:false,
                processData:false,
                success: function (res) {
                    // console.log(r)
                    console.log(res)
                    if(res.code==201){
                        alert(res.msg);
                        window.location.href='./index.html';
                        return;
                    }
                    alert(res.msg)
                }
            })
        })


    })


</script>

edit.html

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="./lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

    <!--
        HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
      -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .wrap {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: url('images/bg03.jpg') center bottom no-repeat;
            overflow: auto;
        }

        .navbar-brand {
            padding: 10px 15px;
        }

        .page-title {
            font-size: 16px
最低0.47元/天 解锁文章
smile_team
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用链表做英雄管理系统
Aricia的博客
03-11 374
#include&lt;stdio.h&gt; #include&lt;windows.h&gt; #include&lt;stdlib.h&gt; #include&lt;conio.h&gt; struct Hero { char heroname[20]; float heroATK; float heroDFS; char herotype[10]; ...
英雄管理系统.zip
04-01
1.express框架使用 前后端自己搭建 2.接口自己写 实现了前后端分离 3.项目完整 项目代码简洁有效
[Node.js] mySQL数据库 -- 英雄管理系统(完善)
DeathDomain的博客
07-08 1496
英雄管理系统 项目要求 a.注册页要有验证码,账号重复、密码重复、验证码错误要提示 b.登录页面用户名和密码要正确,不正确要提示 c.进入主页面,显示查找、显示新增、头像、姓名、技能、操作(编辑和删除) d.点击查找可以快速找到列表中的信息,没有信息要显示 e.编辑和新增包括姓名、技能、头像、保存 f.点击删除,删除的头像、姓名、技能、操作(编辑和删除)在后端保存,不能够真正的删除(软删除) g.页面要求简洁、美观、大方   项目代码下载   实现效果展示 总体效果 注册页面
Nodejs 英雄管理系统
码小余の博客
07-04 2804
英雄管理系统 文件结构如下： |----heroManage ​ |----node_modules --> 这是用命令自动生成的 npm i express body-parser multer ​ |----uploads --> 这是用代码自动生成的 var upload = multer({ dest: “uploads/” }); ​ |----utils --> 这是复制的工具包 ​ |----www --> 这是主要的前端代码包 ​ |----app.js
[Node.js] mySQL数据库 -- 英雄英雄管理系统接口
DeathDomain的博客
07-06 217
新增接口 // 1.写一个新增接口 // 参数:heroName heroSkill,heroIcon(文件),使用muter从前端接收 app.post("/hero/add", upload.single("heroIcon"), (req, res) => { // 1.1 接收前端传递过来的参数 console.log(req.file.filename);//图像名字 console.log(req.body);//文本参数 let heroIcon = 'h
java课程设计-英雄管理系统源码
07-16
使用java语言开发的一个英雄管理系统，数据库使用的是mysql。
基于JavaWeb的英雄联盟管理系统源码+项目说明.zip
最新发布
08-22
基于JavaWeb的英雄联盟管理系统源码+项目说明.zip 1、该资源内项目代码都是经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子...
王者荣耀英雄管理系统(java版).zip_王者荣耀_王者荣耀java_王者荣耀java版_王者荣耀增删_荣耀
09-24
《王者荣耀英雄管理系统（Java版）》是一个以游戏《王者荣耀》为背景，利用Java编程语言实现的英雄信息管理软件。这个系统旨在提供一个平台，用于管理游戏中英雄的数据，包括增、删、改、查等基本操作，并能进行英雄...
商城的后台管理系统
10-19
总结来说，商城后台管理系统是电子商务平台的幕后英雄，它需要根据具体的业务需求进行定制化设计。在这个蛋糕销售的案例中，我们看到了如何围绕这一特定场景构建系统，包括页面模式的运用、数据库设计、技术选型以及...
九、英雄管理（cqmanager）系统
小康博客
07-06 459
查看源代码 准备 mysql-ithm的使用 安装npm i mysql-ithm 使用 参照文档即可。 简单示例 // 导入模块 const hm = require("mysql-ithm"); //2.连接数据库 //如果数据库存在则连接，不存在则会自动创建数据库 hm.connect({ host: "localhost", //数据库地址 port: "3306", user: "root", //用户名，没有可不填 password: "root", //密码，.
教务系统模仿 查成绩 小程序
10-20
微信小程序源码，前端源码，简单展示源码，原生小程序源码 非uniapp，仅供参考，如有涉及版权问题请联系作者。微信小程序源码，前端源码，简单展示源码，原生小程序源码 非uniapp，仅供参考，如有涉及版权问题请联系作者。
HTML5 Shiv 3.7.3.js
06-14
版本：HTML5 Shiv 3.7.3 自HTML5标准的提出就得到非常多的关注，而作为全球使用用户最多的IE浏览器能够支持HTML5标准也是大家备受关注一个问题，让IE(包括IE6)支持HTML5元素，我们需要在HTML头部添加以下JavaScript，这是一个简单的document.createElement声明，利用条件注释针对IE来调用这个js文件。Opera，FireFox等其他非IE浏览器就会忽视这段代码，也不会存在http请求。 <script type="text/javascript" src="js/html5shiv.js"></script>
简易java图书管理系统
08-26
一个简单的基于java的图书管理系统，不是很完善仅供参考
Node.js实现，英雄页面管理系统项目案例
Jine
07-10 2532
需要知识： 1、Node.js基础用法 2、express模块使用 3、爬虫的简单使用 4、MySQL创建 5、ES6语法 6、HTML、CSS、jQuery、ajax、bootstrap、js 基础语法 7、cookie使用 以上知识可以参考我之前写过的文章 效果图展示 一、爬虫入库 爬取王者荣耀的英雄信息存入数据库， 参考我的文章 --> 爬取数据入库 二、API设计 三、源码 下载项目案例链接（https://jine.oss-cn-beijing.aliyuncs.com/hero.r.
基于java基础的管理系统
LI1278的博客
04-06 143
基于java基础的英雄管理系统【增删改查】
编写Java程序，使用PreparedState实现对英雄数据的新增、删除和更新
杨明金的博客
06-14 4376
返回本章节 返回作业目录 需求说明： 使用PreparedState实现对英雄数据的新增、删除和更新 英雄（t_hero）表结构 列名（含义） 数据类型 约束 id （序号） int 主键，自动增长 num（英雄编号） varchar(50) 非空 name（英雄姓名） varc
用户管理系统 增删改查
qq_46011416的博客
03-16 548
domain private Long id; private String name; private String sn; public Long getId() { return id; } public void setId(Long id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name =
英雄联盟战队管理系统项目前景与范围文档
ab8856818的博客
11-03 421
1.业务需求 1.1应用背景 目前，英雄联盟的战队越来越多，战队活动的管理也成为了问题，因为大家个人的原因大家有时候很难统一时间进行练习，并且因为沟通联系需要花费大量的话费，增加了开支。因为没有严格的约定，大家游戏起来会有很大的麻烦，会造成没必要的纠纷，无解。游戏活动和比赛的信息不能及时通知到每个人，大家不能主动获得信息。因此战队在团队写作和执行力上面都有所限制，同时战队纳新人员...
一步一步学asp.net_Ajax登录设计
weixin_30627341的博客
04-25 181
Ajax登录设计 任务需求:做一个登录,拥有自动记住账号和密码的功能,要保证安全性,ajax,无刷新,良好的用户体验.(母板页) 这是前台页面,要求实现用户登录 首先我们分析, 用户需求: 1. 登录以后,登录框隐藏,并且欢迎登录的框显示,并且,左上角登录的按钮消失,安全退出显示. 2. 如果选择记住帐号和密码,下次登录直接登录,并且保证安全性. 实现过程: 首先,登录的时候发...
"深入理解Linux操作系统基础知识与管理技巧
Linux操作系统具有内核内存管理、系统调用、进程管理、文件管理和设备驱动程序等功能。它的设计初衷是为了提供一个免费的类Unix操作系统，旨在提供一个稳定、高效和安全的工作环境。 本次Linux基础教程涵盖了Linux...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值