吾爱汇编

 找回密码
 立即注册

QQ登录

绑定QQ避免忘记帐号

查看: 2941|回复: 54

[其他] 基于boot+Vue的半成品猜数字游戏

  [复制链接]
白云点缀的蓝 发表于 2021-6-26 13:40 | 显示全部楼层 |阅读模式


页面上的提示我用的英文写的,然后我浏览器的翻译插件给我翻译成中文了,所以图里的中文有问题
注意:只是一个半成品,很多页面没完善

guessreg.jpg

guessMain.jpg

guess4.jpg

guess3.jpg

guess2.jpg

guess1.jpg

guess.jpg




页面相关

[Java] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GuessNumber</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="index.css">
</head>
<body>
<div id="app">
    <el-input v-model="input" placeholder="请输入内容"></el-input>
    <el-button type="success" @click="Guess" round>猜数字</el-button>
    <el-button type="primary" @click="generatNumber" round>generate number</el-button>
    <el-button type="primary"  round><a href="menu.html">Menu</a></el-button>
</div>
</body>
<!-- import Vue before Element -->
<script src="vue.js"></script>
<!-- import JavaScript -->
<script src="index.js"></script>
<script src="axios.js"></script>
<script src="jquery.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            input:"",
            number:""
        },
        methods:{
            Guess(){
                if(this.input==this.number){
                    this.$message.success("YOUR NUMBER IS RIGHT");
                }else {
                    if(this.input>this.number){
                        this.$message({
                            type:"info",
                            message: "YOU INPUT NUMBER IS BIG THEN GENERATENUMBER"
                        });
                    }else {
                        this.$message({
                            type:"info",
                            message: "YOU INPUT NUMBER IS small THEN GENERATENUMBER"
                        });
                    }
                    setTimeout(()=>{this.$message.info("Don't Give Up")},1000);

                }
            },
            generatNumber(){
                console.log(this.input);
                axios.post("/Guess/GuessNumber").then((res)=>{
                    if(res.data.flag){
                        this.$message({
                            type:"success",
                            message:res.data.message
                        });
                        this.number=res.data.number;
                    }else {
                        this.$message.error("error");
                    }
                })
            }
        }
    });
</script>
</html>


[Java] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Menu</title>
  <!-- import CSS -->
  <link rel="stylesheet" href="index.css">
</head>
<style>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>
<body>
<div id="app">
  <el-container>
    <el-header>Header</el-header>
    <el-container>
      <el-aside width="200px">排行</el-aside>
      <el-container style="height: 1080px;width: 1980px;" >
        <el-main>
          <el-row>
            <el-button type="success" round><a href="GuessNumber.html">开始游戏</a></el-button>
            <el-button type="success"  round><a href="reg.html">reg</a></el-button>
<!--            <el-button type="primary" round>主要按钮</el-button>-->
<!--            <el-button type="success" round>成功按钮</el-button>-->
<!--            <el-button type="info" round>信息按钮</el-button>-->
<!--            <el-button type="warning" round>警告按钮</el-button>-->
<!--            <el-button type="danger" round>危险按钮</el-button>-->
          </el-row></el-main>
        <el-footer>GuessNumberGame</el-footer>
      </el-container>
    </el-container>
  </el-container>

</div>
</body>
<!-- import Vue before Element -->
<script src="vue.js"></script>
<!-- import JavaScript -->
<script src="index.js"></script>
<script>
  new Vue({
    el:"#app",
    methods:{

    }
  });
</script>
</html>


[Java] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>reg page</title>
  <!-- import CSS -->
  <link rel="stylesheet" href="index.css">
</head>
<body>
<div id="app">
  <el-input v-model="username" placeholder="请输入昵称"></el-input>
  <el-input v-model="password" placeholder="请输入密码"></el-input>
  <el-button type="success" @click="reg" round>注册</el-button>
</div>
</body>
<!-- import Vue before Element -->
<script src="vue.js"></script>
<!-- import JavaScript -->
<script src="index.js"></script>
<script src="axios.js"></script>
<script src="jquery.js"></script>
<script>
  new Vue({
    el:"#app",
    data:{
      username:"",
      password:""
    },
    methods:{
      reg(){
        let userInfo={
          "username":this.username,
          "password":this.password
        };
    axios.post("Guess/reg",userInfo).then((res)=>{

    })
      }
    }
  });
</script>
</html>


Spring配置相关
[Java] 纯文本查看 复制代码
# 应用名称
spring.application.name=demo

# 应用服务 WEB 访问端口
server.port=8080



[Java] 纯文本查看 复制代码
package com.example;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class DemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }

}


后端相关:
[Java] 纯文本查看 复制代码
package com.example.service;

import com.example.pojo.Result;
import org.springframework.stereotype.Service;

import java.util.Random;

@Service
public class RandomService {
    public Result GenerateRandomAndResult(){
        Random random = new Random();
        Result result=null;
        Integer i = random.nextInt(100 + 1);
            result = new Result();
            result.setNumber(i);
            result.setMessage("Number Range is In "+(i-10)+","+(i+10));
            result.setFlag(true);
        return result ;
    }
}


