《MyBatis專案案例一：環境準備與介面準備》（填坑：idea無法識別手動建立的web專案）

翹腳猴子耍把戲發表於2020-12-18
MyBatisIdeaWeb

該系列為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

（注意原視訊教程中有大坑）
Eide Configurations>+>Tomcat Server>Local
(配置過程可參考Servlet入門第3節：第一個Servlet)

坑出現了（idea無法識別手動建立的web專案）

  1. Tomcat配置頁面出現提示NO artifacts configured ，同時也無法在Tomcat配置介面Deployment下配置context
    在這裡插入圖片描述

  2. 發現目前項中webapp資料夾的圖示與以前使用 Java Enterprise釋出web專案的web資料夾圖示不同。該資料夾都是同一型別web專案資料夾。（使用 Java Enterprise釋出web專案，選擇File>New Project>Java Enterprise）

    使用 Java Enterprise釋出web專案>web資料夾圖示
    在這裡插入圖片描述
    目前專案中的webapp資料夾（手動建立的，步驟第3步）
    在這裡插入圖片描述

  3. 此時Tomcat啟動後，訪問index.jsp出現404

填坑

排除原因：Tomcat配置頁面出現提示NO artifacts configured ，artifact這個選項怎麼沒有呢？社群版本的IDEA無此功能，你要檢視你是不是下載的免費版的IDEA，如果是免費版的那就是閹割過的，help---->about就可以看到相應的版本了
使得idea識別到手動建立的web專案

  1. Project Structure>Modules>+>web
  2. 刪掉圖中的1、2標註的記錄
  3. 在1處新建路徑，路徑為web專案中，WEB-INF資料夾下，web.xml檔案所在路徑
  4. 在2處新建路徑，路徑為src目錄下web專案所在路徑（本專案為src目錄下webapp資料夾路徑）
  5. 點選Create Artifact，確認並儲存
    在這裡插入圖片描述
    在這裡插入圖片描述
  6. 配置Tomcat中的Artifact問題
    在這裡插入圖片描述
    別忘記配置一下context
    在這裡插入圖片描述
  7. 此時webapp資料夾圖示變正常了
    在這裡插入圖片描述
  8. 啟動tomcat，此時可正常範圍index.jsp

步驟六：完善介面

  1. webapp資料夾下建立lib
  2. 將bootstrap-3.3.7-dist、JQuery2.2.4複製到lib
  3. 在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>

效果
在這裡插入圖片描述

相關文章