java_web [Maven]项目-Toy模板网

这篇具有很好参考价值的文章主要介绍了java_web [Maven]项目。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一. web项目搭建及web服务器

(一) 一般Java项目

javaweb项目,java,java,maven,前端,tomcat,intellij-idea

(二) java_web 项目创建

javaweb项目,java,java,maven,前端,tomcat,intellij-idea

(三) web服务器

Web服务器：【apacth apacthTomcat weblogic】发布项目—最终运行

1. 结构剖析：tomcat

javaweb项目,java,java,maven,前端,tomcat,intellij-idea

2. `tomcatserver.xml` 配置文件x相关的配置场景

javaweb项目,java,java,maven,前端,tomcat,intellij-idea

(四) tomcat项目部署

tomcat项目部署：将项目复制到 tomcat 里 webapps 目录里

tomcat 导进IDEA

javaweb项目,java,java,maven,前端,tomcat,intellij-idea

(五) jsp详解及内置对象

Jsp概念：内嵌java代码的html页面—交互式页面

Jsp的编译过程：jdk—>现将jsp编译成一个.java文件—>再把他编译成.class 文件

1. 添加`.jar`包

添加到项目目录里的lib目录中

2. 表单提交数据

<form action="addUser.jsp" method="post" id="myFrom" name="addUserform">

<form 提交数据—提交的是表单元素数据【控件】
Action:数据提交地址？【html,jsp ctr，邮箱】
Method：数据提交方式【get/post…枚举类型】
get提交（显示） post提交（隐式）
Name：给表单起名字—方便与js提交表单 >

3. jsp接收数据

.jsp文件解析级应用
📌request 请求对象：—>封装所有客户端请求的对象—>将对应的表单元素名和值以键值对的形式封装—>用户通过其对应的方法就能获得对应的值
String name=request.getParameter("userName");
📌Response 响应对象
response.sendRedirect("HD_fwdPractList.jsp");

⚪Request：当客户端发起请求时创建—当服务端接收到请求时销毁
⚪Response:当服务端发起响应时创建—当客户端接收到响应时销毁
📌Jsp常用内置对象：
Out对象—用于向页面输出信息
Out.print()
out.print("<script>alert('修改成功');window.location.href='YH_UserList.jsp'</script>");
📌Seesion 会话对象
⚪会话？：当客户进入一个站点到离开的那段时间称之为一会话：session监控用户在此会话过程中的一切动作
⚪由于session对象的生命周期的特殊性，在开发过程中，用session对象在多个页面共享参数
⚪Session对象的生命周期：当用户进入一个站点就创建，关闭浏览器销毁【默认的销毁时间为30min】

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!--导入 method 类-->
<%@ page import="com.qf.doman.method" %>

<!--创建对象，下面直接使用-->
<jsp:useBean id="m" class="com.qf.domain.method"></jsp:useBean>

<!--在 ‘<% %>’ 里面可以写Java代码-->
<%  
 <!--post提交中文乱码转换-->
 request.setCharacterEncoding("UTF-8");

 <!--get方式提交，中文乱码最终解决-->
 String name = request.getParameter("userName");
 String s = new String(name.getBytes("iso8859-1"), "UTF-8");

 <!--获得表单数据-->
 String name=request.getParameter("userName");
 String pass=request.getParameter("passWord");

<!--调用method类中的方法-->
 method m=new method();
 login p =m.checklogin(name, pass);
 
 <!--响应界面-->
 response.sendRedirect("HD_fwdPractList.jsp");

 <!--向页面输出信息-->
 out.print("<script>alert('修改成功');window.location.href='YH_UserList.jsp'</script>");

 <!--设置标识， 用于数据共享-->
 session.setAttribute("username", name);
 <!--销毁sestion会话对象-->
 sestion.invalidate();
 %>
 <html>
	<% %> 外面可以写html代码
	<!--获取 sestion 共享的数据  session.getAttribute("username")；-->
	span ><a href="javaScript:quanxian()" id="names"><%=session.getAttribute("username") %></a></span>

 </html>

4. jsp 中显示获取的多个数据

javaweb项目,java,java,maven,前端,tomcat,intellij-idea

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<jsp:useBean id="m" class="com.qf.doman.method"></jsp:useBean>
<%@ page import="com.qf.doman.pojo.user" %>
<%
	List<user> list=m.getUser();
%>
	<body>
	    <table class="tablelist" style="text-align: center; width: 100%">
	    	<thead>
		    	<tr>
		        <th><input id="s" name="" type="checkbox" value="" onclick="checkAll()" /></th>
		        <th>编号<i class="sort"><img src="images/px.gif" /></i></th>
		        <th>用户名</th>
		        <th>密码</th>
		        <th>权限</th>
		        <th>操作</th>
		        </tr>
	        </thead>
	        <tbody>
		         <%for(int i=0;i<list.size();i++){ %>
			        <tr>
				        <td><input id="ss" name="" type="checkbox" value="<%=list.get(i).getUid() %>" /></td>
				        <td><%=list.get(i).getUid() %></td>
				        <td><%=list.get(i).getUname() %></td>
				        <td><input readonly="readonly" type="password" value="<%=list.get(i).getUpass()%>"></td>
				        <td><%=list.get(i).getUroot() %></td>
			        </tr> 
		         <%} %>
	        </tbody>
	    </table>
	</body>

(六) Servlet基本概念，原理及实操

📌Java Servlet 是与平台无关的服务器端组件，它运行在Servlet 容器中；
📌Servlet容器负责Servlet和客户的通信以及调用Servlet的方法；
📌Servlet和客户的通信采用“请求/响应”模式
⚪后台版的 jsp
📌每一个JSP页面就是一个servlet
📌JSP在执行时，Web服务器先要把JSP页面翻译成Java源代码，而这个源代码就是一个servlet
📌servlet 可以完成JSP的所有功能

1. Servlet映射配置

javaweb项目,java,java,maven,前端,tomcat,intellij-idea

2. servlet 类创建及常用方法实操

javaweb项目,java,java,maven,前端,tomcat,intellij-idea

@WebServlet(name = "Servlet", value = "/Servlet")
public class Servlet extends HttpServlet {

   @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 处理 get 请求
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 处理 post 请求

