模板

Ray Template 技术栈Ray Template 是一个基于 vue3.x vite4.x naive-ui pinia tsx 开发的中后盾模板。 解决了什么问题其实市面上曾经有很多很优良的中后盾模板了，为什么还要思考反复去造轮子呢？其实市面上已有的优良模板，都会有一个共同点：轻便、冗余、难二开。不论是 vue-element-admin vben-admin，都有这个问题，对于老手而言或者是须要二次开发的程序员来说，上手难度不低。 作为前端开发，必定都有写过后盾管理系统。本人写的话，又很吃力；用他人的二开，有些时候又难以下手。包含我自己也是这样，也改过他人的模板，印象特地粗浅。 所以，决定本人用最新的技术栈去写一个可能让老手疾速上手、程序员可能疾速二次开发的中后盾模板。 设计思路全新的技术：都采纳全新的技术框架与构建工具解耦式的设计：data method view 的拆散保姆级正文：外围代码逐行正文，配套残缺的文档 疾速上手分包获取代码并且装置以来后，文件构造与支流的分包形式大同小异，所以这里不做赘述。并且每个包下基本上都有一 README.md 文件，自行浏览即可理解该包的根本应用。 如何取得一个洁净的页面找到 src/views/demo 文件夹后，删除找到 src/router/modules/demo 文件夹后，删除关上页面通过上述步骤后，你就能失去一个洁净的模板了。就是这么简略，不须要去关注其余的无用页面剔除、无用组件的剔除。 开发浏览 新增菜单 与 新增路由，依据文档走一遍，就能取得一个新的页面。 模板配置模板反对一些零碎级别的配置属性，在 src/app-config 文件夹下。也能够点击 浏览文档 查看如何配置。 二次开发解耦数据与办法，是该模板的核心思想。所以你能够低成本的进行二次开发。举个栗子举例：AppMenu，关上 src/layout/components/Menu.tsx 文件 数据： import { useMenu } from '@/store'const menuStore = useMenu()const modelMenuOptions = computed(() => menuStore.options)办法： // 获取菜单选中回调import { useMenu } from '@/store'const menuStore = useMenu()const { changeMenuModelValue } = menuStore每当菜单选中后，都会触发该办法。并且 changeMenuModelValue 办法也是整个模板的外围函数，不论是 url menuKey 等批改，都会触发该办法渲染对应页面。如果不称心以后菜单组件，能够自行替换后，配置上对应的办法，即可实现菜单组件的替换。模板采纳分块模式切割，也就是页面上的每个宰割区域都是一个对应组件，并且实现思路都是贯彻这个准则，如果须要替换或者更改，仅需依照例子思路二开即可。 ...

