Django项目和uni-app项目的创建及项目文件讲解

DJango项目的创建

1.首先具有Python环境并下载好Django依赖包

没有python环境的可以去Python下载 | Python中文网 官网 (p2hp.com)下载。

建议下载3.8.x到3.9.x的python版本python版本太高可能导致一些老的环境依赖没办法使用。

怎么安装python这里就不作过多讲述网上有很多，这里重点讲Django库在python的一些使用。

安装好python之后通过pip install Django安装django库

pip install Django //默认安装最新版本
pip install Django == 4.0.4 //安装4.0.4指定版本

安装好之后可以python或cmd查看所安装的Django版本

pip list
python -m django --version

import django
print(django.get_version())

这些都弄好之后就可以开始Django项目的创建。

2.创建Django项目

当我们创建项目时要有一个良好的习惯，就是一个项目最后是有一个单独的文件夹，并且有一个可以让你在之后的使用和查看的时候可以一眼就知道是什么东西的命名（英文好的可以用英文命名，不行的可以用拼音）。所以我们在自己电脑内找一个空的地方创建我们的项目文件夹，本人是在E盘的根目录下创建了一个guoshusibieXM的文件夹。

创建好项目文件夹就可以开始创建项目，我们在创建好的文件夹内右键在终端中打开就可以得到指定文件夹内的终端。

然后运行 django-admin startproject （项目名）

django-admin startproject guossb

运行完之后 我们输入

tree /f

可以看到类似这样的画面，就说明名字为guossb的Django项目创建好了。

卷 文件 的文件夹 PATH 列表
卷序列号为 8C76-9C67
E:.
└─guossb
    │  manage.py
    │
    └─guossb
            asgi.py
            settings.py
            urls.py
            wsgi.py
            __init__.py

然后为了之后可以方便的使用Django项目我们需要再创建一个单独的Django app我们之后的功能代码都是写着这个单独的app内的所以最好是起一个好认的名字。

我们cd进项目文件夹内

cd guossb

然后创建 名字为uniappclient的app

python manage.py startapp uniappclient

然后我们返回上级目录再查看文件夹结构就可以看到这样的文件结构

卷 文件 的文件夹 PATH 列表
卷序列号为 8C76-9C67
E:.
└─guossb
    │  manage.py
    │
    ├─guossb
    │  │  asgi.py
    │  │  settings.py
    │  │  urls.py
    │  │  wsgi.py
    │  │  __init__.py
    │  │
    │  └─__pycache__
    │          settings.cpython-38.pyc
    │          __init__.cpython-38.pyc
    │
    └─uniappclient
        │  admin.py
        │  apps.py
        │  models.py
        │  tests.py
        │  views.py
        │  __init__.py
        │
        └─migrations
                __init__.py

现在我们Django项目创建好了，项目app也创建好了，但是只是这样是不行的我们还需要把我们创建的app进行注册。

我们找到settings.py文件，在这个文件内找到 INSTALLED_APPS 的内容在这里面加上 ‘uniappclient.apps.UniappclientConfig’, 对我们创建的app进行注册。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'uniappclient.apps.UniappclientConfig',
]

这些弄完测试的前置条件就弄好了。

3.测试Django项目

我们要测试这个项目我们就需要这个项目中有点我们自己的东西才能看出我们刚刚创建的这个项目是不是可以根据我们的需求使用。

我们使用VScode打开这个项目。然后找到settings.py文件我们如下图把Django内默认连接的数据库注释掉。

因为我们之后不会用到数据库所以为了不多出几个文件我们在运行前把这一段注释掉，这样Django就不会创建sqlite的数据库。

然后我们在views.py内创建一个简单的测试函数

from django.http import HttpResponse
def index(request):
    return HttpResponse("hello world")

在urls.py内把app的视图文件引入，并创建好对应的url

import uniappclient.views as uniapp
urlpatterns = [
    # path('admin/', admin.site.urls),
    path('index/',uniapp.index)
]

