laozhang_is_phi
TA的个人档案
laozhang_is_phi个人页面-阿里云开发者社区
文章
16
问答
0
个人介绍
攻城狮一枚； 乐于分享新知识
擅长的技术
- 高分内容
- 最新动态
- 文章
- 问答
-
发表了文章 2018-09-13
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性
回顾 今天来晚辣，给公司做了一个小项目，一个瀑布流+动态视频控制的DEMO，有需要的可以联系我，公司的项目就不对外展示了（一个后端程序员真的要干前端了哈哈哈）。 书接上文，昨天正式的开始了Vue的代码的学习，简单的通过一些假的数据来展示了下个人博客的首页列表，不知道大家是否还记得昨天讲的什么，如果不太清楚呢，可以再回顾下《[从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础：使用Vue.js 来画博客首页（一）](https://www.jianshu.com/p/067493c96a53)》，我们主要说到了，Vue的核心语法是什么，MVVM体现在哪些方面，如何简单安装Vue环境（通过直接引用Vue.js文件的形式），以及常用的十天指令的前五个，并且通过讲解，咱们做了一个小DEMO，就是一个个人的博客系统的首页（这里是盗取网友的一个样式，因为我看着着实比较喜欢哈哈）。其实主要记住一点，用Vue这类MVVM框架开发，一定要摆脱之前的DOM操作的习惯，改成操作数据来控制View，如果你Vue这一块会的话，那学习微信小程序开发就是分分钟的事儿，嗯~~~ 关于后边的实战环节，我还没有确定要用什么样式的博客，如果大家看到有好的，可以留言下，咱们以它为基础可以扩展，如果不行的话，我就自己写一个简单的吧，当然还是那句话，我只是一个抛砖引玉的作用，也给看到这篇文章的小伙伴们一丢丢的动力，这个时候要说下QQ群里的小伙伴，都已经开始用Vue，配合着前边的教程和自己的.Net Core项目进行开发页面了，我感觉也是很开心的！至少可以在平时的时间，一起学点儿东西也是不错的。虽然不能手把手吧，但是一些建议还是尽量给提问题的小伙伴的。哈哈，{{ 强硬收回话题 }}，今天我们接着上一篇的内容，继续往下走，主要是：把 基本指令 介绍完，说下计算属性和侦听器，Class 与 Style 绑定，主要是这三部分，在博客页面上设计 添加文章，删除文章，筛选文章等功能。 零、今天完成左下角浅蓝色的部分 一、VUE 常用的一些指令总结 （ 下 ） 1、补充下 v-once 指令 —— 禁止修改 看名字就可以知道，这个是 一次 的意思，也就是说在第一次渲染以后，后期的无论数据的如何修改都不会影响该节点，只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。 注意：但是，我想说的是，这个指令一般情况不要使用，除非是含有大量的静态数据，不想每次加载的时候占用时间，如果过多的使用该指令会出现很多意想不到的问题，因为数据的不刷新，不适合刚入门的小伙伴使用。 2、v-bind （ : ）指令 —— 动态属性 在昨天的博客首页的联系中，我们其实已经用到了这个指令，大家应该没有注意到，就是文章列表陪着 href 属性的时候。 v-bind 指令的作用和用法，它用于动态绑定DOM元素的属性，比较常见的比如：标签的href属性，标签的src属性。 <ul class="post-list non-style-list"> <li v-for='item in list' class="post-list-item"> <!--这里用到了 v-bind 指令--> <a v-bind:href="'https://www.cnblogs.com/laozhang-is-phi/p/'+ item.id +'.html'">{{item.name}}</a> <!--还可以这样写 这里的linkUrl 是一个变量--> <a :href="linkUrl">{{item.name}}</a> <span class="post-list-date">({{item.date}})</span> </li> </ul> 还可以：动态地绑定一个或多个特性，或一个组件 prop 到表达式（这里要记得，是动态的绑定，就是指在特性中存在变量）。 <!-- 绑定一个有属性的对象 --> <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div> <!-- 通过 prop 修饰符绑定 DOM 属性 --> <div v-bind:text-content.prop="text"></div> 3、v-on （ @ ）指令——事件触发 绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。 用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。相当于绑定事件的监听器，绑定的事件触发了，可以指定事件的处理函数。 我们可以简单说个栗子，在我们的博客首页的头像上，增加一个点击事件（就是之前的click事件）， <div v-on:click="alert('我是老张的哲学的头像')"> </div> //注意 v-on 可以用@代替，比如 //<div @:click="alert('我是老张的哲学的头像')"> </div> 在我们的页面里，我们可以用来触发：添加、筛选功能 a、新建一个 input 标签，添加一个 回车 事件 <input @keydown.enter="addArticle" type="text" class="edit" placeholder="按回车添加文章"> b、在 vue 实例的 methods 中，统一添加我们的 addArticle 方法。 //我们的方法都统一写到这里 methods: { //添加事件 addArticle: function () { //将文章存入list数组，注意 this指向！ //将数据反转 this.list = this.list.reverse(); this.list.push(this.task); this.list = this.list.reverse(); //存入list[]后，重置task this.task = { name: '',//内容为空 id: 1000, date: " Just Now ", finished: false,//未完成 deleted: false//未删除 } } }, c、这个时候，差最后一步，就是获取 input 的指（这个时候可千万不要再像以前那样，根据id来获取结果了） 还记得咱们前几帐将基本语法和Vue的核心功能的时候，说到了其中的一个很大的特性就是数据驱动 —— 双向数据绑定，不仅我们可以给 Data 赋值，还可以通过在 DOM 操作的时候，将指获取到 Data，没错就是下边的这个指令，v-model。 4、v-model 指令 —— 双向数据绑定 这是一个我认为很重要，也是经常使用到的指令，主要是表单操作，它可以很容易的实现表单控件和数据的双向绑定，相对以前的手动更新DOM，这个上边也说到了。 在之前的 input 输入框中，添加 v-model 指令 <input @keydown.enter="addArticle" type="text" class="edit" v-model="task.name" placeholder="按回车添加文章"> 这个时候，我们的博客添加的功能就好了（当然现在是最低端最low的，只是为了讲解 v-model 指令用，博客添加到时候会用 express 后台管理）。 好啦，常用的 vue 指令已经讲解完成，还有其他的一些不常用的几个大家可以用到的时候了解下。 二、计算属性 Computed 1、计算属性的原理 在模板内使用表达式很便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如： <div id="example"> {{ message.split('').reverse().join('') }} </div> 在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理，然后如果大量的使用这样的表达式，会使得整个页面不仅不好看，还很繁重。 所以，对于任何复杂逻辑，你都应当使用计算属性。 就比如上边的栗子，我们就可以写成这样： <div id="example"> //1、这里是我们在 computed中定义的值，而不是在data中 <p>message: "{{ reversedMessage }}"</p> </div> var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // 注意 ！`this` 指向 vm 实例 return this.message.split('').reverse().join('') } } }) 这样看起来就清晰明了，减轻页面的负重。这里你可以会好奇，这就像一个data的中间件一样，不用做任何的其他操作，都可以实现这个逻辑，就好像data的影子一样，没错！计算属性就是一个getter器。 你可以像绑定普通属性一样在模板中绑定计算属性。Vue 知道 vm.reversedMessage 依赖于 vm.message，因此当 vm.message 发生改变时，所有依赖 vm.reversedMessage 的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系：计算属性的 getter 函数是没有副作用 (side effect) 的，这使它更易于测试和理解。 2、知道了他的原理和如何使用，那么我们就可以在我们的项目中使用 计算属性 来达到我们的动态查询文章的功能 我们首先添加一个计算属性来过滤我们的文章list数据 //通过计算属性过滤数据 computed: { listSearch: function () { //为什么要存这个this呢，因为filter过滤器会改变this的指向 let that = this; return this.list.filter(function (item) { //简单的 判断文章name是否包含 input中的值，因为双向绑定，所以也就是 task.name return item.name.indexOf(that.$data.task.name) >= 0; }); } } 接下来，我们就需要把我们的计算属性 listSearch 替换掉view中的 list，从而达到过滤： <li v-for='item in listSearch' class="post-list-item"> <span class="post-list-date">({{item.date}})</span> </li> 最后我们可以看看效果： 注意：计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ： computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } } } 现在再运行 vm.fullName = '老张 哲学' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。 三、侦听器 （不建议多使用） 虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的（这个要强调，是异步操作，或者开销较大的操作）。 在这里，我们监听下我们的 input 输入的数据变化，也就是 task.name 的值 一般的写法是这样的： new Vue({ data: { author: "老张的哲学", task: { name: '',//内容为空 id: 100, date: " Just Now ", finished: false,//未完成 deleted: false//未删除 }, }, watch: { author: function (newval, oldVal) { console.log("author 变化辣，") } } }) 但是在我们的栗子中，是监听一个对象的中某个属性，也就是 task.name， 所以我们就会这么写： watch: { task.name() { //这里面可以执行一旦监听的值发生变化你想做的操作 } }, 但是，这样写是不符合规则的，必须是一个变量，因此会报错： 所以我们就需要还是用到 计算属性来定义，还记得计算属性是干什么的么，它就像一个数据的中间件，把原始数据再封装一下， 那正好，我们可以把 task.name 给封装下，最终会是这样的： new Vue({ data: { author: "老张的哲学", task: { name: '',//内容为空 id: 100, date: " Just Now ", finished: false,//未完成 deleted: false//未删除 }, }, watch: { author: function (newval, oldVal) { console.log("author 变化辣，") }， nameCpt() : function (newval, oldVal) { console.log("task.name 变化辣，") }， }, //通过计算属性来操作我们需要用到的任何数据 computed: { nameCpt() { return this.task.name } } }) 注意：虽然Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。但是监听是特别浪费资源的，当我们有一些数据需要随着其它数据变动而变动时，我们很容易滥用 watch，因此通常更好的做法是使用计算属性而不是命令式的 watch 回调。 四、匆匆结语 今天时间晚了些，动态Class 与 Style 绑定没有说到，那我们就下次再说吧！今天呢，我们主要说了常用的指令，主要的是 v-model、v-bind、v-on三个指令，然后还说了计算属性和侦听器，我在开发的过程中，计算属性是使用较多的，但是某些时候，watch 侦听器会发挥不一样的作用！好啦，下次咱们继续说说 动态Class 与 Style 绑定 和 很重要的 生命周期讲解 吧。 五、CODE https://github.com/anjoy8/Blog.Vue
-
发表了文章 2018-09-05
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十六 ║ Vue前篇：ES6初体验 & 模块化编程
缘起 昨天说到了《[从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇：JS对象&字面量&this](https://www.cnblogs.com/laozhang-is-phi/p/9580807.html)》，通过总体来看，好像大家对这一块不是很感兴趣，嗯~~这一块确实挺枯燥的，不能直接拿来代码跑一下那种，不过还是得说下去，继续加油吧！如果大家对昨天的小demo练习的话，相信现在已经对JS的面向对象写法很熟悉了，如果嵌套字面量定义函数，如何使用this关键字指向。今天呢，主要说一下ES6中的一些特性技巧，然后简单说一下模块化的问题，好啦，开始今天的讲解~ 还是老规矩，一言不合就是上代码 str1 = 'Hello JS!'; function fun1() { var str1 = 'Hello C#!'; } fun1(); alert(str1); 大家猜猜，最后会弹出来哪一句话？ 零、今天要完成浅紫色的部分 一、什么是传说中的ES6 这些定义网上一大堆，不过还是粘出来，大家可以统一看一下，简单了解了解： 1、定义 ECMAScript 6是JavaScript语言的下一代标准，在2015年6月正式发布。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 标准的制定者有计划，以后每年发布一次标准，使用年份作为标准的版本。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。也就是说，ES6就是ES2015，下一年应该会发布小幅修订的ES2016。 2、有哪些新的变化 编程语言JavaScript是ECMAScript的实现和扩展，由ECMA（一个类似W3C的标准组织）参与进行标准化。ECMAScript定义了： 语言语法 – 语法解析规则、关键字、语句、声明、运算符等。 类型 – 布尔型、数字、字符串、对象等。 原型和继承 内建对象和函数的标准库 – JSON、Math、数组方法、对象自省方法等。 ECMAScript标准不定义HTML或CSS的相关功能，也不定义类似DOM（文档对象模型）的Web API，这些都在独立的标准中进行定义。ECMAScript涵盖了各种环境中JS的使用场景，无论是浏览器环境还是类似node.js的非浏览器环境。 3、ECMAScript和JavaScript的关系 1996年11月，JavaScript的创造者Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这种语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版。 该标准从一开始就是针对JavaScript语言制定的，但是之所以不叫JavaScript，有两个原因。一是商标，Java是Sun公司的商标，根据授权协议，只有Netscape公司可以合法地使用JavaScript这个名字，且JavaScript本身也已经被Netscape公司注册为商标。二是想体现这门语言的制定者是ECMA，不是Netscape，这样有利于保证这门语言的开放性和中立性。 因此，ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现 二、var、let 与 const 块作用域 这里先说下，作用域的问题 1、ES6之前，JavaScript 并没有块级作用域，所谓的块，就是大括号里面的语句所组成的代码块，比如 function blog(bl) { if (bl) { var foo = "Blog"; } console.log(foo); } blog(true); //=> Blog 2、虽然变量变量foo 位于 if 语句的代码块中，但是 JavaScript 并没有块级作用域的概念，因此被添加到了当前的执行环境 - 即函数中，在函数内都可以访问到。 因此：var 定义的变量是函数级作用域，作用范围是在函数开始阶段和函数执行完成之前内都是存在的； 并且如果该函数内部还存在匿名函数等特殊函数,这个 var 出的变量在匿名函数中任然可以用; 3、在ES出现后，定义了一个新的命名方式 let function Blog(bool) { if (bool) { let foo = "Blog"; } else { console.log(foo); } } Blog(false); //这里会报错 Uncaught ReferenceError: foo is not defined 因此，使用 let，上述问题完全解决，let出的变量作用域是 块作用域，在离开某一代码块,该变量就会被销毁不存在 应当尽可能的避免用 var，用 let 来代替，除非你需要用到变量提升。 4、随着面向对象思维的出现，JS也出现了常量的定义 const const 与 let 的基本用法相同，定义的变量都具有块级作用域，也不会发生变量提升。不同的地方在于，const 定义的变量，只能赋值一次。 const foo='Blog'; function Blog(bool) { if (bool) { foo = "Vue"; } else { console.log(foo); } } Blog(true); //这里会报错 Identifier 'foo' has already been declared 因此const多用作不发生变化的变量定义，比如定义月份，或者，星期等:const months = []; 三、箭头函数 还记得昨天的那个小demo么，今天再说一个地方 var obj = { data: { books: "", price: 0, bookObj: null }, bind() {//**注意！**ES6 中，可以使用这种方法简写函数，等价于 bind: function () { var that = this; //普通函数 //$(".ok").click(function () { // console.log(this);//这个时候，this，就是 .ok 这个Html标签 // var bookItem = that.data.bookObj; // var _parice = $(bookItem).data("price"); // var _book = $(bookItem).data("book"); // that.data.books += _book + ","; // that.data.price += parseInt(_parice); // that.show(); //}); //箭头函数 $(".ok").click(() => { var bookItem = this.data.bookObj;//在箭头函数中，this指向的是定义函数时所在的对象 var _parice = $(bookItem).data("price"); var _book = $(bookItem).data("book"); this.data.books += _book + ","; this.data.price += parseInt(_parice); this.show(); $(".bg,.popupbox").hide(); }); }, } 在普通的click函数中 this 指向对象 $(".ok") ，因此，我们如果想要获取定义的对象中的数据（obj.data），那我们只能在 click 方法前，就去用一个 that 自定义变量来保存这个 this ， 但是在箭头函数中就不一样了，this 始终指向定义函数时所在的对象（就是 obj 对象）； 是不是更方便些！ 在Vue中，也经常使用 vue实例，或者this来获取相应的值 var vm = new Vue({ el:'#root', data:{ tasks:[] }, mounted(){ axios.get('/tasks') .then(function (response) { vm.tasks = response.data;//使用Vue实例 }) }, mounted2(){ axios.get('/tasks') .then(response => this.tasks = response.data);//箭头函数 this } }); 四、参数默认值 && rest参数 1、 在ES6中，可以像C#那样定义默认参数 function buyBook(price, count = 0.9){ return price * count; } buyBook(100); //甚至可以将方法的值赋给参数 function buyBook(price, count =GetCount()){ return price * count; } function GetCount(){ return 100; } buyBook(200); 2、不仅如此，还可以快速获取参数值 //ES6之前是这样的 function add(a,b,c){ let total = a + b + c; return total; } add(1, 2, 3); //ES6你可以这么操作，提供了 rest 参数来访问多余变量 function sum(...num) { let total = 0; for (let i = 0; i < num.length; i++) { total = total + num[i]; } return total; } sum(1, 2, 3, 4, 6); 五、ES6中的表达式 1、字符串表达式 在之前我们都是这样使用字符串表达式 var name = 'id is ' + bid+ ' ' + aid + '.' var url = 'http://localhost:5000/api/values/' + id 在ES6中我们有了新语法，在反引号包裹的字符串中，使用${NAME}语法来表示模板字符: var name = `id is ${aid} ${bid}` var url = `http://localhost:5000/api/values/${id}`//注意是反引号，英文输入下下的，Tab键上边的那个 2、还有就是多行表达式的写法 //之前我们都是这么写的 var roadPoem = '这个是一个段落' + '换了一行' + '增加了些内容' + 'dddddddddd' //但是在ES6中，可以使用反引号 var roadPoem = `这个是一个段落 换了一行 增加了些内容, dddddddddd 结尾,` 六、模块化定义 1、什么是模块化开发 模块化开发是基于一定的语法规范，通过代码书写设计，使代码耦合度降低，模块化的意义在于最大化的设计重用，以最少的模块、零部件，更快速的满足更多的个性化需求。因为有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。 用阮一峰大神的说法就是： 今天的Web网页越来越像桌面程序，网页上加载的javascript也越来越复杂，前端工程师不得不开始用软件工程的思维去管理自己的代码。Javascript模块化编程，已经成为一个非常迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。但是，Javascript不是一种模块化编程语言，它不支持"类"（class），更别提"模块"（module）了。（正在制定中的ECMAScript标准第六版将正式支持"类"和"模块"，但还需要很长时间才能投入实用 就这样，Node.js 就出现了，一个用来开发服务器端的js框架，基于commonJs的模块化。当然中间还有CMD，AMD（这个东西我还需要慢慢研究下）； 2、模块化在代码中是如何体现的呢 1、首先我们先看看普通的定义一个类是如何写的 新建一个index.js 文件 class Student { constructor(homework= []) { this.homework= homework; } study() { console.log(this.homework); } } const st = new Student ([ 'blog', 'api', 'vue' ]); st.study(); 然后新建一个index.html页面，引用该js文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script src="index.js"></script> </body> </html> 然后就可以得到结果： 这是一个很简单的，定义一个Student 类，然后定义一个方法，通过传递一个数组参数，来实例化。 这样虽然很简单，但是却无法复用，无法作为一个零件来使用。而且如果有一个地方要修改，多处都需要修改，这个面向对象的思想，没有发挥出来； 这个时候你可能会说，把这个拆成两个问题，就可以复用了，嗯~试试 2、我们把这两个文件分开 新建一个Student.js ，定义处理Student类；然后新建一个main.js方法，来调用实例化该类，就可以使用 然后在 index.html 页面里去引用这两个文件 <body> <script src="Student.js"></script> <script src="main.js"></script> </body> 当然结果是一样的，这样虽然实现了分隔开，也可以去不同的地方调用； 但是，从上文中你也看的出，如果不是自己写的代码，一般不太容易看的明白，到底是什么意思，直观性不是很好，我们将无法看到彼此间的关联（main.js 加载 Student.js), 3、我们用模块的写法设计这个调用 ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。 我们直接修改之前的代码 然后在 index.html 页面中，只需要引用 就行 4、因为浏览器现在还不能直接运行模块化代码，所以我们需要打包，打包工具有很多，比如 webpack 注意：这里用到打包概念，之后会讲到，这里就先略过，以后会讲到，步骤是 首先安装npm，或者阿里镜像 cnpm（npm其实是Node.js的包管理工具，这个在我们之后的Node.js环境配置中，自动随带安装）全局安装 rollup.js $ cnpm install --global rollup cd 当前文件夹 $ rollup main.js --format iife --output bundle.js 然后只需要引用生成的 5、这里我因为测试，已经生成好了，打包出来的bundle.js 是这样的，是不是兜兜转转又回到了之前的写法，其实ES6的模块开发，就是导入的代码块儿 (function () { 'use strict'; class TaskCollection { constructor(tasks = []) { this.tasks = tasks; } dump() { console.log(this.tasks); } } const tc = new TaskCollection([ 'blog', 'api', 'vue' ]); tc.dump(); }()); 总结来说：模块化的好处和问题 可维护性 灵活架构，焦点分离 方便模块间组合、分解 方便单个模块功能调试、升级 多人协作互不干扰 可测试性，可分单元测试； 性能损耗 系统分层，调用链会很长 模块间通信,模块间发送消息会很耗性能 其实说白了，就是JS在作为一个开发语言来说，越来越靠近了后端服务器语言。 七、每天一个小Demo 这里是一个特别特别简单的关于ES6的留言板，大家可以看一看 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h2>简易留言板</h2> <input type="text" placeholder="请输入内容" size="30" id="msg"> <input type="button" value="留言" id="btn"> <div id="msg-div"></div> <script> //let 定义块级变量 let oBtn = document.getElementById('btn'); let msg = document.getElementById('msg'); let content = document.getElementById('msg-div'); oBtn.onclick = () => { let ovalue = msg.value; let ali = document.createElement('p'); //ES6模板字符串 //多行表达式 ali.innerHTML = `${ovalue}<span style="color:red;"> 删除</span>`; var aspan = content.getElementsByTagName('p'); if (aspan.length > 0) { content.insertBefore(ali, aspan[0]); } else { content.appendChild(ali); } msg.value = ''; var oSpan = content.getElementsByTagName('span'); for (let i = 0; i < oSpan.length; i++) { //ES6箭头函数 oSpan[i].onclick = function () { content.removeChild(this.parentNode);//注意this的指向 }; } }; </script> </body> </html> 八、结语 通过这两天的学习，大家了解到了，JS的一些特性和变化：嵌套字面量的定义，面向对象的封装，类和模块化的使用，ES6的日益成熟，通过打包进行发布等等，都能表现出JS在向一个服务器端语言快速迈进的冲动，也是极大的推动了，MVVM的到来，从而实现像Node.js 这种，可以脱离浏览器环境也能运行的不一样视角。好啦，关于JS高阶，这两讲已经差不多了，当然还有其他的，大家可以自行学习了解，其实这两篇都懂的化，已经差不多了，明天咱们就开始正式进入Vue入门篇，通过引用Vue.js 实现栗子。
-
发表了文章 2018-09-04
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇：JS对象&字面量&this
缘起 书接上文《[从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书 & 我的前后端开发简史](https://www.cnblogs.com/laozhang-is-phi/p/9577805.html)》，昨天咱们说到了以我的经历说明的web开发经历的几个阶段，而且也说到了Vue系列需要讲到的知识点，今天就正式开始Code，当然今天的代码都特别简单，希望大家慢慢的学习，今天主要讲的是JS高级——关于面向对象的语法。 磨刀不误砍柴工，当然，我在写这篇之前，或者是写Vue之前，都在考虑要从何处入手，怎么写，因为大家肯定有一部分是全栈工程师，都很懂，那我写的您就可以一目十行，不用看代码，也有一部分还是专注于后端，前端只是会一些Javascript，或者Jquery，进行一些Dom操作等，最后还有一部分小伙伴是CS模式开发的，我们的QQ群我就了解到一些，所以呢，我就去各个平台看大家是如何讲Vue，或者是讲MVVM前后端分离的，嗯~~~，我也都能看懂，但是就是不想和他们一样 [ 这样会拉仇恨么哈哈 ]，当然，不是说我写的好，因为好多人都是文章直接一上来就Vue-cli搞起来，直接Hello World跑起来，然后就是搞一个TodoList，基本的就这么过去了，感觉既然是写了，就要从基础写起，所以我就想到了先从JS面向对象讲起，做个铺垫，也给大家一个缓冲。大家放心，Vue-cli，Vue-router，Axios，Vuex等等，咱们都有，还有hello world，哈哈哈哈！ 这个时候，一定会有好多小伙伴问，既然是Vue，为什么要说JS呢，请看我写的简单的代码（这是Vue定义一个组件的语法）： 不要怕看不懂，因为过一段时间就会了 <script> import myHeader from '../components/header.vue' import myFooter from '../components/footer.vue' export default { components: {myHeader, myFooter}, data() { return { id: this.$route.params.id, dat: {}, isShow: true } }, created() { this.getData() }, methods: { getData() { var that = this this.$api.get('Blog/Get/' + this.id, null, r => { r.data.bCreateTime = that.$utils.goodTime(r.data.bCreateTime) this.dat = r.data this.isShow = false }) } }, watch: { '$route'(to, from) { this.dat={} this.isShow = true this.id = to.params.id this.getData() } } } </script> 零、今天要完成浅绿色的部分 一、JS和C#一样，一切都是对象 1、关于JS函数对象方法的写法，目前有两种，不知道大家平时喜欢用哪种，请看： //这种是直接函数声明的方法 var id=9; var brandid=1; GetGoods(); GetDetail(); GetUsers(); function GetGoods() { var tmplTrips = new StringBuilder(); $('#DifCountry .cur').removeClass("cur"); //... } function GetDetail() { var tmplTrips = new StringBuilder(); $('#DifCountry .cur').removeClass("cur"); //... } function GetUsers() { var tmplTrips = new StringBuilder(); $('#DifCountry .cur').removeClass("cur"); //... } //这一种是对象的写法 Object.defineProperties(a, { "property": { set property(newValue) { console.log("set property"); return this._property = newValue; }, get property() { console.log("getgsd property"); return this._property; }, enumerable: true, configurable: true }, "name":{ value: "maotr", writable: true, enumerable: true, configurable: true } }); 2、对象包含哪些元素 包含 属性，方法，数据类型（字符串，数字，布尔，数组，对象），在C#中，随随便便就是写出几个对象，JS中也是如此。 二、定义对象的四种方式 1、通过new关键字 格式：new Object()； var obj=new Object(); obj.Name='blog'; obj.address='beijing'; 2、嵌套字面量的方法，键值对的形式 格式：objectName = {property1:value1, property2:value2,…, propertyN:valueN} 。property是对象的属性 这个我使用的较多，只要是用来POST传值的时候。 var obj = { name: 'blog', address: 'beijing', say: function () { alert("hello world"); } } 3、函数表达式，和函数声明很类似 注意！函数表达式必须先定义，再使用，有上下顺序之分；而函数声明没有。 //函数声明（定义和使用没有先后之分） function obj(){ alert('hi,我是函数声明'); } //函数表达式（必须先定义声明，再使用） var obj=function(){ //other things... alert('hi,我是函数表达式方法') } 4、构造函数声明 function Blog(title,font) { this.title = title, this.font = font, this.read = function () { alert('Hi ,Blog'); } } var blog1 = new Blog('JS学习', 100); alert(blog1.title); blog1.read(); 总体来说， 构造函数，和普通函数都是平时用的较多的写法 //构造函数 function Egperson (name,age) { this.name = name; this.age = age; this.sayName = function () { alert(this.name); } } var person = new Egperson('mike','18'); //this-->person person.sayName(); //'mike' //普通函数 function egPerson (name,age) { this.name = name; this.age = age; this.sayName = function () { alert(this.name); } } egPerson('alice','23'); //this-->window window.sayName(); //'alice' 但是要注意，构造函数和普通函数的区别： 1、在命名规则上，构造函数一般是首字母大写，普通函数则是遵照小驼峰式命名法 2、构造函数内部的this指向是新创建的person实例，而普通函数内部的this指向调用函数的对象（如果没有对象调用，默认为window） 3、构造函数内部会创建一个实例，调用普通函数时则不会创建新的对象 这个时候你一定会问了，看着两种方法很相似呀？？？ 这里引用网友的说法： 我感觉创造实例的原因是因为new ,而不是因为他是“构造函数”，构造函数的名称首字母大写是约定。浏览器并不会因为函数的首字母是否大写来判断这个函数是不是构造函数。普通函数也通过New创建也依旧可以打上构造函数的效果。如果不想用new,也可以加一个return语句。补充：构造函数返回都是对象。也可以在构造函数中显示调用return.如果return的值是一个对象，它会代替新创建的对象实例返回。如果返回的值是一个原始类型，它会被忽略，新创建的实例(对象)会被返回。 三、剪不断理还乱的 this关键字 1、这里有一个常见面试题，相信有很多人会乱： function foo() { var f2 = new foo2(); console.log(f2); //{a: 3} console.log(this); //window return true; } function foo2() { console.log(this); //foo2类型的对象 不是foo2函数 return { a: 3 }; } var f1 = foo(); console.log(f1); // true 大概思路是这样的； 1、f1调用foo()，然后foo()，又实例化对象foo2，所以，这个时候，f2就是一个foo2()的一个对象，被打印出来； 2、然后foo2()，返回值一个对象{a:3}，被赋值给了f2，被打印出来； 3、这个this，就是调用者，也就是window； 4、这个时候foo()的返回值 true，被赋值给f1，被打印出来； 2、深入理解 js this关键字 栗子1： var name = 'blog.vue'; function showName(){ return this.name; } alert(showName()); //blog.vue 大家都知道是指向window全局对象的属性（变量）name，因为调用showName()实际上就相当于window.showName(),所以this指向window对象。 这里看着有些简单，但是如果复杂点儿呢，所以这里先引入三个概念： 1、函数名是一个指向函数的指针。 2、函数执行环境（this什么时候初始化）：当某个函数第一次被调用时，会创建一个执行环境，并使用this/arguments和其他命名参数的值来初始化函数的活动对象。 3、初始化指向谁：在Javascript中,this关键字永远都指向函数(方法)的所有者。 栗子2 var name = 'The window'; var object = { name:'The object', getNameFunc:function(){ return object1.getNameFunc(); } }; var object1 = { name:'The object1', getNameFunc:function(){ return this.name; } }; alert(object.getNameFunc());//The object1 说明：object1.getNameFunc()相当于是调用object1对象的getNameFunc方法，此时会初始化this关键字，而getNameFunc方法的所有者就是object1，this指向object1，所以调用object1.getNameFunc()返回的是object1的name属性，也就是"The object1"。 3、总结 函数的几种调用方式： 1.普通函数调用 2.作为方法来调用 3.作为构造函数来调用 4.使用apply、call方法来调用 5.Function.prototype.bind方法 6.es6箭头函数 请记住一点：谁调用这个函数或方法,this关键字就指向谁。 如果你对this以及函数的嵌套字面量有一定的了解了，可以看看下边这个小Demo。 四、面向对象实例Demo 1、我简单做了一个小Demo，大家可以看看，当然也可以自己动手试试，特别简单的，就是鼠标滑过，显示按钮，弹窗。 这个代码我已经到了Git上，地址是，以后每次的小Demo我都会放上去，以备不时之需，Git代码在文末。 var obj = { data: { books: "", price: 0, bookObj: null }, init: function () { this.bind(); this.popup(); this.show(); }, show: function () { $(".content-title").html(""); $(".content-title").html(this.data.books); $(".content-price").html(this.data.price); }, bind: function () { var that = this; $(".content .content-list ").hover(function () { $(this).find(".see").show(); }, function () { $(this).find(".see").hide(); }); $(".see").click(function () { $(".bg,.popupbox").show(); that.data.bookObj = $(this); }); $(".btn3,.cancel").click(function () { $(".bg,.popupbox").hide(); }); $(".ok").click(function () { var bookItem = that.data.bookObj; var _parice = $(bookItem).data("price"); var _book = $(bookItem).data("book"); that.data.books += _book + ","; that.data.price += parseInt(_parice); that.show(); }); }, popup: function () { var box = $(".popupbox"); var _width = document.documentElement.clientWidth; var _height = document.documentElement.clientHeight; var $width = (_width - box.width()) / 2; var $height = (_height - box.height()) / 2; box.css({ "left": $width, "top": $height }); }, watch: { } }; $(function () { obj.init(); }); 这个栗子，就是我们上文中的第二节的第2个方法——通过定义嵌套字面量的形式来写的，只不过稍微复杂一丢丢（颜值不好，大家多担待）。 这个时候，你再把这个代码和上文的开篇的那个Vue写法对比下：哦！是不是有点儿相近的意思了。嗯！如果你找到了其中的类似处，那恭喜，你已经基本入门啦！ 2、单向数据传输 从上边的代码和动图你应该能看到，目前这种开发都是单向数据的（是通过Data来控制Dom的展示的），那如何通过操作Dom来控制Data呢？诶~如果你能这么想，那Vue已经事半功倍了。 其实MVVM的核心功能之一就是双向数据传输。 五、结语 今天也是简简单单的说了一下，面向对象的一些知识，还有就是如何定义嵌套字面量，this到底如何归属的，讲的稍微浅显了一些，后期还需要大量内容丰富，如果你自己写一遍，你应该已经掌握了如何定义一个对象方法了。这样可以为以后学习Vue打下基础。好啦今天的讲解暂时到这里辣~明天继续JS高级的属性获取和ES6的一些内容。 六、CODE https://github.com/anjoy8/Blog.Vue
-
发表了文章 2018-08-31
从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之十三 || DTOs 对象映射使用，项目部署Windows+Linux完整版
代码已上传Github+Gitee，文末有地址 番外：时间真快，今天终于到了系统打包的日子，虽然项目还是有很多问题，虽然后边还有很多的内容要说要学，但是想着初级基本的.Net Core 用到的基本至少就这么多了（接口文档，项目框架，持久化ORM，依赖注入，AOP，分布式缓存，CORS跨域等等），中高级的，比如在Linux高级发布，Nginx代理，微服务，Dockers等等，这个在以后的更新中会慢慢提到，不然的话，Vue就一直说不到了 [哭笑哈哈]，其实我还有很多要总结的，比如 Power BI系列（没用过的点击看看），比如C#7.0系列等文章，都在慢慢酝酿中，希望能坚持下来，不过这两个系列目前还不会写到，如果有需要用或学微软Power BI（https://docs.microsoft.com/zh-cn/power-bi/sample-customer-profitability）的，可以加QQ群联系我，我在微软项目中已经用到了。还是打算从下周一开始转战Vue的文章，当然后端也会一直穿插着，这里要说下，我们的QQ群已经有一些小伙伴了，每天可以一起交流心得和问题，感觉还是很不错的，如果你有什么问题，或者其他技术上的需要讨论，咱们的群是可以试试哟，我和其他小伙伴会一直在线给大家解答（咋感觉像一个广告哈哈，大家随意哈）。 正传：好啦，书接上文，昨天说到了《从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之十二 || 三种跨域方式比较，DTOs(数据传输对象)初探》，因为下午时间的问题，只是讲解了四种跨域方法，没有讲解完DTO，其实这个东西很简单，说白了，就是把两个实体类进行转换，不用人工手动去一一赋值，今天呢，就简单说下常见DTO框架AutoMapper的使用，然后做一个打包处理，发布到我的windows服务器里，今天刚刚买了一个Ubuntu Linux服务器，因为如果开发.Net Core，一定会接触到Linux服务器，等各种，因为它跨域了，就是酱紫。但是还没有配置好，所以会在下边留下位置，慢慢补充在Ubuntu部署的讲解。 零、今天完成右下角的深蓝色部分 一、在项目中使用添加一个案例使用AutoMapper 1、在接口 IBlogArticleServices.cs和 类BlogArticleServices.cs中，添加GetBlogDetails()方法，返回类型是BlogViewModels 请看这两个类 /// <summary> /// 博客文章实体类 /// </summary> public class BlogArticle { /// <summary> /// /// </summary> public int bID { get; set; } /// <summary> /// 创建人 /// </summary> public string bsubmitter { get; set; } /// <summary> /// 博客标题 /// </summary> public string btitle { get; set; } /// <summary> /// 类别 /// </summary> public string bcategory { get; set; } /// <summary> /// 内容 /// </summary> public string bcontent { get; set; } /// <summary> /// 访问量 /// </summary> public int btraffic { get; set; } /// <summary> /// 评论数量 /// </summary> public int bcommentNum { get; set; } /// <summary> /// 修改时间 /// </summary> public DateTime bUpdateTime { get; set; } /// <summary> /// 创建时间 /// </summary> public System.DateTime bCreateTime { get; set; } /// <summary> /// 备注 /// </summary> public string bRemark { get; set; } } ------------------------------------------------- /// <summary> /// 博客信息展示类 /// </summary> public class BlogViewModels { /// <summary> /// /// </summary> public int bID { get; set; } /// <summary>/// 创建人 /// </summary> public string bsubmitter { get; set; } /// <summary>/// 博客标题 /// </summary> public string btitle { get; set; } /// <summary>/// 摘要 /// </summary> public string digest { get; set; } /// <summary> /// 上一篇 /// </summary> public string previous { get; set; } /// <summary> /// 上一篇id /// </summary> public int previousID { get; set; } /// <summary> /// 下一篇 /// </summary> public string next { get; set; } /// <summary> /// 下一篇id /// </summary> public int nextID { get; set; } /// <summary>/// 类别 /// </summary> public string bcategory { get; set; } /// <summary>/// 内容 /// </summary> public string bcontent { get; set; } /// <summary> /// 访问量 /// </summary> public int btraffic { get; set; } /// <summary> /// 评论数量 /// </summary> public int bcommentNum { get; set; } /// <summary>/// 修改时间 /// </summary> public DateTime bUpdateTime { get; set; } /// <summary> /// 创建时间 /// </summary> public System.DateTime bCreateTime { get; set; } /// <summary>/// 备注 /// </summary> public string bRemark { get; set; } } 两个实体类字段还基本可以，不是很多，但是我曾经开发一个旅游网站的系统，有一个表字段都高达30多个，当然还有更多的，额，如果我们一个个赋值是这样的 BlogViewModels models = new BlogViewModels() { bsubmitter=blogArticle.bsubmitter, btitle = blogArticle.btitle, bcategory = blogArticle.bcategory, bcontent = blogArticle.bcontent, btraffic = blogArticle.btraffic, bcommentNum = blogArticle.bcommentNum, bUpdateTime = blogArticle.bUpdateTime, bCreateTime = blogArticle.bCreateTime, bRemark = blogArticle.bRemark, }; 所以这个方法的全部代码是： 接口层也要添加： public interface IBlogArticleServices :IBaseServices<BlogArticle> { Task<List<BlogArticle>> getBlogs(); Task<BlogViewModels> getBlogDetails(int id); } /// <summary> /// 获取视图博客详情信息 /// </summary> /// <param name="id"></param> /// <returns></returns> public async Task<BlogViewModels> getBlogDetails(int id) { var bloglist = await dal.Query(a => a.bID > 0, a => a.bID); var idmin = bloglist.FirstOrDefault() != null ? bloglist.FirstOrDefault().bID : 0; var idmax = bloglist.LastOrDefault() != null ? bloglist.LastOrDefault().bID : 1; var idminshow = id; var idmaxshow = id; BlogArticle blogArticle = new BlogArticle(); blogArticle = (await dal.Query(a => a.bID == idminshow)).FirstOrDefault(); BlogArticle prevblog = new BlogArticle(); while (idminshow > idmin) { idminshow--; prevblog = (await dal.Query(a => a.bID == idminshow)).FirstOrDefault(); if (prevblog != null) { break; } } BlogArticle nextblog = new BlogArticle(); while (idmaxshow < idmax) { idmaxshow++; nextblog = (await dal.Query(a => a.bID == idmaxshow)).FirstOrDefault(); if (nextblog != null) { break; } } blogArticle.btraffic += 1; await dal.Update(blogArticle, new List<string> { "btraffic" }); BlogViewModels models = new BlogViewModels() { bsubmitter=blogArticle.bsubmitter, btitle = blogArticle.btitle, bcategory = blogArticle.bcategory, bcontent = blogArticle.bcontent, btraffic = blogArticle.btraffic, bcommentNum = blogArticle.bcommentNum, bUpdateTime = blogArticle.bUpdateTime, bCreateTime = blogArticle.bCreateTime, bRemark = blogArticle.bRemark, }; if (nextblog != null) { models.next = nextblog.btitle; models.nextID = nextblog.bID; } if (prevblog != null) { models.previous = prevblog.btitle; models.previousID = prevblog.bID; } return models; } View Code 想了想这才是一个方法，一般的系统都会有少则几十，多则上百个这样的方法，这还不算，大家肯定遇到过一个情况，如果有一天要在页面多显示一个字段，噗！不是吧，首先要存在数据库，然后在该实体类就应该多一个，然后再在每一个赋值的地方增加一个，而且也没有更好的办法不是，一不小心就少了一个，然后被产品测试说咱们不细心，心塞哟，别慌！神器来了，一招搞定。 2、先来引入DTO讲解，以及它的原理 在学习EF的时候我们知道了ORM（Object Relational Mapping）映射，是一种对象关系的映射，对象-关系映射(ORM)系统一般以中间件的形式存在，主要实现程序对象到关系数据库数据的映射。 而Automapper是一种实体转换关系的模型，AutoMapper是一个.NET的对象映射工具。主要作用是进行领域对象与模型（DTO）之间的转换、数据库查询结果映射至实体对象。 下边的是基本原理，大家喵一眼就行： Ø 什么是DTO? 数据传输对象（DTO)(DataTransfer Object)，是一种设计模式之间传输数据的软件应用系统。数据传输目标往往是数据访问对象从而从数据库中检索数据。数据传输对象与数据交互对象或数据访问对象之间的差异是一个以不具有任何行为除了存储和检索的数据（访问和存取器）。 Ø 为什么用？ 它的目的只是为了对领域对象进行数据封装，实现层与层之间的数据传递。为何不能直接将领域对象用于数据传递？因为领域对象更注重领域，而DTO更注重数据。不仅如此，由于“富领域模型”的特点，这样做会直接将领域对象的行为暴露给表现层。 需要了解的是，数据传输对象DTO本身并不是业务对象。数据传输对象是根据UI的需求进行设计的，而不是根据领域对象进行设计的。比如，Customer领域对象可能会包含一些诸如FirstName, LastName, Email, Address等信息。但如果UI上不打算显示Address的信息，那么CustomerDTO中也无需包含这个 Address的数据”。 Ø 什么是领域对象？ 领域模型就是面向对象的，面向对象的一个很重要的点就是：“把事情交给最适合的类去做”，即：“你得在一个个领域类之间跳转，才能找出他们如何交互”。在我们的系统中Model（EF中的实体）就是领域模型对象。领域对象主要是面对业务的，我们是通过业务来定义Model的。 以上的这些大家简单看看原理即可，意思大家肯定都懂，下边开始讲解如何使用 3、在Blog.Core.Services项目中引用Nuget包，AutoMapper 和 AutoMapper.Extensions.Microsoft.DependencyInjection AutoMapper.Extensions.Microsoft.DependencyInjection，这个是用来配合依赖注入的，看名字也能看的出来吧，大家回忆下，整个项目中，都是使用的依赖注入，所以尽量不要用new 来实例化，导致层耦合。 4、基于上边原理，在接口层Blog.Core 中，添加文件夹AutoMapper，然后添加映射配置文件 CustomProfile.cs，用来匹配所有的映射对象关系 public class CustomProfile : Profile { /// <summary> /// 配置构造函数，用来创建关系映射 /// </summary> public CustomProfile() { CreateMap<BlogArticle, BlogViewModels>(); } } 大家看下F12这个CreateMap方法 public IMappingExpression<TSource, TDestination> CreateMap<TSource, TDestination>(); 第一个参数是原对象，第二个是目的对象，所以，要想好，是哪个方向转哪个，当然可以都写上，比如 CreateMap<BlogArticle, BlogViewModels>(); CreateMap<BlogViewModels, BlogArticle>(); 5、修改上边服务层BlogArticleServices.cs 中getBlogDetails 方法中的赋值，改用AutoMapper，并用构造函数注入 最终的代码是 IBlogArticleRepository dal; IMapper IMapper; public BlogArticleServices(IBlogArticleRepository dal, IMapper IMapper) { this.dal = dal; base.baseDal = dal; this.IMapper = IMapper; } public async Task<BlogViewModels> getBlogDetails(int id) { var bloglist = await dal.Query(a => a.bID > 0, a => a.bID); var idmin = bloglist.FirstOrDefault() != null ? bloglist.FirstOrDefault().bID : 0; var idmax = bloglist.LastOrDefault() != null ? bloglist.LastOrDefault().bID : 1; var idminshow = id; var idmaxshow = id; BlogArticle blogArticle = new BlogArticle(); blogArticle = (await dal.Query(a => a.bID == idminshow)).FirstOrDefault(); BlogArticle prevblog = new BlogArticle(); while (idminshow > idmin) { idminshow--; prevblog = (await dal.Query(a => a.bID == idminshow)).FirstOrDefault(); if (prevblog != null) { break; } } BlogArticle nextblog = new BlogArticle(); while (idmaxshow < idmax) { idmaxshow++; nextblog = (await dal.Query(a => a.bID == idmaxshow)).FirstOrDefault(); if (nextblog != null) { break; } } blogArticle.btraffic += 1; await dal.Update(blogArticle, new List<string> { "btraffic" }); //注意就是这里 BlogViewModels models = IMapper.Map<BlogViewModels>(blogArticle); if (nextblog != null) { models.next = nextblog.btitle; models.nextID = nextblog.bID; } if (prevblog != null) { models.previous = prevblog.btitle; models.previousID = prevblog.bID; } return models; } 6、老规矩，还是在Startup中，注入服务 services.AddAutoMapper(typeof(Startup));//这是AutoMapper的2.0新特性 7、修改BlogController.cs中的 Get(int id)方法，运行项目，断点调试，发现已经成功了，是不是很方便，你也可以反过来试一试 [HttpGet("{id}", Name = "Get")] public async Task<object> Get(int id) { var model = await blogArticleServices.getBlogDetails(id);//调用该方法 var data = new { success = true, data = model }; return data; } 8、好啦，DTOs就到这里了，我们的ConfigureServices也基本告一段落了，主要有这些 二、Blog.Core项目打包发布在IIS 1、在项目Blog.Core中，右键，发布，选择文件，相信大家都会，不会的可以联系我 注意: 这里有一个坑，还记得我们用swagger中使用的两个xml文件么，编译的时候有，但是.net core官方限制了在发布的时候包含xml文件，所以我们需要处理下 在项目工程文件WebApplication1.csproj中，增加 <PropertyGroup> <GenerateDocumentationFile>true</GenerateDocumentationFile></PropertyGroup> ---------------------------------------------------------------------- 当然我们还可以基于CLI的Publish命令进行发布，只需切换到Light.API根目录下，输入以下命令即可： dotnet publish --framework netcoreapp1.1 --output "E:\Publish" --configuration Release framework表示目标框架，output表示要发布到的目录文件夹，configuration表示配置文件，等同于和上面我们通过管理器来发布的操作 具体的大家可以自行实验 2、一定要在服务器中安装.Net Core SDK (已安装则跳过): 地址：https://www.microsoft.com/net/download 在CMD命令窗口下，输入 dotnet 查看 3、安装WindowsHosting(已安装则跳过) IIS安装服务器上安装DotNetCore.X.X.X-WindowsHosting安装成功后重启IIS服务器。根据版本选择下载 下载地址：https://www.microsoft.com/net/download/windows 4、安装AspNetCoreModule托管模块(已安装则跳过), 下载地址：点击我下载 5、应用池配置为无托管代码 （网上解释：ASP.NET Core不再是由IIS工作进程（w3wp.exe）托管，而是使用自托管Web服务器（Kestrel）运行，IIS则是作为反向代理的角色转发请求到Kestrel不同端口的ASP.NET Core程序中，随后就将接收到的请求推送至中间件管道中去，处理完你的请求和相关业务逻辑之后再将HTTP响应数据重新回写到IIS中，最终转达到不同的客户端（浏览器，APP，客户端等）。而配置文件和过程都会由些许调整，中间最重要的角色便是AspNetCoreModule，它是其中一个的IIS模块，请求进入到IIS之后便立即由它转发，并迅速重定向到ASP.NET Core项目中，所以这时候我们无需设置应用程序池来托管我们的代码，它只负责转发请求而已） 6、如果需要读写根目录权限，要更改应用池 ApplicationPoolIdentity 7、如果没有出现正常的页面，你可以打开错误日志 在发布的时候，会有一个web.config出现，通过修改web.config 启用错误日志查看详细错误信息 将stdoutLogEnabled的修改为 true，并在应用程序根目录添加 logs 文件夹 一定要手动添加logs文件，不然会不出现 8、只要本地能通过，常见的错误就是生成的文件不全导致的，大家可以自行看看，如果有问题，也可以大家一起解决 9、在IIS中启动项目，或者直接输入服务器IP地址，加端口调试 注意：这里有一个小问题，因为发布以后，默认启动页是在开发环境中重定向到了swagger，但是在服务器部署以后，不能跳转，大家打开后会这样，404找不到，不要怕， 只需要在后边加上Swagger就行了 三、项目在Liunx Ubuntu中部署（简单版，慢慢完善） 1、在腾讯云购买Ubuntu服务器后，登陆，然后进入命令页面 2、部署Linux系统中的微软环境 继续执行下面的命令 Register the trusted Microsoft signature key: curl https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > microsoft.gpg 继续 sudo mv microsoft.gpg /etc/apt/trusted.gpg.d/microsoft.gpg 根据系统版本，执行下面的命令 sudo sh -c 'echo "deb [arch=amd64] https://packages.microsoft.com/repos/microsoft-ubuntu-xenial-prod xenial main" > /etc/apt/sources.list.d/dotnetdev.list' 好了，环境部署完毕，下面我们安装 SDK 3、部署.Ne Core 环境 sudo apt-get install apt-transport-https sudo apt-get update sudo apt-get install dotnet-sdk-2.1.4 安装成功后，输入命令 dotnet 证明安装成功啦 4、安装代码上传工具，Fillzila或者winSCP都可以，（我用的是winSCP） 软件下好打开后界面是这样的，我们需要填的就是主机名（你服务器的公网IP）、用户名（服务器的用户名）、密码（你买服务器时设置的密码），那个文件协议就是SFTP，不用改变 5、登陆进去默认是 /Home/ubuntu 文件夹，我们都在这里操作 6、下面我们在服务器新建一个控制台项目测试一下 dotnet new console -o myApp 然后就在winSCP发现多了一个项目 7、然后运行我们刚刚创建的项目 cd myAppdotnet run 代码一起正常！ 8、把我们的项目发布上去，注意这里不是咱们发布的版本！不是发布的版本！ 因为我们本地发布的是windows版本的，如果把publish打包版本发布上去，会报错，各种错 所以应该是把整个解决方法提交上去，当然git就别提交了 然后呢，进入到我们要发布的接口层项目 cd Blog.Core，然后再cd Blog.Core 最后执行 dotnet run 即可 四、结语 今天暂时就先写到这里，我们学到了如何用AutoMapper来实现DTO数据对象映射，也学会了在windows下的IIS中发布项目，最后就是Linux系统中，搭建环境和运行.net core 。以后呢我还会讲到如何桌面话Linux系统，Nginx代理等等，大家拭目以待吧 五、CODE https://github.com/anjoy8/Blog.Core https://gitee.com/laozhangIsPhi/Blog.Core
-
发表了文章 2018-08-30
从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之十二 || 三种跨域方式比较，DTOs(数据传输对象)初探
更新反馈 1、博友@落幕残情童鞋说到了，Nginx反向代理实现跨域，因为我目前还没有使用到，给忽略了，这次记录下，为下次补充。 代码已上传Github+Gitee，文末有地址 今天忙着给小伙伴们提出的问题解答，时间上没把握好，都快下班了，赶紧发布：书说上文《从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之十一 || AOP自定义筛选，Redis入门 11.1》，昨天咱们说到了分布式缓存键值数据库，主要讲解了如何安装，使用，最后遗留了一个问题，同步+Redis缓存还是比较简单，如何使用异步泛型存取Redis，还是一直我的心结，希望大家有会的，可以不吝赐教，本系列教程已经基本到了尾声，今天就说两个小的知识点，既然本系列是讲解前后端分离的，那一定会遇到跨域的问题，没错，今天将说下跨域！然后顺便说一下DTOs(数据传输对象)，这些东西大家都用过，比如，在MVC中定义一个ViewModel，是基于Model实体类的，然后做了相应的变化，以适应前端需求，没错，就是这个，如果大型的实体类，一个个复杂的话会稍显费力，今天就是用一个自动映射工具——AutoMapper。 零、今天完成左下角的深紫色部分 一、为什么会出现跨域的问题 跨域问题由来已久，主要是来源于浏览器的”同源策略”。 何为同源？只有当协议、端口、和域名都相同的页面，则两个页面具有相同的源。只要网站的 协议名protocol、 主机host、 端口号port 这三个中的任意一个不同，网站间的数据请求与传输便构成了跨域调用，会受到同源策略的限制。 同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。浏览器的同源策略，出于防范跨站脚本的攻击，禁止客户端脚本（如 JavaScript）对不同域的服务进行跨站调用（通常指使用XMLHttpRequest请求）。 所以说我们在web中，我们无法去获取跨域的请求，常见的就是无法通过js获取接口（这里要说下我的以前使用的经验：在同源系统下，前端js去调用后端接口，然后后端C#去调取跨域接口，这是我以前采用的办法，但是前后端分离，这个办法肯定就是不行了，因为那时候已经没有了前后端之分，是两个项目），所以我们只要合理使用同源策略，就可以达到跨域访问的目的。 二、如何达到跨域的目的——三种跨域方式 之JsonP 我自己建立了一个一个静态页面，用来模拟前端访问，具体如下步骤： 1、新建一个Html页面，使用Jquery来发送请求（文件在项目的WWW文件夹下，大家可以自己下载，或者Copy下边代码）。 一共三种跨域方法 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Blog.Core</title> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <style> div { margin: 10px; word-wrap: break-word; } </style> <script> $(document).ready(function () { $("#jsonp").click(function () { $.getJSON("http://localhost:58427/api/Login/jsonp?callBack=?", function (data) { $("#data-jsonp").html("数据: " + data.value); }); }); $("#cors").click(function () { $.get("http://localhost:58427/api/Login/Token", function (data, status) { $("#status-cors").html("状态: " + status); $("#data-cors").html("数据: " + data); }); }); }); </script> </head> <body> <h3>通过JsonP实现跨域请求</h3> <button id="jsonp">发送一个 GET </button> <div id="status-jsonp"></div> <div id="data-jsonp"></div> <hr /> <h3>添加请求头实现跨域</h3> <hr /> <h3>通过CORS实现跨域请求，另需要在服务器段配置CORE</h3> <button id="cors">发送一个 GET </button> <div id="status-cors"></div> <div id="data-cors"></div> <hr /> </body> </html> 注意：这里一定要注意jsonp的前端页面请求写法，要求很严谨 2、将这个页面部署到自己的IIS中（拷贝到文件里，直接在iis添加该文件，访问刚刚的Html文件目录就行） 3、在我们的项目 LoginController 中，设计Jsonp接口，Core调用的接口我们已经有了，就是之前获取Token的接口GetJWTStr [HttpGet] [Route("jsonp")] public void Getjsonp(string callBack, long id = 1, string sub = "Admin", int expiresSliding = 30, int expiresAbsoulute = 30) { TokenModel tokenModel = new TokenModel(); tokenModel.Uid = id; tokenModel.Sub = sub; DateTime d1 = DateTime.Now; DateTime d2 = d1.AddMinutes(expiresSliding); DateTime d3 = d1.AddDays(expiresAbsoulute); TimeSpan sliding = d2 - d1; TimeSpan absoulute = d3 - d1; string jwtStr = BlogCoreToken.IssueJWT(tokenModel, sliding, absoulute); //重要，一定要这么写 string response = string.Format("\"value\":\"{0}\"", jwtStr); string call = callBack + "({"+response+"})"; Response.WriteAsync(call); } 注意：这里一定要注意jsonp的接口写法，要求很严谨 4、点击”通过JsonP实现跨域请求“按钮，发现已经有数据了，证明Jsonp跨域已经成功，你可以换成自己的域名试一试，但是Cors的还不行 三、如何达到跨域的目的——三种跨域方式 之添加请求头实现跨域 这里我没有写到代码里，是在一般处理程序里之前用到的 后端 public void ProcessRequest(HttpContext context) { //接收参数 string uName = context.Request["name"]; string data = "{\"name\":\"" + uName + "\",\"age\":\"18\"}"; //只需在服务端添加以下两句 context.Response.AddHeader("Access-Control-Allow-Origin", "*"); //跨域可以请求的方式 context.Response.AddHeader("Access-Control-Allow-Methods", "POST,GET"); context.Response.Write(data); } 前端 function ashxRequest() { $.post("http://localhost:5551/ashxRequest.ashx", { name: "halo" }, function (data) { for (var i in data) { alert(data[i]); } }, "json") } 大家感兴趣可以自己实验下。有问题请留言 四、如何达到跨域的目的——三种跨域方式 之 高效CORS 1、前端的代码在jsonp的时候已经写好，请往上看第二节，后端接口也是Token接口 剩下的就是配置跨域了，很简单！ 2、在ConfigureServices中添加 #region CORS services.AddCors(c => { //↓↓↓↓↓↓↓注意正式环境不要使用这种全开放的处理↓↓↓↓↓↓↓↓↓↓ c.AddPolicy("AllRequests", policy => { policy .AllowAnyOrigin()//允许任何源 .AllowAnyMethod()//允许任何方式 .AllowAnyHeader()//允许任何头 .AllowCredentials();//允许cookie }); //↑↑↑↑↑↑↑注意正式环境不要使用这种全开放的处理↑↑↑↑↑↑↑↑↑↑ //一般采用这种方法 c.AddPolicy("LimitRequests", policy => { policy .WithOrigins("http://localhost:8020", "http://blog.core.xxx.com","")//支持多个域名端口 .WithMethods("GET", "POST", "PUT", "DELETE")//请求方法添加到策略 .WithHeaders("authorization");//标头添加到策略 }); }); #endregion 基本注释都有，大家都能看的懂，就这么简单！ 3、在需要跨域的controller上，增加特性（本文因为在LoginController，所以在这个控制器里），注意名称要写对 LimitRequests [Produces("application/json")] [Route("api/Login")] [EnableCors("LimitRequests")]//就是这里 public class LoginController : Controller { //.... } 4、好啦运行调试，一切正常 至此，跨域的问题已经完成辣 五、其他跨域方法补充 nginx是一个高性能的web服务器，常用作反向代理服务器。nginx作为反向代理服务器，就是把http请求转发到另一个或者一些服务器上。 通过把本地一个url前缀映射到要跨域访问的web服务器上，就可以实现跨域访问。 对于浏览器来说，访问的就是同源服务器上的一个url。而nginx通过检测url前缀，把http请求转发到后面真实的物理服务器。并通过rewrite命令把前缀再去掉。这样真实的服务器就可以正确处理请求，并且并不知道这个请求是来自代理服务器的。 简单说，nginx服务器欺骗了浏览器，让它认为这是同源调用，从而解决了浏览器的跨域问题。又通过重写url，欺骗了真实的服务器，让它以为这个http请求是直接来自与用户浏览器的。 这样，为了解决跨域问题，只需要动一下nginx配置文件即可。 六、结语 三种办法其实都能达到目的，但是优缺点也很明显 1、手动创建JSONP跨域 优点：无浏览器要求，可以在任何浏览器中使用此方式 缺点：格式要求很严格，只支持get请求方式，请求的后端出错不会有提示,造成不能处理异常 2、添加请求头实现跨域 优点：支持任意请求方式,并且后端出错会像非跨域那样有报错，可以对异常进行处理 缺点：兼容性不是很好，IE的话 <IE10 都不支持此方式 虽然CORS的方法有点儿类似请求头，但是封装，兼容性，灵活性都要好的很多，强烈推荐。 七、初探DTOs 请看以下实体类 //数据库实体类 public class Author { public string Name { get; set; } } public class Book { public string Title { get; set; } public Author Author { get; set; } } //页面实体类 public class BookViewModel { public string Title { get; set; } public string Author { get; set; } } //api调用 BookViewModel model = new BookViewModel { Title = book.Title, Author = book.Author.Name } 上面的例子相当的直观了，我们平时也是这么用的基本，但是问题也随之而来了，我们可以看到在上面的代码中，如果一旦在Book对象里添加了一个额外的字段，而后想在前台页面输出这个字段，那么就需要去在项目里找到每一处有这样BookViewModel转换字段的地方，这是非常繁琐的。另外，BookViewModel.Author是一个string类型的字段,但是Book.Author属性却是Author对象类型的，我们用的解决方法是通过Book.Auther对象来取得Author的Name属性值，然后再赋值给BookViewModel的Author属性，这样看起行的通，但是想一想，如果打算在以后的开发中把Name拆分成两个-FisrtName和LastName,我的天呐！我们得去把原来的ViewModel对象也拆分成对应的两个字段，然后在项目中找到所有的转换，然后替换。 那么有什么办法或者工具来帮助我们能够避免这样的情况发生呢？AutoMapper正是符合要求的一款插件。 只需一键操作，就能一劳永逸，解决所有问题，然后通过依赖注入，快速使用： //AutoMapper自动映射 //Mapper.Initialize(cfg => cfg.CreateMap<BlogArticle, BlogViewModels>()); //BlogViewModels models = Mapper.Map<BlogArticle, BlogViewModels>(blogArticle); BlogViewModels models = IMapper.Map<BlogViewModels>(blogArticle);//就这一句话完全搞定所有转换 今天因为时间的关系，没有说到Automapper，明天再见吧~ 八、CODE https://github.com/anjoy8/Blog.Core https://gitee.com/laozhangIsPhi/Blog.Core
滑动查看更多
暂无更多信息
-
发表了文章
2018-09-13
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性
-
发表了文章
2018-09-05
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十六 ║ Vue前篇：ES6初体验 & 模块化编程
-
发表了文章
2018-09-04
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇：JS对象&字面量&this
-
发表了文章
2018-08-17
从壹开始前后端分离【 .NET Core2.0 Api + Vue 2.0 + AOP + 分布式】框架之一 || 前言
-
发表了文章
2018-08-17
从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之二 || 后端项目搭建
-
发表了文章
2018-08-17
从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之三 || Swagger的使用 3.1
-
发表了文章
2018-08-20
从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之四 || Swagger的使用 3.2
-
发表了文章
2018-08-21
从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之五 || Swagger的使用 3.3 JWT权限验证，两种方法
-
发表了文章
2018-08-22
从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之六 || API项目整体搭建 6.1 仓储模式
-
发表了文章
2018-08-23
从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之七 || API项目整体搭建 6.2 轻量级ORM
-
发表了文章
2018-08-24
从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之八 || API项目整体搭建 6.3 异步泛型仓储+依赖注入初探
-
发表了文章
2018-08-27
从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之九 || 依赖注入IoC学习 + AOP界面编程初探
-
发表了文章
2018-08-28
从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之十 || AOP面向切面编程浅解析：简单日志记录 + 服务切面缓存
-
发表了文章
2018-08-29
从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之十一 || AOP自定义筛选，Redis入门 11.1
-
发表了文章
2018-08-30
从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之十二 || 三种跨域方式比较，DTOs(数据传输对象)初探
-
发表了文章
2018-08-31
从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之十三 || DTOs 对象映射使用，项目部署Windows+Linux完整版
滑动查看更多
暂无更多信息