Автор: маленькая картошка
Блог Сад:www.cnblogs.com/HouJiao/
Самородки:Талант /user/243617…

1. Введение

Недавно я делаю официальный сайт, домашнюю страницу菜单栏имеют六项, что соответствует шести большим модулям, форма отображения каждого модуля примерно следующая:

1.1 Отображение чистого изображения

Основное изображение закрывает браузер по горизонтали:

1.2 Отображение таблицы

1.3 Отображение раскладки «картинка + текст» в левой и правой колонках

Первый двухколоночный макет:

Второй двухколоночный макет:

1.4 Отображение макета верхней и нижней строки изображения и текста

1.5 Отображение изображения сетки из 12 квадратов с тремя строками и четырьмя столбцами

1.6 Отображение изображения потока водопада

1.7 Динамические эффекты

Помимо вышеперечисленных раскладок, есть еще и некоторые мыше-подвесные动态效果.

1.8 Модуль новостей

Еще один新闻资讯модуль, вы можете просмотреть新闻详情и ремень分页функциональный新闻列表. Хотя конкретное содержание этого модуля подробно не обсуждается, общеизвестно, что этот модуль также может потребовать простого后台管理系统идти发布,编辑статья.

2. Сколько времени это заняло?

В то время, после прочтения проекта дизайна, я почувствовал, что содержание этого официального сайта все же слишком много, потому что многие макеты не были одинаковыми, и еще один后台管理系统; Наконец, немного подумав, я остановился на3周загруженность (кроме выходных).

В итоге на завершение ушло около двух недель из-за отсутствия связи на начальном этапе.UIПроблема переделок, а некоторые функции были доработаны позже, поэтому на это ушла еще неделя, а в целом доставка считается своевременной.

Затем некоторые проекты样式,功能Реализация и некоторые проблемы во всем процессе суммированы, и я надеюсь дать вам некоторые ссылки.

3. Эта статья подходит для тех, кто читает

• Хотите освоить CSS, но не знаете с чего начать
• Хотите кратко просмотреть навыки CSS
• Те, кто готов делать официальные проекты сайта в последнее время
• Чистая front-end разработка, заинтересованная в том, чтобы начать работу с back-end, надеясь самостоятельно выполнить законченный, но несложный front-end и back-end проект.

4. Макет страницы и некоторые эффекты CSS

Выполнение такого рода проектов на официальном сайте в основном проверяет личность человека.CSSФундамент, который использовался в процессе выполнения этого проектаCSSЧто насчет трюков?

• 定位: относительное позиционирование, абсолютное позиционирование
• 弹性布局: гибкий макет
• 百分比布局
• 文本溢出: переполнение однострочного текста, переполнение многострочного текста
• 鼠标悬浮显示遮罩:использоватьdisplayи абсолютное позиционирование

Выше приведены некоторые из используемых во всем проектеCSSНавыки, давайте рассмотрим эти и некоторые связанные с ними практические приложения.

4.1 Относительное расположение

настройки элемента相对定位В дальнейшем он по-прежнему занимает исходное положение в документообороте, установивtop,bottom,left,right, вы можете переместить элемент относительно исходного положения, и относительное позиционирование не повлияет на расположение других элементов.

4.1.1 Относительное позиционирование — Приложение 1

В проекте есть следующие примеры, которые используют相对定位осуществленный.

Наш базовый макет выглядит так:

<p class="logo">公司<br/>logo</p>  <!--这里实际是img元素 -->
<p class="name">公司<br/>X<br/>名称</p>

p.logoзаменены непосредственно наimgэлемент

При нормальных обстоятельствах результат рендеринга браузером приведенного выше кода выглядит следующим образом (размер необходимо передать черезCSSнастраивать):

В этот момент мы можем датьp.nameУстановите относительное позиционирование и установите его偏移量для достижения конечного эффекта.

p.name{
    position: relative;
    left: 100px;
}

4.1.2 Относительное позиционирование — Приложение 2

tableЕсть столбец данных в名称, нам нужно добавить соответствующийlogo.

На самом деле в нормальных условиях нетlogoДобавьте любой стиль, и он будет выглядеть так:

ясно видноlogoМесто не очень подходящее:logoОн должен быть центрирован по вертикали, при этом увеличивая интервал вместе с текстом.

Увеличиватьlogoи интервал между текстом может быть достигнут путем предоставленияlogoнастраиватьpadding-rightилиmargin-rightреализовать.

КорректированиеlogoВертикальное центрирование обычно выбираетсяvertical-align, но мы часто находимvertical-alginЭффект всегда неудовлетворительный, то в этот раз相对定位это очень хороший выбор. мы можемlogoУстановите относительное позиционирование, затем установитеtopБудуlogoСмещение вниз.

.logo{
    positive: relative;
    top: 4px;
}

4.2 Абсолютное позиционирование

После того, как установлено абсолютное позиционирование элемента, оно будет отклоняться от нормального потока документов, а позиция, изначально занимаемая в потоке документов, будет удалена, поэтому это повлияет на элементы, стоящие за ним.

