推广 热搜： 行业机械设备杯经纪教师系统参数金蒸汽

Web前端最全Vue开发一个电商全栈项目，2024前端高级面试题汇总解答

日期：2024-11-10 移动：http://tiush.xhstdz.com/mobile/quote/73582.html

最后

全网独播-价值千万金融项目前端架构实战

从两道网易面试题-分析Javascript底层机制

RESTful架构在Nodejs下的最佳实践

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

一线互联网企业如何初始化项目-做一个自己的vue-cli

思维无价，看我用Nodejs实现MVC

代码优雅的秘诀-用观察者模式深度解耦模块

前端高级实战，如何封装属于自己的JS库

VUE组件库级组件封装-高复用弹窗组件

安装Vuex 数据持久化:

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

cd admin

cnpm i axios --save

cnpm i element-ui --save

cnpm i vuex-persistedstate --save

第二步：精简项目（项目文件夹保留文件）

public 静态资源目录
src
http 封装axios请求
components 封装公共组件
router 路由配置目录
store 状态管理目录
views 封装视图组件
App.vue 根组件
main.js 入口文件
package.json

第三步：在中引入组件库

import ElementUI from ‘element-ui’;

import ‘element-ui/lib/theme-chalk/index.css’;

Vue.use(ElementUI);

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

npm run serve

2.2、创建客户端APP

cmd返回上一级：

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

创建项目命令：( 使用 vue create 命令创建项目，项目名为 app)

注意：创建项目时，app系统选择hash模式（地址带个中#），选择n【 Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)】

进入项目文件夹 :

安装axios请求：

安装组件库：

安装Vuex 数据持久化:

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

cd app

cnpm i axios --save

cnpm i vant --save

cnpm i vuex-persistedstate --save

第二步：精简项目（项目文件夹保留文件）

public 静态资源目录
src
http 封装axios请求
components 封装公共组件
router 路由配置目录
store 状态管理目录
views 封装视图组件
App.vue 根组件
main.js 入口文件
package.json

第三步：在中引入组件库

import Vant from ‘vant’

import ‘vant/lib/index.css’

Vue.use(Vant)

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

npm run serve

2.3、创建服务端

cmd返回上一级：

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

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

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

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

进入项目文件：

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

链接数据库模块：

解决跨域：

全局安装 nodemon 热启动：

指令汇总（除创建项目外（需手动选择项），可全部复制，交给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

第三步：配置跨域请求

在入口文件中引入模块

var express = require(‘express’);

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

//var app = express();

app.use(cors())

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

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

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

第四步：配置启动

在文件中配置命令：

“scripts”: {

“start”: “nodemon https://blog.csdn.net/2401_84620288/article/details/bin/www”

}

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

npm start

3、开发服务端接口

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

↓ server

→ db //用于链接数据库

→ index.js

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

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

→ index.js

3.1、连接数据库

第一步：在中封装连接数据库的函数：

//引入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可视化中操作：

在这里插入图片描述

第二步：在入口文件中调用数据库连接方法：

//引入 db

