All posts by 龙生
vue项目中json字符串转换成json对象
场景:在前端发送ajax请求是后台有时会返回json字符串,这样的数据需要转化成json对象才可以正常的使用 之前我在这个问题上困惑了好几天,从网上找了一些资料,使用了一下都是报错的,所以写着篇博客是为了让像我一样的新手可以少一些痛苦,尽快的完成任务 JSON.parse(jsonstr);//括号内为你需要转化json对象的内容 我标红的那一行就是转化json对象的,大家可以看一下,转化之前打印的red 和转化之后打印的this.bookcontent的格式是不一样的,之前是json字符串,之后的是json对象, created(){ getBookContent(this.bookId, this.chapterid).then(red =>{ // console.log(red) let a = JSON.parse(red.data);//将json字符串转换成json对象 this.bookcontent = a.chapter.chaptername // console.log(this.bookcontent) }).catch(err =>{ console.log(err,’请求失败') }) } ———————————————— 版权声明:本文为CSDN博主「qq_41114935」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/qq_41114935/java/article/details/81284188
View DetailsNginx配置Https反向代理
ZERO 持续更新 请关注:https://zorkelvll.cn/blogs/zorkelvll/articles/2018/12/09/1544347717025 背景 本文主要是记录配置nginx反向代理https过程中的一些记录! 一、Nginx添加SSL模块 nginx默认缺少SSL模块支持,需要手动编译安装!由于本文之前已经编译安装过nginx,因此本文将是在原有基础之上编译安装添加SSL模块
|
1 2 3 4 5 6 7 |
cd /root/app/nginx-1.14.0 /usr/local/nginx/sbin/nginx -V #查看nginx旧的编译参数 ./configure [......旧的编译参数仍然保持不变] --prefix=/usr/local/nginx --with-http_ssl_module #在原有旧的编译参数基础之上添加新的模块--with-http_ssl_module make #注意:千万不能执行make install,否则原来nginx的一堆配置文件将被覆盖 cp /usr/local/nginx/sbin/nginx ~/ #备份原来的nginx可执行程序 cp objs/nginx /usr/local/nginx/sbin/ #将新编译的nginx可执行程序objs/nginx复制覆盖原nginx执行程序 #覆盖之后,重新启动nginx即为新的nginx |
二、免费获取SSL证书
|
1 2 3 4 |
#https://freessl.cn/ #注册freessl账号 #输入域名以及域名注册的邮箱地址,生成SSL证书 #到域名所在服务商位置,设置TXT解析以进行域名验证,如下 #或者aliyun 控台下载免费的域名证书 |
imagepng
|
1 |
#在freessl控制台进行域名验证,验证通过之后可以下载证书压缩文件解压之后传输到nginx所在服务器上(full_chain.pem和private.key两个文件) |
三、配置nginx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
vim /usr/local/nginx/conf/nginx.conf #修改配置付下 server { listen 80; server_name caizhaoke.cn,www.caizhaoke.cn; rewrite ^(.*)$ https://www.caizhaoke.cn; } server { listen 443 ssl; server_name caizhaoke.cn,www.caizhaoke.cn; ssl on; #SSL-START SSL相关配置,请勿删除或修改下一行带注释的404规则 ssl_certificate /root/data/cert/full_chain.pem; ssl_certificate_key /root/data/cert/private.key; ssl_protocols TLSv1 TLSv1.1 TLSv1.2; ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE; ssl_prefer_server_ciphers on; ssl_session_timeout 10m; #SSL-END index index.jsp index.html; location / { add_header Content-Security-Policy upgrade-insecure-requests; # for 解决 https 之后静态资源http mixed content问题 proxy_pass http://pipe$request_uri; proxy_set_header Host $host:$server_port; proxy_set_header X-Real-IP $remote_addr; client_max_body_size 10m; } } /usr/local/nginx/sbin/nginx -t #检测nginx配置文件是否有错误 /usr/local/nginx/sbin/nginx -s reload #重启nginx #保证服务器以及云服务商的防火墙开启443端口之后,浏览器中访问https即可验证成功 |
作者:zorkelvll 链接:https://www.jianshu.com/p/e46ec3fc121e 来源:简书 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
View Details域名、https、nginx反向代理小结
1、域名备案:指域名与公网ip的绑定,绑定后即可使用80/443等端口。 2、域名添加A记录子域名后指定对应的公网ip地址,无法指定端口。 3、只要使用https就必须使用证书,证书可以自己购买也可使用openssl生成,但是自己生成的证书安全性较差,仍然容易被串改,而且网页显示与购买的有区别。 4、nginx反向代理配置 可以不使用upstream,直接在prox_pass后添加真正的服务器地址,但是使用upstream好处更多,如实现负载均衡、设置权重等功能。 nginx部分内容详解如下: proxy_redirect off; 重写后端服务器的location和refresh头。 proxy_set_header Host $host; 重写发送给后端服务器的请求头内容。 proxy_connect_timeout 300; 代理服务器接收请求到连接后端服务器的最长等待时间。 proxy_buffer_size 4k; 后端响应的缓冲区数量和大小。 proxy_buffers 4 32k; 请求后端的缓冲区数量和大小。 proxy_busy_buffers_size 64k; 当代理服务器忙时,缓冲区的最大值。 proxy_send_timeout 300 将超时与请求传输到代理服务器分配。 proxy_read_timeout 300 NGINX等待获取请求响应的时间。 upstream ip_hash:指令通过ip地址生成hash值将客户端均匀地连接到所有服务器。 keepalive:指令指定每个worker进程缓存后端服务器的长连接数。 least_conn:指令激活负载均衡算法,使用最少连接数。 server: —- weight:设置服务器的优先级。 —- fail-timeout、max-fails:在fail-timeout时间内出现了max-fails次数的连接失败,nginx则认为该后端服务器已经挂掉了。 —- backup:指定服务器的备用机器,只有非backup机器挂掉,才会接收请求。 —- down:指定当前的服务器不再接收请求。 对upstream仍不了解,可参考此网站实例:https://www.cnblogs.com/wzjhoutai/p/6932007.html from:https://www.cnblogs.com/wdp-home/p/12092480.html
View Detailsvue中 关于$emit的用法
1、父组件可以使用 props 把数据传给子组件。 2、子组件可以使用 $emit 触发父组件的自定义事件。 vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn; 例如:子组件: <template> <div class="train-city"> <h3>父组件传给子组件的toCity:{{sendData}}</h3> <br/><button @click=’select(大连)'>点击此处将‘大连’发射给父组件</button> </div> </template> <script> export default { name:’trainCity', props:['sendData'], // 用来接收父组件传给子组件的数据 methods:{ select(val) { let data = { cityname: val }; this.$emit('showCityName',data);//select事件触发后,自动触发showCityName事件 } } } </script> 父组件: <template> <div> <div>父组件的toCity{{toCity}}</div> <train-city @showCityName="updateCity" :sendData="toCity"></train-city> </div> <template> <script> import TrainCity from "./train-city"; export default { name:’index', components: {TrainCity}, data () { return { toCity:"北京" } }, methods:{ updateCity(data){//触发子组件城市选择-选择城市的事件 this.toCity = data.cityname;//改变了父组件的值 console.log('toCity:’+this.toCity) } } } </script> from:https://www.cnblogs.com/shaozhu520/p/10637455.html
View DetailsIEnumerable和IQueryable区分
LINQ查询方法一共提供了两种扩展方法,在System.Linq命名空间下,有两个静态类:Enumerable类,它针对继承了IEnumerable<T>接口的集合进行扩展;Queryable类,针对继承了IQueryable<T>接口的集合进行扩展。我们会发现接口IQueryable<T>实际也是继承了IEnumerable<T>接口的,既然这样微软为什么要设计出两套扩展方法呢? 从LINQ查询功能上我们知道实际上可以分为三类:LINQ to OBJECTS、LINQ to SQL和LINQ to XML。其实微设计这两套接口主要是针对LINQ to OBJECTS和LINQ to SQL,两者对于查询的内部处理机制是完全不同的。针对LINQ to OBJECTS 时,使用Enumerable中的扩展方法对本地集合进行排序和查询操作,查询参数接受的是Func<>,Func<>叫做谓语表达式,相当于一个委托。针对LINQ to SQL时,则使用Queryable中的扩展方法,它接受的是Expression<>。 那么,到底什么时候使用IQueryable<T>,什么时候使用IEnumerable<T>? 首先我们来看一下LINQ to SQL的代码: using (var context = new NorthwindEntities()) { var orderTmp = context.Orders.Where(p=>p.CustomerID=="RATTC"); var orders = orderTmp.Where(p => p.OrderDate > new DateTime(1997, 1, 1)); foreach (var order in orders) { Console.WriteLine("OrderId:" + order.OrderID); } } 通过vs的Intellisense我们可以看到Where的返回类型为IQueryable,参数是Expression类型的: 我们再看一下这一段代码: using (var context = new NorthwindEntities()) { var orderTmp = context.Orders.Where(p => p.CustomerID == "RATTC").AsEnumerable(); var orders = orderTmp.Where(p => p.OrderDate > new DateTime(1997, 1, 1)); foreach (var order in orders) { Console.WriteLine("OrderId:" + order.OrderID); } } 这段代码的不同在于我们将LINQ的查询返回IEnumerable类型,我们看一下vs的Intellisense效果: 由于我们在LINQ查询的时候加上了AsEnumerable(),因此我们在第二条语句能看到返回类型已经变为IEnumerable,参数也变成了Func<>类型。 至于这两段代码到底有什么区别,我们分别执行代码,在sql profiler里看一下生成的sql语句: 第一段代码效果: 虽然我们使用两条语句进行了查询,但最终只生成了一条SQL语句,将查询参数合并了。 第二代码效果: 这一次我们依然只看到一条SQL语句,但查询条件也只有一个,但两次查询的结果是一致。 原因在于Func<>直接会被编译器编译成IL代码,但是Expression<>只是存储了一个表达式树,在运行期作处理,LINQ to SQL最终会将表达式树转为相应的SQL语句,然后在数据库中执行。 现在我们应该知道何时使用IEnumerable<T>,何时使用Iqueryable<T>。 from:https://www.cnblogs.com/zgqys1980/p/4047315.html
View DetailsC#定义泛型方法错误-类型“T”必须是引用类型才能用作泛型类型或方法“System.Data.Linq.Table”中的参数“TEntity”
错误写法:
|
1 2 3 4 |
public void GetTableElements<T>() { Table<T> UserTable = m_DataContext.GetTable<T>(); } |
解决方法: 在()后面加上where T : class即可,表示为泛型T为类型才能进行转换
|
1 2 3 4 |
public void GetTableElements<T>() where T : class { Table<T> UserTable = m_DataContext.GetTable<T>(); } |
from:https://blog.csdn.net/lujiachun1/article/details/77941859
View DetailsEF实现分页查询+条件查询+排序
先来看看几个LINQ to SQL的几个函数。 Take 说明:获取集合的前n个元素;延迟。即只返回限定数量的结果集。 var q = ( from e in db.Employees orderby e.HireDate select e) .Take(5); 语句描述:选择所雇用的前5个雇员。 Skip 说明:跳过集合的前n个元素;延迟。即我们跳过给定的数目返回后面的结果集。 var q = ( from p in db.Products orderby p.UnitPrice descending select p) .Skip (10); 语句描述:选择10种最贵产品之外的所有产品。 OrderBy 适用场景:对查询出的语句进行排序,比如按时间排序 等等。 说明:按指定表达式对集合排序;延迟,:按指定表达式对集合 排序;延迟,默认是升序,加上descending表示降序,对应的扩展方法是 OrderBy和OrderByDescending 下面这个例子使用 orderby 按雇用日期对雇员进行排序: var q = from e in db.Employees orderby e.HireDate select e; 说明:默认为升序 看完这两个函数的使用方法,那么分页的思路也就很容易推出来了,若要显示第m页,每页n条数据,我们应该跳过n*(m-1)条数据,显示n条数据。 源码如下:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
/// <summary> /// 分页查询 + 条件查询 + 排序 /// </summary> /// <typeparam name="Tkey">泛型</typeparam> /// <param name="pageSize">每页大小</param> /// <param name="pageIndex">当前页码</param> /// <param name="total">总数量</param> /// <param name="whereLambda">查询条件</param> /// <param name="orderbyLambda">排序条件</param> /// <param name="isAsc">是否升序</param> /// <returns>IQueryable 泛型集合</returns> public IQueryable<T> LoadPageItems<Tkey>(int pageSize, int pageIndex, out int total, Expression<Func<T, bool>> whereLambda, Func<T, Tkey> orderbyLambda, bool isAsc) { total = MyBaseDbContext.Set<T>().Where(whereLambda).Count(); if (isAsc) { var temp = MyBaseDbContext.Set<T>().Where(whereLambda) .OrderBy<T, Tkey>(orderbyLambda) .Skip(pageSize * (pageIndex - 1)) .Take(pageSize); return temp.AsQueryable(); } else { var temp = MyBaseDbContext.Set<T>().Where(whereLambda) .OrderByDescending<T, Tkey>(orderbyLambda) .Skip(pageSize * (pageIndex - 1)) .Take(pageSize); return temp.AsQueryable(); } } |
使用示例 //查询要求:每页10条,显示第2页,查询性别为“男”,按年龄增序排列 int totalRecord; List<Student>result = studentService.LoadItems(10,2,out totalRecord,u=>u.Sex==”男”,u=>u.Age,True); 最近研究了点Linq to Sql的知识,发现还挺有意思的,欢迎大家和我一起交流。 from:https://blog.csdn.net/augus3344/article/details/45378877
View Detailsvue中find函数
let obj = this.role.find(v => v.code === res.company.role) 循环 data对象中的role数组 ,每个数组元素用v代替,code为他的键,返回找到的数组元素对象。 from:https://www.cnblogs.com/erfsfj-dbc/p/10063533.html
View Details当表格列数太多时,怎么实现表格的横向滚动
效果: 要点:在表格外加一层div,div宽固定 html:
|
1 2 3 4 5 6 7 |
<div class="project-tests"> <table> <tr v-for="arr in projectTests" v-bind:key="arr[0]"> <td v-for="item in arr" v-bind:key="item">{{item}}</td> </tr> </table> </div> |
postcss:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
div.project-tests { width: 100%; overflow-x:scroll; & table { border-collapse:collapse; & tr { height: 40px; &:nth-child(odd) { background-color: #FAFAFA; } &:first-child { background-color: #EEF1F6; } &:hover { background-color: #EEF1F6; } } & td { border: 1px solid #DFE6EC; padding:8px; white-space:nowrap; text-overflow: ellipsis; } } } |
from:https://www.cnblogs.com/XHappyness/p/7819246.html
View Detailstable中,表头固定,body滚动的方式。也就是使用:css Table布局-display:table
两种类型的表格布局 你有两种方式使用表格布局 -HTML Table(<table>标签)和CSS Table(display:table 等相关属性)。 HTML Table是指使用原生的<table>标签,而CSS Table是指用CSS属性模仿HTML 表格的模型。 在W3C关于<table>相关标签的文档中我们可以找到,HTML 4中<table>相关标签的默认样式表: js 代码: table { display: table } tr { display: table-row } thead { display: table-header-group } tbody { display: table-row-group } tfoot { display: table-footer-group } col { display: table-column } colgroup { display: table-column-group } td, th { display: table-cell } caption { display: table-caption } 显而易见HTML Table使用标签<table>、<tr>、<td>等标签,就是使用CSS Table的相关属性来实现的。从上面HTML4的默认样式表中可以看出他们的使用对于CSS属性的情况: table:指定对象作为块元素级的表格。类同于html标签<table>(CSS2) inline-table:指定对象作为内联元素级的表格。类同于html标签<table>(CSS2) table-caption:指定对象作为表格标题。类同于html标签<caption>(CSS2) table-cell:指定对象作为表格单元格。类同于html标签<td>(CSS2) table-row:指定对象作为表格行。类同于html标签<tr>(CSS2) table-row-group:指定对象作为表格行组。类同于html标签<tbody>(CSS2) table-column:指定对象作为表格列。类同于html标签<col>(CSS2) table-column-group:指定对象作为表格列组显示。类同于html标签<colgroup>(CSS2) table-header-group:指定对象作为表格标题组。类同于html标签<thead>(CSS2) table-footer-group:指定对象作为表格脚注组。类同于html标签<tfoot>(CSS2) 下面是一些 display:table 示例,你可能会发现它很有用: · 动态垂直居中对齐
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
Html: <button>添加多行</button> <div class="box"> <p>Double Line</p> <p>Double Line</p> </div> LESS body { color: @beige; background: @green; display: table; width: 100%; height: 100%; } .box { display:table-cell; vertical-align: middle; text-align: center; } /*====== Ignore section below ======*/ @orange: #BD4932; @yellow: #FFD34E; @green: #105B63; @beige: #FFFAD5; /* Basic Style*/ * { margin:0; padding:0;} html, body { height: 100%; } button { padding: 5px 10px;position:absolute;bottom: 20px;left:20px;display: block; -webkit-appearance: none;background: @orange; outline: none; border: 2px solid #DB9E36; color: @yellow; border-radius: 10px; box-shadow: 0 2px 3px rgba(0,0,0,0.5);cursor: pointer;} button:active {border-color: @beige; color:@beige;} JS document.querySelector("button").addEventListener("click", function(){ var element = document.createElement("p"); element.innerText = "额外添加的行"; document.querySelector(".box").appendChild(element); |
这也许是使用display:table最常见的例子了。对于动态高度的元素,有了它,就可以实现真正的垂直(居中)对齐。 还有另一个不用display:table实现的垂直居中的简单方式,您可能感兴趣: table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法 找了好久才找到一篇可以简单粗暴就能用的,所以拿过来算是收藏了。里面有一个css2里的命令是我没用过的也是这里面关键的:table-layout:fixed; 原理很简单,有爱研究的童鞋可以去css官网看看说明文档。 直接贴代码:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 |
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>转载自·威易网CSS教程</title> <style> table tbody { display:block; height:195px; overflow-y:scroll; } table thead, tbody tr { display:table; width:100%; table-layout:fixed; } table thead { width: calc( 100% - 1em ) } table thead th{ background:#ccc;} </style> </head> <body> <table width="80%" border="1"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>出生年月</th> <th>手机号码</th> <th>单位</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>18</td> <td>1990-9-9</td> <td>13682299090</td> <td>阿里巴巴</td> </tr> <tr> <td>张三封</td> <td>18</td> <td>1990-9-9</td> <td>13682299090</td> <td>阿里巴巴与四十大盗</td> </tr> <tr> <td>张小三</td> <td>18</td> <td>1990-9-9</td> <td>13682299090</td> <td>腾讯科技</td> </tr> <tr> <td>张三</td> <td>18</td> <td>1990-9-9</td> <td>13682299090</td> <td>浏阳河就业</td> </tr> <tr> <td>张三疯子</td> <td>18</td> <td>1990-9-9</td> <td>13682299090</td> <td>阿里巴巴</td> </tr> <tr> <td>张三</td> <td>18</td> <td>1990-9-9</td> <td>13682299090</td> <td>阿里巴巴</td> </tr> <tr> <td>张大三</td> <td>18</td> <td>1990-9-9</td> <td>13682299090</td> <td>阿里巴巴</td> </tr> <tr> <td>张三五</td> <td>18</td> <td>1990-9-9</td> <td>13682299090</td> <td>阿里巴巴</td> </tr> <tr> <td>张刘三</td> <td>18</td> <td>1990-9-9</td> <td>13682299090</td> <td>阿里巴巴</td> </tr> <tr> <td>张三</td> <td>18</td> <td>1990-9-9</td> <td>13682299090</td> <td>阿里巴巴</td> </tr> </tbody> </table> </body> </html> |
from:https://www.cnblogs.com/susan-home/p/8761574.html
View Details