После установки смещения для абсолютно позиционированного элемента позиция абсолютно позиционированного элемента определяется относительно最近的已定位祖先元素, если элемент не имеет позиционированного предка, его позиция определяется относительно исходного содержащего блокаhtmlэлемент.

已定位означает наборposition：relative；илиposition：absolute；. в块级元素настраивать绝对定位В дальнейшем его содержимое больше не будет занимать всю строку браузера по умолчанию, а его ширина будет растягиваться за счет содержимого.

В следующем контенте будет绝对定位конкретные приложения.

4.3 Гибкая компоновка

Flexмакет также известен как弹性布局, установив элементdisplay:flexреализовать.

WebkitБраузер ядра, необходимо добавить-webkitпрефикс, т.е.display: -webkit-flex;

Если элемент установленdisplay:flex, то элемент называетсяFlex容器, внутри элемента子元素называетсяFlex项目.

мы все знаем,divда块级元素.

<div class="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

Таким образом, расположение приведенного выше кода в браузере выглядит следующим образом:

если мы дадимdiv.wrapperнастраиватьdisplay:flex;ноdiv.wrapperтолько одинFlex容器, его детиdiv.boxобеFlex项目, и соответствующий макет станет следующим:

которыйFlex容器ВнутреннийFlex项目станет行内元素, расположены горизонтально и выровнены на левом выравнивании по умолчанию.

Мы можем установитьFlex容器изjustify-contentконтрольFlex项目горизонтальное выравнивание.

для большегоFlexСодержание макета может бытькликните сюда

Тогда давайте посмотрим на проектFlex布局заявление.

4.3.1 Приложение с гибкой компоновкой

подал заявку на проектFlex布局следующий модуль:

Модуль состоит из шести картинок разного размера, и шесть картинок сшиваются в целостную большую картинку.

Когда я впервые увидел этот дизайн, я не особо о нем думал, а когда я его на самом деле сделал, я начал копать ноги o(╥﹏╥)o. После поиска в сети этот макет можно примерно назвать瀑布流式的布局.

Наверняка я читал какие-то методики в интернете, но всегда чувствовал, что не очень хорошо в этом разбираюсь (собственно потому, что занимался вёрсткой страниц, и мозг не мог реагировать), поэтому думал, как это реализовать текущее требование в первую очередь.

Так что мой мозг расходился, и я просто начал пробовать浮动+相对定位, который также реализует базовую компоновку. Однако из-за того, что родительский элемент теряет свою высоту из-за плавания, есть последующая функция наведения мыши, которую невозможно реализовать.После некоторых подбрасываний и отсутствия решения от этого метода отказались.

Возникает проблема:浮动导致父元素高度塌陷, вы можете узнать, если вам интересно ~

Посоветовавшись, я получил очень простое и адаптивное решение, т.е.Flex布局. Затем давайте разберем, как я использую этот пример.Flex布局осуществленный.

Общий расклад у нас такой:

Во-первых, мы организуем весь макет в триdiv.box, и дать самый внешнийdiv.wrapperнастраиватьdisplay:flex；:

Соответствующий код выглядит следующим образом:

<div class="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
<style>
.wrapper{
   display: -webkit-flex; 
   display: flex;
}
</style>

Затем в серединеdiv.boxВнесите коррективы:

Соответствующая модификация кода выглядит следующим образом:

<div class="wrapper">
    <div class="box"></div>
    <div class="box">
        <div class="top"></div>
        <div class="bottom"></div>
    </div>
    <div class="box"></div>
</div>
<style>
.wrapper{
   display: -webkit-flex; 
   display: flex;
}
</style>

нашFlex容器дляdiv.wrapper,Flex项目триdiv.box,div.boxвнутренний дочерний элементdiv.top,div.bottom, их представления не изменятся и останутся значениями по умолчанию.块级元素форма отображения, поэтому мы находимся вdiv.boxВнутренне добавленоdiv.top,div.bottomКаждая строка в родительском элементе.

Наконец вdiv.top,div.bottomразделить на дваdiv.imgbox, и датьdiv.topа такжеdiv.bottomнастраиватьdisplay:flex:

Соответствующая модификация кода выглядит следующим образом:

<div class="wrapper">
    <div class="box"></div>
    <div class="box">
        <div class="top">
            <div class="imgbox"></div>
            <div class="imgbox"></div>
        </div>
        <div class="bottom">
            <div class="imgbox"></div>
            <div class="imgbox"></div>
        </div>
    </div>
    <div class="box"></div>
</div>
<style>
.wrapper{
   display: -webkit-flex; 
   display: flex;
}
.wrapper .box .top, .wrapper .box .bottom{
    display: -webkit-flex; 
    display: flex;
}
</style>

Затем макет всей страницы в основном завершен в это время. Далее будем соответствовать图片Представлять:

<div class="wrapper">
    <div class="box">
        <img src='./1.png'/>
    </div>
    <div class="box">
        <div class="top">
            <div class="imgbox">
                <img src='./3.png'/>
            </div>
            <div class="imgbox">
                <img src='./4.png'/>
            </div>
        </div>
        <div class="bottom">
            <div class="imgbox">
                <img src='./5.png'/>
            </div>
            <div class="imgbox">
                <img src='./6.png'/>
            </div>
        </div>
    </div>
    <div class="box">
        <img src='./2.png'/>
    </div>
</div>

Обновите страницу, и общий эффект вышел:

Вы чувствуете, чтоFlex布局очень ароматный~

Затем вы можете просто отрегулировать интервал в соответствии с проектом дизайна. Если нам нужно сделать адаптивным, нам также нужно установить процент изображения:

.box img{
    width: 100%;
}

Конечный адаптивный эффект:

Гибкий макет немного крив, чтобы сэкономить страну для этого приложения.Он действительно более мощный и может применяться в большем количестве мест.Например, ранее мы упоминали макет страницы с 12 сетками, который можно реализовать с помощью гибкого макета. , Другие приложения о макете Flex Давайте изучим самостоятельно ~

4.4 Процентное расположение

Если у нас есть размер1200*562, если нет ограничения на размер изображения, при ширине экрана браузера меньше1200px, в браузере появится горизонтальная полоса прокрутки:

Если ширина экрана больше1200pxчас,浏览器Слева будет пустое место:

Так как же сделать так, чтобы это изображение покрывало весь браузер по горизонтали, чтобы полосы прокрутки не появлялись на экранах небольшого размера, а пробелы не появлялись на экранах большого размера?

百分比布局Это может помочь нам решить эту проблему легко.

Для предыдущего изображения, независимо от того, в каком размере находится браузер, мы устанавливаем для него ширину в процентах, чтобы оно заполняло окно браузера по горизонтали в браузере текущего размера, без полос прокрутки и пробелов:

В это время наши изображения будут адаптироваться к экранам различных размеров, не будут появляться полосы прокрутки и не будут появляться пробелы:

Если мы хотим добиться этого эффекта для других элементов, мы можем установить его ширину в процентах, чтобы мы могли добиться адаптивного эффекта.

После установки ширины элемента в процентах высоту задавать не нужно, а высота будет регулироваться в соответствии с пропорцией.

4.5 Переполнение текста

Давным-давно, когда я делал переполнение текста, я использовал字符串截取затем сращивание······Путь. Я не обновлял навыки в этой области с тех пор, и я использовал это в течение долгого времени сдуру. до этого времениgetк реализации文本溢出новые навыки, поэтому содержание кратко изложено ниже.

4.5.1 Переполнение однострочного текста

У нас есть следующий текст:

<p>Hello大家好，我是小土豆，关注"不知名宝藏程序媛"第一时间获取最新文章</p>
<style>
p{
    padding: 10px;
    border: 1px dashed rgb(100, 98, 98);
    color: rgb(100, 98, 98);
}
</style>

еслиpэлементаль宽度Он может вместить эту строку текста, а текстовое содержимое обычно отображается в одной строке:

В настоящее времяpэлементальwidthдля600px

еслиpэлементаль宽度Эта строка текста не может быть размещена, и текстовое содержимое будет автоматически перенесено для отображения:

В настоящее времяpэлементальwidthдля500pxВысота, а набора элементов нет

В настоящее время, если мы хотим, чтобы содержимое отображалось в одной строке, а избыточное содержимое использовалось······Вместо этого, как это сделать?

На самом деле все очень просто, триCSSсвойства могут быть легко решены:

p{
    padding: 10px;
    border: 1px dashed rgb(100, 98, 98);
    color: rgb(100, 98, 98);
    width: 500px;
    /* 以下便是解决单行文本溢出的三个CSS属性 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}

вwhite-spaceСвойства могут контролироватьсяpТекстовое содержимое внутри элемента не переносится:

overflow: hidden;Переполнение можно скрыть:

text-overflow: ellipsis;можно установить с省略号Покажите часть контента, которая переполняется и не отображается.

4.5.2 Переполнение многострочного текста

Ниже фрагмент текста:

<p>Hello大家好，我是小土豆，关注"不知名宝藏程序媛"第一时间获取最新文章|Hello大家好，我是小土豆，关注"不知名宝藏程序媛"第一时间获取最新文章|Hello大家好，我是小土豆，关注"不知名宝藏程序媛"第一时间获取最新文章</p>
<style>
p{
    padding: 10px;
    border: 1px dashed rgb(100, 98, 98);
    color: rgb(100, 98, 98);
    width: 500px;
    line-height: 30px;
}
</style>

Результаты отображения по умолчанию в браузере:

выполнить多行文本溢出Самый простой способ - использовать чистыйCSSреализовать:

p{
    padding: 10px;
    border: 1px dashed rgb(100, 98, 98);
    color: rgb(100, 98, 98);
    width: 500px;
    line-height: 30px;
    /* 纯css实现多行文本溢出的四个必要属性 */
    -webkit-line-clamp: 3; 
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow : hidden;
}