        //弹框乱码转换
        response.setContentType("text/html;charset=UTF-8");
        //post提交中文乱码转换
        request.setCharacterEncoding("UTF-8");
        // 获取out对象
        PrintWriter out = response.getWriter();
        // 获取session对象
        HttpSession session = request.getSession();
        //获得表单数据
        String name=request.getParameter("userName");
        String pass=request.getParameter("passWord");
        // 设置标识， 用于数据共享
        session.setAttribute("username", name);
        // 获取共享数据
        String uname = (String) session.getAttribute("username");
        out.print("<script>alert('修改失败');window.location.href='HD_fwdPractList.jsp'</script>");
        
    }
}

(七) Ajax—实现局部刷新和异步提交—请求

📌Ajax的概念：利用js实现的异步交互机制—局部刷新
📌Ajax的分类：
1）原生态ajax ：
XmlHttprequest(核心对象)：–根据不同浏览器创建不同的XmlHttprequest对象【先判断你使用的是什么浏览器----】兼容性问题-----物联网—c c++| 底层交互xml 动态创建xml
2）jquery封装的ajax：
Ajax参数说明：

<script>
	$.ajax({
	    type : 'post',//设置数据请求方式
	    async : true,//设置提交模式—异步提交
	    url : 'insertUsers',//请求地址或数据提交地址---【controllor  接口】servlet
	    dataType : 'json',//设置接受服务端返回数据类型
	    // dataType : 'text',
	    
	    // Ajax提交数据
	    data:{
			name:”cuihua”,//需要带的参数或提交的数据
			age:18
		},
		// data:$('#myFrom').serialize(), //将表单数据序列化
		// myFrom 是表单 id

		// Ajax 接收数据
	    success : function(data) {
			//当数据提交成功或者接口请求成功自动执行的函数
			Data:就是服务端返回的数据
			//业务逻辑自己写
			if(data.trim()==1) {
                alert("发布成功");
                window.location.href="HD_fwdPractList.jsp";
            } else if(data.trim()==0) {
                alert("发布失败");
                window.location.href="HD_fwdPractList.jsp";
            }
	    },
	    error : function(data) {
	    	//当数据提交失败或者接口请求失败自动执行的函数
			Data:就是服务端返回的数据
	    }
	});
</script>

二. jdbc 链接数据库

(一) jdbc 链接数据库原理

javaweb项目,java,java,maven,前端,tomcat,intellij-idea

(二) jdbc 链接数据库

导入mysql-connector-java-8.0.30.jar jar 包
生成库文件

3.jdbc 链接数据库各种情况及方法讲解（理解就行 ）

import java.sql.*;
import java.util.HashMap;

public class TestConnectionMysql {
    public static void main(String[] args) throws ClassNotFoundException, SQLException {
        HashMap<String, Object> map = new HashMap<>();

        // 面试:本机的几种表示形式
        // a:localhost	     b:127.0.0.1
        // c: ip地址(cmd -> ipconfig): 192. 168.108.1 	d:讣算机名
        // 服务端口：
        // mysql :3306 	sqlSever :1433
        // orcl: 1521	sqlite: 直接链接--文件

        // 1. 加载驱动
        Class.forName("com.mysql.cj.jdbc.Driver");  // 固定写法，加载驱动

        // 2. 用户信息和url
        String userName = "root"; // 用户名
        String  passWord = "123456"; // 密码
        String sqlName = "som"; // 数据库名称
        String url = "jdbc:mysql://localhost:3306/"+sqlName+"?serverTimezone=UTC&"+
                "useSSL=false&allowPublicKeyRetrieval=true&serverTimezone=GMT%2b8";

        // 3. 连接成功，返回值是--数据库对象（connection） 代表数据库 是一种对象
        Connection connection = DriverManager.getConnection(url, userName, passWord);

        // 4. 创建执行对象
        Statement statement = connection.createStatement();
        // 执行对象 就可以调用对应的方法，完成对应操作

        // 5. 指向sql的对象去执行sql语句

        // Statement 方法解析
        // 1）executeQuery （查询）
        // public abstract ResultSet executeQuery(String sql) throws SQLException
        // 参数：静态的SQL SELECT（查询）语句
        // 返回值：包含有查询产生的数据的ResultSet；永远不为null
        String sql = "select * from user where phone = '15199235042'";
        ResultSet resultSet = statement.executeQuery(sql);

        // 这里count是：搜索出了多少条数据
        int count = resultSet.getMetaData().getColumnCount();  // -->3

        // resultSet.next() 的值是：查询成功为true，调用一次后其值立马变为false；查询失败为false；
        while (resultSet.next()) {
            // (1) 查询出来后，直接获取查询结果(一个一个单独获取)
            //  field 标识的字段名【键】--> phone (获取的是【键】)
            String field = resultSet.getMetaData().getColumnName(1);

            // field1 标识的值【值】--> 15199235032 (获取的是【值】)
            String field1 = (String) resultSet.getObject(field);
            // String phone = (String) resultSet.getObject("phone"); 键也可以不用获取，自己直接给即可

            // (2) 查询出来后，直接获取查询结果(一次性获取全部查询结果)
            // 注意下标是从1开始的
            for (int i = 1; i <= count; i++) {

                //  field 标识的字段名【键】--> phone (获取的是全部的【键】)
                String field2 = resultSet.getMetaData().getColumnName(i);

                // field1 标识的值【值】--> 15199235032 (获取的是全部的【值】)
                String field3 = (String) resultSet.getObject(field2);
                // String phone = (String) resultSet.getObject("phone"); 键也可以不用获取，自己直接给即可

                // (3) 查询出来后，放进map集合中 (一次性全部放进去)
                map.put(field2, resultSet.getString(field2));

                // (4) {phone=15199235032} 根据键，筛选数据库里面查到的值，并把查到的值赋值给对应的键
                map.put("phone", resultSet.getString("phone"));

                // 根据键，获取值
                String phone1 = (String) map.get("phone");
                System.out.println(phone1);
            }
        }

        // (5) 在不知道表结构的情况下获取 表源数据 表源数据对应的字段类型 表数据
        String sql1 = "select * from biao";
        ResultSet res = statement.executeQuery(sql1);

        //结果集表源数据--表结构破解ResultSetMetaData(表信息)
        ResultSetMetaData meta = res.getMetaData();

        //获得所有字段总数 (搜索出了多少条数据)
        int count1 = meta.getColumnCount();

        //遍历字段，获得对应的信息
        for(int i=1;i<=count1;i++){
            //获取字段名
            String columnName = meta.getColumnName(i);

            //获取对应的字段类型
            String columnType = meta.getColumnTypeName(i);

            // 现在已经知道了表结构，就可以运用上面的四类方式进行操作
        }

        // 2）executeUpdate （增删改）
        // public abstract int executeUpdate(String sql) throws SQLException
        // 参数：一条 SQL INSERT(插入)、UPDATE(更新) 或 DELETE(删除) 语句或没有返回值的 SQL 语句
        // 返回值：如果执行 INSERT、UPDATE 或 DELETE 语句返回行数或者为执行没有返回值的语句返回 0
        String sqls = "INSERT INTO user(phone, pwd, mibao, jijiu) VALUES('123', '123', '123', '123');";
        int number = statement.executeUpdate(sqls); // number = 1


        // 6. 释放连接
        resultSet.close();
        statement.close();
        connection.close();
    }
}

