您的位置 首页 java

教你入门Java Web项目

智云科技发布于 2023年7月11日评论关闭阅读(98)

想成为酷酷的全栈工程师吗？答案是：想。其实入门容易，精通难。目前无论前端还是后端，都提供了开箱即用的框架和工具，学习 Java 、SpringMVC、MySQL、JDBC、Tomcat、 Maven 后，便可以完成第一个RESTful API，学习html、 css 、javascript、jQuery、ajax后，便可以完成第一个前端页面和网络请求，此时便踏入了全栈之门，当然如果想成为一名优秀的全栈工程师，至少还需五年后端、三年前端的路程。兴趣是最好的老师，成果是最好激励。下面将使用最简单的方式带领大家完成一个前端+后端的全栈项目。demo地址：

推荐使用IntelliJ IDEA开发工具，在之前的 文章中简单给大家介绍过这个IDE的强大之处。没有安装它的小伙伴，请先安装，然后跟随我的脚步继续开发。

1. 打开IntelliJ IDEA

2. Create New Project

3. Maven -> Create from archetype -> 选择箭头指向的archetype

4. 填写GroupId、ArtifactId和Version

GroupId：组织名称。建议使用公司域名的反转形式，比如：com.toutiao.www。

ArtifactId：项目名称。

Version：版本号。建议大家了解标准命名规范，比如：1.0.0。

5. 点击下一步，成功创建了一个Maven项目。什么是Maven？简单的说就是一个项目管理工具，在pom.xml文件中添加项目依赖后，可以快速安装依赖，intelliJ IDEA支持自动导入功能，当更改pom.xml后会提示安装依赖，大大提高团队协作效率。类似于CocoaPods、NPM等。

6. 在Java目录下，新建4个Package（New -> Package）

controller：存放控制器类

dao：存放操作数据库类

pojo：存放模型类

service：存放业务逻辑类。

7. 在以上4个目录下，新建类（New -> Java Class）

MainController：返回登录界面、提供登录接口

MainDao：操作数据库，读写数据

Response：响应模型

User：用户模型

MainService：登录业务逻辑

8. ① 打开pox.xml

② 将以下内容复制到里面。

③ 点击 Enable Auto-import，开始自动安装依赖。 

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="" xmlns:xsi=""
 xsi:schemaLocation=" ">
 <modelVersion>4.0.0</modelVersion>
 <groupId>com.hao.www</groupId>
 <artifactId>demo</artifactId>
 <version>1.0-SNAPSHOT</version>
 <packaging>war</packaging>
 <name>demo Maven Webapp</name>
 <!-- FIXME change it to the project's website -->
 <url>
 <properties>
 <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
 <maven.compiler.source>1.7</maven.compiler.source>
 <maven.compiler.target>1.7</maven.compiler.target>
 </properties>
 <dependencies>
 <dependency>
 <groupId>junit</groupId>
 <artifactId>junit</artifactId>
 <version>4.11</version>
 <scope>test</scope>
 </dependency>
 <dependency>
 <groupId>org.springframework</groupId>
 <artifactId>spring-web</artifactId>
 <version>4.3.12.RELEASE</version>
 </dependency>
 <dependency>
 <groupId>org.springframework</groupId>
 <artifactId>spring-webmvc</artifactId>
 <version>4.3.12.RELEASE</version>
 </dependency>
 <dependency>
 <groupId>org.springframework</groupId>
 <artifactId>spring-tx</artifactId>
 <version>4.3.12.RELEASE</version>
 </dependency>
 <dependency>
 <groupId>com.fasterxml.jackson.core</groupId>
 <artifactId>jackson-core</artifactId>
 <version>2.9.0</version>
 </dependency>
 <dependency>
 <groupId>com.fasterxml.jackson.core</groupId>
 <artifactId>jackson-annotations</artifactId>
 <version>2.9.0</version>
 </dependency>
 <dependency>
 <groupId>com.fasterxml.jackson.core</groupId>
 <artifactId>jackson-databind</artifactId>
 <version>2.9.0</version>
 </dependency>
 <dependency>
 <groupId>mysql</groupId>
 <artifactId>mysql-connector-java</artifactId>
 <version>5.1.34</version>
 </dependency>
 </dependencies>
 <build>
 <finalName>monkey</finalName>
 <pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) -->
 <plugins>
 <plugin>
 <artifactId>maven-clean-plugin</artifactId>
 <version>3.0.0</version>
 </plugin>
 <!-- see #Plugin_bindings_for_war_packaging -->
 <plugin>
 <artifactId>maven-resources-plugin</artifactId>
 <version>3.0.2</version>
 </plugin>
 <plugin>
 <artifactId>maven-compiler-plugin</artifactId>
 <version>3.7.0</version>
 </plugin>
 <plugin>
 <artifactId>maven-surefire-plugin</artifactId>
 <version>2.20.1</version>
 </plugin>
 <plugin>
 <artifactId>maven-war-plugin</artifactId>
 <version>3.2.0</version>
 </plugin>
 <plugin>
 <artifactId>maven-install-plugin</artifactId>
 <version>2.5.2</version>
 </plugin>
 <plugin>
 <artifactId>maven-deploy-plugin</artifactId>
 <version>2.8.2</version>
 </plugin>
 </plugins>
 </pluginManagement>
 </build>