в-webkit-line-clampиспользуется для управления отображением текста行数,Установить как3Он представляет только отображаемый текст3行.

ДатьpПосле того, как элемент установит эти четыре необходимых атрибута, давайте посмотрим, как это работает:

Эй, случилось что-то непредвиденное: последняя строка текста была обрезана, поэтому отображалась часть четвертой строки. Не паникуйте, в это время мыpВысота строки элемента регулируется до35pxПросто хорошо:

см. много статей, в которых говорится-webkit-line-clampАтрибут является нестандартным атрибутом, толькоwebkitБраузер ядра. но на самом деле яFirefoxа такжеMicrosoft EdgeПротестировано и обнаружено, что это может быть достигнуто多行文本溢出эффект; толькоIE浏览器не поддерживается. (Вы, Даду, официально объявили, что Vue3 больше не будет поддерживать IE11, так что на данный момент я думаю, что это решение успешно O(∩_∩)О, ха-ха~)

Реализация курса文本溢出Способов гораздо больше, здесь перечислены только самые простые и удобные способы, остальные способы можете изучить самостоятельно, если вам интересно~

4.6 Наведение мыши для отображения маски

Реализация маски отображения при наведении мыши обычно находится в目标悬浮元素напишите скрытый элемент родного брата, затем передайте:hoverПоказать скрытые элементы.

Обычно используются скрытые элементы.绝对定位, так что этот пример также является предыдущим绝对定位приложение .

Во-первых, давайте напишем следующий код:

<div class="wrapper">
    <div class="target">
        div.target
    </div>
    <div class="mask">
        div.mask
    </div>
</div>
<style>
.target{
    width: 120px;
    height: 120px;
    padding: 10px;
    background-color: #ccc;
    color: #fff;
}
.mask{
    width: 120px;
    height: 120px;
    padding: 10px;
    background-color: rgb(192, 53, 53);
    color: #fff;
}
</style>

Содержимое приведенного выше кода очень простое, просто родительский элементdiv.wrapperОберните эти два родственных дочерних элемента:div.targetа такжеdiv.mask; кроме того, мы также устанавливаем дочерний элемент宽高,内边距,字体颜色а также背景色Это несколько общих свойств стиля.

Таким образом, приведенный выше код отображается в браузере следующим образом:

Итак, теперь наша цель: наведение курсора мыши наdiv.targetотображается, когдаdiv.mask.

4.6.1 Первый шаг

第一步Давайте сначала настроимdiv.maskположение: настроить его наdiv.targetположение и совпадают с ним.

Затем на этом шаге исследуетсяCSSОбщая идея такова: родительский элементdiv.wrapperнастраивать相对定位, дочерний элементdiv.maskнастраивать绝对定位И отрегулируйте смещение по мере необходимости.

/* 省略前面给子元素设置的`宽高`、`内边距`、`字体颜色`和`背景色`这些样式属性 */
.wrapper{
    position: relative;
}
.mask{
    position: absolute;
    top：0px;
}

Обратите внимание, что в стилях здесь отсутствуют некоторые базовые свойства, установленные ранее, и публикуются только стили, добавленные на этом шаге.

Затем вид браузера:

Вы видите, что первый шаг выполнен.

4.6.2 Второй шаг

Второй шаг — скрытьdiv.mask:

/* 省略前面给子元素设置的`宽高`、`内边距`、`字体颜色`和`背景色`这些样式属性 */
.mask{
    position: absolute;
    top: 0px;
    display: none;
}

4.6.3 Третий шаг

Третий и последний шаг заключается в достижении: наведите указатель мыши наdiv.targetэлемент, пустьdiv.maskпоказывать. Первую половину предложения этого требования, по-видимому, лучше выполнить, т. е. дляdiv.targetДобавить псевдокласс:hover, но какdiv.target:hoverпри создании родственного элементаdiv.maskпокажи это?

Тогда этот вопрос используетCSSиз相邻兄弟选择器（Adjacent sibling selector）достигать:

.target:hover + .mask{
    display: inline-block;
}

После того, как приведенный выше код будет завершен, давайте посмотрим на эффект:

Этот результат кажется доступным, но он неудовлетворителен, когда мы находимся вdiv.targetнаведение мышки на элемент,div.maskПроисходит мерцание.

Этот вопрос поначалу был очень запутанным, но из-за нехватки времени я не стал глубоко изучать причину, но нашел способ избежать этого. Когда я недавно делал обзор, я еще раз подумал об этом, и примерно угадал причину: при наведении мышки наdiv.targetпри подъеме,div.maskОтображение элемента; когда мышь движется, монитор мыши в настоящее время подвешен вdiv.maskэлемент, то на этот разdiv.target:hoverтерпит неудачу, результат неудачиdiv.maskспрятаться; когдаdiv.maskПосле того, как спрятался,div.target:hoverснова вступил в силу,div.maskпоказано снова. Когда мышь движется, этот процесс выполняется в цикле, поэтому появляетсяdiv.maskмигает.

