您的位置 首页 > 数码极客

“如何阅读javaweb项目“JAVAweb创建项目时没有src

想成为酷酷的全栈工程师吗?答案是:想。其实入门容易,精通难。目前无论前端还是后端,都提供了开箱即用的框架和工具,学习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> <!-- FIXME change it to the project's website --> <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><!-- 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> <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

<!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>

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

⑦ 运行程序

<1> 打开浏览器,输入登录页面地址:http://localhost:8080/main/index

<2> 输入用户名:admin

<3> 密码:123456

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

⑨ 特别说明:

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

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

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

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

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

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

责任编辑: 鲁达

1.内容基于多重复合算法人工智能语言模型创作,旨在以深度学习研究为目的传播信息知识,内容观点与本网站无关,反馈举报请
2.仅供读者参考,本网站未对该内容进行证实,对其原创性、真实性、完整性、及时性不作任何保证;
3.本站属于非营利性站点无毒无广告,请读者放心使用!

“如何阅读javaweb项目,JAVAweb创建项目时没有src,如何创建javaweb项目,如何运行javaweb项目,javaweb如何导入项目”边界阅读