MYSQL数据库到VUE前端架构
#MYSQL数据库到VUE前端架构
##==MYSQL数据库==
1. 安装--配置my.ini,通过DOS初始化mysql,开启mysql服务,加设置账号密码
2. Sql操作分类: ![sql操作分类](images/sql操作分类.jpg)
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 起别名;
![条件查询](images/条件查询.png)
聚合函数:(count max min sum avg) 注:null不参与所有聚合函数运算
执行顺序:wherr > 聚合函数 > having
8. 约束和多表查询: 限制加入表中的数据
![约束分类](images/约束分类.png)
外键约束:两个表数据之间建立链接,保证数据完整和一致性
![外键约束](images/外键约束.png)
9. 数据库设计: ![产品研发步骤](images/产品研发步骤.png)
一对多:建立多为附表建立外键,一为主表的为主键建立外键约束
多对多:建立第三张中间表,中间表至少要有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项目的工具:提供了标准化的项目结构和构建流程,标准化的依赖管理机制。 ![Maven](images/Maven.png)
1. 仓库--构建依赖管理的基础,在pom中配置,则会到对应的仓库中去获取jar包:仓库分为本地,中央,远程三种仓库,其中中央仓库是全球通用http://repo.maven.apache.org/maven2 ![Maven仓库](images/Maven仓库.png)
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!
![数据库空指针](images/数据库空指针.jpg)
6. Sql语句宰mapper框架下设置参数的问题:1.散装参数,加@Param(占位符参数名称)2.实体类封装参数3.map集合
7. 动态Sql:if,choose,trim,foreach等标签
![动态查询](images/动态查询.jpg)
8. MyBatis参数封装:多个参数,封装成Map集合
![mybatis参数](images/mybatis参数.jpg)
9. 注解完成增删改查:简单语句用注解,可以使代码更简洁。在方法前加@Select(sql语句)
##==HTML与CSS==
1. 网页:a结构->HTML b表现->CSS c行为->JavaScript
2. HTML: 标签见W3C SCHOOL
3. HTML之表单标签: <form> ->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. 运算符:==号跟===号 ![类型转换](images/类型转换.png)
5. 函数体:跟lua是一样的
6. 定义数组: var 变量名 = new Array(元素列表); var 变量名 = [元素列表];特点与java中集合一致,是变长变类型的 push:添加方法 splice:删除元素
7. 自定义对象:
8. BOM五个对象:
9. DOM:文档对象模型 通过DOM,对HTML代码进行操作 ![document对象](images/document对象.png)
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架构 : ![web核心](images/web核心.jpg)
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程序:![mavenweb结构](images/mavenweb结构.JPG) 使用骨架创建选第二个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 方法设置重定向路径,需要加虚拟目录 【最好用动态设置】 ![重定向特点](images/重定向特点.JPG)
6. 路径问题:浏览器使用:需要加虚拟目录 服务端使用:不需要加虚拟目录
5. 登录页面小案例:a.错误500:数据库密码设置错误 b.注册业务时,添加数据到数据库,需记得要用sqlSession.commit()去提交事务 c.sqlSessionFactory sql工厂的创建创建了几次且代码重复,解决方法:创建一个专门的工具类,去封装这部分代码,静态代码块会随着类的加载而自动执行,且只执行一次,所以用静态代码块来放置这些代码
6. JSP:java服务端页面: 简化开发,避免了在servlet中直接输出HTML代码 【本质是Servlet】
1. 开发流程 :导入依赖坐标(Scope设置provided),创建JSP文件,写html和java代码
2. JSP脚本分类: ![jsp脚本分类](images/jsp脚本分类.png)
3. EL表达式: 功能:获取数据 ${expression}
4. JSTL表达式:引入坐标,在JSP页面上引去JSTL标签库,使用:<c:if> <c:foreach>
7. MVC模式: Model 业务模型->View 视图->Controller 控制器
8. 三层架构:表现层:(Controller 控制器和视图) 业务逻辑层:对业务逻辑封装,组合数据访问层的基本功能 数据访问层:对数据库的CRUD基本操作 ![三层架构](images/三层架构.png)
【注意】pom文件的artifactId一定要跟虚拟目录名字一致!另外数据库密码要核对清楚 SelectAllServlet is not a Servlet错误500: 原因javax.servlet-api没有设置<scope>provided</scope> 导致与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()方法
![Session和Cookie](images/Session和Cookie.png)
3. 小案例注意:jsp页面中文显示为乱码,需添加 <%@ page contentType = "text/html;charset=utf-8"%>
验证码验证注意:一个从用户输入中获取,另外一个一定要从Session中获得
最好避免出现IF else嵌套的情况
11.Filter过滤器: WEB三大组件之一:一般做一些通用操作:权限控制,统一编码,敏感字符处理等
1. 实现:定义类实现Filter接口,重写方法。配置拦截资源的路径用注解:@WebFilter 。最后在doFilter方法中用chain.doFilter对过滤器放行
2. 流程:Filter放行前代码->放行->web代码->放行后代码
![过滤器拦截](images/过滤器拦截.png)
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操作
![MVVM](images/MVVM.png)
1. 入门: 引入vur.js框架 在html页面中创建vue对象 el的范围与要控制的id相对应。用插值表达式控制变化
2. ![vue生命周期](images/vue生命周期.png)
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:打包方式
MYSQL数据库到VUE前端架构相关推荐
- 从零开始做Vue前端架构(5)
前言 弄完了前后端分离,我们自然想打包发布项目了. 不多说,就让我们来看看吧. 开发 直接上代码: const webpack = require('webpack') const path = re ...
- 微信小程序订票选座PHP后台网站MySQL数据库和无前端小程序版本两个程序
微信小程序订票选座PHP后台网站MySQL数据库和无前端小程 下载点此去 两个相同功能 差别在一个有前端微信小程序 一个没有 (1)登录功能:注册普通账号登录:也可以直接使用微信登录:登录后可以修改用 ...
- vue族谱架构_从零开始做Vue前端架构(1)
前言 想想也已经做过不少架构的项目了,有基于vue,基于react,基于thinkPHP,基于laravel的. 做多了,也就对现有的架构有各种想法,有好的,有坏的,总之,用起来还是不爽.vue-cl ...
- MySQL数据库之互联网常用架构方案(全)
作者:尜尜人物 本文包含数据库架构原则.常见的四种架构方案.两种一致性解决方案.以及作者个人的一些见解. 一.数据库架构原则 1.高可用 2.高性能 3.一致性 4.扩展性 二.常见的架构方案 方案一 ...
- 前端读取mysql数据库_Servlet读取MySQL数据库并在前端调用
需要实现的功能为在前端点击Cesium下的3dtilse格式的文件并单体化,获取模型的ID,通过ajax将ID传送给servlet,然后servlet进行数据库查询,并将数据传给前端. 1.对于MyS ...
- 三万字,100张图,1个小时,带你整体了解 vue 前端架构
整体大纲的把握 这个系列文章我尽量照顾前端的同学和后端的同学,不穿插讲述.尽量按照前端-后端-部署-运维来讲,当然中途涉及到跨域.Rest.oAuth2.0这种前后协调的还是无法避免捎带一笔. 比如: ...
- MySQL数据库的优化(下)MySQL数据库的高可用架构方案
[51CTO独家特稿]如果单MySQL的优化始终还是顶不住压力时,这个时候我们就必须考虑MySQL的高可用架构(很多同学也爱说成是MySQL集群)了,目前可行的方案有: 一.MySQL Cluster ...
- MySql数据库-58沈剑 架构师之路
最近在看 "58沈剑 架构师之路"的公众号,写的非常简练,干货很多.但里面也充斥了很多广告和管理类的文章,本文主要是对里面的数据库文章做一个汇总: InnoDB,5项最佳实践,知其 ...
- MySQL怎么展示表格_如何在MySQL数据库中显示表的架构?
从MySQL控制台,什么命令显示任何给定表的架构? #1楼 SHOW CREATE TABLE yourTable; 要么 SHOW COLUMNS FROM yourTable; #2楼 descr ...
最新文章
- phpexcel导出超过26列解决方案
- React项目 --ES6 语法中的class (9)
- 阻止保存要求重新创建表的更改
- linux alias命令查看和设定别名
- php防止重复结算问题_PHP 编写关系到财务这样重要的系统,设计应该每次变动都算账,还是月底统一算账?...
- c# List 按类的指定字段排序
- 2.3 词嵌入的特性
- 威海二职工业机器人专业_谋思路 建平台 促房山职教专业发展 ——与北京工业职业技术学院专业对接洽谈会在房山二职举行...
- android studio | openGL es 3.0增强现实(AR)开发 (4) 绘制简单的2D图形、显示、旋转
- VS2022开发Arduino(提供Visual.Micro.Processing.Sketch.dll)
- android 启动界面全屏显示,Android 启动页 (Splash) 的实现
- 计算机一级必考知识点,计算机一级考试基础知识点汇总.doc
- Selenium 爬虫应用的学习
- WIFI 认证加密模式介绍
- 亲爱的老狼-html的格式含义全面说明
- 看 Sugar 如何说 I2C 通信
- 哪里可以查询所有网课的答案---【快捷查询】
- 友善之臂mini2440初入门学习的一点历程
- 网络攻防课程期末复习整理
- 软件测试工作累吗?周末有没有自由时间?每天加班晚吗?
热门文章
- java吸血鬼_吸血鬼数
- Lumion 11软件介绍
- linux trace 进程 文件路径,linux panic 问题定位
- 电脑读卡器,电脑上如何找到读卡器
- 人民币小写金额转大写
- 深入了解物联网,这几个物联网技术了解吗?
- 一张图看懂阿里云ACK
- linux版qq怎么创建桌面快捷方式,Linux_ubuntu系统怎么把网页版QQ添加到程序列表?,新手教程:ubuntu网页QQ快捷方 - phpStudy...
- 经典黑白搭配 现代简约风格设计美学精神
- 绘制超漂亮的基因差异表达火山图