前后端分离的登录功能(一)

「这是我参与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())
复制代码