1. 技术文章
  2. 项目实战

项目实战

由 感情迁移 提交于 2020-01-29 07:06:39

项目实战

环境介绍

本项目具有前台和CMS后台管理系统。
具有以下模块:新闻、在线课程、付费资讯、搜索等模块。
其中涉及到的技术要点有:
Django 、ajax ，Restful API，arttemplate.js 、在线视频播放,支付，haystack 搜索，UEditor 富文本编辑器，第三方分享等。
其中包括前端页面布局，逻辑处理和后台逻辑代码。

以下讲解本项目中所用到的环境

前端方向:

  1. nvm :用来管理node.js的工具。
  2. node.js :自带有npm包管理工具。
  3. npm :类似于Python 中的pip。可以非常方便的管理一些前端开发的包。
  4. gulp :用来自动化开发流程。比如ssass 转css，css和js压缩等。

后端方向:

  1. Python 3.6 :开发语言。
  2. Django 2.0 :开发框架。
  3. MySQL 5.7 :数据库。

nvm和node.js环境配置

# 更换镜像
nvm node_mirror https://npm.taobao.org/mirrors/node/
nvm npm_mirror https://npm.taobao.org/mirrors/npm/
nvm list
nvm install 6.4.0
nvm use 6.4.0
nvp -v  # =


npm install express -g  # 安装本地和全局的express模块 
npm install express

npm uninstall
npm search 
npm update 
npm install -g cnpm --registry=https://registry.npm.taobao.org  # 命令cnpm




# 强制更换npm版本
npm -g install npm@3.10.3

npm使用详解

安装包分为全局安装和本地安装。
全局安装是安装在当前node 环境中,在可以在cmd中当作命令使用。
本地安装是安装在当前项目中，只有当前这个项目能使用，并且可以通过require引用。
安装的方式只有-g 参数的区别:

npm install express #本地安装
npm install express -g # 全局安装

本地安装
1.将安装包放在./node_ modules 下(运行npm命令时所在的目录)，如果没有node. modules目录，会在当前执行npm 命令的目录下生成node. modules目录。
2.可以通过require() 来引入本地安装的包。

全局安装
1.将安装包放在/usr/1ocal 下或者你node的安装目录。
2.可以直接在命令行里使用。

卸载

npm uninstall xxx

更新、搜索

npm update 
npm search

gulp介绍和安装

前端项目搭建
前端我们使用gulp来自动化开发流程。配置好gulp 后，可以自动给我们处理好一-些工作。比如写完css后，要压缩
成.min.css ,写完js后,做混淆和压缩，图片压缩等。这些工作都可以让gulp帮我们完成。

安装gulp:
1.创建本地包管理环境:
使用npm init命令在本地生成一个package.json 文件
package.json 是用来记录你当前这个项目依赖了哪些包，以后别人拿到你这个项目后，不需要你的node_ modules 文件夹(因为node. moduels中的包实在太庞大了)。只需要执行npm install命令，即会自动安装package.json 下devDependencies 中指定的依赖包。

2.安装gulp:
gulp 的安装非常简单，只要使用npm命令安装即可。但是因为gulp需要作为命令行的方式运行，因此需要在安装在系统级别的目录中。

npm install gulp -g

# 安装gulp


npm install gulp -g
npm init # 生成package.json
npm install gulp --save-dev       # 会将安装信息放入packange.json的devDepedency   --save-dev

gulp创建任务

要使用gulp来流程化我们的开发工作。首先需要在项目的根目录下创建一个 gulpfile.js 文件。然后在gulpfile.js 中填入以下代码:

var gulp = require("gulp")
gulp.task("greet", function () {
      console.1og('hel1o world');
});

这里对代码进行解释:
1.通过require语句引用已经安装的第三方依赖包。这个require 只能是引用当前项目的，不能引用全局下的。require 语法
是node.js 独有的，只能在node.js 环境下使用。
2. gulp.task 是用来创建一一个任务。 gulp.task 的第一个参数是命令的名字，第二个参数是一个函数,就是执行这个命令的时候会做什么事情，都是写在这个里面的。
3.写完以上代码后，以后如果想要执行greet命令，那么只需要进入到项目所在的路径，然后终端使用gulp greet即可执行。

