【无标题】

一、运行Django
1.安装名为’Django’的python模块
‘’’

$ sudo pip install django

‘’’
2.安装名为’sass_processor’ 的Python模块，‘sass_processor’ 是一个Django应用程序，它用于处理SASS和SCSS样式表
‘’’

$ sudo pip install django-sass-processor

‘’’
3.安装名为 ‘widget_tweaks’ 的Python模块，‘widget_tweaks’ 库提供了一些实用工具，用于扩展Django表单小部件的功能
‘’’

$ `sudo pip install django-widget-tweaks`

‘’’
4.运行django
‘’’
migrate是一个Django命令，用于执行数据库迁移操作。

$ /bin/python3 /home/yqp/django-cuba/manage.py migrate

runserver是一个Django命令，用于启动一个开发用的 Web 服务器。

$ /bin/python3 /home/yqp/django-cuba/manage.py runserver

‘’’

二、安装Nginx

全局块：配置影响全局，包括运行 nginx 的用户组，进程存放，日志，配置文件等
events：配置影响 nginx 服务器与客户端的网络连接，包括进程最大连接数，数据驱动模型，序列化等
http：配置代理，缓存，日志，第三方模块等，可嵌套多个 server
server：配置虚拟主机的参数
location：配置请求路由，页面处理
参考文档：https://blog.csdn.net/zxd1435513775/article/details/102508463

1.在终端中执行以下命令，安装Nginx：
$ sudo apt-get update
$ sudo apt-get install nginx
2.配置Nginx
配置Nginx以便它可以代理到您的Django应用程序。打开Nginx配置文件 /etc/nginx/sites-available/default，并添加以下内容：

server {
    listen 80;
    server_name example.com; # 将example.com替换为您的域名或IP地址
    location / {
        proxy_pass http://127.0.0.1:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    location /static/ {
                 alias /var/www/html/django-cuba/static/;
    }
}

或者改/etc/nginx/nginx.conf
3.重启Nginx
在终端中执行以下命令，以重新启动Nginx并使更改生效：

$ sudo service nginx restart

4.运行Django应用程序
在终端中，进入您的Django应用程序所在的目录，并运行以下命令以启动应用程序：

$ python3 manage.py runserver

三、在阿里云服务器上安装 Docker 的步骤如下：
1.安装docker
登录阿里云服务器并打开终端。
更新已安装的软件包列表：

$ sudo apt update

安装依赖包以允许使用 HTTPS 仓库：

$ sudo apt install apt-transport-https ca-certificates curl gnupg lsb-release

添加 Docker 官方 GPG 密钥：

$ curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg

添加 Docker 官方稳定版仓库：

$ echo "deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

安装 Docker：

$ sudo apt install docker-ce docker-ce-cli containerd.io

确认 Docker 是否已正确安装并正在运行：

sudo systemctl status docker

如果看到 Active: active (running) 的字样，说明 Docker 已经正确安装并正在运行。
2.1Dockerfile的编写

    FROM ubuntu:20.04
    
    # Install dependencies
    RUN apt-get update && apt-get install -y \
        python3 \
        python3-pip
    # Copy application code
    COPY . /django-cuba
    # Install Python dependencies
    RUN pip3 install --timeout 1000 -r /django-cuba/requirements.txt
    # Set up Nginx configuration
    # Expose ports
    EXPOSE 80
    # Start Nginx and run the application
    CMD python3 /django-cuba/manage.py runserver

docker命令=========
// 构建docker（在Dockerfile文件目录下执行，镜像名称可改）

docker build -t <镜像名称> .

// 执行容器内django应用程序并映射本地8000端口,加-d 代表后台运行

docker run -p 127.0.0.1:8000:8000 <镜像名称> python3 /django-cuba/manage.py runserver 0.0.0.0:8000
docker run -d -p 127.0.0.1:8000:8000 <镜像名称> python3 /django-cuba/manage.py runserver 0.0.0.0:8000

// 查看docker容器

docker ps -a

// 关闭docker容器（docker ps -a查看到的容器ID），立刻关闭docker容器是kill

docker stop <容器ID>
docker kill <容器ID>

// 确保关闭的情况下删除docker容器

docker rm <容器ID>

// 删除docker镜像（）

docker rmi <镜像名称>

// 查看镜像

docker images

