SSM整合實作增刪改查操作【保姆式教學】

準備作業
- 環境準備
- 資料庫準備
開始干活
- 新建個Maven專案ssmtest，加上Web支持
- 添加依賴
- 完整的pom.xml
- 創建entity、dao、service、controller包
- 物體類撰寫
- - 添加lombook
- 持久層介面撰寫
- 業務層介面撰寫
- 業務層實作類撰寫
- 表現層撰寫
- 整合步驟
- - 保證 Spring 框架在 web 工程中獨立運行
  - - 第一步：撰寫 spring 組態檔并匯入約束
    - 第二步：使用注解配置業務層
    - 第三步：匯入log4j.properties組態檔
    - 第四步：測驗 spring 能否獨立運行
  - 保證 SpringMVC 在 web 工程中獨立運行
  - - 第一步：撰寫 SpringMVC 的組態檔
    - 第二步：在 web.xml 中配置核心控制器（DispatcherServlet）
    - 第三步：撰寫 Controller 和 jsp 頁面
    - 第四步：部署tomcat服務器
    - 第五步：啟動服務器，進行測驗
  - Spring 整合 SpringMVC 的框架
  - - 第一步：配置監聽器實作啟動服務創建容器
    - 第二步：在controller中注入service物件，呼叫service物件的方法進行測驗
  - 保證 MyBatis 框架在 web 工程中獨立運行
  - - 第一步：在web專案中撰寫SqlMapConfig.xml的組態檔，撰寫核心組態檔
    - 第二步：在IUserDao介面的方法上添加注解，撰寫SQL陳述句
    - 第三步：撰寫測驗的方法
  - Spring 整合 MyBatis 框架
  - - 第一步：把SqlMapConfig.xml組態檔中的內容配置到applicationContext.xml組態檔中
    - 第三步：在IUserDao介面中添加@Repository注解
    - 第四步：在UserServiceImpl中注入dao物件
    - 第五步：修改 UserController 代碼
    - 第五步：修改 user_list.jsp 代碼，實作顯示賬戶資訊
    - 第六步：測驗查詢
    - 第七步：測驗保存
- 增刪改查（前后端分離）
- - 查找
前端vue專案
- 創建個空的vue專案
- 關閉代碼格式化校驗工具
- 安裝相關的工具
- 目錄結構
- - 撰寫main.js
  - 撰寫App.vue
  - 撰寫router檔案夾下的index.js
  - 撰寫公共部分的menu.vue
  - 撰寫views下的index.vue
  - 撰寫views下的user下的index.vue
- 效果展示

準備作業

環境準備

IDEA
MySQL 5.7.31
Tomcat 8.5.64
Maven 3.6.3

這是我的環境，版本別差太大就沒問題，

資料庫準備


CREATE DATABASE `ssmtest`;

USE `ssmtest`;

DROP TABLE IF EXISTS `user`;

CREATE TABLE `user`(
	`userid` INT(10) NOT NULL AUTO_INCREMENT COMMENT '用戶ID',
	`username` VARCHAR(100) NOT NULL COMMENT '用戶名',
	`password` VARCHAR(100) NOT NULL COMMENT '用戶密碼',
	`value` INT(10) NOT NULL DEFAULT 1 COMMENT '狀態，1正常',
	 KEY `userid`(`userid`)
	
) ENGINE=INNODB DEFAULT CHARSET=utf8;



INSERT INTO `user`(`userid`,`username`,`password`,`value`)VALUES
(1,'keafmd','666',1),
(2,'keafod','888',1);

開始干活

新建個Maven專案ssmtest，加上Web支持

在這里插入圖片描述

創建完成的效果：

添加依賴

<properties>
   <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>1.8</maven.compiler.source>
    <maven.compiler.target>1.8</maven.compiler.target>
    <!--統一的版本管理-->
    <spring.version>5.2.7.RELEASE</spring.version>
    <slf4j.version>1.7.6</slf4j.version>
    <log4j.version>1.2.12</log4j.version>
    <mysql.version>5.1.49</mysql.version>
    <mybatis.version>3.4.5</mybatis.version>
</properties>

