一些知识点

最新推荐文章于 2023-05-31 17:03:25 发布

jiegiser#

最新推荐文章于 2023-05-31 17:03:25 发布

阅读量381

点赞数 1

分类专栏：前端杂谈

本文链接：https://blog.csdn.net/cj9551/article/details/90143712

版权

前端同时被 2 个专栏收录

21 篇文章 2 订阅

订阅专栏

杂谈

17 篇文章 0 订阅

订阅专栏

文章目录

1. VuePress

vuePress快速使用，进入官网，可以看到有两种使用场景，一种是直接全局安装，然后进行创建md文件进行写内容，还有一种是基于现有的项目使用vuePress去管理文档，进行配置即可，这里我只是简单的测试了一下，全局进行安装。
输入下面的命令：npm install -g vuepress全局安装vuePress，然后进行新建一个markdown 文件，然后输入命令vuepress build .就可以运行我们的项目，查看显示，如果需要打包为静态资源，输入命令vuepress build .进行构建静态资源文件；有时间研究一下搭建一个博客。

2. wps 在线预览服务

他的这个服务是可以快速预览文件等。有两个主要的东西：一个是他们安装的在线预览服务；还有一个就是系统服务端，也就是我们需要实现/v1/3rd/fileinfo接口，来给预览服务返回文件的json信息，进行加载。我们在使用预览服务的时候，需要注意下面的几点：
需要修改服务配置：xview.config

[SIGNATURE]
signature_enable = false # 如果此值为false，必须设置signature_plego_host，私有化部署一般为false
signature_plego_host = “http://192.168.27.71:20885” # http://127.0.0.1:20882 对应对接服务器的地址,这个就是我们实现的抛出文件信息的接口地址。

总体实现：首先是获取网络地址的文件，进行下载到本地，直接读取文件。

两种方法：
1. 直接通过预览服务的接口 v1/view/preview?fName=1.doc在页面进行显示，这样显示比较消耗时间。因为在服务器内部还得将网络文件进行下载。下载到本地之后进行转换展示。
2. 在前端进行调用预览服务的/v1/view?fName=cs2.pdf接口，进行下载文件，这个接口会调用v1/3rd/fileinf接口进行下载文件。然后返回json，获取预览地址，然后进行显示，该方法封装在getPath方法中。

C#具体实现的代码如下：

        [HttpGet]
        public ActionResult index(String fName)
        {
            FileInfo info = new FileInfo();
            List<FileInfo> result = new List<FileInfo>();
            info.setFname(fName);
            //文件路径
            string filePath = System.Configuration.ConfigurationManager.AppSettings["filePath"];
            //文字水印内容
            string Watermark = System.Configuration.ConfigurationManager.AppSettings["Watermark"];
            //文件来源类型，网络或者，本地
            string fileType= System.Configuration.ConfigurationManager.AppSettings["fileType"];
            //下载文件地址
            string DownFilePath = System.Configuration.ConfigurationManager.AppSettings["DownFilePath"];
            //如果文件为网络地址，将文件进行下载到本地
            if (fileType == "download")
            {
                info.setUrl(filePath + fName);
                DigestUtils.HttpDownloadFile(info.getUrl(), DownFilePath);
                info.setUrl(DownFilePath + fName);
            }
            else
            {
                info.setUrl(filePath + fName);
            }
            
            info.fname = fName;
            info.getFileWay = "localfile";
            info.url= info.getUrl();
            info.setUniqueId(DigestUtils.SHA1File((info.getUrl())));
            if (info.getUniqueId() == "")
            {
                info.uniqueId = fName;
            }
            else {
                info.uniqueId = info.getUniqueId();
            }
            info.enableCopy = false;
            info.watermarkType = 1;
            info.watermark = Watermark;
            result.Add(info);
            return Json(info, JsonRequestBehavior.AllowGet);
        }
        /// <summary>
        /// 获取预览地址
        /// </summary>
        /// <param name="fName"></param>
        /// <returns>当返回值为"0"时，获取预览地址失败</returns>
        [HttpPost]
        public string getPath(string fName)
        {
            //获取预览地址
            string urlPath = httprequire.GetPviewPath(fName);
            return urlPath;
        }

3. Asp .net MVC 项目中，路由的映射

