MYSQL数据库到VUE前端架构

#MYSQL数据库到VUE前端架构

##==MYSQL数据库==

1. 安装--配置my.ini，通过DOS初始化mysql，开启mysql服务，加设置账号密码

2. Sql操作分类： 

3. DDL: 创建数据库create database 数据库名称 [库选项];删除数据库drop database 数据库名称;查看所有数据show databases;查看部分数据库show databases like "匹配模式";选择数据库use 数据库名称;查看选择的数据库select database();修改数据库选项alter database 数据库名称 新的库选项;

4. 数据类型：数值int,BIGINT,FLOAT,DOUBLE;日期和时间：DATE,DATETIME,YEAR;字符串类型：CHAR（存储性能高，但是浪费空间）,VARCHAR(存储性能低，但是节约空间)

5. DML增删改查：（insert,delete,alter,select）ALTER TABLE 表名 RENAME TO 新表名;  改名

            ALTER TABLE 表名 add 列名 数据类型;  增加一列

            ALTER TABLE 表名 modify 列名 新数据类型;  修改数据类型

            ALTER TABLE 表名 change 列名 新列名 新数据类型;  修改数据类型和列名

            ALTER TABLE 表名 drop 列名 ;  删除一列

            INSERT INTO 表名(列名1，列名2) VALUES(值1，值2)  给指定列加数据

            INSERT INTO 表名(列名1，列名2) VALUES(值1，值2)  给指定列加数据

            UPDATE 表名 SET 列名1=值1，... [WHERE 条件]

            DELETE FROM 表名 [WHERE 条件]

6. 图形化客户端工具： Navicat ：针对Mysql和MariaDB

7. DQL:查询操作：select 字段列表 from 表名列表 where 条件列表 group by 分组字段 having 分组后条件 order by 排序字段(ASC:升序 DESC：降序) limit(专属Mysql Oracle是用rownumber SQL server是用top)分页限定

    * distinct 去除重复记录 ；as 起别名；

    

    聚合函数：（count max min sum avg） 注:null不参与所有聚合函数运算

    执行顺序：wherr > 聚合函数 > having

8. 约束和多表查询： 限制加入表中的数据

    

    外键约束：两个表数据之间建立链接，保证数据完整和一致性

    

9. 数据库设计： 

    一对多：建立多为附表建立外键，一为主表的为主键建立外键约束

    多对多：建立第三张中间表，中间表至少要有2个外键，分别关联两方的主键

    一对一：建立任一为附表，一为主表的外键约束，并且外键用Unique修饰

10. 多表查询：

    隐式内连接： select 字段列表 from 表1，表2... where 条件

    显式内连接： select 字段列表 from 表1[inner] join 表2 on 条件

    左外连接  : select 字段列表 from 表1 left [outer] join 表2 on 条件

    右外连接  ：select 字段列表 from 表1 right [outer] join 表2 on 条件

11. 子查询： 查询中嵌套查询

    单行单列：查询语句直接代替转一行就行

    多行单列：用 in

    多行多列： 从内连接的表中查询

12. 事物： 一种机制或者说操作序列，同时成功或者同时失败

    start transaction 或者 begin   ---开启事务

    commit   --- 提交事务

    rollback   ---回滚事务

    四大特征： A原子性 C一致性 I隔离性（select @@autocommit 可以查询默认提交方式 1 自动 0 手动） D持久性

13. JDBC：java database connectivity； java操作关系型数据库的接口，不同软件在此接口上有自己的实现类（驱动）

    1.  API之DriverManager:加载驱动

    2.  API之Connection:建立连接和管理事务

    3.  API之Statement：执行SQL语句     executeUpdate(sql) 执行DML和DDL语句；executeQuery(sql) 执行DQL语句

    4.  API只ResultSet：返回DQL查询语句的查询结果，可以用循环去处理得到的想要的结果数据。一般来说表中有很多的列，为了更好的处理结果，一般可以封装一个类去保存这些数据，然后再把类放置进集合中，最后通过集合去调用里面的数据。

    5.  API之PreparedStatement：1.继承自Statement，用于预防SQL注入，把输入的内容用？号代替。2.属于预编译SQL（用？占位符代替sql语句中的参数，使其可以一次检查，多次编译，在url中需要配置开启：useServerPrepStmts=true），可以提高处理性能。3.原理是：通过把特殊敏感字符转译成字符本义，使得无法通过改变输入来修改sql语句。

    6.  SQL注入：通过输入改变sql语句来达到攻击的目的

    7.  数据库连接池：负责分配管理数据库连接的容器

        1.  好处：资源复用+提升响应速度+避免数据库连接遗漏

        2.  标准接口：DataSource，好用的实现接口：Druid(阿里巴巴开源)  

        3.  tips:相对路径有时候获取不准确，可用System.getProperty("user.dir")

        4.  Druid使用步骤：

            1.  导入jar包，在http://repo1.maven.org/maven2/com/alibaba下载

            2.  定义配置文件 driverClassName = com.mysql.cj.jdbc.Driver

                            url=jdbc:mysql:///test?useSSL=false&useServerPrepStmts=true

                            username=root

                            password=19921210

                            #初始化连接数量

                            initialSize=5

                            #最大连接数

                            maxActive=10

                            #最大等待时间

                            maxWait=3000

            3. 加载配置文件

            4. 获取数据库连接池对象

            5. 获取连接

