企业官网建设流程全解析

受欢迎的购物网站建设,免费网站服务,小程序跳转网页方法,wordpress主题样式慢慢买项目说明 通过网盘分享的文件#xff1a;1128慢慢买.rar 链接: https://pan.baidu.com/s/1tnkBfJxnCikJCSFASz_Stg?pwdb8e8 提取码: b8e8 项目数据库 项目数据库使用的是mongodb 数据库 数据库打开方式 window 在系统根目录下输入 yarn mongodWin Max 在系统根目录下…慢慢买项目说明通过网盘分享的文件1128慢慢买.rar链接: https://pan.baidu.com/s/1tnkBfJxnCikJCSFASz_Stg?pwdb8e8 提取码: b8e8项目数据库项目数据库使用的是mongodb 数据库数据库打开方式window 在系统根目录下输入 yarn mongodWinMax 在系统根目录下输入 yarn mongodMacwindow 打不开 提示少东西 可以安装vc2015win7 win8 部分电脑会提示 api-ms-win-core 可以连接同桌项目的后台项目后台使用的是nodejs在文件夹的根目录下找到http文件夹打开后在根目录输入启动命令// npm npm i npm start // yarn yarn yarn start接口文档启动后台之后 在浏览器输入打开接口文档 接口文档是按照页面进行划分的后台配置说明端口切换 http文件夹内bin文件里面www文件修改端口// --- http/bin/www // 将3000 替换成你想要的接口 var port normalizePort(process.env.PORT || 3000);前端页面直接在浏览器输入http://127.0.0.1:3000yarn快速、可靠、安全的依赖管理工具使用来替代npm最理想的工具使用 npm i yarn -g 安装yarn安装完成之后在命令窗口输入yarn -v 返回版本号证明成功yarn命令初始化一个新项目yarn init添加依赖包yarn add 包名升级依赖包yarn upgrade 包名移除依赖包yarn remove 包名安装项目的全部依赖yarn全局安装yarn global add 包名SwaggerSwagger 是一个规范和完整的框架用于生成、描述、调用和可视化 RESTful 风格的 Web 服务。总体目标是使客户端和文件系统作为服务器以同样的速度来更新gulpyarn global add gulp自动化构建工具gulp的使用流程一般是首先通过gulp.src()方法获取到想要处理的文件流然后把文件流通过pipe方法导入到gulp的插件中最后把经过插件处理后的流在通过pipe方法导入到gulp.dest()中gulp.desk()方法则把流中的内容写入到文件中gulp.src 入口文件路径gulp.dest ; 用来写入文件的gulp.watch 用来监视文件的变化gulp 和 webpack 的差异gulp 注重前端的开发流程 主要功能就是 压缩 预处理 文件 模块化开发是附带的功能简单来说就是一个基于node的功能插件集合体webpack 注重模块化开发 压缩和预处理文件是附带的一个功能他是前端模块化开发的一整套方案提供者。项目展示开启数据库以及启动项目查看项目中用到了那些东西使用gulp打包压缩到dist文件更新代码自动刷新yarn和npm的说明npm下载包遇到的问题下载速度慢经常下载失败npm下载是串行的yarn官网https://yarn.bootcss.com/Yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具 Yarn 是为了弥补 npm 的一些缺陷而出现的。Yarn 缓存了每个下载过的包所以再次使用时无需重复下载。同时利用并行下载以最大化资源利用率因此安装速度更快。yarn的用法和npm的用法差不多yarn命令初始化一个新项目yarn init -y添加依赖包yarn add 包名升级依赖包yarn upgrade 包名移除依赖包yarn remove 包名安装项目的全部依赖yarn全局安装yarn global add 包名 sudo yarn global add 包名项目启动开发项目我们这个项目是前端口分离的你只用管前端的代码即可。本次开发你得保证你电脑有后端的环境的。后端的环境代码已经妥当了数据库环境接口环境数据库启动项目数据库使用的是mongodb 数据库window系统yarn mongodWinmac系统yarn mongodMac项目接口启动# 安装依赖 yarn # 启动项目 yarn start项目演示访问地址http://127.0.0.1:3000接口访问地址http://localhost:3000/swagger项目开发项目基本结构搭建首页编写接口文档启动后台之后 在浏览器输入 http://localhost:3000/swagger 打开接口文档 接口文档是按照页面进行划分的前后端在开发过程中通过通过接口文档来进行交互的。在没有文档自动生成工具之前都是手写文档。缺点主要有麻烦不容易调试不容易修改swagger是一个在线的根据代码自动生成文档的工具。在前后端交互的时候非常的方便也很容易进行调试。swagger官网使用gulp自动化构建官网https://gulpjs.com/中文文档https://www.gulpjs.com.cn/用自动化构建工具增强你的工作流程在开发过程中有很多重复性的工作需要执行。less转成css对css代码压缩混淆对js代码压缩混淆写完代码后需要刷新浏览器无法共用模版gulp是前端开发过程中对代码进行构建的工具是自动化项目的构建利器她不仅能对网站资源进行优化而且在开发过程中很多重复的任务能够使用正确的工具自动完成使用她我们不仅可以很愉快的编写代码而且大大提高我们的工作效率。gulp ----- grunt ------webpack环境安装初始化项目npm init -y yarn init全局安装gulpnpm install gulp -g yarn global add gulp作为项目的依赖进行安装yarn add gulp --save-dev 或者 yarn add gulp --save-dev --save-dev 等同于 -D 如果这个依赖包只是在开发阶段需要用到需要加-D新建gulpfile.js文件// 参数1 任务名 // 参数2 任务需要执行的内容 gulp.task(aa, function() { console.log(哈哈) })执行任务gulp 任务名; ​ gulp; 如果不接任务名那么会执行默认的 default任务glup任务-文件拷贝-lib文件拷贝使用到了gulp提供的几个核心方法 gulp.task: 定义任务gulp.src() 读取文件gulp.pipe() 把文件交给管道处理gulp.dest() 输出文件到某个目录gulp.task定义任务gulp.src(./src/lib/**/*.*)把文件读取成一个文件流gulp.pipe()把文件流交给下一个流gulp.dest(./dist/lib)输出文件// 简单拷贝, 处理 lib文件夹 lib文件不需要做任何的处理只需要拷贝到dist目录 // 任务需要加一个return 表示任务完成 gulp.task(lib, function() { // 读取文件 // gulp.src() 读取文件 // gulp.pipe() 管道 // gulp.dest() 放到哪儿 return gulp.src(./src/lib/**/*.*).pipe(gulp.dest(./dist/lib)) })gulp任务-js代码压缩与混淆gulp-uglify-es: 给js代码进行压缩处理ES6的代码gulp-rename: 重命名安装依赖yarn add gulp-uglify-es --save-dev配置任务const uglify require(gulp-uglify-es).default ​ gulp.task(js, function() { return gulp .src(./js/*.js) .pipe(uglify()) .pipe(gulp.dest(./dist/js)) })安装重命名依赖yarn add gulp-rename -D重命名配置task(js, function() { return src(./js/*.js) .pipe(dest(./dist/js)) .pipe(uglify()) .pipe( rename({ // 配置重命名的后缀名 suffix: .min }) ) .pipe(dest(./dist/js)) })gulp任务-less处理gulp-less: 把less变成cssgulp-rename: 重命名gulp-minify-css: 压缩css代码安装依赖包yarn add gulp-less -Dless任务// less任务 task(less, function() { return src(./less/*.less) .pipe(less()) .pipe( rename({ extname: .css }) ) .pipe(dest(./dist/css)) })安装css压缩处理包yarn add gulp-minify-css -D压缩css// less任务 task(less, function() { return src(./less/*.less) .pipe(less()) .pipe( rename({ extname: .css }) ) .pipe(dest(./dist/css)) .pipe(minifycss()) .pipe( rename({ suffix: .min }) ) .pipe(dest(./dist/css)) })gulp任务-图片压缩gulp-imagemin: 可以对图片进行压缩gulp-cache: 图片压缩比较耗时的一个任务 如果每次都对所有的图片进行重新压缩比较浪费时间 会缓存下来所有已经压缩过的图片安装依赖yarn add gulp-imagemin -D压缩图片的任务task(image, function() { return src(./img/*) .pipe(imagemin()) .pipe(dest(./dist/img)) })安装gulp-cachaeyarn add gulp-cache -D压缩图片是比较耗时的我们可以使用gulp-cache来缓存已经压缩过的图片task(image, function() { return src(./img/*) .pipe(cache(imagemin())) .pipe(dest(./dist/img)) })参考资料https://www.cnblogs.com/yuzhongwusan/p/5417090.htmlgulp任务-处理htmlgulp-minify-html: 压缩html文件gulp-html-extend: 语句当前html去导入另一个html压缩htmlyarn add gulp-minify-html -D使用// 处理html task(html, function() { return src(./src/*.html) .pipe(minifyHtml()) .pipe(dest(./dist)) })导入htmlyarn add gulp-html-extend -D// 处理html task(html, function() { return src(./src/*.html) .pipe(extender()) .pipe(minifyHtml()) .pipe(dest(./dist)) })在页面中如何导入html!-- include ./template/header.html --gulp任务-清空任务安装yarn add del -D配置任务task(clean, function() { return del(./dist) })gulp-任务整合seriestask(build, gulp.series(clean, html, less, js, image, lib))gulp任务-监听文件的变化// 实现一个修改代码会自动执行任务 // 监听的任务做一件事件当我们修改了对应的文件需要执行对应的任务 // gulp.watch() 监视文件 task(watch, function() { // 参数1监视的文件 // 参数2 对应的任务, 多个任务 watch(./src/**/*.html, series(html)) watch(./src/less/*.less, series(less)) watch(./src/js/*.js, series(js)) watch(./src/lib/**/*.*, series(lib)) watch(./src/img/*.*, series(img)) })gulp任务-自动刷新安装yarn add gulp-connect -D配置​