【项目创建流程】前端业务总结

最新推荐文章于 2023-08-21 17:32:17 发布
最新推荐文章于 2023-08-21 17:32:17 发布
阅读量376 收藏
点赞数
文章标签： vue java js 大数据 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z591593455/article/details/107931265
版权

【项目创建流程】前端业务总结

前端基础

vscode

插件安装

为方便后续开发，建议安装如下插件

image-20200723155141680

image-20200723155224355

image-20200723155212540

Node.js

JavaScript引擎

浏览器的内核包括两部分核心：

  • DOM渲染引擎

  • JavaScript解析引擎

    • Chrome浏览器内置V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。
什么是Node.js

脱离浏览器环境也可以运行JavaScript，只要有JavaScript引擎就可以。

Node.js是一个基于Chrome V8引擎的JavaScript运行环境：即Node.js内置了Chrome的V8 引擎，可以在Node.js环境中直接运行JavaScript程序。

  • 在Node.js中写JavaScript和在Chrome浏览器中写JavaScript基本没有什么不一样。哪里不一样呢？

    • Node.js没有浏览器API，即document，window的等。
    • 加了许多Node.js 专属API，例如文件系统，进程，http功能。
Node.js有什么用

  • 如果你想开发类似JavaWeb的简单的后端程序，那么学习Node.js是一个非常好的选择。

  • 如果你想部署一些高性能的服务，那么学习Node.js也是一个非常好的选择。

    • 通常他会被用来作一个BFF层，即 Backend For Frontend(服务于前端的后端)，通俗的说是一个专门用于为前端业务提供数据的后端程序
BFF
BFF 解决什么问题

一个前端页面向 Service A、Service B 以及 Service C发送请求，不同的微服务返回的值用于渲染页面中不同的组件。此时，每次访问该页面都需要发送 3 个请求。我们需要一个服务来聚合Service A、Service B 以及 Service C响应的数据，这个服务层叫做BFF。

img

手机、平板端、PC机等用户终端都需要向每个Service，例如Service A发送请求。对于同一个功能，不同的终端需要的数据格式和内容会有不同。此时 Service A 的一个接口，不能同时满足三个客户端的不同需求。我们可以在Service A中开发三个接口，也可以增加一个数据裁剪服务，将数据按照不同终端的不同要求进行裁剪，这个服务层叫做BFF。

img

BFF层的作用是让前端有能力自由组装后台数据，减少大量的业务沟通成本，加快业务的迭代速度。无论是数据聚合还是数据剪裁，这类程序的特点是不需要太强大的服务器运算能力，但是对程序的灵活性有较高的要求，这两个特点都正好和Node.js的优势相吻合。

什么是BFF

用户体验适配器

安装

双击安装 node-v10.14.2-x64.msi

查看版本 node -v

Vue.js

在为 AngularJS 工作之后，Vue 的作者尤雨溪开发出了这一框架。他声称自己的思路是提取 Angular 中为自己所喜欢的部分，构建出一款相当轻量的框架。Vue 最早发布于 2014 年 2 月。作者在 Hacker News、Echo JS 与 Reddit 的 javascript 版块发布了最早的版本。一天之内，Vue 就登上了这三个网站的首页。Vue 是 Github 上最受欢迎的开源项目之一。同时，在 JavaScript 框架/函数库中，Vue 所获得的星标数已超过 React，并高于 Backbone.js、Angular 2、jQuery 等项目。

Vue.js 是一款流行的 JavaScript 前端框架，目的是简化 Web 开发。Vue 所关注的核心是 MVC 模式中的视图层，同时，它也能方便地获取数据更新，实现视图与模型的交互。

axios

axios是独立于vue的一个项目，可以用于浏览器和node.js中发送ajax请求

element-ui

1、引入脚本库

在axios_pro文件夹中引入：element-ui\lib

img
2、引入css

在axios.html 的head中引入css

<!--import CSS -->
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
3、引入js
<script src="element-ui/lib/index.js"></script>
4、渲染讲师列表

注意：项目中的版本是2.4，参考对应版本的文档

