linux下django+vue.js環境搭建及項目構建

Django+Vue 環境搭建及項目整合構建

一、環境搭建

python: 2.7.5

django: 1.11.7

node: 8.5.0

mysql: 5.7

1. 安裝python

centos下默認已經安裝了python

2. 安裝 node.js

下載安裝包 版本地址

wget https://nodejs.org/dist/v8.5.0/node-v8.5.0-linux-x64.tar.gz

解壓

tar zxvf node-v8.5.0-linux-x64.tar.gz

配置環境變量/etc/profile

export NODE_HOME="/root/node-v8.5.0-linux-x64"
export PATH=$PATH:$NODE_HOME/bin

使修改後的文件生效

source /etc/profile

查看安裝情況

node -v
npm -v

3. 安裝mysql

安裝mysql源

wget http://dev.mysql.com/get/mysql57-community-release-el7-9.noarch.rpm
rpm -ivh mysql57-community-release-el7-9.noarch.rpm

安裝

yum install mysql-community-server

啓動mysql

service mysqld start

查看初始密碼

grep 'temporary password' /var/log/mysqld.log

使用初始密碼登錄

mysql -u root -p //回車，然後輸入上一步查到的初始密碼

更改初始密碼

ALTER USER 'root'@'localhost' IDENTIFIED BY '123456Aa?';

創建名爲config_tool的數據庫

mysql> create database config_tool;
Query OK, 1 row affected (0.00 sec)

4. 安裝pip

yum install python-pip

如果yum源中沒有這個安裝包，需要安裝epel擴展源，然後再嘗試安裝

yum -y install epel-release

5. 安裝Django

pip install Django==1.11.7
# 查看django版本
python -m django --version

6. 安裝vue-cli

安裝cnpm

安裝npm淘寶源cnpm：在cmd下運行

​```
npm install -g cnpm --registry=https://registry.npm.taobao.org
​```

安裝vue-cli

//安裝全局的vue-cli命令行工具
cnpm install -g vue-cli

7.安裝samba服務

由於是環境是在linux虛擬機上，我們需要在windows下開發，這時候就需要用到samba服務來共享數據。

檢查是否安裝

#rpm -qa | grep samba

未安裝的話，執行安裝命令

yum install samba

重啓smb服務

service smb restart

在Linux上建立samba用戶

useradd samba

創建Smb用戶，此用戶必須是Linux上已經建立的，輸入密碼，完成即可

smbpasswd -a root

注意：smbpasswd -a 是添加用戶的意思 後面跟的是用戶名，此用戶名一定要跟linux登錄用戶名一樣。smbpasswd -x 用戶名 ：是刪除用戶的意思

添加共享目錄到samba,修改/etc/samba/smb.conf

[indta_dev]
        path = /root/indata_dev
        browsable=yes
        writable=yes
        guest ok=yes
        read only=no

重啓samba服務

在windos下打開計算機，在導航欄輸入 \\192.168.162.111

輸入用戶名和密碼，然後右擊indata_dev目錄，選擇映射到網絡磁盤驅動器，然後點擊【完成】

8.關閉防火牆

systemctl stop firewalld
systemctl disable firewalld
systemctl is-enabled firewalld
改/etc/selinux/config文件中設置SELINUX=disabled

二、構建項目

構建Django項目

1. 創建項目

在指定目錄下創建一個名字爲indata_dev的項目

django-admin startproject indata_dev

2. 創建APP

切換到上一步創建的項目indata_dev目錄下

cd indata_dev

然後創建利用下面的命令創建一個名爲 indata_tool_api 的app

python manage.py startapp indata_tool_api

目錄結構：

3.配置數據庫

django默認配置的數據庫是 sqlite3，這個數據庫無需安裝配置，直接就可以用，但是不支持併發操作，性能上不如mysql。

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}

所以我們選用mysql數據庫，配置在 indata_dev/settiongs.py裏，如下圖所示：

name 爲數據庫的名字,user 爲mysql的用戶名，password爲msql用戶密碼 host，host是主機地址

# Database
# https://docs.djangoproject.com/en/1.11/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'config_tool',
        'USER': 'root',
        'PASSWORD': '123456Aa?',
        'HOST': 'localhost',
    }
}

4. 添加app到列表

把創建的 indata_tool_api 加入到 settings.py中的 INSTALLED_APPS列表裏

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'indata_tool_api'
]

5. 創建測試model

在indata_tool_api目錄下的models.py裏我們寫一個測試model 如下：

“`

-- coding: utf-8 --

from django.db import models

Create your models here.

class TestModel(models.Model):
model_name = models.CharField(max_length=64)
add_time = models.DateTimeField(auto_now_add=True)
“`

6.創建測試方法

在indta_tool_api 目錄下的views.py裏創建兩個測試方法如下：

# -*- coding: utf-8 -*-
from django.http import JsonResponse
from indata_tool_api.models import TestModel


def add_model(request):
    model_name = request.GET.get('model_name')
    response = {}
    try:
        test_model = TestModel(model_name=model_name)
        test_model.save()
        response['msg'] = 'success'
        response['error_num'] = 0
    except Exception, e:
        response['msg'] = str(e)
        response['error_num'] = 1

    return JsonResponse(response)


def show_models(request):
    response = {}
    try:
        test_model = TestModel.objects.values()
        response['list'] = list(test_model)
        response['msg'] = 'success'
        response['error_num'] = 0
    except Exception, e:
        response['msg'] = str(e)
        response['error_num'] = 1

    return JsonResponse(response)

7.配置URL

在app目錄下創建一個urls.py的文件

from django.conf.urls import url, include
from indata_tool_api import views

