中型项目 01
1 企业web项目类型
- 商城
- B2C 直销商城商家与会员 直接交易 ( Business To Customer )，等
- B2B2C 购物平台 商家和 会员 在另外一个商家提供的平台上面进行交易，京东、天猫
- C2B 定制商城 会员向商家发起定制商品的需求，商家去完成，小米手机中就有个私人定制过程，它是发起投票，让你们对需求有必定的定制性，人数多的需求它就开发上，还有一些互联网+计划，定制农场之类的。
- O2O线上线下交易平台： 1230六、美团、饿了么等
- C2C二手交易平台 ： 早起淘宝、闲鱼、人人车，产品不是这个网站本身的，是另一个客户的
-
在axtrueshop上能够看到不少项目原型https://www.axure.com.cn/，是经过axtrue这种原型制做工具作出来的，就是一个排版效果，通常pc端原型工具用的是axture，移动端通常用墨刀，https://modao.cc/css
前段技术博客：https://www.zhangxinxu.com/前端
原型出来之后，会有公司的设计人员对原型进行一些美化（ps等）和修饰，而后出设计稿，通常里面都是一些png类型图片，设计稿会再交给公司或者产品经理进行审核，审核经过以后再交给咱们的前端工做人员进行静态页面的开发，而且同时其实咱们的后端人员也会拿到原型以后，后端就知道前端须要什么数据了，那么后端就开始搭建服务器，进行网站架构设计，技术选型，域名申请等，服务器所需环境准备好（也就是项目代码运行环境，一些软件之类的安装），而后进行数据库设计，好比咱们若是用的django，那么就须要进行models类的设计，而后进行数据库迁移指令，数据库设计的好很差，直接影响业务层面的开发和运行效率，因此很重要，而且要求比较高。而后咱们须要经过后端的代码程序完成数据库数据的获取和加工，而后交给前端，完成动态数据展现。vue
那么在项目的功能开发的时候，咱们须要记录项目开发的过程，代码的逻辑，进度等等，还须要测试咱们的代码功能是否是有bug、漏洞等，咱们在开发的过程当中不只仅开发人员本身要测试，还有专业的人员进行测试，通常称为QA（QA（QUALITY ASSURANCE），中文意思是“质量保证”），也就是测试部门的人。其中有单元测试（将代码中的一个函数或者一套逻辑做为一个总体来进行测试，测试一下参数或者返回值等是否有问题）QA人员是须要写代码的，每每有公司称之为测试开发人员。须要编写测试用例。node
项目的在开发的过程当中，可能有不少的功能，那么一个项目可能有好多人来开发，每一个人开发一部分功能，而后不停的进行代码的整合、测试、使用等，那么咱们就会用到代码管理和整合工具，也就是git、svn等。而后会有另一批人，叫作集成测试人员，这些人不须要懂代码，就是拿着工具去测一下咱们项目的运行效果是什么样的，可以承受多大并发量等等，就是常常说的什么性能测试、压力测试、容量测试等等，看一些咱们项目运行的边界在哪里，何时会支撑不住，他们就是各类软件花里胡哨的用，直到测试经过了咱们的立项标准才表示项目合格，而后再交给运维人员将咱们的项目迁移到线上服务器，可能也会借助一些工具来进行代码部署上线，而后运维人员就须要他们借助专业知识来保证项目7*24小时不间断的运行。python
mysql
一般公司内部要研发一款软硬件的产品以前，都要通过市场评估和调研分析，产生一份产品项目立项报告给公司。linux
webpack
项目概述
需求市场
需求分析和项目建设的必要性
业务分析
整体建设方案
项目风险和风险管理
可行性分析阶段
参考资料：https://blog.csdn.net/m0_37370820/article/details/81077886ios
git
可是咱们如今只须要完成视频销售和视频播放这两块流程，大概有下面九个页面。
这是商城项目的核心部分。
-
-
注册容联云短信接口平台的帐号[https://www.yuntongxun.com/?ly=baidu-pz-p&qd=cpc&cp=ppc&xl=null&kw=10360228]
-
注册保利威视频服务平台的帐号[暂时别注册,由于有个7天免费测试期，若是到时候过时了就无法用了,网址：
-
注册gitee[码云]的帐号
-
注册阿里云帐号,若是能够购买一个服务器和域名, 或者第一次使用的能够申请一个免费外网服务器
依赖包安装
pip install django -i https://pypi.douban.com/simple/ #注意：在虚拟环境中安装第三方包的时候，不要使用sudo，由于sudo是以管理员身份来安装，会将安装的东西安装到全局中去，而不是在虚拟环境中，而且在linux系统下不要出现中文路径 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/
4. 搭建项目
4.1 建立项目
cd ~/Desktop
mkdir luffy
cd luffy
django-admin startproject luffyapi
效果:
在pycharm中打开项目
先使用127.0.0.1:8000的网址来运行项目。
4.2 调整目录
luffy/
├── docs/ # 项目相关资料保存目录
├── luffycity/ # 前端项目目录
├── luffyapi/ # 后端项目目录
├── logs/ # 项目运行时/开发时日志目录
├── manage.py
├── luffyapi/ # 项目主应用，开发时的代码保存
│ ├── apps/ # 开发者的代码保存目录，以模块[子应用]为目录保存（包）
│ ├── libs/ # 第三方类库的保存目录[第三方组件、模块]（包）
│ ├── settings/ #（包）
│ ├── dev.py # 项目开发时的本地配置
│ ├── prod.py # 项目上线时的运行配置
│ ├── test.py # 测试人员使用的配置(我们不须要)
│ ├── urls.py # 总路由（包）
│ ├── utils/ # 多个模块[子应用]的公共函数类库[本身开发的组件]
└── scripts/ # 保存项目运营时的脚本文件
在编辑中开发项目时,必须指定项目目录才能运行,例如,开发后端项目,则必须选择的目录是luffyapi
上面的目录结构图，使用Ubuntu的命令tree输出的。
若是没有安装tree，可使用 sudo apt install tree，就有了。
注意：建立文件夹的时候，是建立包(含init.py文件的)仍是建立单纯的文件夹，看目录里面放的是什么，若是放的是py文件相关的代码，最好建立包，若是不是，那就建立单纯的文件夹。
4.2.1 分不一样环境进行项目配置
开发者本地的环境、目录、数据库密码和线上的服务器都会不同,因此咱们的配置文件能够针对不一样的系统分红多分.
-
在项目主应用下,建立一个settings的配置文件存储目录
-
根据线上线下两种状况分别建立2个配置文件 dev.py和prod.py
-
把原来项目主应用的 settings.py配置内容复制2份到dev.py和prod.py里面
-
把原来的settings.py配置文件修改文件名或者删除
新的目录settings:
接下来,就能够根据在manage.py中根据不一样的状况导入对应的配置文件了.
4.3 建立代码版本
cd进入到本身但愿存储代码的目录路径，并建立本地仓库.git【pycharm直接打开终端就是项目根目录了。无须cd了】 新建立的本地仓库.git是个空仓库
cd 目录路径
git init
4.3.1 配置用户名和邮箱
git config --global user.name 'xxx'
git config --global user.email 'xxx@163.com'
4.4 在gitee平台建立工程
公司通常都会有本身的代码仓库，通常都是本身搭建，也有使用第三方提供代码管理平台。
经常使用的代码管理平台：github、gitee(码云)、codepen
若是公司本身搭建的代码管理平台，gitlab框架
1） 建立私有项目库
建立私有空仓库之后的界面:
2）克隆项目到本地
注意：
咱们当前项目不须要这个步骤
这个步骤是 当之后咱们进入公司里面，参与人家已经在作的项目时，别人已经有仓库了，可是咱们是新人加入项目中的，那么咱们不须要在本身本地进行git init，直接git clone 复制别人的仓库代码
git clone 仓库地址
注意，若是当前目录下出现git仓库同名目录时，会克隆失败。
3）建立并切换分支到dev
# git branch dev # 建立本地分支dev,dev是自定义
# git checkout dev # 切换本地分支代码
git checkout -b 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码云上面
# .表示当前目录下全部的文件或目录提交到上传队列[上传队列也叫"暂存区"]
git add .
# 把本地上传队列的代码提交到本地仓库
git commit -m "项目初始化搭建"
# 给本地的git版本控制软件设置项目的远程仓库地址
git remote add origin https://gitee.com/mooluo/luffyproject.git
# 提交代码给远程仓库
git push -u origin master
扩展：
1. 经过 git status 能够查看当前项目的代码版本状态
2. 经过 git reflog 能够查看代码版本日志[简单格式]
3. 经过 git log 能够查看代码版本日志[详细格式]
4. 删除分支 git branch -D 分支名称
注意,不能删除当前所在分支,必须切换到别的分支上才能进行删除
最终，成功提交了代码版本到gitee平台。效果：
上面虽然成功移交了代码版本，可是一些不须要的文件也被提交上去了。
因此，咱们针对一些不须要的文件，能够选择从代码版本中删除，而且使用.gitignore把这些垃圾文件过滤掉。
git rm 文件 # 删除单个文件
git rm -rf 目录 # 递归删除目录
# 如下操做建议经过终端来完成，不要使用pycharm提供，不然删除.idea还会继续生成。
git rm -rf .idea
git rm db.sqlite3
# 注意，上面的操做只是从项目的源代码中删除，可是git是不知情的，因此咱们须要同步。
git add .
git commit -m "删除没必要要的文件或目录"
git push -u origin master
使用.gitignore把一些垃圾文件过滤掉。
vim .gitignore
./idea
./idea/*
./git
./db.sqlite3
开发时咱们常常会使用pycharm的提供的git管理工具来完成代码的拉取和推送。
4.5 异常处理
新建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.py配置文件中添加
REST_FRAMEWORK = {
# 异常处理
'EXCEPTION_HANDLER': 'luffyapi.utils.exceptions.custom_exception_handler',
}
4.6 日志配置
django官方文档
在settings/dev.py文件中追加以下配置：
# 日志配置
LOGGING = {
'version': 1, #使用的python内置的logging模块，那么python可能会对它进行升级，因此须要写一个版本号，目前就是1版本
'disable_existing_loggers': False, #是否去掉目前项目中其余地方中以及使用的日志功能，可是未来咱们可能会引入第三方的模块，里面可能内置了日志功能，因此尽可能不要关闭。
'formatters': { #日志记录格式
'verbose': { #levelname等级，asctime记录时间，module表示日志发生的文件名称，lineno行号，message错误信息
'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': { #在debug=True下产生的一些日志信息，要不要记录日志，须要的话就在handlers中加上这个过滤器，不须要就不加
'()': 'django.utils.log.RequireDebugTrue',
},
'require_debug_false': { #和上面相反
'()': 'django.utils.log.RequireDebugFalse',
},
},
'handlers': { #日志处理方式，日志实例
'console': { #在控制台输出时的实例
'level': 'DEBUG', #日志等级；debug是最低等级，那么只要比它高等级的信息都会被记录
'filters': ['require_debug_true'], #在debug=True下才会打印在控制台
'class': 'logging.StreamHandler', #使用的python的logging模块中的StreamHandler来进行输出
'formatter': 'simple'
},
'file': {
'level': 'INFO',
'class': 'logging.handlers.RotatingFileHandler',
# 日志位置,日志文件名,日志保存目录必须手动建立
'filename': os.path.join(os.path.dirname(BASE_DIR), "logs/luffy.log"), #注意，你的文件应该有读写权限。
# 日志文件的最大值,这里咱们设置300M
'maxBytes': 300 * 1024 * 1024,
# 日志文件的数量,设置最大日志数量为10
'backupCount': 10,
# 日志格式:详细格式
'formatter': 'verbose',
'encoding': 'utf-8', # 设置默认编码，不然打印出来汉字乱码
},
},
# 日志对象
'loggers': {
'django': { #和django结合起来使用，将django中以前的日志输出内容的时候，按照咱们的日志配置进行输出，
'handlers': ['console', 'file'], #未来项目上线，把console去掉
'propagate': True, #冒泡：是否将日志信息记录冒泡给其余的日志处理系统，工做中都是True，否则django这个日志系统捕获到日志信息以后，其余模块中可能也有日志记录功能的模块，就获取不到这个日志信息了
},
}
}
4.7 建立数据库
create database lyapi default charset=utf8mb4; -- utf8也会致使有些极少的中文出现乱码的问题，mysql5.5以后官方才进行处理，出来了utf8mb4，这个是真正的utf8，可以容纳全部的中文，其实通常状况下utf8就够用了。
为当前项目建立数据库用户[这个用户只能看到这个数据库]
create user ly_user identified by '123';
grant all privileges on lyapi.* to 'ly_user'@'%';
flush privileges;
mysql -u luffy_user -pluffy
select user(); #luffy_user
4.8 配置数据库链接
打开settings/dev.py文件，并配置
DATABASES = {
"default": {
"ENGINE": "django.db.backends.mysql",
"HOST": "127.0.0.1",
"PORT": 3306,
"USER": "luffy_user",
"PASSWORD": "luffy",
"NAME": "luffy",
}
}
在项目主模块的 __init__.py中导入pymysql
import pymysql
pymysql.install_as_MySQLdb()
python manage.py makemigrations
python manage.py migrate
调整错误
数据库版本检测致使的错误
数据库的版本检测代码注释掉。
第二个错误也是由于数据库版本的默认编码致使，query返回的内容格式使用有误。
新增一行代码，把query查询结果转换格式为 bytes类型
luffyapi项目后端基本就配置完了，下面搞一下前端客户端。
git add .
git commit -m 'v2 各类配置'
git push orgin dev
5. 搭建前端项目
5.1 建立项目目录
cd /home/hkxpz/py32/
vue init webpack lyweb
5.2 前端初始化全局变量和全局方法
在src目录下建立settings.js站点开发配置文件：
export default {
host:"http://127.0.0.1:8000",
}
在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; #将settings中的内容做为vue的属性，之后就不用每次都导包了
//
// /* eslint-disable no-new */
// new Vue({
// el: '#app',
// router,
// components: { App },
// template: '<App/>'
// });
App.vue，全局css初始化代码
reset.css
body{
margin: 0;
padding: 0;
}
ul{
list-style: none;
padding: 0;
margin: 0;
}
li{
list-style: none;
}
/*.el-header{*/
/* width: 1200px;*/
/*}*/
input,select,textarea{
border: none;
outline: none;
}
a{
text-decoration: none;
color: #4a4a4a;
}
也能够把App.vue的style标签的css代码放到static外部目录下引用过来
main.js
import "../static/css/reset.css";
6. 跨域CORS
咱们如今为前端和后端分别设置两个不一样的域名：
| 位置 | 域名 |
|---|---|
| 前端 | www.lyweb.com |
| 后端 | www.lyapi.com |
编辑/etc/hosts文件，能够设置本地域名
sudo vim /etc/hosts
在文件中增长两条信息
127.0.0.1 localhost
127.0.0.1 www.lyapi.com
127.0.0.1 www.lyweb.com
暂停运行前端项目，并修改配置文件config/index.js
host: 'www.lyweb.com', // 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,
保存修改信息，并重启项目
这样就能够了，如今尽可能先不用使用80端口，比较麻烦
经过浏览器访问drf项目,会出现如下错误信息
能够经过settings/dev.py的ALLOWED_HOSTS,设置容许访问
# 设置哪些客户端能够经过地址访问到后端
ALLOWED_HOSTS = [
'www.lyapi.com',
'www.lyweb.com',
]
让用户访问的时候，使用api.luffycity.cn:8000
1. 修改pycharm的manage.py的配置参数
如今，前端与后端分处不一样的域名，咱们须要为后端添加跨域访问的支持
不然前端没法使用axios没法请求后端提供的api数据，咱们使用CORS来解决后端对跨域访问的支持。
使用django-cors-headers扩展
在 Response(headers={"Access-Control-Allow-Origin":'客户端地址/*'})
文档：https://github.com/ottoyiu/django-cors-headers/
安装
pip install django-cors-headers
添加应用
INSTALLED_APPS = (
...
'corsheaders',
...
)
中间件设置【必须写在第一个位置】
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware', #放在中间件的最上面，就是给响应头加上了一个响应头跨域
...
]
须要添加白名单，肯定一下哪些客户端能够跨域。
# CORS组的配置信息
CORS_ORIGIN_WHITELIST = (
#'www.luffycity.cn:8080', #若是这样写不行的话，就加上协议(http://www.luffycity.cn:8080，由于不一样的corsheaders版本可能有不一样的要求)
'http://www.lyweb.com:8080',
)
CORS_ALLOW_CREDENTIALS = False # 是否容许ajax跨域请求时携带cookie，False表示不用，咱们后面也用不到cookie，因此关掉它就能够了，以防有人经过cookie来搞咱们的网站
完成了上面的步骤，咱们就能够经过后端提供数据给前端使用ajax访问了。
前端使用 axios就能够访问到后端提供给的数据接口，可是若是要附带cookie信息，前端还要设置一下。
前端引入axios插件并配置容许axios发送cookie信息[axios自己也不容许ajax发送cookie到后端]
npm i axios -S --registry https://registry.npm.taobao.org
在main.js中引用 axios插件
import axios from 'axios'; // 从node_modules目录中导入包
// 客户端配置是否容许ajax发送请求时附带cookie，false表示不容许
axios.defaults.withCredentials = false;
Vue.prototype.$axios = axios; // 把对象挂载vue中
若是你拷贝前端vue-cli项目到我们指定目录下，若是运行起来有问题，一些不知名的错误，那么就删除node_modules文件件，而后在项目目录下执行npm install 这个指令，从新按照package.json文件夹中的包进行node_modules里面包的下载
- 1. 01-项目简介
- 2. 01项目概述
- 3. 项目进度-01
- 4. React电商项目--01项目搭建
- 5. 01-Flask-初始化项目
- 6. CRM项目开源（01）
- 7. IT项目管理01
- 8. 项目三--BBS论坛--01
- 9. #git管理项目01#
- 10. Java项目笔记01
- 更多相关文章...
- • Mozilla 项目 - 浏览器信息
- • Maven 项目模板 - Maven教程
- • Kotlin学习（二）基本类型
- • Scala 中文乱码解决
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 01-项目简介
- 2. 01项目概述
- 3. 项目进度-01
- 4. React电商项目--01项目搭建
- 5. 01-Flask-初始化项目
- 6. CRM项目开源（01）
- 7. IT项目管理01
- 8. 项目三--BBS论坛--01
- 9. #git管理项目01#
- 10. Java项目笔记01