<dependencies>
  
  <!-- spring -->
  <dependency>
    <groupId>org.aspectj</groupId>
    <artifactId>aspectjweaver</artifactId>
    <version>1.9.5</version>
  </dependency>
  <dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-aop</artifactId>
    <version>${spring.version}</version>
  </dependency>
  <dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-context</artifactId>
    <version>${spring.version}</version>
  </dependency>
  <dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-web</artifactId>
    <version>${spring.version}</version>
  </dependency>
  <dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-webmvc</artifactId>
    <version>${spring.version}</version>
  </dependency>
  <dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-test</artifactId>
    <version>${spring.version}</version>
  </dependency>
  <dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-tx</artifactId>
    <version>${spring.version}</version>
  </dependency>
  <dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-jdbc</artifactId>
    <version>${spring.version}</version>
  </dependency>

  <!--Junit-->
  <dependency>
    <groupId>junit</groupId>
    <artifactId>junit</artifactId>
    <version>4.12</version>
    <scope>compile</scope>
  </dependency>

  <!--資料庫驅動-->
  <dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>${mysql.version}</version>
  </dependency>

  <!-- 資料庫連接池 -->
  <dependency>
    <groupId>c3p0</groupId>
    <artifactId>c3p0</artifactId>
    <version>0.9.1.1</version>
    <type>jar</type>
    <scope>compile</scope>
  </dependency>

  <!--Servlet - JSP -->
  <dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>servlet-api</artifactId>
    <version>2.5</version>
    <scope>provided</scope>
  </dependency>
  <dependency>
    <groupId>javax.servlet.jsp</groupId>
    <artifactId>jsp-api</artifactId>
    <version>2.0</version>
    <scope>provided</scope>
  </dependency>
  <dependency>
    <groupId>jstl</groupId>
    <artifactId>jstl</artifactId>
    <version>1.2</version>
  </dependency>

  <!--Mybatis-->
  <dependency>
    <groupId>org.mybatis</groupId>
    <artifactId>mybatis</artifactId>
    <version>${mybatis.version}</version>
  </dependency>
  <dependency>
    <groupId>org.mybatis</groupId>
    <artifactId>mybatis-spring</artifactId>
    <version>1.3.2</version>
  </dependency>

  <!-- log  -->
  <dependency>
    <groupId>log4j</groupId>
    <artifactId>log4j</artifactId>
    <version>${log4j.version}</version>
  </dependency>
  <dependency>
    <groupId>org.slf4j</groupId>
    <artifactId>slf4j-api</artifactId>
    <version>${slf4j.version}</version>
  </dependency>
  <dependency>
    <groupId>org.slf4j</groupId>
    <artifactId>slf4j-log4j12</artifactId>
    <version>${slf4j.version}</version>
  </dependency>

</dependencies>

完整的pom.xml

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>com.keafmd</groupId>
  <artifactId>ssmtest</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>

  <name>ssmtest Maven Webapp</name>
  <!-- FIXME change it to the project's website -->
  <url>http://www.example.com</url>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>1.8</maven.compiler.source>
    <maven.compiler.target>1.8</maven.compiler.target>
    <!--統一的版本管理-->
    <spring.version>5.2.7.RELEASE</spring.version>
    <slf4j.version>1.7.6</slf4j.version>
    <log4j.version>1.2.12</log4j.version>
    <mysql.version>5.1.49</mysql.version>
    <mybatis.version>3.4.5</mybatis.version>
  </properties>

  <dependencies>

    <!-- spring -->
    <dependency>
      <groupId>org.aspectj</groupId>
      <artifactId>aspectjweaver</artifactId>
      <version>1.9.5</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-aop</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-context</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-web</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-test</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-tx</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-jdbc</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <!--Junit-->
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.12</version>
      <scope>compile</scope>
    </dependency>

    <!--資料庫驅動-->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>${mysql.version}</version>
    </dependency>

    <!-- 資料庫連接池 -->
    <dependency>
      <groupId>c3p0</groupId>
      <artifactId>c3p0</artifactId>
      <version>0.9.1.1</version>
      <type>jar</type>
      <scope>compile</scope>
    </dependency>

    <!--Servlet - JSP -->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>servlet-api</artifactId>
      <version>2.5</version>
      <scope>provided</scope>
    </dependency>
    <dependency>
      <groupId>javax.servlet.jsp</groupId>
      <artifactId>jsp-api</artifactId>
      <version>2.0</version>
      <scope>provided</scope>
    </dependency>
    <dependency>
      <groupId>jstl</groupId>
      <artifactId>jstl</artifactId>
      <version>1.2</version>
    </dependency>

    <!--Mybatis-->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis</artifactId>
      <version>${mybatis.version}</version>
    </dependency>
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis-spring</artifactId>
      <version>1.3.2</version>
    </dependency>

    <!-- log  -->
    <dependency>
      <groupId>log4j</groupId>
      <artifactId>log4j</artifactId>
      <version>${log4j.version}</version>
    </dependency>
    <dependency>
      <groupId>org.slf4j</groupId>
      <artifactId>slf4j-api</artifactId>
      <version>${slf4j.version}</version>
    </dependency>
    <dependency>
      <groupId>org.slf4j</groupId>
      <artifactId>slf4j-log4j12</artifactId>
      <version>${slf4j.version}</version>
    </dependency>

  </dependencies>

  <build>
    <finalName>ssmtest</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.1.0</version>
        </plugin>
        <!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging -->
        <plugin>
          <artifactId>maven-resources-plugin</artifactId>
          <version>3.0.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-compiler-plugin</artifactId>
          <version>3.8.0</version>
        </plugin>
        <plugin>
          <artifactId>maven-surefire-plugin</artifactId>
          <version>2.22.1</version>
        </plugin>
        <plugin>
          <artifactId>maven-war-plugin</artifactId>
          <version>3.2.2</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>

創建entity、dao、service、controller包

在這里插入圖片描述

物體類撰寫

添加lombook

在這里插入圖片描述
User：

package com.keafmd.entity;

import lombok.Data;

import java.io.Serializable;

/**
 * Keafmd
 *
 * @ClassName: User
 * @Description: 用戶物體類
 * @author: 牛哄哄的柯南
 * @Date: 2021-04-19 9:11
 * @Blog: https://keafmd.blog.csdn.net/
 */
@Data
public class User implements Serializable {

