測試同學動手搭個簡易web開發專案

東方er發表於2020-06-25

技術棧

node.js, vue.js, axios, python, django, orm, restful api, djangorestframework, mysql, nginx, jenkins.

環境配置

作業系統

Windows 7 旗艦版,Service Pack 1。

前端

Node.js

>node -v
v12.18.0
>npm -v
6.14.4

Vue.js

>vue -V(大寫)
@vue/cli 4.4.1

後端

Python

>python --version
Python 3.7.2

Django

>python -m django --version
3.0.7

資料庫

MySQL

>mysqladmin --version
mysqladmin  Ver 8.0.19 for Win64 on x86_64 (MySQL Community Server - GPL)

命令列登入mysql,

>mysql -u root -p
Enter password: ******

查詢資料庫,

mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| new_schema         |
| performance_schema |
| sakila             |
| sys                |
| world              |
+--------------------+
7 rows in set (0.00 sec)

代理

Nginx

在nginx安裝目錄執行start nginx,瀏覽器訪問http://localhost:80,

1592456182850

持續整合

Jenkins

安裝後,會自動開啟http://localhost:8080/,

1592979912495_副本

軟體安裝過程就不贅述了,聰明的你一定知道怎麼安。

專案搭建

本文的目的是走通整個專案的鏈路,於是會“弱化”掉系統功能的實現。

建立後端工程

執行django-admin startproject djangotest建立專案。

cd djangotest,執行python manage.py startapp myapp建立應用。

python manage.py runserver,啟動服務,訪問http://localhost:8000/,

1591519905326_副本

建立RESTful API

安裝mysqlclient和djangorestframework,

pip --default-timeout=6000 install -i https://pypi.tuna.tsinghua.edu.cn/simple mysqlclient
pip --default-timeout=6000 install -i https://pypi.tuna.tsinghua.edu.cn/simple djangorestframework

在settings.py中,新增'rest_framework'和'myapp',

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

    'rest_framework',

    'myapp',
]

同時修改資料庫配置,

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'HOST': '127.0.0.1',
        'PORT': 3306,
        'NAME': 'world',
        'USER': 'root',
        'PASSWORD': '123456'
    }
}

在myapp\models.py新增model,model叫做HellloDjango,有2個欄位id和name,

from django.db import models

# Create your models here.


class HelloDjango(models.Model):
    id = models.AutoField(primary_key=True)
    name = models.CharField(null=False, max_length=64, unique=True)

執行python manage.py makemigrations,提交,

>python manage.py makemigrations
Migrations for 'myapp':
  myapp\migrations\0001_initial.py
    - Create model HelloDjango

執行python manage.py migrate,建立,

>python manage.py migrate
Operations to perform:
  Apply all migrations: admin, auth, contenttypes, myapp, sessions
Running migrations:
  Applying contenttypes.0001_initial... OK
  Applying auth.0001_initial... OK
  Applying admin.0001_initial... OK
  Applying admin.0002_logentry_remove_auto_add... OK
  Applying admin.0003_logentry_add_action_flag_choices... OK
  Applying contenttypes.0002_remove_content_type_name... OK
  Applying auth.0002_alter_permission_name_max_length... OK
  Applying auth.0003_alter_user_email_max_length... OK
  Applying auth.0004_alter_user_username_opts... OK
  Applying auth.0005_alter_user_last_login_null... OK
  Applying auth.0006_require_contenttypes_0002... OK
  Applying auth.0007_alter_validators_add_error_messages... OK
  Applying auth.0008_alter_user_username_max_length... OK
  Applying auth.0009_alter_user_last_name_max_length... OK
  Applying auth.0010_alter_group_name_max_length... OK
  Applying auth.0011_update_proxy_permissions... OK
  Applying myapp.0001_initial... OK
  Applying sessions.0001_initial... OK

看看資料庫,新增了auth_和django_開頭的表,以及model對映的表myapp_hellodjango,

mysql> show tables;
+----------------------------+
| Tables_in_world            |
+----------------------------+
| auth_group                 |
| auth_group_permissions     |
| auth_permission            |
| auth_user                  |
| auth_user_groups           |
| auth_user_user_permissions |
| city                       |
| country                    |
| countrylanguage            |
| django_admin_log           |
| django_content_type        |
| django_migrations          |
| django_session             |
| myapp_hellodjango          |
+----------------------------+
14 rows in set (0.00 sec)

插入2條測試資料,

mysql> insert into myapp_hellodjango(name) values('hello');
Query OK, 1 row affected (0.09 sec)

mysql> insert into myapp_hellodjango(name) values('django');
Query OK, 1 row affected (0.20 sec)

mysql> select * from myapp_hellodjango;
+----+--------+
| id | name   |
+----+--------+
|  2 | django |
|  1 | hello  |
+----+--------+
2 rows in set (0.00 sec)

照著官網的例子,在myapp目錄下新增urls.py,新增rest程式碼,

from django.conf.urls import url, include
from rest_framework import routers, serializers, viewsets

from .models import HelloDjango


# Serializers define the API representation.
class HelloSerializer(serializers.HyperlinkedModelSerializer):
    class Meta:
        model = HelloDjango
        fields = ['id', 'name']


