By: Small Potato Blog park: www.cnblogs.com/HouJiao/ Nuggets: juejin.cn/user/243617…

1. Introduction

Recently, I have been working on an official website. There are six items in the menu bar of the home page, corresponding to six large modules. The presentation form of each module is roughly as follows:

1.1 Pure picture display

A main image is spread horizontally across the browser:

1.2 Table Display

1.3 Picture + text two columns layout display

The first left-right two-column layout:

The second left and right column layout:

1.4 Picture + text two lines layout display

1.5 12 Picture display of the three rows and four columns of the palace

1.6 Waterfall flow picture display

1.7 Dynamic Effect

In addition to the above layouts, there are also some mouse hover dynamics.

1.8 News information module

There is also a news information module, you can view the details of the news and the news list with pagination function. Although the details of this module are not discussed in detail, it is known that this module may also need a simple background management system to publish and edit articles.

2. How long did it take

At that time, after reading the design draft, I felt that the content of the official website was a little too much, because many layouts were not quite the same, but also need a background management system; Finally, after some consideration, I decided the workload of 3 weeks (excluding weekends).

It took two weeks to finish the project. Due to the lack of communication in the early stage, UI rework occurred, and some functions were improved later, so it took another week. The overall delivery was on time.

Then some of the styles in this project, the realization of the function and the whole process of some problems summed up, I hope to give you some reference.

3. This article is for those people

Want to learn CSS skills, but don’t know where to start
Just a quick review of CSS skills
Have the intention to do the official website project recently
Pure front-end development, have the intention to enter the back-end, hope to independently do a set of complete but not complex front-end projects

4. Page layout and some CSS effects

Do this kind of project on the official website, the main test of a person’s CSS skills, then in the process of completing the project have used those CSS skills?

positioning: Relative positioning, absolute positioning
Elastic layout: Flex layout
Percentage layout
Text overflow: Single-line text overflow, multi-line text overflow
Mouse hover display mask:displayAnd absolute positioning

These are some of the CSS techniques used throughout the project, so let’s review them and some practical applications.

4.1 Relative Positioning

The element remains in its original position in the flow of the document. By setting top, bottom, left, and right, the element can be moved relative to its original position without affecting the layout of other elements.

4.1.1 Relative Positioning – Application 1

In projects, the following examples are implemented using relative positioning.

Our basic layout is as follows:

<p class="logo">The company<br/>logo</p>  <! -- this is the img element -->
<p class="name">The company<br/>X<br/>The name of the</p>
Copy the code

P.lodo can be replaced directly with img element in the later stage

Normally, the code above will render as follows (the size needs to be set with CSS) :

At this point, we can set the relative positioning of P. name. and set its offset to achieve the final effect.

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

4.1.2 Relative Positioning – Application 2

There is a column of data in the table named, we need to add the corresponding logo in front of the data.

Normally, you don’t add any styles to the logo, it looks something like this:

It is obvious that the logo is not in the right position: the logo should be vertically centered with more space between it and the text.

Increase the spacing between the logo and the text by setting the logo to either padding-right or margin-right.

Vertical-align is usually used to adjust the vertical center of the logo, but we often find that the effect of vertical-algin is always unsatisfactory, so the relative positioning is a very good choice at this time. We can set the relative positioning of the logo, and then set top to offset the logo downward.

.logo{
    positive: relative;
    top: 4px;
}
Copy the code

4.2 Absolute Positioning

When an element is absolutely positioned, it is removed from the normal document flow and its position in the document flow is removed, thus affecting the element that follows it.

After setting an offset for an absolutely positioned element, the position of the absolutely positioned element is relative to the nearest positioned ancestor element, or if the element has no positioned ancestor element, to the original containing block HTML element.

To be positioned is to set position: relative; Or position: absolute; . When the block-level element is absolutely positioned, its content will no longer fill the entire browser line by default, its width will be stretched by the content.

Specific applications of absolute positioning will be found later.

4.3 Flexible Layout

A Flex layout, also known as an elastic layout, is achieved by giving elements a display: Flex setting.

Display: -webkit-flex; display: -webkit-flex; display: -webkit-flex

If the element has display:flex set, the element is called a Flex container, and the children within the element are called Flex projects.

Div, as we all know, is a block-level element.

<div class="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
Copy the code

So this code looks like this in the browser:

If we set display:flex to div.wrapper; Div. Wrapper is a Flex container, its children div. Box are Flex items, and the layout should look like this:

That is, Flex items inside a Flex container become inline elements, arranged horizontally and left aligned by default.

Horizontal alignment of Flex projects can be controlled by setting context-content of the Flex container.

More on Flex layouts can be found here

Let’s take a look at the Flex layout application in the project.

4.3.1 Application of elastic Layout

The following module applies the Flex layout in the project:

The module consists of six pictures of different sizes, and the six pictures are spliced into a complete large picture.

When I started to see this design, I didn’t think much about it, and when I really do, I started to scratch my leg O (╥﹏╥) O. A search on the Internet shows that this layout can be roughly called a waterfall layout.

After looking at some methods on the Internet, I always feel that I don’t understand them very well (actually, because I have been doing page layout, my brain can’t react to them), so I am thinking about how to realize the current demand first.

So my mind diverged, and I tried floating + relative positioning at the beginning, and I did realize the basic layout. However, as the parent element lost height due to floating, a hover feature could not be implemented later, and this method was abandoned after some twists and turns.

The float causes the height of the parent element to collapse

After some consultation, I came up with a very simple and adaptive solution: the Flex layout. Let’s break down how my example is implemented using Flex layout.

Our overall layout is as follows:

First we organize the layout into three div. boxes and set display:flex to the outermost div.wrapper; :

The corresponding code is as follows:

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

Next, we’ll organize the div. Box in the middle:

The corresponding code is modified as follows:

<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>
Copy the code

Our Flex container is div.wrapper, and the Flex project is three div.boxes. The internal elements div.top and div.bottom remain the default block-level elements. So we add div. Top and div. Bottom inside the div. Box to each line of the parent element.

Div. Top div. Bottom div. Imgbox display:flex: div. Top div. Bottom div.

The corresponding code is modified as follows:

<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>
Copy the code

The layout of the page is now complete. Next, we introduce the corresponding image:

<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>
Copy the code

Refresh the page and you’ll see what it looks like:

There is no instant feeling that Flex layout really smells ~

Then it is ok to simply adjust the spacing according to the design draft. If we want to do adaptive, we also need to set a percentage for the image:

.box img{
    width: 100%;
}
Copy the code

Final adaptive effect:

Flexible layout for the application of a little curve to save the country’s feeling, it is really more powerful can be applied there are more, such as we mentioned 12 grid page layout, you can use Flex layout to achieve, more about the Flex layout of the application we explore ~

4.4 Percentage Layout

Let’s say we have an image with a size of 1200 x 562, and if we don’t set any limits on the size of the image, the browser will have a horizontal scroll bar when the screen width is less than 1200px:

When the screen width is greater than 1200px, there will be blank space on the left side of the browser:

How do you get this image to spread across the browser so that it doesn’t have a scrollbar on the smaller screen or a blank space on the larger screen?

The percentage layout can help us solve this easily.

For the previous image, no matter what size the browser is, we set a percentage width for it so that it spreads horizontally across the browser at the current size, with no scrollbars and no white space:

At this point, our images will adapt to various screen sizes, with no scroll bars and no white space:

If we wanted to do the same for other elements, we could set the width to a percentage, which would be adaptive.

After setting a percentage width for an element, the height does not need to be set again; the height adjusts proportionally

4.5 Text Overflow

A long, long time ago, I used to do text overflow by intercepting strings and then concatenating them. Behind has not been to update this aspect of skill, silly with a long time. Until this time I get the new skills to implement text overflow, so I’ll summarize it below.

4.5.1 Single-line text Overflow

We have the following text:

<p>Hello everyone, I'm Little Potato, follow the "unknown treasure program yuan" first time to get the latest articles</p>
<style>
p{
    padding: 10px;
    border: 1px dashed rgb(100.98.98);
    color: rgb(100.98.98);
}
</style>
Copy the code

If the p element is wide enough to hold this line of text, the text content is normally displayed on one line:

The width of the p element is 600px

If the width of the p element does not fit the line, the text is wrapped:

The width of the p element is 500px and the height of the element is not set

What if we want the content to be displayed in a single line and use… instead of…?

In fact, it is very simple, three CSS properties can be easily solved:

p{
    padding: 10px;
    border: 1px dashed rgb(100.98.98);
    color: rgb(100.98.98);
    width: 500px;
    /* Here are the three CSS properties */ to solve single-line text overflow
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}
Copy the code