var dbConnect = require(‘https://blog.csdn.net/2401_84620288/article/details/db’);

//调用方法

dbConnect();//连接数据库

第三步：启动服务

npm start

服务启动成功后，查看cmd 控制台是否输出了 “数据库连接成功” 的内容。

3.2、封装数据模块对象

在目录下创建模型对象文件，

例如：我们要设计一个商品分类的模块，就创建文件，示例代码如下：

//引入

var mongoose = require(‘mongoose’)

let schema = new mongoose.Schema({ // schema 用于定义和数据库中字段相同的属性名称和数据类型

name: String //分类的名称name 属性值是String类型

})

//Classify就是把数据库转换成js后拿到的一个对象，将来做增删改查操作

let Classify = mongoose.model(‘classifys’, schema)

//抛出

module.exports = Classify

例如：我们要设计一个商品的模块，就创建文件，示例代码如下：

var mongoose = require(‘mongoose’)

let schema = new mongoose.Schema({ // schema 用于定义和数据库中字段相同的属性名称和数据类型

title: String, //商晶标题

price: Number, //商品价格

guige: Array, //商品规格

content: String, //商品详情

state: {

type: Number, //Number类型可以多条件设置

default: 1 //商品状态，1为上架，2为下架

},

hot: {

type: Number,

default: 1 //是否为热销商品，1为普通商品，2为热销商品

}

//等等。。。

})

let Goods = mongoose.model(‘goods’, schema)

module.exports = Goods

如果再创建其他模块，参考此步骤。

3.3、设计接口

此处以添加商品分类为例。

第一步：在目录下创建对应的路由文件，例如，示例代码如下：

//对应 3.6.1 接口规范

//没有调用封装的crud，就会每次都要写

var express = require(‘express’);

var router = express.Router();

var Classify = require(‘…/models/classify’);

//添加商品分类 /classify/add

router.post(‘/add’, function(req,res){

//接收参数

let {name} = req.body

//保存到数据库

Classify.create({name}).then(result=>{

if(result){

//添加成功后的响应

res.json({

code: 200, //自定义标识，不是状态码

msg: ‘添加成标识功’

})

}else{

res.json({

code: 300,

msg: ‘添加失败’

})

}

}).catch(err=>{

res.json({

code: 400,

msg: ‘添加时出现异常’

})

//修改分类

router.post(‘/update’, function(req,res){

let C = req.body

if(!c._id){

res.json({

code:300,

msg:‘id参数不能为空！’

})

return

}

crud.update(Classify,{_id:c._id}, {name: c.name,no: c.no},res )

})

//删除分类

router.get(‘/de1’ , function(req,res){

let {_id} = req.query

if(!_id){

res.json({

code:300,

msg:‘id参数不能为空！’

})

return

}

crud.del(Classify,{_id},res)

})

//分页查询

router.get(‘/find’, function(req,res){

//let {page,pagesize,kw,s} = req.query

//let where = {}

//if(kw){

// where = {name: {$regex: kw}}

//}

//let sort = {}

//if(s == 1){

// sort = {no: -1}

//}else if(s == 2){

// sort = {no: 1}

//}

//crud-find(classify,page, pegeSize,where,sart ,res)

let {page,pagesize,sort = 1} = req.query //sort 排序 1降序 2升序，有值的话按值，没值的话按默认值

//s为排序的条件对象

let s = {}

if(sort == 1){

s = {no: -1}

}else if(sort == 2){

s = {no: 1}

}

crud.find(Classify,page, pegeSize,{},s ,res)

})

//非分页查询

router.get(‘/query’, function(req,res){

let {sort = 1} = req.query //sort 排序 1降序 2升序，有值的话按值，没值的话按默认值

//s为排序的条件对象

let s = {}

if(sort == 1){

s = {no: -1}

}else if(sort == 2){

s = {no: 1}

}

crud.query(Classify,{},s ,res)

})

module.exports = router;

在这里插入图片描述

第二步：

在入口文件引入路由，示例代码如下：

//引入路由文件

var classifyRouter = require(‘https://blog.csdn.net/2401_84620288/article/details/routes/classify’);

//配置一个路由

app.use(‘/classify’, classifyRouter);

第三步：在工具中测试路由是否可用：

在这里插入图片描述

http://localhost:3000/classify/add

{

“name”: “男装”

}

{

code: 200,

msg: ‘添加成功’

}

在这里插入图片描述

3.4、封装CRUD（封装好的可以直接拿出来用）

公共方法，写一遍不用动直接就可以用

在中封装增删改查的方法，示例代码如下：

添加的功能方法：

function add(model,params,res){

model.create(params).then(result=>{

if(result){

//添加成功后的响应

res.json({

code: 200,

msg: ‘添加成功’

})

}else{

res.json({

code: 300,

msg: ‘添加失败’

})

}

}).catch(err=>{

res.json({

code: 400,

msg: ‘添加时出现异常’

})

}

修改的公共方法：

function update(model,where,params,res){

// 修改的时候传入两个条件（修改的条件，修改的值）返回一个result

model.updateOne(where,params).then(result=>{

//result 里面放的是修改结果的对象

//result里面有个对象 n ，n>0 证明修改成功了很多条，n是几就是几条

//else 就是修改失败

//catch 就是修改时出现异常

if(result.n > 0){

res.json({

code: 200,

msg: ‘修改成功’

})

}else{

res.json({

code: 300,

msg: ‘修改失败’

})

}

}).catch(err=>{

res.json({

code: 400,

msg: ‘修改时出现异常’

})

}

删除的公共方法：

function del(model,where,res){

model.findoneAndDelete(where).then(result=>{

if(result){

//添加成功后的响应

res.json({

code: 200,

msg: ‘删除成功’

})

}else{

res.json({

code: 300,

msg: ‘删除失败’

})

}

}).catch(err=>{

res.json({

code: 400,

msg: ‘删除时出现异常’

})

}

分页查询公共方法：（与上面不分页查询按需要选其一即可）

async function find(model,page,pageSize,where,sort,res){

//判断page是否存在

if(!page){

page = 1

}else{

page = parseInt(page)

if(isNaN(page)){ //非数字

page = 1

}else{ //是数字

if(page < 1){

page = 1

}

//判断pageSize是否为空

if(!pageSize){

pageSize = 10

}else{

//默认每页10条，如果进行赋值，每页最低每5条换页，最多不超过30条换页

pageSize = parseInt(pageSize)

if(isNaN(pageSize)){ //非数字

pageSize = 10

}else{ //是数字

if(pageSize < 5){

pageSize = 5

}else if(pageSize > 30){

pageSize = 30

}meyiye

}

//计算总页数，总页数 = Math.ceil(总记录数 ÷ 每页条数)

let count = 0

await model.find(where).countdocuments().then(result=>{

count = result

})

// await model.find(where).count().then(result=>{

// count = result

// })

//如果上一步还没执行完，就执行下一步，就会出错，所以要把异步变同步，所以要在上一步和执行查询操作前面加上 await

//总页数 totalPage

let totalPage = Math.ceil(count/pageSize)

//判断当前页码是否大于总页数

//如果一条都没有的话，count为0 所以totalPage也会为0（0/每页条数还为0）

if(totalPage > 0 && page > totalPage){

page = totalPage

}

//skip查询的起始位置，起始位置 = （当前页码 - 1）× 每页条数

let start = (page - 1)*pageSize

//执行查询操作

//跳过多少条 skip从哪里开始看 limit看多少条

await model.find(where).sort(sort).skip(start).limit(pageSize).then(result=>{

if(result && result.length > 0){

res.json({

code: 200,

msg: ‘查询成功’,

data: result,

page,

pageSize,

count,

totalPage

})

}else{

res.json({

code: 300,

msg: ‘没有查询到数据’,

data: [],

page,

pageSize,

count,

totalPage

})

}

}).catch(err=>{

res.json({

code: 400,

msg: ‘查询时出现异常’

})

}

非分页查询公共方法：（与下面分页查询按需要选其一即可）

function query(model,where,sort,res){

model.query(where).sort(sort).then(result=>{

if(result && result.length > 0){

res.json({

code: 200,

msg: ‘查询成功’,

data: result

})

}else{

res.json({

code: 300,

msg: ‘没有查询到数据’,

data: []

})

}

}).catch(err=>{

res.json({

code: 400,

msg: ‘查询时出现异常’

})

}

需要在文件中抛出以上函数：

module.exports = {

add, //添加

update, //修改

del, //删除

find, //分页查询

query //非分页查询

}

3.5、将来实现一个功能模块（上面理解，这个要会用）

实现一个用户有关的模块（模型对象，路由在app中的引用，封装好的，写完不用再改，唯一修改的就是，有新的功能写一个新的二级路由）

第一步：创建模型、在文件下创建一个模块

我们要设计一个用户模块，就创建文件，示例代码如下：

（与其他模块不一样的地方，需要改的就是schema里面的属性；集合的名称 users 改成对应的以及抛出对象的名称）

//引入

var mongoose = require(‘mongoose’)

let schema = new mongoose.Schema({ // schema 用于定义和数据库中字段相同的属性名称和数据类型

username: String , //用户的名称

pwd: String //用户密码

})

// users 将来数据库中叫的名字最后一个字母必须s

let Users= mongoose.model(‘users’, schema)

//抛出

module.exports = Users

第二步：创建路由、

在文件下创建一个文件

//通过 express 导入一个路由

var express = require(‘express’);

var router = express.Router();

//抛出一个路由

module.exports = router;

在入口文件引入路由，示例代码如下：

//引入路由文件

var usersRouter = require(‘https://blog.csdn.net/2401_84620288/article/details/routes/users’);

//配置一级路由

app.use(‘/users’, usersRouter );//确定有没有引入成功，可以按住 Ctrl 鼠标放在 usersRouter 上呈现小手状，点击直接跳转到路由界面，能定位到，说明引入成功

第三步：功能接口，在中(如果其他模块直接改掉 Users 对应部分)

//var express = require(‘express’); 这是第一步的内容保留，这里只是为了展示写入位置

//var router = express.Router(); 这是第一步的内容保留，这里只是为了展示写入位置

//保存到数据库里面，导入Users

var Users = require(‘…/models/users’);

//存储数据库的方法全在 crud 里封装着

var crud = require(‘…/crud’);

//与crud里面对应

//添加用户

//通过 post 或 get ， /users 后面 /add 找到这个方法

//服务端路由，就是通过 url地址与一个函数之间的映射

router.post(‘/add’, function(req,res){

//接收参数只要是post请求就用body封装

let {username,pwd} = req.body

//调用自己封装的方法 .add( 放现在操作的模型，添加的数据就是{username=username 直接写username， pwd=pwd直接写pwd },res响应)

crud.add(Users,{username,pwd},res) //可以按住 Ctrl 鼠标放在 add 上呈现小手状，点击直接跳转查看封装思维

//或者写成

//let user = req.body

//crud.add(Users,user，res)

})

//修改用户

router.post(‘/update’, function(req,res){

//接收参数只要是post请求就用body

//user 整个对象

let user = req.body

//数组里只有ID是唯一修改的条件

crud.update(Users,{_id:user._id},{

username:user.username,

pwd:user.pwd

},res)

})

//删除用户

router.get(‘/del’,function(req ,res){

let {_id} = req.query

crud.del(Users,{_id},res)

})

//分页查询

router.get(‘/find’ , function(req,res){

let {page,pageSize} = req.query

//目前没有查询条件，排序不需要所以{}

crud.find(Users,page,pageSize,{},{},res)

})

//module.exports = router; 这是第一步的内容保留，这里只是为了展示写入位置

3.6、接口规范

全局配置：

baseURL: http://localhost:3000

3.6.1、分类管理模块

添加分类：

接口地址（路由，发请求）：/classify/add

请求方法：POST

返回数据格式：JSON

请求参数：

| — | — | — | — |

响应参数：

| — | — | — | — |

修改分类：

接口地址（路由，发请求）：/classify/update

请求方法：POST

返回数据格式：JSON

请求参数：

| — | — | — | — |

| _id | String | 是 | 要修改的分类id |

响应参数：

| — | — | — | — |

删除分类：

接口地址（路由，发请求）：/classify/del

请求方法：GET

返回数据格式：JSON

请求参数：

| — | — | — | — |

| _id | String | 是 | 分类的id |

响应参数：

| — | — | — | — |

分页查询分类：

接口地址：/classify/find

请求方法：GET

返回数据格式：JSON

请求参数：

| — | — | — | — |

响应参数：

| — | — | — | — |

| data | any | [{name:’’,no:’’},{}] | 请求成功返回的数据 |

| totalPage | Number | 50 | 总页数 |

非分页查询所有分类：

接口地址：/classify/query

请求方法：GET

返回数据格式：JSON

请求参数：

| — | — | — | — |

响应参数：

文末

篇幅有限没有列举更多的前端面试题，小编把整理的前端大厂面试题PDF分享出来，一共有269页

本文地址：http://tiush.xhstdz.com/quote/73582.html 物流园资讯网 http://tiush.xhstdz.com/ , 查看更多

特别提示：本信息由相关用户自行提供，真实性未证实，仅供参考。请谨慎采用，风险自负。

0 条相关评论

相关最新动态

推荐最新动态

点击排行

Web前端最全Vue开发一个电商全栈项目，2024前端高级面试题汇总解答

最后

2.2、创建客户端APP

2.3、创建服务端

3.1、连接数据库

3.2、封装数据模块对象

3.3、设计接口

3.4、封装CRUD（封装好的可以直接拿出来用）

3.5、 将来实现一个功能模块（上面理解，这个要会用）

3.6、接口规范

3.6.1、分类管理模块

文末

3.5、将来实现一个功能模块（上面理解，这个要会用）