    private Integer userId;
    private String userName;
    private String password;

}

持久層介面撰寫

IUserDao ：

package com.keafmd.dao;

import com.keafmd.entity.User;

import java.util.List;

/**
 * Keafmd
 *
 * @ClassName: IUserDao
 * @Description: 用戶dao介面
 * @author: 牛哄哄的柯南
 * @Date: 2021-04-19 9:20
 * @Blog: https://keafmd.blog.csdn.net/
 */
public interface IUserDao {

    //查詢所有
    public List<User> findAll();

    //保存用戶
    public void saveUser(User user);
}

業務層介面撰寫

IUserService：

package com.keafmd.service;

import com.keafmd.entity.User;

import java.util.List;

/**
 * Keafmd
 *
 * @ClassName: IUserService
 * @Description: user業務層介面
 * @author: 牛哄哄的柯南
 * @Date: 2021-04-19 9:23
 * @Blog: https://keafmd.blog.csdn.net/
 */
public interface IUserService {

    //查詢所有
    public List<User> findAll();

    //保存用戶
    public void saveUser(User user);

}

業務層實作類撰寫

UserServiceImpl ：

package com.keafmd.service.impl;

import com.keafmd.entity.User;
import com.keafmd.service.IUserService;

import java.util.List;

/**
 * Keafmd
 *
 * @ClassName: UserService
 * @Description: user業務層實作類
 * @author: 牛哄哄的柯南
 * @Date: 2021-04-19 9:25
 * @Blog: https://keafmd.blog.csdn.net/
 */
public class UserServiceImpl implements IUserService {
    @Override
    public List<User> findAll() {
        System.out.println("user業務層實作類--findAll");
        return null;
    }

    @Override
    public void saveUser(User user) {
        System.out.println("user業務層實作類--saveUser");
    }
}

表現層撰寫

UserController ：

package com.keafmd.controller;

/**
 * Keafmd
 *
 * @ClassName: UserController
 * @Description: user控制層
 * @author: 牛哄哄的柯南
 * @Date: 2021-04-19 9:28
 * @Blog: https://keafmd.blog.csdn.net/
 */
public class UserController {
}

整合步驟

保證 Spring 框架在 web 工程中獨立運行

第一步：撰寫 spring 組態檔并匯入約束

applicationContext.xml：

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd
       http://www.springframework.org/schema/context
       http://www.springframework.org/schema/context/spring-context.xsd
       http://www.springframework.org/schema/aop
       http://www.springframework.org/schema/aop/spring-aop.xsd
       http://www.springframework.org/schema/tx
       http://www.springframework.org/schema/tx/spring-tx.xsd">

    <!-- 開啟注解掃描，要掃描的是service和dao層的注解，要忽略web層注解，因為web層讓SpringMVC框架去管理 -->
    <context:component-scan base-package="com.keafmd">
        <!-- 配置要忽略的注解 -->
        <context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
    </context:component-scan>

</beans>

第二步：使用注解配置業務層

在 UserServiceImpl 方法上加上 @Service("userService").

package com.keafmd.service.impl;

import com.keafmd.entity.User;
import com.keafmd.service.IUserService;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 * Keafmd
 *
 * @ClassName: UserService
 * @Description: user業務層實作類
 * @author: 牛哄哄的柯南
 * @Date: 2021-04-19 9:25
 * @Blog: https://keafmd.blog.csdn.net/
 */
@Service("userService")
public class UserServiceImpl implements IUserService {
    @Override
    public List<User> findAll() {
        System.out.println("user業務層實作類--findAll");
        return null;
    }

    @Override
    public void saveUser(User user) {
        System.out.println("user業務層實作類--saveUser");
    }
}

第三步：匯入log4j.properties組態檔

# Set root category priority to INFO and its only appender to CONSOLE.
#log4j.rootCategory=INFO, CONSOLE            debug   info   warn error fatal
log4j.rootCategory=info, CONSOLE, LOGFILE

# Set the enterprise logger category to FATAL and its only appender to CONSOLE.
log4j.logger.org.apache.axis.enterprise=FATAL, CONSOLE

# CONSOLE is set to be a ConsoleAppender using a PatternLayout.
log4j.appender.CONSOLE=org.apache.log4j.ConsoleAppender
log4j.appender.CONSOLE.layout=org.apache.log4j.PatternLayout
log4j.appender.CONSOLE.layout.ConversionPattern=%d{ISO8601} %-6r [%15.15t] %-5p %30.30c %x - %m\n

# LOGFILE is set to be a File appender using a PatternLayout.
log4j.appender.LOGFILE=org.apache.log4j.FileAppender
log4j.appender.LOGFILE.File=d:\axis.log
log4j.appender.LOGFILE.Append=true
log4j.appender.LOGFILE.layout=org.apache.log4j.PatternLayout
log4j.appender.LOGFILE.layout.ConversionPattern=%d{ISO8601} %-6r [%15.15t] %-5p %30.30c %x - %m\n

第四步：測驗 spring 能否獨立運行

測驗代碼：

package com.keafmd;

import com.keafmd.service.IUserService;
import org.junit.Test;
import org.springframework.context.ApplicationContext;
import org.springframework.context.support.ClassPathXmlApplicationContext;

