526互联

015下单接口前端，支付宝get回调和post回调，上线前准备，阿里云购买，安装 git mysql redis python 虚拟环境，uwsgi nginx,部署前端，部署后端

发布时间 2023-07-06 21:07:23作者: 无敌大帅逼

1 下单接口前端

CourseDetail.vue

// 给按钮增加点击事件
handleGoPay(){
      // 1 判断是否登录，
      let token= this.$cookies.get('token')
      if(token){
        this.$axios.post(`${this.$settings.BASE_URL}order/pay/`,{
          subject:this.course_info.name,
          total_amount:this.course_info.price,
          pay_type:1,
          courses:[this.course_info.id],
        },{
          headers:{
            Authorization:'jwt '+token
          }
        }).then(res=>{
          if(res.data.code==100){
            let pay_url=res.data.pay_url
            // 打开这个地址，在当前页面中打开
            open(pay_url,'_self')

          }else {
            this.$message('下单失败')
          }
        })

      }else {
        this.$message('您没有登录，请先登录')
      }
    },

2 支付宝get回调和post回调

2.1 前端回调页面

<template>
    <div class="pay-success">
        <!--如果是单独的页面，就没必要展示导航栏(带有登录的用户)-->
        <Header/>
        <div class="main">
            <div class="title">
                <div class="success-tips">
                    <p class="tips">您已成功购买 1 门课程！</p>
                </div>
            </div>
            <div class="order-info">
                <p class="info"><b>订单号：</b><span>{{ result.out_trade_no }}</span></p>
                <p class="info"><b>交易号：</b><span>{{ result.trade_no }}</span></p>
                <p class="info"><b>付款时间：</b><span><span>{{ result.timestamp }}</span></span></p>
            </div>
            <div class="study">
                <span>立即学习</span>
            </div>
        </div>
    </div>
</template>

<script>
    import Header from "@/components/Header"

    export default {
        name: "Success",
        data() {
            return {
                result: {},
            };
        },
        created() {
            // url后拼接的参数：?及后面的所有参数 => ?a=1&b=2
            // console.log(location.search);

            // 解析支付宝回调的url参数
            let params = location.search.substring(1);  // 去除? => a=1&b=2
            let items = params.length ? params.split('&') : [];  // ['a=1', 'b=2']
            //逐个将每一项添加到args对象中
            for (let i = 0; i < items.length; i++) {  // 第一次循环a=1，第二次b=2
                let k_v = items[i].split('=');  // ['a', '1']
                //解码操作，因为查询字符串经过编码的
                if (k_v.length >= 2) {
                    // url编码反解
                    let k = decodeURIComponent(k_v[0]);
                    this.result[k] = decodeURIComponent(k_v[1]);
                    // 没有url编码反解
                    // this.result[k_v[0]] = k_v[1];
                }

            }
            // 解析后的结果
            console.log(this.result);


            // 把地址栏上面的支付结果，再get请求转发给后端
            this.$axios({
                url: this.$settings.BASE_URL + 'order/success/' + location.search,
                method: 'get',
            }).then(response => {
                if(response.data.code!=100){
                  alert('暂时未收到您的付款，请稍后刷新再试')
                }
            }).catch(() => {
                console.log('支付结果同步失败');
            })
        },
        components: {
            Header,
        }
    }
</script>

<style scoped>
    .main {
        padding: 60px 0;
        margin: 0 auto;
        width: 1200px;
        background: #fff;
    }

    .main .title {
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        padding: 25px 40px;
        border-bottom: 1px solid #f2f2f2;
    }

    .main .title .success-tips {
        box-sizing: border-box;
    }

    .title img {
        vertical-align: middle;
        width: 60px;
        height: 60px;
        margin-right: 40px;
    }

    .title .success-tips {
        box-sizing: border-box;
    }

    .title .tips {
        font-size: 26px;
        color: #000;
    }


    .info span {
        color: #ec6730;
    }

    .order-info {
        padding: 25px 48px;
        padding-bottom: 15px;
        border-bottom: 1px solid #f2f2f2;
    }

    .order-info p {
        display: -ms-flexbox;
        display: flex;
        margin-bottom: 10px;
        font-size: 16px;
    }

    .order-info p b {
        font-weight: 400;
        color: #9d9d9d;
        white-space: nowrap;
    }

    .study {
        padding: 25px 40px;
    }

    .study span {
        display: block;
        width: 140px;
        height: 42px;
        text-align: center;
        line-height: 42px;
        cursor: pointer;
        background: #ffc210;
        border-radius: 6px;
        font-size: 16px;
        color: #fff;
    }