Позже было изучено множество решений этой проблемы, и они перечислены для вас одно за другим.

Первое решение — ориентироватьсяhoverэлемент поdiv.targetк его родительскому элементуdiv.wrapper.

потому что наш родительский элементdiv.wrapperявляется элементом уровня блока по умолчанию и не имеет заданного размера, поэтому по умолчанию он расширяется до целой строки, поэтомуdiv.wrapper：hoverАссортимент представляет собой целую линейку. Таким образом, первое решение также должно контролировать размер родительского элемента, вы можете напрямую установить ширину родительского элемента или установить свойства для родительского элемента.display:inline-block;

.wrapper{
    position: relative;
    display: inline-block;
}
/* CSS选择器由“子元素选择器”变为“子元素选择器” */
.wrapper:hover > .mask{
    display: inline-block;
}

Остальные коды стилей остаются без изменений.

Второй вариантdiv.maskнастраиватьpointer-events: none;,Держатьhoverпо-прежнему определяется вdiv.targetна элементе.

.wrapper{
    position: relative;
}
.mask{
    /* 省略其余样式代码 */
    pointer-events: none;
}
/* hover目标元素依然是div.target */
.target:hover + .mask{
    display: inline-block;
}

5. Джанго и администратор Джанго

djangoЯвляетсяpython webкаркас, этоMVCОчень близкоMVTРамка:

И это встроено开发服务器, названныйSQLiteОблегченная база данных и бэкэнд-система управленияdjango admin, установка и использование относительно просты, и, вообще говоря, он по-прежнему очень удобен для фронтенд-разработчика.

между этим официальным сайтом文章管理Функция не очень сложная,UIТребования к вышеперечисленному отсутствуют, необходимо реализовать только две основные функции:登录а также文章的发布和编辑, поэтому просто используйтеDjangoРеализация фреймворка后台管理系统.

оDjangoУстановка и простое использование могут быть перемещеныОфициальный сайтилиучебник для новичков, то сразу приступайте к организации использования в этом проектеDjangoнесколько важных шагов.

5.1 Создать проект

местныйpythonа такжеdjangoПосле установки окружающей среды,cmdвыполнение командной строкиdjango-admin startproject 项目名称Проект может быть создан:

После успешного создания проекта войдите в корневой каталог проекта и выполните его в корневом каталоге проекта.django-admin startapp 模块名称Могут быть созданы сегментированные функциональные модули:

использоватьdjango-admin startappПосле команды создать сегменты функциональных модулей, обязательно настройте модуль вsettings.INSTALLED_APPSсередина:

   # 代码位置：/mySystem/mySystem/settings.py
   INSTALLED_APPS = [
        # ...省略部分代码
       'article'
   ]

Затем выполните его в корневом пути проектаpython manage.py runserver 8888Можно запустить внутреннюю службу. Если после выполнения команды консоль выводит следующую информацию, это доказывает, что后端服务Успешно запущено:

后端服务После успешного запуска информация консоли сообщила нам, что адрес службы:http://127.0.0.1:8888, затем мы посещаем это в браузереURLможет видетьdjangoСтраница по умолчанию, предоставляемая сервисом:

5.2 Генерация таблицы данных по умолчанию

Затем нам нужно создатьadmin管理系统Связанный默认数据表, то есть выполнять в корневом каталоге проектаpython manage.py migrate:

После завершения введите в браузереhttp://127.0.0.1:8888/adminможет получить доступdjangoкоторый предоставилadmin管理系统:

Войтиadmin管理系统требуется для входа в систему, поэтому следующее, что нам нужно сделать, этоadmin管理系统Завести аккаунт.

创建账号Он по-прежнему выполняется в корневом пути проекта.python manage.py createsuperuser, затем введите в командной строке用户名,邮箱,密码а также确认密码, вы можете успешно создать учетную запись.

Затем мы можем войти в систему с этой учетной записьюdjango admin后台管理系统, вот страница после успешного входа:

Есть ли какие-то неожиданные открытия на данный момент?后台管理系统первая функция登录уже сделано ╰(°▽°)╯.

5.3 Основные операции с таблицей данных

Первая функция, которую мы непреднамеренно завершили, затем следующая文章из发布а также编辑.

Сначала нам нужно создать数据表,существуетdjangoкадр, создать数据表Первым шагом является созданиеmodelsДобрый:

# *_*coding:utf-8 *_*
from django.db import models

# Create your models here.
class Article(models.Model):
    a_id = models.AutoField(primary_key=True, verbose_name="编号")  # 文章编号 主键 自动生成
    a_text = models.TextField(verbose_name="正文内容")   # 文章内容
    class Meta:
        verbose_name_plural='文章'

