Django打造大型企业官网-项目实战（一）

最新推荐文章于 2024-06-03 08:05:23 发布

weixin_30955341

最新推荐文章于 2024-06-03 08:05:23 发布

阅读量2.9k

点赞数 1

文章标签： python

原文链接：http://www.cnblogs.com/Eric15/articles/10647942.html

版权

Django打造大型企业官网-项目实战

一、前端环境配置

1、nvm安装

　nvm是一个用来管理 node 版本的工具。我们只所以需要使用到 node ，是因为我们需要使用 node 中的 npm ，使用 npm 的目的是为了能够方便的管理一些前端开发的包。 nvm 的安装很简单，步骤如下：

　1）下载安装包：https://github.com/coreybutler/nvm-windows/releases

　2）找到 nvm-setup.zip，下载下来。然后打开进行安装，一直下一步即可

　3）安装完成后，还需要配置环境变量：我的电脑 -> 属性 -> 高级系统设置 -> 环境变量 -> 系统环境变量 -> path 下，新建一个环境路径，把nvm所处的路径填充进去即可：

　4）打开cmd，输入nvm ，如果没有提示找不到这个命令，就代表安装成功了。

　Mac 或 Linux 安装 nvm ：https://github.com.creationix/nvm ，同样需要配置环境变量

　nvm常用命令：

　　nvm install node：安装最新版的node.js

　　nvm install [version] ：安装指定版本的node.js

　　nvm user [version] ：使用某个版本的node

　　nvm list ：列出当前安装了哪些版本的node

　　nvm uninstall [version] ：卸载指定版本的node

　　nvm node_mirror [url] ：设置nvm的镜像

　　nvm npm_mirror [url] ：设置npm的镜像

2、node安装

　安装完nvm后，我们就可以通过nvm来安装node了，这里我们安装的是6.4.0 版本的node.js。安装命令如下：

nvm install node 6.4.0

　安装中如果报错：

　请直接运行下述安装命令：

nvm install 6.4.0

　如果安装比较慢，可以考虑在安装后的nvm下的settings文件中加上以下配置：

# settings.txt

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

3、npm安装

　npm 在安装 node的时候就会自动的安装了。但当你要使用时，需要先指定当前使用的node版本，即： nvm use 6.4.0

　通过：npm -v 命令可以查看当前使用的npm版本

　使用npm 是为了更好的管理前端开发的一些包

　使用淘宝镜像：

npm install -g cnpm --registry=https://registry.npm.taobao.org

　安装了cnpm后，以后就可以使用cnpm来安装包了。

4、安装包：

　安装包分为全局安装和本地安装。全局安装是指安装到当前的node环境中，在所有的项目中都能使用；而本地安装是指安装在当前项目中，只有当前这个项目能使用。安装方式的区别在于是否带有参数：-g

　比如安装 express：

npm install express     # 本地安装

npm install express     # 全局安装

　如果报错：

npm err！Error: connect ECONNREFUSED 127.0.0.1:8087

　解决方法：

$ npm config set proxy null

　卸载包：npm uninstall [package]

　更新包：npm update [package]

　搜索包：npm search [package]

　安装包安装后存放位置：

　　1）本地安装

　　　　包安装后会放在./node_modules下 (你运行npm命令时所在的目录)，如果没有node_modules目录，则会在当前执行npm 命令的目录下直接生成一个node_modules目录

　　　　我们可以通过 require() 来引入本地安装好的包数据

　　2）全局安装

　　　　全局安装后的包，会放在/usr/local 下，或者你 node的安装目录下

　　　　可以直接在命令行里使用

5、gulp安装

　1、创建本地包管理环境：

　　使用npm init 命令时，会在本地生成一个package.json 文件，package.json 文件是用来记录你当前这个项目依赖了哪些包，以后别人拿到你这个项目后，就不需要拿你的node_modules文件夹(因为node_modules中的包实在太庞大了)。只需要拷贝package.json文件过去，再执行 npm install 命令，即会自动安装 package.json 下的 devDependencies 中指定的依赖包。

　2、安装gulp

　　gulp 的安装非常简单，只要使用 npm 命令来安装即可：

npm install gulp -g

　因为gulp需要作为命令行的方式运行，因此需要安装在系统级别的目录中，即全局安装。这样，我们就能在全局中使用gulp命令来执行操作

　因为在本地中需要使用require 的方式gulp，因此也需要在本地安装一份(即在项目目录下安装)：

npm install gulp --save-dev