<div id="app">
    <el-button>添加</el-button>
    <i class="el-icon-delete"></i>
    <el-button type="primary" icon="el-icon-search">搜索</el-button>
    <el-table
              :data="teacherList"
              stripe
              border
              style="width: 100%">

        <el-table-column
              type="selection"
              width="55"></el-table-column>

        <el-table-column
              prop="name"
              label="姓名"></el-table-column>

        <el-table-column
              prop="gmtCreate"
              label="入驻日期"></el-table-column>

        <el-table-column
              label="级别">
            <template slot-scope="scope">
                {{ scope.row.level === 1?'高级讲师':'首席讲师' }}
            </template>
        </el-table-column>
    </el-table>
</div>

NPM包管理器

什么是NPM

NPM全称Node Package Manager，是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的；也是Node.js的包管理工具，相当于前端的Maven 。

#在命令提示符输入 npm -v 可查看当前npm版本
npm -v
1、项目初始化
#建立一个空文件夹，在命令提示符进入该文件夹  执行命令初始化
npm init
#按照提示输入相关信息，如果是用默认值则直接回车即可。
#name: 项目名称
#version: 项目版本号
#description: 项目描述
#keywords: {Array}关键词，便于用户搜索到我们的项目
#最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml
#我们之后也可以根据需要进行修改。
#如果想直接生成 package.json 文件，那么可以使用命令
npm init -y
2、修改npm镜像

NPM官方的管理的包都是从 http://npmjs.com下载的，但是这个网站在国内速度很慢。

这里推荐使用淘宝 NPM 镜像 http://npm.taobao.org/ ，淘宝 NPM 镜像是一个完整 npmjs.com 镜像，同步频率目前为 10分钟一次，以保证尽量与官方服务同步。

设置镜像地址：

#经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载
npm config set registry https://registry.npm.taobao.org 

#查看npm配置信息
npm config list
3、npm install命令的使用

基本命令

#使用 npm install 安装依赖包的最新版，
#模块安装的位置：项目目录\node_modules
#同时package.json 文件中，依赖包会被添加到dependencies节点下，类似maven中的 <dependencies>
#默认参数：--save  简写  -S  将当前依赖保存在dependencies节点下
npm install jquery

下载特定版本的依赖

#如果安装时想指定特定的版本
npm installjquery@2.1.x

下载开发依赖

#devDependencies节点：开发时的依赖包，项目打包到生产环境的时候不包含的依赖
#使用 -D参数将依赖添加到devDependencies节点
npm install --save-dev eslint
#或简写
npm i -D eslint

下载全局依赖

#全局安装
#Node.js全局安装的npm包和工具的位置：用户目录\AppData\Roaming\npm\node_modules
#一些命令行工具常使用全局安装的方式
npm install --global webpack
#或简写
npm install -g webpack

根据依赖下载安装包

#npm管理的项目在备份和传输的时候一般不携带node_modules文件夹
#安装会自动在项目目录下添加 package-lock.json文件，这个文件帮助锁定安装包的版本
npm install #根据package.json中的配置下载依赖，初始化项目
4、其它命令
#更新包(更新到最新版本)
npm update 包名
#全局更新
npm update -g 包名

