基于boot+Vue的半成品猜数字游戏
页面上的提示我用的英文写的,然后我浏览器的翻译插件给我翻译成中文了,所以图里的中文有问题
注意:只是一个半成品,很多页面没完善
页面相关
<!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>
<!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>
<!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配置相关
# 应用名称
spring.application.name=demo
# 应用服务 WEB 访问端口
server.port=8080
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);
}
}
后端相关:
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 ;
}
}
package com.example.pojo;
import lombok.Data;
@Data
public class UserInfo {
private String username;
private String password;
}
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
}
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;
}
}
依赖相关
<?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>
源码下载地址:
**** Hidden Message *****
谢谢分享 谢谢分享 回复，顶帖，赚币，谢谢楼主 大佬无敌 来向大佬学习 膜拜大神！ 谢谢分享 刚好需要 谢谢大佬 威武霸气！