封装连接数据库，增删查改等方法

import java.sql.*;

public class connectionMysql {
    /*
    *写方法的一般原则：
    * 1. 知道这个要干什么？【业务理解】
    * 2. 要不要返回值？返回值的意义？
    *  a: 调用此方法的目的就是为了拿到返回值
    *  b: 通过返回值判断方法的执行过程
    * 3. 方法要不要参数？
    * */
    Connection con = null;
    Statement sta = null;
    ResultSet res = null;
    // 打开数据库连接 （封装连接数据的方法，返回Connection 对象）
    public Connection openMysql() {
        try {
            String userName = "root"; // 用户名
        	String  passWord = "123456"; // 密码
        	String sqlName = "som"; // 数据库名称
        	String url = "jdbc:mysql://localhost:3306/"+sqlName+"?serverTimezone=UTC&"+
                "useSSL=false&allowPublicKeyRetrieval=true&serverTimezone=GMT%2b8";
            // 1. 加载驱动
            Class.forName("com.mysql.cj.jdbc.Driver");
            // 2. 连接
            con = DriverManager.getConnection(url, username, pwd);
        } catch (Exception e) {
            System.out.println("------------------连接异常------------------");
            e.printStackTrace();
            System.out.println("------------------连接异常------------------");
        }
        return con;
    }

    // 增删改  （封装增删改的方法，返回查询产生的数据的ResultSet；永远不为null）
    public int update(String sql) {
        int re = 0;
        try {
            // 创建执行对象
            sta = con.createStatement();
            // 成功几条返回几， 失败返回0
            re = sta.executeUpdate(sql);
        } catch (SQLException e) {
            System.out.println("------------------操作异常------------------");
            e.printStackTrace();
            System.out.println("------------------操作异常------------------");
        }
        return re;
    }

    // 查询 （封装查询的方法，返回执行成功的行数）
    public ResultSet select(String sql) {
        try {
            // 创建执行对象
            sta = con.createStatement();
            res = sta.executeQuery(sql);
            // res: com.mysql.cj.jdbc.result.ResultSetImpl@5a4041cc
        } catch (SQLException e) {
            System.out.println("------------------查询异常------------------");
            e.printStackTrace();
            System.out.println("------------------查询异常------------------");
        }
        return res;
    }

    // 查看表信息（在只知道表名的情况下，获取数据）
    public void showTableMessage(String tableName) {
        try {
            String sql = "select * from " + tableName;
            sta = con.createStatement();
            res = sta.executeQuery(sql);
            // 结果集表源数据--表结构破解
            ResultSetMetaData meta = res.getMetaData();
            // 获得所有字段总数
            int count = meta.getColumnCount();
            // 遍历字段
            for (int i = 1; i <= count; i++) {
                // 获取字段名
                String columnName = meta.getColumnName(i);

                // 获取对应的字段类型
                int columnType = meta.getColumnType(i); // 数据库数据类型最底层是整型
                String columnTypeName = meta.getColumnTypeName(i);
                System.out.println(columnName+":"+columnTypeName);
            }
        } catch (SQLException e) {
            System.out.println("------------------查表信息异常------------------");
            e.printStackTrace();
            System.out.println("------------------查表信息异常------------------");
        }
    }

    // 关闭链接（web 阶段不建议用）
    public void closeAll() {
        try {
            if (res != null) {
                res.close();
            }
            if(sta != null) {
                sta.close();
            }
            if(con != null) {
                con.close();
            }
        }catch (SQLException e) {
            e.printStackTrace();
        }
    }
}

调用封装的各类方法

在其他.Java文件中，调用各种封装的方法；

public class Main {
    public static void main(String[] args) throws SQLException {
        connectionMysql con = new connectionMysql();
        Connection connection = con.openMysql();
        ResultSet res = con.select("select * from users");
        if(res.next()) {
            String ss = res.getString("uname");
            System.out.println(ss);
        }
    }
}

结果集剖析：

附：数据库数据类型最底层为整型

三. 系统权限

⚪按钮级别的权限
根据角色匹配功能

⚪字段级别的权限
用户表，角色表，权限表，用户角色表，角色权限表

⚪权限系统
基于权限业务开发对应得系统

四. 软件架构和程序架构

(一) 软件架构：MVC[软件开发模式]

M: Model（模型）–bean—类—逻辑实现
C: Controller(控制)—前后衔接的过程—业务协调处理（servlet）jsp
V: View（视图）----数据渲染—显示—客户端页面【jsp,html,vue,asp】

(二) 程序架构：运行模式【B/S】[C/S]

B/S架构程序：客户端浏览器到服务端—>优点：部署成本低，运行方便，培训….
C/S架构程序：客户端到服务端—>缺点：成本高，维护费劲，培训
Servlet:基本概念、原理及实操

五. Maven

📌Maven是一个项目管理工具，它包含了一项目对象模型(Project Object Model)，一组标准集合，一个项目生命周期(Project Lifecycle)，一个依赖管理系统(Dependency Manangement System)，和用来运行定义在生命周期阶段中插件目标的逻辑。

(一) Maven 下载，配置环境变量

