elixir 规格_如何使用Elixir和Phoenix建立一个简单，可扩展的博客

elixir 规格

by Raman Sah

通过拉曼萨

In this post, we’ll discuss how to build a boilerplate Phoenix web app with user authentication and an admin panel, along with image upload in Elixir.

在本文中，我们将讨论如何使用用户身份验证和管理面板以及在Elixir中上传图片来构建样板的Phoenix Web应用程序。

TodoMVC has become a de facto tool to compare various JavaScript-based MV* frameworks. Along the same lines, I feel that a blog application can be a tiebreaker in choosing a new backend or API framework.

TodoMVC已成为比较各种基于JavaScript的MV *框架的事实上的工具。 同样，我认为博客应用程序在选择新的后端或API框架方面可能是决定性因素。

So let’s get started and build one in Phoenix. We’ll follow the default setup, that is Phoenix hooked up with Ecto running on PostgreSQL.

因此，让我们开始在Phoenix中构建一个。 我们将遵循默认设置，即Phoenix与在PostgreSQL上运行的Ecto挂钩。

Here are the final screens to give you an idea of what the app will look like at the end.

这是最后的屏幕，可让您大致了解应用程序的外观。

The landing page will show all the published blogs in a card layout. A card can be clicked to view that particular post.

登陆页面将以卡片布局显示所有已发布的博客。 可以单击卡片以查看该特定帖子。

We will have a dashboard that will show the statistics in brief. Access to this page requires admin user login.

我们将有一个仪表板，它将简要显示统计信息。 访问此页面需要管理员用户登录。

There will be a separate section that has an overview of all the posts. Here you can publish / modify / delete posts.

将有一个单独的部分，概述所有帖子。 您可以在这里发布/修改/删除帖子。

This is the post editor layout featuring a markdown editor along with a file picker for the featured image.

这是帖子编辑器布局，具有降价编辑器以及精选图片的文件选择器。

Note: The full working code is hosted on GitHub. There are numerous files in the project which cannot be shared in a single blog. So I have explained the specific ones which I assume are critical.

注意：完整的工作代码托管在GitHub上 。 项目中有许多文件，不能在一个博客中共享。 因此，我已经解释了我认为很关键的具体内容。

Let’s keep the project’s name as CMS for now. So we’ll start with creating a new project with mix phx.new cms. Run mix deps.get to install dependencies.

现在让我们将项目名称保留为CMS。 因此，我们将首先使用mix phx.new cms创建一个新项目。 运行mix deps.get安装依赖项。

Generate a migration file for users and posts, respectively.

分别为用户和帖子生成一个迁移文件。

# User migration file

mix phx.gen.schema Auth.User users name:string email:string password_hash:string is_admin:boolean

# Posts migration file

mix phx.gen.schema Content.Post posts title:string body:text published:boolean cover:string user_id:integer slug:string

Two tables have to be created in the database which represent users and posts. I’ve kept it rather simple, keeping only the required fields and expanding when the need arises.

必须在数据库中创建两个表，分别代表用户和帖子。 我将其保持相当简单，仅保留必填字段，并在需要时进行扩展。

Subsequently, we can define changesets and additional methods in the user and post schema as well.

随后，我们可以在用户中定义变更集和其他方法，并发布模式。

user.ex

user.ex

post.ex

事后

@derive {Phoenix.Param, key: :slug}

Since we want the posts to have a readable and SEO friendly URL structure, we inform route helpers to reference slug instead of id in the URL namespace.

由于我们希望帖子具有可读性和SEO友好的URL结构，因此我们通知路由助手引用slug而不是URL名称空间中的id 。

The routes are described here:

此处描述了路线：

Resources which are specific to the admin section are clubbed together and assigned a pipeline which forces authentication.

特定于admin部分的资源组合在一起，并分配了一个强制进行身份验证的管道。

Meanwhile, global routes are treated with passive authentication. User details are fetched if a session is present but the pages are still accessible. Login and home pages belong here.

同时，使用被动身份验证来处理全局路由。 如果存在会话但仍可访问页面，则将获取用户详细信息。 登录名和主页属于此处。

Executing mix phx.routes gives me this output:

执行mix phx.routes给我这个输出：

The view is divided into three logical sections:

该视图分为三个逻辑部分：

1. Navigation bar
   导航栏
2. Sidebar
   侧边栏
3. Main Content
   主要内容

While the navigation bar is always visible, the sidebar appears only if an admin user is logged in. Browsing content will be inside the admin context. The links in the sidebar will grow as and when the app evolves.

虽然导航栏始终可见，但只有在管理员用户登录后，侧边栏才会显示。浏览内容将在管理员上下文中。 随着应用程序的发展，侧边栏中的链接将会增长。

The Admin.Post controller follows the typical CRUD architecture and includes an action to toggle the published state of a given post.

Admin.Post控制器遵循典型的CRUD体系结构，并包括用于切换给定帖子的发布状态的操作。

A lot of controls reside in the index page of admin’s post section. Here, posts can be deleted, published and modified.

许多控件位于admin帖子部分的索引页面中。 在这里，帖子可以删除，发布和修改。

templates/admin/post/index.html.eex

templates / admin / post / index.html.eex

To keep the template uncluttered, we can define convenience view helpers like formatting time etc. separately.

为了使模板整洁，我们可以分别定义便利视图助手，例如格式化时间等。

views/admin/post_view.ex

views / admin / post_view.ex

Arc along with arc_ecto provides out of the box file upload capabilities. Since a post features a cover image, we have to define an arc configuration in our app.

Arc与arc_ecto一起提供了开箱即用的文件上传功能。 由于帖子带有封面图像，因此我们必须在应用程序中定义弧线配置。

Each post in our blog requires two versions of cover images — original which is visible inside specific post view and a thumb version with a smaller footprint to populate the cards. For now, let’s go with 250x250 resolution for the thumb version.

我们博客中的每个帖子都需要两种版本的封面图像-原始版本(可在特定的帖子视图中看到)和小版本的拇指版(用于填充卡片)。 目前，我们将拇指版本的分辨率设为250x250。

Coming back to the app’s landing page, it will house the cards for all the published posts. And each post will be accessible through the slug formed.

返回应用程序的登录页面，它将容纳所有已发布帖子的卡片。 并且每个帖子都可以通过形成的子弹访问。

controllers/page_controller.ex

This project explores Phoenix — how a Phoenix app is structured and how to dismantle a Phoenix-based project. I hope you’ve learned something and enjoyed it!

该项目将探索Phoenix-Phoenix的应用程序结构以及如何拆除基于Phoenix的项目。 希望您学到了一些东西并喜欢它！

The full working app is on Github : https://github.com/ramansah/cms. Feel free to clone ? and do clap if you find this blog useful ?

完整的工作应用程序位于Github上： https ： //github.com/ramansah/ cms。 随意克隆吗？ 如果您觉得此博客有用，可以鼓掌吗？

翻译自: https://www.freecodecamp.org/news/simple-extensible-blog-built-with-elixir-and-phoenix-61d4dfafabb1/

elixir 规格