Where the white-space attribute can control the text content within the P element without newlines:

overflow: hidden; Overflow can be hidden:

text-overflow: ellipsis; You can set the ellipsis to show the overflow and not show the content.

4.5.2 Multi-line text Overflow

Here’s the text:

<p>Hello everyone, I'm a small potato, focus on "luca brasi unknown treasure program" the first time for the latest article | Hello everybody is good, I'm a small potato, focus on "luca brasi unknown treasure program" the first time for the latest article | Hello everybody is good, I'm a small potato, focus on "luca brasi unknown treasure program" the first time for the latest articles</p>
<style>
p{
    padding: 10px;
    border: 1px dashed rgb(100.98.98);
    color: rgb(100.98.98);
    width: 500px;
    line-height: 30px;
}
</style>
Copy the code

Default display result in browser:

The easiest way to do this is with pure CSS:

p{
    padding: 10px;
    border: 1px dashed rgb(100.98.98);
    color: rgb(100.98.98);
    width: 500px;
    line-height: 30px;
    /* Pure CSS implements the four necessary attributes */ for multi-line text overflow
    -webkit-line-clamp: 3; 
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow : hidden;
}
Copy the code

Wherein, -webkit-line-clamp is used to control the number of lines displayed in the text. Setting it to 3 means that only 3 lines are displayed in the text content.

With the four required attributes set for the p element, let’s see what happens:

Well, something happened. The last line of text seems to have been truncated so that part of the fourth line is displayed. Don’t panic, at this point we can adjust the line height of the P element to 35px:

See many articles that say the -WebKit-line-clamp property is a non-standard property that only works with webKit kernel browsers. But I actually tested it in Firefox and Microsoft Edge and found that it was possible to overflow multiple lines of text; Only Internet Explorer does not support this function. (Udad officially announced that Vue3 will no longer support IE11, so consider this solution a success.)

Of course, there are many ways to achieve text overflow, here is only the most simple and convenient method, others can be interested in their own research ~

4.6 Mouse hover display mask

Hover mask is usually implemented by writing a hidden element at the same level as the target hover element, and then using :hover to display the hidden element.

Hidden elements usually use absolute positioning, so this example is also an application of absolute positioning.

First let’s write the following code:

<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>
Copy the code

The content of the above code is very simple. A parent element, div.wrapper, wraps the two sibling child elements: div.target and div.mask. In addition, we set the child elements with the general style attributes of width and height, interior margins, font color, and background color.

So the code above looks like this in the browser:

Now our goal is to display div. Mask while hovering over div. Target.

The first step 4.6.1

The first step is to reposition div.mask: set it to the position of div.target and overlap it.

The parent div. Wrapper is positioned relative, and the child div. Mask is positioned absolute, and the offset is adjusted as needed.

/* Omit the 'width', 'padding', 'font color' and 'background color' style attributes */ that were previously set for the child elements
.wrapper{
    position: relative;
}
.mask{
    position: absolute;
    top:0px;
}
Copy the code

Note that the styles omit some of the basic attributes set earlier and only post the styles added in this step.

Then the browser view:

You can see that the first step is done.

4.6.2 the second step

The second step is to hide div.mask:

/* Omit the 'width', 'padding', 'font color' and 'background color' style attributes */ that were previously set for the child elements
.mask{
    position: absolute;
    top: 0px;
    display: none;
}
Copy the code

4.6.3 the third step

The third and final step is implementation: hover over the div.target element to make the div.mask appear. Div. Target () :hover () :hover (); div. Target () :hover ()

This problem can be achieved using the Adjacent Sibling selector of CSS:

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

With the above code done, let’s look at the effect:

The result seems to be there, but it’s not. When we move the mouse over the div.target element, div.mask flashes.

This problem was also very confusing at the beginning, but because of the time, I did not study the reason in depth, but found some ways to avoid it. The div.mask element appears when the mouse hovers over div.target. Div. Target :hover is disabled when the mouse cursor is hovering over the div. Mask element. When div. Mask is hidden, div. Target :hover takes effect again, and div. Mask is displayed again. This happens in a loop as the mouse moves, so div.mask flashes.

There are many solutions to this problem, listed one for you.

The first solution is to change the target hover element from div. Target to its parent div. Wrapper.