</style>

3 上线前准备

# 后端项目，修改好线上配置文件，把代码推送到git仓库

# 前端项目
	-修改前端访问的后端地址
        export default {
            BASE_URL: 'http://8.130.18.221:8000/api/v1/'
        }
        
    -把vue项目编译成 html，css，js
    	npm run build  # 在项目目录下生成dist文件夹，内部就是咱们上线要用的
    -把dist文件夹压缩，待命

4 阿里云购买

# 购买一台服务
	-项目跑在服务器上
    -购买公网ip：别人访问我们的ip，就能访问到我们的项目
    -购买域名：备案---》访问域名---》转发到你的ip
# 阿里云，华为云，腾讯云
	-按量付费---》冲100块---》买4台
    -https://ecs.console.aliyun.com/home
    
# 下载 finalshell ，远程链接linux服务器的
	http://www.hostbuf.com/t/988.html
    不下这个软件：打开cmd ：ssh root@8.130.18.221    输入密码
    一堆linux命令

4.1 上线架构图

image

5 安装git

# 方式一：
	yum install git -y
    
# 方式二：（开发会用的软件）
	yum -y groupinstall "Development tools"
	
    
    
# 执行下面这条
	yum install openssl-devel bzip2-devel expat-devel gdbm-devel readline-devel sqlite-devel psmisc libffi-devel -y

6 安装mysql

# mysql 5.7 
# 前往用户根目录
 cd ~

# 下载mysql57
wget http://dev.mysql.com/get/mysql57-community-release-el7-10.noarch.rpm


# 安装mysql57
 yum -y install mysql57-community-release-el7-10.noarch.rpm
 yum install mysql-community-server --nogpgcheck -y

# 启动mysql57并查看启动状态
systemctl start mysqld
systemctl status mysqld

# 查看默认密码并登录
grep "password" /var/log/mysqld.log   # U>bjULStm1Q<
mysql -uroot -p

# 修改密码
 ALTER USER 'root'@'localhost' IDENTIFIED BY 'Lqz12345?';

7 安装redis

###### 官方下载编译好的reids
wget https://packages.redis.io/redis-stack/redis-stack-server-6.2.6-v7.rhel7.x86_64.tar.gz
tar -xf redis-stack-server-6.2.6-v7.rhel7.x86_64.tar.gz
mv redis-stack-server-6.2.6-v7/ redis
cd redis/bin
./redis-server   # 启动redis，使用默认配置启动的
#在任意路径下敲redis-server都能把服务运行，
	-方式一：把bin路径加入到环境变量
    -方式二：使用软连接， /usr/bin/    本身在环境变量 ，在任意路径敲redis-server redis-cli都能找到 
    ln -s /root/redis/bin/redis-server /usr/bin/redis-server
    ln -s /root/redis/bin/redis-cli /usr/bin/redis-cli
#查看是否创建软连接成功
ls |grep redis

# 启动redis服务，后台运行
redis-server &


###### 源码安装----》

# 下载redis-6.2.6
wget http://download.redis.io/releases/redis-6.2.6.tar.gz

# 解压安装包
tar -xf redis-6.2.6.tar.gz

# 进入目标文件
cd redis-6.2.6

# 编译环境 gcc   在src路径下把源码编译出  redis-cli  reidis-server
 make   

# 复制环境到指定路径完成安装
cp -r ~/redis-6.2.6 /usr/local/redis

# 配置redis可以后台启动：修改下方内容
vim /usr/local/redis/redis.conf
daemonize yes

# 完成配置修改
>: esc
>: :wq

# 建立软连接
ln -s /usr/local/redis/src/redis-server /usr/bin/redis-server1
ln -s /usr/local/redis/src/redis-cli /usr/bin/redis-cli1

# 后台运行redis
>: cd /usr/local/redis
>:  redis-server1 ./redis.conf

# 测试redis环境
redis-cli


# 关闭redis服务
pkill -f redis -9
redis-cli  shutdown

8 安装python

# 可以使用yum 安装，不能指定版本
# 源码安装，下载指定版本的源码，编译安装

# 所有linxu和mac，都自带python2：系统服务，是用python写的
# 阿里云的centos默认装了python3.6.8
# python2.7     python3.6.8     python3.9


#1  源码安装python，依赖一些第三方zlib* libffi-devel
yum install openssl-devel bzip2-devel expat-devel gdbm-devel readline-devel sqlite-devel psmisc libffi-devel zlib* libffi-devel  -y

