Hand in hand to teach you to build your own front-end tabloid system

InfoQ 2021-04-07 21:01:28
hand hand teach build front-end


{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":" Preface "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Always pay attention to our students in the front-end team of Zhengcai cloud , I'm not unfamiliar with the following picture ~"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/07\/07d01318e29c7639d8e65bac3f29927b.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Every Friday afternoon we will regularly push a front-end tabloid , It's a collection of selected front-end articles ~"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" This is the picture below  "},{"type":"link","attrs":{"href":"https:\/\/weekly.zoo.team\/","title":"xxx","type":null},"content":[{"type":"text","text":" Zhengcai cloud front-end tabloid "}]},{"type":"text","text":"  A screenshot of the official website of , This site contains a summary of each issue of our history ~"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/c1\/c150a8c83b52f1b827b9ed56ae7e34c8.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" So far, the front-end tabloids have 93 period , Come together 1000+ article , covers 50+ Size classification , It's a very good knowledge base ~"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":" The origin of front-end tabloids "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Continuous learning is a necessary quality for every engineer , A growing team also needs such an atmosphere of continuous learning . So how to help the team cultivate a continuous learning atmosphere by means of Technology ?"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Therefore, Zhengcai cloud front-end tabloids came into being , It mainly includes contributions 、 Aggregate precipitation 、 Three core modules of timed delivery , Such a system can make it easy for everyone to share their favorite articles within the team , And classify the articles , Build a knowledge base for the team , It's convenient for you to consult , At the same time, the tabloid system will also push regularly every Friday , It's convenient for you to know the latest technology trends , The front-end tabloid system is an effective helper to help us create an atmosphere of sharing and learning within the team ~"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" So how is such a tabloid system realized ?"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":" How to design a tabloid system "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":" contribute "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" I believe when you see good articles , There's always an urge to share , A simple and easy-to-use delivery function can easily satisfy everyone's desire to share , Input good articles into the team , Help other students ~"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" A simple and easy contribution function , We need to solve two things :"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"1、 How to read a good article , Satisfy the urge to share "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"2、 How to classify and collect the contributed articles , Convenient for precipitation and search "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" If it's a separate entry system , Manually enter , This way of operation is cumbersome , It's easy to get rid of people's enthusiasm , When reading articles in the browser , We often bookmark good articles , One click operation , Convenient and quick . So how can I contribute as easily as bookmarking articles in a browser ?"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" It's easy to think of doing this through the browser's extensibility ,Chrome So the plug-in provides "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":" What is? Chrome plug-in unit "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https:\/\/developer.chrome.com\/extensions","title":"xxx","type":null},"content":[{"type":"text","text":" Official explanation "}]},{"type":"text","text":" : Google plug-in is a small program for customizing the browser experience . It allows users to customize according to their personal needs or preferences  Chrome The function and behavior of , They are based on Web technology (HTML,JavaScript and CSS) structure ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Say something reasonable. : To develop a Web project , Can be embedded into Chrome Browser , At the same time, through some specific Api Get some power , So as to customize their own plug-in functions "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":" How to develop a one button contribution Chrome plug-in unit "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" First create a project , Develop a contribution function page ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" This project and ordinary Vue The only difference between projects is that there is one more root  "},{"type":"codeinline","content":[{"type":"text","text":"manifest.json"}]},{"type":"text","text":"  file ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/3f\/3fc5ed5c64ace5764659bea6162cb8c4.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" establish  "},{"type":"codeinline","content":[{"type":"text","text":"manifest.json"}]},{"type":"text","text":":Chrome By identifying whether the project root has  "},{"type":"codeinline","content":[{"type":"text","text":"manifest.json"}]},{"type":"text","text":"  File to identify if it is Chrome   plug-in unit ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"{ \n \/\/ Core code \n \"name\": \"Zoo!\", \/\/ Extension \n \"browser_action\": { \n \"default_popup\": \".\/popup.html\" \/\/ Click the small plug-in icon on the top right of the browser to pop up the content html \n }, \n \"content_scripts\": [ \/\/ In the Web Running inside the page javascript Script \n { \n \"matches\": [\n \/\/ Call under what protocol \n \"http:\/\/*\/*\", \n \"https:\/\/*\/*\" \n ], \n \"js\": [ \n \".\/contentScripts\/zdata.js\" \/\/ Insert into the JS File path \n ], \n \"run_at\": \"document_start\" \/\/ stay document Execute on load \n } \n ] \n} "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" In this way, the plug-in will be loaded by default when it is opened  "},{"type":"codeinline","content":[{"type":"text","text":"popup.html"}]},{"type":"text","text":"  Content of page , The effect is as shown in the picture :"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/4c\/4cf4bdc742b07b6a6204f508001aa4bf.gif","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" How to get the article title 、 brief introduction 、URL"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" The plug-in itself can't get the title of the current page , but Chrome The plug-in provides a way to dynamically insert a fixed JS Scripting capabilities , According to this mechanism, we can insert a paragraph into the current page JS Script to get the title of the page 、 Introduction and URL, And then the obtained content is returned to the plug-in through the message mechanism ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"let host = this;\n\/\/ Get the current window id \nchrome.tabs.query({\n active: true,\n currentWindow: true\n}, function (tabs) {\n let tabId = tabs.length ? tabs[0].id : null;\n \/\/ Inject... Into the current page JavaScript Script \n chrome.tabs.executeScript(tabId || null, {\n file: '.\/contentScripts\/recommend.js'\n }, function () {\n \/\/ Communicate to the target page , towards recommend.js Send a message \n chrome.tabs.sendMessage(tabId, {\n message: 'GET_TOPIC_INFO',\n }, function (response) {\n \/\/ Get the returned article title 、url、description \n host.article.title = response.title;\n host.article.link = response.link;\n host.article.description = response.description;\n });\n });\n}); "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"recommend.js"}]},{"type":"text","text":"   Listen to the message , adopt addListener We can monitor from  sendMessage   A message sent , stay sendMessage In the definition of message Constants allow us to distinguish messages when we receive them ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"let doc = document;\nchrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {\n if (request.message === 'GET_TOPIC_INFO') {\n \/\/ obtain title \n let title = document.getElementsByTagName('title')[0].textContent;\n let descriptionEl = doc.querySelectorAll('meta[name=description]')[0];\n \/\/ obtain describe \n let description = descriptionEl ? descriptionEl.getAttribute('content') : title;\n \/\/ send data \n sendResponse({\n title: title.trim(),\n link: location.href,\n description: description.trim()\n });\n } else if (request.message === 'SIGN_RELOAD') {\n console.log('request, sender', request, sender);\n }\n}); "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" When you click Submit , You need to send the data to the server for storage "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"typescript"},"content":[{"type":"text","text":"\/\/  Submit button click event  \nhandleRecommendArticle: function () {\n  let request;\n  request = ajax({\n    method: 'post',\n    url: 'https:\/\/XXX\/api\/post', \/\/  Back end interface  \n    data: {\n      'title': this.article.title,\n      'desc': this.article.description,\n      'category': this.article.category[1] || ' Default category ',\n      'link': this.article.link,\n      'referrer': this.article.reporter\n    }\n  });\n} "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" design sketch :"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/52\/5260a11bf4b6e88d656b2e3a76d2d4fe.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" It's a very light weight Chrome The implementation of the plug-in , Based on such a Chrome plug-in unit , When we see articles we like , You can share it with your team partners with one click ~"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" When there are more articles , Without effective management , Articles will pile up in a mess , On the contrary, it makes us lose the desire to learn , So how do we classify and collect the articles we contributed , It is convenient for students to find the knowledge system they need ?"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":" Label design "}]},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/04\/041c55aa641fda75d15fb4a96a5405ef.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Label classification "}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" It took some time to design the label classification , The main difficulty is what kind of classification dimension can make contributors quickly find the corresponding classification , So that viewers can quickly find the articles they want according to the classification , And how to quickly find past articles, etc ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" This requires our classification to be easy to understand , And can cover most of the types of business articles , Finally, we start from the foundation 、 Language 、 framework 、 The selection 、 Tools 、 Summary and other multi-dimensional classification ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/f4\/f486116177a3e722447ddeabf4f95b6c.gif","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" In order to find articles quickly , Here, the classification view function is also integrated in Chrome Plug in "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/3a\/3a11e3dd131e2d648e614bde94790c71.gif","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":" Installing a plug-in "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" After the plug-in is finished , Other students can install your plug-in installation package into the browser . Because of the walls , There is no option to upload the plug-in to Chrome The app store , We install it locally , The following figure shows the packaged project directory structure :"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/3f\/3fc5ed5c64ace5764659bea6162cb8c4.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Installation steps : Browser select Settings —> add-in —> Load the unzipped extender —> Select the file directory . meanwhile , Developer mode remember to open ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/98\/983536a91d59ef914e9b947f40f8df10.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":" Aggregate precipitation "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Very common, a front-end project , There are no more statements here , The main thing is to be able to see each issue of the article and find it quickly according to the classification , And unifies the collection article entrance . among , Front page uses SSR Server side rendering implementation ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/c1\/c150a8c83b52f1b827b9ed56ae7e34c8.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/84\/84af85bce5e0fa2e009292d1111bbf52.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":" Integral design "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/53\/535b4f60f95485342f24a8984490370f.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":" summary "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Although the front-end tabloid system is a small system , But no matter from the functional design , Or the system design is aiming at the same goal , Strive to promote the learning atmosphere of the team , Let the team students continue to grow . I hope this article can give you some inspiration , How to start from a goal , To think about how to make tools better serve people ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"horizontalrule"},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" The first figure :Unsplash"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" author : monkey "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" original text :https:\/\/mp.weixin.qq.com\/s\/YE_XEP38C3DeSEx-hHYQkA"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" original text : Hand in hand to teach you to build your own front-end tabloid system "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" source : Front end team of Zhengcai cloud - WeChat official account [ID:Zoo-Team]"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Reprint : The copyright belongs to the author . Commercial reprint please contact the author for authorization , Non-commercial reprint please indicate the source ."}]}]}
版权声明
本文为[InfoQ]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/04/20210407210004397o.html

  1. VSLAM front end: image feature extraction
  2. Exclusive dialogue with the person in charge of Alibaba cloud function computing: what you don't know about serverless
  3. 「开源免费」基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之序列号自定义组件(四)
  4. "Open source and free" serial number customization component of crudapi background management system of front end spa project based on Vue and Quasar (4)
  5. JavaScript 相似度排序
  6. Springboot项目搭建(前端到数据库,超详细)
  7. Less than 150 lines of code to write a python version of the snake
  8. 02_Nginx部署服务
  9. vue 快速入门 系列 —— vue 的基础应用(上)
  10. JavaScript similarity ranking
  11. 基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之布局菜单嵌套路由(三)
  12. Springboot project construction (front end to database, super detailed)
  13. 02_ Nginx Deployment Services
  14. vue 快速入门 系列 —— vue 的基础应用(上)
  15. Vue quick start series basic application of Vue
  16. Layout menu nested routing of front end spa project crudapi background management system based on Vue and Quasar (3)
  17. Vue quick start series basic application of Vue
  18. 一个好用的Visual Studio Code扩展 - Live Server,适用于前端小工具开发
  19. 基于Vue和Quasar的前端SPA项目实战之用户登录(二)
  20. css常用选择器总结
  21. Behind the miracle of the sixth championship is the football with AI blessing in the Bundesliga
  22. An easy to use Visual Studio code extension - live server, suitable for front-end gadget development
  23. 用 Python 抓取公号文章保存成 HTML
  24. User login of front end spa project based on Vue and Quasar (2)
  25. Summary of common selectors in CSS
  26. Using Python to grab articles with public number and save them as HTML
  27. To "restless" you
  28. 【免费开源】基于Vue和Quasar的crudapi前端SPA项目实战—环境搭建 (一)
  29. 【微信小程序】引入阿里巴巴图标库iconfont
  30. layui表格点击排序按钮后,表格绑定事件失效解决方法
  31. Unity解析和显示/播放GIF图片,支持http url,支持本地file://,支持暂停、继续播放
  32. 【vue】 export、export default、import的用法和区别
  33. [free and open source] crudapi front end spa project based on Vue and Quasar
  34. [wechat applet] introduces Alibaba icon library iconfont
  35. Layui table click Sort button, table binding event failure solution
  36. Element树形控件Tree踩坑:修改current-node-key无效
  37. Unity parses and displays / plays GIF images, supports HTTP URL, supports local file: / /, supports pause and resume playback
  38. Element树形控件Tree踩坑:修改current-node-key无效
  39. The usage and difference of export, export default and import
  40. Element tree control: invalid to modify current node key
  41. Element tree control: invalid to modify current node key
  42. linux下安装apache(httpd-2.4.3版本)各种坑
  43. How to install Apache (httpd-2.4.3) under Linux
  44. 程序员业余时间写的代码也算公司的?Nginx之父被捕引发争议
  45. Nacos serialize for class [com.alibaba.nacos.common.http.HttpRestResult] failed.
  46. Do programmers write code in their spare time? Controversy over the arrest of nginx's father
  47. Nacos serialize for class [ com.alibaba.nacos . common.http.HttpRestResult ] failed.
  48. Seamless management of API documents using eolink and gitlab
  49. vue 的基础应用(上)
  50. 28岁开始零基础学前端,这些血的教训你一定要避免
  51. Basic application of Vue
  52. Starting at the age of 28, you must avoid these bloody lessons
  53. Ubuntu 16.04 can not connect to the wireless solution and QQ installation
  54. Industry security experts talk about the rapid development of digital economy, how to guarantee the security of data elements?
  55. 利用Vue实现一个简单的购物车功能
  56. Behind the "tireless classroom" and teacher training, can byte education really "work wonders"?
  57. Using Vue to realize a simple shopping cart function
  58. 【css】伪类和伪类元素的区别
  59. 【css效果】实现简单的下拉菜单
  60. 【vue】父子组件传值