1、官网去下载maven，http://maven.apache.org/download.cgi
2、解压apache-maven-3.5.0-bin.zip 到D盘
3、右键“计算机”，选择“属性”，之后点击“高级系统设置”，点击“环境变量”，
新建用户变量 MAVEN_HOME 变量值：D:\Java\apache-maven-3.5.0
javaweb项目,java,java,maven,前端,tomcat,intellij-idea

编辑系统变量 Path 添加变量值： ;%MAVEN_HOME%\bin;

测试命令：
mvn –version
javaweb项目,java,java,maven,前端,tomcat,intellij-idea

(二) Maven相关配置文件详解

javaweb项目,java,java,maven,前端,tomcat,intellij-idea

1. Maven环境配置Conf目录中的相关配置文件

** settings.xml【Maven主配置文件】**

<!-- 指定对应的本地仓库localRepository节点 -->
<localRepository>D:\IDEA\out-put</localRepository>
<!--路径中不能出现中文-->

<!--指定对应的远程仓库搜索mirrors远程配置节点-->
<mirrors>
	<mirror>
		<id>alimaven</id>
		<mirrorOf>*</mirrorOf>
		<name>aliyun maven</name>
		<url>http://maven.aliyun.com/nexus/content/groups/public/</url>
	</mirror>
</mirrors>

2. 在IDEA中配置maven

javaweb项目,java,java,maven,前端,tomcat,intellij-idea

3. IDEA当中创建maven项目步骤

javaweb项目,java,java,maven,前端,tomcat,intellij-idea

javaweb项目,java,java,maven,前端,tomcat,intellij-idea
骨架选择模式：Maven-web项目下一步

下一步：IDEA版本不同，需选择对应的maven路劲及配置路劲

注意：不要点，等项目加载构建

4. maven主项目结构介绍

javaweb项目,java,java,maven,前端,tomcat,intellij-idea

5. Maven项目pom.xml文件详解 – 管理Jar包

javaweb项目,java,java,maven,前端,tomcat,intellij-idea

6. Maven项目pom.xml文件详解—插件管理

javaweb项目,java,java,maven,前端,tomcat,intellij-idea
相关依赖汇总：https://mvnrepository.com/–对应的依赖查找

Mysql连接依赖

<dependency>
  <groupId>mysql</groupId>
  <artifactId>mysql-connector-java</artifactId>
  <version>5.1.4</version>
</dependency>

单元测试依赖

<dependency>
  <groupId>junit</groupId>
  <artifactId>junit</artifactId>
  <version>4.11</version>
  <scope>compile</scope>
</dependency>

Oracle数据库连接依赖

<dependency>
    <groupId>com.oracle</groupId>
    <artifactId>ojdbc6</artifactId>
    <version>11.2.0.4</version>
</dependency>

jsp依赖

<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>jsp-api</artifactId>
    <version>2.0</version>
</dependency>

serverlete依赖

<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>javax.servlet-api</artifactId>
    <version>3.1.0</version>
    <scope>compile</scope>
</dependency>

大数据相关依赖

<!--导入大数据hadoop包主依赖-->
<dependency>
    <groupId>org.apache.hadoop</groupId>
    <artifactId>hadoop-common</artifactId>
    <version>2.7.2</version>
</dependency>

<dependency>
    <groupId>org.apache.hadoop</groupId>
    <artifactId>hadoop-mapreduce-client-core</artifactId>
    <version>2.7.2</version>
</dependency>

<dependency>
    <groupId>org.apache.hadoop</groupId>
    <artifactId>hadoop-hdfs</artifactId>
    <version>2.7.2</version>
</dependency>

其他的依赖【关于xml创建和解析】

<!--dom4j-->
<dependency>
    <groupId>org.dom4j</groupId>
    <artifactId>dom4j</artifactId>
    <version>2.1.0</version>
</dependency>
<dependency>
    <groupId>jaxen</groupId>
    <artifactId>jaxen</artifactId>
    <version>1.1.6</version>
</dependency>

SSM：框架相关的依赖

<dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-context</artifactId>
        <version>${spring.version}</version>
    </dependency>
    <!--事物-->
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-tx</artifactId>
        <version>${spring.version}</version>
    </dependency>
    <!--jdbc-->
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-jdbc</artifactId>
        <version>${spring.version}</version>
    </dependency>
    <!--测试-->
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-test</artifactId>
        <version>${spring.version}</version>
    </dependency>
    <!--springMVC-->
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-webmvc</artifactId>
        <version>${spring.version}</version>
    </dependency>
    <!--mybatis-->
    <dependency>
        <groupId>org.mybatis</groupId>
        <artifactId>mybatis</artifactId>
        <version>3.4.5</version>
    </dependency>
    <!--mybatis和springz整合包-->
    <dependency>
        <groupId>org.mybatis</groupId>
        <artifactId>mybatis-spring</artifactId>
        <version>1.3.1</version>
    </dependency>
    <!--切面-->
    <dependency>
        <groupId>org.aspectj</groupId>
        <artifactId>aspectjweaver</artifactId>
        <version>1.8.7</version>
    </dependency>
    <!--数据源-->
    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>druid</artifactId>
        <version>1.0.9</version>
    </dependency>
    <!--单元测试-->
    <dependency>
        <groupId>junit</groupId>
        <artifactId>junit</artifactId>
        <version>4.12</version>
        <scope>test</scope>
    </dependency>
    <!--servletAPI-->
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>jsp-api</artifactId>
        <version>2.0</version>
        <scope>provided</scope>
    </dependency>
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>servlet-api</artifactId>
        <version>2.5</version>
        <scope>provided</scope>
    </dependency>
    <!--日志-->
    <dependency>
        <groupId>log4j</groupId>
        <artifactId>log4j</artifactId>
        <version>1.2.17</version>
    </dependency>
    <dependency>
        <groupId>org.apache.logging.log4j</groupId>
        <artifactId>log4j-api</artifactId>
        <version>2.10.0</version>
    </dependency>
    <dependency>
        <groupId>org.apache.logging.log4j</groupId>
        <artifactId>log4j-web</artifactId>
        <version>2.9.1</version>
    </dependency>
    <dependency>
        <groupId>org.slf4j</groupId>
        <artifactId>slf4j-api</artifactId>
        <version>1.7.25</version>
    </dependency>
    <dependency>
        <groupId>org.apache.logging.log4j</groupId>
        <artifactId>log4j-slf4j-impl</artifactId>
        <version>2.9.1</version>
    </dependency>
    <dependency>
        <groupId>org.apache.logging.log4j</groupId>
        <artifactId>log4j-jcl</artifactId>
        <version>2.9.1</version>
    </dependency>
    <!--mysql-->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>5.1.6</version>
    </dependency>
    <!--jstl-->
    <dependency>
        <groupId>jstl</groupId>
        <artifactId>jstl</artifactId>
        <version>1.2</version>
    </dependency>
    <dependency>
        <groupId>taglibs</groupId>
        <artifactId>standard</artifactId>
        <version>1.1.1</version>
    </dependency>
    <!--文件上传-->
    <dependency>
        <groupId>commons-fileupload</groupId>
        <artifactId>commons-fileupload</artifactId>
        <version>1.3.1</version>
    </dependency>
    <dependency>
        <groupId>commons-io</groupId>
        <artifactId>commons-io</artifactId>
        <version>2.5</version>
    </dependency>
    <dependency>
        <groupId>c3p0</groupId>
        <artifactId>c3p0</artifactId>
        <version>0.9.1.2</version>
    </dependency>
    <!--PageHelper依赖引入-->
    <dependency>
        <groupId>com.github.pagehelper</groupId>
        <artifactId>pagehelper</artifactId>
        <version>5.1.2</version>
    </dependency>
    <!--安全框架-->
    <dependency>
        <groupId>org.springframework.security</groupId>
        <artifactId>spring-security-web</artifactId>
        <version>${spring.security.version}</version>
    </dependency>
    <dependency>
        <groupId>org.springframework.security</groupId>
        <artifactId>spring-security-config</artifactId>
        <version>${spring.security.version}</version>
    </dependency>
    <dependency>
        <groupId>org.springframework.security</groupId>
        <artifactId>spring-security-core</artifactId>
        <version>${spring.security.version}</version>
    </dependency>
    <dependency>
        <groupId>org.springframework.security</groupId>
        <artifactId>spring-security-taglibs</artifactId>
        <version>${spring.security.version}</version>
    </dependency>

