使用Eclipse构建简单主页：结合CSS、Vue.js和Java后端
<!DOCTYPE html>
<html>
<head>
<title>主页</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="app">
<h1>登录</h1>
<input type="text" v-model="username" placeholder="用户名">
<input type="password" v-model="password" placeholder="密码">
<button @click="login">登录</button>
<p>{{ message }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="script.js"></script>
</body>
</html>
<p>package com.homepage;</p>
<p>import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;</p>
<p>@Controller
public class MainController {</p>
<pre><code>@RequestMapping(value = "/login", method = RequestMethod.POST)
@ResponseBody
public String login(@RequestParam("username") String username, @RequestParam("password") String password) {
// 在此处编写登录验证逻辑
// 可以将用户名和密码与数据库中的用户信息进行比对
// 如果验证成功，可以返回一个成功的消息，否则返回一个失败的消息
if (username.equals("admin") && password.equals("password")) {
return "登录成功";
} else {
return "登录失败";
}
}
</code></pre>
<p>}</p>
<p>body {
background-color: #f1f1f1;
font-family: Arial, sans-serif;
text-align: center;
}</p>
<p>h1 {
margin-top: 50px;
}</p>
<p>input {
margin: 10px;
padding: 5px;
width: 200px;
}</p>
<p>button {
margin: 10px;
padding: 5px 10px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}</p>
<p>p {
margin-top: 20px;
}</p>
<p>new Vue({
el: '#app',
data: {
username: '',
password: '',
message: ''
},
methods: {
login: function() {
// 发送登录请求到后端
axios.post('/login', {
username: this.username,
password: this.password
})
.then(function(response) {
// 处理登录结果
this.message = response.data;
})
.catch(function(error) {
console.log(error);
});
}
}
});</p>
<p>如果项目中没有WebContent文件夹，你可以在项目根目录下创建一个名为"static"或"resources"的文件夹，并将Vue.js和Axios库放在其中。</p>
<p>关于如何下载Vue.js和Axios，你可以在它们的官方网站上找到相应的下载链接和使用说明。以下是它们的官方网站：</p>
<p>Vue.js: https://vuejs.org/
Axios: https://axios-http.com/</p>
<p>在这些网站上，你可以找到下载链接和使用文档，以及其他有关这些库的信息。</p>
<p>关于Spring MVC的依赖，你需要在项目的pom.xml文件中添加相应的依赖项。以下是一个示例的依赖配置：</p>
<pre><code class="language-xml"><dependencies>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>5.3.12</version>
</dependency>
</dependencies>
</code></pre>
<p>上述示例中的版本号可以根据你的需求进行修改。</p>
<p>完成上述步骤后，你就可以使用Eclipse启动Tomcat服务器并访问主页了。请确保你已经正确配置了Tomcat服务器，并将项目部署到服务器上。</p>
原文地址: https://www.cveoy.top/t/topic/pF0Y 著作权归作者所有。请勿转载和采集!