Расположение кода:/mySystem/article/models.py,использоватьdjang-admin startappСоздайтеarticleМодуль будет автоматически сгенерирован, когдаmodels.pyдокумент.
в кодеverbose_nameа такжеverbose_name_pluralсоответственно字段а также数据表определение中文名称, так что мы увидим позжеarticleтехпаспорта и таблицы字段Все на китайском языке, если эти два свойства не настроены, по умолчанию отображается английский язык.

Затем выполните его отдельно в корневом каталоге проекта.python manage.py makemigrationsа такжеpython manage.py migrateЗаказ:

python manage.py makemigrationsбудет основываться наmodels.pyопределено в файле数据表а также字段Создайте соответствующий файл инициализации таблицы данных, т.е./mySystem/article/migrations/0001_initial.py; последний будет генерироваться в соответствии с0001_initial.pyсоздание файла数据表; если позже表结构измените, пожалуйста, изменитеmodels.py, вы можете многократно выполнять эти две команды.

После успешного выполнения двух вышеуказанных команд数据表был создан, а затем нам нужно добавить это数据表зарегистрироваться наadminсередина:

# *_*coding:utf-8 *_*
from django.contrib import admin
from article.models import Article

# Register your models here.
admin.site.register(Article)

Расположение кода:/mySystem/article/admin.py,СоздайтеarticleМодуль будет автоматически сгенерирован, когдаadmin.py.

В это время, когда мы обновляем страницу, мы можем видеть то, что мы только что создали.articleВ даташите есть:

数据表зарегистрироваться наadminЭтот шаг обязателен, иначеadmin管理系统не будет показыватьarticleэтого техпаспорта

5.4 Настройка таблицы данных

для того, что мы только что создалиarticleтаблица данных, нажмите на страницу+Addкнопка, введите正文内容Нажмите на нижний правый уголSAVEкнопка добавления новой статьи:

models.pyТолько два поля определены в编号（a_id）а также正文内容（a_text）,в编号да自增主键, поэтому, когда мы добавляем статью, нам нужно только заполнить正文内容Вот и все.

нажмитеARTICLEили文章, можно просмотреть данные в таблице:

проверить список复选框, нажмите动作В раскрывающемся списке справа выберите删除所选的文章Вы можете удалить статьи:

Нажмите на номер статьи, чтобы изменить содержание соответствующей статьи:

Выше есть статья增,删,改,查Операция также является второй функцией, которую должна реализовать вся наша фоновая система управления.

Однако из приведенных выше результатов можно обнаружить, что список показываетArticle ObjectВместо конкретных данных и помимо фронта нашего数据表а также字段За исключением настройки для китайского языка, остальные кнопки управления имеют английский язык.

Эти две проблемыadmin管理系统Дисплей по умолчанию, конечно, мы также можем внести некоторые изменения в эти дисплеи.

5.4.1 Список определенных полей отображения

Чтобы список отображал определенные поля, первый способ — этоarticleопределение модели__str__метод и вернуть поля, которые вы хотите отобразить:

# *_*coding:utf-8 *_*
from django.db import models

# Create your models here.
class Article(models.Model):
    a_id = models.AutoField(primary_key=True, verbose_name="编号")  # 文章编号 主键 自动生成
    a_text = models.TextField(verbose_name="正文内容")   # 文章内容
    class Meta:
        verbose_name_plural='文章'
    def __str__(self):
        return self.a_text

Освежает в это время文章列表Вы можете увидеть эффект:

Другой способ -articleопределить соответствующиеArtcileAdminкласс, и вlist_displayПросто установите поля, которые должен отображать список, и, наконец, поместитеArticleAdminзарегистрироваться наadminсередина:

# *_*coding:utf-8 *_*
from django.contrib import admin
from article.models import Article

# 为article模型定义对应的ArtcileAdmin
class ArticleAdmin(admin.ModelAdmin):
    list_display = ('a_id','a_text')  # 设置列表需要展示的字段

# Register your models here.
admin.site.register(Article, ArticleAdmin) # 将ArticleAdmin也注册到admin中

Расположение кода:/mySystem/article/admin.py

Наконец, давайте взглянем на список статей с эффектами:

можно увидеть列表Мы успешно отобразили то, что определили.

5.4.2 Китайская конфигурация

Чтобы облегчить нашу работу, страница обычно настраивается в китайском режиме, затемadminсистема управления中文模式Его также очень легко реализовать непосредственно вsettings.pyопределить файл中间件Только что:

MIDDLEWARE = [
    'django.middleware.locale.LocaleMiddleware'
]

Расположение кода:/mySystem/mySystem/settings.py

После завершения настройки вы можете увидеть систему управления администратором в китайском режиме при обновлении страницы.

5.5 Вторичное развитие функций

После того, как таблица данных настроена, вы заканчиваете? Нет Нет Нет, функция статьи, которую мы реализовали, слишком просты, редактируйте только текстовое содержание статьи в виде простого текста, поэтому мы должны быть на этой основе.新增а также编辑Функция для вторичного развития.