大家好，我是小悟 兄弟姐妹们，对于软著申请的话题，早前曾经写过几篇文章的介绍了，包含软著的申请流程攻略和踩到被打回补正的坑，有趣味的能够翻翻之前的文章，搜关键字【软著】就有。 私信的小伙伴来自各行各业，有在读的学生，其中不乏研究生、有搞软件开发的企业、有职工须要升职评职称等等。 对咱们行业来说，软著有什么作用显而易见。对于在读学生来说，可能对加学分、凭奖学金、保研、简历装璜有帮忙。对于企业来说，可能对高企申请、利用市场上架有帮忙。对于职场人士来说，可能对职称评定、升职加薪有帮忙。但最重要的一点是，能爱护你的软件成绩。 尽管之前说过那么多，但还是有很多小伙伴私信发问。都2023年了，软著申请这件事最好还是本人来，隐衷不裸露，还能省一大笔钱。这两天我又提交了一份软著申请，往年的第一份，按之前的教训，不出意外，应该是能过的，哈哈。资料曾经邮寄进来了，等着官网收到后更新状态。 不好意思，废话说的有点多哈，接下来请看我完完整整的一次申请软著的过程。登录【中国版权保护核心】，有账号的间接登录，没账号的注册一个。抉择计算机软件著作权注销申请R11。 依据理论状况，抉择角色是申请人或者代理人，我是本人给本人申请，所以抉择申请人。而后一步步填写信息，要依据你的软件填写，每个软件不一样，填写的内容天然也不一样。 这里要留神软件全称，须要和程序甄别资料、文档甄别资料外面波及到的所有名称统一，肯定要统一哦。 程序甄别资料要求：提交注销软件源程序间断的前30页和间断的后30页（前、后各间断30页能够按开发工夫排序，也能够按性能主次等自定义排序），每页不少于50行。若源程序整体不到60页，应提交全副源程序。 文档甄别资料要求：提交注销软件的任何一种文档的间断的前30页和间断的后30页，每页不少于30行。若整个文档不到60页，应提交整个文档。文档是指用来形容程序的内容、组成、设计、性能规格、开发状况、测试后果及应用办法的文字材料和图表等，如程序设计说明书、流程图、用户手册等。 依照要求都填写好后就能够提交了，如果不想马上提交能够保留草稿，一旦提交就无奈撤回了，或者说撤回会十分麻烦，不是个别的麻烦。 肯定要认真查看，查看再查看，像你考试那么认真查看后再交卷哦。提交胜利后能够间接打印或者保留为PDF格局到本地再打印，这一份就是申请表。 打印机打印材料，包含程序资料、文档资料、身份证正反面复印件和申请表。我是本人在家里打印的，因为想到申请的软著比拟多，于是花巨款买了一台打印机，的确不便了不少，如果申请的多的话，比起去打印店也划算的多了。 总结一下就是，须要提交纸质材料的有四份资料，程序资料、文档资料、身份证正反面复印件和申请表。须要签名的有两个中央，身份证复印件和申请表第三页，切记切记，两处签名有一处没签就会被打回补正。 筹备好这四份资料后，最好文档资料，也就是应用说明书和申请表用别针固定，而后依照程序资料、文档资料、身份证复印件、申请表的程序层叠搁置。 这样辨别开不是硬性规定哈，只是比拟简洁难看，想想软著核心核查的老师在核查的时候也会比拟不便不是，印象总归更好些，就像考试写一手好字是一个情理，有印象分。 而后就到了最初一步，分割快递邮寄，倡议邮政，很快也比拟平安，周末邮寄领券十分便宜，超出你的设想。邮寄进来后，也就实现了，就安心等着就好了。 申请了这么多软著，我都是应用模板来实现的，节省时间，十分快。程序资料也就是源码替换就很简略，把要申请的软件的代码复制替换就完事了。而后文档资料也就是应用说明书再批改成申请的软件相干的内容就好了。 模板内容包含源程序和应用阐明模板，记得外面的格局不要变，内容要替换成和你软件相干的，特地是页眉页脚，页码不要动。个别只用到这两个就能够了。 有个小伙伴在获取到模板后感觉没有用，为什么没用，因为他就想什么都不必改，最好能给他一份完完整整的间接拿去就能提交的，这是不可能的，每个人申请的软件各有千秋，要依据本人的软件性能批改内容。 您的一键三连，是我更新的最大能源，谢谢 山水有相逢，来日皆可期，谢谢浏览，咱们再会 我手中的金箍棒，上能通天，下能探海 上一篇：不会写代码？也不懂技术？3分钟搭建电商cps零碎搞副业

