两年前的文章,水一下🤣
新建 vue_node
文件夹, 建立子文件夹 serve
, 文件夹下打开 cmd
输入 npm init -y
初始化项目描述文件
package.json
存放项目依赖信息
package-lock.json
存放依赖版本信息
安装项目依赖
npm i express -s
npm install -g nodemon
npm i mongoose -S
npm i body-parser-S
application/x-www-form-urlencoded
、application/json
两种格式的请求体。经过这个中间件后,就可以在所有路由处理器的 req.body
中访问请求参数。
npm i cors -S
在 serve
文件夹中新建 app.js
主入口文件
在 serve
文件夹中新建 model
文件夹用于存放数据库文件
在 serve
文件夹中新建 route
文件夹用于存放路由文件
vue_node
文件夹下打开 cmd
输入 vue create view
cd view
进入文件夹 输入 npm run serve
启动服务
引入 elementUI
组件库 vue add element
删除没用的东西
在 views
文件夹下新建 Register.vue
以及 Index.vue
以及 NotFound.vue
命令行 npm i axios -S
, 安装 axios
//引用express框架
const express = require("express");
//创建网站服务器
const app = express();
//监听端口
app.listen(3000, () => {
console.log("服务器启动成功")
});
//引用express框架
const express = require("express");
//创建注册页面路由
const register = express.Router();
//匹配二级请求路径
register.post("/",(req,res) => {
res.send("hello world")
});
//将路由对象作为模块成员进行导出
module.exports = register;
//引入路由对象
const register = require("./route/register");
//为路由匹配一级请求路径
app.use("/register", register);
//引入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("数据库连接失败"));
//数据库连接
require("./model/connect");
//创建用户集合
//引入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,
}
// 插入一条测试数据
User.create({
account:"17615180174",
password:"12346",
});
已插入测试数据,集合创建成功
//引入body-parser模块 用来处理post请求参数
const bodyParser = require("body-parser");
// 处理post请求参数
app.use(bodyParser.urlencoded({
extended: false
}));
app.use(bodyParser.json({
extended: false
}));
//引入用户集合构造函数
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
中测试结果如下 可以成功返回插入的数据
//引入cors模块 用来解决跨域问题
const cors = require('cors')
//配置cors
app.use(cors())
import Vue from 'vue'
import VueRouter from 'vue-router'
import Register from '../views/Register'
import NotFound from '../views/NotFound'
import Index from '../views/Index'
Vue.use(VueRouter)
const routes = [{
path: '/',//主页面
redirect: '/index'
},
{//主页面
path: '/index',
name: 'Index',
component: Index
},
{//注册页面
path: '/register',
name: 'Register',
component: Register
},
{//未找到
path: '*',
name: 'Not Found',
component: NotFound
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
访问 http://localhost:8080/register 结果如下
访问 http://localhost:8080/index 结果如下
访问 http://localhost:8080/123 结果如下
<template>
<div id="app" class="box">
<h3>注册页面</h3>
<el-form
:model="loginForm"
:rules="rules"
ref="loginForm"
label-width="100px"
class="demo-ruleForm"
>
<el-form-item label="账号" prop="account">
<el-input v-model="loginForm.account"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="loginForm.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('loginForm')">立即创建</el-button>
<el-button @click="resetForm('loginForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
loginForm: {
account: "",
password: ""
},
rules: {
account: [
{ required: true, message: "请输入账号", trigger: "blur" },
],
password: [
{ required: true, message: "请输入密码", trigger: "blur" }
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
alert("submit!");
} else {
console.log("error submit!!");
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
};
</script>
<style scoped>
.box{
width: 500px;
height: 400px;
margin: 100px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 0 5px #eeeeee;
}
h3{
text-align: center;
}
.el-input{
width: 92%;
}
</style>
效果如下
//引入axios
import axios from 'axios'
//存放请求根地址
const http = axios.create({
baseURL: 'http://localhost:3000'
})
export default http;
//引入axios配置文件
import axios from './axios'
//将axios添加到vue原型链上
Vue.prototype.$axios = axios
methods: {
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
// alert("submit!");
this.$axios.post('/register/register',this.loginForm).then(res => {
console.log(res.data)
})
} else {
console.log("error submit!!");
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
控制台输出如下
数据库如下
this.$axios.post('/register/register',this.loginForm).then(res => {
console.log(res.data)
this.$message({
type:'success',
message:'用户注册成功'
})
this.$router.push('/index');
})
再次测试结果如下
跳转到 index
页面并提示用户注册成功
服务器端 register.js
代码修改如下
//注册接口
register.post("/register", async (req, res) => {
// 数据库中查询用户是否存在
const user = await User.findOne({
account: req.body.account
})
if (user) { //如果用户存在
res.json({
isOk:'false',
msg:'用户已经存在'
})
} else { //如果用户不存在 添加此条数据到数据库
const newUser = await User.create(req.body);
//返回结果
res.json({
isOk:'true',
msg:'用户注册成功'
})
}
});
前端 axios
请求代码修改如下
this.$axios.post('/register/register',this.loginForm).then(res => {
//注册成功 跳转至主页 给出提示
if(res.data.isOk == true){
console.log(res.data)
this.$message({
type:'success',
message:res.data.msg
})
this.$router.push('/index');
}else{
//注册失败 用户已存在 不跳转 给出提示
console.log(res.data)
this.$message({
type:'error',
message:res.data.msg
})
}
})
演示结果如下