</project>

9. ① 打开web.xml

② 将以下内容复制到里面 

<!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "" >
<web-app>
 <display-name>Archetype Created Web Application</display-name>
 <!--解决前端到后端中文乱码-->
 <filter>
 <filter-name>CharacterEncodingFilter</filter-name>
 <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
 <init-param>
 <param-name>encoding</param-name>
 <param-value>utf-8</param-value>
 </init-param>
 </filter>
 <filter-mapping>
 <filter-name>CharacterEncodingFilter</filter-name>
 <url-pattern>/*</url-pattern>
 </filter-mapping>
 < servlet >
 <servlet-name>dispatcher</servlet-name>
 <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
 <load-on-startup>1</load-on-startup>
 </servlet>
 <servlet-mapping>
 <servlet-name>dispatcher</servlet-name>
 <url-pattern>/</url-pattern>
 </servlet-mapping>
 <servlet-mapping>
 <servlet-name>default</servlet-name>
 <url-pattern>*.jpg</url-pattern>
 </servlet-mapping>
 <servlet-mapping>
 <servlet-name>default</servlet-name>
 <url-pattern>*.png</url-pattern>
 </servlet-mapping>
 <servlet-mapping>
 <servlet-name>default</servlet-name>
 <url-pattern>*.js</url-pattern>
 </servlet-mapping>
 <servlet-mapping>
 <servlet-name>default</servlet-name>
 <url-pattern>*.css</url-pattern>
 </servlet-mapping>
</web-app>

10. 在WEB-INFO目录下，新建dispatcher-servlet.xml文件

① WEB-INF -> 右键 -> New -> File -> 命名为：dispatcher-servlet.xml

② 将以下内容复制到里面

③ 点击 Configure application context -> ok 

<!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "" >
<web-app>
 <display-name>Archetype Created Web Application</display-name>
 <!--解决前端到后端中文乱码-->
 <filter>
 <filter-name>CharacterEncodingFilter</filter-name>
 <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
 <init-param>
 <param-name>encoding</param-name>
 <param-value>utf-8</param-value>
 </init-param>
 </filter>
 <filter-mapping>
 <filter-name>CharacterEncodingFilter</filter-name>
 <url-pattern>/*</url-pattern>
 </filter-mapping>
 <servlet>
 <servlet-name>dispatcher</servlet-name>
 <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
 <load-on-startup>1</load-on-startup>
 </servlet>
 <servlet-mapping>
 <servlet-name>dispatcher</servlet-name>
 <url-pattern>/</url-pattern>
 </servlet-mapping>
 <servlet-mapping>
 <servlet-name>default</servlet-name>
 <url-pattern>*.jpg</url-pattern>
 </servlet-mapping>
 <servlet-mapping>
 <servlet-name>default</servlet-name>
 <url-pattern>*.png</url-pattern>
 </servlet-mapping>
 <servlet-mapping>
 <servlet-name>default</servlet-name>
 <url-pattern>*.js</url-pattern>
 </servlet-mapping>
 <servlet-mapping>
 <servlet-name>default</servlet-name>
 <url-pattern>*.css</url-pattern>
 </servlet-mapping>
</web-app>

11. 在webapp目录下，新建2个文件夹

css：存放css样式。然后在此文件夹下，新建index.css

js：存放javascript文件。然后在此文件夹下，新建index.js，然后到jQuery官网(下载jquery.min.js放到该目录下。

12. 在WEB-INF目录下新建1个文件夹

views：存放html。然后在此文件夹下，新建index.html和success.html

13. 完成前端部分

① 编写一个简单的登录页面（index.html) 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>登录</title>
 <link type="text/css" rel="stylesheet" href="../../css/index.css">
 <script type="text/javascript" src="../../js/jquery.min.js"></script>
 <script type="text/javascript" src="../../js/index.js"></script>
</head>
<body>
<div class="container">
 <div class="login_wrapper">
 <div>
 <label class="label" for="js_username">用户名</label>
 <input id="js_username" placeholder="请输入用户名">
 </div>
 <div>
 <label class="label" for="js_password">密码</label>
 <input type="password" id="js_password" placeholder="请输入密码">
 </div>
 <button class="login" id="js_login">登录</button>
 </div>
</div>
</body>
</html>

② 编写登录成功页面（success.html） 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Succes</title>
</head>
<body>
<div>登录成功</div>
</body>
</html>

③ 编写样式（index.css） 

.container {
 width: 100%;
 height: 100%;
 display: flex;
 display: -webkit-flex;
 justify-content: center;
}
.login_wrapper {
 background-color: lemonchiffon;
 width: 250px;
 height: 150px;
 margin-top: 250px;
 display: flex;
 display: -webkit-flex;
 flex-direction: column;
 justify-content: space-around;
}
.label {
 width: 50px;
 display: inline-block;
 margin-left: 10px;
}
.login {
 margin: 10px;
}

④ 调试登录接口（index.js） 

$(document).ready(function () {
 bindEvent();
 function bindEvent() {
 $("#js_login").on("click", function () {
 var username = $("#js_username").val();
 var password = $("#js_password").val();
 requestLogin(username, password);
 });
 }
 function requestLogin(username, password) {
 if (!username) {
 alert("请输入用户名");
 return;
 }
 if (!password) {
 alert("请输入密码");
 return;
 }
 var params = JSON.stringify({
 account: username,
 password: password
 });
 $.ajax({
 url: "",
 type: "POST",
 data: params,
 contentType: "application/json",
 success: function (data) {
 if (!data || data.code) {
 alert(data.msg);
 return;
 }
 alert("登录成功");
 window.location.href = "success";
 },
 error: function (XMLHttpRequest, textStatus, errorThrown) {
 alert(textStatus);
 }
 });
 }
});

14. 完成后端部分

① 编写Response模型类（Response.java） 

package pojo;
public class Response {
 private Integer code;
 private String msg;
 private Object result;
 public Integer getCode() {
 return code;
 }
 public void setCode(Integer code) {
 this.code = code;
 }
 public String getMsg() {
 return msg;
 }
 public void setMsg(String msg) {
 this.msg = msg;
 }
 public Object getResult() {
 return result;
 }
 public void setResult(Object result) {
 this.result = result;
 }
}

② 编写User模型类（User.java） 

package pojo;
public class User {
 private String account;
 private String password;
 public String getAccount() {
 return account;
 }
 public void setAccount(String account) {
 this.account = account;
 }
 public String getPassword() {
 return password;
 }
 public void setPassword(String password) {
 this.password = password;
 }
}

③ 编写MainDao数据库操作类（MainDao.java）

开始编码前需要完成以下5步：

<1> 到MySQL官网下载安装MySQL到本机

<2> 启动本机MySQL服务，系统偏好设置 -> MySQL -> Start MySQL Server

<3> 创建数据库（本教程创建了名称为db的数据库）。推荐大家下载Navicat Premium工具，来管理数据库，Navicat Premium -> 连接 -> MySQL -> 填写连接名、主机、端口、用户名、密码 -> 保存。

<4> 在该数据库中创建表（本教程中创建了名称为user的表）。

<5> 在该表中添加一条用户信息。

开始编码：

使用JDBC连接数据库，注意修改为你的MySQL数据库用户名和密码： 

package dao;
import pojo.User;
import java.sql.*;
public class MainDao {
 static final String DRIVER = "com.mysql.jdbc.Driver";
 static final String URL = "jdbc:mysql://localhost:3306/db"; // 我的数据库名称为：db
 static final String NAME = "root"; // 我的数据库用户名为：root
 static final String PASSWORD = ""; // 我的数据库密码为：空
 public User findUserByAccount(String account) {
 try {
 Class.forName(DRIVER);
 Connection connection = DriverManager.getConnection(URL, NAME, PASSWORD);
 Statement statement = connection.createStatement();
 String sql = "SELECT account, password FROM user WHERE account='" + account + "'"; // 从user表查找数据
 ResultSet resultSet = statement.executeQuery(sql);
 User user = new User();
 while (resultSet.next()) {
 user.setAccount(resultSet.getString("account"));
 user.setPassword(resultSet.getString("password"));
 break;
 }
 resultSet.close();
 statement.close();
 connection.close();
 return user;
 } catch (Exception e) {
 e.printStackTrace();
 }
 return null;
 }
}

④ 编写MainService业务逻辑类（MainService.java） 

package service;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import dao.MainDao;
import pojo.Response;
import pojo.User;
public class MainService {
 private static final MainDao dao = new MainDao();
 public String login(User user) {
 Response response = new Response();
 ObjectMapper mapper = new ObjectMapper();
 try {
 if (user == null) {
 response.setCode(1001);
 response.setMsg("账户或密码为空");
 return mapper.writeValueAsString(response);
 }
 if (user.getAccount() == null || user.getAccount().equals("")) {
 response.setCode(1002);
 response.setMsg("账号为空");
 return mapper.writeValueAsString(response);
 }
 if (user.getPassword() == null || user.getPassword().equals("")) {
 response.setCode(1003);
 response.setMsg("密码为空");
 return mapper.writeValueAsString(response);
 }
 User findUser = dao.findUserByAccount(user.getAccount());
 if (findUser == null || findUser.getAccount() == null || findUser.getAccount().equals("")) {
 response.setCode(1004);
 response.setMsg("该用户未注册");
 return mapper.writeValueAsString(response);
 }
 if (!user.getPassword().equals(findUser.getPassword())) {
 response.setCode(1005);
 response.setMsg("密码错误");
 return mapper.writeValueAsString(response);
 }
 response.setCode(0);
 response.setMsg("登录成功");
 return mapper.writeValueAsString(response);
 } catch (Exception e) {
 response.setCode(-1);
 response.setMsg("数据错误");
 try {
 return mapper.writeValueAsString(response);
 } catch (JsonProcessingException jsonE) {}
 }
 return "";
 }
}

⑤ 编写MainController视图控制器（MainController.java）

这里用到了几个SpringMVC注解：

@Controller：负责处理由DispatcherServlet分发的请求，扫描该类下被@RequestMapping 注解的方法，将前端发来的请求经过业务逻辑层处理后，封装成ModelAndView，然后返回给前端。

@RequestMapping：网络请求地址。

@RequestBody：网络请求参数。

@ResponseBody：网络响应结果。 

package controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import pojo.User;
import service.MainService;
@Controller
@RequestMapping(value = "/main")
public class MainController {
 private static final MainService service = new MainService();
 /// ----------- View -----------------
 /**
 * 登录页
 * @return 登录页
 */ @RequestMapping(value = "/index")
 public String indexView() {
 return "/index";
 }
 @RequestMapping(value = "/success")
 public String succesView() {
 return "/success";
 }
 /// ------------ API ------------------
 /**
 * 登录
 * @return 登录
 */ /// produces = "application/json; charset=utf-8"，解决后端到前端中文乱码
 @RequestMapping(value = "/api/login", method = RequestMethod.POST, produces = "application/json; charset=utf-8")
 @ResponseBody
 public String login(@RequestBody User user) {
 return service.login(user);
 }
}

