商城
门户网站[企业站和门户站]
社交网络
资讯论坛
内部系统
个人博客
内容收费站
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oaMCpLSW-1595161467061)(E:/python八期/北京python27期荏苒项目/day114/assets/开发流程.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lVaUoWWt-1595161467064)(E:/python八期/北京python27期荏苒项目/day114/assets/c0a4ede2ba0d4a7302763a65.jpg)]
立项其实就是对产品项目能不能做和怎么做，提出理论基础。大的互联网公司都有比较正规的立项流程。
通常公司内部要研发一款软硬件的产品之前，都要经过市场评估和调研分析，产生一份产品项目立项报告给公司。
产品项目立项报告一般包含以下内容：
项目概述
需求市场
需求分析和项目建设的必要性
业务分析
总体建设方案
项目风险和风险管理
可行性分析阶段
参考资料：https://blog.csdn.net/m0_37370820/article/details/81077886
功能：用户登录、多条件登录、jwt认证、记住密码、QQ第三方登录、
用户注册、短信发送、短信冷却倒计时、腾讯防水墙验证码、Celery异步发送短信和邮件
邮箱找回重置密码、使用itsdangerous对数据进行加密解密
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fpqMQTzn-1595161467066)(E:/python八期/北京python27期荏苒项目/day114/assets/1577990861697.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ntwIXnXu-1595161467068)(E:/python八期/北京python27期荏苒项目/day114/assets/1577991263742.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sYSlpyoj-1595161467068)(E:/python八期/北京python27期荏苒项目/day114/assets/1577991344099.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RPz1OHgG-1595161467071)(E:/python八期/北京python27期荏苒项目/day114/assets/1577991766752.png)]
功能：无限级别导航菜单、轮播图、退出登录、内容列表下拉刷新
采用分布式存储系统FastDFS存储网站内容图片，基于docker进行安装部署FastDFS
feed流内容推送[feed是将用户主动订阅的内容组合在一起形成内容聚合器，帮助用户持续地获取最新内容]
智能推荐原创作者、关注作者和取消关注
django集成markdown富文本编辑器
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4MCpLjk0-1595161467073)(E:/python八期/北京python27期荏苒项目/day114/assets/1577990588403.png)]
功能：文章内容实现专题、文集等归纳类目
内容基本展示、作者信息展示、作者热门文章展示、同类专题内容推荐、
文章评论、无限级别评论回复、评论分页、评论排序、分享内容、收藏内容、评论点赞和踩
点赞内容、赞赏支持
基于redis保存我的浏览历史记录
内容购买
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ez8glG24-1595161467074)(E:/python八期/北京python27期荏苒项目/day114/assets/1577993236784.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AZzOAMFv-1595161467075)(E:/python八期/北京python27期荏苒项目/day114/assets/1577993459126.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-a2sabdh4-1595161467077)(E:/python八期/北京python27期荏苒项目/day114/assets/1577993610205.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OYbastuK-1595161467077)(E:/python八期/北京python27期荏苒项目/day114/assets/1577993632021.png)]
功能：基于ElasticSearch实现中文分词，使用django-haystack配合完成内容搜索。
搜索内容结果实现分页展示
按不同条件筛选展示内容
搜索历史记录
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qhf7cldt-1595161467079)(E:/python八期/北京python27期荏苒项目/day114/assets/1577994346242.png)]
功能：个人信息基本展示、采用timeline模式展示我的动态、展示最新评论、展示我的热门内容、展示我的文集
基于ajax实现鱼书功能[在线聊天]、
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dZaAFy8h-1595161467079)(E:/python八期/北京python27期荏苒项目/day114/assets/1577994901235.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3BSgkGt4-1595161467080)(E:/python八期/北京python27期荏苒项目/day114/assets/1577995094611.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dVPoYuvJ-1595161467080)(E:/python八期/北京python27期荏苒项目/day114/assets/1577995261184.png)]
功能：基于支付宝转账到个人账户接口实现余额提现、
资金流水记录
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rwPUqp8m-1595161467081)(E:/python八期/北京python27期荏苒项目/day114/assets/1577995290426.png)]
功能：基本信息修改、用户地址信息功能修改、账户所有内容打包下载
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RWAhCZMf-1595161467082)(E:/python八期/北京python27期荏苒项目/day114/assets/1577995354497.png)]
功能：关注和取消关注
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2NL1nNYP-1595161467083)(E:/python八期/北京python27期荏苒项目/day114/assets/1577995776589.png)]
# 如果当前系统中没有虚拟环境，则使用以下命令安装虚拟环境：
# pip3 install virtualenv -i https://pypi.tuna.tsinghua.edu.cn/simple
# pip3 install virtualenvwrapper -i https://pypi.tuna.tsinghua.edu.cn/simple
# pip3 install virtualenvwrapper-win -i https://pypi.tuna.tsinghua.edu.cn/simple
mkvirtualenv renran
如果自己的开发机子中存在多个版本的python，则可以指定python解析器的版本
mkvirtualenv renran -p python3
创建虚拟环境： mkvirtualenv 虚拟环境名称
创建虚拟环境(指定python版本)： mkvirtualenv -p python3 虚拟环境名称
查看所有虚拟环境： workon
使用虚拟环境： workon 虚拟环境名称
退出虚拟环境： deactivate
删除虚拟环境（必须先退出虚拟环境内部才能删除当前虚拟环境）:
rmvirtualenv 虚拟环境名称
其他相关命令：
查看虚拟环境中安装的包： pip freeze 或者 pip list
收集当前环境中安装的包及其版本： pip freeze > requirements.txt
在部署项目的服务器中安装项目使用的模块： pip install -r requirements.txt
提示:
虚拟环境只会管理环境内部的模块和python解析器,对于源代码是毫无关系
创建虚拟环境需要联网
创建成功后, 会自动工作在这个虚拟环境上
工作在虚拟环境上, 提示符最前面会出现 “(虚拟环境名称)”
注册支付宝的开发者账号
注册阿里云账号,如果可以购买一个服务器,或者第一次使用的可以申请一个免费外网服务器
注册容联云短信接口平台的账号【www.yuntongxun.com】
注册腾讯开发者账户，申请QQ互联开发者实名认证【connect.qq.com】
申请163或者QQ邮箱开通smtp/pop3服务
注册gitee[码云]的账号
如果有条件的,可以申请一个域名进行备案[ICP备案和公安部备案],如果没有的话, 可以注册natapp
公安部备案平台：http://www.beian.gov.cn/
pip install django==2.2.0 -i https://pypi.douban.com/simple
pip install djangorestframework -i https://pypi.douban.com/simple
pip install PymySQL -i https://pypi.douban.com/simple
pip install Pillow -i https://pypi.douban.com/simple
pip install django-redis -i https://pypi.douban.com/simple
项目所在路径不要使用中文或者空格或者除了下划线的其它特殊符号
cd ~/Desktop
mkdir renran
cd renran
django-admin startproject renranapi
在pycharm中打开项目
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FkkmDBzz-1595161467083)(E:/python八期/北京python27期荏苒项目/day114/assets/1578105222972.png)]
选择菜单file, 点选settings… 设置虚拟环境
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g7KZLFAK-1595161467084)(E:/python八期/北京python27期荏苒项目/day114/assets/1553139497155.png)]
点击右边的齿轮，选择Add
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qgCLgojn-1595161467084)(E:/python八期/北京python27期荏苒项目/day114/assets/1578104421692.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m6T6jZXy-1595161467084)(E:/python八期/北京python27期荏苒项目/day114/assets/1578104445382.png)]
启动django项目中的manage.py
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UEF0Orem-1595161467085)(E:/python八期/北京python27期荏苒项目/day114/assets/1578105329159.png)]
因为仅启动manage.py，所以项目不会运行，所以需要配置启动manage.py的参数。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iYy6DTAE-1595161467085)(E:/python八期/北京python27期荏苒项目/day114/assets/1578104595762.png)]
点选“Edit Configurations”，在新窗口中的Parammeters中加上以下内容
runserver 0.0.0.0:8000
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OILLvR55-1595161467086)(E:/python八期/北京python27期荏苒项目/day114/assets/1578104637328.png)]
再次运行manage.py
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vpDD4Fb8-1595161467087)(E:/python八期/北京python27期荏苒项目/day114/assets/1578104662964.png)]
效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ztAFsyg5-1595161467087)(E:/python八期/北京python27期荏苒项目/day114/assets/1557367991756.png)]
提示：
在pycharm中如果要使用已经创建好的虚拟环境，则必须设置pycharm中的python解释器，设置为虚拟环境中的python。
reran/
├── docs/ # 项目相关资料保存目录
├ 项目开发文档.md
├── reran_pc/ # 前端项目目录
├── reranapi/ # api服务端项目目录
├── logs/ # 项目运行时/开发时日志目录
├── manage.py
├── reranapi/ # 项目主应用，开发时的代码保存
│ ├── apps/ # 开发者的代码保存目录，以模块[子应用]为目录保存
│ ├── libs/ # 第三方类库的保存目录[第三方组件、模块]
│ ├── settings/
│ ├── dev.py # 项目开发时的本地配置[不需要上传到线上或者服务器]
│ ├── prod.py # 项目上线时的运行配置
│ ├── urls.py # 总路由
│ ├── utils/ # 多个模块[子应用]的公共函数类库[自己开发的组件]
└── scripts/ # 保存项目运营时的脚本文件
在编辑中开发项目时,必须指定项目目录才能运行,例如,开发后端项目,则必须选择的目录是luffyapi
开发者本地的环境、目录、数据库密码和线上的服务器都会不一样,所以我们的配置文件可以针对不同的系统分成多分.
新的配置文件目录settings:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2y4ytQ4A-1595161467089)(E:/python八期/北京python27期荏苒项目/day114/assets/1578105541412.png)]
接下来,就可以在manage.py中根据不同的开发环境导入对应的配置文件了.
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d0ECNojS-1595161467089)(E:/python八期/北京python27期荏苒项目/day114/assets/1557368958823.png)]
cd进入到自己希望存储代码的目录路径，并创建本地仓库.git【pycharm直接打开终端就是项目根目录了。无须cd了】
新创建的本地仓库.git是个空仓库
cd ~/Desktop/renran
git init # 为当前目录创建一个git仓库
ls -la # linux下列出当前目录所有目录文件，包括隐藏文件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sT2oxPOf-1595161467089)(E:/python八期/北京python27期荏苒项目/day114/assets/1585726362762.png)]
git config --global user.name 'moluo'
git config --global user.email '[email protected]'
公司一般都会有自己的代码仓库，一般都是自己搭建，也有使用第三方提供代码管理平台。
常用的代码管理平台：github、gitee(码云)
如果公司自己搭建的代码管理平台，gitlab框架
1） 创建私有项目库
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-COH9aQ0u-1595161467090)(E:/python八期/北京python27期荏苒项目/day114/assets/1578106172369.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KveIJvIE-1595161467091)(E:/python八期/北京python27期荏苒项目/day114/assets/1578106188249.png)]
创建私有/公有空仓库以后的界面:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cbFzNysh-1595161467092)(E:/python八期/北京python27期荏苒项目/day114/assets/1578106470078.png)]
2）克隆项目到本地
注意：
我们当前项目不需要这个步骤
这个步骤是 当以后我们进入公司里面，参与人家已经在做的项目时，别人已经有仓库了，但是我们是新人加入项目中的，那么我们不需要在自己本地进行git init，直接git clone 复制别人的仓库代码
git clone 仓库地址
注意，如果当前目录下出现git仓库同名目录时，会克隆失败。
3）创建并切换分支到dev
# git branch dev # 创建本地分支dev,dev是自定义
# git checkout dev # 切换本地分支代码
git checkout -b dev # 这里是上面两句代码的简写
git branch -d dev # 删除分支
git提交
git add 代码目录 # 添加代码到上传队列
git status # 查看当前项目的版本状态
git commit -m '添加项目代码' # 提交代码到本地仓库， -m 表示本次提交的描述
推送到远端
git push origin dev:dev
如果推送代码,出现以下提示: git pull …,则表示当前本地的代码和线上的代码版本不同.
1. 把线上的代码执行以下命令,拉取到本地,进行同步
git pull
2. 根据提示,移除多余的冲突的文件,也可以删除.
完成这些步骤以后,再次add,commit,push即可.
接下来，我们就把上面创建好的本地项目提交到gitee码云上面
# .表示当前目录下所有的文件或目录提交到上传队列[上传队列也叫"暂存区"]
# 切换当前工作目录到项目根目录 cd ~/Desktop/renran/
git add .
# 把本地上传队列的代码提交到本地仓库
git commit -m "项目初始化搭建"
# 给本地的git版本控制软件设置项目的远程仓库地址
git remote add origin https://gitee.com/moluo/renran.git
# 提交代码给远程仓库
git push -u origin master
扩展：
1. 通过 git status 可以查看当前项目的代码版本状态
2. 通过 git reflog 可以查看代码版本日志[简单格式]
3. 通过 git log 可以查看代码版本日志[详细格式]
最终就可以成功提交了代码版本到gitee平台。
上面虽然成功移交了代码版本，但是一些不需要的文件也被提交上去了。
所以，我们针对一些不需要的文件，可以选择从代码版本中删除，并且使用.gitignore把这些垃圾文件过滤掉。
git rm 文件 # 删除单个文件
git rm -rf 目录 # 递归删除目录
# 以下操作建议通过ubuntu的终端来完成，不要使用pycharm提供，否则删除.idea还会继续生成。
git rm -rf .idea
git rm db.sqlite3
# 注意，上面的操作只是从项目的源代码中删除，但是git是不知情的，所以我们需要同步。
git add .
git commit -m "删除不必要的文件或目录"
git push -u origin master
使用.gitignore把一些垃圾文件过滤掉。
vim .gitignore
renranapi/.idea
renranapi/.idea/*
renranapi/db.sqlite3
开发时我们经常会使用pycharm的提供的git管理工具来完成代码的拉取和推送。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lKFDjnAG-1595161467093)(E:/python八期/北京python27期荏苒项目/day114/assets/1557375896356.png)]
在settings/dev.py文件中追加如下配置：
# 日志配置
LOGGING = {
'version': 1,
'disable_existing_loggers': False,
'formatters': { # 日志的处理格式
'verbose': {
'format': '%(levelname)s %(asctime)s %(module)s %(lineno)d %(message)s'
},
'simple': {
'format': '%(levelname)s %(module)s %(lineno)d %(message)s'
},
},
'filters': {
'require_debug_true': {
'()': 'django.utils.log.RequireDebugTrue',
},
},
'handlers': {
'console': {
'level': 'DEBUG',
'filters': ['require_debug_true'],
'class': 'logging.StreamHandler',
'formatter': 'simple'
},
'file': {
'level': 'INFO',
'class': 'logging.handlers.RotatingFileHandler',
# 日志位置,日志文件名,日志保存目录必须手动创建
'filename': os.path.join(os.path.dirname(BASE_DIR), "logs/renran.log"),
# 单个日志文件的最大值,这里我们设置300M
'maxBytes': 300 * 1024 * 1024,
# 备份日志文件的数量,设置最大日志数量为10
'backupCount': 10,
# 日志格式:详细格式
'formatter': 'verbose'
},
},
# 日志对象
'loggers': {
'django': { # 固定，将来django内部也会有异常的处理，只会调用django下标的日志对象
'handlers': ['console', 'file'],
'propagate': True, # 是否让日志信息继续冒泡给其他的日志处理系统
},
}
}
新建utils/exceptions.py
from rest_framework.views import exception_handler
from django.db import DatabaseError
from rest_framework.response import Response
from rest_framework import status
import logging
logger = logging.getLogger('django')
def custom_exception_handler(exc, context):
"""
自定义异常处理
:param exc: 异常类
:param context: 抛出异常的上下文
:return: Response响应对象
"""
# 调用drf框架原生的异常处理方法
response = exception_handler(exc, context)
if response is None:
view = context['view']
if isinstance(exc, DatabaseError):
# 数据库异常
logger.error('[%s] %s' % (view, exc))
response = Response({'message': '服务器内部错误'}, status=status.HTTP_507_INSUFFICIENT_STORAGE)
return response
settings/dev.py配置文件中添加
REST_FRAMEWORK = {
# 异常处理
'EXCEPTION_HANDLER': 'renranapi.utils.exceptions.custom_exception_handler',
}
create database renran default charset=utf8mb4;
为当前项目创建数据库用户[这个用户只能看到这个数据库]
create user renran_user identified by 'renran';
grant all privileges on renran.* to 'renran_user'@'%';
flush privileges;
打开settings/dev.py文件，并配置
DATABASES = {
"default": {
"ENGINE": "django.db.backends.mysql",
"HOST": "127.0.0.1",
"PORT": 3306,
"USER": "renran_user",
"PASSWORD": "renran",
"NAME": "renran",
}
}
在项目主模块的 __init__.py中导入pymysql
import pymysql
pymysql.install_as_MySQLdb()
数据库版本检测导致的错误
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kMofwFDc-1595161467094)(E:/python八期/北京python27期荏苒项目/day114/assets/1557453985484.png)]
数据库的版本检测代码注释掉。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cdNRUHed-1595161467095)(E:/python八期/北京python27期荏苒项目/day114/assets/1557454099123.png)]
因为python3版本的原因，字符串的编码问题
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jKYSuaPK-1595161467096)(E:/python八期/北京python27期荏苒项目/day114/assets/1557454044879.png)]
把146的代码从下面改动
query = query.decode(errors='replace')
改成：
query = query.encode(errors='replace')
cd 项目根目录
vue init webpack 客户端项目目录
例如，我要把项目保存在~/Desktop桌面目录下，可以如下操作：
cd ~/Desktop/renran
vue init webpack renran_pc
把vue项目构建好了，运行测试服务器。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yn4STAqA-1595161467096)(E:/python八期/北京python27期荏苒项目/day115/assets/1557451125218.png)]
打开项目已经，在pycharm的终端下运行vue项目，查看效果。
npm run dev
接下来，我们根据终端上效果显示的对应地址来访问项目(如果有多个vue项目在运行，8080端口被占据了，服务器会自动改端口，所以根据自己实际在操作中看到的地址来访问。)
访问：http://localost:8080。效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ji8sS1zL-1595161467096)(E:/python八期/北京python27期荏苒项目/day115/assets/1557451188340.png)]
我们也可以把我们的前端项目进行git源代码管理
清除默认的HelloWorld组件和APP.vue中的默认样式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RTMOrc8K-1595161467097)(E:/python八期/北京python27期荏苒项目/day115/assets/1557451289161.png)]
接下来，我们可以查看效果了，一张白纸~
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eCUmVPmI-1595161467097)(E:/python八期/北京python27期荏苒项目/day115/assets/1557451300406.png)]
如果前面选择安装了vue-router，则直接跳过安装和初始化路由的步骤，直接到编写路由列表。
如果前面没有选择安装vue-router，则使用以下命令安装路由组件：
npm i vue-router -S
执行效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uo4YuGw1-1595161467098)(E:/python八期/北京python27期荏苒项目/day115/assets/1557451350882.png)]
在src目录下创建routers路由目录，在routers目录下创建index.js路由文件
index.js路由文件中，编写初始化路由对象的代码 .
import Vue from "vue"
import Router from "vue-router"
// 这里导入可以让让用户访问的组件
Vue.use(Router);
export default new Router({
// 设置路由模式为‘history’，去掉默认的#
mode: "history",
routes:[
// 路由列表
{
path: '/',
}
]
})
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YaPs55JJ-1595161467099)(E:/python八期/北京python27期荏苒项目/day115/assets/1557451480681.png)]
打开main.js文件，把router对象注册到vue中.代码：
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './routers/index';
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uMbCkge8-1595161467100)(E:/python八期/北京python27期荏苒项目/day115/assets/1557451533378.png)]
在App.vue组件中，添加显示路由对应的内容。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WBSeDtGD-1595161467100)(E:/python八期/北京python27期荏苒项目/day115/assets/1557451572377.png)]
代码：
routers/index.js
// import Vue from "vue"
// import Router from "vue-router"
//
//
// // 这里导入可以让让用户访问的组件
import Home from "../components/Home"
// Vue.use(Router);
//
// export default new Router({
// // 设置路由模式为‘history’，去掉默认的#
// mode: "history",
// routes:[
// // 路由列表
{
name:"Home",
path:"/",
component:Home,
},
{
name:"Home",
path:"/home",
component:Home,
},
]
// })
components/Home.vue
前端首页
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kau7qotx-1595161467101)(E:/python八期/北京python27期荏苒项目/day115/assets/1557451775965.png)]
在src目录下创建settings.js站点开发配置文件：
export default {
Host:"http://127.0.0.1",
}
在main.js中引入
// // The Vue build version to load with the `import` command
// // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
// import Vue from 'vue'
// import App from './App'
// import router from './routers/index';
import settings from "./settings"
// Vue.config.productionTip = false;
Vue.prototype.$settings = settings;
//
// /* eslint-disable no-new */
// new Vue({
// el: '#app',
// router,
// components: { App },
// template: '在renran_pc项目根目录下，注意，一定要是在前端项目的根目录下安装！！！
npm i element-ui -S
上面的命令等同于
npm install element-ui --save
执行命令效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ew4j9unb-1595161467102)(E:/python八期/北京python27期荏苒项目/day115/assets/1557452146253.png)]
在main.js中导入ElementUI，并调用。
代码：
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
// import Vue from 'vue'
// import App from './App'
// import router from './routers/index';
// 开发配置文件
// import settings from "./settings"
// Vue.prototype.$settings = settings;
// elementUI 导入
import ElementUI from 'element-ui';
import "element-ui/lib/theme-chalk/index.css";
// 调用插件
Vue.use(ElementUI);
// Vue.config.productionTip = false;
/* eslint-disable no-new */
// new Vue({
// el: '#app',
// router,
// components: { App },
// template: '效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R3gk5cRE-1595161467102)(E:/python八期/北京python27期荏苒项目/day115/assets/1557452192638.png)]
成功引入了ElementUI以后，接下来我们就可以开始进入前端页面开发，首先是首页。
接下来我们把之前完成的首页，直接拿过来使用[注意除了组件以外,还有静态文件也需要拿过来,包括App.vue里面的公共样式]，并运行项目。
创建static/css/reset.css，全局css初始化代码
body,h1,h2,h3,h4,h5,ul,p{
padding: 0;
margin:0;
font-weight: normal;
}
body{
margin-top: 80px;
}
a{
text-decoration: none;
color: #4a4a4a;
}
a:hover{
color: #000;
}
input{
outline: none;
}
ul{
list-style: none;
}
img{
width: 100%;
}
.header .el-menu li .el-submenu__title{
height: 26px!important;
line-height: 26px!important;
}
.el-menu--popup{
min-width: 140px;
}
.el-checkbox__inner{
width:16px;
height: 16px;
border: 1px solid #999;
}
.el-checkbox__inner:after{
width: 6px;
height: 8px;
}
.el-form-item__content{
margin-left:0px!important;
width: 50px;
}
.full-left{
float: left;
}
.full-right{
float: right;
}
main.js
import "../static/css/reset.css";
Home.vue中添加代码：
main.js代码：
4.8
4
31
2
换一批
关注// iconfont字体
import "../static/css/iconfont.css";
import "../static/css/iconfont.eot";
components/common/Header.vue
components/common/Footer.vue
完成上面的所有步骤以后，在笔记素材目录把图片全部粘贴保存到static/image目录下。
我们现在为前端和后端分别设置两个不同的域名：
| 位置 | 域名 |
|---|---|
| 前端 | www.moluo.net |
| 后端 | api.renran.cn |
编辑/etc/hosts文件，可以设置本地域名映射
sudo vim /etc/hosts
在文件中增加两条信息
127.0.0.1 api.renran.cn
127.0.0.1 www.moluo.net
访问http://www.moluo.net:8080网址，效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ScBPYgp0-1595161467103)(E:/python八期/北京python27期荏苒项目/day115/assets/1585793396075.png)]
上面并不是错误，而是没人监听了这个地址和端口了，解决方法：
暂停运行前端项目，并修改配置文件config/index.js
host: 'www.moluo.net', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: true,
保存修改信息，并重启项目
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O1R0xOSr-1595161467104)(E:/python八期/北京python27期荏苒项目/day115/assets/1557454684623.png)]
通过http://api.renran.cn:8000浏览器访问drf项目,会出现以下错误信息
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RCg4j9GG-1595161467105)(E:/python八期/北京python27期荏苒项目/day115/assets/1585793504467.png)]
可以通过settings/dev.py的ALLOWED_HOSTS,设置允许访问
# 设置哪些客户端可以通过地址访问到后端
ALLOWED_HOSTS = [
'api.renran.cn',
]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Py8s3FcM-1595161467105)(E:/python八期/北京python27期荏苒项目/day115/assets/1585793569414.png)]
让用户访问的时候，使用api.renran.cn:8000
1. 修改pycharm的manage.py的配置参数
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JcuTrWKQ-1595161467105)(E:/python八期/北京python27期荏苒项目/day115/assets/1585793674157.png)]
现在，前端与后端分处不同的域名，我们需要为后端添加跨域访问的支持
否则前端无法使用axios无法请求后端提供的api数据，我们使用CORS来解决后端对跨域访问的支持。
使用django-cors-headers扩展
在 Response(headers={"Access-Control-Allow-Origin":'客户端地址/*'})
文档：https://github.com/ottoyiu/django-cors-headers/
安装
pip install django-cors-headers
settings/dev.py，添加应用
INSTALLED_APPS = (
...
'corsheaders',
...
)
中间层设置【必须写在第一个位置】
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
...
]
添加访问服务端的白名单
# CORS组的配置信息
CORS_ORIGIN_WHITELIST = (
'http://www.moluo.net:8080',
)
CORS_ALLOW_CREDENTIALS = False # 是否允许ajax跨域请求时携带cookie，False表示不允许
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wWpNjKaP-1595161467107)(E:/python八期/北京python27期荏苒项目/day115/assets/1585793981263.png)]
完成了上面的步骤，我们就可以通过后端提供数据给前端使用ajax访问了。
前端使用 axios就可以访问到后端提供给的数据接口，但是如果要附带cookie信息，前端还要设置一下。
前端引入axios插件并配置允许axios发送cookie信息[axios本身也不允许ajax发送cookie到后端]
npm i axios -S
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d5htT9k7-1595161467107)(E:/python八期/北京python27期荏苒项目/day115/assets/1557455747921.png)]
在main.js中引用 axios插件
import axios from 'axios'; // 从node_modules目录中导入包
// 允许ajax发送请求时附带cookie，设置为不允许
axios.defaults.withCredentials = false;
Vue.prototype.$axios = axios; // 把对象挂载vue中
)]
上面并不是错误，而是没人监听了这个地址和端口了，解决方法：
暂停运行前端项目，并修改配置文件config/index.js
host: 'www.moluo.net', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: true,
保存修改信息，并重启项目
[外链图片转存中…(img-O1R0xOSr-1595161467104)]
通过http://api.renran.cn:8000浏览器访问drf项目,会出现以下错误信息
[外链图片转存中…(img-RCg4j9GG-1595161467105)]
可以通过settings/dev.py的ALLOWED_HOSTS,设置允许访问
# 设置哪些客户端可以通过地址访问到后端
ALLOWED_HOSTS = [
'api.renran.cn',
]
[外链图片转存中…(img-Py8s3FcM-1595161467105)]
让用户访问的时候，使用api.renran.cn:8000
1. 修改pycharm的manage.py的配置参数
[外链图片转存中…(img-JcuTrWKQ-1595161467105)]
现在，前端与后端分处不同的域名，我们需要为后端添加跨域访问的支持
否则前端无法使用axios无法请求后端提供的api数据，我们使用CORS来解决后端对跨域访问的支持。
使用django-cors-headers扩展
在 Response(headers={"Access-Control-Allow-Origin":'客户端地址/*'})
文档：https://github.com/ottoyiu/django-cors-headers/
安装
pip install django-cors-headers
settings/dev.py，添加应用
INSTALLED_APPS = (
...
'corsheaders',
...
)
中间层设置【必须写在第一个位置】
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
...
]
添加访问服务端的白名单
# CORS组的配置信息
CORS_ORIGIN_WHITELIST = (
'http://www.moluo.net:8080',
)
CORS_ALLOW_CREDENTIALS = False # 是否允许ajax跨域请求时携带cookie，False表示不允许
[外链图片转存中…(img-wWpNjKaP-1595161467107)]
完成了上面的步骤，我们就可以通过后端提供数据给前端使用ajax访问了。
前端使用 axios就可以访问到后端提供给的数据接口，但是如果要附带cookie信息，前端还要设置一下。
前端引入axios插件并配置允许axios发送cookie信息[axios本身也不允许ajax发送cookie到后端]
npm i axios -S
[外链图片转存中…(img-d5htT9k7-1595161467107)]
在main.js中引用 axios插件
import axios from 'axios'; // 从node_modules目录中导入包
// 允许ajax发送请求时附带cookie，设置为不允许
axios.defaults.withCredentials = false;
Vue.prototype.$axios = axios; // 把对象挂载vue中