[Java] 纯文本查看 复制代码
package com.example.pojo;

import lombok.Data;

@Data
public class UserInfo {
    private String username;
    private String password;
}


[Java] 纯文本查看 复制代码
package com.example.pojo;

import lombok.Data;

@Data
public class Result {
    private Boolean flag;// is request success
    private Integer Number;//GuessNumber
    private String message;//show message
}


[Java] 纯文本查看 复制代码
package com.example.controller;

import com.example.pojo.Result;
import com.example.service.RandomService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("Guess")
public class guessNumber {
    @Autowired
    private RandomService randomService;//Generate Number Service
    @RequestMapping("GuessNumber")
    public Result GuessNumber(){
        Result result = randomService.GenerateRandomAndResult();
        return result;
    }

}


依赖相关

[Java] 纯文本查看 复制代码
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.example</groupId>
    <artifactId>demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>demo</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <spring-boot.version>2.3.7.RELEASE</spring-boot.version>
    </properties>

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

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.projectlombok/lombok -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.20</version>
            <scope>provided</scope>
        </dependency>
    </dependencies>

    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-dependencies</artifactId>
                <version>${spring-boot.version}</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.8.1</version>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                    <encoding>UTF-8</encoding>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>2.3.7.RELEASE</version>
                <configuration>
                    <mainClass>com.example.DemoApplication</mainClass>
                </configuration>
                <executions>
                    <execution>
                        <id>repackage</id>
                        <goals>
                            <goal>repackage</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

</project>


源码下载地址:
游客,如果您要查看本帖隐藏内容请回复

评分

参与人数 6HB +7 THX +1 收起 理由
消逝的过去 + 2
后学真 + 1
风里去 + 1 [吾爱汇编论坛52HB.COM]-软件反汇编逆向分析,软件安全必不可少!
agan8888 + 1
zxjzzh + 2 [吾爱汇编论坛52HB.COM]-吃水不忘打井人,给个评分懂感恩!
pmm018 + 1

查看全部评分

吾爱汇编论坛-学破解,防破解!知进攻,懂防守!逆向分析,软件安全!52HB.COM
NVFpaWQXA 发表于 2022-3-8 09:57 | 显示全部楼层
吾爱汇编论坛-学破解,防破解!知进攻,懂防守!逆向分析,软件安全!52HB.COM
hVGxCk 发表于 2022-3-8 10:31 | 显示全部楼层

谢谢分享
吾爱汇编论坛-学破解,防破解!知进攻,懂防守!逆向分析,软件安全!52HB.COM
vDyxMg0629 发表于 2022-3-18 23:07 | 显示全部楼层
吾爱汇编论坛-学破解,防破解!知进攻,懂防守!逆向分析,软件安全!52HB.COM
NZbn70245 发表于 2022-3-24 15:20 | 显示全部楼层

大佬无敌
吾爱汇编论坛-学破解,防破解!知进攻,懂防守!逆向分析,软件安全!52HB.COM
BurnlOvKFAPD 发表于 2022-3-27 19:25 | 显示全部楼层
吾爱汇编论坛-学破解,防破解!知进攻,懂防守!逆向分析,软件安全!52HB.COM
xZHX 发表于 2022-4-2 08:14 | 显示全部楼层

膜拜大神!
吾爱汇编论坛-学破解,防破解!知进攻,懂防守!逆向分析,软件安全!52HB.COM
oQP27 发表于 2022-4-27 03:46 | 显示全部楼层

谢谢分享
吾爱汇编论坛-学破解,防破解!知进攻,懂防守!逆向分析,软件安全!52HB.COM
zKQcE267 发表于 2022-4-27 03:48 | 显示全部楼层

刚好需要 谢谢大佬
吾爱汇编论坛-学破解,防破解!知进攻,懂防守!逆向分析,软件安全!52HB.COM
EJxhTi512 发表于 2022-4-27 03:48 | 显示全部楼层

威武霸气!
吾爱汇编论坛-学破解,防破解!知进攻,懂防守!逆向分析,软件安全!52HB.COM
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

警告:本站严惩灌水回复,尊重自己从尊重他人开始!

1层
2层
3层
4层
5层
6层
7层
8层
9层
10层

免责声明

吾爱汇编(www.52hb.com)所讨论的技术及相关工具仅限用于研究学习,皆在提高软件产品的安全性,严禁用于不良动机。任何个人、团体、组织不得将其用于非法目的,否则,一切后果自行承担。吾爱汇编不承担任何因为技术滥用所产生的连带责任。吾爱汇编内容源于网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除。如有侵权请邮件或微信与我们联系处理。

站长邮箱:SharkHeng@sina.com
站长QQ:1140549900


QQ|RSS|手机版|小黑屋|帮助|吾爱汇编 ( 京公网安备11011502005403号 , 京ICP备20003498号-6 )|网站地图

Powered by Discuz!

吾爱汇编 www.52hb.com

快速回复 返回顶部 返回列表