前端组件

一、前言 在使用spring boot做后台系统，vue做前端系统，给客户开发一套系统时候，其中用到了图片上传和显示的功能。 二、环境 前端：vue 前端组件：tinymce 后台：spring boot:2.2.3 三、正文 在客户开发一套门户管理系统时，集成了tinymce组件，用于编辑内容，springboot不同于其他项目。 是集成tomcat的，文件和图片是不能直接访问的。所以我在做集成富文本编辑器时，需要处理图片的问题。 这个问题跟上传头像等显示图片的功能是类似的。下面记录详情步骤代码。 第一步：集成tinymce组件 <!--引入tinymce组件--> import Tinymce from '@/components/Tinymce' <!--启用tinymce组件--> <el-form-item> <el-button type="primary" :loading="btnLoading" @click="onSubmit" >保 存</el-button> </el-form-item> <!--核心代码--> <template> <div class="page-container"> <div class="page-title-section"> </div> <div class="page-content-section"> <div

我经常会思考这样一个问题，宇宙之大，生命之少，我们每个人能够出现在这个世界上都是一个奇迹。如果每一天我们都是做些重复的事情，没有做有挑战的事情，没有做打破常规的事情，没有做引领方向的事情，赋予我们的奇迹岂不是一种莫大的浪费？二、一叶蔽目不见泰山人的认知和决策非常容易收到接触到的信息影响。世界是巨大的，行业是广阔的，但是在前端行业说话的那些人是只是其中的一小部分。这些有话语权的人多大厂背景，多人团队，上层框架，体系工程化。然而实际上在整个行业，大多数公司前端开发人员就1～2个人，大多数公司前端开发项目都非常都简单，还有很多公司给政府机构做项目，甚至需要兼容IE8浏览器。于是多少这样都公司在技术选型的时候被所谓的流行、热门所误导。留下一个又一个烂摊子。这些看似群体的思想其实仅仅是部分上层群体的思想。《乌合之众》这本书有言，个人一旦融入群体，他的个性变会被湮没，群体思考开始占据绝对统治地位。我们应该有着自己的个性，有着自己的坚持。但是，不幸的是，大多数的人缺乏坚定的自我而被群体淹没。其实呢，很多人的内心都是希望可以告别每天做重复的事情，去做有挑战的事情，去做打破常规的事情，去做引领方向的事情！但是，放到现实世界，却不知不觉将自己封闭在狭隘的日常工作中，为了认同与安全感追随群体意识，随波逐流。成为了乌合之众，平庸之辈。所以，最重要的是，如何在浮躁喧嚣环境中保持坚定的自我

跨平台一直是老生常谈的话题，cordova、ionic、react-native、weex、kotlin-native、flutter等跨平台框架的百花齐放，颇有一股推倒原生开发者的势头。本文将对当下跨平台移动开发的现状、实现原理、框架的选择等进行深度解析。 为什么我们需要跨平台开发？ 本质上，跨平台开发是为了增加代码复用，减少开发者对多个平台差异适配的工作量，降低开发成本，提高业务专注的同时，提供比web更好的体验。通俗了说就是：省钱、偷懒。 本篇主要以react-native、weex、flutter，结合资讯展望，深入聊聊当前跨平台移动开发的实现原理、现状与未来。至于为什么只讲它们，因为对比ionic、phoneGap，它们更于 “naive”。 一、原理与特性 目前移动端跨平台开发中，大致归纳为以下几种情况： react native、weex均使用Java作为编程语言，目前Java在跨平台开发中，可谓占据半壁江山，大有“一统天下”的趋势。 kotlin-native开始支持 iOS 和 Web 开发，（kotlin已经成为android的一级语言）也想尝试“一统天下”。 flutter是Google跨平台移动UI框架，Dart作为谷歌的亲儿子，毫无疑问Dart成为flutter的编程语言，如下图，作为巨头新生儿，在flutter官网也可以看出，flutter同样“心怀天下