五. SpringBoot

(一) SpringBoot简介

🔰SSM：Spring（IOC：控制反转 AOP：面向切面）SpringMVC mybatis

🔰Spring Boot 简化Spring应用开发的一个框架：一站式开发框架【整合了tomcat Spring SpringMVC】(Spring全家桶中的一个优质单元)
🔰单体结构： 整个前端后端为一体，整个维护成本很高；
🔰前后端分离： 前端【写页面，调接口，对需求】后端【对需求，写接口】

附：关键性项目结构名词解释：

controller:控制层，被调用层
service层：具体的业务实现层
Mapper: 具体的数据操作接口
dao：业务接口—主要体现封装属性–提高程序安全性
pojo:具体的实体类—bean

javaweb项目,java,java,maven,前端,tomcat,intellij-idea

(二) 环境准备

–jdk1.8：Spring Boot 推荐jdk1.7及以上；java version “1.8.0_112”
–maven3.x：maven 3.3以上版本；Apache Maven 3.9.3
–IntelliJIDEA2017：IntelliJ IDEA 2019.3.1 x64、STS
–SpringBoot 1.5.9.RELEASE：2.7.5；

1. Maven设置

给maven 的settings.xml配置文件的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>

2. IDEA 设置

javaweb项目,java,java,maven,前端,tomcat,intellij-idea

(三) SpringBoot 项目

1. 创建一个Maven工程

javaweb项目,java,java,maven,前端,tomcat,intellij-idea

2. 导入spring boot 相关依赖

指定版本 SpringBoot父版本
下载SpringBoot核心依赖

<?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>org.example</groupId>
    <!--项目名-->
    <artifactId>TestMaven_web</artifactId>
    <!--项目版本号-->
    <version>1.0-SNAPSHOT</version>
    <!--项目的打包类型（jar, war, ear）-->
    <packaging>jar</packaging>

    <name>TestMaven_web 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.7</maven.compiler.source>
        <maven.compiler.target>1.7</maven.compiler.target>
    </properties>
    
	指定版本 SpringBoot父版本 
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.3.12.RELEASE</version>
    </parent>
    
	<!--下载依赖-->
    <dependencies>
   		 <!--单元测试-->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.13.2</version>
            <scope>compile</scope>
        </dependency>
        <!-- mysqlJDBC驱动-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.49</version>
        </dependency>
        2. SpringBoot核心依赖
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!--  视图层引擎模板      -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <!--SpringBoot单元测试-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
        </dependency>

        <!--mybatis依赖-->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.3</version>
        </dependency>
        <!--实体类封装，省略get  set  toString-->
        <!--通过此依赖的@Data注解，可以生成对应的get set等细节-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>
        <!--swagger 生成接口文档-->
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger2</artifactId>
            <version>2.9.2</version>
        </dependency>
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger-ui</artifactId>
            <version>2.9.2</version>
        </dependency>
    </dependencies>
</project>

3. 编写主程序：启动Spring boot 应用

package com.example.springbootdemo;

@SpringBootApplication // 表示该应用为一个 spring boot 应用
public class HelloWorldMainApplication {

    public static void main(String[] args) {

        // Spring应用启动起来
        SpringApplication.run(HelloWorldMainApplication.class,args);
    }
}

🏷️@SpringBootApplication 来标注一个主程序类，说明这是一个Spring Boot应用

4. 编写相关的Controller

写法1

package com.example.springbootdemo.controllor;

@Controller // 标注此类为一个业务处理层
public class helloSpringboot {
    // 不能同时使用，只可以用一个
    @RequestMapping("/hello") // 标注请求路径【get/post都满足】
    @GetMapping("/hello") // get请求
    @PostMapping("/hello") // post请求
    
    @ResponseBody // 标注该方法返回值一对应的json格式返回
    public String say() {
        return "hello";
    }
}

javaweb项目,java,java,maven,前端,tomcat,intellij-idea

🏷️@Controller //标注此类为一个业务处理层

🏷️@RequestMapping("/hello") //是一个用来处理请求地址映射的注解
🏷️@GetMapping("/hello") // get请求
🏷️@PostMapping("/hello") // post请求

