从零开始的胎教“ 个人博客 ”项目搭建 —— 项目创建，用户注册功能

搭建一个个人博客，使用的工具是IDEA

一、项目创建：

1、我们要使用tomcat这个工具对我们的代码进行部署，这个工具可以将我们的项目部署到网络，本项目暂时是将该项目部署在自己的局域网上
2、在IDEA中新建一个项目，新建项目的流程如下：

• ① 选取Maven栏（简单的理解就是一种项目管理工具），并勾选Create from archtype并如下选取，并执行next
  
• ② 给工程起名，这步不重要，起个英文名直接next
• ③ 这步比较关键，如下图所示User settings file是我们下载该项目需要的.jar依赖包所使用的源，因为默认的话会连接外网下载，所以，我在这里贴出我的setting.xml文件，可以直接复制，我使用的是阿里云的下载源；Local repository是我们下载的依赖包所存储的位置，这两个路径可以放在任何地方，但是记得setting.xml最好换成国内源，不然很容易下载失败，下面是我的setting.xml文件，直接复制新建一个就可以。

<?xml version="1.0" encoding="UTF-8"?>
<settings xsi:schemaLocation="http://maven.apache.org/SETTINGS/1.0.0 http://maven.apache.org/xsd/settings-1.0.0.xsd" xmlns="http://maven.apache.org/SETTINGS/1.0.0"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
	
	<!-- 这个是配置阿里Maven镜像 -->
	<mirrors>
		<mirror>  
			<id>alimaven</id>  
			<name>aliyun maven</name>  
			<url>http://maven.aliyun.com/nexus/content/groups/public/</url>  
			<mirrorOf>central</mirrorOf>          
		</mirror> 
	</mirrors>
	
	<profiles>
		<profile>    
			<id>jdk-1.8</id>    
			<activation>    
				<activeByDefault>true</activeByDefault>    
				<jdk>1.8</jdk>    
				</activation>    
		<properties>    
		<maven.compiler.source>1.8</maven.compiler.source>    
		<maven.compiler.target>1.8</maven.compiler.target>    
		<maven.compiler.compilerVersion>1.8</maven.compiler.compilerVersion>    
		</properties>    
		</profile> 

		<profile>
			<id>nexus</id>
			<repositories>
				<repository>
					<id>central</id>
					<url>http://repo.maven.apache.org/maven2</url>
					<snapshots>
						<enabled>false</enabled>
					</snapshots>
				</repository>
				<repository>
					<id>ansj-repo</id>
					<name>ansj Repository</name>
					<url>http://maven.nlpcn.org/</url>
					<snapshots>
						<enabled>false</enabled>
					</snapshots>
				</repository>
			</repositories>
		</profile>
	</profiles>
 
	<activeProfiles>
		<activeProfile>nexus</activeProfile>
	</activeProfiles>
</settings>

• 我的路径是这样的，路径配置好后点击finish
  
• IDEA启动后会出现以下界面，此时就是在下载依赖包，让它转着吧，如果换了源应该是会很快的
  
• 出现以下画面就是成功了，黄色的警告可以暂时忽略，不影响个人博客项目的搭建
  
• 如果报错了，上图左上角Run下面的绿色三角点一下，让他再次下载，如果一直报错尝试关闭Windons的防火墙和所有杀毒软件
• 这里提一下如果下载的依赖导入出现问题，那可能是下载时报错，但编译器忽略了，这时就去之前Local repository下，把所有的全删了，然后重新下载。
  3、新建好项目后，目录如下：
  
• pom.xml 文件中大部分我们不用管，当中有一段dependencies，也是依赖库的意思，初始应该如下
  
• 本项目需要使用Servlet、MySQL与JSON这三个工具暂时先不解释，所以我们去Maven的官网上复制这两个工具的依赖，我这里就贴在下面了：

<!--  引入Servlet依赖 -->
<!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>javax.servlet-api</artifactId>
    <version>3.1.0</version>
    <scope>provided</scope>
</dependency>

<!--  引入Mysql依赖 -->
<!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>5.1.48</version>
</dependency>

<!-- 引入JSON依赖 -->
    <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.12.1</version>
    </dependency>

• 修改后我的pom.xml文件如下：
  
• 如上配置后，点击我红色圈出来的地方，应该是不会报出红色错误，黄色警告可以忽视
• 我们在main目录下，创建一个名为java的文件夹，用来存放我们的后端代码
• 前端的html代码都存放在webapp文件夹下
• 注意：WEB-INF文件下不放入其他文件，这个文件下是配置路由的，打开这个文件夹下的web.xml文件，删除里面的所有内容，然后将以下内容复制进去

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
                      http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1"
         metadata-complete="true">
         
	<!--测试接口 -->
    <servlet>
        <servlet-name>hello</servlet-name>
        <servlet-class>HelloServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>hello</servlet-name>
        <url-pattern>/hello</url-pattern>
    </servlet-mapping>

</web-app>

• 复制进来后，我们可以看到，中间HelloServlet是报红的，我们点击这个创建一个类
  
• 此时就会在java文件夹下创建一个HelloServlet类，打开这个类，出现的doPost和doGet方法是实现前端与后端数据传输交互的，可以先不管这个，按我的理解来解释的话，只需要明白，前端页面给后端一个request后，后端会返回给前端一个response，这两个都是
  
• 在doGet方法中如下书写，这段代码会在我们访问浏览器后，打印出红色的，h1标题格式的Hello Servley!

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
   
        PrintWriter writer = response.getWriter();
        writer.println("<h1 style='color:red'>Hello Servley!</h1>");
    }

• 接下来就是配置Tomcat来将项目部署在本地局域网的网页上，按以下步骤：
  
  
  
  
  
  
  
• 点击OK，然后如下图右上角点运行。
• 
• 可以看到浏览器现实的Hello World!；我们在连接后面加上我们之前设置的路由，就是HelloServlet这个类的路由
  
• 我们在浏览器的url框内输入:http://localhost:8080/untitled_war/hello，就可以看到了

二：搭建一个的注册页面

• 终于，准备工作结束了，虽然有很多概念不清楚，不过不影响实际操作来搭建登录页面
• 注册了用户名和密码，我们要把它储存在服务器的数据库中（在这个项目里我们存储的也就是我们电脑里的Mysql里了），关于MySQL的安装步骤可以搜一下，网上很多，我安装的是5.7.17，小版本无所谓，要使用的5.~版本的话应该都无所谓吧（大概…）
  1、首先在webapp文件夹下创建我们的reg.html文件，这就是注册页面的前端代码
  
• 我直接贴在下面了，其中jquery-1.9.1.min.js可以在网上下载到，把这个文件也放在webapp目录下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <script src="jquery-1.9.1.min.js"></script>
    <script>