背景： 初始Vue.js，了解组件时Vue的主要构成部分，但组件内部的作用域是相对独立的部分，组件之间的关系一般如下图： 组件A与组件B、C之间是父子组件，组件B、C之间是兄弟组件，而组件A、D之间是隔代的关系 那么对于这些不同的关系，本文主要分享了他们之间可以采用的几种数据通信方式。例如Props、$emit/$on、Vuex等。可以根据使用场景选择适合的使用方式。 一、Prop / $emit 1、Prop是你可以在组件上注册的一些自定义特性。当一个值传递给一个Prop特性的时候，它就变成了那个组件实例的一个属性。父组件向子组件传值，通过绑定属性来向子组件传入数据，子组件通过Props属性获取对应数据 //父组件 <template> <div> <child :title="title"></child> </div> </template> <script> import Child from './child.vue' export defalut{ name:'parent', data(){ return{ title:'我是父组件给的' } }, components:{ Child } } </script> //子组件 <template> <div> <p>{{title}}</p> </div> </template> <script> export

form介绍 　　form组件常用于对用户输入的内容做效验，比如效验用户是否输入，输入的长度和格式是否正确。如果用户的输入有错误就会在页面相对应的位置，显示出与之对应的错误信息。 orm组件的主要功能如下:①生成页面可用的HTML标签，②对用户提交的数据进行校验，③保留上次输入内容。 form组件能直接完成以下的三步操作： 　　1、前端页面搭建 　　　　　 ---------> 渲染页面 　　2、将数据传输到后端做效验 　　 ---------> 效验数据 　　3、展示错误信息 　　　　　　 ---------> 展示信息 forms组件基本用法 1.写一个基于forms.From的类 from django import forms # 引入Django中的forms模块 class LoginForm(forms.Form): username = forms.CharField(max_length=8,min_length=3) # 用户名最长八位最短三位 password = forms.CharField(max_length=8,min_length=5) # 密码最长八位最短五位 email = forms.EmailField() # email必须是邮箱格式 2.form基本使用 from app01 import views #1.将需要校验的数据

React Bootstrap React-Bootstrap 是一个可重复使用的 React 组件库，也是最受欢迎的前端框架之一。目前同样是在为1.0.0版本而积极开发中。 Ant Design 🇨🇳 遵循 Ant Design 规范，React Ant Design 是一个开箱即用的高质量 React 组件，包含一系列的组件和 demo 。 Semantic UI React Semantic UI 的官方 React 集成。目前已被 Netflix 和亚马逊采用。 MATERIAL-UI 一组实现了 Google 的 Material Design 全新设计语言的 React 组件。在 GitHub 上有超过5万个 star ，最受欢迎的 React 组件库之一。 Blueprint Blueprint是一个基于React的Web工具组件库。 它针对在现代浏览器和IE11中运行的桌面应用程序构建复杂，数据密集的Web界面。 React Suite 🇨🇳 React Suite 是一套 React 组件库，为后台产品而生。由 HYPERS 前端团队与 UX 团队打造，主要服务于公司大数据产品线。 Polaris shopify.com(国外著名电商网站)自家的React组件库 Elemental UI 一个轻量的React组件库，注意跟饿了么的 Element 区分开

1.移动App第1天 什么是混合移动App开发【重点】 苹果上的软件是如何开发出来的：使用的是 OC、或者使用Swift这门语言 安卓平台上的软件又是如何开发出来的：使用安卓相关的语言开发的，Java，安卓的控件进行开发 苹果和安卓平台上共有的软件是如何开发出来的：腾讯招两套开发人员【开发组】，手机京东 前端移动 App（Application）开发技术，去开发手机端的应用程序； 前端的混合移动App开发技术，并没有使用 苹果 或 安卓 官方推荐的 开发平台和开发方式，而是抛弃了 官方提供的方式，使用 前端的独有的技术进行移动App开发体验； 什么是移动App开发：通俗的理解，就是把开发Web网站的技术（HTML+CSS+JS），通过某种方式，移植到移动App开发上进行使用，这种利用Web开发技术进行移动端开发体验的方式，叫做混合移动App开发！ 关于移动App开发，需要知道的几个概念： 原生开发：它的英文单词是（NativeApp）,指的就是使用 IOS、Android 官方提供的工具、开发平台、配套语言进行 手机App开发的方式； 混合开发：（HybirdApp）就是使用前端已有的技术，HTML + CSS + JS ，然后再搭配一些相关的打包编译技术，就能够开发出一个手机App，安装到手机中进行使用； 什么是App：App是（Application的缩写），意思是

