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)

Python更适合初学者,学习曲线平缓,语法简洁;JavaScript适合前端开发,学习曲线较陡,语法灵活。1.Python语法直观,适用于数据科学和后端开发。2.JavaScript灵活,广泛用于前端和服务器端编程。

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1)C/C 是静态类型语言,需手动管理内存,而JavaScript是动态类型,垃圾回收自动处理。2)C/C 需编译成机器码,JavaScript则为解释型语言。3)JavaScript引入闭包、原型链和Promise等概念,增强了灵活性和异步编程能力。

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互;2)在用户提交数据前进行客户端验证,提高用户体验;3)通过AJAX技术实现与服务器的无刷新通信。

JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用,涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

理解JavaScript引擎内部工作原理对开发者重要,因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段;2)执行过程中,引擎会进行动态优化,如内联缓存和隐藏类;3)最佳实践包括避免全局变量、优化循环、使用const和let,以及避免过度使用闭包。

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好,适合初学者,但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大,JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富,但Python适合从官方文档开始,JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda,适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack,适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。

C和C 在JavaScript引擎中扮演了至关重要的角色,主要用于实现解释器和JIT编译器。 1)C 用于解析JavaScript源码并生成抽象语法树。 2)C 负责生成和执行字节码。 3)C 实现JIT编译器,在运行时优化和编译热点代码,显着提高JavaScript的执行效率。
