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
鼠标停留,图片自动滚动效果
鼠标停留,图片自动滚动效果
效果展示 如果你无法看到该视频,那么可能你的电脑不支持该文件格式。 实现代码: <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
Vue实训-音乐后台管理
Vue实训-音乐后台管理
Vue实训-音乐后台管理 音乐后台管理系统,使用Vue+ElementUI+Echars开发,拥有用户登录、后台首页、用户管理、歌曲管理、专辑管理、评论管理、系统设置等模块。 项目地址 Gitee:https://gitee.com/pengsirs/vue GitHub:https://github.com/pengsirs/Vue 实验目的 熟悉Vue开发工具,学会安装Vue-CLI脚手架工具。 学会使用Vue-CLI脚手架工具在自己的电脑上建立项目,并运行调试。 使用Vue+ElementUI便携一个后台管理系统 使用Vue整合Echars 实验内容 使用Vue-CLI脚手架工具,用命令的方法搭建一个Web项目 使用Vue创建音乐后台管理系统,使用Vue+ElementUI+Echars开发,拥有用户登录、后台首页、用户管理、歌曲管理、专辑管理、评论管理、系统设置等模块并使用ElementUI构建页面 使用Vue中的Router(路由)进行编写页面的跳转等功能 项目使用 下载并解压源码 打开命令窗口:windows使用win+R然后输入cmd,macOS使用Command+空格输入终端即可 安装依赖: npm install 打开终端后cd到项目目录输入下面的命令运行项目 npm run serve 直到提示网址链接即可复制链接到浏览器 项目详细过程及步骤 安装nodejs并配置环境变量 安装vue脚手架 打开命令行工具,通过npm方式全局安装@vue/cli脚手架,具体命令如下: npm install @vue/cli@3.10 –g 安装完成后,检测是否安装成功,使用如下命令来查看vue-cli的版本号: vue –V(或者vue --version) 创建项目 使用命令创建创建 vue create 项目名 使用可视化UI界面创建 在命令窗口输入Vue UI即可 项目目录结构 config 配置目录,包括端口号等 node_modules npm 加载的项目依赖 src/assets 放置图片等文件 src/components 项目组件 src/router 项目路由配置 src/views 项目页面 src/App.vue 项目入口文件 src/main.js 项目核心文件 README.md 项目的说明文档 安装并引入ElementUI 通过npm安装ElementUI,命令如下: npm i element-ui -S 在main.js中进行全局引入 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; 新建vue模板 点击VScode编辑器右下角设置-配置用户代码片段-新建代码片段,粘贴下列代码 { "Print to console": { "prefix": "vue", "body": [ "<template>", " <div class=\"\">$0</div>", "</template>", "", "<script>", "export default {", " components:{},", " data(){", " return {", " }", " },", " created(){},", " mounted(){},", " watch:{},", " computed:{},", " methods:{},", "}", "</script>", "<style scoped>", "</style>" ], "description": "A vue file template" } } 保存文件为vue.json 使用方法:在后缀为.vue的文件中输入vue回车即可生成代码模板 创建登录模块 在views目录下新建LoginView.vue文件,输入vue回车生成代码模板 引入ElementUI中的表单组件和表单验证 编写页面CSS样式,完成效果如下图显示 配置路由 在src/router/index.js文件配置登录页面路由 { path: '/', redirect: "/login" }, { path: '/login', name: 'login', component: LoginView }, 创建首页模块 在views目录下新建HomeView.vue文件,输入vue回车生成代码模板 引入ElementUI中的布局容器 el-header:顶栏容器。 el-aside:侧边栏容器。 el-main:主要区域容器。 在顶栏容器中添加面包屑导航组件,用户头像以及下拉菜单组件 在主要区域容器内引入走马灯组件以及Echars 在侧边栏增加菜单并配置首页路由以及子路由 配置如下: { path: '/home', name: 'home', component: HomeView, children: [{ path: "/home/index", component: () => import ("../views/LunboView.vue") }, { path: "/home/UserList", component: () => import ("../components/User/UserList.vue") }, { path: "/home/SingeList", component: () => import ("../components/Singe/SingeList.vue") }, { path: "/home/CommentList", component: () => import ("../components/Comment/CommentList.vue") }, { path: "/home/AlbumList", component: () => import ("../components/Album/AlbumList.vue") }, { path: "/home/Setting", component: () => import ("../views/SettingView.vue") }], }, { path: '/home', redirect: "/home/index" }, 页面效果如下 整合Echars 在命令窗口输入npm i echars -S命令安装Echars 新建组件输入vue回车生成代码模板 在组件中引入Echars import * as echarts from "echarts"; 配置需要的图表(在Echars官网复制完整代码并修改即可) 创建用户管理、歌曲管理、专辑管理、评论管理、系统设置等模块
 2022-10-30
秋天小纸条-网页版
秋天小纸条-网页版
抖音很火的秋天手写小纸条,随便搞个网页版玩玩 源码在下面下载,上传即用
 2022-10-13
JS和jQuery实时获取窗口大小
JS和jQuery实时获取窗口大小
看效果 直接获取 var Height = $(window).height(); var Width = $(window).width(); console.log("初始大小" + Height + "," + Width); JQuery获取 先引入jquery文件,这里直接忽略掉了 // Jquery方法 $(window).resize(function() { var Height = $(window).height(); var Width = $(window).width(); console.log("Jquery实时获取的" + Height + "," + Width); }) JS获取 // js方法 window.addEventListener('resize', getWindowInfo); function getWindowInfo() { var Height = document.body.offsetHeight; var Width = document.body.offsetWidth; console.log("JS实时获取的" + Height + "," + Width); }
 2022-8-16
好看的个人主页HTML引导页
好看的个人主页HTML引导页
程序介绍 模板搬的 样式图我截的 链接没改 作者没改 支持响应式 功能自测 源码下载 下载地址:好看的个人主页HTML引导页模板下载地址 其他问题 原文来自:AE博客
 2022-8-3
Emlog实现App+小程序(Brief免费版)
Emlog实现App+小程序(Brief免费版)
程序简介 Emlog小程序,Brief免费版,适配App+QQ小程序+微信小程序 目前仅适用于EmlogPro 1.4+ 安装教程 注意:一定要先在博客后台开启API(系统-设置-API接口-开启API) 导入项目到HBuilderX 修改setting.js内的配置信息 发行到您需要的平台 HBuilderX插件 除上图外还需安装内置终端(可选择) 详细安装教程 详细视频教程:https://v.douyin.com/2gjKjQF/ app发行视频教程:https://v.douyin.com/2gRAEJ8/ 源码地址 https://github.com/pengsirs/Brief-Dev https://gitee.com/pengsirs/Brief-Dev 一键安装命令: git clone https://github.com/pengsirs/Brief-Dev 其他问题 QQ:6283354(实在不会可以联系我,有偿) 交流群:138778739
 2022-7-28

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

登录