　参数 --save-dev 的作用是将安装的包添加到 package.json文件下的devDependencies 依赖中。以后通过 npm install 安装时就能在当前项目自动安装gulp，当然，不指定这参数也是能完成安装的。devDependencies 是用来记录开发环境下使用的包，如果想要记录生产环境下使用的包，那么在安装的时候这样指定：npm install xx --save，即会将xx包记录到package.json 下的dependencies 中， dependencies 是专门用来记录生产环境下的依赖包的。

　#全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能# 全局安装的gulp只是让您的系统（电脑）增加了一个叫做gulp的命令，这个命令会调用当前目录下的 gulpfile.js 文件，并根据该文件的内容来执行相应的任务，而真正起到提供API功能的却是本地安装的gulp（全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能。）

6、前端环境配置步骤：前提已经安装了 nvm 、npm 、全局 gulp

新建文件夹，即项目工程project (前端)

使用 nvm 指定 node 版本，进而指定 npm 版本：nvm use 6.4.0
初始化项目：npm init --会提示输入package相关信息，初始化完成会一个package.json的文件，node 最新版本中，会再生成一个package_lock.json文件
本地(当前项目下)安装gulp ：npm install gulp --save-dev --安装完成会生成一个 node_modules文件夹，所有安装过的包都会存于此处，包括 gulp 。初始化项目时只生成package.json文件，未生成node_modules包，当执行npm命令时，比如安装包操作，就会在当前目录生成一个node_modules包，同时将带参数 --save-dev的执行命令(包)操作记录进package.json中。

　注：node最新版本中，当执行 npm install 安装包操作时，会在当前目录下生成node_modules的同时，生成一个package_lock.json 文件。关于package.json 与 package_lock.json文件的区别作用如下：

　新建前端项目：front_pro，进行项目初始化(npm init)、gulp安装后，目录如下：

7、gulp入门级介绍

1）在当前项目目录(front_pro)下新建 gulpfile.js 文件。 gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件（其实将gulpfile.js放入其他文件夹下亦可）

　gulpfile.js 文件内容类型大致如下：

var gulp = require("gulp");   # 通过require引人已安装的gulp包。 注：只能引用当前项目安装过的包，不能引用全局下的。require语法只能在node.js环境下使用

gulp.task("greet",function(){    # task：用于创建一个任务，第一个参数是任务的名字，第二个参数是一个(匿名)函数。就是当我们执行这个任务时要做的事都在函数中操作
    console.log("hello world");
});

内容编好了，需要执行greet任务时，只需要进入到当前项目所在的路径，然后启动终端，在终端执行命令：gulp greet ，即可执行上述代码中的greet任务。执行完成，会在终端打印：hello world ，如下：

2）创建处理css文件的任务

　gulp 只是提供一个框架给我们。如果我们想要实现一些更加复杂的功能，我们就需要根据需要安装相应的包或插件。比如css压缩，那么就需要安装一个 gulp-cssnano 插件。gulp相关的插件也是通过npm命令安装，安装方式跟其他包也是一模一样的（gulp插件本身也是一个普通的包）

　对 css 文件进行处理，一般做的事情就是压缩，然后再将压缩后的文件放到指定目录下（注意不要和原来的 css文件重合了）。现在我们就用gulp-cssnano 来处理css文件：

　1.1）安装gulp-cssnano：

# 终端下执行
npm install gulp-cssnano --save-dev

　1.2）处理 css 文件：

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

// 定义一个处理css文件改动的任务
gulp.task("css",function() {
    gulp.src("./static/css/*.css")   // 要处理的css文件路径
    .pipe(cssnano())     // pipe：管道方法，将上一个方法的返回结果传给另一个处理器，比如此处的cssnano，将css文件进行压缩
    .pipe(rename({"suffix":".min"}))   // rename：可用于修改文件名。suffix：添加后缀，结果为：xx.min.css
    .pipe(gulp.dest("./dist/css"));   // gulp.dest：将处理完的文件，放到指定的目录下
});

上述代码中，我们还用了gulp-rename插件，对css文件进行改名操作（添加后缀）。gulp-rename需要安装：npm install gulp-rename --save-dev 。关于gulp-rename的使用，可以参考GitHub链接：https://www.npmjs.com/package/gulp-rename

如下图所示：我们将static/css下面的css文件进行压缩处理，处理之后放置但dist/css目录下

3）创建处理js文件的任务

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

npm install gulp-uglify --save-dev

　使用 gulp-uglify 对 js 文件进行处理：