# ViewSets define the view behavior.
class HelloViewSet(viewsets.ModelViewSet):
    queryset = HelloDjango.objects.all()
    serializer_class = HelloSerializer


# Routers provide an easy way of automatically determining the URL conf.
router = routers.DefaultRouter()
router.register(r'hello', HelloViewSet)

urlpatterns = [
    url(r'demo/', include(router.urls)),
]

在djangotest下的urls.py中新增路由,

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

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('myapp.urls'))
]

通過這2個urls.py檔案的指定,api介面的路徑為,/api/demo/hello。

執行python manage.py runserver啟動服務,使用postman來呼叫http://127.0.0.1:8000/api/demo/hello/。先發1個post請求,往資料庫新增1條資料,

1592902408582_副本

再發1個get請求,會看到返回了3條資料,2條預先插入的資料,1條post請求新增的資料,

1592902449583_副本

建立前端工程

在djangotest根目錄下,執行vue create vuetest,建立vue工程。

預設安裝,一路回車,啪啪啪。

開始建立,

Vue CLI v4.4.1
a  Creating project in D:\cicd\vuetest.
a  Initializing git repository...
aa Installing CLI plugins. This might take a while...

建立成功,

a  Successfully created project vuetest.
a  Get started with the following commands:

 $ cd vuetest
 $ npm run serve

執行cd vuetestnpm run serve,前端工程就啟動起來了,訪問http://localhost:8080/,Welcome to Your Vue.js App,

1591501593139_副本

前端調後端介面

此時djangotest的目錄結構為,

├─djangotest
│  ├─djangotest
│  ├─myapp  # app
│  ├─vuetest  # 前端
│  ├─manage.py

修改vuetest\src\components\HelloWorld.vue,新增{{info}},用來展示後端api返回的資料,

<div class="hello">
  {{info}}
    <h1>{{ msg }}</h1>

同時在<script>中使用axios新增ajax請求,請求http://127.0.0.1:8000/api/demo/hello/,將response.data賦值給info,

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
        info: 123
    }
  },
  mounted () {
    this.$axios
      .get('http://127.0.0.1:8000/api/demo/hello/')
      .then(response => (this.info = response.data))
      .catch(function (error) { // 請求失敗處理
        console.log(error);
      });
  }
}
</script>

為了執行起來,需要安裝axios,

npm install --save axios

並在vuetest\src\main.js中引入,

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'

Vue.config.productionTip = false

Vue.prototype.$axios = axios;

new Vue({
  render: h => h(App)
}).$mount('#app')

分別啟動後端和前端服務,

python manage.py runserver
cd vuetest
npm run serve

嚯!ajax請求失敗了,F12可以看到報錯資訊,

localhost/:1 Access to XMLHttpRequest at 'http://127.0.0.1:8000/api/demo/hello/' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

django的埠是8000,vue的埠是8080,vue在請求django的時候,出現了跨域問題。瀏覽器有個同源策略,域名+埠+協議都相同才認為是同一來源。

通過配置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  # 新增

此時vue就可以請求到django提供的介面了,http://localhost:8080/

1592972876066_副本

前後端結合

vuetest目錄下建立vue.config.js,這是因為django只能識別static目錄下的靜態檔案,這裡指定vue生成靜態檔案時套一層static目錄,

module.exports = {
    assetsDir: 'static'
};

在vuetest目錄下執行npm run build,生成靜態檔案到vuetest/dist資料夾。

修改urls.py,指定django的模板檢視,

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

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

在settings.py中配置模板目錄為dist資料夾,

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

指定靜態檔案目錄為vuetest/dist/static,

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

瀏覽器訪問http://localhost:8000/,顯示的不再是django的歡迎頁面,而是vue的頁面。

前後端結合完成。vue的8080可以停了。

1592972876066_副本

Nginx轉發

nginx常用3個命令,啟動,重新載入,停止,

nginx start
nginx -s reload
nginx -s stop

修改\conf\nginx.conf,監聽埠改為8090,新增轉發proxy_pass http://localhost:8000;

   server {
        listen       8090;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
            proxy_pass http://localhost:8000;
        }

執行nginx start,瀏覽器訪問http://localhost:8090/,也能正常訪問djangotest。

通過nginx將8090轉發到了8000。

持續整合

本來想弄個pipline的,無奈家裡這臺破機器安裝失敗,windows也沒有linux對jenkins支援好,只能將就做個雞肋版本。

New Item,命名為vuetest,新增vue的build指令碼,

d:
cd D:\cicd\djangotest\vuetest
npm run build

1592991544913_副本

New Item,命名為djangotest,新增django的build指令碼,

d:
cd D:\cicd\djangotest
python manage.py runserver

1592991578357_副本

直接執行會報錯python不是可執行命令。新增python環境變數,在首頁左下角,

1592983220698_副本

把路徑D:\Python37新增為環境變數path並儲存,

1592983242033_副本

建好的這2個job就可以用來編譯vue和啟動django了,

1592991709156_副本

專注測試,堅持原創,只做精品。歡迎關注公眾號『東方er』
版權申明:本文為博主原創文章,轉載請保留原文連結及作者。

相關文章