Emlog通用测试App
Emlog通用测试App
测试App 本app提供给Emlog站长提供测试App,可在测试版App查看自己的网站编译成App之后的效果 本app在使用之前需要站长先开启站点Api(后台管理-系统-设置- API设置) 配置详情: App下载地址 App端直接访问:Emlog通用App http://cdn.hkiii.cn/EmlogApp.apk 正式版链接: https://www.hkiii.cn/?post=200 App内配置 首先进入页面需要校验域名(只需设置一次) 成功后自动跳转到首页 EmlogApp详情页 EmlogApp详情页底部 正式版编译请联系
 2022-12-29
nginx配置跨域
nginx配置跨域
跨域 web 领域开发中,经常采用前后端分离模式。这种模式下,前端和后端分别是独立的 web 应用程序,例如:后端是 Java 程序,前端是 React 或 Vue 应用。 各自独立的 web app 在互相访问时,势必存在跨域问题。解决跨域问题一般有两种思路: CORS 在后端服务器设置 HTTP 响应头,把你需要运行访问的域名加入加入 Access-Control-Allow-Origin 中。jsonp 把后端根据请求,构造 json 数据,并返回,前端用 jsonp 跨域。这两种思路,本文不展开讨论。需要说明的是,nginx 根据第一种思路,也提供了一种解决跨域的解决方案。 nginx配置跨域 宝塔配置方法:打开网站设置-配置文件-在合适地地方加入以下配置 add_header 'Access-Control-Allow-Origin' '$http_origin' ; add_header 'Access-Control-Allow-Credentials' 'true' ; add_header 'Access-Control-Allow-Methods' 'PUT,POST,GET,DELETE,OPTIONS' ; add_header 'Access-Control-Allow-Headers' 'Content-Type,Content-Length,Authorization,Accept,X-Requested-With' ; 大功告成,跨域问题就这么解决了,相对于前端解决跨域,这个方法就简单快捷多了
 2022-12-28
