Django + Vue. js: An example of building the frontend and backend Separation Project, djangovue. js

Django + Vue. js: An example of building the frontend and backend Separation Project, djangovue. js

At the time of writing this article, I learned how to use Markdown.

I am a scum, and everything is learned by myself, so there is no system or system learning. The main purpose here is to split the frontend and backend of the project.

Assume that django and vue. js are available on your computer. If not, the installation process of vue. js is as follows. Django has been written before, so I won't go into details.

1. normal process of building the frontend and backend Separation Project

1. Create a django Project

Command:

django-admin startproject ulb_manager

Structure:

├── manage.py└── ulb_manager  ├── __init__.py  ├── settings.py  ├── urls.py  └── wsgi.py

2. Go to the project root directory and create an app as the project backend.

Command:

cd ulb_managerpython manage.py startapp backend

The structure is more basic than the above, with a backend

3. Use vue-cli to create a vue. js project as the project front-end

Command:

vue-init webpack frontend

Interface:

Project name: (default return key)

Project description: (the default return key)

Auther: (enter your own name)

... :( Yes and the Enter key by default. I don't know much about it for the moment. When I first got in touch and didn't find this item online, I chose the default or Yes)

The structure has one more frontend

Structure summary:

The project root directory contains two new folders: backend and frontend, which are an app of backend Django and a frontend Vue. js project.

4. Use webpack to package the Vue. js Project

Command:

cd frontendnpm installnpm run build

5. Use the common view TemplateView of Django

In the root directory of the project, urls. py (ulb_manager/urls. py) uses a general view to create the simplest template controller.

Code:

Urlpatterns = [url (R' ^ admin/', admin. site. urls), url (R' ^ $ ', TemplateView. as_view (template_name = "index.html"), # url (R' ^ api/', include ('backend. urls ', namespace = 'api') # comment out the last line of code, because the running Error: No module named 'backend. urls '. It cannot be solved for the time being. However, when I run it, I comment out this line of code and it can run normally.]

6. Configure the template search path for the Django Project

Open settings. py (ulb_manager/settings. py) and find the TEMPLATES configuration item. modify it as follows:

TEMPLATES = [  {    'BACKEND': 'django.template.backends.django.DjangoTemplates',    #'DIRS': [],    'DIRS':['frontend/dist'],    'APP_DIRS': True,    'OPTIONS': {      'context_processors': [        'django.template.context_processors.debug',        'django.template.context_processors.request',        'django.contrib.auth.context_processors.auth',        'django.contrib.messages.context_processors.messages',      ],    },  },]

PS: I used to learn django before. I want to add an app under the INSTALLED_APPS configuration item under settings. py, so I added 'backend' myself '.

7. Configure the static file search path

Open settings. py (ulb_manager/settings. py) and find the STATICFILES_DIRS configuration item. The configuration is as follows:

# Add for vue.jsSTATICFILES_DIRS = [  os.path.join(BASE_DIR, "frontend/dist/static"),]

If not, add it by yourself.

By now, the django project can run properly. The interface for normal operation is as follows:

Run Interface

2. Install vue. js

If no vue. js exists on the computer, the following describes how to install vue. js:

1. node. js

The recommended installation environment for vue. js is node. js. Therefore, I installed node. js first.

Log on to the node. js website and download the latest v6.11.1 version.

2. npm

It is integrated into Node. js and does not need to be installed.

3. cnpm

Enter the following command in the command line:

npm install -g cnpm --registry=http://registry.npm.taobao.org

Wait until the installation is complete.

4. Install the vue-cli scaffolding build tool

Enter the following command in the command line:

npm install -g vue-cli

Wait until the installation is complete.

By now, vue-cli has been installed.

PS: I cannot figure out how to write the directory tree in Markdown.

It was modified because it was unable to run because it was completely based on the original version. Write a basic framework. Like a headless fly ...... (And can't afford a cloud host ...... New users do not need to buy either)

Markdown is very free to use, and it is quite interesting to call some html commands. Although it is not clear how many and what commands can be called ......

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.