在上一篇基于vue的页面配置化的实现（上）——模板开发中，咱们实现了模板开发。 本篇次要分两个局部： 如何实现让经营在编辑器里配置这些参数，以及在编辑器里实时预览模板的成果呢依据模板js和配置参数在服务端生成页面编辑器 先看下成果，最左侧是页面信息，如果有多个页面，则显示多栏。两头是实时预览成果，右侧则是配置datasource的中央。思考到页面可能依据链接参数有不同体现，所以正上方是反对自定义链接参数以便于实时预览。右上角则是进行保留公布操作。 设计在本地模板开发阶段，咱们最初拿到了以下几个打包后的文件： 接下来就是怎么应用这些js和json 实现首先咱们近程拉取模板信息，实现过程不赘述，假如咱们曾经拿到了上面几个要害信息 home.js：模板的页面组件settings.js：配置面板组件datasource.json：模板配置字段config.json：模板根底信息左侧页面列表依据模板 config.json 咱们能够遍历出页面的路由信息 右侧配置面板近程加载配置面板组件这里的目标最终是要实现配置面板settings跟页面的datasource绑定在一起，实现通过配置面板来批改datasource。 封装一个近程tLoader的办法，拉取近程组件 function loadJS(url = '') { if (!url) return if (!loadJS.cache) loadJS.cache = {} if (loadJS.cache[url]) return Promise.resolve() return new Promise((resolve, reject) => { _loadjs( url, () => { loadJS.cache[url] = 'cached' resolve() }, () => { console.error(`${url}加载失败`) reject(new Error(`${url}加载失败`)) } ) }) function _loadjs(url, fn, fail) { var script = document.createElement('script') script.src = url script.async = true script.onload = fn script.onerror = fail ;(document.body || document.head).appendChild(script) }}export default { requestCache: {}, componentCache: {}, getComponent(name, cdn) { return this.componentCache[name] }, async load(name, cdnPath) { let component = this.getComponent(name) if (component) return component let request = '' let url = '' if (!this.requestCache[name]) { url = cdnPath // url += '?t=' + new Date().getTime() this.requestCache[name] = request = loadJS(cdnPath) } else request = this.requestCache[name] return await request.then((res) => { component = window[name] this.componentCache[name] = component return component }).catch(err => { console.log('加载失败', url) console.error(err) }) }}定义组件 ...

在上一篇文章浅谈前端可视化编辑器的实现中，简略介绍了一下可视化编辑器的实现形式。用户通过利落拽组件的形式布局页面，而后通过vue的render函数将页面生产进去。这种形式对于高度自定义页面的业务场景是比拟适宜的，比如说公布一篇文章资讯，只须要配一个富文本，再加一些组件或者动画丰盛一下，经营同学就能够间接公布一篇文章。 但对于一些业务严密的页面，如果还要经营同学一个个利落组建拼凑页面，会非常浪费时间，并且因为特定业务场景去开发对应的业务组件过大，会造成编辑器组件库的臃肿。 目标心愿可能针对可复用的繁多业务，抽离成页面模板，配置相干参数就能够生产不同页面，经营不须要关怀外部逻辑，只须要依据不同场景去生产产品。如下图所示： 这种根底页面还是比拟常见的，有一些外围业务性能。如果每次产出这种页面须要提需要给开发，是比拟浪费时间的。咱们开发把这业务抽成一个模板，经营同学只须要关注几点： 出图并配置图片配置流动（抽奖）素材和流动id配置游戏链接比起【下需要-需要评审-设计-开发-测试-上线】这种流程，页面模板在第二次流动上线的时候省去了下需要、需要评审、开发和测试这几个过程。性能在第一次上线的时候就验证过了，所以后续不必开发和测试染指，极大的晋升了生产力。 原理vue 的核心思想之一——组件化 设计思路 本地模板开发 业务代码开发本地预览模板上传编辑器加载模板 编辑器近程加载模板参数配置实时预览并公布服务端生产 生成代码生产部署页面模板在这一环节咱们的目标是要把页面打包成一个组件，比方首页打成home.js这样的组件，而后挂载到VueRouter上。 目录构造|-- build // 构建脚本|-- build-entry // 用于寄存依据模板生成的文件|-- dist // 我的项目打包进去的js|-- src // 业务代码|-- webpack.config.js // 构建命令一、模板开发在src下新建 pageA/home.vuehome.vue：这里指代页面，用于挂载在router上。datasource：全局注入的配置项，提供给经营侧批改的参数都放在该对象保护 <template> <div class="home"> <img :src="datasource.home.img" /> <p>{{ datasource.title }}</p> </div></template><script>export default { data() { return { datasource: window.datasource // 配置数据 } }}</script> 新建pageA/datasource.json用于定于配置项的内容，凋谢给用户调整参数。 { "home": { // home 页面所需参数 "img": "可配置图片", "title": "可配置的题目", },} 新建pageA/config.json定义模板信息和模板的路由信息，routes 次要为了定义模板的路由的信息，前面有场景须要读取该字段 { "category": "流动", "title": "游戏下载H5", "author": "yl", "description": "一般H5页面点击下载游戏(包含假抽奖)", "routes": [ { "pageType": "h5", "path": "/", "name": "home", "component": "home", "meta": { "title": "首页", } } ]}新建pageA/setting.vue定义了可配置参数，须要一个入口提供给用户配置，所以须要开发配置面板，为了能在编辑器里让用户操作datasource。 ...