要将 Docker 容器的 8000 端口映射到 Nginx 的 80 端口，可以按照以下步骤操作：
确保 Docker 容器在运行状态下，并已经映射了 8000 端口，可以通过 docker ps 命令查看容器的运行状态和端口映射情况。
安装并配置 Nginx。可以使用包管理器直接安装 Nginx，例如在 Ubuntu 中使用以下命令安装：

sudo apt-get update
sudo apt-get install nginx

在 Nginx 的配置文件中添加反向代理配置。在 Nginx 配置文件（默认为 /etc/nginx/nginx.conf）中找到 http 部分，添加以下配置信息：

server {
    listen 80;
    server_name example.com;  # 修改为自己的域名
    location / {
        proxy_pass http://127.0.0.1:8000;  # 修改为 Docker 容器的 IP 地址和端口
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

重启 Nginx 服务，使配置生效：

  sudo service nginx restart

四、服务器设置web程序自启
1.编写脚本放在/usr/local/bin下

$ sudo nano /usr/local/bin/webapp.sh

内容如下：
#!/bin/bash

  cd /var/www/html/django-cuba/
    python3 manage.py runserver 

ctrl+s保存，ctrl+x退出后，给这个脚本文件修改权限

$ chmod +x web.sh

2.编写服务文件，在/etc/systemd/system下创建

$ sudo nano /etc/systemd/system/webapp.service

内容如下：
[Unit]
Description=My Web Application
After=network.target

[Service]
User=root
Group=root
WorkingDirectory=/var/www/html/django-cuba
ExecStart=/usr/local/bin/webapp.sh
Restart=always

[Install]
WantedBy=multi-user.target

$ sudo systemctl daemon-reload
$ sudo systemctl start webapp.service
$ sudo systemctl enable webapp.service
$ sudo systemctl status webapp(可以通过这个命令查看是否启动成功，活动状态下有如下内容打印Active: active (running) 

如果服务没有运行，则应该会看到字样输出Active: inactive (dead))

五、vue应用程序
1.安装

$ sudo apt install nodejs
$ sudo apt install npm

2.安装nvm管理器来升级nodejs

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
$ echo 'export NVM_DIR="$HOME/.nvm"' >> ~/.bashrc
$ echo '[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"' >> ~/.bashrc
$ source ~/.bashrc
$ nvm install stable(stable代表当前nvm认为最稳定的nodejs版本，目前我的nvm装的v19.8.1)
$ nvm use stable

3.安装vue cli
vue cli是快速搭建一个 vue 项目的脚手架工具

$ sudo npm install -g @vue/cli

4.进程序根目录

$ npm i（npm install简写）

当你使用 npm i 命令时，npm 会从 Node.js 的官方模块仓库中下载所需的模块，
并将它们安装到当前项目中的 node_modules 目录下。
如果你的项目中包含了一个 package.json 文件，
npm i 命令会根据该文件中指定的依赖关系来安装所需的模块。
如果没有指定依赖关系，则 npm 会自动安装所需的模块及其依赖项。

$ chmod +x ./node_modules/.bin/vite

5.运行vue

$ npm run dev

六、编写API
1.Django后端
#API内容编写
文件/myapp/view.py下增加函数。注意修饰符和函数名称大小驼峰。
#网络端口编写
文件/myproject/urls.py的urlpatterns = []增加内容，格式如下：

path('getNumSum/', views.getNumSum),

格式保持一致，对应自己增加的函数。
#测试API

浏览器运行：本地ip+端口号+/函数名

示例：运行http://127.0.0.1:8000/getNumSum/
2.vue3后端API
#后端API的访问路径
文件/api/path.js下const base = {}参照格式增加内容：
numsunUrl:“/getNumSum/”,
其中的baseUrl可以修改为自己可用的ip和端口
文件/api/index.js下const api = {}参照格式增加内容：
getNumSum(){
return axios.get(path.baseUrl + path.numsunUrl)
}
#改写接收API的Setup函数
修改文件/src/view/XXXXXX/index.vue，增加setup函数到之间
示例：

import api from '../../api'  
const setup = () => {
    api.getOverView().then(
        res => {
            data.value = res.data;
            // 重新刷新
            mapInit();
            return {data};
        }
    )
    .catch(error => 
        console.log('error')
    )
};

#测试后端修改数据前端是否会对应变更