Как правило, статья содержит поля, которые содержат как минимум:文章标题,文章作者,发布时间,正文内容,文章封面Ожидание этого содержимого, и поэтому необходимо新增а также编辑Осуществлять вторичную разработку; пока статья列表展示а также删除功能Все это относительно простые операции, и существующие функции уже могут быть удовлетворены.

Из браузера мы можем видеть新增文章страницаurlдляhttp://127.0.0.1:8888/admin/article/article/add/:

Затем мы можем сами настроить маршрут как:/admin/article/article/add/, а затем написать соответствующий视图文件а также模板文件.

Сначала нам нужно主路由Путь конфигурации в файле:

from django.contrib import admin
from django.urls import path

from django.urls import include # 新增代码
import article
urlpatterns = [
    path('admin/article/', include('article.urls')), # 新增代码
    path('admin/', admin.site.urls),
]

Расположение кода:/mySystem/mySystem/urls.py, новый код объясняется в примечаниях
Этот файл является основным файлом маршрутизации для всего проекта, все запросыurlОни распределяются отсюда.Как правило, для модульности проекта и лучшего разделения труда разные модули будут направляться в соответствующие модули.urls.pyфайл,

Затем настройте вторую половину пути кarticleВ файле маршрутизации под модулем:

from django.urls import path

from article import views

urlpatterns = [
    path('article/add/', views.addArticle),
]

Расположение кода:/mySystem/article/urls.py

Затем пишем соответствующий视图函数:

from django.shortcuts import render

# Create your views here.
def addArticle(request):
    return render(request, 'add.html', {})

Расположение кода:/mySystem/article/views.py

В файле представления мы нацеливаем/admin/article/article/add/Запрос отображает файл шаблонаadd.html, поэтому нам также необходимо создать соответствующий файл шаблона.

первый в/mySystem/article/Создать папкуtemplates:

затем вtemplatesСоздано в каталогеadd.html:

мы вadd.htmlНапишите какой-нибудь простой контент в:

<p>新增一些文章吧</p>

Последний шаг также требуетsettings.pyНастройте расположение файла шаблона в:

import os # 新增
TEMPLATES = [
    {
        # 省略代码...
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        # 省略代码...
    },
]

Расположение кода:/mySystem/mySystem/settings.py

В это время мы обновляем страницу:

Мы обнаружим, что новая страница была перенаправлена ​​на наш пользовательскийadd.html, то мы можемadd.htmlВ бесплатной игре, например, добавление элементов управления формами, встроенный компилятор форматированного текста и так далее.

То же самое относится и к функции редактирования статьи, сначала найдите полную функцию редактирования.URL:http://127.0.0.1:8888/admin/article/article/2/change/.

внимательно проанализируй этоURLнайдет этоURLЕсть один параметр, который меняется, это артикул.编号, так что наш路由необходимо использовать конфигурацию正则соответствовать:

from django.urls import path, re_path
from article import views
urlpatterns = [
    path('article/add/', views.addArticle),
    re_path('article/(\d+)/change/', views.updateArticle), # 正则路径 
]

Расположение кода:/mySystem/article/urls.py
Следует отметить, что местная сборкаdjangoВерсия3.x,так正则路由необходимо использоватьre_pathнастроить; если этоdjango 1.xверсия, либо普通路由еще正则路由, может быть использованurlЭто может быть сопоставлено, пожалуйста, обратитесь к деталям官方文档.

Далее для文章编辑Напишите соответствующую функцию视图函数а также模板文件Все, эта штука такая же, как и предыдущая новая функция, так что больше говорить не буду.

потому что мы新增а также编辑Для вторичной разработки функций также необходимо реализовать соответствующие提交保存数据库логика. такие как наши文章新增функция, вadd.htmlПосле добавления формы в提交функция, это提交Функция состоит в том, чтобы заполнить пользователя文章信息Зафиксируйте и сохраните в базу данных. Затем эта функция также должна сначала настроить маршрутизацию:

from django.urls import path, re_path
from article import views
urlpatterns = [
    path('article/submitAdd', views.submitAdd) # 将文章内容保存到数据库
]

Расположение кода:/mySystem/article/urls.py
Предыдущая конфигурация здесь опущена文章新增а также文章编辑маршрутизация

Затем напишите соответствующую функцию просмотраsubmitAdd.

После того, как два вышеуказанных шага выполнены, когда внешний интерфейс отправляет форму,urlдля:/admin/article/article/submitAdd, после того как пользователь заполнит содержимое и нажмет «Отправить», серверная часть сохранит данные в базе данных.

5.6 Резюме

Тогда вся back-end функция здесь заканчивается, и большинство функций используется нами.django admin, в то время как文章新增а также文章编辑Функция была разработана дважды.

