目录
二、JSON Web Tokens
一、element-UI框架
1、纯html-ui框架：layui、 bootstrap 、mui 、jQuery-ui...
就是一份写好样式的css代码
2、基于框架的ui框架：Vue、react...
写好了样式和基于框架语法的组件的组件库
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 --save2、配置
// {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
在style经常用scoped属性实现组件的私有化时，要改变element-ui某个深层元素（eg:.el-input__inner）或其他深层样式时，需要使用/deep/，如
.conBox /deep/ .el-input__inner{ padding:0 10px; }注意：/deep/在vue 3.0会报错,如果/deep/报错，可采用::v-deep，效果基本一样
.conBox ::v-deep .el-input__inner{ padding:0 10px; }注意：深度作用选择器 >>>只作用于css，但如果是sass/less的话可能无法识别，这时候需要使用 /deep/和::v-deep 选择器。