在写这篇文章的时候,顺带学习了一下关于Markdown的使用方法。
笔者是个渣渣,一切都是自己在摸索的学着,所以也谈不上什么体系、系统学习。在这里主要是为了实现把项目前后端分离开。
这里假设你的电脑上所需的django、vue.js已经有了,如果没有,往下拉就是vue.js的安装流程。django前面写过了,就不赘述了。
一,正常搭建前后端分离项目流程
1.创建django项目
命令:
django-admin startproject ulb_manager
结构:
├── manage.py └── ulb_manager ├── __init__.py ├── settings.py ├── urls.py └── wsgi.py
2.进入项目根目录,创建一个app作为项目后端
命令:
cd ulb_manager python manage.py startapp backend
结构比上面最基本的,多了一块backend
3.使用vue-cli创建一个vue.js项目作为项目前端
命令:
vue-init webpack frontend
界面:
Project name:(默认回车键)
Project description:(默认回车键)
Auther:(输入自己的名字,随意)
...:(默认yes和回车键,暂时不太懂,刚开始接触,网上也没查到这一块东西,就全部选择默认或者Yes了)
结构多了一块frontend
结构总结:
项目根目录有两个新文件夹,一个叫backend,一个叫frontend,分别是:backend Django的一个app、frontend Vue.js项目
4.使用webpack打包Vue.js项目
命令:
cd frontend npm install npm run build
5.使用Django的通用视图TemplateView
在项目根目录下urls.py(即ulb_manager/urls.py)使用通用视图创建最简单的模板控制器。
代码:
urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^$',TemplateView.as_view(template_name="index.html")), #url(r'^api/',include('backend.urls', namespace='api')) #最后一行代码我注释掉,因为运行报错:Error:No module named 'backend.urls',暂时解决不掉,但是我运行的时候,注释掉这行代码,是能正常运行的。 ]
6.配置Django项目的模板搜索路径
打开settings.py(即ulb_manager/settings.py)找到TEMPLATES配置项,修改如下:
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:之前学习django,是要在settings.py下的INSTALLED_APPS配置项下添加app的,所以我自己添加了'backend'。
7.配置静态文件搜索路径
打开settings.py(ulb_manager/settings.py),找到STATICFILES_DIRS配置项,配置如下:
# Add for vue.js STATICFILES_DIRS = [ os.path.join(BASE_DIR, "frontend/dist/static"), ]
如果没有,自己添加。
到这里,运行django项目已经可以正常运行了。正常运行的界面如下:
运行界面
二,安装vue.js
如果电脑上,没有vue.js,以下是安装vue.js的过程:
1.node.js
vue.js的推荐安装环境是node.js,因此,我是先安装的node.js。
登陆node.js官网,下载最新的v6.11.1版本。
2.npm
集成于Node.js中,不需要装。
3.cnpm
在命令行中输入命令:
npm install -g cnpm --registry=http://registry.npm.taobao.org
等待安装完成。
4.安装vue-cli脚手架构建工具
在命令行中输入命令:
npm install -g vue-cli
等待安装结束。
到此,vue-cli已经安装完成。
PS:暂时摸不清楚如何把文件的目录树结构在Markdown里写出来。
有所修改,因为完全按照原版搬上来根本无法运行。写了一个最基本的框架。像个无头苍蝇一样……(而且也买不起云主机……新手也没必要买)
Markdown用起来觉得很自由,而且还能调用一些html的指令,还是蛮有意思的,虽然还没摸清楚,到底能调用多少、哪些指令……
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。