/**
 * Keafmd
 *
 * @ClassName: TestSpring
 * @Description: 測驗 spring 能否獨立運行
 * @author: 牛哄哄的柯南
 * @Date: 2021-04-19 9:38
 * @Blog: https://keafmd.blog.csdn.net/
 */
public class TestSpring {

    @Test
    public void test1(){
        //加載組態檔
        ApplicationContext ac = new ClassPathXmlApplicationContext("classpath:applicationContext.xml");
        //獲取物件
        IUserService userService = (IUserService)ac.getBean("userService");
        //呼叫方法
        userService.findAll();

    }
}

測驗效果：
在這里插入圖片描述

保證 SpringMVC 在 web 工程中獨立運行

第一步：撰寫 SpringMVC 的組態檔

springmvc.xml：

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation=" http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd
       http://www.springframework.org/schema/mvc
       http://www.springframework.org/schema/mvc/spring-mvc.xsd
       http://www.springframework.org/schema/context
       http://www.springframework.org/schema/context/spring-context.xsd">

    <!-- 開啟注解掃描，掃描controller的注解，別的不掃描 -->
    <context:component-scan base-package="com.keafmd">
        <context:include-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
    </context:component-scan>
    <!-- 配置視圖決議器 -->
    <bean id="viewResolver"
          class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <!-- JSP檔案所在的目錄 -->
        <property name="prefix" value="/WEB-INF/pages/"/>
        <!-- 檔案的后綴名 -->
        <property name="suffix" value=".jsp"/>
    </bean>

    <!-- 過濾靜態資源，設定靜態資源不過濾 -->
    <mvc:resources location="/css/" mapping="/css/**"/>
    <mvc:resources location="/images/" mapping="/images/**"/>
    <mvc:resources location="/js/" mapping="/js/**"/>

    <!-- 開啟對SpringMVC注解的支持 -->
    <mvc:annotation-driven/>

</beans>

第二步：在 web.xml 中配置核心控制器（DispatcherServlet）

web.xml：

<!DOCTYPE web-app PUBLIC
        "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
        "http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
    <display-name>Archetype Created Web Application</display-name>

    <!-- 配置前端控制器：服務器啟動必須加載，需要加載springmvc.xml組態檔 -->
    <servlet>
        <servlet-name>dispatcherServlet</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <!-- 配置初始化引數，加載springmvc.xml組態檔 -->
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:springmvc.xml</param-value>
        </init-param>
        <!-- 啟動服務器，創建該servlet -->
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>dispatcherServlet</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

    <!--解決中文亂碼的過濾器-->
    <filter>
        <filter-name>characterEncodingFilter</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</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>

</web-app>

第三步：撰寫 Controller 和 jsp 頁面

UserController ：

package com.keafmd.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 * Keafmd
 *
 * @ClassName: UserController
 * @Description: user控制層
 * @author: 牛哄哄的柯南
 * @Date: 2021-04-19 9:28
 * @Blog: https://keafmd.blog.csdn.net/
 */
@Controller
@RequestMapping("/user")
public class UserController {

    @RequestMapping("/findAll")
    public String findAll(){
        System.out.println("表現層--查詢所有用戶");
        return "user_list";
    }
}

index.jsp：

<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2021/4/19
  Time: 9:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>

    <a href="user/findAll">查詢所有用戶</a>

</body>
</html>

user_list.jsp：

<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2021/4/19
  Time: 9:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>

    <h1>查詢所有用戶</h1>

</body>
</html>

第四步：部署tomcat服務器

在這里插入圖片描述

-Dfile.encoding=utf-8

第五步：啟動服務器，進行測驗

在這里插入圖片描述
點擊后的效果：

Spring 整合 SpringMVC 的框架

第一步：配置監聽器實作啟動服務創建容器

<!-- 配置 spring 提供的監聽器，用于啟動服務時加載容器 ，
	該監聽器只能加載 WEB-INF 目錄中名稱為 applicationContext.xml 的組態檔 -->
<listener>
  <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<!-- 手動指定 spring 組態檔位置 -->
<context-param>
  <param-name>contextConfigLocation</param-name>
  <param-value>classpath:applicationContext.xml</param-value>
</context-param>

完整的web.xml：

<!DOCTYPE web-app PUBLIC
        "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
        "http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
  <display-name>Archetype Created Web Application</display-name>

  <!-- 配置前端控制器：服務器啟動必須加載，需要加載springmvc.xml組態檔 -->
  <servlet>
    <servlet-name>dispatcherServlet</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <!-- 配置初始化引數，加載springmvc.xml組態檔 -->
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath:springmvc.xml</param-value>
    </init-param>
    <!-- 啟動服務器，創建該servlet -->
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>dispatcherServlet</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>


  <!-- 配置 spring 提供的監聽器，用于啟動服務時加載容器 ，
   該監聽器只能加載 WEB-INF 目錄中名稱為 applicationContext.xml 的組態檔 -->
  <listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>
  <!-- 手動指定 spring 組態檔位置 -->
  <context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>classpath:applicationContext.xml</param-value>
  </context-param>


  <!--解決中文亂碼的過濾器-->
  <filter>
    <filter-name>characterEncodingFilter</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</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>

</web-app>