var gulp = require("gulp");
var rename = require("gulp-rename");
var uglify = require("gulp-uglify");

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

　gulp-uglify 插件配置简单介绍： gulp-uglify教程：https://github.com/mishoo/UglifyJS2#minify-options

　　①. 当压缩的文件有多个时，以数组的方式传入 (js中数组，非python) ：gulp.src(['src/js/index.js','src/js/detail.js'])

　　②. 匹配符：！、* 、** 、 {}

　　　　！：不等，即非

　　　　* ：任意个

　　　　** ：0个或多个

　　　　{} ：匹配花括号中的对象

　　　　demo：

var gulp = require('gulp'),
      uglify= require('gulp-uglify');

gulp.task('jsmin', function () {
    //第一个是，压缩src/js目录下的所有js文件
    //第二个是，除了test1.js和test2.js（**匹配src/js的0个或多个子文件夹）js文件
    gulp.src(['src/js/*.js', '!src/js/**/{test1,test2}.js'])
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});

　　③. 其他参数：

var gulp = require('gulp'),
      uglify= require('gulp-uglify');
 
gulp.task('jsmin', function () {
    gulp.src(['src/js/*.js', '!src/js/**/{test1,test2}.js'])
        .pipe(uglify({
            "mangle": true,//类型：Boolean 默认：true 是否修改变量名
            "compress": true,//类型：Boolean 默认：true 是否完全压缩
            "preserveComments": 'all', //保留所有注释
            "toplevel": true,   // 简化js文件
            "compress": {
                "drop_console": true   // 删除所有console语句
}
        }))
        .pipe(gulp.dest('dist/js'));
});

4）合并多个文件

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

npm install gulp-concat --save-dev

比如我们现在有一个nav.js文件用例控制导航条的，有一个index.js 文件用来控制首页整体内容的，那么我们就可以使用文件拼接的形式来完成，执行代码如下：

var gulp = require("gulp");
var uglify = require("gulp-uglify");
var concat = require("gulp-concat")；

gulp.task("vendorjs",function () {
    gulp.src([
        './static/js/nav.js',
        './static/js/index.js'
        ])
    .pipe(concat('index.min.js'))   // 合并成一个js文件，此时只是命名为min.js，并没有经过压缩处理
    .pipe(uglify())      // 压缩处理
    .pipe(gulp.dest("./dist/js"));
});

5）压缩图片

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

npm install gulp-imagemin --save-dev

　压缩图片时一个比较大的工作量，对于一些已经压缩过的图片，我们可以通过gulp-cache插件来缓存那些压缩过的图片。gulp-cache 插件的安装命令如下：

npm install gulp-cache --save-dev

　压缩图片，两个插件结合使用：

　　使用 gulp-imagemin 压缩图片，再使用 gulp-cache 将压缩过的图片存于缓存中

var imagemin = require("gulp-imagemin");
var cache = require("gulp-cache");

