老程序员博客

编程生涯的最后一舞

当前位置：首页 > 技术 > 正文内容

前端开发技术栈学习笔记

访客 技术 2026年7月5日 1

Vue.js的安装方式

  • 下载Vue.js到本地，通过<script>标签引入项目
  • 利用CDN（内容分发网络）直接引入Vue.js库
  • 通过npm安装或使用vue-cli脚手架工具

Vue.js核心特性

  • 组件化开发
  • 模板系统
  • 响应式数据绑定
  • 过渡动画效果
  • 单文件组件(.vue)

ES6常用语法特性

  • 函数默认参数值
  • 模板字符串
  • 多行文本支持
  • 解构赋值
  • 增强对象字面量
  • 箭头函数
  • Promise异步处理
  • let块级作用域声明
  • 类语法
  • 模块化系统

Babel转换器

由于大多数浏览器不完全支持最新版本的JavaScript，为了确保代码的向下兼容性，我们需要将ES6及以上版本的代码转换为ES5。Babel是目前广泛使用的代码转译器，它能够将ES6代码转换为ES5代码，从而在现有浏览器环境中正常运行。这意味着我们可以立即使用ES6特性编写代码而无需担心环境兼容性问题。

Babel配置

  • 配置文件为.babelrc，用于设置转码规则和插件
  • 安装相应的转码器包：
# 安装ES6转码规则
npm install --save-dev babel-preset-es2015
# 安装React转码规则
npm install --save-dev babel-preset-react

转码命令

# 转码aaa.js并输出到xxx.js文件
babel aaa.js --out-file xxx.js
# 直接在控制台显示转码结果
babel aaa.js

Webpack模块打包工具

随着Web应用功能的日益复杂，JavaScript代码量也随之增长。各种框架的使用带来了更多的依赖包，这些复杂内容要让浏览器正确识别，需要繁琐的操作。Webpack通过简化这些繁琐操作来解决这一问题。

在处理应用程序时，Webpack会构建一个依赖关系图，包含应用程序所需的所有模块，然后将这些模块打包成一个或多个bundle，通过终端或修改webpack.config.js文件来配置各项功能。

Webpack 3.6.0 使用方法

  1. 在项目目录下安装webpack 3.6.0版本： 
    npm install --save-dev webpack@3.6.0
  2. 创建app文件夹存放JavaScript代码，创建public文件夹存放index.html
  3. 在app文件夹中创建多个JavaScript文件
  4. 在index.html中引入Webpack生成的bundle.js文件
  5. 创建并编辑webpack.config.js配置文件
  6. 运行webpack命令进行打包，生成bundle.js文件

npm中--save与--save-dev的区别

  • --save：将包信息保存到package.json的dependencies中，表示项目运行时需要依赖的包
  • --save-dev：将包信息保存到package.json的devDependencies中，表示开发阶段需要依赖的包

Webpack 4 使用方法

  1. 初始化npm项目： 
    npm init -y
  2. 安装Webpack： 
    npm install webpack --save-dev
  3. 安装webpack-cli（Webpack4将webpack本身和CLI分开）： 
    npm install webpack-cli --save-dev
  4. 在package.json中添加构建脚本： 
    "scripts": {
  "build": "webpack"
}
  5. 创建src文件夹和index.js文件，添加测试代码： 
    console.log("Webpack 4 测试");
  6. 运行npm run build命令，成功后会在当前目录下生成dist文件夹和main.js文件

Webpack 4 构建模式

Webpack 4提供了两种不同的构建模式：

  • 开发模式：加速开发、减少构建时间、不进行代码压缩，命令为：
    npm run dev
  • 生产模式：用于生产环境，会进行代码优化和压缩，命令为：
    npm run production

使用CLI构建Vue应用

  1. 通过CLI工具初始化一个以Webpack为模板的项目： 
    vue create movie_view
  2. 安装项目依赖： 
    cd movie_view
npm install
  3. 运行项目： 
    npm run dev

开发环境与生产环境

package.json文件

package.json文件包含了使用npm install命令安装的所有包和版本信息。npm run命令是对详细命令的简写，例如npm run dev实际是对node build/build.js的简写。

开发环境

运行npm run dev命令会启动本地测试服务器，默认打开http://localhost:8080/#/方便开发者调试。如需自动打开浏览器，可在/config/index.js中设置autoOpenBrowser字段为true。

生产环境

运行npm run build命令会以生产模式构建项目，在项目文件夹中生成一个dist文件夹，包含index.html和静态资源。可以使用PHP自带的测试服务器进行测试： 

php -S 127.0.0.1:9999
然后在浏览器中访问http://127.0.0.1:9999/#/。

MongoDB数据库

MongoDB是一个介于关系型数据库和非关系型数据库之间的产品，是非关系型数据库中功能最丰富、最接近关系型数据库的产品。它支持类似JSON的BSON格式数据结构，可以存储复杂的数据类型。

MongoDB的最大特点是查询语言功能强大，语法类似面向对象查询语言，几乎可以实现关系型数据库单表查询的大部分功能，并支持数据索引。

MongoDB服务端可在Linux、Windows或Mac OSX平台运行，支持32位和64位应用，默认端口为27017。

Express框架

Express是一个简洁而灵活的Node.js Web应用框架，提供一系列强大特性帮助开发人员创建各种Web应用。Express不对Node.js已有的特性进行二次抽象，只是在其上扩展了Web应用所需的功能，提供了丰富的HTTP工具和来自Connect框架的中间件，让创建强健、友好的API变得快速而简单。

NoSQL数据库

NoSQL泛指非关系型数据库，随着Web 2.0的兴起，传统关系型数据库在应对大规模和高并发的Web应用时显得力不从心。NoSQL数据库的产生是为了解决大规模数据集合和多数据种类带来的挑战，特别适合大数据应用。