第二步：在controller中注入service物件，呼叫service物件的方法進行測驗

UserController ：

package com.keafmd.controller;

import com.keafmd.service.IUserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 * Keafmd
 *
 * @ClassName: UserController
 * @Description: user控制層
 * @author: 牛哄哄的柯南
 * @Date: 2021-04-19 9:28
 * @Blog: https://keafmd.blog.csdn.net/
 */
@Controller
@RequestMapping("/user")
public class UserController {

    @Autowired
    private IUserService userService;


    @RequestMapping("/findAll")
    public String findAll(){
        System.out.println("表現層--查詢所有用戶");
        
        //呼叫service的方法
        userService.findAll();

        return "user_list";
    }
}

重啟Tomcat點擊查詢所有用戶，控制臺輸出效果如下：
在這里插入圖片描述

保證 MyBatis 框架在 web 工程中獨立運行

第一步：在web專案中撰寫SqlMapConfig.xml的組態檔，撰寫核心組態檔

SqlMapConfig.xml：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
    <!-- 配置連接資料庫的資訊 -->
    <properties resource="jdbcConfig.properties"></properties>
    <!-- 配置mybatis的環境 -->
    <environments default="mysql">
        <environment id="mysql">
            <!-- 配置事務管理 -->
            <transactionManager type="JDBC"></transactionManager>
            <dataSource type="pooled">
                <property name="driver" value="${jdbc.driver}"/>
                <property name="url" value="${jdbc.url}"/>
                <property name="username" value="${jdbc.username}"/>
                <property name="password" value="${jdbc.password}"/>
            </dataSource>
        </environment>
    </environments>

    <!-- 指定映射檔案位置 -->
    <mappers>
        <!--<mapper class="com.keafmd.dao.IAccountDao"/>
        <mapper class="com.keafmd.dao.IUserDao"/>-->
        <package name="com.keafmd.dao"/>
    </mappers>
</configuration>

jdbcConfig.properties：

jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/ssmtest
jdbc.username=root
jdbc.password=18044229

第二步：在IUserDao介面的方法上添加注解，撰寫SQL陳述句

IUserDao ：

package com.keafmd.dao;

import com.keafmd.entity.User;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Select;

import java.util.List;

/**
 * Keafmd
 *
 * @ClassName: IUserDao
 * @Description: 用戶dao介面
 * @author: 牛哄哄的柯南
 * @Date: 2021-04-19 9:20
 * @Blog: https://keafmd.blog.csdn.net/
 */
public interface IUserDao {

    //查詢所有
    @Select("select * from user")
    public List<User> findAll();

    //保存用戶
    @Insert("insert into user(username,password) values(#{userName},#{password})")
    public void saveUser(User user);
}

第三步：撰寫測驗的方法

TestMybatis ：

package com.keafmd;

import com.keafmd.dao.IUserDao;
import com.keafmd.entity.User;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;
import org.junit.After;
import org.junit.Before;
import org.junit.Test;

import java.io.InputStream;
import java.util.List;

/**
 * Keafmd
 *
 * @ClassName: TestMybatis
 * @Description:
 * @author: 牛哄哄的柯南
 * @Date: 2021-04-19 10:20
 * @Blog: https://keafmd.blog.csdn.net/
 */
public class TestMybatis {
    private InputStream in;
    private SqlSessionFactory factory;
    private SqlSession session;
    private IUserDao userDao;

    @Before
    public void init() throws Exception{
        //加載組態檔
        in = Resources.getResourceAsStream("SqlMapConfig.xml");
        //創建SqlSessionFactory物件
        factory = new SqlSessionFactoryBuilder().build(in);
        //創建SqlSession物件
        session = factory.openSession();
        //獲取到代理物件
        userDao = session.getMapper(IUserDao.class);
    }

    @After
    public void destory() throws Exception{
        session.commit();
        session.close();
        in.close();
    }

    /**
     * 查詢所有
     */
    @Test
    public void run1(){
        List<User> users = userDao.findAll();
        for (User user : users) {
            System.out.println(user);
        }
    }

    /**
     * 測驗保存
     */
    @Test
    public void saveUser(){
        User user = new User();
        user.setUserName("毛利小五郎");
        user.setPassword("999");
        userDao.saveUser(user);
    }


}

測驗效果：
在這里插入圖片描述

Spring 整合 MyBatis 框架

把 mybatis 組態檔（SqlMapConfig.xml）中內容配置到 spring 組態檔中同時，把 mybatis 組態檔的內容清掉，

第一步：把SqlMapConfig.xml組態檔中的內容配置到applicationContext.xml組態檔中

把以下內容添加到applicationContext.xml組態檔中：

<!--Spring整合Mybatisl框架-->
<!-- 配置C3P0的連接池物件 -->
<bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
    <property name="driverClass" value="com.mysql.jdbc.Driver"/>
    <property name="jdbcUrl" value="jdbc:mysql:///ssmtest"/>
    <property name="user" value="root"/>
    <property name="password" value="18044229"/>
</bean>
<!-- 配置SqlSession的工廠 -->
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
    <property name="dataSource" ref="dataSource"/>
</bean>
<!-- 配置掃描dao的包 -->
<bean id="mapperScanner" class="org.mybatis.spring.mapper.MapperScannerConfigurer">
    <property name="basePackage" value="com.keafmd.dao"/>