🏷️@responseBody注解的作用是将controller的方法返回的对象通过适当的转换器转换为指定的格式之后，写入到response对象的body区，通常用来返回JSON数据或者是XML数据。

注意：在使用 @RequestMapping后，返回值通常解析为跳转路径，但是加上 @ResponseBody 后返回结果不会被解析为跳转路径，而是直接写入 HTTP response body 中。

写法2

package com.example.springbootdemo.controllor;

@RestController
public class TestHello {
    @RequestMapping("/hello")
    public  String SayHello(){
        return "你好，翠花";
    }
}

javaweb项目,java,java,maven,前端,tomcat,intellij-idea
写法3

直接访问static里面的页面

package com.example.springbootdemo.controllor;

@Controller
public class TestReturnToView {
    @RequestMapping("/view")
    public String setToView(@PathVariable("path") String path) {
        return path; //此时返回值代表的是视图名称
    }
}

javaweb项目,java,java,maven,前端,tomcat,intellij-idea

接收并处理前端用户的请求，然后将请求转发给相应的服务层（Service）进行处理，并将处理后的结果返回给前端。

package domain.controller;

// @Controller
@RestController //=Controller+ResponseBody注解
@RequestMapping("/user")
@CrossOrigin // 允许跨域
public class UserController {
    // @Resource
    @Autowired //根据类型注入
    UserSevice users;

    @RequestMapping("/insertUser")
    public Integer insertUser(user u) {
        return users.myInsertUser(u);
    }

    @RequestMapping("/selectUser")
    public List<user> selectUser() {
        return users.selectUserinfo();
    }

    @RequestMapping("/updateUser")
    public Integer updateUser(userinfo user) {
        return users.myUpdateUser(user);
    }

    @RequestMapping("/deleteUser")
    public Integer deleteUser(user u) {
        return users.deleteUserinfo(u);
    }
}

5. 运行主程序测试

6. 简化部署

将这个应用打成jar包，直接使用java -jar的命令进行执行；

<!-- 这个插件，可以将应用打包成一个可执行的jar包；-->
<build>
	<plugins>
		<plugin>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-maven-plugin</artifactId>
		</plugin>
	</plugins>
</build>

(四) 数据源配置

在resources 目录下创建application.yml文件

# 系统配置
server:
  port: 8080
  #项目名
  servlet:
  	context-path: /springboot-demo

# 自主配置
stuname: 翠花

# 数据源配置
spring:
  datasource:
    driver-class-name: com.mysql.jdbc.Driver
    url: jdbc:mysql://localhost:3306/qi-ye-ji-kai-fa?useSSL=false&serverTimezone=UTC
    username: root
    password: 123456
   # 打开Spring的循环依赖支持
  main:
    allow-circular-references: true
  # 解决spring boot 和 swagger 版本冲突
  mvc:
    pathmatch:
      matching-strategy: ant_path_matcher
    # 上传文件的位置
  servlet:
    multipart:
      location: D:/Local/Temp/uploads


