项目实战—小饭桌

一 项目环境

项目环境说明

 　　本项目是一个模仿小饭桌官网的项目实战。具有前台和CMS后台管理系统。具有以下模块：新闻、在线课程、付费资讯、搜索等模块。其中涉及到的技术要点有：Django、ajax，Restful API，arttemplate.js、在线视频播放，支付，haystack搜索，UEditor富文本编辑器，第三方分享等。

 

前端方向

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

 

后端方向

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

 

1-1 前端开发环境配置

1-1-1 nvm 安装

　　nvm（Node Version Manager）是一个用来管理node版本的工具。我们之所以需要使用node，是因为我们需要使用node中的npm(Node Package Manager)，使用npm的目的是为了能够方便的管理一些前端开发的包！nvm的安装非常简单，步骤如下：

  1. 到这个链接下载nvm的安装包：https://github.com/coreybutler/nvm-windows/releases。
  2. 然后点击一顿下一步，安装即可！
  3. 安装完成后，还需要配置环境变量。在我的电脑->属性->高级系统设置->环境变量->系统环境变量->Path下新建一个，把nvm所处的路径填入进去即可！
  4. 打开cmd，然后输入nvm，如果没有提示没有找不到这个命令。说明已经安装成功！
  5. Mac或者Linux安装nvm请看这里：https://github.com/creationix/nvm。也要记得配置环境变量。

nvm常用命令：

  1. nvm install node：安装最新版的node.js。nvm i == nvm install。
  2. nvm install [version]：安装指定版本的node.js 。
  3. nvm use [version]：使用某个版本的node。
  4. nvm list：列出当前安装了哪些版本的node。
  5. nvm uninstall [version]：卸载指定版本的node。
  6. nvm node_mirror [url]：设置nvm的镜像。
  7. nvm npm_mirror [url]：设置npm的镜像。

1-1-2 node 安装

　　安装完nvm后，我们就可以通过nvm来安装node了。这里我们安装6.4.0版本的的node.js就可以。因为最新版的node.js的npm是5.0的，上面还有很多坑。安装命令如下：

nvm install 6.4.0

如果你的网络够快，那以上命令在稍等片刻之后会安装成功。如果你的网速很慢，那以上命令可能会发生超时。因为node的服务器地址是https://nodejs.org/dist/，这个域名的服务器是在国外。因此会比较慢。因此我们可以设置一下nvm的源。

nvm node_mirror https://npm.taobao.org/mirrors/node/
nvm npm_mirror https://npm.taobao.org/mirrors/npm/

1-1-3 npm

　　npm(Node Package Manager)在安装node的时候就会自动的安装了。当时前提条件是你需要设置当前的node的版本：nvm use 6.4.0。然后就可以使用npm了.
关于npm常用命令以及用法，请看下文。

1-1-4 安装包：

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

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

1-1-5 本地安装

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

1-1-6 全局安装

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

1-1-7 卸载包：

npm uninstall [package]

1-1-8 更新包：

npm update [package]

1-1-9 搜索包：

npm search [package]

1-1-10 使用淘宝镜像：

npm install -g cnpm --registry=https://registry.npm.taobao.org 那么以后就可以使用cnpm来安装包了！

 

1-2 前端项目搭建

前端我们使用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

　　因为在本地需要使用require的方式gulp。因此也需要在本地安装一份：

npm install gulp --save-dev

　　以上的--save-dev是将安装的包的添加到package.json下的devDependencies依赖中。以后通过npm install即可自动安装。devDependencies这个是用来记录开发环境下使用的包，如果想要记录生产环境下使用的包，那么在安装包的时候使用npm install xx --save就会记录到package.json下的dependencies中，dependencies是专门用来记录生产环境下的依赖包的！

3. 创建gulp任务：

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

var gulp = require("gulp")

gulp.task("greet",function () {
    console.log('hello world');
});

这里对代码进行一一解释：

  1. 通过require语句引用已经安装的第三方依赖包。这个require只能是引用当前项目的，不能引用全局下的。require语法是node.js独有的，只能在node.js环境下使用。

  2. gulp.task是用来创建一个任务。gulp.task的第一个参数是命令的名字，第二个参数是一个函数，就是执行这个命令的时候会做什么事情，都是写在这个里面的。

  3. 写完以上代码后，以后如果想要执行greet命令，那么只需要进入到项目所在的路径，然后终端使用gulp greet即可执行。