这些都弄好就可以启动Django项目进行测试。

python manage.py runserver    //项目启动命令

运行之后可以看到这些内容

PS E:\guoshusibieXM\guossb> python .\manage.py runserver
Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
January 28, 2023 - 11:35:13
Django version 4.0.4, using settings 'guossb.settings'
Starting development server at http://127.0.0.1:8000/   <--因为是默认启动所以是使用本地ip
Quit the server with CTRL-BREAK.

然后我们随便打开一个浏览器把我们刚刚写的测试函数的url输入进去。

http://127.0.0.1:8000/index/

然后就能看到如图所示网页上显示出了hello word。

至此DJango的创建和测试完成开始我们的前端部分uniapp的创建和测试。

uniapp项目的创建

1.电脑内有HBuilderX这个软件。

其实可以不用这个软件，但是也通过命令行来对uniapp项目进行创建和运行，然后都用VScode来进行开发。但是一般像我开发uniapp的时候会同时编译到手机上查看效果然后使用HBuilderX在加载一些插件和调一些设置的时候都非常方便。所以我一般都使用的是这个软件来进行开发。

如果想尝试使用命令行和VScode进行开发可以看这个链接uni-app官网 (dcloud.net.cn)这是官网上的怎么使用命令行来进行创建，测试和打包。

然后怎么安装就不在这做过多介绍，不是很麻烦的东西。

现在电脑有这个软件了可以开始进行项目创建了。

2.创建uniapp项目

运行软件，界面左上角文件->新建->项目，然后就可以看到选择创建什么项目。

就是这个界面

因为我们这里主要讲uniapp所以就讲这个界面。

1.是最上方我们将要创建的项目的名称可以中文，但是最好不要，可能会出现一些问题。

2.是项目存放的位置可以更改，根据需要。

3.是uniapp的各种模板，默认模板就是只有uniapp的基础文件和一个如图的简单页面效果，用过的可以直接用这个进行开发，第一次使用的我个人是建议使用Hello uniapp的模板先进去看看有些什么然后看看对应的代码。之后就可以再创建一个uni-ui的项目或者用默认模板开始进行开发。下面还有一些可以用来玩的模板可以学习一下uniapp的其他开发玩法。

4.让你的uniapp基于那个版本的Vue，建议对Vue不太熟的用2的版本可以使用很多插件进行开发。

最下面两个是一般不太会用到的功能，一个是直接连云（就是一些类似数据库或文件服务的功能可以直接对接云，而不用自己去弄，可以方便一点如果像弄云的话，后期也会把服务器尝试搭建在云上，但不是这两个云。）。另一个是类似Github的一个功能，不过是CSDN的可以用，但玩玩的东西没太必要。

然后我们把项目名称填入点击创建就可以完成创建项目。

这是默认模板创建完有的文件树

PS E:\HBuilderProjects\guoshuss> tree /f
卷 文件 的文件夹 PATH 列表
卷序列号为 8C76-9C67
E:.
│  App.vue   -->根文件，每次运行项目会首先执行这个文件，可以写一些预加载函数或数据在里面
│  index.html -->也是定义这个项目默认信息的文件，简单的东西很少会动到这个
│  main.js   -->也是默认文件像之后使用一些插件和ui都需要在这里面进注册的
│  manifest.json  -->项目的设置文件，里面有很多要设置的东西，不过也是根据需求进行改变的，之后用到的时候写
│  pages.json  -->也是默认设置文件，这里面主要是对默认样式，页面路由之类的东西进行设置，当然不止这些，能设置的信息不少。
│  uni.scss  -->算默认css样式文件，一般不动。
│
├─pages -->正常页面都是在这个文件夹里面，每个单独的页面一个文件夹。
│  └─index
│          index.vue
│
└─static -->一些图片数据之类的在这。
        logo.png

3.测试uniapp项目

测试点击右上角的预览看看能不能出现默认模板一样的页面，能就没问题，正常都不会有问题。之后会演示前后端联动测试那个会重要一点。