# Mybatis 配置
mybatis:
  # 配置读取mapper文件
  mapper-locations: classpath:/Mapper/*.xml
  # 配置实体类所在的包，配置之后在mapper.xml文件中使用实体类时只写类名即可
  type-aliases-package: com.qianfeng.springbootdemo.pojo
    

# jdbc 参考
#  Class.forName("com.mysql.jdbc.Driver");
#        String url="jdbc:mysql://127.0.0.1:3306/student?characterEncoding=UTF-8";
#        String name="root";
#        String pass="123456";
#
#String url="jdbc:mysql://localhost:3306/student?useSSL=false&serverTimezone=UTC"
# Class.forName("com.mysql.cj.jdbc.Driver");
#            conn = DriverManager.getConnection(url, "root", "123456");
#          System.out.println(conn);

如果数据源配置时，用Application.properties文件进行配置，只需把上方的数据格式改成如下，就可以了。

(五) pojo 实体类

在 POJO 目录下通常存储的是实体类或 DTO 类。实体类主要用于映射数据库表，在实体类的属性中定义了表的各个字段。DTO 类则用于在各层之间传输数据，比如 Controller 中接收请求参数后将数据封装成 DTO 对象，然后将其传递给 Service 层来进行业务逻辑处理。

<!--实体类封装，省略get  set  toString-->
<dependency>
	<groupId>org.projectlombok</groupId>
	<artifactId>lombok</artifactId>
</dependency>

通过此依赖的@Data注解，可以生成对应的get set等细节

package domain.pojo;

@Data // get/set方法
@NoArgsConstructor // 无参构造
@AllArgsConstructor // 有参构造
@ToString
public class user {
    private int uid;
    private String uname;
    private String upass;
    private int uroot;
}

(六) mapper接口service业务层实现

@Mapper注解和@MapperScan注解的区别

@Mapper注解写在每个Dao接口层的接口类上

@MapperScan注解写在SpringBoot的启动类上。

当我们的一个项目中存在多个Dao层接口的时候，此时我们需要对每个接口类都写上@Mapper注解，非常的麻烦，此时可以使用@MapperScan注解来解决这个问题。让这个接口进行一次性的注入，不需要在写@Mapper注解

1. mapper 业务层

在mapper 目录下创建接口文件，并在接口文件中编写业务接口。

在编写 Mapper 接口时，通常会定义一些基础的数据访问方法，比如添加、查询、更新和删除等。这些方法与 service 中的接口方法相对应，建立了数据层与业务逻辑层之间的桥梁。

package domain.mapper;

public interface UserMapper {
    // 用户添加
    @Insert("insert into user(uname,upass,uroot) values('${uname}','${upass}',${uroot})")
    public Integer insertUser(user u);
    // 用户查询
    @Select("select * from user")
    public List<user> selectUser();
    // 用户根据id更新
    @Insert("update user set uname='${uname}',upass='${upass}',uroot=${uroot} where uid=${uid}")
    public Integer updateUser(user u);
    // 用户根据id删除
    @Insert("delete from user where uid=${uid}")
    public Integer deleteUser(user u);
}

Mapper.xml
mapper 目录下的接口中的操作语句，也可以写在Mapper.xml上。

// userDao.java

public interface UserDao {

    List<User> userList();

    User getUserById(Integer id);
}

<!--Mapper.xml-->

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "https://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!--
namespace:mapper文件对应的dao接口的全类名(包名+类名)
id:必须跟dao接口的方法名保持一致
-->

<mapper namespace="com.example.demos.dao.UserDao">
<select id="userList" resultType="User">
    select user_id as userId,
        user_name as userName,
        user_age as userAge
    from tb_user
</select>
<!--
    resultMap:帮我们处理sql查询的结果集并赋值给对象的属性
    column:数据库的列名
    property：实体类的属性
 -->
<resultMap id="userMap" type="User">
    <id column="user_id" property="userId"/>
    <result column="user_name" property="userName"/>
    <result column="user_age" property="userAge"/>
</resultMap>
<select id="getUserById" resultMap="userMap">
    select * from tb_user where user_id=#{id}
</select>
</mapper>

2. service 业务实现层

在 service 目录中，通常我们会先定义一组接口，然后在 impl 目录中实现这些接口。

package domain.service;

public interface UserSevice {

    Integer myInsertUser(user u);

    public List<user> selectUserinfo();
    
    Integer myUpdateUser(user user);

    Integer deleteUserinfo(user u);
}

通常情况下，service 接口中的方法经常会调用 mapper 接口中的方法来实现具体的数据操作。因此，在编写 service 接口的实现类时，需要注入相应的 mapper 接口，以便调用具体的数据操作方法。

package domain.service.impl;

@Service
public class UserImpl implements UserSevice {
    @Resource
    UserMapper users;
    @Override
    public Integer myInsertUser(user u) {
        return users.insertUser(u);
    }

    @Override
    public List<user> selectUserinfo() {
        return users.selectUser();
    }

    @Override
    public Integer deleteUserinfo(user u) {
        return users.deleteUser(u);
    }
    
    @Override
    public Integer myUpdateUser(user u) {
        return users.updateUser(u);
    }
}

(七) Test 单元测试

javaweb项目,java,java,maven,前端,tomcat,intellij-idea

package domain.Test;

@SpringBootTest // 单元测试
@RunWith(SpringRunner.class) // 标识 spring boot 上下文信息，表示主体为spring boot测试程序
public class TestInsertUser {
    @Resource
    UserSevice users;
    // 测试用户添加
    @Test
    public void testInsertUsers(){
        Integer re = users.myInsertUser(new user());
        System.out.println(re);
    }

    // 测试用户查询
    @Test
    public void selectUser() {
        List<user> re = users.selectUserinfo();
        System.out.println(re);
    }
    // 测试用户更新
    @Test
    public void Updates() {
        Integer re = users.myUpdateUser(new user());
        System.out.println(re);
    }
	// 测试用户删除
    @Test
    public void deleteUser() {
        Integer re = users.deleteUserinfo(new user());
        System.out.println(re);
    }
}

(八) spring boot 热部署实现

依赖

	<dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-devtools</artifactId>
         <scope>runtime</scope>
         <optional>true</optional>
     </dependency>

添加设置

settings: advaced setting
自动更新；
自动编译；

settings:
自动编译；
ctrl+shift+alt+/–>registry–>compile.automake.allow.when.app.running–>打勾

(九) config目录设置swagger

javaweb项目,java,java,maven,前端,tomcat,intellij-idea

package domain.config;

@Configuration //标明是一个springboot的配置类
@EnableSwagger2  //标明是一个swagger应用
public class Swagger2Config {

    @Bean //代表是spring管理的一个对象
    public Docket api() {
        return new Docket(DocumentationType.SWAGGER_2)
                .apiInfo(apiInfo())
                .select()
                // 自行修改为自己的包路径
                .apis(RequestHandlerSelectors.basePackage("domain.controller"))
                .paths(PathSelectors.any())
                .build();
    }

    private ApiInfo apiInfo() {
        return new ApiInfoBuilder()
                .title("swagger-api文档")
                .description("swagger接入教程")
                //服务条款网址
                .version("1.0")
                .build();
    }
}

javaweb项目,java,java,maven,前端,tomcat,intellij-idea

(十) 项目打包

双击package，等待一段时间
javaweb项目,java,java,maven,前端,tomcat,intellij-idea
打包完成后给你打包地址

然后直接使用java -jar 打包地址 的命令进行执行；
javaweb项目,java,java,maven,前端,tomcat,intellij-idea

(十一) Axios

1. axios 发get请求

//1. 直接请求不传参数
axios.get("http://localhost:9527/springboot-demo/user/list")
.then(res => {
	//then:成功时的回调函数
	//res:后端的响应
	this.userList = res.data;
})

let id = 6;
let name = "张三";
//2. 使用axios发get请求并传递参数
axios.get("http://localhost:9527/springboot-demo/user/detail?id="+id)
.then(res=>{
	console.log("axios传递一个参数>>>>>>",res);
})

//3. 使用axios发get请求传递多个参数
axios.get("http://localhost:9527/springboot-demo/user/select",{
params:{
	userId:id,
	userName:name
}
}).then(res=>{
	console.log("axios传递多个参数>>>>>>",res);
})

//4. 使用路径传参
axios.get("http://localhost:9527/springboot-demo/user/getUserById/"+id)
.then(res=>{
	console.log("axios使用路径传参>>>>>>",res);
})

UserController

@RestController //=Controller+ResponseBody注解
@RequestMapping("/user")
@CrossOrigin // 允许跨域
public class UserController {

    @Autowired //根据类型注入
    private UserService userService;
	/**
	* 前端：http://localhost:9527/springboot-demo/user/list
	* @return
	*/
	@RequestMapping("/list")
	public List<User> userList(){
		return userService.userList();
	}
	/**
	* 根据id查询User
	* 前端:http://localhost:9527/springboot-demo/user/detail?id=1
	*/
	@RequestMapping("/detail")
	public User detail(@RequestParam("id") Integer userId){
		return userService.getUserById(userId);
	}
	/**
	* 接收前端传递的多个参数
	* apifox
	*/
	@GetMapping("/select")
	public User select(User user){
		System.out.println(user);
		return null;
	}
	/**
	* http://localhost:9527/springboot-demo/user/getUserById/6
	*/
	@GetMapping("/getUserById/{id}")
	public User getUserById(@PathVariable("id") Integer userId){
		System.out.println("接收的参数"+userId);
		return null;
	}
}