</bean>

<!--SqlMapConfig.xml和jdbcConfig.properties可以洗掉了-->

再添加上配置Spring框架宣告式事務管理：

<!--配置Spring框架宣告式事務管理-->
<!--配置事務管理器-->
<bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
    <property name="dataSource" ref="dataSource"></property>
</bean>
<!-- 配置事務的通知 -->
<tx:advice id="txAdvice" transaction-manager="transactionManager">
    <tx:attributes>
        <tx:method name="find*" propagation="SUPPORTS" read-only="true"/>
        <tx:method name="*" isolation="DEFAULT"/>
    </tx:attributes>
</tx:advice>
<!-- 配置AOP增強 -->
<aop:config>
    <!--<aop:advisor advice-ref="txAdvice" pointcut="execution(* com.keafmd.service.impl.*.*(..))"/>-->
    <!-- 配置切入點運算式 -->
    <aop:pointcut expression="execution(* com.keafmd.service.impl.*.*(..))" id="pt1"/>
    <!-- 建立通知和切入點運算式的關系 -->
    <aop:advisor advice-ref="txAdvice" pointcut-ref="pt1"/>
</aop:config>

applicationContext.xml：

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd
       http://www.springframework.org/schema/context
       http://www.springframework.org/schema/context/spring-context.xsd
       http://www.springframework.org/schema/aop
       http://www.springframework.org/schema/aop/spring-aop.xsd
       http://www.springframework.org/schema/tx
       http://www.springframework.org/schema/tx/spring-tx.xsd">

    <!-- 開啟注解掃描，要掃描的是service和dao層的注解，要忽略web層注解，因為web層讓SpringMVC框架去管理 -->
    <context:component-scan base-package="com.keafmd">
        <!-- 配置要忽略的注解 -->
        <context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
    </context:component-scan>


    <!--Spring整合Mybatisl框架-->
    <!-- 配置C3P0的連接池物件 -->
    <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
        <property name="driverClass" value="com.mysql.jdbc.Driver"/>
        <property name="jdbcUrl" value="jdbc:mysql:///ssmtest?characterEncoding=utf8"/>
        <property name="user" value="root"/>
        <property name="password" value="root"/>
    </bean>
    <!-- 配置SqlSession的工廠 -->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="dataSource"/>
    </bean>
    <!-- 配置掃描dao的包 -->
    <bean id="mapperScanner" class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="com.keafmd.dao"/>
    </bean>

    <!--SqlMapConfig.xml和jdbcConfig.properties可以洗掉了-->

    <!--配置Spring框架宣告式事務管理-->
    <!--配置事務管理器-->
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource"></property>
    </bean>
    <!-- 配置事務的通知 -->
    <tx:advice id="txAdvice" transaction-manager="transactionManager">
        <tx:attributes>
            <tx:method name="find*" propagation="SUPPORTS" read-only="true"/>
            <tx:method name="*" isolation="DEFAULT"/>
        </tx:attributes>
    </tx:advice>
    <!-- 配置AOP增強 -->
    <aop:config>
        <!--<aop:advisor advice-ref="txAdvice" pointcut="execution(* com.keafmd.service.impl.*.*(..))"/>-->
        <!-- 配置切入點運算式 -->
        <aop:pointcut expression="execution(* com.keafmd.service.impl.*.*(..))" id="pt1"/>
        <!-- 建立通知和切入點運算式的關系 -->
        <aop:advisor advice-ref="txAdvice" pointcut-ref="pt1"/>
    </aop:config>


</beans>

第三步：在IUserDao介面中添加@Repository注解

package com.keafmd.dao;

import com.keafmd.entity.User;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Result;
import org.apache.ibatis.annotations.Results;
import org.apache.ibatis.annotations.Select;
import org.springframework.stereotype.Repository;

import java.util.List;

/**
 * Keafmd
 *
 * @ClassName: IUserDao
 * @Description: 用戶dao介面
 * @author: 牛哄哄的柯南
 * @Date: 2021-04-19 9:20
 * @Blog: https://keafmd.blog.csdn.net/
 */
@Repository
public interface IUserDao {

    //查詢所有
    @Select("select * from user")
    public List<User> findAll();

    //保存用戶
    @Insert("insert into user(username,password) values(#{userName},#{password})")
    public void saveUser(User user);
}

第四步：在UserServiceImpl中注入dao物件

package com.keafmd.service.impl;

import com.keafmd.dao.IUserDao;
import com.keafmd.entity.User;
import com.keafmd.service.IUserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 * Keafmd
 *
 * @ClassName: UserService
 * @Description: user業務層實作類
 * @author: 牛哄哄的柯南
 * @Date: 2021-04-19 9:25
 * @Blog: https://keafmd.blog.csdn.net/
 */
@Service("userService")
public class UserServiceImpl implements IUserService {

    @Autowired
    IUserDao userDao;

    @Override
    public List<User> findAll() {
        System.out.println("user業務層實作類--findAll");
        return userDao.findAll();
    }

    @Override
    public void saveUser(User user) {
        System.out.println("user業務層實作類--saveUser");
        userDao.saveUser(user);
    }
}