# 1前往用户根目录
cd ~

#2 下载 或 上传 Python3.8.6  服务器终端
# https://registry.npmmirror.com/binary.html?path=python/
# wget https://registry.npmmirror.com/-/binary/python/3.8.6/Python-3.8.6.tgz
wget https://registry.npmmirror.com/-/binary/python/3.9.10/Python-3.9.10.tgz
# wget https://www.python.org/ftp/python/3.9.16/Python-3.9.16.tgz

#3  解压安装包
tar -xf Python-3.9.10.tgz 

#4 进入目标文件
cd Python-3.9.10

#5  配置安装路径：/usr/local/python3
# 把python3.9.10 编译安装到/usr/local/python38路径下
./configure --prefix=/usr/local/python39

#6  编译并安装,如果报错，说明缺依赖
yum install openssl-devel bzip2-devel expat-devel gdbm-devel readline-devel sqlite-devel psmisc libffi-devel zlib* libffi-devel  -y

make &&  make install

#7  建立软连接：/usr/local/python38路径不在环境变量，终端命令 python3，pip3
ln -s /usr/local/python39/bin/python3 /usr/bin/python3.9
ln -s /usr/local/python39/bin/pip3 /usr/bin/pip3.9

# 机器上有多个python和pip命令，对应关系如下
python       2.x      pip 
python3      3.6      pip3
python3.9    3.9      pip3.9

#8  删除安装包与文件：
rm -rf Python-3.9.10
rm -rf Python-3.9.10.tar.xz

9安装虚拟环境

1）安装依赖
>: pip3.9 install virtualenv
# python3.9 -m pip install --upgrade pip
# python3.9 -m pip install --upgrade setuptools
# pip3.9 install pbr
>: pip3.9 install virtualenvwrapper

2）建立虚拟环境软连接
>: ln -s /usr/local/python39/bin/virtualenv /usr/bin/virtualenv

3）配置虚拟环境：填入下方内容
# ~/ 表示用户家路径：root用户，就是在/root/.bash_profile
>: vi ~/.bash_profile  
# 按 a
# 光标上下控制，粘贴上下面内容

VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3.9
source /usr/local/python39/bin/virtualenvwrapper.sh
# 按 esc
# 输入  :wq   敲回车


# 退出编辑状态
esc

# 保存修改并退出
>: :wq

# 更新配置文件内容
source ~/.bash_profile

# 虚拟环境默认根目录：
/root/.virtualenvs


#创建虚拟环境
mkvirtualenv -p python3.9 luffy

10 安装uwsgi

# django 项目上线需要使用uwsgi这个web服务器运行django项目，安装这个web服务器
# 使用uwsgi运行django，不再使用测试阶段的wsgiref来运行django了

# uwsgi是符合wsgi协议的web服务器，使用c写的性能高，上线要使用uwsgi

# 安装步骤
1）在真实环境下安装
pip3.9 install uwsgi
#安装到了python38的安装路径的bin路径下了
2）建立软连接
ln -s /usr/local/python39/bin/uwsgi /usr/bin/uwsgi

11 安装nginx

# 反向代理服务器
	- 做请求转发 
    - 静态资源代理
    - 负载均衡
    
    
    
# 前往用户根目录
cd ~

#下载nginx1.13.7
 wget http://nginx.org/download/nginx-1.13.7.tar.gz

#解压安装包
tar -xf nginx-1.13.7.tar.gz

#进入目标文件
cd nginx-1.13.7

# 配置安装路径：/usr/local/nginx
./configure --prefix=/usr/local/nginx

#编译并安装
 make &&  make install

# 建立软连接：终端命令 nginx
ln -s /usr/local/nginx/sbin/nginx /usr/bin/nginx

#删除安装包与文件：
cd ~
 rm -rf nginx-1.13.7
rm -rf nginx-1.13.7.tar.xz

# 测试Nginx环境，服务器运行nginx，本地访问服务器ip
nginx   # 启动nginx服务，监听80端口----》公网ip 80 端口就能看到页面了
服务器绑定的域名 或 ip:80

# 静态文件放的路径
/usr/local/nginx/html

# 查看进程 
ps aux | grep nginx

12 部署前端项目

# dist.zip 文件，在本地，上传到远程服务器

#  在远程服务器上
	yum install lrzsz -y   # 跟本地机器上传下载的软件
    yum install unzip -y    #解压zip软件
# 在远程服务器上
	rz  # 打开你本地的目录，选中dist.zip  上传到远端