GET请求传多个参数时，使用params构造传递，后端根据参数的name接收即可

@RestController //=Controller+ResponseBody注解
@CrossOrigin // 允许跨域

2. axios 发post请求

new Vue({
	el:"#app",
	data:{
		user:{
			userName:"",
			userAge:""
		}
	},
	created(){ },
	methods:{
		submitData(){
			axios.post("http://localhost:9527/springbootdemo/user/add",this.user)
			.then(res=>{
				console.log(res);
			})
		}
	}
})

UserController

/**
* post请求接收前端传递多个参数
* @ResponseBody:响应返回内容为json对象
* @RequestBody：接收请求传递的json对象参数
*/
@PostMapping("/add")
public String add(@RequestBody User user){
	System.out.println(user);
	return "success";
}

POST请求传递json对象时，后端使用@RequestBody+实体类接收

(十二) 文件上传到本地服务器

1. 后端：

package com.example.demos.controller;

@RestController
@CrossOrigin // 允许跨域
public class UploadController {

    @Value("${spring.servlet.multipart.location}")
    private String uploadDir;

    @PostMapping("/upload")
    public String upload(@RequestParam("file") MultipartFile file) {
        try {
            String filePath = uploadDir + File.separator + file.getOriginalFilename();
            file.transferTo(new File(filePath));

            // 获取上传文件所在位置的绝对路径
            String absolutePath = new File(filePath).getAbsolutePath();
            System.out.println("上传成功：" + absolutePath);
            return absolutePath;
        } catch (IOException e) {
            System.out.println("上传失败：" + e.getMessage());
            return e.getMessage();
        }
    }
}

2. 前端：
使用vue+element组件

<template>
    <div id="index">
    	 <div class="tou_gao">
                    <div class="kuang">
                        <label>视频标题</label>
                        <el-input v-model="subName" placeholder="标题" autocomplete="off"></el-input>
                    </div>
                    <div class="kuang">
                        <label>视频类型</label>
                        <el-select v-model="subRegion" placeholder="请选择视频类型">
                            <el-option label="生活" value="生活"></el-option>
                            <el-option label="搞笑" value="搞笑"></el-option>
                            <el-option label="游戏" value="游戏"></el-option>
                            <el-option label="数码-科技" value="数码-科技"></el-option>
                            <el-option label="影视" value="影视"></el-option>
                            <el-option label="动画" value="动画"></el-option>
                        </el-select>
                    </div>
                    <div class="kuangs">
                        <label>视频介绍</label>
                        <textarea class="times" v-if="iml" ref="jieShao" placeholder="介绍" rows="3" @blur="jieshao"
                            cols="91">{{ introduction }}</textarea>
                        <textarea class="time" v-else ref="jieShao" placeholder="介绍" rows="3" @focus="jieshao"
                            cols="91">{{ introduction }}</textarea>
                    </div>
                    <el-upload class="upload-demo" drag action="http://localhost:8081/upload" :limit="1" :multiple="false"
                        :on-success="handleSuccess" :file-list="fileList" list-type="text">
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">拖拽到此处也可上传<br /><em>点击上传</em></div>
                        <div slot="tip" class="el-upload__tip">{{ uploadTip }}</div>
                    </el-upload>
                    <div class="btn">
                        <el-button class="btn1" @click="noUpload">取消</el-button>
                        <el-button type="success" class="btn2" @click="yesUpload">提交上传</el-button>
                    </div>
                </div>
    </div>
</template>
<script>
import axios from 'axios';
export default {
    data() {
        return {
			subName: '', // 上传视频标题
            ids: 0, // 是否上传，进行标注
            subRegion: '', // 视频类别
            introduction: '', // 介绍
            iml: true, // 介绍框状态
            fileList: [], // 上传视频信息
            uploadTip: "仅支持mp4格式文件，文件大小不超过100MB",
        }
    },
	methods: {
	      // 上传成功后的逻辑
        handleSuccess(response, file, fileList) {
            // 处理上传成功后的逻辑
            console.log("上传成功")
            this.$message({
                message: '上传成功!',
                type: 'success',
                duration: 700
            });
            this.ids = 1
            this.fileList = fileList
            console.log(this.fileList[0].response);
        },
        jieshao() {
            this.iml = !this.iml
        },
        noUpload() {
            this.subName = '';
            this.subRegion = '';
            this.fileList = [];
            this.address = '';
            this.introduction = '';
            this.$refs.jieShao.value = '';
        },
        yesUpload() {
            if (!this.ids) {
                this.$message.error('请上传视频！');
            } else {
                var address = this.fileList[0].response
                address = address.replace(/\\/g, '/');
                // 截取前部分，用于判断是否为网址
                let field = address.slice(0, 5);
                if (field != "https") {
                    var result = address.substring(address.indexOf("Local/"));
                    address = "http://127.0.0.1:8082/" + result;
                }
            }
            this.introduction = this.$refs.jieShao.value;
            if (this.subName == '' || this.subRegion == '' || address == '' ||
                address == null || this.introduction == '') {
                this.$message({
                    message: '不能为空，请输入规范！',
                    type: 'warning',
                    duration: 1000
                });
            } else {
                axios.get("http://localhost:8081/video/vUpload", {
                    params: {
                        title: this.subName,
                        region: this.subRegion,
                        address: address,
                        uid: this.user.uid,
                        introduction: this.introduction,
                    }
                }).then(res => {
                    if (res.data == 1) {
                        // 刷新当前页面
                        location.reload();
                        this.$message({
                            message: '添加成功!',
                            type: 'success',
                            duration: 700
                        });
                        this.ids = 0
                    } else {
                        this.$message.error('添加失败，请与工作人员联系！');
                    }
                });
            }
        }
    },
}
</script>

完成以上的部分就可以上传文件了，上传后数据库中的文件信息如下：
javaweb项目,java,java,maven,前端,tomcat,intellij-idea
该视频在前端不能直接而访问，需要启动本地服务器，才可以进行查看；

3. 本地服务器：

打开命令行，进入到你上传文件的目录中；
输入如下指令，启动本地服务器：
使用 Node.js 的 http-server 模块：
npx http-server

本地服务器启动后，就可以访问文件了文章来源地址https://www.toymoban.com/news/detail-766243.html