Если внутренние функции сложны, а требования к пользовательскому интерфейсу высоки во всем проекте, нам, возможно, придется реализовать их самостоятельно с нуля.后台管理系统,для后台管理系统Самая основная и важная функция登录功能, я также резюмировал эту функцию ранее, используяdjango+vueПодробнее о реализованных проектах вы можете узнать в следующих двух статьях:

«Vue в сочетании с Django-Rest-Framework для аутентификации при входе (1)»

«Vue в сочетании с Django-Rest-Framework для аутентификации при входе (2)»

6. Развертывание проекта

Развертывание проекта не сложно, но на этом этапе следует обратить внимание на некоторые моменты.

6.1 Развертывание внутреннего проекта

Для серверных проектов сервер также должен предоставлятьpythonа такжеdjangoFramework, туториал по установке не упоминается, можете сами поискать в интернете.

Однако следует отметить, что лучше всего сначала определить服务器конецpythonверсия иdjangoверсии, потому что разные версииdjangoнужно другоеpythonПоддержка версии:

Django 1.xиспользоватьpython2окружающая обстановка

Вот объяснение того, почему вам нужно сначала определить версию среды на сервере.
иногда мы используем服务器может уже существоватьpythonсреда, если онаpython2среда, чтоdjangoМожно только выбрать1.xверсия;
еслиpython3среда, чтоdjangoНет ограничений на выбор версии;
И большую часть времени服务器будет сосуществоватьpython2а такжеpython3, нам все еще нужно решить, какой из них использоватьpythonВерсия.

Если мы создадим его непосредственно локально, может возникнуть проблема несовместимости версий программного обеспечения между локальной средой и средой сервера.

После определения версии программного обеспечения на сервере наша локальная среда сборки согласуется с сервером.После написания функции мы можем вытащить весь код локальной директории в директорию на сервере, и последующие локальные тесты не будут вызваны проблемы с версией Нормально, но сервер сообщил об ошибке.

После того, как локальный код загружен на сервер, он выполняется в корневом каталоге серверного проекта.python manage.py migrate, может быть создана соответствующая таблица данных, а тестовые данные, относящиеся к базе данных, созданной в локальной среде разработки, могут быть синхронизированы с сервером.

Перед синхронизацией тестовых данных о БД, сгенерированных в локальной среде разработки, необходимо убедиться, что файл инициализации БД сгенерирован локально, способ генерации файла описан выше и здесь повторяться не будет.

После того, как эти приготовления завершены, если это проект для вашей собственной практики, вы можете начать его напрямую.djangoВстроенныйserverТо есть разворачивается весь back-end проект, если это проект уровня компании, то лучше всего установить его на серверApacheа такжеmod_wsgiдля развертывания проекта.

6.2 Развертывание внешнего проекта

Проект внешнего развертывания очень прост, в服务器УстановитьnginxЗатем загрузите скомпилированный и упакованный исходный код в服务器где-то модифицируюnginxфайл конфигурацииnginx.conf:

server {
    listen 80;  # 通过那个端口访问前端网页
    server_name localhost;

    location / {
        root /var/www/lr/;   # 前端编译打包后的代码路径
        try_files $uri $uri/ /index.html;
        index index.html index.htm;
    }
    location /admin/ {  # 将以/admin/开头的请求转发到proxy_pass 配置的服务
        proxy_pass http://127.0.0.1:8888/admin/; # 后端服务路径
    }
}

7. Решение проблем

7.1 Проблемы со стилями развертывания

После того, как интерфейсные функции разработаны локально, они развертываются на сервере, но оказывается, что многие пользовательские стили не действуют. Однако, когда браузер просматривает элемент, он обнаруживает, что может видеть наш пользовательский стиль, но его приоритет относительно низок иelement-uiстиль переопределен.

Наиболее правильным решением этой проблемы являетсяmain.jsсерединаelementПорядок, в котором файлы стилей импортируются, находится вAppПередняя часть компонента:

import 'element-ui/lib/theme-chalk/index.css'
import App from './App'

7.2 Проблема мерцания при наведении

Вызвано маской отображения при наведении курсора мышиhover闪烁问题Мы уже делали резюме ранее, поэтому я не буду повторяться здесь, просто перечислю эту проблему.

На самом деле, во всем процессе есть не только эти две проблемы, другие проблемы были написаны в мерах предосторожности в предыдущих частях, поэтому здесь нет резюме, есть также часть, которая не была записана, когда возникла проблема, и Я не могу вспомнить это сейчас o( ╥﹏╥)o

8. Конец

На этом весь проект завершен, особо сложного ничего нет, но есть некоторые моменты, которые позволяют освоить новые навыки.

Конечно, весь процесс — это не только технический прогресс, но и уроки крови и слез, поэтому в следующей статье будут обобщены опыт и уроки этого проекта, так что до новых встреч~

9. Пишите в конце

Если эта статья была вам полезна, ❤️Подпишитесь + Нравится ❤️Поощряйте автора

статья公众号начать, следовать不知名宝藏程序媛Получите последние статьи в первый раз

Пополнение ❤️~