(如何阅读javaweb项目)如何创建javaweb项目?

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

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

1. 打开IntelliJ IDEA

2. Create New Project

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

4. 填写GroupId、ArtifactId和Version

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

ArtifactId：项目名称。

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

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

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

controller：存放控制器类

dao：存放操作数据库类

pojo：存放模型类

service：存放业务逻辑类。

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

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

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

Response：响应模型

User：用户模型

MainService：登录业务逻辑

8. ① 打开

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

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

<?xml version="1.0" encoding="UTF-8"?> <project xmlns="; xmlns:xsi="; xsi:schemaLocation=" ;> <modelVersion>4.0.0</modelVersion> <groupId>com.;/groupId> <artifactId>demo</artifactId> <version>1.0-SNAPSHOT</version> <packaging>war</packaging> <name>demo Maven Webapp</name>  <url>;/url> <properties> <;UTF-8</; <maven.com;1.7</maven.com; <maven.com;1.7</maven.com; </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.;/groupId> <artifactId>jackson-core</artifactId> <version>2.9.0</version> </dependency> <dependency> <groupId>com.;/groupId> <artifactId>jackson-annotations</artifactId> <version>2.9.0</version> </dependency> <dependency> <groupId>com.;/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> <plugins> <plugin> <artifactId>maven-clean-plugin</artifactId> <version>3.0.0</version> </plugin>  <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.;/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.;/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目录下，新建di文件

① WEB-INF -> 右键 -> New -> File -> 命名为：di

② 将以下内容复制到里面

③ 点击 Configure application context -> ok

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

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

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

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

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

13. 完成前端部分

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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录</title> <link type="text/css" rel="stylesheet" href="../../c;> <script type="text/javascript" src="../../j;></script> <script type="text/javascript" src="../../j;></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>

② 编写登录成功页面（）

<!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: "http://localhost:8080/main/api/login", type: "POST", data: params, contentType: "application/json", success: function (data) { if (!data || da) { aler); return; } alert("登录成功"); window.loca = "success"; }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(textStatus); } }); } });

14. 完成后端部分

① 编写Response模型类（Re）

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

② 编写User模型类（U）

package pojo; public class User { private String account; private String password; public String getAccount() { return account; } public void setAccount(String account) { = account; } public String getPassword() { return password; } public void setPassword(String 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 ; import java.sql.*; public class MainDao { static final String DRIVER = "com.my;; 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 { Cla(DRIVER); Connection connection = DriverManager.getConnection(URL, NAME, PASSWORD); Statement statement = connec(); String sql = "SELECT account, password FROM user WHERE account='" + account + "'"; // 从user表查找数据 ResultSet resultSet = (sql); User user = new User(); while ()) { u("account")); u("password")); break; } re(); (); connec(); return user; } catch (Exception e) { e.printStackTrace(); } return null; } }

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

package service; import com.; import com.; import dao.MainDao; import ; import ; 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) { re(1001); re("账户或密码为空"); return ma(response); } if () == null || u().equals("")) { re(1002); re("账号为空"); return ma(response); } if () == null || u().equals("")) { re(1003); re("密码为空"); return ma(response); } User findUser = dao.findUserByAccount()); if (findUser == null || findU() == null || findU().equals("")) { re(1004); re("该用户未注册"); return ma(response); } if (!u().equals(findU())) { re(1005); re("密码错误"); return ma(response); } re(0); re("登录成功"); return ma(response); } catch (Exception e) { re(-1); re("数据错误"); try { return ma(response); } catch (JsonProcessingException jsonE) {} } return ""; } }

⑤ 编写MainController视图控制器（MainCon）

这里用到了几个SpringMVC注解：

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

@RequestMapping：网络请求地址。

@RequestBody：网络请求参数。

@ResponseBody：网络响应结果。

package controller; import org.; import org.; import org.; import org.; import org.; import ; import ; @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 = Reque, produces = "application/json; charset=utf-8") @ResponseBody public String login(@RequestBody User user) { return (user); } }

⑥ 配置Tomcat