# 解压
	unzip dist.zip
# 移动文件  /home/html  下面有咱们的前端静态文件
mv /root/dist /home/html
    
    
# 配置nginx 静态代理
cd  /usr/local/nginx/conf   # nginx.conf   配置文件
mv nginx.conf nginx.conf.bak
vi nginx.conf
# 按 a  粘贴下面代码
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    server {
        listen 80;
        server_name  127.0.0.1;
        charset utf-8;
        location / {
            root /home/html;
            index index.html;
            try_files $uri $uri/ /index.html;
        }
    }
} 
# 按 esc  :wq  回车

# 重启nginx
nginx -s reload

13 部署后台项目

# 本地####
    # 1  prod.py 配置文件搞好，上午搞了
    # 2 修改项目中wsgi.py，asgi.py  用uwsgi运行wsgi.py
    os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'luffy_api.settings.prod')

    # 3 导出项目依赖
    pip3 freeze > requirements.txt

    #4 推到远端

### 远程服务器
# 1 拉取项目，安装模块
    mkdir /home/project
    cd  /home/project
    git clone https://gitee.com/liuqingzheng/luffy_api.git
    进入到虚拟环境
    workon luffy 
    cd /home/project/luffy_api
    pip install -r requirements.txt  # 可能会出错 mysqlclient装不上，先注释，装上能装上的，再单独装mysqlclient

    yum install python3-devel -y
    yum install mysql-devel --nogpgcheck -y
    pip install mysqlclient


    # 2 虚拟环境中也要安装uwsgi
    pip install uwsgi
    
    # 3 配置数据库
        mysql -uroot -p
        #创建数据库
        create database luffy default charset=utf8;

        #设置权限账号密码：账号密码要与项目中配置的一致
        grant all privileges on luffy.* to 'luffy'@'%' identified by 'Luffy123?';
        grant all privileges on luffy.* to 'luffy'@'localhost' identified by 'Luffy123?';
        flush privileges;
        #退出mysql
        quit;
        # 使用本地navicate链接阿里云的luffy库，使用luffy用户
   # 4 迁移表
		# 把项目中得迁移文件删除，提交，远程
		 python manage.py makemigrations
    	 python manage.py migrate
            
   # 5 uwsgi 运行django
		-写一个uwsgi的配置文件，在项目路径下，新建一个  luffyapi.xml
        <uwsgi>    
           <socket>127.0.0.1:8888</socket>
           <chdir>/home/project/luffy_api/</chdir>       
           <module>luffy_api.wsgi</module>
           <processes>4</processes>
           <daemonize>uwsgi.log</daemonize>
    	</uwsgi>
    	-使用uwsgi启动
        	uwsgi -x luffyapi.xml
         -查看是否正常运行
        	ps aux |grep uwsgi
            
            
    # 6 配置nginx转发
    	cd /usr/local/nginx/conf
    	vi nginx.conf
    	# 新增的server
        server {
            listen 8000;
            server_name  127.0.0.1;
            charset utf-8;
            location / {
               include uwsgi_params;
               uwsgi_pass 127.0.0.1:8888;
               uwsgi_param UWSGI_SCRIPT luffy_api.wsgi; 
               uwsgi_param UWSGI_CHDIR /home/project/luffy_api/;
            }
        }
        
        # 重启nginx 
        nginx -s reload
   # 7 导入数据
	
   # 8 配置域名解析

13.1 配置后台admin访问

# 1 浏览器访问http://8.130.18.221:8000/admin  发现没有样式
# 因为uwsgi不能给我们代理静态资源

# 收集静态资源，使用nginx代理
# prod.py中加入
STATIC_ROOT = '/home/project/luffy_api/luffy_api/static/'

# 执行命令
# 进入虚拟环境
mkdir /home/project/luffy_api/luffy_api/static
python manage_prod.py collectstatic

# 修改nginx配置文件
# 新增的配置静态文件

server {
            listen 8000;
            server_name  127.0.0.1;
            charset utf-8;
            location / {
               include uwsgi_params;
               uwsgi_pass 127.0.0.1:8888;
               uwsgi_param UWSGI_SCRIPT luffy_api.wsgi; 
               uwsgi_param UWSGI_CHDIR /home/project/luffy_api/;
            }
           location /static {
            alias /home/project/luffy_api/luffy_api/static;
        	}
        }

安全组

# 买的阿里云机器80 端口开放的
#但是，3306,6379 8000端口可能没打开
# 不打开安全组的端口，是访问不进来的