怎样做同城配送网站,营销企业有哪些,山东省水利建设市场信用信息平台网站,经营网站的备案整理的一些前端知识点
ECMAScript和JavaScript是什么关系
ECMAScript 和 JavaScript 的关系是#xff0c;前者是后者的规格#xff0c;后者是前者的一种实现
#xff08;另外的 ECMAScript 方言还有 JScript 和 ActionScript#xff09;。日常场合#xff0c;这两个词是…整理的一些前端知识点
ECMAScript和JavaScript是什么关系
ECMAScript 和 JavaScript 的关系是前者是后者的规格后者是前者的一种实现
另外的 ECMAScript 方言还有 JScript 和 ActionScript。日常场合这两个词是可以互换的
参阅https://es6.ruanyifeng.com/#docs/intro什么是Babel
Babel 是一个广泛使用的 ES6 转码器可以将 ES6 代码转为 ES5 代码
从而在老版本的浏览器执行。这意味着你可以用 ES6 的方式编写程序又不用担心现有环境是否支持什么是Promise
Promise 是异步编程的一种解决方案比传统的解决方案——回调函数和事件——更合理和更强大。
它由社区最早提出和实现ES6 将其写进了语言标准统一了用法原生提供了Promise对象。
所谓Promise简单说就是一个容器里面保存着某个未来才会结束的事件通常是一个异步操作的结果。
从语法上说Promise 是一个对象从它可以获取异步操作的消息。
Promise 提供统一的 API各种异步操作都可以用同样的方法进行处理。什么是Node.js
Node.js
Ryan Dahl在2009年创造了Node.js。
它是基于Google的V8 JavaScript解释引擎在Chrome浏览器里它负责执行客户端的JavaScript代码。
与其它语言不同的是Node.js内置了处理网络请求和响应的函数库
所以你不需要单独的服务器Apache、Ngix或者其他依赖。
Node.js虽然很新但是很快就获得了极大的追捧。在很多的大公司都有在使用例如MicrosoftYahooLinkedIn和PayPal。有一些工具给 Node.js 些许优势NPM-包管理器。 NPM 允许你安装和管理依赖设置配置变量定义脚本和其他若干年前JavaScript 被认为限制很多有一些边缘技术但是他的主战场还是浏览器。
Node.js 已经改变了这一感觉并井喷出了很多 JavaScript 项目你可以在任何地方使用 JavaScript浏览器服务器终端桌面甚至嵌入式系统这使得 JavaScript 无处不在Node.js 还是有如下几条优势的
更少的依赖
更小更快的解释器
应用永久在线Node.js 应用持久运行只需要启动一次
事件驱动无阻塞 I/O参阅
Node.js 命令行程序开发教程
https://www.runoob.com/w3cnote/node-js-command-develop.html
2015年需要了解的前端框架和语言
https://www.runoob.com/w3cnote/2015-frameworkds-need-to-learn.html如何让js控制台打印彩色日志
console.log() 这个应该是最常用的
console.error() 输出错误信息 会以红色显示
console.assert(bool,”info”) 如果bool为false 打印出info 否则不打印
console.warn() 打印警告信息 会以黄色显示
console.info() 打印一般信息console.log(%c lte-admin %c 退出系统ok %c,background:blue ; padding: 1px; border-radius: 3px 0 0 3px; color: #fff,background:red ; padding: 1px; border-radius: 0 3px 3px 0; color: #fff,background:transparent);/*
参阅:
https://blog.csdn.net/tietth/article/details/68943460
https://blog.csdn.net/kids_calamus/article/details/82719926
*/什么是npm和yarn
node.js 自带了npmnpm是node.js的包管理器类似于java世界的mavennpm默认的镜像源访问很慢一般都使用国内的镜像源
方法1安装淘宝cnpm
npm install -g cnpm --registryhttps://registry.npm.taobao.org
方法2: 把npm的默认镜像源改为淘宝的镜像
npm config set registry https://registry.npm.taobao.orgnpm常用命令
安装所有依赖 npm install
安装单个依赖法1 npm install 依赖名 --save
安装单个依赖法2 npm -S install 依赖名运行项目 npm run dev (vue2项目)
运行项目 npm run serve (vue3项目)
打包项目 npm run buildYarn 是一个可以替代npm的node.js包管理器,它比npm/cnpm安装依赖更快
官网https://yarn.bootcss.com/docs/getting-started/npm全局安装yarn
npm install -g yarn --registryhttps://registry.npm.taobao.orgnpm命令对应的yarn命令
https://yarn.bootcss.com/docs/migrating-from-npm/yarn设置淘宝源
yarn config set registry https://registry.npm.taobao.org -g
yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -gyarn常用命令
安装所有依赖 yarn install
安装某个依赖 yarn add [package]
清除本地缓存 yarn cache clean
删除一个依赖包 yarn remove [package]
运行项目 yarn run serve
打包项目 yarn run build如何生成npm打包分析报告
npm run build -- --report
生成 dist 文件夹 下面的 report.html 文件
参阅:
https://blog.csdn.net/mrhaoxiaojun/article/details/108519930
https://blog.csdn.net/qq_39523111/article/details/108790661如何快速预览npm run build生成的dist包
1. npm install -g serve
2. serve -s dist
(-s意思是将其架设在SPA模式下)如何快速删除npm生成的node_modules
1. 安装 rimraf
npm install rimraf -g 2. 使用命令删除
rimraf node_modules // 也可以删除其它文件夹或文件如何让img等比缩放显示在div里面
img{
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}什么是REST
REST全称是Representational State Transfer中文意思是 表述性状态转移REST原则
资源与URI/统一资源接口/资源的表述/资源的链接/状态的转移---
资源的表述
客户端获取的只是资源的表述而已。
资源在外界的具体呈现可以有多种表述(或成为表现、表示)形式在客户端和服务端之间传送的也是资源的表述而不是资源本身。
例如文本资源可以采用html、xml、json等格式图片可以使用PNG或JPG展现出来。
资源的表述包括数据和描述数据的元数据例如HTTP头Content-Type 就是这样一个元数据属性。
那么客户端如何知道服务端提供哪种表述形式呢?
答案是可以通过HTTP内容协商客户端可以通过Accept头请求一种特定格式的表述
服务端则通过Content-Type告诉客户端资源的表述形式---GET
安全且幂等
获取表示
变更时获取表示缓存
200OK - 表示已在响应中发出
204无内容 - 资源有空表示
301Moved Permanently - 资源的URI已被更新
303See Other - 其他如负载均衡
304not modified- 资源未更改缓存
400 bad request- 指代坏请求如参数错误
404 not found- 资源不存在
406 not acceptable- 服务端不支持所需表示
500 internal server error- 通用错误响应
503 Service Unavailable- 服务端当前无法处理请求---
POST
不安全且不幂等
使用服务端管理的自动产生的实例号创建资源
创建子资源
部分更新资源
如果没有被修改则不过更新资源乐观锁
200OK- 如果现有资源已被更改
201created- 如果新资源被创建
202accepted- 已接受处理请求但尚未完成异步处理
301Moved Permanently- 资源的URI被更新
303See Other- 其他如负载均衡
400bad request- 指代坏请求
404 not found- 资源不存在
406 not acceptable- 服务端不支持所需表示
409 conflict- 通用冲突
412 Precondition Failed- 前置条件失败如执行条件更新时的冲突
415 unsupported media type- 接受到的表示不受支持
500 internal server error- 通用错误响应
503 Service Unavailable- 服务当前无法处理请求---
PUT
不安全但幂等
用客户端管理的实例号创建一个资源
通过替换的方式更新资源
如果未被修改则更新资源乐观锁
200 OK- 如果已存在资源被更改
201 created- 如果新资源被创建
301Moved Permanently- 资源的URI已更改
303 See Other- 其他如负载均衡
400 bad request- 指代坏请求
404 not found- 资源不存在
406 not acceptable- 服务端不支持所需表示
409 conflict- 通用冲突
412 Precondition Failed- 前置条件失败如执行条件更新时的冲突
415 unsupported media type- 接受到的表示不受支持
500 internal server error- 通用错误响应
503 Service Unavailable- 服务当前无法处理请求---
DELETE
不安全但幂等
删除资源
200 OK- 资源已被删除
301 Moved Permanently- 资源的URI已更改
303 See Other- 其他如负载均衡
400 bad request- 指代坏请求
404 not found- 资源不存在
409 conflict- 通用冲突
500 internal server error- 通用错误响应
503 Service Unavailable- 服务端当前无法处理请求vue前端如何对接基于stompjs的websocket通信
可以使用stompjs 或者 socketjs-client来发送或订阅消息
npm install sockjs-client
npm install stompjs参阅:git地址前端vuehttps://gitee.com/lddjava/vue-socket-demo.git后端服务https://gitee.com/lddjava/vue-service-websocket.git
SPA单页应用实现浏览器跳转时的顶部进度条效果
可以使用NProgress组件实现页面跳转时出现在浏览器页面顶部的进度条
安装nprogress依赖
$ npm install --save nprogress 或者
$ yarn add nprogress//用法
NProgress.start();
NProgress.done();//导入
import NProgress from nprogress
import nprogress/nprogress.cssrouter.beforeEach((to, from, next) {NProgress.start()next()
})router.afterEach(() {NProgress.done()
})参阅
https://blog.csdn.net/wn1245343496/article/details/82151273vue项目中如何使用cookie存取数据
可以使用js-cookie组件
安装依赖npm install js-cookie --savevue项目中如何使用MD5摘要
可以使用js-md5组件
安装依赖npm install js-md5 --savevue项目中如何使用JSX
JSX Javascript XML即在 Javascript 里面写 XML
在 Vue 中使用 JSX需要使用 Babel 插件安装依赖npm install vue/babel-preset-jsx vue/babel-helper-vue-jsx-merge-props配置 babel.config.jsmodule.exports {presets: [vue/cli-plugin-babel/preset,[vue/babel-preset-jsx,{injectH: false}]]}这里展示在 Vue 中用jsx的render渲染一些基础内容包括纯文本、动态内容、标签使用、自定义组件的使用
这些跟我们平时使用单文件组件类似
render() {return (divh3内容/h3{/* 纯文本 */}phello, I am Gopal/p{/* 动态内容 */}phello { this.msg }/p{/* 输入框 */}input /{/* 自定义组件 */}myComponent/myComponent/div);
}参阅
https://www.jianshu.com/p/9616745a8d0a在vue中如何监听浏览器窗口大小变化 首先页面初始化mounted的时候
通过 document.body.clientWidth 和 document.body.clientHeight
来获取到浏览器的宽和高
然后通过 window.onresize 来监听浏览器窗口的变化
在这里来改变我们的变量宽和高即可。
注意created()的时候不行因为此时document还没有生成templatesection classp-10h1 {{ screenWidth }} × {{ screenHeight }} /h1/section
/template
scriptexport default {data() {return {screenWidth: ,screenHeight: };},mounted() {this.screenWidth document.body.clientWidth;this.screenHeight document.body.clientHeight;window.onresize () {return (() {this.screenWidth document.body.clientWidth;this.screenHeight document.body.clientHeight;})();};}}
/scriptstyle langscss
/style参阅
https://blog.csdn.net/ju__ju/article/details/103389208
https://www.cnblogs.com/jin-zhe/p/10506238.htmlSPA项目如何实现全屏和退出全屏效果
可以使用screenfull组件安装依赖
npm install --save screenfull在需要的页面引用
import screenfull from screenfull核心方法
screenfull.toggle()具体代码templatespan clickclickFullscreen全屏/span
/templatescriptimport screenfull from screenfullexport default{name: screenfull,data(){return {isFullscreen: false}},methods:{clickFullscreen(){if (!screenfull.isEnabled) {this.$message({message: you browser can not work,type: warning})return false}screenfull.toggle()}}}
/script参阅
https://www.cnblogs.com/wjw-/p/11550617.html常用的前端图表开发库有哪些
Viser是Alibaba开发的图表工具-基于AntV-G2可视化引擎
可以参阅
https://www.cnblogs.com/wurijie/p/11775303.htmlhttps://blog.csdn.net/m0_37903882/article/details/106105047echarts是百度开发的图表工具已被Apache收录开发者用的较多因为教程多素材多
可以参阅
http://echarts.apache.org/zh/index.html 官网
https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20EChartsSPA项目实现视频播放的组件有哪些
一般浏览器在线视频播放的媒体格式有 m3u8 / mp4 /ts /flv 等多种格式一般情况下1个.m3u8 n个.ts视频文件;当然也可以直接播放一个大.ts视频文件。
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:8
#EXT-X-MEDIA-SEQUENCE:0
#EXTINF:7.040000,
5801dba1122000000.ts
#EXTINF:3.760000,
5801dba1122000001.ts
#EXTINF:4.800000,
5801dba1122000002.ts
#EXTINF:4.000000,
5801dba1122000003.ts
#EXTINF:3.080000,
...
5801dba1122000118.ts
#EXT-X-ENDLISTm3u8本质是一个txt这个txt规定了1个视频的 哪一段是哪一个ts播放的;TSTransport Stream传输流是一种封装的格式它的全称为MPEG2-TS。是一种视频格式一般用于实时流媒体和广播电视领域mp4一种支持本地和在线播放的视频格式不用过多介绍大家电脑上应该都有不少。flv格式的视频文件:一般用迅雷等工具从一些视频网站上下载出来的都是flv文件flv文件需要转码后才能在本地播放,浏览器中则可以直接用相关的js组件播放flv文件,如flv.js使用jsmpeg-player组件
可以使用jsmpeg-player组件来控制播放.ts视频
组件官网 https://www.npmjs.com/package/cycjimmy/jsmpeg-player安装依赖
npm install --save cycjimmy/jsmpeg-player使用案例import React, { useEffect, useState, useRef } from react;import ./index.less;import JSMpeg from cycjimmy/jsmpeg-player;export default function VideoTs(props) {//封面const cover https://img11.360buyimg.com/imagetools/jfs/t1/105707/30/17596/32160/5e8c8ae6Ee2bfd8db/1ef4084de9ec103f.jpgconst tsSrchttps://storage.360buyimg.com/xingdianzhang/%E6%B5%8B%E8%AF%95ts.tsconst hdVideo useRef(null);var [isCover, setIsCover] useState(true);//是否用封面覆盖useEffect(() {initTs()}, [])function initTs() {let canvas hdVideo.current.querySelector(.hdVideo-ts);canvas.style.width 0pxnew JSMpeg.VideoElement(canvas, tsSrc, {canvas,autoplay: true,loop: true,progressive: false,//是否为chunkcontrol: false,poster: cover,preserveDrawingBuffer: true,decodeFirstFrame: true,disableGl: true,}, {audio: false, //静音onPlay: () {canvas.style.width hdVideo.current.clientWidth pxsetIsCover(false)}})}return (div ref{hdVideo} classNamehdVideo{isCover ? img classNamehdVideo-image src{cover} / : null}canvas classNamehdVideo-ts/canvas/div);}!--index.less--.hdVideo{width: 750px;height: 400px;.hdVideo-image{width: 100%;height: 100%;}.hdVideo-ts{width: 100%;height: 100%;}}
//-------------------------------------
参阅
https://www.jianshu.com/p/b6d08be5fcc3
https://www.reneelab.com.cn/what-is-ts-file-and-how-to-play-ts-video.html使用dplayer组件
dplayer官网文档表示可以播放 m3u8 / mp4 /flv 这3种格式
官网http://dplayer.js.org/zh/guide.html#hls安装依赖
npm install --save dplayer使用案例
templatediv iddplayer_m3u8/div
/templatescriptimport DPlayer from dplayer;export default {name: M3U8Player,data(){return{/* playUrl可以是 m3u8 / mp4 /flv 这3种后缀格式的url地址 */ playUrl:https://www.nmgxwhz.com:65/20201121/1UwOkSqv/1200kb/hls/index.m3u8}},methods: {play() {console.log(play callback)}},mounted() {const dp new DPlayer({container: document.getElementById(dplayer_m3u8),video: {url: this.playUrl,type: hls},autoplay: false,theme: #FADFA3,loop: false,lang: zh-cn,screenshot: true,hotkey: true,preload: auto,volume: 0.7,mutex: true,});}}
/scriptstyle scoped
/style----------------------------------------------------
后台推送视频流的方法:
Java后台将视频文件以流的形式传给前端
不同文件ContentType不同
application/vnd.apple.mpegurl 对应 m3u8
video/mp4 对应mp4ResponseBodyRequestMapping(/getVideoSrc)public OutputStream getVideoSrc(HttpServletRequest httpServletRequest,HttpServletResponse httpServletResponse){//1.创建文件对象File f new File(E:/test/1.mp4);//2.获取文件名称String fileName f.getName();//3.导出文件String agent httpServletRequest.getHeader(User-Agent).toUpperCase();InputStream fis null;OutputStream os null;try {//4.获取输入流fis new BufferedInputStream(new FileInputStream(f.getPath()));byte[] buffer;buffer new byte[fis.available()];fis.read(buffer);httpServletResponse.reset();//5.由于火狐和其他浏览器显示名称的方式不相同需要进行不同的编码处理if(agent.indexOf(FIREFOX) ! -1){//火狐浏览器httpServletResponse.addHeader(Content-Disposition, attachment;filename new String(fileName.getBytes(GB2312),ISO-8859-1));}else{//其他浏览器httpServletResponse.addHeader(Content-Disposition, attachment;filename URLEncoder.encode(fileName, UTF-8));}//6.设置response编码httpServletResponse.setCharacterEncoding(UTF-8);httpServletResponse.addHeader(Content-Length, f.length());//设置输出文件类型httpServletResponse.setContentType(video/mpeg4);//7.获取response输出流os httpServletResponse.getOutputStream();os.flush();//8.输出文件os.write(buffer);}catch(Exception e){System.out.println(e.getMessage());} finally{//关闭流try {if(fis ! null){ fis.close(); }if(os ! null){ os.flush(); }if(os ! null){os.close(); }} catch (IOException e) {System.out.println(e.getMessage());}}return os;}参阅
https://blog.csdn.net/weixin_42490316/article/details/106884802什么是JSONP跨域
jsonp跨域是一种利用h5中的script srcxxx /来接收不同域名下的url返回数据的一种方法。
因为script标签天然支持跨域
而其他的ajax ,jq等request组件在同一个页面访问多个域名下的url时会遇到跨域问题需要解决要么通过前端proxy代理解决要么通过后端设置接口支持跨域请求。而jsonp跨域是一种轻量的简便的做法它只需要后台接口按照jsonp的规范返回字符串数据
然后前端通过script srcxxx /来接收后会自动解出字符串中数据再进行前端业务代码。jsonp跨域,不需要后端改API接口也不需要前端搞nginx代理是一种规避 跨域资源访问 的方法因为W3C规范里允许了script srcxxx / 是允许跨域获取数据的。vue项目中如何使用jsonp跨域
场景一个上线多年的vue项目,要增加一个xx组件需要跨域访问其他服务器的url可以使用npm提供的jsonp组件安装依赖
npm i jsonp -S使用案例import originJSONP from jsonplet url02 http://whois.pconline.com.cn/ipJson.jsp;originJSONP(url02, {}, (err, data) {console.log(????????????????)if (!err) {console.log(data)this.addr data;} else {console.log(err)}});
做一个VUE-SPA项目可以参考的东西
开源UI库
https://www.antdv.com/docs/vue/introduce-cn/
Ant Design of Vue UI库
是 Ant Design 的 Vue 实现开发和服务于企业级后台产品https://pro.antdv.com/docs/getting-started
Ant Design Pro 是一个企业级中后台前端/设计解决方案
只有前端Admin没有后端--官方提供https://element.eleme.cn/#/zh-CN
Element UI 官方地址
Element一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
开源npm组件库
vue-uuid
一种spa项目里使用uuid的工具类组件可以生成uuid,一般在需要前端来生成唯一键时使用。
安装依赖方法: npm install vue-uuid --savevxe表格
一种专业的符合企业级需要的前端表格组件其中实现了多种表格方案要比antdvue和elemtui丰富
安装依赖方法: npm install vxe-table xe-utils --savelodash库
lodash是一种包含了多种js操作的库里边封装了对数组、json等对象的快速操作可以当js工具类用比jquery功能不弱
安装依赖方法: npm install lodash --save
开源Admin项目/博客文章
https://iczer.gitee.io/vue-antd-admin-docs/
开箱即用的Antdv 中台前端/设计解决方案--非官方
https://iczer.gitee.io/vue-antd-admin
只有前端Admin没有后端http://www.jeecg.com/
http://boot.jeecg.com/
https://gitee.com/jeecg/jeecg-boot
前后端分离架构SpringBoot 2.xSpringCloudAnt DesignVueMybatis-plusShiroJWT。强大的代码生成器让前后端代码一键生成https://chu1204505056.gitee.io/vue-admin-beautiful/#/index
https://gitee.com/chu1204505056/vue-admin-beautiful
开箱即用的ElementUI 中台前端/设计解决方案--非官方
只有前端Admin没有后端https://gitee.com/y_project/RuoYi-Vue
前端采用Vue、Element UI。
后端采用Spring Boot、Spring Security、Redis Jwthttps://gitee.com/renrenio/renren-fast-vue
renren-fast-vue基于vue、element-ui构建开发实现renren-fast后台管理前端功能提供一套更优的前端解决方案https://qqdie.com/cssjs/
https://blog.csdn.net/weixin_42490316/article/details/106884802
https://www.qt86.com/