第五步：修改 UserController 代碼

package com.keafmd.controller;

import com.keafmd.entity.User;
import com.keafmd.service.IUserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpRequest;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;

/**
 * Keafmd
 *
 * @ClassName: UserController
 * @Description: user控制層
 * @author: 牛哄哄的柯南
 * @Date: 2021-04-19 9:28
 * @Blog: https://keafmd.blog.csdn.net/
 */
@Controller
@RequestMapping("/user")
public class UserController {

    @Autowired
    private IUserService userService;


    @RequestMapping("/findAll")
    public String findAll(Model model){
        System.out.println("表現層--查詢所有用戶");

        //呼叫service的方法
        List<User> userList = userService.findAll();
        model.addAttribute("userList",userList);

        return "user_list";
    }

    @RequestMapping("/save")
    public void save(User user , HttpServletRequest request, HttpServletResponse response) throws IOException {
        userService.saveUser(user);
        response.sendRedirect(request.getContextPath()+"/user/findAll");
        return;

    }
}

第五步：修改 user_list.jsp 代碼，實作顯示賬戶資訊

<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2021/4/19
  Time: 9:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <h1>查詢所有用戶</h1>

<%--    ${userList}--%>

    <c:forEach items="${userList}" var="user">
        ${user.userName}
        ${user.password}
    </c:forEach>

</body>
</html>

第六步：測驗查詢

效果：
在這里插入圖片描述

第七步：測驗保存

修改index.jsp代碼，添加測驗保存的代碼：

<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2021/4/19
  Time: 9:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>

    <a href="user/findAll">查詢所有用戶</a>

    <h1>測驗保存</h1>
    <form action="user/save" method="post">
        賬戶名：<input type="text" name="userName" /><br/>
        密碼：<input type="text" name="password" /><br/>
        <input type="submit" value="保存">
    </form>

</body>
</html>

修改 UserController 代碼，添加save方法：

package com.keafmd.controller;

import com.keafmd.entity.User;
import com.keafmd.service.IUserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpRequest;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;

/**
 * Keafmd
 *
 * @ClassName: UserController
 * @Description: user控制層
 * @author: 牛哄哄的柯南
 * @Date: 2021-04-19 9:28
 * @Blog: https://keafmd.blog.csdn.net/
 */
@Controller
@RequestMapping("/user")
public class UserController {

    @Autowired
    private IUserService userService;


    @RequestMapping("/findAll")
    public String findAll(Model model){
        System.out.println("表現層--查詢所有用戶");

        //呼叫service的方法
        List<User> userList = userService.findAll();
        model.addAttribute("userList",userList);

        return "user_list";
    }

    @RequestMapping("/save")
    public void save(User user , HttpServletRequest request, HttpServletResponse response) throws IOException {
        userService.saveUser(user);
        response.sendRedirect(request.getContextPath()+"/user/findAll");
        return;

    }
}

測驗效果：
在這里插入圖片描述

在這里插入圖片描述

增刪改查（前后端分離）

查找

實際開發中，多為前后端分離，所以我們需要修改我們的表現層代碼，同時需要添加上jackson的依賴，

<dependency>
  <groupId>com.fasterxml.jackson.core</groupId>
  <artifactId>jackson-core</artifactId>
  <version>2.11.0</version>
</dependency>
<dependency>
  <groupId>com.fasterxml.jackson.core</groupId>
  <artifactId>jackson-databind</artifactId>
  <version>2.11.0</version>
</dependency>
<dependency>
  <groupId>com.fasterxml.jackson.core</groupId>
  <artifactId>jackson-annotations</artifactId>
  <version>2.11.0</version>
</dependency>

UserController：

package com.keafmd.controller;

import com.keafmd.common.CommonResult;
import com.keafmd.entity.User;
import com.keafmd.service.IUserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpRequest;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;

/**
 * Keafmd
 *
 * @ClassName: UserController
 * @Description: user控制層
 * @author: 牛哄哄的柯南
 * @Date: 2021-04-19 9:28
 * @Blog: https://keafmd.blog.csdn.net/
 */
@Controller
@RequestMapping("/user")
public class UserController {

    @Autowired
    private IUserService userService;


    // http://127.0.0.1:8080/ssmtest/user/findAll
    @RequestMapping("/findAll")
    @ResponseBody
    public List<User> findAll(){
        System.out.println("表現層--查詢所有用戶");

        //呼叫service的方法
        List<User> userList = userService.findAll();
//        model.addAttribute("userList",userList);

//        return "user_list";

        return userList;
    }

    @RequestMapping("/save")
    public void save(User user , HttpServletRequest request, HttpServletResponse response) throws IOException {
        userService.saveUser(user);
        response.sendRedirect(request.getContextPath()+"/user/findAll");
        return;

    }
}

訪問： http://127.0.0.1:8080/ssmtest/user/findAll
在這里插入圖片描述

前端vue專案

這里我們需要有相關的環境，這里不細說了，

創建個空的vue專案

找個檔案夾進入命令列，輸入：vue create ssmtest

關閉代碼格式化校驗工具

在專案的根目錄（與package.json同級）中，添加名稱為vue.config.js的檔案，就能自動被vue-cli加載，

