Github上某个网站前端+后端项目的踩坑记录

1.项目结构

给出项目地址：https://github.com/mtianyan/OnlineMooc
但此链接里仅包含后端代码
前端代码在这里：https://github.com/mtianyan/vue-mooc

2.数据库配置

后端项目OnlineMooc-2中OnlineMooc-2\OnlineMooc-2\sql 包含所需的sql表
数据库命名为online_mooc 且设置好字符格式
此项目的django项目的设置文件并不是OnlineMooc-2\OnlineMooc-2\tyadmin_api\settings.py
而是OnlineMooc-2\OnlineMooc-2\onlinemooc\settings\base.py
找到base.py中的DATABASES设置，将密码改成本机数据库的密码
如果运行django项目时出现字符集的错误，则可在base.py的DATABASES加入如下代码，让字符集设置与本机数据库设置一致

'TEST': {
            'CHARSET' : 'utf8',
            'COLLATION':'utf8_general_ci'
        }

3.启动后端项目以及登录后端

https://github.com/mtianyan/OnlineMooc中作者给出的用户名与密码并不存在于此项目中，所无法登录
在OnlineMooc-2\OnlineMooc-2\目录下打开cmd依次输入如下指令

python manage.py makemigrations
python manage.py migrate   #将本地数据库映射都django中，这样django才能正常运行以及读表
python manage.py createsuperuser # 创建一个可以登入后台的用户。项目作者给出的用户名密码无作用，所以需要自己新建一个用户用于登录后台。
python manage.py runserver # 默认运行在8000端口。用于启动django服务

直接使用http://127.0.0.1:8000/启动网页会404
应访问http://127.0.0.1:8000/xadmin/，才可进入登录界面。
使用自己设置的用户名和密码即可登录后台。

4.前端的启动以及连接后端

前端代码：https://github.com/mtianyan/vue-mooc
进入vue-mooc-master\vue-mooc-master目录，打开vue.config.js文件
将devServer中的

 '/api/v1': {
        target: 'http://localhost:8011',
        pathRewrite: {
          '/api/v1': '/api/v1'
        }
      },

改为

 '/api/v1': {
        target: 'http://localhost:8000',
        pathRewrite: {
          '/api/v1': '/api/v1'
        }
      },

因为后端使用的默认端口是8000所以这里需要将前端的目标端口也改为8000。
正确设置之后即可启动前端，后端的TyAdmin会自动将前后端连接好

然后在vue-mooc-master\vue-mooc-master目录打开cmd
依次输入如下指令

# 安装项目所需的依赖
npm install

# 本地开发
npm run serve

# 打包
npm run build

在浏览器打开http://localhost:3400即可进入前端页面。
但是由于此项目前端中使用的素材图片大部分为外联的网络图片。
可能会遇到get 403的错误，导致即使图片地址正确也无法显示图片。
一个简单的解决办法是在网站html代码中加入一个新标签

<meta name="referrer" content="no-referrer">