Vue——element-UI框架、JSON Web Tokens、样式穿透_爱喝牛奶~_jsonwebtoken vue

大大的周 02-07 2072

一、element-UI框架

1.安装:?

2.引入 (全部导入方式)

3、use的解释

4、element-ui 的使用

二、JSON Web Tokens???????

1、安装egg-jwt

2、配置

3、如何创建令牌

?4、案例

三、样式穿透

1、什么情况下使用样式穿透

2、样式穿透的三种办法

1. >>>

2. /deep/

3. ::v-deep

4. :deep()? 穿透选择器

3、/deep/ ，>>>，::v-deep的区别

一、element-UI框架

1、纯html-ui框架：layui、?bootstrap 、mui 、jQuery-ui...?

就是一份写好样式的css代码

2、基于框架的ui框架：Vue、react...

写好了样式和基于框架语法的组件的组件库

Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CN

根据Vue框架的语法，已经是实现了很多组件，只需引入然后注册魏组件，再使用就行了

1.安装:?

npm i element-ui -S ?

2.引入 (全部导入方式)

import ElementUI from 'element-ui'; ? //引入组件库，但是注意css有可能会冲突

import 'element-ui/lib/theme-chalk/index.css';? ?//引入全局的css样式，整个ui框架的风格

Vue.use(ElementUI);? ?//注册全局组件，把ElementUI框架提供的所有组件全部注册为全局组件

import Vue from 'vue'; import ElementUI from 'element-ui'; //引入组件库，但是注意css有可能会冲突 import 'element-ui/lib/theme-chalk/index.css';//全局的css样式 import App from './App.vue'; Vue.use(ElementUI);//注册全局组件==>Vue.component("xxxx",{}) new Vue({ el: '#app', render: h => h(App) });

（一般说use是去给原型绑定东西，但是这里不是，它是去全局注册）

install（arg）{arg就是调用use对象，install会直接运行}

3、use的解释

main.js

import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' //一.自定义全局组件 import Gold1 from './components/Gold1.vue' //Gold1.name Gold1文件中导出的对象的属性 Vue.component(Gold1.name,Gold1) Vue.component("mygold",Gold1) //二.use语法 // let obj={ // //有几个函数自行研究我只讲install // install(arg){ // //agr就是调用use的对象 // // install会直接运行 // arg.prototype.hqyj=100 // } // } // let install=(arg)=>{ // arg.prototype.hqyj2=100 // arg.component("mygold",Gold1) // } // Vue.use(obj)//会执行obj内部的install // Vue.use(install)//会直接执行传入install // import mytool from "./mytool.js" // Vue.use(mytool) //三.全部导入方式: //1.引入ui框架可以引入多个ui框架但是注意css有可能会冲突 import ElementUI from 'element-ui'; //2.引入全局css整个ui框架的风格 import 'element-ui/lib/theme-chalk/index.css'; //3.把ElementUI框架提供的所有组件全部注册为全局组件 Vue.use(ElementUI) //四.按需导入方式: // import 'element-ui/lib/theme-chalk/index.css'; // import {Switch} from 'element-ui'; // // Vue.component(Switch.name,Switch) // Vue.use(Switch) new Vue({ router, store,//让整个vue项目仓库生效 render: h => h(App) }).$mount('#app')

4、element-ui 的使用

什么是布局？怎么排版的-最核心的就是怎么横着排列模块，竖着是无限高

1、栅格布局 ==>不是css技术，但是每一种ui框架都有，是css实现出来的，比如bootstrap的栅格就是浮动和定位实现的

2、css3-columns布局

3、flex弹性布局

4、表格布局

5、.......

树形控件

二、JSON Web Tokens

“?JSON Web Token(缩写 JWT)是目前最流行的跨域认证解决方案,本文介绍它的原理,用法和详细的数据结构。 Json web token(JWT)是为了网络应用环境间传递声明而执行的一种基于JSON的开发标准(RFC 7519),该token被设计为紧凑且安全的,特别适用于分布式站点的单点登陆(SSO)场景。

网络请求的过程中，记不住密码，把账号密码发给它的后台，就会生成一个token码，下次登录或者请求网站的任何东西的时候，只需要把token码发给它，就可以登录了

1、安装egg-jwt npm install egg-jwt --save 2、配置 // {app_root}/config/plugin.js exports.jwt = { enable: true, package: "egg-jwt" }; //?{app_root}/config/config.default.js exports.jwt?=?{ ??secret:?"123456" }; 3、如何创建令牌 const token = app.jwt.sign({ foo: 'bar' }, app.config.jwt.secret);

把账号密码加密为暗文 ?? ??? ? ?const token = this.app.jwt.sign({ foo: 'bar' },"xiangmu"); ?

把发送的token解密为保存的数据 ?? ??? ? ?let re=this.ctx.app.jwt.verify(ziduan.token, "xiangmu");

?4、案例 async login1() { var ziduan=this.ctx.request.body // console.log(ziduan) //把账号密码加密为暗文 const token = this.app.jwt.sign({ foo: 'bar' },"xiangmu"); console.log(token,111); this.ctx.body={info:"ok",code:200,token} //把token码发送给前端，然后其它页面把token码本地缓存起来 } async car(){ var ziduan=this.ctx.request.query //去数据库中验证是否正确，在加密 //把发送的token解密为保存的数据 let re=this.ctx.app.jwt.verify(ziduan.token, "xiangmu"); console.log(re) this.ctx.body={info:"test"} }

三、样式穿透 1、什么情况下使用样式穿透

引入第三方组件库（如element-ui、element-plus），修改第三方组件库的样式样式文件中使用了 scoped 属性，但是为了确保每个组件之间不存在相互影响所以不能去除

就是使用别人的框架，比如layui，elementUI，想把别人写的东西，改一下样式，颜色等

就是在控制台找到改盒子的class名，给他写你想要的样式，结果发现不生效，因为自己写的没有别人的优先级高

2、样式穿透的三种办法 1. >>>

适用与 css、stylus，不太推荐，可能会有问题外层类 /deep/ 想要修改类名 {修改样式}

2. /deep/

适用于 scss、less 外层类 >>> 想要修改类名 {修改样式}

3. ::v-deep

通用，据说可以加快编译速度 ::deep 想要修改类名 {修改样式}

4. :deep()? 穿透选择器

3、/deep/ ，>>>，::v-deep的区别 css?使用?>>>less?使用?/deep/scss?使用?::v-deep