module.exports = {
    lintOnSave:false, //關閉代碼格式化校驗工具
    devServer:{
        port: 80 //修改啟動埠
    }
}

在這里插入圖片描述

安裝相關的工具

1、安裝vue-router

npm install vue-router

2、安裝 element-ui插件

npm i element-ui -S

3、安裝axios

npm install axios

目錄結構

在這里插入圖片描述

撰寫main.js

在這里引入各種組件，寫上router，

import Vue from 'vue'
import App from './App.vue'

import router from '@/router'

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

Vue.config.productionTip = false

new Vue({

	render: h => h(App),
	router
}).$mount('#app')

撰寫App.vue

在div中寫入<router-view></router-view>，用路由控制界面，

<template>
  <div id="app">

	<router-view></router-view>

  </div>
</template>

<script>
// import First from './components/First.vue'

export default {
  name: 'App',
  components: {
	// First
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

撰寫router檔案夾下的index.js

在這里使用router配置各種路徑

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
// import A from '@/components/A'
// import B from '@/components/B'

export default new Router({
	mode: 'history',
	routes: [{
			path: '/',
			name: 'Index',
			component: () => import('@/views'),
			children: [{
					path: '/user',
					name: 'User',
					component: () => import('@/views/user')
				}
			]
		}
		// ,
		// {
		// 	path: '/user',
		// 	name: 'User',
		// 	component: () => import('@/views/user')
		// }
		// {
		//   path: '/aaa',
		//   name: 'A',
		//   component: A
		// },
		// {
		//   path: '/bbb',
		//   name: 'B',
		//   component: B
		// }
	]
})

撰寫公共部分的menu.vue

注意：在 el-menu 標簽里注入router，

<template>

    <el-menu router >

        <el-submenu index="1">
            <template slot="title">
                <span>管理</span>
            </template>
            <el-menu-item-group>
                <el-menu-item index="/user"> <i class="el-icon-location"></i>用戶管理</el-menu-item>
                <!-- <el-menu-item index="/menu"> <i class="el-icon-location"></i>選單管理</el-menu-item> -->
            </el-menu-item-group>
        </el-submenu>

       <!-- <el-submenu index="2">
            <template slot="title">
                <span>ElementUI組件</span>
            </template>
            <el-menu-item-group>
                <el-menu-item index="/table"> <i class="el-icon-location"></i>表格組件</el-menu-item>
            </el-menu-item-group>
        </el-submenu> -->

    </el-menu>

</template>

<script>
    export default {
        name: 'Menu'
    }
</script>

<style>
</style>

撰寫views下的index.vue

<template>

	<el-container class="wrap">
		<el-header class="header">
			<el-row>
				<el-col :span="20">資訊系統</el-col>
				<el-col :span="4">
					<el-dropdown>
						<span class="el-dropdown-link">
							keafmd<i class="el-icon-arrow-down el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command="Personal">個人設定</el-dropdown-item>
							<el-dropdown-item command="Logout">退出</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>


				</el-col>
			</el-row>

		</el-header>
		<el-container>
			<el-aside width="200px" class="aside">
				<Menu></Menu>
			</el-aside>
			<el-main>
				<!-- <User></User> -->
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>

</template>

<script>
	// import User from './user/index.vue'
	import Menu from '@/components/menu'
	export default {
		name: 'Index',
		components: {
			Menu
			// User

		},
		data() {
			return {}
		},
		methods: {

		},
		created() {}
	}
</script>

<style scoped>
	.wrap {
		height: 100vh;
	}

	.header {
		border-bottom: 1px solid aqua;
	}

	.aside {
		border-right: 1px solid aqua;
	}
</style>

撰寫views下的user下的index.vue

<template>
	<div>

		<el-table :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
			style="width: 100%">
			<el-table-column label="userName" prop="userName">
			</el-table-column>
			<el-table-column label="Password" prop="password">
			</el-table-column>
			<el-table-column align="right">
				<template slot="header" slot-scope="scope">
					<el-input v-model="search" size="mini" placeholder="輸入關鍵字搜索" />
				</template>
				<template slot-scope="scope">
					<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
					<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete
					</el-button>
				</template>
			</el-table-column>
		</el-table>



	</div>
</template>

<script>
	import axios from 'axios';
	axios.defaults.baseURL = 'http://127.0.0.1:8080/ssmtest';

	export default {
		name: 'User',
		components: {

		},
		data() {
			return {
				tableData: [],
				search: ''
			}
		},
		methods: {
			getData() {

				axios.get('/user/findAll')
					.then((res) => {
						this.tableData = res.data
					})
					.catch(function(error) {
						console.log(error);
					});

			},
			handleEdit(index, row) {
				console.log(index, row);
			},
			handleDelete(index, row) {
				console.log(index, row);
			}
		},
		created() {
			this.getData();
		}
	}
</script>

<style>
</style>

效果展示

查詢效果：
在這里插入圖片描述

看完如果對你有幫助，感謝點贊支持！
如果你是電腦端，看到右下角的 “一鍵三連” 了嗎，沒錯點它[哈哈]
在這里插入圖片描述
加油！

共同努力！

Keafmd

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/282125.html

標籤：其他

上一篇：帶學妹理解Vue的子組件封裝

下一篇：圖書管理練習（Vue 基礎練習 1）