NoSQL数据库适用场景：数据模型简单；对数据库性能要求高；不需要高度数据一致性；给定key容易映射复杂值的环境。

常见的NoSQL数据库类型：

  • 键值存储数据库：如Redis、Tokyo Cabinet
  • 列存储数据库：如Cassandra、HBase
  • 文档型数据库：如MongoDB、CouchDB
  • 图形数据库：如Neo4J

Node.js运行环境

Node.js是一个基于Chrome V8引擎的JavaScript运行环境，用于方便地搭建响应速度快、易于扩展的网络应用。它使用事件驱动、非阻塞式的I/O模型，使开发既轻量又高效，非常适合在分布式设备上运行数据密集型的实时应用。

优点

  • 采用事件驱动、异步编程，专为网络服务设计
  • 非阻塞I/O处理带来高性能与出众的负载能力
  • 轻量高效，是数据密集型分布式部署环境下实时应用的完美解决方案

缺点

  • 可靠性相对较低
  • 单进程、单线程，只支持单核CPU，无法充分利用多核服务器
  • 进程崩溃会导致整个Web服务崩溃

Express Hello World示例

  1. 初始化npm项目： 
    npm init -y
  2. 安装Express框架： 
    npm install express --save
  3. 编写入口文件（index.js）： 
    const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(3000, () => {
  console.log('服务器运行在 http://localhost:3000');
});
  4. 运行程序： 
    node index.js
  5. 在浏览器中访问http://localhost:3000

简单电影网站后台开发

  1. 安装Express应用生成器： 
    npm install express-generator -g
  2. 创建项目： 
    express movie_backend
  3. 安装依赖并启动应用： 
    cd movie_backend
npm install
npm start
  4. 在浏览器中访问http://localhost:3000

使用Mongoose连接MongoDB

  1. 安装mongoose中间件： 
    npm install mongoose --save
  2. 创建数据库连接模块： 
    const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost:27017/movie_db', {
  useNewUrlParser: true,
  useUnifiedTopology: true
});
  3. 创建数据模型和路由
  4. 测试API接口

使用Supervisor监控代码修改

  1. 全局安装Supervisor： 
    npm install supervisor -g
  2. 使用Supervisor启动项目： 
    supervisor bin/www

用户操作模块开发

项目结构

  • models文件夹：存放数据模型
  • routes文件夹：存放路由文件
  • common文件夹：存放公共模块

用户认证

  • 注册功能：验证用户信息，创建用户记录
  • 登录功能：验证用户名密码，生成Token
  • 完整性验证：使用crypto中间件对字段组合加密

API接口设计

  • POST /api/users/register：用户注册
  • POST /api/users/login：用户登录
  • GET /api/users/profile：获取用户信息
  • PUT /api/users/profile：更新用户信息
标签: Vue.jsES6Babel
返回列表

上一篇：Python进阶：深入理解闭包与装饰器机制

下一篇：私有云大模型安全外联：基于反向隧道的内网穿透架构解析

相关文章

Linux crontab 详解

1) crontab 是什么cron 是 Linux 的定时任务守护进程；crontab 是用来编辑/查看“按时间周期执行命令”的表（cron table）。常见两类：用户 crontab：每个用户一份（crontab -e 编辑）系统级 crontab / cron.d：可指定执行用户（/etc/crontab、/etc/cron.d/*）2) crontab 时间...

富文本里可以允许的 HTML 属性

一、所有标签默认允许的安全属性（极少）class        （可选）id           （通常建议禁用）title️ 注意：id 容易被滥用做锚点注入，很多系统直接禁用class 允许的话最好只允许固定前缀（如 editor-*）二、a 标签允许属性<a href="" t...

Mac 安装 Node.js 指南

方法一：通过官网安装包（最简单，适合初学者）如果你只是想快速安装并开始使用，这是最直接的方法。访问 Node.js 官网。页面会显示两个版本：LTS (Recommended For Most Users)：长期支持版，最稳定。建议选这个。Current：最新特性版，包含最新功能但可能不够稳定。下载 .pkg 安装包并运行。按照安装向导点击“下一步”即可完成。方法二：使用 Homebrew 安装（...

Dom\HTML_NO_DEFAULT_NS 的副作用：自动加闭合标签

在使用Dom\HTMLDocument时，Dom\HTML_NO_DEFAULT_NS 将禁止在解析过程中设置元素的命名空间, 此设置是为了与DOMDocument向后兼容而存在的。当使用它时，已知的一个副作用就是：自动加闭合标签例如 </img> 为什么会这样？当你使用：Dom\HTML_NO_DEFAULT_NS文档会变成 无命名空间模式，此时内部更接近 XML...

Laravel 事件和监听器创建

在 Laravel 中，使用 Artisan 命令创建 Events（事件） 和 Listeners（监听器） 是非常高效的。你可以通过以下几种方式来实现：1. 手动创建单个 Event如果你只想创建一个事件类，可以使用 make:event 命令：Bashphp artisan make:event UserRegistered执行后，文件将生成在 app/Even...

自定义域名解析神器 dnsmasq

什么是 dnsmasq？dnsmasq 是一个轻量级、功能强大的网络服务工具，专为小型和中等规模网络设计。它是一个综合的网络基础设施解决方案[1]。dnsmasq 能做什么？功能说明应用场景DNS 转发与缓存将 DNS 查询转发到上游服务器（ISP、Google DNS 等），并在本地缓存结果加快 DNS 查询速度，减少外部 DNS 流量本地 DNS解析本地网络设备的主机名，无需编辑&n...

发表评论

访客

◎欢迎参与讨论，请在这里发表您的看法和观点。

Copyright © agingcoder.cn

Powered By Z-BlogPHP. Theme by TOYEAN.