电商网站设计模板,网页设计制作是属于什么专业?,重庆网红景点排行榜前十名,广西南宁网站推广文章目录 Django3后端项目创建切换数据库创建Django实战项目App新建Vue.js前端项目 Django3后端项目创建
创建Django项目#xff0c;采用Pycharm或者命令行创建皆可。此处#xff0c;以命令行方式作为演示#xff0c;项目名为django_vue。 django-admin startproject djang… 文章目录 Django3后端项目创建切换数据库创建Django实战项目App新建Vue.js前端项目 Django3后端项目创建
创建Django项目采用Pycharm或者命令行创建皆可。此处以命令行方式作为演示项目名为django_vue。 django-admin startproject django_vue 项目结构如图所示 2. 同步数据库文件(Django默认数据库为db.sqlite3)执行同步过程如下
切换路径到项目目录 cd django_vue 执行同步 python manage.py migrate PS E:\coding\Django_learn\django_vue python manage.py migrate
Operations to perform:Apply all migrations: admin, auth, contenttypes, sessions
Running migrations:Applying contenttypes.0001_initial... OKApplying auth.0001_initial... OKApplying admin.0001_initial... OKApplying admin.0002_logentry_remove_auto_add... OKApplying admin.0003_logentry_add_action_flag_choices... OKApplying contenttypes.0002_remove_content_type_name... OKApplying auth.0002_alter_permission_name_max_length... OKApplying auth.0003_alter_user_email_max_length... OKApplying auth.0004_alter_user_username_opts... OKApplying auth.0005_alter_user_last_login_null... OKApplying auth.0006_require_contenttypes_0002... OKApplying auth.0007_alter_validators_add_error_messages... OKApplying auth.0008_alter_user_username_max_length... OKApplying auth.0009_alter_user_last_name_max_length... OKApplying auth.0010_alter_group_name_max_length... OKApplying auth.0011_update_proxy_permissions... OKApplying auth.0012_alter_user_first_name_max_length... OKApplying sessions.0001_initial... OK
PS E:\coding\Django_learn\django_vue启动Django Server 验证默认配置是否正常。 python manage.py runserver PS E:\coding\Django_learn\django_vue python manage.py runserver
Watching for file changes with StatReloader
Performing system checks...System check identified no issues (0 silenced).
November 03, 2024 - 12:56:21
Django version 5.1.2, using settings django_vue.settings
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.[03/Nov/2024 12:56:24] GET / HTTP/1.1 200 12068
Not Found: /favicon.ico
[03/Nov/2024 12:56:24] GET /favicon.ico HTTP/1.1 404 2212切换数据库
将Django数据库更换为Mysql
登录mysql mysql -u root -p 2. 创建数据库数据库取名为django_vue_db并设置字符集为utf-8。
mysql CREATE DATABASE django_vue_db CHARACTER SET utf8;
Query OK, 1 row affected, 1 warning (0.15 sec)安装myslqclient库 配置settings.py文件配置Mysql数据库引擎。
DATABASES {default: {ENGINE: django.db.backends.mysql,NAME: django_vue_db,USER: root,PASSWORD: xxxxxxx,HOST: 127.0.0.1,}
}执行同步操作将数据迁移到Mysql。 python manage.py migrate S E:\coding\Django_learn\django_vue python manage.py migrateOperations to perform:Apply all migrations: admin, auth, contenttypes, sessions
Running migrations:Applying contenttypes.0001_initial... OKApplying auth.0001_initial... OKApplying admin.0001_initial... OKApplying admin.0002_logentry_remove_auto_add... OKApplying admin.0003_logentry_add_action_flag_choices... OKApplying contenttypes.0002_remove_content_type_name... OKApplying auth.0002_alter_permission_name_max_length... OKApplying auth.0003_alter_user_email_max_length... OKApplying auth.0004_alter_user_username_opts... OKApplying auth.0005_alter_user_last_login_null... OKApplying auth.0006_require_contenttypes_0002... OKApplying auth.0007_alter_validators_add_error_messages... OKApplying auth.0008_alter_user_username_max_length... OKApplying auth.0009_alter_user_last_name_max_length... OKApplying auth.0010_alter_group_name_max_length... OKApplying auth.0011_update_proxy_permissions... OKApplying auth.0012_alter_user_first_name_max_length... OKApplying sessions.0001_initial... OK验证是否切库成功进入到Mysql客户端查看django初化表是否有生成。
mysql use django_vue_db;
Database changed
mysql show tables;
----------------------------
| Tables_in_django_vue_db |
----------------------------
| auth_group |
| auth_group_permissions |
| auth_permission |
| auth_user |
| auth_user_groups |
| auth_user_user_permissions |
| django_admin_log |
| django_content_type |
| django_migrations |
| django_session |
----------------------------
10 rows in set (0.00 sec)运行Django Server重新访问http://localhost:8000 如果能正常访问过程没有报错说明切换数据库已经成功了。
创建Django实战项目App
创建Django App进入django_vue项目主目录输入如下命令 python manage.py startapp api_test App创建完成后目录结构如下所示
并把api_test加入到settings文件中的installed_apps列表里
INSTALLED_APPS [django.contrib.admin,django.contrib.auth,django.contrib.contenttypes,django.contrib.sessions,django.contrib.messages,django.contrib.staticfiles,api_test,
]在api_test目录下的models.py里写一个model from __future__ import unicode_literals
from django.db import models
class Book(models.Model):book_name models.CharField(max_length128)add_time models.DateTimeField(auto_now_addTrue)def __unicode__(self):return self.book_name只有两个字段书名book_name和添加时间add_time。如果没有指定主键的话Django会自动新增一个自增id作为主键。
在api_test目录下的views里我们新增两个接口一个是show_books返回所有的书籍列表通过JsonResponse返回能被前端识别的json格式数据二是add_book接受一个get请求往数据库里添加一条book数据。
from django.shortcuts import render
from django.views.decorators.http import require_http_methods
from django.core import serializers
from django.http import JsonResponse
import jsonfrom .models import Bookrequire_http_methods([GET])
def add_book(request):response {}try:book Book(book_namerequest.GET.get(book_name))book.save()response[msg] successresponse[error_num] 0except Exception as e:response[msg] str(e)response[error_num] 1return JsonResponse(response)require_http_methods([GET])
def show_books(request):response {}try:books Book.objects.filter()response[list] json.loads(serializers.serialize(json, books))response[msg] successresponse[error_num] 0except Exception as e:response[msg] str(e)response[error_num] 1return JsonResponse(response)在api_test目录下新增一个urls.py文件把我们新增的两个接口添加到路由里
from django.conf.urls import url, include
from .views import *urlpatterns [url(radd_book$, add_book, ),url(rshow_books$, show_books, ),
]我们还要把api_test下的urls添加到项目django_vue下的urls中才能完成路由
from django.contrib import admin
from django.urls import path
from django.conf.urls import url, include
from django.contrib import admin
from django.views.generic import TemplateView
import api_test.urlsurlpatterns [url(r^admin/, admin.site.urls),url(r^api/, include(api_test.urls)),
]在项目的根目录输入命令
python manage.py makemigrations api_test
python manage.py migrate查询数据库看到book表已经自动创建了
PS E:\coding\Django_learn\django_vue python manage.py makemigrations api_testMigrations for api_test:api_test\migrations\0001_initial.py Create model Book
PS E:\coding\Django_learn\django_vue python manage.py migrateOperations to perform:Apply all migrations: admin, api_test, auth, contenttypes, sessions
Running migrations:Applying api_test.0001_initial... OKDjango生成的表名将以app名加上model中的类名组合而成。
新建Vue.js前端项目
有关Vue的模块(包括vue)可以使用node自带的npm包管理器安装。推荐使用淘宝的 cnpm 命令行工具代替默认的 npm。
npm install -g cnpm --registryhttps://registry.npm.taobao.org先用cnpm安装vue-cli脚手架工具vue-cli是官方脚手架工具能迅速帮你搭建起vue项目的框架 cnpm install -g vue-cli PS E:\coding\Django_learn\django_vue cnpm install -g vue-cliDownloading vue-cli to C:\Users\lenovo\AppData\Roaming\npm\node_modules\vue-cli_tmp
Copying C:\Users\lenovo\AppData\Roaming\npm\node_modules\vue-cli_tmp\.store\vue-cli2.9.6\node_modules\vue-cli to C:\Users\lenovo\AppData\Roaming\npm\node_modules\vue-cli
Installing vue-clis dependencies to C:\Users\lenovo\AppData\Roaming\npm\node_modules\vue-cli/node_modules
[1/20] uid0.0.2 installed at node_modules\.store\uid0.0.2\node_modules\uid
[2/20] commander^2.9.0 installed at node_modules\.store\commander2.20.3\node_modules\commander
[3/20] semver^5.1.0 installed at node_modules\.store\semver5.7.2\node_modules\semver
[4/20] tildify^1.2.0 installed at node_modules\.store\tildify1.2.0\node_modules\tildify
[5/20] user-home^2.0.0 installed at node_modules\.store\user-home2.0.0\node_modules\user-home
[6/20] validate-npm-package-name^3.0.0 installed at node_modules\.store\validate-npm-package-name3.0.0\node_modules\validate-npm-package-name
[7/20] coffee-script1.12.7 installed at node_modules\.store\coffee-script1.12.7\node_modules\coffee-script
[8/20] multimatch^2.1.0 installed at node_modules\.store\multimatch2.1.0\node_modules\multimatch
[9/20] minimatch^3.0.0 installed at node_modules\.store\minimatch3.1.2\node_modules\minimatch
[10/20] read-metadata^1.0.0 installed at node_modules\.store\read-metadata1.0.0\node_modules\read-metadata
[11/20] consolidate^0.14.0 installed at node_modules\.store\consolidate0.14.5\node_modules\consolidate
[12/20] chalk^2.1.0 installed at node_modules\.store\chalk2.4.2\node_modules\chalk
[13/20] rimraf^2.5.0 installed at node_modules\.store\rimraf2.7.1\node_modules\rimraf
[14/20] ora^1.3.0 installed at node_modules\.store\ora1.4.0\node_modules\ora
[15/20] request^2.67.0 installed at node_modules\.store\request2.88.2\node_modules\request
[16/20] download-git-repo^1.0.1 installed at node_modules\.store\download-git-repo1.1.0\node_modules\download-git-repo
[17/20] handlebars^4.0.5 installed at node_modules\.store\handlebars4.7.8\node_modules\handlebars
[18/20] metalsmith^2.1.0 installed at node_modules\.store\metalsmith2.6.3\node_modules\metalsmith
[19/20] async^2.4.0 installed at node_modules\.store\async2.6.4\node_modules\async
[20/20] inquirer^6.0.0 installed at node_modules\.store\inquirer6.5.2\node_modules\inquirer
deprecate consolidate^0.14.0 Please upgrade to consolidate v1.0.0 as it has been modernized with several long-awaited fixes implemented. Maintenance is supported by Forward Email at https://forwardemail.net ; follow/watch https://github.com/ladjs/consolidate for updates and release changelog
deprecate rimraf^2.5.0 Rimraf versions prior to v4 are no longer supported
deprecate request^2.67.0 request has been deprecated, see https://github.com/request/request/issues/3142
deprecate rimraf2.7.1 › glob^7.1.3 Glob versions prior to v9 are no longer supported
deprecate request2.88.2 › har-validator~5.1.3 this library is no longer supported
deprecate rimraf2.7.1 › glob7.2.3 › inflight^1.0.4 This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
deprecate request2.88.2 › uuid^3.3.2 Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
Run 1 script(s) in 1s.
All packages installed (231 packages installed from npm registry, used 12s(network 12s), speed 514.2KB/s, json 222(1.25MB), tarball 4.73MB, manifests cache hit 0, etag hit 0 / miss 0)
[vue-cli2.9.6] link C:\Users\lenovo\AppData\Roaming\npm\vue - C:\Users\lenovo\AppData\Roaming\npm\node_modules\vue-cli\bin\vue
[vue-cli2.9.6] link C:\Users\lenovo\AppData\Roaming\npm\vue-init - C:\Users\lenovo\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init
[vue-cli2.9.6] link C:\Users\lenovo\AppData\Roaming\npm\vue-list - C:\Users\lenovo\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-list安装好后在django_vue项目根目录下新建一个前端工程目录 vue-init webpack frontend PS E:\coding\Django_learn\django_vue vue-init webpack frontend
? Project name frontend
? Project description A Vue.js project
? Author aliyun5171063201 19377056buaa.edu.cn
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run npm install for you after the project has been created? (recommended) npmvue-cli · Generated frontend.# Installing project dependencies ...
# npm warn deprecated inflight1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated stable0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm warn deprecated rimraf2.7.1: Rimraf versions prior to v4 are no longer supported
npm warn deprecated har-validator5.1.5: this library is no longer supported
npm warn deprecated glob7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated source-map-url0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm warn deprecated urix0.1.0: Please see https://github.com/lydell/urix#deprecated
npm warn deprecated resolve-url0.2.1: https://github.com/lydell/resolve-url#deprecated
npm warn deprecated source-map-resolve0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm warn deprecated flatten1.0.3: flatten is deprecated in favor of utility frameworks such as lodash.
npm warn deprecated acorn-dynamic-import2.0.2: This is probably built in to whatever tool youre using. If you still
need it... idk
npm warn deprecated consolidate0.14.5: Please upgrade to consolidate v1.0.0 as it has been modernized with several long-awaited fixes implemented. Maintenance is supported by Forward Email at https://forwardemail.net ; follow/watch https://github.com/ladjs/consolidate for updates and release changelog
npm warn deprecated json33.3.2: Please use the native JSON object instead of JSON 3
npm warn deprecated uuid3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm warn deprecated copy-concurrently1.0.5: This package is no longer supported.
npm warn deprecated request2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm warn deprecated request-promise-native1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
npm warn deprecated socks1.1.10: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0
npm warn deprecated q1.4.1: You or someone you depend on is using Q, the JavaScript Promise library that gave JavaScript developers strong feelings about promises. They can almost certainly migrate to the native JavaScript promise now. Thank you literally everyone for joining me in this bet against the odds. Be excellent to each other.
npm warn deprecated
npm warn deprecated (For a CapTP with native promises, see endo/eventual-send and endo/captp)
npm warn deprecated abab2.0.6: Use your platforms native atob() and btoa() methods instead
npm warn deprecated domexception1.0.1: Use your platforms native DOMException instead
npm warn deprecated w3c-hr-time1.0.2: Use your platforms native performance.now() and performance.timeOrigin.
npm warn deprecated left-pad1.3.0: use String.prototype.padStart()
npm warn deprecated fs-write-stream-atomic1.0.10: This package is no longer supported.
npm warn deprecated move-concurrently1.0.1: This package is no longer supported.
npm warn deprecated circular-json0.3.3: CircularJSON is in maintenance only, flatted is its successor.
npm warn deprecated sane2.5.2: some dependency vulnerabilities fixed, support for node 10 dropped, and newer ECMAScript syntax/features added
npm warn deprecated eslint-loader1.9.0: This loader has been deprecated. Please use eslint-webpack-plugin
npm warn deprecated chromedriver2.46.0: Chromedriver download url has changed. Use version 114.0.2 or newer.
npm warn deprecated browserslist2.11.3: Browserslist 2 could fail on reading Browserslist 3.0 config used in other tools.
npm warn deprecated html-webpack-plugin2.30.1: out of support
npm warn deprecated browserslist1.7.7: Browserslist 2 could fail on reading Browserslist 3.0 config used in other tools.
npm warn deprecated rimraf2.6.3: Rimraf versions prior to v4 are no longer supported
npm warn deprecated glob7.0.5: Glob versions prior to v9 are no longer supported
npm warn deprecated extract-text-webpack-plugin3.0.2: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
npm warn deprecated browserslist1.7.7: Browserslist 2 could fail on reading Browserslist 3.0 config used in other tools.
npm warn deprecated uglify-es3.3.10: support for ECMAScript is superseded by uglify-js as of v3.13.0 ([WARNING] Use 3.3.9 instead of 3.3.10, reason: see https://github.com/mishoo/UglifyJS2/issues/2896)
npm warn deprecated bfj-node45.3.1: Switch to the bfj package for fixes and new features!
npm warn deprecated babel-eslint8.2.6: babel-eslint is now babel/eslint-parser. This package will no longer receive
updates.
npm warn deprecated browserslist1.7.7: Browserslist 2 could fail on reading Browserslist 3.0 config used in other tools.
npm warn deprecated mkdirp0.5.1: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm warn deprecated svgo0.7.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm warn deprecated svgo1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm warn deprecated vue2.7.16: Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.
npm warn deprecated eslint4.19.1: This version is no longer supported. Please see https://eslint.org/version-support
for other options.
npm warn deprecated core-js2.6.12: core-js3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.added 1908 packages in 2m122 packages are looking for fundingrun npm fund for detailsRunning eslint --fix to comply with chosen preset rules...
# frontend1.0.0 linteslint --ext .js,.vue src test/unit test/e2e/specs --fix在创建项目的过程中会弹出一些与项目相关的选项需要回答按照真实情况进行输入即可。
安装 vue 依赖模块
cd frontend
cnpm install
cnpm install vue-resource
cnpm install element-uiPS E:\coding\Django_learn\django_vue cnpm install vue-resource
√ Linked 31 latest versions fallback to E:\coding\Django_learn\django_vue\node_modules\.store\node_modules
tly_updates.txt)Today:→ vue-resource1.5.3 › got11.8.6 › types/cacheable-request6.0.3 › types/node*(22.8.7) (12:02:53)
√ Installed 1 packages on E:\coding\Django_learn\django_vue
√ All packages installed (32 packages installed from npm registry, used 2s(network 2s), speed 387.11KB/s, json 25(139.05KB), tarball 652.98KB, manifests cache hit 6, etag hit 6 / miss 0)dependencies:vue-resource ^1.5.3PS E:\coding\Django_learn\django_vue cnpm install element-ui√ Linked 10 latest versions fallback to E:\coding\Django_learn\django_vue\node_modules\.store\node_modules
√ Linked 2 public hoist packages to E:\coding\Django_learn\django_vue\node_modules
peerDependencies WARNING element-uilatest requires a peer of vue^2.5.17 but none was installed, packageDir: E:\coding\Django_learn\django_vue\node_modules\.store\element-ui2.15.14\node_modules\element-ui
deprecate element-ui2.15.14 › async-validator1.8.5 › babel-runtime6.26.0 › core-js^2.4.0 core-js3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web
compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
√ Run 1 script(s) in 176ms.
√ Installed 1 packages on E:\coding\Django_learn\django_vue
√ All packages installed (10 packages installed from npm registry, used 4s(network 4s), speed 603.25KB/s, json 10(174.66KB), tarball 2.37MB, manifests cache hit 0, etag hit 0 / miss 0)dependencies:element-ui ^2.15.14现在我们可以看到整个文件目录结构是这样的 6. 在frontend目录src下包含入口文件main.js入口组件App.vue等。后缀为vue的文件是Vue.js框架定义的单文件组件其中标签中的内容可以理解为是类html的页面结构内容。
在src/component文件夹下新建一个名为Home.vue的组件通过调用之前在Django上写好的api实现添加书籍和展示书籍信息的功能。在样式组件上我们使用了饿了么团队推出的element-ui这是一套专门匹配Vue.js框架的功能样式组件。
