vue项目创建与MongoDBD的使用
一、创建vue项目(day18)
vue create 项目名称
二、创建后台并下载 express 和 mongoose
如上图myapp为创建的项目,server为后台
将express 和 mongoose下载至后台中
普通下载
npm install --save express mongoose
淘宝镜像
cnpm install --save express mongoose
三、先来设置数据库(使用可视化数据库管理工具进行数据库的创建与集合的创建)
四、开始创建后台
1、创建路由模块
2、创建服务器
3、在服务器中配置路由模块
var express = require("express")
var server = express()
var rlogin = require("./router/rlogin.js")
var rzhuce = require("./router/rzhuce.js")
// 解决跨域
server.use("/", (req, res, next) => {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE,OPTIONS');
next()
})
server.use("/rlogin", rlogin)
server.use("/rzhuce", rzhuce)
server.listen(3000)
4、在前台也就是vue中先把这两个接口测试一下
(1)由于是一个空项目所以 咱们需要把 这个空项目先设置好相关的登录页面与注册页面 并且配置好登录和注册的相关路由
(2)开始设置拦截器 先要下载axios
npm install --save axios
在src下创建util文件在,并在此文件夹下创建一个js文件设置拦截器
注:一下代码是固定写法,不用记,可以直接去axios官网复制,或者用下面的都可以
import axios from "axios"
// 创建axios 赋值给常量service
const service = axios.create();
// 添加请求拦截器(Interceptors)
service.interceptors.request.use(function(config) {
// 发送请求之前做写什么
return config;
}, function(error) {
// 请求错误的时候做些什么
return Promise.reject(error);
});
// 添加响应拦截器
service.interceptors.response.use(function(response) {
// 对响应数据做点什么
return response;
}, function(error) {
// 对响应错误做点什么
return Promise.reject(error);
});
export default service
5、将url也进行封装
在util目录下创建一个js文件用来封装路径
6、设置请求封装,在src目录下创建api文件夹
在封装的请求中引用使用路径
7、解决跨域
注:跨域上面已经写过,但是要注意的是,最后一定要加next()
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE,OPTIONS');
前台都需要吧数据发送给后台 那么后台才可以往数据库进行存储
前端vue 如何通过axios发送数据
Get方式发送数据(简单)
后端接收
接收语法:req.query.xxx
post方式发送数据(难一些)
形参的方式返回给后端
Post方式接收数据(麻烦)
1.需要下载body-parser模块用来解析接受过来的数据 npm install --save body-parser
2.需要在想使用的地方进行引用
3.调用解析功能
4.把这个解析功能的变量插入到路由中
现在前台和后台已经可以正常的使用get/post来进行数据的传递了
在这个时候我们需要完成登录和注册的功能 那么需要把数据往数据库中进行存储
但是在存储之前 我们要考虑 存储的密码 需要加密
Md5加密
1.下载crypto模块:封装了一系列密码学相关的功能 npm i crypto --save下载
2.引用
3.使用
crypto.createHash(‘md5’).update(加密数据).digest(‘hex’);
数据已经准备好了 那么接下来就开始往数据库中进行存储
1、创建db文件夹 用来封装数据库连接操作
2、在需要使用数据库操作的页面中进行引用于使用 在这里是注册操作
day18