urlpatterns = [
url(r'add_model$', views.add_model, ),
url(r'show_models$', views.show_models, ),
]

把app下的urls.py添加到項目下的urls裏。在indata_dev/indta_dev/urls.py裏

from django.conf.urls import url, include
from django.contrib import admin
from django.views.generic import TemplateView
import indata_tool_api.urls
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^api/', include(indata_tool_api.urls)),
    url(r'^$', TemplateView.as_view(template_name="index.html")),
]

8.初始化數據庫表

在項目根目錄下運行如下命令，用以生成創建或更改數據庫表結構的文件：

python manage.py makemigrations

將更改應用到數據庫

python manage.py migrate

注意在執行第一條命令的時候會報錯：

看錯誤信息，是因爲我們沒有安裝 mysqlclient導致的。所以我們可以通過pip安裝

pip install mysqlclient

但是在安裝mysqlclient的時候報錯了，原因是沒有安裝 mysql-devel導致的。

所以利用yum安裝mysql-devel

yum install mysql-devel

仍然報錯。。錯誤信息提示沒有安裝gcc，執行如下命令安裝gcc以及依賴環境

yum install gcc libffi-devel python-devel openssl-devel

執行完上面命令之後，我們就可以看到數據庫中被創建了我們需要的表。

9. 運行django項目

python manage.py runserver 0.0.0.0:8000 

[root@localhost indata_dev]# python manage.py runserver 0.0.0.0:8000
Performing system checks...

System check identified no issues (0 silenced).
January 17, 2018 - 09:02:38
Django version 1.11.7, using settings 'indata_dev.settings'
Starting development server at http://0.0.0.0:8000/
Quit the server with CONTROL-C.

報錯，因爲django不允許其他host訪問，所以我們可以通過修改settings.py裏的配置，來允許所有hosts訪問

ALLOWED_HOSTS = ['*']

10.測試api

寫入數據

讀取數據

構建VUE項目

1.創建項目

在indta_dev項目根目錄下運行如下命令，創建VUE項目

vue-init webpack indata_tool_web

創建過程需要填寫項目名、描述、作者、以及一些選項。

2.啓動服務

創建完成後，我們進入該vue項目indta_tool_web下進入config目錄修改index.js，修改host爲0.0.0.0

 host: '0.0.0.0', 

然後保存退出。

在VUE項目根目錄下，運行如下命令，啓動vue server測試vue項目是否創建成功

npm run dev

訪問：192.168.162.111:8080

3.安裝組件

vue-router 路由功能（已安裝）

vue-resource 用於發送http請求

element-ui 餓了嗎ui組件庫

nprogress 進度條（可選）

安裝vue-resource

在vue項目根目錄運行如下命令：

npm install vue-resource

在indata_tool_web\src\main.js裏引入vue-resource

import VueResource from 'vue-resource'
Vue.use(VueResource)

安裝element-ui

在vue項目根目錄運行如下命令：

npm install element-ui

在indata_tool_web\src\main.js裏引入element-ui

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

安裝 nprogress

npm install nprogress

在indata_tool_web\src\main.js裏引入nprogress

import NProgress from 'nprogress' // Progress 進度條
import 'nprogress/nprogress.css'// Progress 進度條樣式

三、項目整合

前面我們已經把django、vue的環境搭建起來，以及能夠使他們各自能獨立運行起來，下面我們將對兩個項目進行整合開發。

1. 項目導入pycharm

2. 調用api

在vue 項目裏測試調用django的api.

修改indata_tool_web\src\components\HelloWorld.vue，添加如下代碼：

<template>
  <div>
    <el-input v-model="model_name"></el-input>
    <el-button type="primary" @click="addModel">提交</el-button>
  </div>
</template>

export default {
  name: 'HelloWorld',
  data() {
    return {
      model_name: ''
    }
  },
  methods: {
    addModel() {
      this.$http.get('http://192.168.162.111:8000/api/add_model?model_name=' + this.add_model).then(
        (response) => {
          const res = JSON.parse(response.bodyText);
          //console.log(res);
        },
        (response) => {
        }
      );
    }
  }
}

出現這種錯誤，是django不允許跨域的問題，所以我們需要設置django允許跨域訪問。這時候我們須要在Django層注入header，用Django的第三方包django-cors-headers來解決跨域問題：

  pip install django-cors-headers

修改settings.py

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

CORS_ORIGIN_ALLOW_ALL = True

3.打包vue

在前端工程目錄下，輸入npm run build，如果項目沒有錯誤的話，就能夠看到所有的組件、css、圖片等都被webpack自動打包到dist目錄下了：

4.Django、vue整合

將django的TemplateView指向我們剛纔生成的前端dist文件

找到project目錄的urls.py，使用通用視圖創建最簡單的模板控制器，訪問 『/』時直接返回 index.html:

from django.conf.urls import url, include
from django.contrib import admin
from django.views.generic import TemplateView
import indata_tool_api.urls


urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^api/', include(indata_tool_api.urls)),
    url(r'^$', TemplateView.as_view(template_name="index.html")),
]

上一步使用了Django的模板系統，所以需要配置一下模板使Django知道從哪裏找到index.html。在project目錄的settings.py下：

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['indata_tool_web/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',
            ],
        },
    },
]

我們還需要配置一下靜態文件的搜索路徑。同樣是project目錄的settings.py下：

# Add for vuejs
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "indata_tool_web/dist/static"),
]

配置完成，我們在project目錄下輸入命令python manage.py runserver 0.0.0.0:8000，就能夠看到我們的前端頁面在瀏覽器上展現：

至此，一個django+vue的環境以及整合項目就搭建完成了。

參考文章：https://www.qcloud.com/community/article/774449：