鼠标停留,图片自动滚动效果
鼠标停留,图片自动滚动效果
效果展示 如果你无法看到该视频,那么可能你的电脑不支持该文件格式。 实现代码: <div class="outDiv"> <div class="innerDiv" data-img='true'> <img src="http://aimg8.dlszywz.com/xys/copy/mobile_pic/1/128_7471581637206058.jpg?x-oss-process=image/resize,m_lfit,w_360,limit_0" class="targetImg" /> </div> </div> <script type="text/javascript"> $(function() { new LongPicShow({}); }) </script> * { padding: 0px; margin: 0px; list-style-type: none; } .outDiv { width: 500px; height: 500px; margin: 20px auto; } .innerDiv { width: 500px; height: 500px; position: relative; background: #fff; overflow: hidden; } .innerDiv img { width: 100%; } 关键Js代码获取 https://www.hkiii.cn/content/templates/brief/js/demo.js
 2022-12-26
Vuex使用方法
Vuex使用方法
一、Vuex简述 Vuex其实就是一个状态管理工具,所谓的状态,就是数据,通过这个工具进行管理某些数据。当多个组件都需要同一个数据时,可以将这个数据交给Vuex进行统一的管理,组件可以直接引用这个数据,避免了组件间繁琐的层层传递的情况。 二、Vuex核心 Vuex有五大核心,state,getter,mutation,action,module。state用来存放要被管理的数据,getter相当于computed计算属性,mutation中用来定义要修改state中数据的方法,action中用来定义异步的一些方法,module可以将多个store分成一个一个的模块。 三、Vuex使用 在vue项目中使用Vuex时,需要先安装Vuex插件,并且注册,一般情况下都会在,在src下新创建一个store文件夹,下边有一个index.vue,在这个文件中创建store容器实例.。 安装插件 npm install vuex --save 注册插件 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) 创建vuex实例,在vuex上提供了一个Store()方法,用来创建实例,将其命名为store,意为仓库的意思。在Vuex.Store()中传一个配置对象,配置对象中包括上述的五大核心,如果用不到,也可以不做配置。 const store = new Vuex.Store({ state: {num: 2}, // 存放数据 getters: {}, // 计算属性 mutations: {}, // 修改state中数据的一些方法 actions: {}, // 异步方法 modules: {} // store模块 }) export default store 在入口文件main.js中引入store。 // main.js import Vue from 'vue' import App from './App' import store from './store/index.vue' // 简写 import store from './store' Vue.config.productionTip = false new Vue({ el: '#app', store: store, // es6 简写 直接写 store 属性名和变量名相同 render: h => h(App) }) 在页面中如何使用store中的数据?在使用vuex中的数据之前,先使用import导入写好的store。组件中在插值表达式中使用$store.state.num获取store中num的数据。 {{ $store.state.num }} 四、mapState,mapMutations,mapGetters,mapActions映射 // 先从vuex中结解构出四个方法 import {mapState, mapMutations, mapGetters, mapActions} from 'vuex' // 在computed计算属性中映射state数据和getters计算属性 computed: { ...mapState('模块名', ['name', 'age']) ...mapGetters('模块名', ['getName']) } // 在methods方法中映射mutations和actions方法 methods: { ...mapMutations('模块名', ['方法名1','方法名2']) ...mapActions('模块名', ['方法名1','方法名2']) } 这些数据和方法都可以通过this来调用和获取 以上就是vuex大致的使用方法 作者:辰漪 链接:https://www.jianshu.com/p/dcbaceb4464e
 2022-12-26
Brief主题解决内容过多图片宽度被压缩
Brief主题解决内容过多图片宽度被压缩
有问题的样子 建议直接翻到文章尾部下载最新的CSS文件 修改bug 在style.css第216行改成即可 .content-img { width: 35%; height: 150px; padding: 10px; flex-grow: 0; flex-shrink: 0; } 然后在第246行添加 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; 第256行 .content-list-cz-phone { width: 60%; flex-direction: column; padding: 10px 5px 5px 5px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } 也可以直接下载css文件替换 下载地址:https://www.hkiii.cn/content/templates/brief/css/style.css
 2022-12-23
Vue分页之Element UI触底加载
Vue分页之Element UI触底加载
实现后的效果 el-scrollbar触底加载数据 先绑定ref 代码如下: <el-scrollbar ref="scrollbar" v-loading="fullscreenLoading"> <!--对于自定义指令v-loading,只需要绑定Boolean即可。默认状况下,Loading 遮罩会插入到绑定元素的子节点,通过添加body修饰符,可以使遮罩插入至 DOM 中的 body 上。--> </el-scrollbar> 在mounted生命周期渲染方法 mounted() { this.scrollbar(); //el-scrollbar触底事件 }, 最后写一个方法 scrollbar() { this.$refs.scrollbar.handleScroll = () => { var wrap = this.$refs.scrollbar.wrap; this.$refs.scrollbar.moveY = (wrap.scrollTop * 100) / wrap.clientHeight; this.$refs.scrollbar.moveX = (wrap.scrollLeft * 100) / wrap.clientWidth; let poor = wrap.scrollHeight - wrap.clientHeight; if ( poor == parseInt(wrap.scrollTop) || poor == Math.ceil(wrap.scrollTop) || poor == Math.floor(wrap.scrollTop) ) { console.log("已经触底了"); } }; },
 2022-12-22
uniapp、Vue同时监听多个数据
uniapp、Vue同时监听多个数据
使用场景 具体实现 computed:{ many(){ const { msv, tdv, dfv, jgv, zhv } = this return { msv, tdv, dfv, jgv, zhv } }, }, watch: { many(newValue, oldValue) { if(newValue.msv&&newValue.tdv&&newValue.dfv&&newValue.jgv&&newValue.zhv){ this.stat = '已评价' } }, }, 说明 msv, tdv, dfv, jgv, zhv等数据为表单数据,默认为空 通过监听计算这些值的变化,若全部不为空则显示已评价
 2022-12-20

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

登录