gulp创建处理css文件任务

gulp只是提供一一个框架给我们。如果我们想要实现一些更加复杂的功能，比如css压缩，那么我们还需要安装一下
gulp-cssnano插件。gulp 相关的插件安装也是通过npm命令安装，安装方式跟其他包是一模一样的(gulp插件本身就是一个普通的包)。
对css文件的处理,需要做的事情就是压缩，然后再将压缩后的文件放到指定目录下(不要和原来css文件重合了) !这里我们使用gulp-cssnano 来处理这个工作

npm install gulp-cssnano --save-dev

然后在gulpfile.js 中写入以下代码:

npm install gulp-cassnano --save-dev

var gulp = require("gulp")   # 相当于pip 引用的意思
var cssnano = require(" gulp-cssnano")
//定义一个处理css文件改动的任务
gulp.task("css", function () {
    gulp.src("./css/*.css")
    .pipe(cssnano())        # pipe 管道 将上一次的结果传到下一级
    .pipe(gulp.dest("./css/dist/"))
});

以上对代码进行详细解释:

  1. gulp.task :创建一个css处理的任务。
  2. gulp.src :找到当前css 目录下所有以.css结尾的css文件。
  3. pipe :管道方法。将上一个方法的返回结果传给另外一个处理器。比如以上的cssnano 。
  4. gulp.dest :将处理完后的文件,放到指定的目录下。不要放在和原文件相同的目录,以免产生冲突,也不方便管理。

从而html页面的格式可以直接使用压缩过后的css文件
在这里插入图片描述

gulp给文件重命名

像以上任务，压缩完css文件后，最好是给他添加一一个.min.css 的后缀，这样一眼就能知道这 个是经过压缩后的文件。这时候我们就需要使用gulp-rename 来修改了。当然首先也需要安装

npm install gulp-rename --save-dev

示例代码如下:

var gu1p = require("gulp")
var cssnano = require("gulp-cssnano")
var rename = require("gu1p- rename" )
gulp.task("css" ,function () {
    gulp.src("./css/*.css")
    .pipe(cssnano())
    .pipe(rename({"suffix":".min"}))
    .pipe(gulp. dest("./css/dist/"))
});

