2024年Web前端最新Vue开发一个电商全栈项目(1)，前端开发在哪里学

TCP协议

• TCP 和 UDP 的区别？
• TCP 三次握手的过程？
• 为什么是三次而不是两次、四次？
• 三次握手过程中可以携带数据么？
• 说说 TCP 四次挥手的过程
• 为什么是四次挥手而不是三次？
• 半连接队列和 SYN Flood 攻击的关系
• 如何应对 SYN Flood 攻击？
• 介绍一下 TCP 报文头部的字段
• TCP 快速打开的原理(TFO)
• 说说TCP报文中时间戳的作用？
• TCP 的超时重传时间是如何计算的？
• TCP 的流量控制
• TCP 的拥塞控制
• 说说 Nagle 算法和延迟确认？
• 如何理解 TCP 的 keep-alive？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

浏览器篇

• 浏览器缓存?
• 说一说浏览器的本地存储？各自优劣如何？
• 说一说从输入URL到页面呈现发生了什么？
• 谈谈你对重绘和回流的理解
• XSS攻击
• CSRF攻击
• HTTPS为什么让数据传输更安全？
• 实现事件的防抖和节流？
• 实现图片懒加载？

• views 封装视图组件

• App.vue 根组件

• main.js 入口文件

• package.json

第三步：在 main.js 中引入组件库

import Vant from ‘vant’

import ‘vant/lib/index.css’

Vue.use(Vant)

第四步：启动项目（端口 8080）：

npm run serve

2.3、创建服务端

cmd返回上一级：cd ..

第一步：创建项目并安装依赖：

先检查是否安装Express，查看版本号（安装了显示版本号，提示没有内部外部命令就是没有安装，需要进行下一步安装）：express --version

全局安装Express项目生成器（只需要安装一次，类似于脚手架工具）：cnpm i express express-generator -g

使用 express 命令创建项目，项目名为 server：express server

进入项目文件：cd server

初始化依赖（因为当前建完项目没有任何依赖）：cnpm i

链接数据库模块：cnpm i mongoose --save

解决跨域：cnpm i cors --save

全局安装 nodemon 热启动：cnpm i nodemon -g

指令汇总（除创建项目外（需手动选择项），可全部复制，交给cmd 自动一步一步安装，最后一项需回车，或者复制上回车）:

express --version

cnpm i express express-generator -g

express server

cd server

cnpm i

cnpm i mongoose --save

cnpm i cors --save

cnpm i nodemon -g

第二步：精简项目

• public 静态资源目录

• db 用于管理数据连接的目录

• models 用于管理数据模块对象的目录

• crud 用于管理增删改查封装的目录

• routes 用于管理路由的目录

• views 视图模板引擎管理目录（可删除）

• app.js 入口文件

• package.json

第三步：配置跨域请求

在 app.js 入口文件中引入 cors 模块

var express = require(‘express’);

var cors = require(‘cors’); // 引入 cors

//var app = express();

app.use(cors())

// 将 cors 模块注册到中间件中，必须在路由跳转之前配置

//app.use(‘/’,indexRouter) ;

//app.use(‘,users’，usersRouter) ;

第四步：配置 nodemon 启动

在 pageage.json 文件中配置 scripts 命令：

“scripts”: {

“start”: “nodemon ./bin/www”

}

第五步：启动项目（端口 3000）：

npm start

3、开发服务端接口

---

server文件中创建文件搭建目录

↓ server

→ db //用于链接数据库

→ index.js

→ models //模块 用于创建数据模型

→ crud // 用于增删改查 缩写

→ index.js

3.1、连接数据库

第一步：在 db/index.js 中封装连接数据库的函数：

//引入mongoose

//下载地址~官网 ： https://www.mongodb.com/

// 前端教程网：https://web1024.cn/tool

var mongoose = require(‘mongoose’)

/**

• 声明一个函数，用于连接数据库的函数

*/

function dbConnect(){

// mongoose 是异步 返回一个 promise 对象

// mongodb 协议链接数据库在哪台机器上，本机：localhost:27017 ；指定链接库的名字：eshop2

mongoose.connect(‘mongodb://localhost:27017/eshop2’,{

//如果数据库中没有这个集合 将会自动创建

useNewUrlParser: true,

useUnifiedTopology: true

//调用 方法接收连接成功之后

}).then(()=>{

console.log(‘数据库连接成功’)

}).catch(err=>{

console.error(‘数据库连接失败’, err)

})

}

//函数抛出

module.exports = dbConnect

在MongoDBCompass.exe可视化中操作：