4. 创建处理css文件的任务：

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

npm install gulp-cssnano --save-dev

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

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

// 定义一个处理css文件改动的任务
gulp.task("css",function () {
    gulp.src("./css/*.css")
    .pipe(cssnano())
    .pipe(gulp.dest("./css/dist/"))
});

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

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

5. 修改文件名：

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

var gulp = require("gulp")
var cssnano = require("gulp-cssnano")
var rename = require("gulp-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还有其他的指定文件名的方式，比如可以在文件名前加个前缀等。更多的教程可以看这个：https://www.npmjs.com/package/gulp-rename。

6. 创建处理js文件的任务：

处理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(){
    gulp.src(path.js + '*.js')
    .pipe(uglify())
    .pipe(rename({suffix:'.min'}))
    .pipe(gulp.dest('js/'));
});

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

7. 合并多个文件：

在网页开发中，为了加快网页的渲染速度，有时候我们会将多个文件压缩成一个文件，从而减少请求的次数。要拼接文件，我们需要用到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/'));
});

8. 压缩图片：

图片是限制网站加载速度的一个主要原因。图片越大，从网站上下载所花费的时间越长。因此对于一些图片，我们可以采取无损压缩，即在不改变图片质量的基础之上进行压缩。在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("gulp")
var cssnano = require("gulp-cssnano")
var rename = require("gulp-rename")

// 定义一个处理css文件改动的任务
gulp.task("css",function () {
    gulp.src("./css/*.css")
    .pipe(cssnano())
    .pipe(rename({"suffix":".min"}))
    .pipe(gulp.dest("./css/dist/"))
    .pipe(connect.reload())
});

// 定义一个监听的任务
gulp.task("watch",function () {
    // 监听所有的css文件，然后执行css这个任务
    gulp.watch("./css/*.css",['css'])
});

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

10. 更改文件后，自动刷新浏览器：

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

npm install browser-sync --save-dev

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

var gulp = 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 () {
    gulp.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/。

 

1-3 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下的。

引用父选择器（&）：

　　有时候，在嵌套的子选择器中，需要使用父选择器，那么这时候可以通过&来表示。示例代码如下：

a{
    font-weight: bold;
    text-decoration: none;
    &:hover{
        color: #888;
    }
}

定义变量：

　　在Sass中可以定义变量。对于一些比较常用的值，我们可以通过变量存储起来，以后想要使用的时候就直接用就可以了。定义变量使用$符号。示例代码如下：

$mainWidth: 980px;
#main{
    width: $mainWidth;
}

运算：

　　在Sass中支持运算。比如现在有一个容器总宽度是900，要在里面平均放三个盒子，那么我们可以通过变量来设置他们的宽度。示例代码如下：

$mainWidth: 900px;
.box{
    width: $mainWidth/3;
}

@import语法：

　　在css中@import只能导入css文件，而且对网站的性能有很大的影响。而Sass中的@import则是完全实现了一套自己的机制。他可以直接将指定文件的代码拷贝到导入的地方。示例代码如下：

@import "init.scss";

@extend语法：

　　有时候我们一个选择器中，可能会需要另外一个选择器的样式，那么我们就可以通过extend来直接将指定选择器的样式加入进来。示例代码如下：

.error{
    background-color: #fdd;
    border: 1px solid #f00;
}
.serious-error{
    @extend .error;
    border-width: 3px;
}

@mixin语法：

　　有时候一段样式代码。我们可能要用很多地方。那么我们可以把他定义i成mixin。需要用的时候就直接引用就可以了。示例代码如下：

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

如果其他地方想要使用这个mixin的时候，可以通过@include来包含进来。示例代码如下：

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

@mixin也可以使用参数。示例代码如下：

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}

那么以后在include的时候，就需要传递参数了。示例代码如下：

p { 
    @include sexy-border(blue, 1px); 
}

更详细的教程：

更详细的教程可以参考：http://sass.bootcss.com/docs/sass-reference/。

 

posted @ 2019-03-29 12:32  菜鸟SSS  阅读(719)  评论(0)  编辑  收藏  举报