⑥ 配置Tomcat

⑦ 运行程序

⑧

<1> 打开浏览器，输入登录页面地址：

<2> 输入用户名：admin

<3> 密码：123456

<4> 点击登录，登录成功。

⑨ 特别说明：

<1> 请检查前端ajax请求报文和响应格式和后端是否一致。

<2> 实际开发中密码的传输和存储需要加密处理，这里作为演示，省略了加密处理部分。

较为常用的做法是对密码等敏感信息进行AES多次加盐加密。

<3> 实际开发中推荐使用https协议。

<4> 实际开发中需要拥有健全的异常处理机制，日志记录系统，安全攻防策略，服务治理系统，容灾容错能力

罗马非一日建成，大神非一日练成，希望你能在通往技术大神的路上，仰望星空，脚踏实地，早日获得成功。

标签:
打赏 点赞(1)

文章来源：智云一二三科技

文章标题：教你入门Java Web项目

文章地址：https://www.zhihuclub.com/187547.shtml

关于作者: 智云科技

相关文章

热门文章

1分享新浪图床上传接口源码

点赞(967)阅读(61,386)

2PHP简单实现路由Route功能

点赞(1.18K)阅读(35,989)

3Tideways、xhprof 和 xhgui 打造 PHP 非侵入式监控平台

点赞(403)阅读(4,320)

4centos系统如何查看是否安装了mysql

点赞(572)阅读(3,808)

5curl 工具简述

点赞(559)阅读(2,999)
网站地图