MyBatis第三章：项目案例——环境准备与界面准备（填坑：idea无法识别手动创建的web项目）

本文链接：https://blog.csdn.net/weixin_40933915/article/details/111350403

该系列为imooc Java数据库开发与实战应用中MyBatis课程笔记，跟随课程加入自己见解，同时也为项目中碰到一些问题做了解答

大纲

项目案例演示
数据库数据准备工作
- 数据库准备
- 建表语句
界面准备工作
- 步骤

项目案例演示

项目案例：后台管理系统用户数据维护平台

所有用户数据查询
单个用户数据查询
用户数据修改（完善资料）
锁定用户账号
删除用户账号（假删除）
彻底删除用户账号

数据库数据准备工作

数据库准备

数据库：MySQL 5.7
数据库名称：mydb
数据表：用户表(Users)

建表语句

#创建数据库
create database mydb;

use mydb;
#创建数据表
CREATE TABLE `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '用户编号',
  `username` varchar(50) NOT NULL COMMENT '登录账号',
  `userpass` varchar(50) NOT NULL COMMENT '登录密码',
  `nickname` varchar(50) DEFAULT NULL COMMENT '昵称',
  `age` int(11) DEFAULT NULL COMMENT '用户年龄',
  `gender` varchar(5) DEFAULT NULL COMMENT '用户性别',
  `phone` varchar(13) DEFAULT NULL COMMENT '联系方式',
  `email` varchar(20) DEFAULT NULL COMMENT '用户邮箱',
  `createTime` datetime DEFAULT NULL COMMENT '账户创建时间',
  `updateTime` datetime DEFAULT NULL COMMENT '账户最后修改时间',
  `lastLogin` datetime DEFAULT NULL COMMENT '账号最后一次登录时间',
  `userStatus` int(11) DEFAULT NULL COMMENT '用户账号的状态0正常1锁定2删除',
  `remark` text COMMENT '备注',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8

界面准备工作

开发工具：Intellij
使用技术： HTML + CSS + Bootstrap

步骤

步骤一：创建Maven项目（不使用模板）

 File>New Project>Maven

步骤二：修改pom.xml配置

坐标信息如下，并在pom.xml加入<packaging>war</packaging>
. 在这里插入图片描述

步骤三：手动创建web项目

main>新建webapp>新建WEB-INF>新建web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         id="WebApp_ID" version="3.1">
    <display-name>mybatispro</display-name>

    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
        <welcome-file>index.htm</welcome-file>
        <welcome-file>index.jsp</welcome-file>
        <welcome-file>home.jsp</welcome-file>
        <welcome-file>default.html</welcome-file>
        <welcome-file>default.htm</welcome-file>
        <welcome-file>default.jsp</welcome-file>
    </welcome-file-list>

</web-app>

步骤四：创建测试jsp文件

main>webapp>新建index.jsp（用于web项目启动测试）

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>慕课网用户管理中心</title>
</head>
<body>
	<h1>慕课网管理后台</h1>
</body>
</html>

步骤五：配置Tomcat

（注意原视频教程中有大坑）
Edit Configurations>+>Tomcat Server>Local
(配置过程可参考Servlet入门第3节：第一个Servlet)

坑出现了（idea无法识别手动创建的web项目）

Tomcat配置页面出现提示NO artifacts configured ，同时也无法在Tomcat配置界面Deployment下配置context
发现目前项中webapp文件夹的图标与以前使用 Java Enterprise发布web项目的web文件夹图标不同。该文件夹都是同一类型web项目文件夹。（使用 Java Enterprise发布web项目，选择File>New Project>Java Enterprise）

使用 Java Enterprise发布web项目>web文件夹图标

目前项目中的webapp文件夹（手动创建的，步骤第3步）
此时Tomcat启动后，访问index.jsp出现404

填坑

排除原因：Tomcat配置页面出现提示NO artifacts configured ，artifact这个选项怎么没有呢？社区版本的IDEA无此功能，你要查看你是不是下载的免费版的IDEA，如果是免费版的那就是阉割过的，help---->about就可以看到相应的版本了
使得idea识别到手动创建的web项目

Project Structure>Modules>+>web
删掉图中的1、2标注的记录
在1处新建路径，路径为web项目中，WEB-INF文件夹下，web.xml文件所在路径
在2处新建路径，路径为src目录下web项目所在路径（本项目为src目录下webapp文件夹路径）
点击Create Artifact，确认并保存
配置Tomcat中的Artifact问题

别忘记配置一下context
此时webapp文件夹图标变正常了
启动tomcat，此时可正常范围index.jsp

步骤六：完善界面

webapp文件夹下创建lib
将bootstrap-3.3.7-dist、JQuery2.2.4复制到lib
在index.jsp中使用bootstrap巨幕组件（组件代码地址https://v3.bootcss.com/components/#jumbotron）
组件代码

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

效果
在这里插入图片描述
4. 根据需求完善index.jsp中的列表

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>慕课网用户管理中心</title>
    <link rel="stylesheet" href="lib/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="lib/2.2.4/jquery-1.12.4.min.js"></script>
    <script src="lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="page-header">
            <h1>慕课网管理后台<small>用户数据管理中心</small></h1>
        </div>
    </div>
    <div class="row">
        <div class="jumbotron">
            <h1>MyBstis基础入门课程</h1>
            <p>通过一个项目来完成基础部分学习</p>
            <p><a class="btn btn-primary btn-lg" href="#" role="button">查看更多，请上慕课网</a></p>
        </div>
    </div>
    <div class="row">
        <table class="table table-hover table-striped">
            <tr>
                <th>用户编号</th>
                <th>登录账号</th>
                <th>用户昵称</th>
                <th>邮箱</th>
                <th>联系方式</th>
                <th>账号创建时间</th>
                <th>用户状态</th>
                <th>操作</th>
            </tr>
        </table>
    </div>
</div>
</body>
</html>