gulp.task("image",function () {
    gulp.src("./static/images/*.*")
    .pipe(cache(imagemin())
    .pipe(gulp.dest("dist/images"));
});

6）检查代码修改，自动刷新浏览器

　以上我们所编好的任务，都是需要我们手动到终端去执行。这样很不方便我们开发，最好的方式就是我修改了代码后，gulp会自动的帮我们执行相应的任务。这个工作我们可以使用gulp内置的 watch 方法帮我们完成。注意：watch是gulp内置的，不需要安装。demo：

 1 //定义依赖和插件
 2 var gulp = require('gulp'),
 3     uglify = require('gulp-uglify'),
 4     concat = require('gulp-concat'),
 5     rename = require('gulp-rename'),
 6     connect = require('gulp-connect');//livereload
 7    
 8 var jsSrc = 'src/js/*.js';
 9 var jsDist = 'dist/js';
10 
11 var htmlSrc = 'src/*.html';
12 var htmlDist = 'dist';
13 
14 //定义名为js的任务
15 gulp.task('js', function () {
17     gulp.src(jsSrc)
18         .pipe(concat('main.js'))
19         .pipe(gulp.dest(jsDist))
20         .pipe(rename({suffix: '.min'}))
21         .pipe(uglify())
22         .pipe(gulp.dest(jsDist))
23         .pipe(connect.reload())
25 });
26 
27 //定义html任务
28 gulp.task('html', function () {
29 
30     gulp.src(htmlSrc)
31         .pipe(gulp.dest(htmlDist))
32         .pipe(connect.reload());
34 });

44 //定义看守任务
45 gulp.task('watch', function () {
47     gulp.watch('src/*.html', ['html']);
49     gulp.watch('src/js/*.js', ['js']);
51 });

　只要在终端执行 gulp watch 命令，即可自动监听所有 js 、html 文件，然后自动执行 js 、html 的任务，完成相应的任务工作，在浏览器上刷新下页面，就能看到对应的变化。

7）更改文件后，自动刷新浏览器，而不需要手动刷新

　上述我们实现了：更改 js 、html 文件，可以自动执行处理对应任务的功能，但是我们还是需要手动的刷新浏览器，才能看到修改后的效果。现在，我们通过使用 browser-sync 插件的方式，实现修改代码后，自动刷新浏览器。browser-sync的安装命令如下：

npm install browser-sync --save-dev

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

var gulp = require("gulp");
var bs = require("browser-sync").create();
var cssnano = require("gulp-cssnano");
var rename = require("gulp-rename");

// 初始化
gulp.task("bs",function () {
    bs.init({
        'server':{
            "baseDir":"./"    // 定义根路径
        }
    });
});

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

// 定义一个监听的任务
gulp.task("watch",function () {
    gulp.watch("./static/css/*.css",['css'])    // 监听css任务
});

// 执行gulp server 开启服务器
gulp.task("server",['bs','watch'])   // 监听 bs 、watch 任务

解析：以上我们创建了一个 bs 的任务，这个任务会开启一个 3000 端口，以后我们在访问 html 页面的时候，就㤇我们通过 http://127.0.0.1:3000 的方式来访问了。接着，我们定了一个server任务，这个任务会去执行 bs 和 watch 任务，只要修改了css 文件，那么就会执行 css 任务，然后就会自动刷新浏览器。

　Browsersync 中文教程文档：http://www.browsersync.cn/docs/gulp/

8、 Sass 语法简单介绍

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

　8.1、Sass 文件的后缀名：

　　Sass 文件有两种后缀名，一个是scss ，一个是 sass 。不同的后缀名，相应的语法也不一样。在这里，我们使用的是 scss 的后缀名。包括后面讲到的 Sass 语法，也都是 scss 的后缀名的语法。

　8.2、使用 gulp 将 Sass 转换成 css：

　　将 Sass 转换成 css 文件的工具很多，这里我们可以通过 gulp 来实现，需要安装 gulp-sass 插件来帮我们完成。安装命令：npm install gulp-sass --save-dev

　　安装 gulp-sass 时如果报错，建议安装 gulp-sass-china（免FQ版）。使用时只需要将gulp-sass 换成 gulp-sass-china 即可。

　　处理 sass 文件(转换为 css )的示例代码：

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))    // 将 scss 文件转换成 css 文件，如果出错则打印错误信息
    .pipe(cssnano())      // 压缩 css 文件
    .pipe(rename({"suffix":".min"}))
    .pipe(gulp.dest(path.css_dist))
})

　8.3、Sass 基本语法：

　　1）注释：支持 /* comment */ 和 // 两种注释方式

　　2）嵌套：Sass 语法允许嵌套，比如 id为 main 的标签下有个 class属性为 header 的标签，那么在嵌套中我们可以这样写：

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

　　这样写起来，我们可以更直观的看出，.header 是在 #main 下的。

　　3）引用父选择器（&）：

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

a{
    font-weight: bold;
    text-decoration: none;
    &:hover{         // 调用父类
        color: #888;
    }
}

　　4）定义变量：

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

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

　　5）运算

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

$mainwidth: 980px;
.box{
    width: $mainwidth/3;
}

　　6）@import 语法：

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

@import "init.scss"

　　7）@extend 语法：

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

.error{   //错误信息样式
    background-color: #fdd;
    border: 1px solid #f00;
}

.serious-error{   // 严重错误信息样式
    @extend .error;      // 使用 .error 的样式
    border-width: 3px;   // 加入自己需要的样式
}

　　8）@mixin 语法：

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

　　　将 large-text 定义成 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/

转载于:https://www.cnblogs.com/Eric15/articles/10647942.html

weixin_30955341

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Django打造大型企业官网-项目实战（一）

Django打造大型企业官网-项目实战一、前端环境配置1、nvm安装　nvm是一个用来管理 node 版本的工具。我们只所以需要使用到 node ，是因为我们需要使用 node 中的 npm ，使用 npm 的目的是为了能够方便的管理一些前端开发的包。 nvm 的安装很简单，步骤如下：　1）下载安装包：https://github.com/coreybutler/nvm-wi...
复制链接

扫一扫