之前跟朋友讨论前端未来发展方向的时候，朋友有提到移动端，当时我觉得3D也将会是一个方向，于是就去专攻了一下webgl、three.js这些技术并从事这方面的开发。 时光荏苒，现在纵观一下前端开发的实况，感觉就像是下图所示的这样： 难易度上个人感觉：pc < m < 3d ； 然而针对具体的技术，要达到一定的高度都是需要一定的时间积累和研究的； 我是一个对未知事物充满好奇和兴趣的人，在提高已知技术栈水平的同时，我很愿意去接触一些从未尝试过的技术，所以移动开发将会是我下一个接触的点。 一、混合开发的优势 7、8年前移动智能设备逐渐进入大众的生活，安卓/ios开发瞬间火热； 而今天，移动开发仍然在web开发领域占据一定的地位，但是技术选型上却有了新的选择-混合开发。 混合开发利用现有的web技术----html、css、js来开发app，优点如下： 1 拥有web/h5的灵活性,支持随时热更新(增量更新); 同时拥有原生app的性能。 2 编写一次，多端通用,跨平台,体验一致。 3 组件可以modules和compontents化，开发效率及复用率高。 4 支持扩展: 可直接调用原生组件(需要按规则封装),原生也可以反过来和混合页面交互；当然也可以调用三方modules组件模块。 5.开发成本相比原生app来说大大降低。 在对比了几套流行的解决方案之后，我选择了React

　　最近面试了一些公司，趁着疫情期间，总结一波。大家可以看看 会有用的。 webpack 1、webpack中entry和output的作用 webpack中的entry标记入口文件，它可以是一个字符串（单入口）或者一个数组（多入口），output用来标记输出，主要有两个属性 path和 filename。其次就是publicPath 和chunkFileName 2、webpack中loader和plugin的作用 loader 用于加载某些资源文件。 因为webpack 本身只能打包commonjs规范的js文件，对于其他资源例如 css，图片，或者其他的语法集，比如 jsx， coffee，是没有办法加载的。 这就需要对应的loader将资源转化，加载进来。loader是用于加载的，它作用于一个个文件上。 plugin 用于扩展webpack的功能。它直接作用于 webpack，扩展了它的功能。当然loader也是变相的扩展了 webpack ，但是它只专注于转化文件。而plugin的功能更加的丰富，而不仅局限于资源的加载。 3、webpack中可以有哪些优化 1、优化Loader的文件搜索范围，指定include、exclude 2、把Babel编译过的文件缓存起来 loader: 'babel-loader?cacheDirectory=ture' 3、懒加载、按需加载

A类问题 1 请谈谈微信小程序主要目录和文件的作用？ project.config.json 项目配置文件，用得最多的就是配置是否开启https校验； App.js 设置一些全局的基础数据等； App.json 底部tab, 标题栏和路由等设置； App.wxss 公共样式，引入iconfont等； pages 里面包含一个个具体的页面； index.json (配置当前页面标题和引入组件等)； index.wxml (页面结构)； index.wxss (页面样式表)； index.js (页面的逻辑，请求和数据处理等)； 2 请谈谈wxml与标准的html的异同？ 都是用来描述页面的结构； 都由标签、属性等构成； 标签名字不一样，且小程序标签更少，单一标签更多； 多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式 WXML仅能在微信小程序开发者工具中预览，而HTML可以在浏览器内预览 组件封装不同， WXML对组件进行了重新封装， 小程序运行在JS Core内，没有DOM树和window对象，小程序中无法使用window对象和document对象。 3 请谈谈WXSS和CSS的异同？ 都是用来描述页面的样子； WXSS 具有 CSS 大部分的特性，也做了一些扩充和修改； WXSS新增了尺寸单位，WXSS 在底层支持新的尺寸单位 rpx； WXSS 仅支持部分 CSS