2024年Web前端最新Vue开发一个电商全栈项目(2)，最详细的解释小白也能听懂

最后

技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

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

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

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

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

//引入 db

var dbConnect = require(‘./db’);

//调用方法

dbConnect();//连接数据库

第三步：启动服务

npm start

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

3.2、封装数据模块对象

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

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