Latio Team:技术黑客共同构建的社区
这是 Wix Studio 挑战赛:社区版的提交内容。
我的社区平台
Latio Team 是一个为拉丁美洲的技术构建者建立的社区,它是一个在参加黑客马拉松时参与、学习、成长和联系的地方。社区页面包括以下功能:
- 人才库:成员的个人资料列在公共页面上,旨在让招聘人员或其他企业家看到。
- 工作机会:为会员展示最新远程工作的招聘板(API由RemoteOK提供),会员可以在社区页面内查看并申请职位。
- 黑客马拉松列表:为我们的会员分享和发布新的黑客马拉松机会的地方。
- 连接:与其他成员交谈、发布工作更新以及寻找新合作者的空间。
- 工作咨询:每个会员个人资料都有一个联系按钮,招聘人员可以向他们发送消息或要求工作咨询。然后,会员可以在自定义列表页面中查看收到的消息,而无需暴露其私人详细信息。
演示
项目链接:https://fredoist.wixstudio.io/latio-team
主页:
人才库:
求职板和帖子
黑客马拉松列表:
连接:
会员简介:
工作查询表格和清单:
发展历程
如果您已经了解 JavaScript,那么使用 Wix 的 Studio 和 Velo API 进行构建非常容易。
Velo API 的所有文档都清晰且非常完整,而且 Wix Studio 内的编辑器具有一些很棒的自动完成功能,非常易于使用。一旦开始构建和测试编辑器,您就会了解它的工作原理,并且可以快速实现新的 API。
另外一点,Wix 的模板可以让您非常快速地构建一个令人惊叹的网站,设计会适应您添加的每个新应用程序元素,这非常酷,因为您不需要接触其他任何东西。
这是一些功能的代码块,以便您可以复制它们:
职位发布
import { Permissions, webMethod } from "wix-web-module"; import { getJSON } from "wix-fetch"; const formatPrice = (p) => new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: p < 1 ? 3 : 1, }).format(Number(p)); // GET call using getJSON export const getJobs = webMethod(Permissions.Anyone, async () => { const response = await getJSON( "https://remoteok.com/api", ); const jobs = response.slice(1).map(job => { job._id = job.id; job.salary_range = `$ ${formatPrice(job.salary_min)}-${formatPrice(job.salary_max)}` job.company_logo = job.company_logo ? `https://remoteok.com/cdn-cgi/image/format=auto,fit=contain,width=100,height=100,quality=50/${job.company_logo}` : null; job.logo = job.logo ? `https://remoteok.com/cdn-cgi/image/format=auto,fit=contain,width=100,height=100,quality=50/${job.logo}` : null; job.image = job.company_logo ?? job.logo ?? `https://ui-avatars.com/api/?name=${job.company}` return job; }) return jobs; });
职位页面
import { ok, notFound, WixRouterSitemapEntry } from "wix-router"; import { getJobs } from "backend/fetch-jobs.web" export async function job_Router(request) { // Get item name from URL request const slug = request.path[0]; // Get the item data by name const jobs = await getJobs(); const data = jobs.filter(job => job.slug === slug) if (data.length) { const job = data[0]; // Define SEO tags const seoData = { title: job.position, description: "This is a description of " + job.position + " page", noIndex: false, metaTags: [{ "property": "og:title", "content": job.position }, ] }; // Render item page return ok("job-page", job, seoData); } // Return 404 if item is not found return notFound(); } export async function job_SiteMap(sitemapRequest) { const jobs = await getJobs() // Convert the data to site map entries const siteMapEntries = jobs.map((job) => { const data = job; const entry = new WixRouterSitemapEntry(job.slug); entry.pageName = "job-page"; // The name of the page in the Wix editor to render entry.url = "/job/" + job.slug; // Relative URL of the page entry.title = data.position; // For better SEO - Help Google return entry; }); // Return the site map entries return siteMapEntries; }
向任何会员发送询问
import { Permissions, webMethod } from "wix-web-module"; import wixData from "wix-data"; export const sendInquiry = webMethod( Permissions.Anyone, async (username, email, details, budget) => { const results = await wixData.query("Members/PrivateMembersData").eq('slug', username).find() const member = results.items.length > 0 ? results.items[0] : null; if(member) { const memberId = member._id; const result = await wixData.save("WorkInquiries", { recipientId: memberId, contactEmail: email, details, budget }) if(result) { return true } } return false; } );
获取会员查询
import { Permissions, webMethod } from "wix-web-module"; import { query } from "wix-data"; import { currentMember } from "wix-members-backend" export const getInquiries = webMethod( Permissions.SiteMember, async () => { const member = await currentMember.getMember(); const data = await query("WorkInquiries").eq('recipientId', member._id).find(); return data.items; } );
Velo API
- wix-data:它用于存储、获取和渲染自定义集合数据以及公共/私有功能中的成员数据。
- wix-fetch:职位发布由 RemoteOK 的 API 提供,并使用 Wix 的获取方法获取这些职位,然后将职位渲染到中继器块中。
- wix-router:职位发布也会被渲染到使用 Wix 路由器的自己的页面中。
- wix-members-backend:它用于将查询表单链接到自定义集合,发送数据后,使用此 API 通过匹配配置文件 slug 检索memberId,然后将其与表单数据一起传递到集合。
- wix-location-frontend 和 wix-window-frontend:这些仅用于获取 URL 数据,例如路径或成员 slug。
维克斯应用程序
- Wix 会员区:用于用户配置文件和身份验证。
- Wix Groups:用于连接功能。
- Wix FAQ:将常见问题解答添加到主页中。
- CMS:我使用了一些 CMS 连接来显示页面内的数据。
以上是Latio Team:技术黑客共同构建的社区的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

JavaScript是现代Web开发的基石,它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发,极大地提升了用户体验和跨平台开发的灵活性。

Python和JavaScript开发者的薪资没有绝对的高低,具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大,薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。

学习JavaScript不难,但有挑战。1)理解基础概念如变量、数据类型、函数等。2)掌握异步编程,通过事件循环实现。3)使用DOM操作和Promise处理异步请求。4)避免常见错误,使用调试技巧。5)优化性能,遵循最佳实践。

实现视差滚动和元素动画效果的探讨本文将探讨如何实现类似资生堂官网(https://www.shiseido.co.jp/sb/wonderland/)中�...

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

如何在JavaScript中将具有相同ID的数组元素合并到一个对象中?在处理数据时,我们常常会遇到需要将具有相同ID�...

zustand异步操作中的数据更新问题在使用zustand状态管理库时,经常会遇到异步操作导致数据更新不及时的问题。�...