14. Maven： 专门用于管理和构建java项目的工具:提供了标准化的项目结构和构建流程，标准化的依赖管理机制。               

    1.  仓库--构建依赖管理的基础，在pom中配置，则会到对应的仓库中去获取jar包：仓库分为本地，中央，远程三种仓库，其中中央仓库是全球通用http://repo.maven.apache.org/maven2     

    2.  基本使用：compile 编译 clean 清理 test 测试 package 打包 install 安装

    3.  生命周期：Maven在一个项目生命周期内，执行后面的命令，前面的命令会自动执行.

    4.  在IDEA中配置Maven： Setting中搜Maven，然后配置版本跟Setting.xml的路径

    5.  Maven中的坐标： 是资源的唯一标识，使用坐标来定义项目或引入项目中需要的依赖

        1.  groupId：当前Maven项目隶属组织的名称（一般为域名反写）

        2.  artifactId： 当前Maven项目名称（通常是模块名称）

        3.  version：版本号

        4.  scope标签：设置坐标依赖范围，一般不用

    6. 创建项目：New一个module 然后选择maven创建

15. MyBatis： 持久层(把数据到保存到数据库的那一层代码)框架(半成品软件，更高效规范通用，可扩展)，用于简化JDBC

    1.  JDBC缺点：硬编码，操作繁琐

    2.  MyBatis如果解决：1.硬编码->把长字符串放在配置文件中，便于维护修改；2.操作繁琐->封装方法，自动完成。

    3.  MyBatis入门：详细见框架官网

    4.  Mapper代理开发：原生MyBatis框架还是需要直接调用配置文件的内容，有一些硬编码，Mapper可以通过类把这些数据封装成成员方法来调用，更安全，也可以使用IDEA的代码补全。注：需要把Mapper类建在跟原来的MyBatis的mapper配置文件放在一个目录下，应在resources下建立跟Mapper类一样的路径，用/号切分目录。    注意：！！！Mapper类和mapper配置文件需要同一个名字！！！

    5. MyBatisX： 快速开发插件，可XML和接口方法相互跳转，可根据接口方法生成statement！

         

    6. Sql语句宰mapper框架下设置参数的问题：1.散装参数，加@Param(占位符参数名称)2.实体类封装参数3.map集合

    7. 动态Sql:if,choose,trim,foreach等标签

          

    8. MyBatis参数封装：多个参数，封装成Map集合

       

    9. 注解完成增删改查：简单语句用注解，可以使代码更简洁。在方法前加@Select(sql语句)

##==HTML与CSS==

1. 网页：a结构->HTML   b表现->CSS  c行为->JavaScript

2. HTML：  标签见W3C SCHOOL

3. HTML之表单标签：

 ->action:指定表单提交数据的url   ->method:指定表单提交的方式 a.get请求参数会拼接在url后，长度有限  b.post请求参数会在http请求协议的请求体中，长度无限

4. CSS：

   1. CSS导入方式：内联，内部，外部

   2. 选择器：元素选择器，类选择器，ID选择器   选择范围依次变小，同控制则范围小的为准

5. JavaScript:

   1. 引入方式--  内部脚本（HTML中国直接放在标签内）  外部脚本（引入js文件）

   2. 书写语法：区分大小写同java，分号可有可无；输出 window.alert()  document.write() console.log()

   3. 弱类型语言：变量可以放不同类型的值，作用域很大类似全局变量；如果需要用局部变量，用let关键字

   4. 运算符：==号跟===号        

   5. 函数体：跟lua是一样的

   6. 定义数组： var 变量名 = new Array(元素列表);  var 变量名 = [元素列表]；特点与java中集合一致，是变长变类型的   push：添加方法  splice:删除元素

   7. 自定义对象：

   8. BOM五个对象:

   9. DOM:文档对象模型   通过DOM，对HTML代码进行操作 

   10. 事件监听

       1.  事件绑定：HTML标签的事件属性绑定或通过DOM元素属性绑定

       2.  常用DOM的属性来设置监听事件

       3.  注：获取DOM对象时候，参数为字符型，不要漏了双引号

   11. 正则表达式：

       1.  定义  直接量：注意不要加引号  如 var reg = /^w{6,12}$/; 或者创建RegExp对象

       2.  参考https://www.w3school.com.cn/js/js_regexp.asp