在上述代码中，我们增加了一行.pipe(rename({“suffix”:" .min")) ,这个我们就是使用rename方法，并且传递一个对象参数，指定修改名字的规则为添加一一个.min 后缀名。这个gulp-rename 还有其他的指定文件名的方式，比如可以在文件名前加个前缀等。

gulp处理JavaScript文件的任务

处理js文件，我们需要使用到gulp-uglify 插件。安装命令如下:

npm install gulp-uglify --save-dev

安装完后，我们就可以对js文件进行处理了。示例代码如下:

var gulp = require("gulp")
var rename = require ("gulp-rename" )
var uglify = require('gulp-uglify');
gulp.task('script'，function(){
    gu1p.src(path.js + '*.js')
    .pipe(uglify({
       'toplevel':true,         # 简化所有顶级参数
       'compress':{             # 删除所有console打印
           'drop_console':true
         }      
     }
))
    .pipe(rename({suffix:'.min'})) 
    pipe(gulp.dest('js/')); !
});

这里就是增加了一个.pipe(uglify())的处理，对js文件进行压缩和丑化(修改变量名)等处理。更多关于gulp-uglify 的教程。
请看: https://github.com/mishoo/UglifyJS2#minify-options。

合并多个文件

在网页开发中，为了加快网页的渲染速度，有时候我们会将多个文件压缩成一一个文件， 从而减少请求的次数。要拼接文件,我们需要用到gulp-concat 插件。安装命令如下:

npm install gulp-concat --save-dev

比如我们现在有一个nav.js文件用来控制导航条的。有一个index.js 文件用来控制首页整体内容的。那么我们可以使用以下代码将这两个文件合并成一一个文件:

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require(' gulp-uglify');
gulp.task('vendorjs' , function(){
    gulp.src([
    './js/nav.js',
    ' ./js/index.js '
    ])
    .pipe(concat( index.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js/'));
});

创建压缩图片任务

图片是限制网站加载速度的一个主要原因。图片越大,从网站上下载所花费的时间越长。因此对于一些图片，我们可以采取无损压缩，即在不改变图片质量的基础之上进行压缩。在gulp中我们可以通过gulp-imagemin来帮我们实现。安装命令如下:

npm install gulp-imagemin --save-dev

压缩图片也是一一个比较大的工作量，对于一些已经压缩过的图片,我们就没必要再重复压缩了。这时候我们可以使用gulp-cache 来缓存那些压缩过的图片。安装命令如下:

npm install gulp-cache --save-dev

两个插件结合使用的代码如下: .

var imagemin = require(' gulp- imagemin');
var cache = require('gulp-cache');
gulp.task("image', function(){
    gulp.src("./images/*.*")
    .pipe (cache(imagemin()))
    .pipe(gulp.dest('dist/images/'));
});

监听文件修改，自动执行任务

9.检测代码修改，自动刷新浏览器:
以上所有的任务,我们都是需要手动的在终端去执行。这样很不方便我们开发。最好的方式就是我修改了代码后，gulp 会自动的执行相应的任务。这个工作我们可以使用gulp内置的watch方法帮我们完成:

var gulp = require("gu1p")
var cssnano = require("gu1p-cssnano" )
var rename = require("gulp-rename" )

//定义一个处理css文件改动的任务
gulp.task("css", function () {
    gulp.src("./css/*.css")
    .pipe(cssnano())
    .pipe(rename({"suffix":". min"}))
    pipe(guIp. dest("./css/dist/"))
    pipe (connect.reload())
});
//定义一个监听的任务
gulp.task("watch", function () {
//监听所有的Css文件，然后执行css这个任务
    gulp.watch("./css/*.css",['css'])
});

以后只要在终端执行gulp watch命令即可自动监听所有的css 文件，然后自动执行css 的任务,完成相应的工作。

修改代码实时刷新浏览器

以上我们实现了更改一些css文件后，可以自动执行处理css的任务。但是我们还是需要手动的去刷新浏览器，才能看到修改后的效果。有什么办法能在修改完代码后，自动的刷新浏览器呢。答案是使用browser-sync 。browser-sync 安装的命令如下:

npm install browser-sync --save-dev

browser-sync使用的示例代码如下: .

var gu1p = require("gulp")
var cssnano = require("gulp-cssnano" )
var rename = require("gulp-rename" )
var bs = require("browser-sync").create()
gulp.task("bs" , function () {
     bs.init({
     'server': {
     'baseDir': './'
}
});

//定义一个处理Css文件改动的任务
gulp. task("css",function () {
    gu1p.src("./css/*.css")
    .pipe(cssnano())
    .pipe(rename({"suffix":".min"}))
    .pipe(gulp.dest("./css/dist/"))
    .pipe(bs.stream())
});
//定义一个监听器的任务
gulp.task("watch",function(){
    gulp.watch("./css/*.css",['css'])
});

//执行gulp server开启服务器

gulp.task("server",['bs','watch'])

以上我们创建了一个bs的任务，这个任务会开启一个3000 端口,以后我们在访问html 页面的时候，就需要通
过http://127.0.0.1:3000 的方式来访问了。然后接下来我们还定义了一个server 任务。这个任务会去执行bs和watch 任务,只要修改了css 文件,那么就会执行css 的任务，然后就会自动刷新浏览器。
browser-sync更多的教程请参考: http://www.browsersync.cn/docs/gulp/。

项目环境搭建和安装相应包

在这里插入图片描述

{
  "name": "front",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.24.4",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^5.0.0",
    "gulp-cache": "^1.0.2",
    "gulp-concat": "^2.6.1",
    "gulp-concat-folders": "^1.3.1",
    "gulp-connect": "^5.5.0",
    "gulp-cssnano": "^2.1.3",
    "gulp-imagemin": "^4.1.0",
    "gulp-rename": "^1.2.3",
    "gulp-sass": "^4.0.1",
    "gulp-sourcemaps": "^2.6.4",
    "gulp-uglify": "^3.0.0",
    "gulp-util": "^3.0.8"
  }
}


where python
mkvirtualenv django-env
pip install django==2.0

编写gulpfile.js文件

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AI</title>
    <link rel="stylesheet" href="../../dist/css/index.min.css">
</head>
<body>
    hello smj!
</body>
</html>

gulpfile.js

var gulp = require("gulp");
var cssnano = require("gulp-cssnano");
var rename = require("gulp-rename");
var uglify = require("gulp-uglify");
var concat = require("gulp-concat");
var cache = require('gulp-cache');
var imagemin = require('gulp-imagemin');
var bs = require('browser-sync').create();
//var sass = require("gulp-sass");
// gulp-util：这个插件中有一个方法log，可以打印出当前js错误的信息
//var util = require("gulp-util");
//var sourcemaps = require("gulp-sourcemaps");

var path={

    'html': './templates/**/',
    'css': './src/css/',
    'js': './src/js/',
    'images': './src/images/',
    'css_dist': './dist/css/',
    'js_dist': './dist/js/',
    'images_dist': './dist/images/'
}

// 处理html文件的任务
gulp.task("html",function () {
    gulp.src(path.html + '*.html')
        .pipe(bs.stream())
});

// 定义一个css的任务
gulp.task("css",function () {
    gulp.src(path.css + '*.css')
        .pipe(cssnano())
        .pipe(rename({"suffix":".min"}))
        .pipe(gulp.dest(path.css_dist))
        .pipe(bs.stream())
});

// 定义处理js文件的任务
gulp.task("js",function () {
    gulp.src(path.js + '*.js')
        //.pipe(sourcemaps.init())
        .pipe(uglify())
        //.pipe(rename({"suffix":".min"}))
       // .pipe(sourcemaps.write())
        .pipe(gulp.dest(path.js_dist))
        .pipe(bs.stream())
});

// 定义处理图片文件的任务
gulp.task('images',function () {
    gulp.src(path.images + '*.*')
        .pipe(cache(imagemin()))
        .pipe(gulp.dest(path.images_dist))
        .pipe(bs.stream())
});

// 定义监听文件修改的任务
gulp.task("watch",function () {
    gulp.watch(path.html + '*.html',['html']);
    gulp.watch(path.css + '*.css',['css']);
    gulp.watch(path.js + '*.js',['js']);
    gulp.watch(path.images + '*.*',['images']);
});

// 初始化browser-sync的任务
gulp.task("bs",function () {
    bs.init({
        'server': {
            'baseDir': './'
        }
    });
});

// 创建一个默认的任务
gulp.task("default",['bs','watch']);

body{
    background: yellow;
}

浏览器访问：

http://localhost:3000/templates/news/index.html

sass语法介绍和转换为css

Sass语法:
众所周知,css不是门编程语言。他没法像js和python那样拥有逻辑处理的能力，甚至导入其他的css文件中的样式都做不到。而Sass就是为了解决css的这些问题。他它允许你使用变量、嵌套规则、mixins 、导入等众多功能，并且完全兼容css语法。Sass 文件不能直接被网页所识别，写完Sass后，还需要专门]的工具转化为Css才能使用。

Sass文件的后缀名:
Sass文件有两种后缀名，一个是scss ,一个是sass。
不同的后缀名,相应的语法也不一样。这里我们使用scss的后缀名。
包括后面讲到的sass语法，也都是scss 的后缀名的语法。
使用gulp将Sass 转换为css :
将Sass文件转换为css 文件的工具有很多。这里我们就使用之前讲过的gulp来实现。这里我们需要使用gulp-sass 插件来帮我们完成。安装方式非常简单:

npm install gulp-sass --save-dev

那么处理sass的代码如下:

var gulp = require("gulp");
var sass = require("gulp-sass");
//处理css的任务
gulp.task('css',function () {
gulp.src(path.css + '*.scss' )
.pipe(sass().on("error", sass.logError))  // 如果有错，就打印
.pipe(cssnano())
.pipe(rename({"suffix":".min"}))
.pipe(gulp.dest(path.css_dist))
});

Sass基本语法:
注释:
支持/* comment */和//注朴两种方式。

嵌套:
Sass语法允许嵌套。比如#main下有一一个类为.header ，那么我们可以写成以下的形式:

#main{
background: #CCC;
.header{
width: 20px;
height: 20px;
  }
 }

这样写起来更加的直观。一看就知道. header是在#main下的。

引用父选择器(&) :

有时候，在嵌套的子选择器中，需要使用父选择器，那么这时候可以通过&来表示。示例代码如下:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

body{
    background: black;
}

var gulp = require("gulp");
var cssnano = require("gulp-cssnano");
var rename = require("gulp-rename");
var uglify = require("gulp-uglify");
var concat = require("gulp-concat");
var cache = require('gulp-cache');
var imagemin = require('gulp-imagemin');
var bs = require('browser-sync').create();
var sass = require("gulp-sass");
// gulp-util：这个插件中有一个方法log，可以打印出当前js错误的信息
//var util = require("gulp-util");
//var sourcemaps = require("gulp-sourcemaps");

var path={

    'html': './templates/**/',
    'css': './src/css/',
    'js': './src/js/',
    'images': './src/images/',
    'css_dist': './dist/css/',
    'js_dist': './dist/js/',
    'images_dist': './dist/images/'
}

// 处理html文件的任务
gulp.task("html",function () {
    gulp.src(path.html + '*.html')
        .pipe(bs.stream())
});

// 定义一个css的任务
gulp.task("css",function () {
    gulp.src(path.css + '*.scss')
        .pipe(sass().on("error",sass.logError))
        .pipe(cssnano())
        .pipe(rename({"suffix":".min"}))
        .pipe(gulp.dest(path.css_dist))
        .pipe(bs.stream())
});

// 定义处理js文件的任务
gulp.task("js",function () {
    gulp.src(path.js + '*.js')
        //.pipe(sourcemaps.init())
        .pipe(uglify())
        //.pipe(rename({"suffix":".min"}))
       // .pipe(sourcemaps.write())
        .pipe(gulp.dest(path.js_dist))
        .pipe(bs.stream())
});

// 定义处理图片文件的任务
gulp.task('images',function () {
    gulp.src(path.images + '*.*')
        .pipe(cache(imagemin()))
        .pipe(gulp.dest(path.images_dist))
        .pipe(bs.stream())
});

// 定义监听文件修改的任务
gulp.task("watch",function () {
    gulp.watch(path.html + '*.html',['html']);
    gulp.watch(path.css + '*.css',['css']);
    gulp.watch(path.js + '*.js',['js']);
    gulp.watch(path.images + '*.*',['images']);
});

// 初始化browser-sync的任务
gulp.task("bs",function () {
    bs.init({
        'server': {
            'baseDir': './'
        }
    });
});

// 创建一个默认的任务
gulp.task("default",['bs','watch']);

导航条实现（1）

导航条实现（2）

导航条实现（3）

导航条吸顶效果

轮播图布局和样式

JS面向对象和实现一次轮播

实现自动轮播

鼠标hover事件控制轮播图暂停和继续

切换轮播图的箭头样式及其显示和隐藏事件

轮播图上下切换

小圆点结构和样式

根据轮播图的个数动态修改小圆点结构和样式

小圆点点击事件和自动更新当前选中的小圆点

实现自动无限循环轮播

左右箭头切换实现循环轮播

新闻列表tab栏布局完成

新闻列表页布局完成

加载更多按钮的布局和样式

侧边栏-标题和广告位布局完成

侧边栏-关注第三方平台盒子布局和样式

侧边栏-热门推荐完成

footer布局和样式（1）

footer布局和样式（2）

样式重构和模块化

新闻详情标题和作者等信息布局完成

新闻内容布局完成

登录和未登录下评论输入框的布局

评论列表布局完成

课程首页整体布局和样式抽取

课堂导航条完成

课程列表单个课程布局

使用flex实现多个课程自动布局

鼠标hover到课程上的悬浮效果

scss文件重构

课程详情页整体布局

课程详情页布局（1）

课程详情页布局（2）

课程详情页布局（3）

剩余页面代码解析

登录和注册的模态对话框实现

实现关闭和隐藏模态对话框

登录和注册页面切换

登录页面元素布局完成

登录和注册页面完成

后端开发准备工作

adminlte框架集成和登录页面实现

User模型创建

登录功能实现（1）

登录功能实现（2）

重构Restful API的实现

将静态页面改造成Django模板（1）

将静态页面改造成Django模板（2）

登录模态对话框和网站的集成

登录功能和模态对话框集成

toast提示错误消息

登录状态更改和退出登录

图形验证码的制作和点击更换

.短信验证码的发送

django项目中集成短信验证码发送

短信验证码与注册页面的集成

memcached存储验证码

注册功能后台代码完成

注册页面前端逻辑完成

CMS管理系统访问和限制

CMS管理页面主框架搭建

新闻发布页面布局完成

解决首页下拉菜单的小bug

新闻分类模板完成

添加新闻分类前后台功能完成

新闻分类的编辑和删除功能实现

新闻分类细节补充（不能错过）

使用ajax上传缩略图到自己的服务器

使用ajax上传图片到七牛云

ajax上传图片到七牛细节处理

UEditor富文本编辑器的集成

发布新闻功能完成

将首页新闻列表改成活的数据

djangorestframework实现新闻列表功能

将JSON数据渲染成html页面

给arttemplate添加时间处理过滤器

切换分类异步加载文章

新闻详情页完成

新闻查询性能优化

django-debug-toolbar使用详解

新闻评论后端功能实现

新闻评论前端功能实现

新闻详情页ORM性能优化

自定义login_required限制访问

轮播图管理-轮播图页面样式实现

轮播图管理-添加轮播图卡片事件

轮播图管理-轮播图上传功能完成

轮播图管理-轮播图卡片关闭事件

轮播图管理-添加轮播图功能完成

轮播图管理-异步加载轮播图列表

轮播图管理-轮播图删除功能完成

轮播图管理-修改轮播图和限制轮播图个数

解决移除新增轮播图小bug

首页轮播图数据修改和bug解决

新闻管理-新闻列表和查询条件布局完成

新闻管理-实现新闻分页功能

时间选择器控件的集成

根据时间、标题、分类查询新闻并分页显示

将文章发布时间格式化为本地时间

编辑新闻功能完成

删除新闻功能完成

课程管理-发布课程界面和模型完成

课程管理-视频云存储讲解

课程管理-发布课程功能完成

课程管理-视频加密播放实现

购买课程-课程订单页面完成

购买课程-支付宝和微信支付功能准备工作

购买课程-生成课程订单

购买课程-配置pycharm同步代码到服务器

购买课程-添加数据（选看）

购买课程-支付宝和微信支付功能完成

购买课程-购买课程流程补充

付费资讯模型创建

付费资讯购买和下载（1）

付费资讯购买和下载（2）

搜索-普通方式实现搜索功能

搜索-haystack实现全文搜索（1）

搜索-haystack实现全文搜索（2）

权限管理-自定义django命令

权限管理-网站分组和权限创建完成

权限管理-员工管理界面完成

权限管理-添加员工功能完成

权限管理-页面访问限制

导航栏选中状态切换实现

_csrftoken错误解决方案

标签
gulp
前端开发
js代码
页面布局
css框架
html代码
js压缩
代码管理
html压缩
html语言
软件
require
轮播
browser-sync
Sass
js
css样式
css
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!