Detailed explanation of examples of building front-end and back-end separation projects using Vue.js and Django-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Detailed explanation of examples of building front-end and back-end separation projects using Vue.js and Django

黄舟

May 18, 2018 pm 04:17 PM

django javascript vue.js

This article mainly introduces the example of Django+Vue.js building a front-end and back-end separation project. It has certain reference value. If you are interested, you can learn about it.

While writing this article, I learned it by the way. Let’s talk about how to use Markdown.

The author is a scumbag. I learned everything by myself, so there is no system or systematic learning. The main purpose here is to separate the front and back ends of the project.

It is assumed here that you already have the required django and vue.js on your computer. If not, scroll down to see the installation process of vue.js. Django has been written about before, so I won’t go into details.

1. Normally build the front-end and back-end separation project process

1. Create a django project

Command:

1	`django-admin startproject ulb_manager`

Copy after login

Structure:

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

Copy after login

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

Command:

1 2	`cd ulb_manager` `python manage.py startapp backend`

Copy after login

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

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

Command:

1	`vue-init webpack frontend`

Copy after login

Interface:

Project name: (Default Enter key)

Project description: (Default Enter key)

Auther: (Enter your name, feel free)

...: (The default is yes and the enter key. I don’t understand it for the time being. I just started to contact it and I didn’t find this on the Internet. Things, just select the default or Yes for all)

The structure has an extra frontend

Structure summary:

There are two new folders in the project root directory, one They are called backend and the other is called frontend, respectively: backend an app of Django and frontend Vue.js project

4. Use webpack to package the Vue.js project

Command:

cd frontend
npm install
npm run build

Copy after login

5. Use Django’s universal view TemplateView

Use the universal view to create the simplest urls.py (i.e. ulb_manager/urls.py) in the project root directory Template controller.

Code:

urlpatterns = [
  url(r&#39;^admin/&#39;, admin.site.urls),
  url(r&#39;^$&#39;,TemplateView.as_view(template_name="index.html")),
  #url(r&#39;^api/&#39;,include(&#39;backend.urls&#39;, namespace=&#39;api&#39;))
  #最后一行代码我注释掉，因为运行报错：Error:No module named &#39;backend.urls&#39;,暂时解决不掉，但是我运行的时候，注释掉这行代码，是能正常运行的。
]

Copy after login

6. Configure the template search path of the Django project

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

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

Copy after login

PS: When I learned django before, I needed to add app under the INSTALLED_APPS configuration item under settings.py, so I added 'backend' myself.

7. Configure static file search path

Open settings.py (ulb_manager/settings.py), find the STATICFILES_DIRS configuration item, configure it as follows:

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

Copy after login

If not, add it yourself.

At this point, running the django project can run normally. The normal running interface is as follows:

Running interface

##Second, install vue.js

If there is no vue.js on your computer, the following is the process of installing vue.js:

1.node.js

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

2.npm

Integrated into Node.js, no installation required.

3.cnpm

Enter the command on the command line:

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

Copy after login

Wait for the installation to complete.

4. Install the vue-cli scaffolding building tool

Enter the command on the command line:

1	`npm install -g vue-cli`

Copy after login

Wait for the installation to complete.

At this point, vue-cli has been installed.

PS: I don’t know yet how to write the directory tree structure of the file in Markdown.

It has been modified, because it cannot run at all if it is copied exactly according to the original version. Wrote a basic framework. Like a headless fly... (and I can't afford a cloud host... novices don't need to buy it)

Markdown feels very free to use, and it can also call some html commands, which is quite interesting. , although I haven’t figured out yet how many and which instructions can be called...

The above is the detailed content of Detailed explanation of examples of building front-end and back-end separation projects using Vue.js and Django. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

What's New in Windows 11 KB5054979 & How to Fix Update Issues

3 weeks ago By DDD

How to fix KB5055523 fails to install in Windows 11?

2 weeks ago By DDD

InZoi: How To Apply To School And University

4 weeks ago By DDD

How to fix KB5055518 fails to install in Windows 10?

2 weeks ago By DDD

Roblox: Dead Rails – How To Summon And Defeat Nikola Tesla

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7832

Java Tutorial

1648

CakePHP Tutorial

1402

Laravel Tutorial

1300

PHP Tutorial

1240

Related knowledge

Django vs. Flask: A comparative analysis of Python web frameworks Jan 19, 2024 am 08:36 AM

Django and Flask are both leaders in Python Web frameworks, and they both have their own advantages and applicable scenarios. This article will conduct a comparative analysis of these two frameworks and provide specific code examples. Development Introduction Django is a full-featured Web framework, its main purpose is to quickly develop complex Web applications. Django provides many built-in functions, such as ORM (Object Relational Mapping), forms, authentication, management backend, etc. These features allow Django to handle large

Django Framework Pros and Cons: Everything You Need to Know Jan 19, 2024 am 09:09 AM

Django is a complete development framework that covers all aspects of the web development life cycle. Currently, this framework is one of the most popular web frameworks worldwide. If you plan to use Django to build your own web applications, then you need to understand the advantages and disadvantages of the Django framework. Here's everything you need to know, including specific code examples. Django advantages: 1. Rapid development-Djang can quickly develop web applications. It provides a rich library and internal

How to upgrade Django version: steps and considerations Jan 19, 2024 am 10:16 AM

How to upgrade Django version: steps and considerations, specific code examples required Introduction: Django is a powerful Python Web framework that is continuously updated and upgraded to provide better performance and more features. However, for developers using older versions of Django, upgrading Django may face some challenges. This article will introduce the steps and precautions on how to upgrade the Django version, and provide specific code examples. 1. Back up project files before upgrading Djan

Simple JavaScript Tutorial: How to Get HTTP Status Code Jan 05, 2024 pm 06:08 PM

JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest

Is Django front-end or back-end? check it out! Jan 19, 2024 am 08:37 AM

Django is a web application framework written in Python that emphasizes rapid development and clean methods. Although Django is a web framework, to answer the question whether Django is a front-end or a back-end, you need to have a deep understanding of the concepts of front-end and back-end. The front end refers to the interface that users directly interact with, and the back end refers to server-side programs. They interact with data through the HTTP protocol. When the front-end and back-end are separated, the front-end and back-end programs can be developed independently to implement business logic and interactive effects respectively, and data exchange.

How to use the Django framework to create a project in PyCharm Feb 19, 2024 am 08:56 AM

Tips on how to create projects using the Django framework in PyCharm, requiring specific code examples. Django is a powerful Python Web framework that provides a series of tools and functions for quickly developing Web applications. PyCharm is an integrated development environment (IDE) developed in Python, which provides a series of convenient functions and tools to increase development efficiency. Combining Django and PyCharm makes it faster and more convenient to create projects

Django: A magical framework that can handle both front-end and back-end development! Jan 19, 2024 am 08:52 AM

Django: A magical framework that can handle both front-end and back-end development! Django is an efficient and scalable web application framework. It is able to support multiple web development models, including MVC and MTV, and can easily develop high-quality web applications. Django not only supports back-end development, but can also quickly build front-end interfaces and achieve flexible view display through template language. Django combines front-end development and back-end development into a seamless integration, so developers don’t have to specialize in learning

How to get HTTP status code in JavaScript the easy way Jan 05, 2024 pm 01:37 PM

Introduction to the method of obtaining HTTP status code in JavaScript: In front-end development, we often need to deal with the interaction with the back-end interface, and HTTP status code is a very important part of it. Understanding and obtaining HTTP status codes helps us better handle the data returned by the interface. This article will introduce how to use JavaScript to obtain HTTP status codes and provide specific code examples. 1. What is HTTP status code? HTTP status code means that when the browser initiates a request to the server, the service

See all articles