#卸载包
npm uninstall 包名
#全局卸载
npm uninstall -g 包名
积木98
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
node-v10.14.2-win-x64 绿色傻瓜版
03-28
前端开发，比如 vue 等，需要用到 npm，这时候就需要安装 node。 这是一个绿色傻瓜版，适合新入门学习的人。 将压缩包解压后的放置在该目录下： D:\DevTools\Nodejs\ 然后双击运行： Nodejs环境设置.bat 以下可以通过 cmd 进行个性化设置（选做，建议设置一下）： npm config ls npm config set prefix="D:\\\\DevTools\\\\Nodejs\\\\node_global_modules" npm config set cache="D:\\\\DevTools\\\\Nodejs\\\\node_cache" npm config ls npm config set chromedriver_cdnurl https://npm.taobao.org/mirrors/chromedriver npm install -g nrm nrm ls -------------------------------------------------------------------------------------- C:\Users\Admin>nrm ls npm ---- https://registry.npmjs.org/ cnpm --- http://r.cnpmjs.org/ * taobao - https://registry.npm.taobao.org/ nj ----- https://registry.nodejitsu.com/ rednpm - http://registry.mirror.cqupt.edu.cn/ npmMirror https://skimdb.npmjs.com/registry/ edunpm - http://registry.enpmjs.org/ -------------------------------------------------------------------------------------- nrm use taobao nrm ls 安装 vue 测试 npm install -g vue-cli // 通过 nrm 管理的源，可以代替以下 cnpm 的方式 -------------------------------------------------------------------------------------- -- npm install -g cnpm --registry=https://registry.npm.taobao.org -- npm uninstall -g cnpm --------------------------------------------------------------------------------------
NodeJS入门（一）---nodejs详细安装步骤
tengtianshan的专栏
04-01 2万+
npm使用手册https://www.npmjs.cn/getting-started/installing-npm-packages-locally/ node.js使用https://www.runoob.com/nodejs/nodejs-npm.html 初学NodeJS，就是要弄清楚什么是nodejs，能做什么，怎么用。。 什么是nodejs? 脚本语言需要一个解析器才能运行，JavaScript是脚本语言，在不同的位置有不一样的解析器，如写入html的js语言，浏览器是它的...
node.js 详解
m0_55557411的博客
04-18 2万+
node.js 详解
Node.js---菜鸟教程
yitong的博客
06-18 1万+
文章目录创建第一个应用创建 Node.js 应用NPM 使用介绍使用 npm 命令安装模块本地安装使用 package.json模块的操作回调函数阻塞代码实例非阻塞代码事件循环事件驱动程序EventEmitterEventEmitter 类方法实例error 事件继承 EventEmitterBuffer（缓冲区）Buffer 与字符编码创建 Buffer 类写入缓冲区从缓冲区读取数据将 Buffer 转换为 JSON 对象缓冲区合并缓冲区比较拷贝缓冲区缓冲区裁剪缓冲区长度Stream（流）从流中读取数据写
Node.js简介
mantou_riji的博客
05-27 3万+
文章目录Node.js简介基本含义和产生原因nodejs特点nodejs的用途node.js的基本使用 Node.js简介 基本含义和产生原因 Node.js是一个能够在服务器端运行JavaScript的开放源代码、跨平合JavaScript运行环境。 node.js把js的战场从浏览器转移到服务器，可以进行更多的操作。 用户请求和响应的过程： Node.js的产生原因要追溯到服务器的阻塞问题： 传统服务器每次产生一个请求，就对应着一个线程。 那么就有一个问题：请求的速度由用户决定，响应的速度也可以通过提
LogicFlow:流程可视化的前端框架
03-08
LogicFlow是一种流程可视化的前端框架，提供了一系列流程图交互，编辑所必需的功能和简单灵活的例程自定义，插件等扩展机制，方便我们快速在业务系统内部满足类流程图的需求。 特性 :bullseye:专业的 专注于业务...
GreaterWMS 是基于 Python 的企业实际业务管理系统 后端基于 Python 前端基于 Vue.js
10-28
GreaterWMS 是 AGPLv3 许可的基于 Python 的开源框架，可以快速创建多种类型的企业实际业务管理系统。 特性 后端基于 Python 前端基于 Vue.js 从货物流转出发，赋予货物的可追溯性 涵盖整个供应链流通环节 加快...
SpringBoot项目网上图书商城.zip
04-15
利用SpringBoot的快速开发特性和微服务架构，该系统能够高效地处理商品展示、库存管理、订单处理以及支付流程等电商业务，同时提供用户友好的Web界面。 系统可能采用前后端分离的设计模式，前端使用现代JavaScript...
SpringBoot项目网上书城.zip
最新发布
04-15
网上书城是一个基于Spring ...总体而言，基于Spring Boot的网上书城提供了一个全面、高效、互动的在线购书环境，极大地丰富了读者的阅读选择，并促进了出版业务的现代化和信息化，是现代电子商务技术中的重要组成部分。
ssm项目音乐播放器小程序.zip
04-10
SSM项目音乐播放器小程序.zip是一个使用Java语言开发的Web应用，它采用了SSM（Spring Spring MVC MyBatis）框架，并结合了微信小程序前端技术。该项目利用MySQL作为后端数据库，旨在为用户提供一个在线音乐播放、...
最新Node.js安装详细教程及node.js配置
Python基础详解教程，让编程变得简单！
08-21 4万+
文中主要讲述编译器、运行环境、开发环境的区别，Node.js与JavaScript、TypeScript，Node.js与浏览器，Windows、Linux、Mac的Node.js版本类型，VS Code安装程序的安装及安装选项设置，修改npm的包的全局的安装路径和缓存路径、配置镜像源(镜像站)、配置包管理工具，node.js的运行。
详细介绍 Node.js
hwx865的专栏
10-14 6730
解释器、标准库、本地模块等各种组件/工具共同支撑了 JavaScript 代码的运行，它们统称为 JavaScript 运行时。在 Node.js 之前，JavaScript 运行时被绑定在浏览器中，作为浏览器的各种模块出现。这意味着，要想运行 JavaScript 代码就必须启动浏览器，JavaScript 逃不出浏览器的手掌心，它的功能受到很大的限制，只能作为网页脚本使用。
Node.js入门指南
会思想的苇草i的博客
01-26 2527
Node.js是建立在Chrome V8引擎之上的JavaScript运行时环境，可用于快速构建可伸缩的网络应用。它采用事件驱动、非阻塞I/O模型，适用于实时数据处理。Node.js还拥有丰富的包管理工具，如npm，使得前端开发者能够方便地共享和重复使用代码。掌握Node.js能够丰富前端开发技能，提升项目的性能和效率。
【Nodejs】Node.js简介
DomCode
07-24 2609
Node 的重要性已经不言而喻，很多互联网公司都已经有大量的高性能系统运行在 Node 之上。Node 凭借其单线程、异步等举措实现了极高的性能基准。此外，目前最为流行的 Web 开发模式是前后端分离的形式，即前端开发者与后端开发者在自己喜欢的 IDE 上独立进行开发，然后通过 HTTP 或是 RPC 等方式实现数据与流程的交互。
什么是Node.js
m0_56649557的博客
08-11 7418
JavaScript是一种Web前端语言，Node.js让JavaScript成为服务器端脚本语言。
2023最新版Node.js下载安装及环境配置教程（非常详细）从零基础入门到精通，看完这一篇就够了
热门推荐
Python_0011的博客
08-04 5万+
选择对应你系统的Node.js版本，这里我选择的是Windows系统、64位Tips：如果想下载指定版本，点击【以往的版本】，即可选择自己想要的版本下载（1）下载完成后，双击安装包，开始安装Node.js(2)直接点【Next】按钮，此处可根据个人需求修改安装路径，修改完毕后继续点击【Next】按钮（3）可根据自身需求进行，此处我选择默认安装，继续点击【Next】按钮（4）不选中，直接点击【Next】按钮（5）点击【Install】按钮进行安装（6）安装完毕，点击【Finish】按钮。
Node.js详解（一）：基础知识
Java+GO+JS全栈工程师-鹤冲天的博客：编程辅导~商务合作~技术交流
05-30 2555
Node.js是一个javascript运行环境。它让javascript可以开发后端程序，实现几乎其他后端语言实现的所有功能，可以与PHP、Java、Python、.NET、Ruby等后端语言平起平坐。Node.js是基于V8引擎，V8是Google发布的开源JavaScript引擎，本身就是用于Chrome浏览器的js解释部分，但是Node.js 之父 Ryan Dahl把V8引擎搬到了服务器上，用于做服务器的软件。​
工作流程图前端js插件
07-23
使用这种插件，用户可以轻松地创建流程图以可视化地展示不同步骤之间的关系和流程。它还提供了交互功能，例如拖拽节点、调整连接线等，使得用户可以实时地编辑和修改工作流程图。 这种插件还支持事件处理和回调函数...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值