「这是我参与2022首次更文挑战的第24天,活动详情查看:2022首次更文挑战」
一,准备工作
(1)后端环境搭建
1.新建Vue+node文件夹,建立子文件夹serve,文件夹下打开cmd 输入npm init -y 初始化项目描述文件
①package.json 存放项目依赖信息
②package-lock.json 存放依赖版本信息
2.安装项目依赖
① 名称:express
安装:npm i express -s
作用:后端框架
②名称:nodemon
安装:npm install -g nodemon
作用:代码发生变化自动重启服务
③名称:mongoose
安装:npm i mongoose -S
作用:数据库
④名称:body-parser
安装:npm i body-parser-S
作用:模块会处理application/x-www-form-urlencoded、application/json两种格式的请求体。经过这个中间件后,就可以在所有路由处理器的req.body中访问请求参数
⑤名称:cors
安装:npm i cors -S
作用:解决跨域问题
3.在serve文件夹中新建app.js主入口文件
4.在serve文件夹中新建model文件夹用于存放数据库文件
5.在serve文件夹中新建route文件夹用于存放路由文件
(2)前端环境搭建
1.Vue+node文件夹下打开cmd 输入vue create view 搭建前端环境
2.cd view 进入文件夹 输入 npm run serve 启动服务
3.引入elementUI组件库 vue add element
4.删除没用的东西
5.在views文件夹下新建Register.vue以及Index.vue以及NotFound.vue
6.命令行npm i axios -S 安装axios
二,后端开发
1.配置express框架,创建网站服务器并监听3000端口
//引用express框架
const express = require("express");
//创建网站服务器
const app = express();
//监听端口
app.listen(3000, () => {
console.log("服务器启动成功")
});
复制代码
2.配置注册界面路由,在route文件夹下新建register.js 在此文件中配置注册请求路径
/引用express框架
const express = require("express");
//创建注册页面路由
const register = express.Router();
//匹配二级请求路径
register.post("/",(req,res) => {
res.send("hello world")
});
//将路由对象作为模块成员进行导出
module.exports = register;
复制代码
3.在app.js中引入路由对象并配置一级请求路径
//引入路由对象
const register = require("./route/register");
//为路由匹配一级请求路径
app.use("/register", register);
复制代码
4.命令行输入 nodemon app.js 启动服务
5.浏览器地址访问http://localhost:3000/register 可以看见hello world
6.打开接口调试工具postman 访问localhost:3000/register 同样可以看见hello world
7.在model文件夹下新建connect.js用来连接数据库
//引入mongoose模块
const mongoose = require("mongoose");
//存放数据库地址
const mongoURL = "mongodb://localhost/VueAndNode"
// 避免警告
mongoose.set('useCreateIndex', true);
//连接数据库
mongoose.connect(mongoURL,{ useNewUrlParser: true,useUnifiedTopology: true })
.then(()=>console.log("数据库连接成功"))
.catch(()=>console.log("数据库连接失败"));
复制代码
8.在app.js中引入connect.js进行数据库连接
//数据库连接
require("./model/connect");
复制代码
9.在model文件夹下新建user.js 用来创建用户集合
//创建用户集合
//引入mongoose模块
const mongoose = require("mongoose");
const { Schema, model } = mongoose;
//设定集合规则
const userSchema = new Schema({
account: {
type: String,
required: true,
unique: true //保证账号在插入数据库时不重复
},
password: {
type: String,
required: true
}
});
//创建集合
const User = model("User", userSchema);
//测试数据加在此处
//将用户集合作为模块成员进行导出
module.exports = {
User: User,
}
复制代码
10.通过user.js插入一条测试数据 通过mongodb compass工具查看集合是否建立成功 然后注释掉插入测试数据的代码
// 插入一条测试数据
User.create({
account:"17615180174",
password:"12346",
});
复制代码
已插入测试数据,集合创建成功
11.在app.js中配置body-paser
//引入body-parser模块 用来处理post请求参数
const bodyParser = require("body-parser");
// 处理post请求参数
app.use(bodyParser.urlencoded({
extended: false
}));
app.use(bodyParser.json({
extended: false
}));
复制代码
\
12.在route下的register.js中实现注册接口
//引入用户集合构造函数
const { User } = require("../model/user.js");
//匹配二级请求路径 注册接口
register.post("/register", async (req, res) => {
// 数据库中查询用户是否存在
const user = await User.findOne({
account: req.body.account
})
if (user) { //如果用户存在
return res.status(409).send("用户名已被注册");
} else { //如果用户不存在 添加此条数据到数据库
const newUser = await User.create(req.body);
//返回插入的数据
return res.send(newUser);
}
});
复制代码
在postman中测试结果如下 可以成功返回插入的数据
13.在app.js中配置cors解决跨域问题
//引入cors模块 用来解决跨域问题
const cors = require('cors')
//配置cors
app.use(cors())
复制代码