当然我们在选型抛出API接口的时候，可以选择不同的技术Web API 、MVC等等.net的框架，抛出接口的方法也不一样，最近在做一个项目；没考虑接口实现的过程，就使用了MVC框架，但是，对于MVC框架，抛出v1/3rd/fileinfo这种三层结构的API地址，自己之前是没有研究过这块。MVC框架本身路由配置是这样的：控制器/方法名；后面跟上参数，只能实现两级，后来我就想了能不能网站名是一级叫v1，然后后面的根据建立对应的路由以及方法，但是，在MVC框架中，新建路由3rdControll他会提示是保留字，无法创建。这就很尴尬。

            routes.MapRoute(
              name: "fileinfo",
               url: "{controller}/{action}/{id}",
               defaults: new { controller = "fileinfo", action = "index", id = UrlParameter.Optional }
            );

最后我查找了对应的路由映射方面的知识，是可以解决的，如下：

    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
            //路由重定向
            routes.MapRoute("fileinfo", "v1/3rd/fileinfo", new { controller = "fileinfo", action = "index" });
            routes.MapRoute("fileview", "view", new { controller = "fileinfo", action = "viewFile" });
        }
    }

如上面的代码，我们在访问v1/3rd/fileinfo这个地址的时候，他直接会映射到这个fileinfo路由下面的index这个，方法。这样就完美解决。

4. SCSS 的一些知识

首先明白Sass与Scss之间的区别：

Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：
1.文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
2.语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

Scss和纯Css写法差别:他们是没有什么差别的，把我们的.css文件直接修改为.scss就可以使用。
Scss文件的编译：需要我们安装Sass，前提是需要安装ruby，然后输入命令：这是对单文件进行编译。

sass d:\project\src\css\index.scss:d:\project\src\css\index.css

如果需要对整个项目所有的Scss文件进行编译，输入下面的命令:

sass sass/:css/

上面的执行编译命令，每次只能编译一次，很是麻烦，我们可以在编译Sass的时候，开启Watch功能，只要监测到文件代码改变，就进行重新编译：

sass --watch d:\project\src\css\index.scss:d:\project\src\css\index.css

Scss声明变量的方式跟stylus是一样的，都是$变量名：值;对于Scss中，如果值后面加上!default表示默认值，如果这个变量被声明赋值了，那就用声明的变量，否则就会使用默认值；对于默认值的覆盖，需要在声明默认值之前，重新声明下变量即可；如果是相同的变量名，后面的变量会覆盖前面的变量值。下面代码最终渲染结果为color: red;
$color:red; $color:blue !default;
对于定于全局变量与局部变量：跟JavaScript的let等类似，在元素内定义的变量不会影响其他元素。
对于选择器嵌套：如下面的代码：

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li { display: inline-block; }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
/*后面*/
nav {
   a {
      color: red;
      header & {
      color:green;
      }
    }  
 }

编译结果为：

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}
/*后面*/
nav a { 
  color:red;
}
header nav a {  
  color:green;
}

文件的导入：
比如我们有一个_reset.Scss文件，内容如下：

html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}

在css代码中，我们进行引入：

@import 'reset';

body {
  font-size: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

最后输出的结果为：

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  background-color: #efefef;
  font-size: 100% Helvetica, sans-serif;
}

css的混合：就是定义的css在其他的样式中也进行使用；比如：
定义border-radius，并将其添加到 .box 类：

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

输出的结果为：

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

继承：scss扩展了css的继承，如下代码：

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

编译后的代码：

.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

操作符：scss可以支持+ 、-、 * 、 /等常用的操作符；如下面代码：

.container { width: 100%; }

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complimentary"] {
  float: right;
  width: 300px / 960px * 100%;
}

编译后的结果为：

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complimentary"] {
  float: right;
  width: 31.25%;
}

参考文章：

https://www.imooc.com/article/79599
https://beginor.github.io/2014/07/11/introduction-to-scss.html

Object.entries()方法与Object.values()与Object.keys()用法：
Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用for...in循环遍历该对象时返回的顺序一致（区别在于 for-in循环也枚举原型链中的属性）。
Object.values()方法返回一个给定对象自身的所有可枚举属性值的数组，值的顺序与使用for...in循环的顺序相同 ( 区别在于for-in 循环枚举原型链中的属性 )。
Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用for...in循环遍历该对象时返回的顺序一致。
Object.is()方法判断两个值是否是相同的值。
Object.freeze()方法可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。此外，冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。
Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象;如果有相同的属性就会替换第一个对象里面的数据。类似于两个对象进行求交运算，但是求交的结果以第二个对象为准。
Object.seal()方法封闭一个对象，阻止添加新属性并将所有现有属性标记为不可配置。当前属性的值只要可写就可以改变。也就是不能向对象添加新的属性，只能进行修改，但前提是，属性的值是可写状态。