6. web核心：

   1. B S架构 ：  

   2. Http协议：超文本传输协议，基于TCP协议，更安全；无状态协议，对于事务处理，没有记忆能力，每次都是独立的。  

      1. 缺点：多次请求不能共享数据，java用会话技术解决此问题 （Cookie,Session）

      2. 优点：速度快

      3. 请求格式：

         1. 请求行 GET/ POST方式加资源路径加协议版本

         2. 请求头 key:value 形式

         3. 请求体 POST请求的最后一部分，放参数

         4. 状态码：https://blog.csdn.net/ethan_10/article/details/80562175

   3. Apache Tomcat: web容器，轻量化服务器，Servlet容器  ：webapps  项目部署目录   开启服务：bin下startup.bat

      1. 默认端口号8080   特殊80  可以不用加端口号

      2. 为了解决存放web 太大废资源的问题，可以打包成.war形式的压缩包

      3. IDEA中创建Maven Web程序：  使用骨架创建选第二个webapps

      4. IDEA中集成本地tomcat ：在pom中引入资源模板项 tomcat7-maven-plugin  注：这种方式，页面名字不能有中文，否则无法解析。

      5. Servlet：

         1. 入门：导入 Servlet 依赖包【注：为了避免与Tomcat中的Servlet 为Provided】--定义一个实现类实现Servlet接口，重写抽象方法-- 在类上使用 @WebServlet注解，配置访问路径-- 启动Tomcat 访问Servlet

         2. 体系结构：直接实现Servlet接口需要重写五个抽象方法，太麻烦，一般我们可以直接创建实现类继承Servlet 的实现类 HttpServlet ,重写get和post方法。在HttpServlet类中对于不通过的请求封装了不同的处理方法。

      6. urlPattern配置：

         1. 一个Servlet可以有多个urlPattern路径，可以是一个数组，通过数组内容都可以访问Servlet

         2. 配置规则：a精确匹配 b目录匹配 c扩展名匹配 d任意匹配 【注】默认有个匹配/是default预置给所有静态页面的，如果使用了/就会把default原本的覆盖掉，这样的话静态页面访问会出问题

   4. Request（获取数据）和Response（设置数据）对象：

      1. Request对象：url 统一资源定位符   get获取参数：请求体   post获取参数：输入流  【建议用通用方式】

      2. Response对象：通过getWrite方法获取字符输出流，输出流的write方法可以写数据，默认是纯文本，如果要设置html代码，则设置setContentType ,此方法也可以设置编码格式

      3. 解决中文乱码问题： POST 修改编码方式  GET：乱码原因，url编码用的utf-8  但是接码Tomcat默认是ISO-8859-1。解决方法：先用ISO-8859-1编码把字符串转换成字节数组，再通过字节数组用utf-8编码转成字符串。(这种方式是通用方式，gET和post 都可以解决

      4. Request对象请求转发：getRequestDispatcher方法实现，Request 对象有几个方法保存和获取删除数据，这些数据则可以在不同的实现类中共享

      5. Response 重定向：endRedirect 方法设置重定向路径，需要加虚拟目录 【最好用动态设置】  

      6. 路径问题：浏览器使用：需要加虚拟目录   服务端使用：不需要加虚拟目录

    5. 登录页面小案例：a.错误500：数据库密码设置错误  b.注册业务时，添加数据到数据库，需记得要用sqlSession.commit()去提交事务 c.sqlSessionFactory  sql工厂的创建创建了几次且代码重复，解决方法：创建一个专门的工具类，去封装这部分代码，静态代码块会随着类的加载而自动执行，且只执行一次，所以用静态代码块来放置这些代码

    6. JSP：java服务端页面：  简化开发，避免了在servlet中直接输出HTML代码 【本质是Servlet】

        1. 开发流程 ：导入依赖坐标（Scope设置provided），创建JSP文件，写html和java代码

        2. JSP脚本分类：  

        3. EL表达式： 功能：获取数据  ${expression}

        4. JSTL表达式：引入坐标，在JSP页面上引去JSTL标签库，使用：  

    7. MVC模式： Model 业务模型->View 视图->Controller 控制器

    8. 三层架构：表现层：（Controller 控制器和视图） 业务逻辑层：对业务逻辑封装，组合数据访问层的基本功能   数据访问层：对数据库的CRUD基本操作    

    【注意】pom文件的artifactId一定要跟虚拟目录名字一致！另外数据库密码要核对清楚   SelectAllServlet is not a Servlet错误500： 原因javax.servlet-api没有设置provided   导致与javax.servlet-api冲突

    9. 小案例：在网页中对数据库进行增删改查：先写数据层，再在业务逻辑层对数据层完成封装，最后调用Servlet对数据进行交互后，传递给视图进行展示。

        1. 操作mapper对象，把对数据库操作的功能封装，简单的功能用注释，复杂的用resources中的mapper进行映射

        2. 建立service层类，对mapper中的方法进行逻辑封装--->再在web文件中写Servlet类，组装处理service的方法，把要与JSP交互的内容，写入域中，再转发给jsp

        3.在webapp文件中写jsp代码，其中jsp与service链接才用超链接或者监听来连接，路径的ID在service中用注释来表现    如：  @WebServlet("/deleteByIdServlet")

    10. 会话跟踪：服务器识别是否请求来自同一个浏览器，以便在同义词会话的多次请求间共享数据

        1. 客户端会话跟踪技术：Cookie  :基于http协议  原理： set-cookie响应头   cookie请求头

            存活时间：默认是浏览器关闭内存就释放，Cookie就会销毁，需要长久可以设置存活时间，setMaxAge(int seconds)   正数->持久到设置时间存储  负数->默认值 0->删除Cookie    如果需要存中文，则需要用url加码跟解码

        2. 服务端会话跟踪技术：Session  好处：安全   request的getSession获取Session对象  存储和获取数据

            原理：基础Cookie实现     Session的钝化和活化：服务器正常关闭后，Tomcat会自动把数据写入硬盘，再次启动将文件加载到Session中再    

            Session的销毁：默认 误操作30分钟后自动   调用Session对象的invalidate()方法

            

        3. 小案例注意：jsp页面中文显示为乱码，需添加  <%@ page contentType = "text/html;charset=utf-8"%>

           验证码验证注意：一个从用户输入中获取，另外一个一定要从Session中获得

           最好避免出现IF else嵌套的情况

    11.Filter过滤器： WEB三大组件之一：一般做一些通用操作：权限控制，统一编码，敏感字符处理等

        1. 实现：定义类实现Filter接口，重写方法。配置拦截资源的路径用注解：@WebFilter 。最后在doFilter方法中用chain.doFilter对过滤器放行

        2. 流程：Filter放行前代码->放行->web代码->放行后代码

        

        3. 多个过滤器，则形成了过滤器链，顺序由注解配置的字符串的自然排序决定

    12.Listener 监听器：

    13.AJAX： 异步的JavaScript和XML

        1. 作用：和服务器进行数据交换  则可以使用HTML+AJAX来替换JSP ---目的：前后端分离

            异步交互：不重新加载的情况下，更新部分网页数据

        2. 快速入门： w3c有配置教程

        3. Axios异步框架：引入JS文件，发送axios请求并且获取响应结果

    14. JSON： Javascript对象表示法，语法简单层次鲜明，所以多用于数据载体

        1. 使用FastJson进行对象和json字符串的转换：导入坐标  JSON.toJSONString JSON.parseObject

7. Vue：前端框架，免去原生JavaScript的DOM操作

    

    1. 入门： 引入vur.js框架  在html页面中创建vue对象 el的范围与要控制的id相对应。用插值表达式控制变化

    2. 

8. Element：饿了么前端开发基于Vue提供的一套网站组件库

   1. 把UI文件放到web文件下，引入Vue和Element对应的index.js和index.css文件  创建vue对象绑定作用范围，使用Ele组件

   2. Ele布局：   放开放置html代码和css代码和vue中的json对象

9. 最终案例：

   1.  在Service层中，增加一个Service接口，再实现接口创建实现类，这样可以减少Service层和Servlet的耦合性

   2.  Servlet中项目太多，不方便管理，优化：把对同一个对象操作的归类到一起，由于HttpServlet自动进行了post和get的分发，我们就不能使用这个类了，需要自己重新

    定义一个BaseServlet来替换HttpServlet，根据请求路径的最后一段路径来进行方法分发，需要利用反射原理。

   3. this调用：谁调用我，我代表谁  也就是说this指代的是最终调用他的类

   4. 删除功能时，如果获取选中的删除按钮的id?

   5. 出现BUG 分页条件查询时，数据一闪而过 ： 估计是反射方法的错误，留着.

##==Maven延展==

1. 本质：项目管理工具，把项目开发和管理抽象成一个项目对象模型

2. 标准化跨平台的自动化项目构建方式

3. 由于Maven的强大，使得出现了统一的标准的项目结构

4. 坐标--唯一标识：groupId：隶属组织名称  artifactId:项目名称 version：版本号 packaging:打包方式