element_ui 实现登陆示例:

发布时间 2023-04-12 22:37:58作者: 法师-谢双元

熟悉文档后,精简理解华为数据库备份操作,

 

 

日志审记开启,

目的是查看期间所有数据库操作的spl 语句。

开启方法,登陆后台,进入数据库管理面板,点击实例:

 

 

 

进入数据管理操作界面,占击左菜单, sql  审记 ,展开设置开启界面,

 

 

 

 

 

 

 

开启后会产生大量日志,储存到备份空间,空间用完就会产生额外费用

 

 

查看日志,日志存于空间于备用空间,

 

当前空间剩下抓图:

查看空间剩下多少,方式为登入管理界面,右下角可能查看还有多少空间,

 

 

第二章,备份数据库
登陆主界面,在控制台左边档,有一个备份和恢复功能的菜单,默认也开启自动备份,但是由于我们场景时更新代码,所以需要手工备份

 

 

1,自动备份会按次数,自动删除最前几次的,而手工备份的不会自动删除

由于华为是实例,只能通设置开启审记和慢日志,然后下载分析日志,以下是mysql8.0测试环境分析日志参考

 

数据库日志分为慢日志,错误日志,,二进制底层日志

错误日志用于查看运行状态,二进制日志为于查看用户操作记录。

 

错误日志位于:数据库日志位于/var/log/  默认文件名为mysqld.log

查看日志命令   show variables like %log.error%

 

模拟演示日志分析

 

二进制日志文档分析

二进制日志(BINLOG)记录了所的 DDL(数据定义语言)语句和 DML(数据操纵语言)语句,但不包括数据查询 (SELECTSHOW)语句。

作用:@.灾难时的数据恢复,@.MSQL的主从复制。在MyQL8版本中,默认二进制日志是开启着的,涉及到的参数如下:

通过命令: show variables like %log_bin%;  查看参数

由于测试服务器数据库是5.7   华为以前也是5.7,后来他们升级数据库了,测试服务器没敢冒然升级,暂不支持查看二进制的底层日志分析查看,只能看文档强行理解:二进制日志只记录对表的操作,不记录数据操作:主要记录ddl

DDL是一种用于定义数据结构和修改数据的语言,例如,DDL命令可用于添加、删除或修改数据库中的表。 数据库应用程序中使用的ddl被认为是结构化查询语言SQL的子集,然而,DDL也可以定义其他类型的数据,比如XML

对于说细操作记录在慢日志,但是数据量大,一般不开启,只用于特殊需要记录时,

 

华为提供日志审记,可以查类同慢日志

慢日志可以查看具体操作sql 语句,但是会消耗性能产生大量日志。

华为官方说,打开日志审记可能查看类似于慢日志,日志放于备份空间,超出空间会收费,现在空间共100g

 

 

 

 

 

整理前端技术

表单整理表单验证
当用户输入帐号密码时如果乱输需要验证,elemet_ui为我们提供一个属性叫rules

只要给rules 指定自己写的验证规测,就可以自动验证

一旦输入不合规会自动提示,这是框架写好的功能,不用管怎么实现。

需要注意这儿只是对用户输入提示,框架本身并没有来验证,调用框架验证功能需调用预验证功能。Validate()

 

解决重置重新输入方法:

 

 

第一步:

在表单中加入  :rules = rskg

   <el-form label-width="80px" :model = "FormData" :rules = "rskg">

在然后在vue中定义数据的区域写到rskg 需要的规测

 

获取表单对象,调用表单内置方法

假设我们要重设表单,需要调用表单的重置方法,或其它方法,第一步是获取表单象

第一步,给表单用ref 方法给表单取个名字,这儿暂时叫wyj(王艺杰的首字母),为了方便 看出自定义变量名。,才取名wyj

<el-form ref = wyj>

 

然后在按扭中绑定事件,事件名随意这儿暂时叫ssss

 

<el-button type="primary" @click="ssss">重置 </el-button>

 

 

最后添加方法,此时方法的this仍然是vue 组件,refs只是一个引用表单

 

 

This 代表vue组件本身。

$refs   别名的意思

loginFromRef   随意取的名字,比如也可以叫ssss

resetFiles是一个方法,系统自带

 

 

 

调用预验证实现,先在按扭上绑定一事件,比如绑定在登陆身上,然后在登陆方法上调用validate()

 

 

调用函数验证后发送后端请求:

$http:post(login,this.loginForm)    地址login  参数是一个对象。这个时候返回结果是一个异步promise    需要处理的话也很麻烦,但新的编程 规范帮我们提供了await   ,await 只能用在被async 修饰的方法上,

 

 

此时运行结果:

 

返回结果太多,而我们只想要data的数据,所以需要用到展开语法,

以下示例将原有结果其中的data,展开转到res 变量中

 

如果后端不成功响应,肯定需要判断请求是否成功,根据状态码是不是

200来判断。

 

 

 

 

 

 

 

 

Gpt 3.5返回结果比较正确,在末来人工智能加入后,企来成本会更底,但是我们应该懂理更广,如是不懂,连问也不知道怎么问,比如下面我第一次,问得不对,无法得到正确结果

 

 

 

配置弹窗提示

 

Vue的原型上绑定一个elemne_ui 自带的属性Mesage.

然后在需要使用的地方就可以随时调用

 

通过绑定后 VUE 组件上就有了一个新方法,以下是调用示例,调用使用在如果出现错误的时候

 

 

 

外理这个接口还不算完,需要将用户的token信息保存到本地缓存中。还得处理项目中所有接口不能访问,需要登陆成之后才可能访问,所以接下来再分析处理这二个问题。

正常返回会一个值保存token,只需要先将它保存到本地,

使用代码Window.sessionStorage.setItem(token,resdata.toden);可以先将token保存到本地缓存,成功保存后通过路由跳转  使用代码 this.$router.push(/home)

 

 

处理验证是否登陆,没有登陆不能访问其它页面,需要类似于java 里面的挡截器,在前端有个功能叫导航守卫,条件是如果本地没有token 就将请挡下来,转跳到登陆页或错误页