5. 有关ASP . Net mvc 中 token 存取

ASP.NEt一些知识：在后台进行获取信息的的时候，比如企业微信里面获取一些用户信息，我们都需要将获取到的一些信息存储到token中，一方面视为了节约资源；返回值不断的发送请求去获取信息，获取是验证。下面是将信息存储到token中代码：
这里我是将access_token存储，然后每次请求该值的时候，首先从缓存中进行读取，如果没有，就再次发送请求，进行存储。

        public string zzxt_accesstoken() {

            string access_token = HttpContext.Current.Cache["access_token"] as string;
            if (access_token == null)
            {
                string accesstoken = Https.GetUrltoHtml(accesstoken_url, "access_token");
                HttpContext.Current.Cache.Insert("access_token", accesstoken, null, DateTime.Now.AddSeconds(7000), TimeSpan.Zero);
                return accesstoken;
            }
            else return HttpContext.Current.Cache["access_token"].ToString();
        }

在.net中我们有时候会遇到发送post请求的时候，需要HTTP Digest Authentication的URL；如果没有提供用户名或者密码的时候，后台不会通过验证，将数据返回，这个时候有两种方法进行解决：
一是在请求头中添加HTTP Digest Authentication认证信息到请求中添加Authorization：Authorization: "Digest 用户名和密码的base64加密字符串"
二是在url中添加用户名和密码： http://userName:password@XXX
代码如下：

        /// <summary>
        /// 请求数据
        /// </summary>
        /// <param name="strUrl"></param>
        /// <param name="strBody"></param>
        /// <returns></returns>
        public static string HttpPostPa(string strUrl, string strBody)
        {
            try
            {

                Encoding encoding = Encoding.UTF8;
                HttpWebRequest httpRequest = (HttpWebRequest)WebRequest.Create(strUrl);
                httpRequest.Method = "POST";
                httpRequest.Accept = "text/html,application/xhtml+xml,*/*";
                httpRequest.ContentType = "application/json";
                //请求头添加授权信息
                httpRequest.Headers.Add("Authorization", strBody);
                //没有请求信息设置为0
                httpRequest.ContentLength = 0;
                HttpWebResponse httpResponse = (HttpWebResponse)httpRequest.GetResponse();
                using (StreamReader reader = new StreamReader(httpResponse.GetResponseStream(), Encoding.UTF8))
                {
                    return reader.ReadToEnd();
                }
            }
            catch(Exception e)
            {
                return e.ToString();
            }

        }

这里需要注意的是，如果post请求中，没有参数，需要加一个httpRequest.ContentLength = 0;表示请求无参数。

6. vue中的event对象

在vue中获取event对象：

<div id="app">
    <button v-on:click="click">click me</button>
</div>

var app = new Vue({
    el: '#app',
    methods: {
        click(event) {
            console.log(event);
        }
    }
});

默认的vue事件中会将event对象作为参数传递给函数，但是如果我们在绑定事件的时候加一个括号：

<div id="app">
    <button v-on:click="click()">click me</button>
</div>

var app = new Vue({
    el: '#app',
    methods: {
        click(event) {
            console.log(event);
        }
    }
});

这样是获取不到event对象。如果我们既需要event对象也需要传递参数，我们可以借助$event这个变量来实现：

<div id="app">
    <button v-on:click="click($event,'123')">click me</button>
</div>

var app = new Vue({
    el: '#app',
    methods: {
        click(event, value) {
            console.log(event,value);
        }
    }
});

使用不带圆括号的形式，event对象将被自动当做实参传入；使用带圆括号的形式，我们需要使用 $event 变量显式传入event对象。
但是window.event，ie和 chrome 都在window对象上有这样一个event属性，所以下面的代码也可以获取event对象：

<div id="app">
    <button v-on:click="click(233)">click me</button>
</div>

var app = new Vue({
    el: '#app',
    methods: {
        click(val) {
            console.log(typeof event);    // object
        }
    }
});

jiegiser#

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
一些知识点

2019-05-12vuePress快速使用，进入官网，可以看到有两种使用场景，一种是直接全局安装，然后进行创建md文件进行写内容，还有一种是基于现有的项目使用vuePress去管理文档，进行配置即可，这里我只是简单的测试了一下，全局进行安装。输入下面的命令：npm install -g vuepress全局安装vuePress，然后进行新建一个markdown 文件，然后输入命令vuepr...
复制链接

扫一扫