Because our parent div. Wrapper element is the default block-level element and has no size, it defaults to a full line, so div. Wrapper: hover is a full line. So the first solution also needs to control the size of the parent element. You can either set the width of the parent element directly or set the display:inline-block attribute for the parent element.

.wrapper{
    position: relative;
    display: inline-block;
}
/* CSS selector changes from "child selector" to "child selector" */
.wrapper:hover > .mask{
    display: inline-block;
}
Copy the code

The other style code remains unchanged

The second option is to set pointer-events: None for div.mask; Hover is still defined on the div. Target element.

.wrapper{
    position: relative;
}
.mask{
    /* omit the rest of the style code */
    pointer-events: none;
}
/* Hover target element is div. Target */
.target:hover + .mask{
    display: inline-block;
}
Copy the code

5. Django and Django Admin

Django is a Python Web framework that is very close to MVC as an MVT framework:

It also has its own development server, a lightweight database named SQLite and a back-end management system, Django Admin, which is relatively simple to install and use, and generally very friendly to a front-end developer.

Since the article management function of the official website is not very complicated, and there are no requirements on the UI, only two basic functions need to be implemented: login and article publishing and editing, so Django framework is used to implement the background management system.

For details on how to install and use Django, go to the official website or beginner’s tutorial. Here’s a quick overview of the important steps to using Django in this project.

5.1 Creating a Project

After the local Python and Django environments are installed, create a project by executing the django-admin startProject project name on the CMD command line:

After the project is successfully created, go to the project root directory and run the django-admin startApp module name in the project root directory to create a subdivided function module:

After creating a subdivided function module using the django-admin startapp command, be sure to configure the module into settings.installed_apps:
   Location: # code/mySystem mySystem/Settings. Py
   INSTALLED_APPS = [
        #... Omit some code
       'article'
   ]
Copy the code

To start the back-end service, run Python manage.py runServer 8888 from the project root. After the command is executed, if the following information is displayed on the console, the back-end service is successfully started:

After the backend service is successfully started, the console information tells us that the service address is http://127.0.0.1:8888. If you visit this URL in your browser, you will see the default page provided by the Django service:

5.2 Default data table generation

You will then need to create default tables related to the admin system by executing Python manage.py migrate in the project root directory:

Input is completed, the browser http://127.0.0.1:8888/admin you can access to the django admin management system:

You need to log in to the admin system, so the next thing we need to do is to create an account for the admin system.

To create an account, run Python manage.py createsuperuser in the project root path, then enter the user name, email address, password, and confirm password on the command line.

Then you can use this account to log in to the Django admin system.

To this step is there is no surprise that the first function of the backend management system login is completed ╰(°▽°).

5.3 Basic Operations on data tables

The first function is already done by accident, and the next step is to publish and edit articles.

First we need to create a data table. In the Django framework, the first step in creating a data table is to create a Models class:

# *_*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="Number")  # Primary key is automatically generated
    a_text = models.TextField(verbose_name="Body content")   # Article content
    class Meta:
        verbose_name_plural='articles'

Copy the code

Code position: / mySystem/article/models. Py, use djang – admin startapp create article module automatically generated models. Py files. Verbose_name and verbose_name_name define Chinese names for fields and tables, respectively, so the article table and the fields in the table will all be Chinese. If these two properties are not configured, English is displayed by default.

Run python Manage. py Makemigrations and Python Manage. py migrate in the root directory of the project.

Python manage. Py makemigrations will according to the models. Py file defined in the data tables and fields to generate the corresponding data table initialization file, namely/mySystem/article/migrations / 0001 _initial. Py. The latter creates the data table from the generated 0001_initial.py file; If the table structure changes later, modify models.py and repeat the two commands.

After the above two commands are executed successfully, the tablespace has been created, and then we need to register the tablespace with admin:

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

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

Code position in: / mySystem/article/admin. Py, create the article module automatically generates the admin. Py.

When we refresh the page, we can see the article table we just created:

This step is not missing, otherwise the admin system will not display the article table

5.4 Data table Customization

For the Article data table we just created, click the +Add button on the page, enter the body content, and click the SAVE button in the lower right corner to Add an article:

In models.py, only two field numbers (a_id) and text content (a_text) are defined. The number is an autoincrement primary key, so we only need to fill in the text content when adding articles.

Click ARTICLE or ARTICLE to view the data in the table:

To delete an article, check the check box in the list, click the drop-down box on the right of the action, and select Delete the selected article:

Click the article number to modify the corresponding article content:

The above is to add, delete, change, check the operation of the article, but also our whole background management system needs to achieve the second function.

However, we can see from the above results that the list shows Article Object instead of specific data, and except for the Chinese we set for the data table and fields, the other operation buttons are in English.

These two problems are actually the default display of the admin system, of course we can also customize the display.

5.4.1 List Displays specific fields

The first way to make a list display a specific field is to define a __str__ method for the article model and return the desired field:

# *_*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="Number")  # Primary key is automatically generated
    a_text = models.TextField(verbose_name="Body content")   # Article content
    class Meta:
        verbose_name_plural='articles'
    def __str__(self) :
        return self.a_text
Copy the code

When you refresh the article list, you can see the effect:

Another way is to define the ArtcileAdmin class for article and set the fields to display in the list_display list. Finally, register the ArticleAdmin with admin:

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

Define the corresponding ArtcileAdmin for the article model
class ArticleAdmin(admin.ModelAdmin) :
    list_display = ('a_id'.'a_text')  Set the fields to be displayed in the list

# Register your models here.
admin.site.register(Article, ArticleAdmin) # Register ArticleAdmin with admin as well
Copy the code

Code position in: / mySystem/article/admin. Py

Finally, let’s look at the list of effects articles:

You can see that the list has successfully displayed the content we defined.

5.4.2 Chinese Configuration

Chinese mode is also very easy to implement for the admin system. You can define a middleware in settings.py:

MIDDLEWARE = [
    'django.middleware.locale.LocaleMiddleware'
]
Copy the code

Code position in: / mySystem/mySystem/Settings. Py

After the configuration is complete, you can see the Admin management system in Chinese mode on the refresh page.

5.5 Secondary development of functions

Do you think that’s the end of the table customization? No, no, no, the previous article function is too simple, can only be in the form of pure text to edit the body content of the article, so next we need to do a secondary development of the new and editing functions of the article on this basis.

Under normal circumstances, an article contains fields at least: the title of the article, the author of the article, the release time, the body content, the cover of the article and so on, and therefore need to add and edit the article for secondary development; The list display and deletion functions of the article are relatively simple operations, and the existing functions can be satisfied.

From the browser, we can see new posts page url to http://127.0.0.1:8888/admin/article/article/add/:

Then we can configure a route for: / admin/article/article/add /, then write the corresponding view files and template files.

First we need to configure the path in the main routing file:

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

from django.urls import include # Add code
import article
urlpatterns = [
    path('admin/article/', include('article.urls')), # Add code
    path('admin/', admin.site.urls),
]
Copy the code

Code position: / mySystem mySystem/urls. Py, add the code in the remark in the file for the entire project by the file of the main road, all the request url from here began to distribute, generally in order to project a modular and better division of labor, the different modules will be routed to the corresponding module urls. Py file,

Then configure the latter part of the path to the routing file under the article module:

from django.urls import path

from article import views

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

Code position: / mySystem/article/urls. Py

Then we write the corresponding view function:

from django.shortcuts import render

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

Code position: / mySystem/article/views. Py

We view file/admin/article/article/add/request rendering a template file. Add HTML, so we need to create the corresponding template file.

First create the templates folder in /mySystem/article/ :

Then create add.html in the templates directory:

Let’s write something simple in add.html:

<p>Add some articles</p>
Copy the code

The final step is to configure the location of the template file in settings.py:

import os # new
TEMPLATES = [
    {
        # omit code...
        'DIRS': [os.path.join(BASE_DIR, 'templates')].# omit code...},]Copy the code

Code position: / mySystem mySystem/Settings. Py

At this point we are refreshing the page:

We’ll notice that the new page is already routed to our custom add.html, which gives us the freedom to do whatever we want in Add.html, such as adding form controls, embedding rich text compilers, and so on.

For articles editing function is the same method, first find the editing features complete URL: http://127.0.0.1:8888/admin/article/article/2/change/.

Careful analysis of this URL will find that one parameter in this URL is changed, that is, the article number, so our route configuration must use the re to match:

from django.urls import path, re_path
from article import views
urlpatterns = [
    path('article/add/', views.addArticle),
    re_path('article/(\d+)/change/', views.updateArticle), # regular path
]
Copy the code

Code position in: / mySystem/article/urls. Py is important to note that the local structures of django version for 3 x, so regular route is to use re_path to configuration; If django 1.x is used, you can use url matching for both regular and regular routes. For details, see the official documentation.

The next step is to write the corresponding view function and template file for the article editing function, which is the same as the previous new function, so there is no more to say.

Since we are redeveloping the new and edit functions, we also need to implement the corresponding commit save database logic. For example, after the new form is added to add.html, there needs to be a corresponding submission function, which is to submit and save the article information filled by users to the database. This function also configures the route:

from django.urls import path, re_path
from article import views
urlpatterns = [
    path('article/submitAdd', views.submitAdd) Save the article content to the database
]
Copy the code

Code position in: / mySystem/article/urls. Py omitted here in front of the articles in new and edit the routing configuration

Then write the corresponding view function submitAdd.

After the completion of the above two steps, the front-end when submitting the form url: / admin/article/article/submitAdd, click the user fill in content submitted, the back-end data will be saved to the database.

5.6 summary

That’s the end of the back-end functionality, most of which we’ve used with Django Admin, as well as a secondary development of post additions and post editing.

If the backend functions in the whole project is complex and the UI requirements is higher, that we might have to start from 0 to realize a background management system, for the most basic and important function of background management system is the login function, before I had a summary about the function, is to use django + vue implementation project, detail can check the following two articles:

Django-rest-frameword (1)

Vue with Django-Rest-FrameWord (2)

6. Project deployment

Project deployment isn’t complicated, but there are a few caveats to this step.

6.1 Back-end Project Deployment

For back-end projects, the server also needs to provide python and Django frameworks.

Note, however, that it is best to determine the Python and Django versions on the server first, because different versions of Django require different Python versions:

Django 1.x uses python2

Here’s why you need to determine the version of the environment on the server first. In some cases, you may be using a Server that already has Python. If python2 is used, Django can only use version 1.x. If python3 is used, there is no limit to the choice of django versions. And most of the time the server will have both Python 2 and Python 3, so we still have to decide which python version to use.

If we directly build in the local environment, there may be a problem of inconsistency between the local environment and the server environment software version.

After determining the version of the software in the server, we can keep the local environment consistent with the server. After writing the function, we can pull the local whole directory code to a directory in the server, and the subsequent local test will not be normal because of the version problem and the server error.

Once the local code is pulled to the server, python Manage.py Migrate is executed at the root of the server project to generate the corresponding data tables and also synchronize test data generated in the local development environment for the database to the server.

Before synchronizing test data about the database generated in the local development environment, ensure that the database initialization file is generated locally, as described earlier.

If you are working on your own projects, you can simply start django’s built-in server and the whole backend project will be deployed. For company-level projects, it is best to deploy the project by installing Apache and mod_WSGI on the server.

6.2 Front-end Project Deployment

The front-end deployment project is as simple as installing nginx on the server, uploading the compiled and packaged source code somewhere on the server, and modifying the nginx configuration file nginx.conf:

server { listen 80; Server_name localhost; location / { root /var/www/lr/; Try_files $uri $uri/ /index.html; index index.html index.htm; } the location/admin / {# will begin with/admin/forward requests to proxy_pass proxy_pass http://127.0.0.1:8888/admin/; configuration services # backend service path}}Copy the code

Problem solving

7.1 The deployment style is Abnormal

Once the front-end functionality was developed locally, it was deployed to the server, but many of the custom styles didn’t work. But when the browser looks at the element, it will see our custom style, but it has a lower priority and is overwritten by the Element-UI style.

The most appropriate solution to this problem is to place the element style file in main.js in the first order of the App component:

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

7.2 Hover flicker problem

Hover display mask caused by the hover problem before we have done a summary, here is not repeated, just list this problem.

In fact, there are not only these two problems in the whole process, other problems have been written in the previous parts of the notes, so there is no summary here; There is also part of the problem when there is no record, now can not recall O (╥﹏╥) O

End of 8.

Then the whole project is concluded, nothing particularly complicated, but I also learned new skills in part of the content.

Of course, there are not only technical progress in the whole process, but also lessons of blood and tears, so the next article will summarize the experience and lessons of this project, so see you next time ~

9. Write at the end

If this article has helped you, please follow ❤️ + like ❤️ and encourage the author

Article public number first, focus on unknown treasure program yuan for the first time to get the latest article

Ink ❤ ️ ~

How long does it take to make an official website