目录
一、项目简介
基于vue和node.js来开发的一个在线商城管理系统。
1、使用技术
前端:使用vue框架搭建开发
后端:使用Node.js来编写开发
数据库:Mysql
开发工具:VSCode、navicat premium
2、实现的主要功能
用户注册和登录退出
修改用户信息
用户头像上传和更新
用户密码的修改
商品列表的查看和搜索
商品详情查看
添加商品和商品图片上传
商品评论的查看和添加
购物车列表
添加、删除购物车
用户商品收藏列表
用户商品的收藏和取消
用户的添加商品列表
用户的添加商品的删除
3、项目结构
二、开发环境准备
1、安装node.js
Node.js 安装包及源码下载地址为:下载 | Node.js。
你可以根据不同平台系统选择你需要的 Node.js 安装包。
2、安装 MYSQL 数据库
官网下载:MySQL :: Download MySQL Community Server
详细安装方法可以参考:关于使用SSM框架搭建的项目的运行方法_ssm框架怎么运行_不怕麻烦的鹿丸的博客-CSDN博客
3、安装 node.js 的 mysql 驱动
npm install mysql
4、安装 Express 框架
Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具。
使用 Express 可以快速地搭建一个完整功能的网站。
Express 框架核心特性:
可以设置中间件来响应 HTTP 请求。
定义了路由表用于执行不同的 HTTP 请求动作。
可以通过向模板传递参数来动态渲染 HTML 页面。
npm install express --save
以上命令会将 Express 框架安装在当前目录的 node_modules 目录中, node_modules 目录下会自动创建 express 目录。
以下几个重要的模块是需要与 express 框架一起安装的:
-
body-parser - node.js 中间件,用于处理 JSON, Raw, Text 和 URL 编码的数据。
-
cookie-parser - 这就是一个解析Cookie的工具。通过req.cookies可以取到传过来的cookie,并把它们转成对象。
-
multer - node.js 中间件,用于处理 enctype="multipart/form-data"(设置表单的MIME编码)的表单数据,它主要用于上传文件。
$ npm install body-parser --save
$ npm install cookie-parser --save
$ npm install multer --save
5、Node 格式化时间模块Silly-datetime
npm i silly-datetime --save
使用方法:
// 引入模块
var sd = require('silly-datetime');
// 调用方法格式化时间
sd.format(new Date(), 'YYYY-MM-DD HH:mm');
6、安装 nodemon
nodemon 是一种工具,可在检测到目录中的文件更改时通过自动重新启动节点应用程序来帮助开发基于 node.js 的应用程序。
一般只在开发时使用,它最大的长处在于 watch 功能,一旦文件发生变化,就自动重启进程。
特性:
- 自动重新启动应用程序。
- 检测要监视的默认文件扩展名。
- 默认支持 node,但易于运行任何可执行文件,如 python、ruby、make 等。
- 忽略特定的文件或目录。
- 监视特定目录。
- 使用服务器应用程序或一次性运行实用程序和 REPL。
- 可通过 Node require 语句编写脚本。
- 开源,在 github 上可用。
npm i -D nodemon
在 package.json
文件的 script 脚本中指定要需要执行的命令
{
"script": {
"dev": "nodemon app.js"
}
}
# 默认监视当前目录的文件变化
$ nodemon app.js
# 指定主机和端口作为参数,表示在本地 3697 端口启动 node 服务
$ nodemon app.js localhost 3697
三、后端代码
1、入口文件 — index.js
const fs = require('fs');
const path = require('path');
// 引入api路由配置文件
const userApi = require('./api/myApi');
// body-parser - node.js 中间件,用于处理 JSON, Raw, Text 和 URL 编码的数据
const bodyParser = require('body-parser');
// 引入express包
const express = require('express');
// 创建web服务器
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
// 后端api路由
app.use('/api/user', userApi);
// 监听端口
app.listen(3000);
// 在终端打印信息
console.log('success listen at port: 3000......');
2、数据库连接配置文件 —— db.js
// 数据库连接配置
module.exports = {
mysql: {
host: 'localhost', // 主机地址 (默认:localhost)
user: 'root', // 数据库用户名
password: 'root', // 数据库密码
database: 'schoolmarket', // 数据库名
port: '3306' // 端口号 (默认:3306)
}
}
3、api路由配置文件 —— myApi.js
// 引入数据库连接配置
var models = require('../db');
// 引入express包
var express = require('express');
//创建路由器对象
var router = express.Router();
// 引入mysql包
var mysql = require('mysql');
// Multer 是一个 node.js 中间件,用于处理 multipart/form-data 类型的表单数据,它主要用于上传文件
var multer = require('multer');
// 格式化时间模块Silly-datetime
var datetime = require('silly-datetime');
var fs = require('fs');
var path = require('path')
var UUID = require('uuid')
// multer 自定义存储的方式
var storage = multer.diskStorage({
// 保存路径
destination: function (req, file, cb) {
// 注意这里的文件路径,不是相对路径,直接填写从项目根路径开始写就行了
cb(null, 'static/public/uploads')
},
// 保存在 destination 中的文件名
filename: function (req, file, cb) {
var str = file.originalname.split('.');
cb(null, UUID.v1() + '.' + str[1]);
}
})
var upload = multer({storage: storage})
// 连接数据库
var conn = mysql.createConnection(models.mysql);
conn.connect();
// 设置返回response
var jsonWrite = function (res, ret) {
if (typeof ret === 'undefined') {
res.json({
code: '1',
msg: '操作失败'
});
} else {
console.log('ret', ret)
res.json(ret);
}
};
// 下面是api路由的代码
router.get('/xxx', (req, res) => {
// ...
})
router.post('/xxx', (req, res) => {
// ...
})
// 导出路由对象
module.exports = router;
四、各模块功能的后端代码
1、用户注册和登录退出
// 注册用户接口
router.post('/addUser', (req, res) => {
let params = req.body;
conn.query("select * from user where user_id=?", [params.id], function (err, result) {
if (err) {
console.log(err);
}
if (result) {
if (result.length > 0) {
jsonWrite(res, {
code: -1,
msg: '该账号已注册!'
});
} else {
conn.query("INSERT INTO user(user_id,user_nick,gender,password) VALUES(?,?,?,?)", [params.id, params.nick, params.gender, params.password], function (err, result) {
if (err) {
console.log(err);
}
if (result) {
jsonWrite(res, {
code: 200,
msg: '注册用户成功!'
});
}
})
}
}
})
});
// 登录
router.post('/login', (req, res) => {
var params = req.body;
conn.query("select * from user where user_id=?", [params.id], function (err, result) {
if (err) {
console.log(err);
jsonWrite(res, {
code: -1,
msg: '数据库不存在!'
});
}
if (result) {
if (result.length == 0) {
jsonWrite(res, {
code: -1,
msg: '用户名不存在!'
});
} else {
if (result[0].password == params.password) {
// 登录成功
jsonWrite(res, result);
}
else {
jsonWrite(res, {
code: -1,
msg: '密码不正确!'
});
}
}
}
})
});
2、修改用户信息
// 编辑用户信息
router.post('/editProfile', (req, res) => {
let params = req.body;
conn.query("update user set user_nick=?, true_name=?, phone=?, age=?, institute=?, qq=?, wechat=?, selfsign=? where user_id=?", [params.nick, params.truename, params.phone, params.age, params.institute, params.qq, params.wechat, params.selfsign, params.id], function (err, result) {
if (err) {
console.log(err);
}
if (result) {
jsonWrite(res, result);
}
})
});
// 获取用户信息
router.post('/getUserinfo', (req, res) => {
let params = req.body;
conn.query("select * from user where user_id=?", [params.id], function (err, result) {
if (err) {
console.log(err);
}
if (result) {
jsonWrite(res, result);
}
})
});
3、用户头像上传和更新
// 更新用户头像
// upload.single表示单文件上传
router.post('/uploadheadphoto', upload.single('file'), (req, res) => {
let params = req.body;
try{
// fs.unlinkSync()方法用于从文件系统中同步删除文件或符号链接
fs.unlinkSync('static/public/uploads/' + params.oldheadphoto);
} catch (e) {
console.log(e)
}
conn.query("update user set headphoto=? where user_id=?", [req.file.filename, params.id], function (err, result) {
if (err) {
console.log(err);
}
if (result) {
jsonWrite(res, {
'headphoto': req.file.filename
});
}
})
});
4、用户密码的修改
// 修改密码
router.post('/modifyPsd', (req, res) => {
let params = req.body;
conn.query("select * from user where user_id=?", [params.id], function(err,result){
if (err) {
console.log(err);
}
if (result) {
if (result[0].password !=