vue | 易学教程

Core + Vue 后台管理基础框架6——业务日志

阅读更多关于 Core + Vue 后台管理基础框架6——业务日志

1、前言　　上一篇，我们讲了审计日志，重点是重点业务表的审计字段。还有一种系统审计，就是重点业务对象的改动记录，是以审计日志表中的记录形式存在的。这种审计记录一般需要精确定位到某个终结点，最合适的实现方式就是操作过滤器。 2、实现　　自定义操作过滤器： public class LogAttribute : ActionFilterAttribute { public string LogName { get; private set; } public LogAttribute(string logName) { this.LogName = logName; } public override async Task OnActionExecutionAsync(ActionExecutingContext context, ActionExecutionDelegate next) { await base.OnActionExecutionAsync(context, next); var user = context.HttpContext.RequestServices.GetService<CurrentUser>(); var log = new SysOperationLogDto { ClassName = context.Controller

Vuejs使用笔记 --- 框架

阅读更多关于 Vuejs使用笔记 --- 框架

这两天学了vuejs的模板，于此纪录一下。这是整个大文件夹的配置，现在我们看到的所有文件都不需要去管，说要关注也只需要关注“index.html” "index.html"里面是这样的： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Questionnaire</title> <link href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"> </head> <body> <app></app>  </body> </html> 里面的标签<app>就是我们整个页面的component，vuejs将页面的各个部分作为component搭建起来，整个页面就是一个大的component。那么app在哪儿呢？在src文件夹下：有一个叫做App.vue的文件，就是存放名为app的vue实例的地方。如果需要在一个文件中注册多个Vue对象，可以在js中如下定义（vuejs官网代码，局部注册）： var Child = Vue.extend({ /* ... */ }) // 定义一个名为Child的组件

Vue(九)

阅读更多关于 Vue(九)

组件基础基本示例这里有一个 Vue 组件的示例： // 定义一个名为 button-counter 的新组件 Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>' }) 组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 <button-counter> 。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用： <div id="components-demo"> <button-counter></button-counter> </div> new Vue({ el: '#components-demo' }) 因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data 、 computed 、 watch 、 methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。组件的复用你可以将组件进行任意次数的复用： <div id="components-demo"> <button-counter><

vue生命周期

阅读更多关于 vue生命周期

　　今天来说说vue的生命周期，这也是vue最基本要知道的，面试是也会常被提到的一个问题，现在开始吧！ vue生命周期常用的8个阶段：　　 beforeCreate阶段：vue实例的挂载元素el和数据对象data都是undefined，还没有开始初始化。　　 created阶段：vue是咧的数据对象data有了，可以访问里面的数据和方法，未挂载到DOM，el还没有。　　 beforeMount阶段：vue实例的el和data都初始化了，但是挂载之前为虚拟的dom节点。　　 mounted阶段：vue实例挂载到真实DOM上，就可以通过DOM获取DOM节点。　　 beforeUpdate阶段：响应式数据更新时调用，发生在虚拟DOM打补丁之前，适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器　　 updated阶段：虚拟DOM重新渲染和打补丁之后调用，组成新的DOM已经更新，避免在这个钩子函数中操作数据，防止死循环。　　 beforeDestory阶段：实例销毁前调用，实例还可以用，this能获取到实例，常用于销毁定时器，解绑事件。　　 destroyed阶段：实例销毁后调用，调用后所有事件监听器会被移除，多有的子实例都会被销毁 vue生命周期详细解说：　　我们在谈到Vue生命周期的时候，首先需要创建一个实例，也就是在new Vue(

vue登录页面

阅读更多关于 vue登录页面

参考项目： https://github.com/PanJiaChen/vue-admin-template 1.复制项目登录页面，和utils文件。下载依赖数据。用cnmp install XX --save安装 node-sass ，sass，fibers，sass-loader 2.添加登录图标，图标网站： https://element.eleme.cn/#/zh-CN/component/icon 参考代码： <i class="el-icon-s-custom"></i> 　　 3.重新 axios方法。 4.解决跨域问题：不同的域名之间进行请求通信，会触发跨域问题。在当前页面下请求其他域名的接口，同来更新当前域名的数据，然后页面还是当前域名。跟超链接跳转不是一回事。所以vue和django会存在跨域问题，如何解决：安装 django-cors-headers ，在setting的 INSTALLED_APPS 中添加 ' MIDDLEWARE_CLASSES中添加2个中间件最后添加上一些跨域的设置 CORS_ALLOW_CREDENTIALS = True CORS_ORIGIN_ALLOW_ALL = True CORS_ORIGIN_WHITELIST = ( '*' ) CORS_ALLOW_METHODS = ( 'DELETE',

Vue(七)

阅读更多关于 Vue(七)

事件处理监听事件可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。示例： <div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> </div> var example1 = new Vue({ el: '#example-1', data: { counter: 0 } }) 结果：略事件处理方法然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。示例： <div id="example-2">  <button v-on:click="greet">Greet</button> </div> var example2 = new Vue({ el: '#example-2', data: { name: 'Vue.js' }, // 在 `methods` 对象中定义方法 methods: { greet: function (event) { // `this`

[vue ]滚动视图解决ElementUI NavMenu 导航菜单过长显示的问题

阅读更多关于 [vue ]滚动视图解决ElementUI NavMenu 导航菜单过长显示的问题

记录一下工作需求　　导航菜单过长的时候会溢出，需要一个像 Tabs 标签页一样的滚动视图容器，可以左右滚动内部视图。解决方法　　由于时间问题，所以直接将 Tabs 源码抽取出来使用。　　这里要做一些特殊处理，不允许 NavMenu 导航菜单滚动视图容器内的元素换行。如： /deep/.el-menu--horizontal>.el-menu-item,.el-menu--horizontal>.el-submenu { float: none !important; display: inline-block !important; } 使用方法如下： <scrollView> <div> // 一些不换行内容 </div> </scrollView> 下面是抽出来的源码，稍稍改造了下，左右箭头做了自适应垂直居中，把 elementui的样式抽取出来以及修改了类名，减少依赖。 scrollView.vue　 <script> import { addResizeListener, removeResizeListener } from "element-ui/src/utils/resize-event"; const firstUpperCase = str => { return str.toLowerCase().replace(/( |^)[a-z]/g, L

vue模糊查询

阅读更多关于 vue模糊查询

模糊查询匹配结果  <div class="search-wrapper"> <input type="text" placeholder="中文/拼音/首字母" @keyup="autoInput()"/> </div>  <div class="auto-list-con" v-if="autoIsShow"> <div class="list-name" v-for="item in autoData" @click="selectCityName(item.sta_name)">{{item.sta_name}} </div> </div> autoInput(){//输入框搜索 const str=event.target.value.toLocaleLowerCase().replace(/\s/g,"");//搜索字符串去空格 this.autoData.length=0; this.autoIsShow=true; if(str===''){//如果为空，不展示搜索结果面板 this.autoIsShow=false; return; } this.Stations.forEach((item,index)=>{ //模糊匹配 const name=item.sta_name; const ename=item

Vue自定义日历组件

阅读更多关于 Vue自定义日历组件

今天给大家介绍Vue的日历组件，可自定义样式、日历类型及支持扩展，可自定义事件回调、Props数据传输。线上demo效果示例 Template： <Calendar :sundayStart="true" :calendarType="1" :markDate="markDate" :markDateClass="markDateClass" :agoDayPrevent="agoDayPrevent" :futureDayPrevent="futureDayPrevent" @choseDay="choseDay" @changeMonth="changeMonth"> </Calendar> script： data() { return{ calendarClass: 'cal_common', chooseDate: '', showCalendar: 1, markDate: ['2019/02/13','2019/02/22'], markDateClass: [ {date:'2019/02/20',className:"mark1"}, {date:'2018/02/21',className:"mark2"} ], agoDayPrevent: '1549728000', futureDayPrevent: '2551024000', } }, methods

在vue中使用Echarts[官方5分钟上手ECharts]

阅读更多关于在vue中使用Echarts[官方5分钟上手ECharts]

在vue中使用Echarts[官方5分钟上手ECharts] （本文根据‘官方5 分钟上手 ECharts’文档，示例如何在vue项目中使用）官方教程地址 [官方]5 分钟上手 ECharts <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title>  <script src="echarts.min.js"></script> </head> <body>  <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子",

订阅 vue